/* ═══════════════════════════════════════════════════════════════════
   SKIN · FUTURISTIC
   Clean • Professional • Sleek • Glass-morphism • Neon accents
   All rules scoped under body.skin-futuristic #loginView — this file
   has zero effect unless the futuristic skin is active.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── WEB FONTS ───────────────────────────────────────────────────── */
/*  Orbitron       → display / headings (geometric sci-fi)
    Space Grotesk  → body & buttons (modern, clean, techy)
    JetBrains Mono → labels, credentials, metadata (monospace)          */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Typography tokens for this skin */
body.skin-futuristic {
    --fut-font-display: 'Orbitron', 'Space Grotesk', -apple-system, sans-serif;
    --fut-font-body:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fut-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
}

/* ─── GLOBAL LOGIN CANVAS ─────────────────────────────────────────── */
body.skin-futuristic #loginView {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(1200px 700px at 15% 10%, rgba(103, 232, 249, 0.25), transparent 60%),
        radial-gradient(900px 600px at 85% 90%, rgba(167, 139, 250, 0.28), transparent 60%),
        radial-gradient(600px 400px at 50% 50%, rgba(56, 189, 248, 0.12), transparent 70%),
        linear-gradient(135deg, #050816 0%, #0b1120 45%, #0f172a 100%);
    color: #e2e8f0;
    overflow: hidden;
    font-family: var(--fut-font-body);
    font-feature-settings: "ss01", "ss02", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Apply body font broadly inside the login view */
body.skin-futuristic #loginView,
body.skin-futuristic #loginView button,
body.skin-futuristic #loginView input,
body.skin-futuristic #loginView select,
body.skin-futuristic #loginView textarea,
body.skin-futuristic #loginView p,
body.skin-futuristic #loginView a,
body.skin-futuristic #loginView span,
body.skin-futuristic #loginView label {
    font-family: var(--fut-font-body);
}

/* Animated aurora layer */
body.skin-futuristic #loginView::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse 50% 40% at 20% 30%, rgba(34, 211, 238, 0.35), transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(168, 85, 247, 0.35), transparent 60%),
        radial-gradient(ellipse 40% 30% at 60% 20%, rgba(59, 130, 246, 0.25), transparent 65%);
    filter: blur(60px);
    animation: fut-aurora 22s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

/* Subtle grid pattern overlay */
body.skin-futuristic #loginView::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 90%);
    pointer-events: none;
    z-index: 0;
    animation: fut-grid-drift 30s linear infinite;
}

@keyframes fut-aurora {
    0%   { transform: translate(0, 0) rotate(0deg);   opacity: 0.85; }
    50%  { transform: translate(3%, -2%) rotate(4deg); opacity: 1; }
    100% { transform: translate(-2%, 3%) rotate(-3deg); opacity: 0.9; }
}

@keyframes fut-grid-drift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 48px 48px, 48px 48px; }
}

body.skin-futuristic #loginView > * { position: relative; z-index: 1; }

/* ─── HEADER ──────────────────────────────────────────────────────── */
body.skin-futuristic #loginView .header {
    background: transparent !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: none;
}

body.skin-futuristic #loginView .logo-image {
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(103, 232, 249, 0.5));
    transition: filter 0.4s ease;
}
body.skin-futuristic #loginView .logo:hover .logo-image {
    filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(103, 232, 249, 0.9));
}

body.skin-futuristic #loginView .language-btn {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid rgba(103, 232, 249, 0.25) !important;
    color: #e2e8f0 !important;
    font-family: var(--fut-font-mono) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}
body.skin-futuristic #loginView .language-btn:hover {
    border-color: rgba(103, 232, 249, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.12),
                0 0 20px rgba(103, 232, 249, 0.25);
}

