/* =========================================================
   01) TOKENS
========================================================= */
body.ff-app {
    /* Brand */
    --primary-seed: #1677ff;
    --primary: var(--primary-seed);
    --primary-hover: color-mix(in srgb, var(--primary-seed) 85%, white);
    --primary-active: color-mix(in srgb, var(--primary-seed) 85%, black);
    --on-primary: #ffffff;
    /* Semantic */
    --success: #52c41a;
    --warning: #faad14;
    --error: #ff4d4f;
    --info: var(--primary);
    /* Neutrals */
    --bg: #f5f5f5;
    --surface: #ffffff;
    --surface-2: #fafafa;
    --surface-3: #f0f0f0;
    --text: #1f1f1f;
    --text-muted: #595959;
    --text-disabled: #bfbfbf;
    --border: #d9d9d9;
    --divider: #f0f0f0;
    /* Navigation surfaces (LIGHT theme) */
    --nav-bg: #ffffff;
    --nav-bg-2: #f5f5f5;
    --nav-border: rgba(0,0,0,0.08);
    --nav-text: rgba(0,0,0,0.88);
    --nav-text-muted: rgba(0,0,0,0.60);
    --nav-icon: rgba(0,0,0,0.65);
    --nav-active: var(--primary);
    --nav-active-text: rgba(0,0,0,0.88);
    --nav-active-bg: rgba(22, 119, 255, 0.12);
    --nav-active-border: rgba(22, 119, 255, 0.35);
    --nav-wedge: var(--nav-bg-2); /* Clip-Two triangle/wedge color */
    /* Topbar */
    --topbar-bg: var(--surface);
    --topbar-border: var(--border);
    --topbar-text: var(--text);
    --topbar-text-muted: var(--text-muted);
    --topbar-hover: var(--surface-2);
    /* When a banner image is present, overlay keeps text readable */
    --topbar-overlay-from: rgba(255,255,255,0.78);
    --topbar-overlay-to: rgba(255,255,255,0.92);
    /* Layout */
    --ff-topbar-height: 60px; /* used only for fixed-navbar offset */
    /* Shape / elevation */
    --radius-sm: 6px;
    --radius-md: 10px;
    --shadow-1: 0 6px 18px rgba(0,0,0,0.08);
    /* Focus ring */
    --focus: rgba(22, 119, 255, 0.35);
    /* Perfect-scrollbar thumb */
    --ps-thumb: rgba(0,0,0,0.18);
    /* Let browser draw native controls appropriately */
    color-scheme: light dark;
}

    body.ff-app[data-theme="dark"] {
        /* make primary a touch “brighter” in dark mode */
        --primary: color-mix(in srgb, var(--primary-seed) 70%, white);
        --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
        --primary-active: color-mix(in srgb, var(--primary) 85%, black);
        --on-primary: #0b1220;
        --bg: #0f1115;
        --surface: #151821;
        --surface-2: #1b2030;
        --surface-3: #232a3a;
        --text: #f0f0f0;
        --text-muted: #bfbfbf;
        --text-disabled: #6b7280;
        --border: #2a2f3a;
        --divider: #232a3a;
        /* Navigation surfaces (DARK theme) */
        --nav-bg: #0b0f1a;
        --nav-bg-2: #121a2b;
        --nav-border: rgba(255,255,255,0.10);
        --nav-text: rgba(255,255,255,0.86);
        --nav-text-muted: rgba(255,255,255,0.62);
        --nav-icon: rgba(255,255,255,0.72);
        --nav-active: var(--primary);
        --nav-active-text: #ffffff;
        --nav-active-bg: rgba(64, 150, 255, 0.22);
        --nav-active-border: rgba(64, 150, 255, 0.55);
        --nav-wedge: var(--nav-bg-2);
        /* Topbar */
        --topbar-bg: var(--surface);
        --topbar-border: var(--border);
        --topbar-text: var(--text);
        --topbar-text-muted: var(--text-muted);
        --topbar-hover: var(--surface-2);
        --topbar-overlay-from: rgba(15,17,21,0.55);
        --topbar-overlay-to: rgba(15,17,21,0.75);
        --shadow-1: 0 10px 28px rgba(0,0,0,0.45);
        --focus: rgba(64, 150, 255, 0.45);
        --ps-thumb: rgba(255,255,255,0.22);
    }

/* ===================================================================
   LOGIN THEME – light / dark adaptive
   Target markup: #login-box, .login-container and its children
   Overrides every hard-coded colour with explicit light + dark values
   =================================================================== */

/* ----------  LIGHT MODE (default) ------------------------------- */
#login-box {
    background: var(--surface-2);
    color: var(--text);
}

.login-container {
    background: var(--surface);
    box-shadow: 0 4px 20px var(--nav-border);
}

.login-banner {
    filter: none;
}

.login-form-control {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}

    .login-form-control:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px var(--primary);
    }

.btn-group-login .btn {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

    .btn-group-login .btn.active,
    .btn-group-login .btn:hover {
        background: var(--surface-3); /* subtle fill                 */
        color: var(--primary-active) !important; /* high-contrast var(--primary) text     */
        border-color: var(--primary);
    }

.login-form-button {
    background: var(--primary);
    color: var(--surface);
}

    .login-form-button:hover {
        background: var(--primary);
    }

.track-btn {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--surface-3);
}

    .track-btn:hover {
        background: var(--primary);
        color: var(--surface);
    }

.text-danger {
    color: var(--error) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}



/* ----------  DARK MODE ------------------------------------------ */
/*@media (prefers-color-scheme: dark) {
    #login-box {
        background: var(--text);
        color: var(--surface-3);
    }

    .login-container {
        background: var(--text);
        box-shadow: 0 4px 20px var(--text);
    }

    .login-banner {
        filter: brightness(95%);
    }

    .login-form-control {
        background: var(--text);
        border: 1px solid var(--text);
        color: var(--surface-3);
    }

        .login-form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px var(--primary);
        }

    .btn-group-login .btn {
        background: var(--text);
        color: var(--surface-3);
        border: 1px solid var(--text);
    }

        .btn-group-login .btn.active,
        .btn-group-login .btn:hover {
            background: var(--primary);
            color: var(--surface);
            border-color: var(--primary);
        }

    .login-form-button {
        background: var(--primary);
        color: var(--surface);
    }

        .login-form-button:hover {
            background: var(--primary);
        }

    .track-btn {
        border-color: var(--primary);
        color: var(--primary);
    }

        .track-btn:hover {
            background: var(--primary);
            color: var(--surface);
        }

    .text-danger {
        color: var(--error) !important;
    }

    .text-muted {
        color: var(--text-disabled) !important;
    }
}*/

/* ----------  Shared tweaks -------------------------------------- */
.login-icon {
    color: inherit;
}
/* inherit light/dark fg       */
.btn-eye {
    background: none;
    border: 0;
    padding: 0 8px;
    color: inherit;
}

.password-group {
    position: relative;
}

    .password-group .btn-eye {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
    }

.track-divider {
    border-color: currentColor;
    opacity: .15;
}

.small {
    font-size: 85%;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
    }
}