body.skin-futuristic #loginView .language-dropdown {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(103, 232, 249, 0.2) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(103, 232, 249, 0.08);
}
body.skin-futuristic #loginView .language-option,
body.skin-futuristic #loginView .language-option-hub {
    color: #cbd5e1 !important;
    font-family: var(--fut-font-mono) !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.06em !important;
}
body.skin-futuristic #loginView .language-option:hover:not(.disabled) {
    background: rgba(103, 232, 249, 0.1) !important;
    color: #67e8f9 !important;
}
body.skin-futuristic #loginView .language-group-title {
    color: #a78bfa !important;
    font-family: var(--fut-font-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase;
}

/* ─── LOGIN CARD — GLASS MORPHISM ─────────────────────────────────── */
body.skin-futuristic #loginView .login-container {
    position: relative;
    background: rgba(15, 23, 42, 0.55) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(103, 232, 249, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    animation: fut-card-in 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Rotating conic-gradient border accent */
body.skin-futuristic #loginView .login-container::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    padding: 2px;
    background: conic-gradient(from 0deg,
        transparent 0deg, transparent 200deg,
        rgba(103, 232, 249, 0.55) 240deg,
        rgba(167, 139, 250, 0.55) 280deg,
        transparent 320deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: fut-border-spin 8s linear infinite;
    pointer-events: none;
}

@keyframes fut-border-spin { to { transform: rotate(360deg); } }

@keyframes fut-card-in {
    from { opacity: 0; transform: translateY(24px) scale(0.98); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0)    scale(1);     filter: blur(0); }
}

/* ─── HEADINGS ────────────────────────────────────────────────────── */
body.skin-futuristic #loginView .login-header h1 {
    color: #f8fafc !important;
    font-family: var(--fut-font-display) !important;
    font-weight: 700 !important;
    font-size: 1.85rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    background: linear-gradient(135deg, #67e8f9 0%, #e2e8f0 50%, #a78bfa 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fut-gradient-shift 6s ease-in-out infinite;
    background-size: 200% 200%;
    text-shadow: 0 0 40px rgba(103, 232, 249, 0.15);
}

@keyframes fut-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

body.skin-futuristic #loginView .login-header p {
    color: #94a3b8 !important;
    font-family: var(--fut-font-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
}

/* Blinking caret after the subtitle for a terminal feel */
body.skin-futuristic #loginView .login-header p::after {
    content: "_";
    display: inline-block;
    margin-left: 0.25em;
    color: #67e8f9;
    animation: fut-caret-blink 1.1s step-end infinite;
}

@keyframes fut-caret-blink {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ─── FORM FIELDS ─────────────────────────────────────────────────── */
body.skin-futuristic #loginView .form-label {
    color: #67e8f9 !important;
    font-family: var(--fut-font-mono) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
}

/* Chevron prefix on labels for a command-line vibe */
body.skin-futuristic #loginView .form-label::before {
    content: "> ";
    color: #a78bfa;
    font-weight: 600;
    opacity: 0.85;
}

body.skin-futuristic #loginView .form-input {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    color: #f1f5f9 !important;
    font-family: var(--fut-font-mono) !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.02em !important;
    border-radius: 12px !important;
    padding: 0.85rem 1rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(6px);
}
body.skin-futuristic #loginView .form-input::placeholder {
    color: #64748b !important;
    font-family: var(--fut-font-mono) !important;
    font-style: normal;
    letter-spacing: 0.05em;
}

body.skin-futuristic #loginView .form-input:focus {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: #67e8f9 !important;
    box-shadow:
        0 0 0 4px rgba(103, 232, 249, 0.15),
        0 0 20px rgba(103, 232, 249, 0.2) !important;
    transform: none !important;
}

body.skin-futuristic #loginView .toggle-password { color: #94a3b8 !important; }
body.skin-futuristic #loginView .toggle-password:hover { color: #67e8f9 !important; }

body.skin-futuristic #loginView .form-checkbox label {
    color: #cbd5e1 !important;
    font-family: var(--fut-font-mono) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
}
body.skin-futuristic #loginView .form-checkbox input[type="checkbox"] {
    accent-color: #67e8f9;
}

/* ─── BUTTONS ─────────────────────────────────────────────────────── */
body.skin-futuristic #loginView .btn-primary {
    position: relative;
    background: linear-gradient(135deg, #0891b2 0%, #7c3aed 100%) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(103, 232, 249, 0.4) !important;
    border-radius: 12px !important;
    font-family: var(--fut-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    padding: 0.9rem 1.5rem !important;
    overflow: hidden;
    box-shadow:
        0 6px 20px rgba(14, 165, 233, 0.35),
        0 0 0 1px rgba(103, 232, 249, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-transform: uppercase;
    font-size: 0.82rem !important;
}

body.skin-futuristic #loginView .btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%);
    transition: left 0.6s ease;
}
body.skin-futuristic #loginView .btn-primary:hover::before { left: 100%; }

body.skin-futuristic #loginView .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 12px 32px rgba(14, 165, 233, 0.5),
        0 0 0 1px rgba(103, 232, 249, 0.45),
        0 0 30px rgba(103, 232, 249, 0.3) !important;
}

body.skin-futuristic #loginView .btn-primary:active {
    transform: translateY(0) !important;
}

body.skin-futuristic #loginView .btn-secondary {
    background: rgba(15, 23, 42, 0.6) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    border-radius: 12px !important;
    font-family: var(--fut-font-mono) !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    transition: all 0.22s ease !important;
}
body.skin-futuristic #loginView .btn-secondary:hover {
    border-color: rgba(103, 232, 249, 0.55) !important;
    color: #67e8f9 !important;
    background: rgba(15, 23, 42, 0.85) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(103, 232, 249, 0.15);
}

/* ─── DIVIDER & DEMO CREDENTIALS ──────────────────────────────────── */
body.skin-futuristic #loginView .divider {
    color: #64748b !important;
}
body.skin-futuristic #loginView .divider::before,
body.skin-futuristic #loginView .divider::after {
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.3), transparent) !important;
    height: 1px !important;
}
body.skin-futuristic #loginView .divider span {
    background: transparent !important;
    color: #67e8f9 !important;
    font-family: var(--fut-font-mono) !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
}

body.skin-futuristic #loginView .demo-credentials {
    background: rgba(15, 23, 42, 0.55) !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    border-radius: 12px !important;
    color: #cbd5e1 !important;
    font-family: var(--fut-font-mono) !important;
    font-size: 0.82rem !important;
    backdrop-filter: blur(8px);
}
body.skin-futuristic #loginView .demo-credentials h3 {
    color: #67e8f9 !important;
    font-family: var(--fut-font-display) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase;
}
body.skin-futuristic #loginView .demo-credentials strong {
    color: #f1f5f9 !important;
    font-family: var(--fut-font-mono) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}
body.skin-futuristic #loginView .demo-credentials p {
    color: #94a3b8 !important;
    font-family: var(--fut-font-mono) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.02em !important;
}

/* ─── FOOTER ──────────────────────────────────────────────────────── */
body.skin-futuristic #loginView .footer {
    background: transparent !important;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    color: #64748b;
}
body.skin-futuristic #loginView .footer-link {
    color: #94a3b8 !important;
    font-family: var(--fut-font-mono) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    transition: color 0.2s ease;
}
body.skin-futuristic #loginView .footer-link:hover { color: #67e8f9 !important; }
body.skin-futuristic #loginView .footer p {
    color: #64748b !important;
    font-family: var(--fut-font-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
}

/* ─── ALERTS ──────────────────────────────────────────────────────── */
body.skin-futuristic #loginView .alert {
    backdrop-filter: blur(8px);
    border-radius: 10px !important;
}

/* ─── SKIN PICKER overrides (so it reads on the dark canvas) ──────── */
body.skin-futuristic .skin-picker {
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(103, 232, 249, 0.25) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(103, 232, 249, 0.15);
}