:root {
    --z-primary: #4F46E5;
    --z-primary-hover: #4338CA;
    --z-secondary: #0F172A;
    --z-success: #10B981;
    --z-danger: #EF4444;
    --z-warning: #F59E0B;
    --z-info: #3B82F6;
    --z-bg-page: #F8FAFC;
    --z-bg-card: #FFFFFF;
    --z-text-main: #1E293B;
    --z-text-muted: #64748B;
    --z-border: #E2E8F0;
    --z-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --z-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --z-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --z-radius-md: 0.5rem;
    --z-radius-lg: 0.75rem;
    --z-radius-xl: 1rem;
    --z-safe-top: env(safe-area-inset-top, 0px);
    --z-safe-bottom: env(safe-area-inset-bottom, 0px);
    --z-safe-left: env(safe-area-inset-left, 0px);
    --z-safe-right: env(safe-area-inset-right, 0px);
}

/* ========================================================================== */
/* GLOBAL                                                                     */
/* ========================================================================== */
body, .text-body1, .text-body2, .text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6, .q-btn, .q-input, .q-field, .q-table {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    color: var(--z-text-main);
}
body {
    background-color: var(--z-bg-page) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: contain;
}
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

/* Safe areas */
.q-header { padding-top: var(--z-safe-top) !important; }
.q-footer { padding-bottom: var(--z-safe-bottom) !important; }
.q-drawer { padding-top: var(--z-safe-top) !important; padding-bottom: var(--z-safe-bottom) !important; }
.q-page-container { padding-bottom: var(--z-safe-bottom) !important; }

/* ========================================================================== */
/* CARDS                                                                      */
/* ========================================================================== */
.zenith-card {
    background-color: var(--z-bg-card) !important;
    border: 1px solid var(--z-border) !important;
    border-radius: var(--z-radius-lg) !important;
    box-shadow: var(--z-shadow-md) !important;
    transition: box-shadow 0.2s ease-in-out;
    overflow: hidden;
}
.zenith-card:hover { box-shadow: var(--z-shadow-lg) !important; }
.border-radius-lg { border-radius: var(--z-radius-lg) !important; }

/* Module grid cards — the link IS the card */
.zenith-module-card {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 80px;
    padding: 20px 12px !important;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.zenith-module-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--z-shadow-lg) !important;
    text-decoration: none !important;
    color: inherit !important;
}
.zenith-module-card:active {
    transform: translateY(0);
    box-shadow: var(--z-shadow-sm) !important;
}
@media (pointer: coarse) {
    .zenith-module-card:hover { transform: none; }
    .zenith-module-card:active { transform: scale(0.97); }
}

/* ========================================================================== */
/* BUTTONS                                                                    */
/* ========================================================================== */
.q-btn {
    border-radius: var(--z-radius-md) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    transition: all 0.15s ease !important;
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
}
.q-btn:hover { transform: translateY(-1px); box-shadow: var(--z-shadow-md); }
.q-btn:active { transform: translateY(0); box-shadow: var(--z-shadow-sm); }

/* Inline/dense buttons keep smaller size */
.q-btn--dense { min-height: 36px; min-width: 36px; }

/* ========================================================================== */
/* TABLES                                                                     */
/* ========================================================================== */
.q-table__container {
    border-radius: var(--z-radius-md) !important;
    border: 1px solid var(--z-border) !important;
    box-shadow: var(--z-shadow-sm) !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.q-table th {
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    font-size: 0.82rem !important;
    border-bottom: 2px solid var(--z-border) !important;
    background-color: #F1F5F9 !important;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.q-table td {
    color: var(--z-text-main) !important;
    border-bottom: 1px solid var(--z-border) !important;
}
.q-table tbody tr:hover { background-color: #F8FAFC !important; }
.q-table tbody tr:active { background-color: #EEF2FF !important; }

/* ========================================================================== */
/* FORM FIELDS                                                                */
/* ========================================================================== */
.q-field {
    width: 100%;
    flex-grow: 1 !important;
    min-width: 120px;
}
.q-field__control {
    min-height: 44px !important;
    border-radius: var(--z-radius-md) !important;
}
.q-field__native, .q-field__input {
    min-height: 24px !important;
    font-size: 16px !important;
}
.q-field--standard .q-field__control::before { border-bottom-color: var(--z-border); }

/* Touch-friendly list items and tabs */
.q-item { min-height: 48px !important; }
.q-tab { min-height: 48px !important; }

/* Focus outlines */
:focus-visible { outline: 2px solid var(--z-primary) !important; outline-offset: 2px; }
a, .q-item, .q-btn { -webkit-touch-callout: none; }

/* ========================================================================== */
/* HEADER / TOOLBAR                                                           */
/* ========================================================================== */
.q-toolbar { gap: 2px; }
.q-toolbar .q-btn--round, .q-toolbar .q-btn--dense {
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 4px !important;
}

/* ========================================================================== */
/* DRAWER / SIDEBAR                                                           */
/* ========================================================================== */
.q-drawer .q-item {
    border-radius: var(--z-radius-md);
    margin: 1px 8px;
    padding: 8px 12px !important;
    min-height: 44px !important;
}
.q-drawer .q-item:active { background: #EEF2FF !important; }
.q-drawer .q-item--active { background: #EEF2FF !important; color: var(--z-primary) !important; font-weight: 600; }

/* ========================================================================== */
/* FORM LAYOUTS                                                               */
/* ========================================================================== */
.form-single-outer .row, .form-single-outer .container-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.form-single-outer .row > div, .form-single-outer .container-row > div {
    min-width: 0;
}

/* ========================================================================== */
/* LOGIN PAGE MOBILE                                                          */
/* ========================================================================== */
@media screen and (max-width: 480px) {
    body.Login {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    }
    #content.Login {
        padding: 16px !important;
        align-items: flex-start !important;
        padding-top: calc(var(--z-safe-top) + 24px) !important;
    }
    .login-card {
        padding: 24px 20px !important;
        border-radius: 14px !important;
        max-width: 100% !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
    }
    .login-logo { margin-bottom: 20px !important; }
    .login-logo svg { height: 44px !important; }
    .login-logo p { font-size: 13px !important; }
    .login-card .nav-tabs { margin-bottom: 20px !important; }
    .login-card .nav-tabs > li > a {
        font-size: 11px !important;
        padding: 10px 4px !important;
        letter-spacing: 0.3px !important;
    }
    .login-card input, .login-card .form-control {
        padding: 12px 14px !important;
        font-size: 16px !important;
        margin-bottom: 14px !important;
        border-radius: 8px !important;
    }
    .login-card .btn-primary, .login-card .btn-danger {
        padding: 13px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
    }
    .login-card .btn-primary:hover, .login-card .btn-danger:hover {
        transform: none !important;
    }
    #TestLoginLink {
        bottom: calc(var(--z-safe-bottom) + 12px) !important;
    }
}

/* ========================================================================== */
/* PWA STANDALONE                                                             */
/* ========================================================================== */
@media (display-mode: standalone) {
    .q-header { padding-top: var(--z-safe-top) !important; }
    body.Login { padding-top: var(--z-safe-top) !important; }
    #content.Login { padding-top: calc(var(--z-safe-top) + 24px) !important; }
}

/* ========================================================================== */
/* TABLET (601px - 1024px)                                                    */
/* ========================================================================== */
@media screen and (max-width: 1024px) {
    .q-page-container { padding-left: 4px !important; padding-right: 4px !important; }
    .container-row .row-col { padding: 4px !important; }
    .zenith-card { border-radius: var(--z-radius-md) !important; }
    .q-toolbar-title { font-size: 1rem !important; }
    .text-h3 { font-size: 1.5rem !important; }
    .text-h4 { font-size: 1.25rem !important; }
    .text-h5 { font-size: 1.1rem !important; }
}

/* ========================================================================== */
/* MOBILE (below 600px)                                                       */
/* ========================================================================== */
@media screen and (max-width: 600px) {
    /* Page container */
    .q-page-container { margin: 0 !important; padding: 0 2px !important; }
    .q-page { padding: 4px 0 !important; }
    .q-ma-sm { margin: 2px !important; }

    /* Force single column layout */
    .container-row { flex-direction: column !important; }
    .container-row .row-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 2px 4px !important;
    }

    /* Cards */
    .zenith-card {
        border-radius: 10px !important;
        margin-bottom: 8px !important;
    }
    .zenith-card:hover { box-shadow: var(--z-shadow-md) !important; transform: none !important; }

    /* Spacing overrides */
    .q-pa-lg { padding: 12px !important; }
    .q-pa-xl { padding: 14px !important; }
    .q-mb-lg { margin-bottom: 10px !important; }
    .q-mb-md { margin-bottom: 8px !important; }
    .q-mt-md { margin-top: 8px !important; }
    .q-mt-lg { margin-top: 10px !important; }

    /* Typography */
    .text-h3 { font-size: 1.2rem !important; }
    .text-h4 { font-size: 1.05rem !important; }
    .text-h5 { font-size: 0.95rem !important; }
    .text-h6 { font-size: 0.85rem !important; }
    .text-body1 { font-size: 0.9rem !important; }
    .text-body2 { font-size: 0.82rem !important; }

    /* Toolbar */
    .q-toolbar {
        min-height: 48px !important;
        padding: 0 4px !important;
    }
    .q-toolbar .q-btn--dense {
        padding: 6px !important;
        min-height: 38px !important;
        min-width: 38px !important;
    }
    .q-toolbar-title {
        font-size: 0.9rem !important;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Hide breadcrumbs on mobile */
    .q-toolbar .gt-xs { display: none !important; }
    /* Shrink logo on mobile */
    .q-toolbar img { height: 26px !important; }
    .q-toolbar .q-space { flex-grow: 0 !important; min-width: 4px; }

    /* Group toolbar action buttons tighter */
    .q-toolbar > .q-btn + .q-btn { margin-left: -2px; }

    /* Drawer */
    .q-drawer { width: 280px !important; }
    .q-drawer .q-item {
        margin: 1px 4px !important;
        padding: 10px 12px !important;
        font-size: 0.9rem !important;
    }
    .q-drawer__backdrop { backdrop-filter: blur(2px); }

    /* Full-width form fields */
    .q-field { min-width: 100% !important; }
    .form-single-outer .row > div,
    .form-single-outer .container-row > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Tables */
    .q-table__container {
        border-radius: 8px !important;
        margin: 0 -2px;
    }
    .q-table th, .q-table td {
        padding: 8px 6px !important;
        font-size: 0.78rem !important;
    }
    .q-table th:first-child, .q-table td:first-child { padding-left: 10px !important; }
    /* Scroll hint shadow on tables */
    .q-table__container::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 20px;
        background: linear-gradient(to left, rgba(0,0,0,0.04), transparent);
        pointer-events: none;
        z-index: 2;
    }

    /* Dialogs full-width on mobile */
    .q-dialog__inner--minimized > div {
        max-width: 96vw !important;
        width: 96vw !important;
        margin: 8px !important;
    }
    .q-dialog__inner > div { border-radius: 12px !important; }

    /* Select/dropdown bigger touch target */
    .q-select__dropdown-icon { font-size: 24px !important; }

    /* Footer */
    .q-footer {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
        padding-bottom: calc(var(--z-safe-bottom) + 4px) !important;
    }

    /* Pagination */
    .q-table__bottom { flex-wrap: wrap; justify-content: center; gap: 4px; }
    .q-table__bottom .q-btn { min-height: 36px !important; min-width: 36px !important; }

    /* Tabs */
    .q-tabs { min-height: 40px !important; }
    .q-tab { min-height: 40px !important; padding: 0 8px !important; font-size: 0.82rem !important; }
    .q-tab__label { font-size: 0.82rem !important; }

    /* AI Copilot hide on mobile - too intrusive */
    #ai-copilot-container { display: none !important; }

    /* Notification/menu popups */
    .q-menu { max-width: 90vw !important; }

    /* Container panels */
    .container-panel-header { padding: 8px 12px !important; }

    /* KPI stat cards */
    .row.items-center.justify-between {
        gap: 8px;
    }
    .row.items-center.justify-between .text-h4 {
        font-size: 1.3rem !important;
    }
}

/* ========================================================================== */
/* VERY SMALL PHONES (below 360px)                                            */
/* ========================================================================== */
@media screen and (max-width: 360px) {
    .q-toolbar-title { font-size: 0.82rem !important; max-width: 80px; }
    .q-toolbar img { height: 22px !important; }
    .text-h3 { font-size: 1.05rem !important; }
    .text-h4 { font-size: 0.95rem !important; }
    .text-h5 { font-size: 0.85rem !important; }
    .q-pa-lg { padding: 10px !important; }
    .q-pa-xl { padding: 12px !important; }
    .q-table th, .q-table td { font-size: 0.72rem !important; padding: 6px 4px !important; }
    .q-drawer { width: 260px !important; }
    .q-toolbar .q-btn--dense { min-height: 34px !important; min-width: 34px !important; }

    /* Login */
    .login-card { padding: 20px 16px !important; }
    .login-card .nav-tabs > li > a { font-size: 10px !important; padding: 8px 2px !important; }
}

/* ========================================================================== */
/* LANDSCAPE PHONES                                                           */
/* ========================================================================== */
@media screen and (max-height: 450px) and (orientation: landscape) {
    .q-header .q-toolbar { min-height: 40px !important; }
    .q-footer { display: none !important; }
    .q-page-container { padding-top: 0 !important; }
    .q-drawer { padding-top: 0 !important; }
    #ai-copilot-container { display: none !important; }
}

/* ========================================================================== */
/* MEDIUM PHONES (401-600px) - common sizes like iPhone 12/13/14              */
/* ========================================================================== */
@media screen and (min-width: 401px) and (max-width: 600px) {
    .zenith-card { border-radius: 12px !important; }
    .q-pa-lg { padding: 14px !important; }
}

/* ========================================================================== */
/* PRINT                                                                      */
/* ========================================================================== */
@media print {
    .q-header, .q-footer, .q-drawer, .q-btn,
    #ai-copilot-container, .q-loading-bar,
    #zeta-offline-banner, #zeta-sync-badge { display: none !important; }
    .q-page-container { margin: 0 !important; padding: 0 !important; }
    .zenith-card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
    body { background: white !important; color: black !important; font-size: 12pt !important; }
    .q-table th, .q-table td { border: 1px solid #ccc !important; }
}

/* ========================================================================== */
/* iOS FIXES                                                                  */
/* ========================================================================== */
@supports (-webkit-touch-callout: none) {
    input, select, textarea { font-size: 16px !important; }
    .q-drawer__content, .q-page, .q-table__container { -webkit-overflow-scrolling: touch; }
    .q-layout { min-height: -webkit-fill-available; }
    body.Login { min-height: -webkit-fill-available; }
    /* Prevent pull-to-refresh on iOS when in standalone mode */
    @media (display-mode: standalone) {
        body { overscroll-behavior-y: none; }
    }
}

/* ========================================================================== */
/* DARK MODE                                                                  */
/* ========================================================================== */
body.body--dark {
    --z-bg-page: #111118;
    --z-bg-card: #1A1A24;
    --z-bg-card-elevated: #22222E;
    --z-text-main: #E2E4EA;
    --z-text-muted: #8B8FA4;
    --z-border: #2A2A3A;
    --z-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --z-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
    --z-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.6);
    --z-primary: #818CF8;
    --z-primary-hover: #6366F1;
    color-scheme: dark;
}

/* Page background */
body.body--dark {
    background-color: var(--z-bg-page) !important;
    color: var(--z-text-main) !important;
}
body.body--dark .q-page-container { background-color: var(--z-bg-page) !important; }
body.body--dark .q-page { background-color: var(--z-bg-page) !important; }

/* Header/toolbar */
body.body--dark .q-header { background: #0D0D14 !important; border-bottom: 1px solid var(--z-border) !important; }
body.body--dark .q-toolbar { color: var(--z-text-main) !important; }

/* Footer */
body.body--dark .q-footer { background: #0D0D14 !important; border-top: 1px solid var(--z-border) !important; color: var(--z-text-muted) !important; }

/* Cards */
body.body--dark .zenith-card,
body.body--dark .container-box,
body.body--dark .q-card {
    background-color: var(--z-bg-card) !important;
    border-color: var(--z-border) !important;
    color: var(--z-text-main) !important;
    box-shadow: var(--z-shadow-md) !important;
}
body.body--dark .zenith-card:hover,
body.body--dark .q-card:hover { box-shadow: var(--z-shadow-lg) !important; }
body.body--dark .container-box .container-box-header {
    background-color: var(--z-bg-card-elevated) !important;
    border-bottom-color: var(--z-border) !important;
    color: var(--z-text-main) !important;
}

/* Dashboard KPI cards with bg-white */
body.body--dark [class*="bg-white"] {
    background-color: var(--z-bg-card) !important;
}
body.body--dark .shadow-1 { box-shadow: var(--z-shadow-sm) !important; }
body.body--dark .shadow-2 { box-shadow: var(--z-shadow-md) !important; }

/* Module grid cards */
body.body--dark .zenith-module-card {
    background-color: var(--z-bg-card-elevated) !important;
    border: 1px solid var(--z-border) !important;
    color: var(--z-text-main) !important;
}
body.body--dark .zenith-module-card:hover {
    background-color: #2A2A3A !important;
    border-color: #3A3A4E !important;
}

/* Dark mode - per-color module card backgrounds */
body.body--dark .zenith-module-card.bg-green-1 { background-color: #1a2e1a !important; border-color: #2d4a2d !important; }
body.body--dark .zenith-module-card.bg-indigo-1 { background-color: #1a1a2e !important; border-color: #2d2d4a !important; }
body.body--dark .zenith-module-card.bg-blue-1 { background-color: #1a2028 !important; border-color: #2d3a4a !important; }
body.body--dark .zenith-module-card.bg-purple-1 { background-color: #241a2e !important; border-color: #3a2d4a !important; }
body.body--dark .zenith-module-card.bg-orange-1 { background-color: #2e241a !important; border-color: #4a3a2d !important; }
body.body--dark .zenith-module-card.bg-red-1 { background-color: #2e1a1a !important; border-color: #4a2d2d !important; }
body.body--dark .zenith-module-card.bg-teal-1 { background-color: #1a2e28 !important; border-color: #2d4a42 !important; }
body.body--dark .zenith-module-card.bg-cyan-1 { background-color: #1a282e !important; border-color: #2d424a !important; }
body.body--dark .zenith-module-card.bg-amber-1 { background-color: #2e2a1a !important; border-color: #4a442d !important; }
body.body--dark .zenith-module-card.bg-lime-1 { background-color: #242e1a !important; border-color: #3a4a2d !important; }
body.body--dark .zenith-module-card.bg-pink-1 { background-color: #2e1a24 !important; border-color: #4a2d3a !important; }
body.body--dark .zenith-module-card.bg-deep-purple-1 { background-color: #201a2e !important; border-color: #362d4a !important; }
body.body--dark .zenith-module-card.bg-light-blue-1 { background-color: #1a242e !important; border-color: #2d3a4a !important; }
body.body--dark .zenith-module-card.bg-light-green-1 { background-color: #202e1a !important; border-color: #364a2d !important; }
body.body--dark .zenith-module-card.bg-brown-1 { background-color: #2a201a !important; border-color: #44362d !important; }
body.body--dark .zenith-module-card.bg-blue-grey-1 { background-color: #1e2428 !important; border-color: #323a40 !important; }
body.body--dark .zenith-module-card.bg-grey-1 { background-color: #222228 !important; border-color: #36363e !important; }
body.body--dark .zenith-module-card.bg-yellow-1 { background-color: #2e2c1a !important; border-color: #4a462d !important; }

/* Override Quasar pastel backgrounds in dark mode */
body.body--dark .bg-green-1,
body.body--dark .bg-indigo-1,
body.body--dark .bg-teal-1,
body.body--dark .bg-orange-1,
body.body--dark .bg-purple-1,
body.body--dark .bg-blue-1,
body.body--dark .bg-pink-1,
body.body--dark .bg-amber-1,
body.body--dark .bg-blue-grey-1,
body.body--dark .bg-cyan-1,
body.body--dark .bg-deep-orange-1 {
    background-color: var(--z-bg-card-elevated) !important;
}

/* Quick action buttons (rendered as <a> with bg-grey-2) */
body.body--dark .bg-grey-2 {
    background-color: #252532 !important;
    color: var(--z-text-main) !important;
    border: 1px solid var(--z-border) !important;
}
body.body--dark .bg-grey-2:hover {
    background-color: #2E2E3E !important;
}
body.body--dark .bg-grey-1 {
    background-color: #1E1E2A !important;
}
body.body--dark .bg-grey-3 {
    background-color: #2A2A38 !important;
}

/* Drawer / sidebar */
body.body--dark .q-drawer {
    background-color: #0F0F18 !important;
    border-right-color: var(--z-border) !important;
    color: var(--z-text-main) !important;
}
body.body--dark .q-drawer .q-item { color: var(--z-text-main) !important; }
body.body--dark .q-drawer .q-item:hover { background: rgba(129, 140, 248, 0.08) !important; }
body.body--dark .q-drawer .q-item:active { background: rgba(129, 140, 248, 0.15) !important; }
body.body--dark .q-drawer .q-item--active {
    background: rgba(129, 140, 248, 0.12) !important;
    color: var(--z-primary) !important;
}
body.body--dark .q-drawer .q-expansion-item__content { background-color: #0A0A12 !important; }

/* Tables */
body.body--dark .q-table__container {
    background-color: var(--z-bg-card) !important;
    border-color: var(--z-border) !important;
}
body.body--dark .q-table th {
    background-color: var(--z-bg-card-elevated) !important;
    color: var(--z-text-muted) !important;
    border-color: var(--z-border) !important;
}
body.body--dark .q-table td {
    color: var(--z-text-main) !important;
    border-color: var(--z-border) !important;
}
body.body--dark .q-table tbody tr:hover { background-color: rgba(129, 140, 248, 0.06) !important; }
body.body--dark .q-table__bottom { color: var(--z-text-muted) !important; border-top-color: var(--z-border) !important; }

/* Form fields */
body.body--dark .q-field__control {
    background-color: #1A1A26 !important;
    color: var(--z-text-main) !important;
}
body.body--dark .q-field__native,
body.body--dark .q-field__input,
body.body--dark .q-field__prefix,
body.body--dark .q-field__suffix { color: var(--z-text-main) !important; }
body.body--dark .q-field__label { color: var(--z-text-muted) !important; }
body.body--dark .q-field--standard .q-field__control::before { border-bottom-color: var(--z-border) !important; }
body.body--dark .q-field--outlined .q-field__control::before { border-color: var(--z-border) !important; }
body.body--dark .q-field--filled .q-field__control { background: #22222E !important; }
body.body--dark .q-field--highlighted .q-field__control::after { border-color: var(--z-primary) !important; }

/* Select/dropdown */
body.body--dark .q-menu {
    background-color: var(--z-bg-card-elevated) !important;
    border: 1px solid var(--z-border) !important;
    box-shadow: var(--z-shadow-lg) !important;
}
body.body--dark .q-item { color: var(--z-text-main) !important; }
body.body--dark .q-item:hover { background: rgba(129, 140, 248, 0.08) !important; }
body.body--dark .q-item--active { background: rgba(129, 140, 248, 0.15) !important; color: var(--z-primary) !important; }
body.body--dark .q-list { color: var(--z-text-main) !important; }

/* Buttons */
body.body--dark .q-btn--standard { color: var(--z-text-main) !important; }
body.body--dark .q-btn--outline { border-color: var(--z-border) !important; color: var(--z-text-main) !important; }
body.body--dark .q-btn--flat { color: var(--z-text-main) !important; }

/* Dialogs */
body.body--dark .q-dialog__inner > div {
    background-color: var(--z-bg-card) !important;
    color: var(--z-text-main) !important;
    border: 1px solid var(--z-border) !important;
}
body.body--dark .q-dialog__backdrop { background: rgba(0, 0, 0, 0.7) !important; }

/* Tabs */
body.body--dark .q-tabs { color: var(--z-text-main) !important; }
body.body--dark .q-tab { color: var(--z-text-muted) !important; }
body.body--dark .q-tab--active { color: var(--z-primary) !important; }
body.body--dark .q-tab__indicator { background: var(--z-primary) !important; }

/* Separators */
body.body--dark .q-separator { background: var(--z-border) !important; }
body.body--dark hr { border-color: var(--z-border) !important; }

/* Tooltips */
body.body--dark .q-tooltip { background: #2A2A3A !important; color: var(--z-text-main) !important; }

/* Banners and alerts */
body.body--dark .q-banner { background-color: var(--z-bg-card-elevated) !important; }

/* Scrollbar */
body.body--dark ::-webkit-scrollbar { width: 8px; height: 8px; }
body.body--dark ::-webkit-scrollbar-track { background: var(--z-bg-page); }
body.body--dark ::-webkit-scrollbar-thumb { background: #3A3A4E; border-radius: 4px; }
body.body--dark ::-webkit-scrollbar-thumb:hover { background: #4A4A5E; }

/* Text colors override */
body.body--dark .text-dark { color: var(--z-text-main) !important; }
body.body--dark .text-grey-7,
body.body--dark .text-grey-8,
body.body--dark .text-grey-9 { color: var(--z-text-muted) !important; }
body.body--dark .text-muted { color: var(--z-text-muted) !important; }
body.body--dark .text-black { color: var(--z-text-main) !important; }

/* Heading colors */
body.body--dark .text-indigo-8,
body.body--dark .text-teal-8,
body.body--dark .text-green-8,
body.body--dark .text-deep-purple-8 { filter: brightness(1.4); }

/* Links */
body.body--dark a { color: var(--z-primary); }
body.body--dark a:hover { color: var(--z-primary-hover); }
body.body--dark .q-link { color: inherit; }

/* Pagination */
body.body--dark .q-pagination .q-btn { color: var(--z-text-main) !important; }

/* Chips/badges */
body.body--dark .q-chip { background: var(--z-bg-card-elevated) !important; color: var(--z-text-main) !important; border-color: var(--z-border) !important; }
body.body--dark .q-badge { border: 1px solid var(--z-border); }

/* Checkbox/radio/toggle */
body.body--dark .q-checkbox__inner,
body.body--dark .q-radio__inner { color: var(--z-text-muted) !important; }
body.body--dark .q-toggle__inner { color: var(--z-text-muted) !important; }

/* Progress bars */
body.body--dark .q-linear-progress__track { background: var(--z-border) !important; }

/* Container panels (Moqui box headers) */
body.body--dark .container-panel-outer { border-color: var(--z-border) !important; }
body.body--dark .container-panel-header {
    background-color: var(--z-bg-card-elevated) !important;
    color: var(--z-text-main) !important;
    border-bottom-color: var(--z-border) !important;
}
body.body--dark .container-panel-body {
    background-color: var(--z-bg-card) !important;
    color: var(--z-text-main) !important;
}

/* Quick action buttons - extra specificity */
body.body--dark a.bg-grey-2,
body.body--dark .q-btn.bg-grey-2,
body.body--dark .q-link.bg-grey-2 {
    background-color: #252532 !important;
    color: var(--z-text-main) !important;
    border: 1px solid var(--z-border) !important;
}
body.body--dark a.bg-grey-2:hover,
body.body--dark .q-btn.bg-grey-2:hover,
body.body--dark .q-link.bg-grey-2:hover {
    background-color: #2E2E3E !important;
}

/* Form-list header row */
body.body--dark .q-table--dense .q-table__top { background-color: var(--z-bg-card-elevated) !important; }

/* Status badges - keep them colorful */
body.body--dark .bg-primary { background-color: #4F46E5 !important; }
body.body--dark .bg-positive { background-color: #059669 !important; }
body.body--dark .bg-negative { background-color: #DC2626 !important; }
body.body--dark .bg-warning { background-color: #D97706 !important; }
body.body--dark .bg-info { background-color: #2563EB !important; }

/* Breadcrumb text on dark */
body.body--dark .q-toolbar .gt-xs a,
body.body--dark .q-toolbar .gt-xs .q-link { color: #C4C8D8 !important; }
body.body--dark .q-toolbar .q-icon { color: #8B8FA4 !important; }

/* Form single container */
body.body--dark .form-single-outer { color: var(--z-text-main) !important; }

/* Loading overlay */
body.body--dark .q-loading__backdrop { background: rgba(0, 0, 0, 0.6) !important; }

/* Notify/toast */
body.body--dark .q-notification { border: 1px solid var(--z-border) !important; }

/* Expansion items */
body.body--dark .q-expansion-item { color: var(--z-text-main) !important; }
body.body--dark .q-expansion-item__border { border-color: var(--z-border) !important; }

/* Image invertible (icons in drawer) */
body.body--dark .invertible { filter: invert(0.85) hue-rotate(180deg); }

/* Re-login dialog */
body.body--dark .q-dialog .q-card { background-color: var(--z-bg-card) !important; }

/* ========================================================================== */
/* REDUCED MOTION                                                             */
/* ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .q-btn:hover, .q-btn:active { transform: none; }
    .zenith-card { transition: none; }
}

/* ========================================================================== */
/* TOUCH RIPPLE ENHANCEMENT                                                   */
/* ========================================================================== */
@media (pointer: coarse) {
    .q-btn { min-height: 48px; min-width: 48px; }
    .q-btn--dense { min-height: 40px; min-width: 40px; }
    .q-item { min-height: 52px !important; }
    .q-field__control { min-height: 48px !important; }
    .q-tab { min-height: 52px !important; }
    .q-select__dropdown-icon { font-size: 28px !important; }

    /* Larger checkboxes and radios on touch */
    .q-checkbox__inner, .q-radio__inner { width: 24px !important; height: 24px !important; }
    .q-toggle__inner { min-width: 48px !important; }
}


/* ========================================================================== */
/* SPA SCREEN TRANSITIONS - Smooth, seamless navigation                       */
/* ========================================================================== */

@keyframes z-screen-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.q-page > div,
.q-page > .container-fluid,
.q-page > .row {
    animation: z-screen-enter 0.18s ease-out;
}

.q-loading-bar { height: 3px !important; }

.q-btn, .q-item, .q-tab, .m-link, a.q-link {
    transition: opacity 0.12s ease, transform 0.12s ease, background-color 0.15s ease !important;
}
.q-btn:active, .q-item:active, .q-tab:active {
    transform: scale(0.97) !important;
    opacity: 0.85 !important;
}

.q-table tbody tr {
    transition: background-color 0.1s ease !important;
}

.q-field__control {
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.q-field--focused .q-field__control {
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15) !important;
}

.q-dialog__inner {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease !important;
}

.q-drawer {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.zenith-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.zenith-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--z-shadow-lg) !important;
}

.q-expansion-item__content {
    transition: max-height 0.2s ease !important;
}

.q-tab__indicator {
    transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.q-notification {
    animation: z-screen-enter 0.2s ease-out !important;
}

.q-menu {
    transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.q-tooltip {
    transition: opacity 0.12s ease !important;
}

@keyframes z-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.q-skeleton {
    animation: z-skeleton-pulse 1.2s ease-in-out infinite !important;
}

/* Smooth app reveal after Vue mounts */
#apps-root {
    animation: z-screen-enter 0.25s ease-out;
}

/* === Additional Dark Mode Rules === */

/* Breadcrumbs */
body.body--dark .q-breadcrumbs .q-breadcrumbs__separator,
body.body--dark .q-breadcrumbs a,
body.body--dark .q-breadcrumbs .q-breadcrumbs__el {
    color: #b0bec5 !important;
}
body.body--dark .q-breadcrumbs a:hover {
    color: #fff !important;
}

/* Stepper */
body.body--dark .q-stepper {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
}
body.body--dark .q-stepper__tab--active .q-stepper__label {
    color: #82b1ff !important;
}
body.body--dark .q-stepper__dot span {
    background: #37474f !important;
}

/* Tooltip */
body.body--dark .q-tooltip {
    background: #37474f !important;
    color: #e0e0e0 !important;
}

/* Select dropdown/dialog */
body.body--dark .q-select__dialog {
    background: #1e1e2e !important;
}
body.body--dark .q-virtual-scroll__content .q-item {
    color: #e0e0e0 !important;
}
body.body--dark .q-virtual-scroll__content .q-item:hover,
body.body--dark .q-virtual-scroll__content .q-item--active {
    background: #2d2d3a !important;
}

/* Timeline */
body.body--dark .q-timeline__subtitle {
    color: #90a4ae !important;
}
body.body--dark .q-timeline__dot::after {
    background: #37474f !important;
}
body.body--dark .q-timeline__content {
    color: #e0e0e0 !important;
}

/* Page sticky */
body.body--dark .q-page-sticky > div {
    background: rgba(30, 30, 46, 0.95) !important;
}

/* Login page dark mode */
body.Login.body--dark {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #1a1e2e 100%) !important;
}
body.Login.body--dark .q-card {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
}
body.Login.body--dark .q-field__native,
body.Login.body--dark .q-field__input {
    color: #e0e0e0 !important;
}

/* Notification/Banner */
body.body--dark .q-banner {
    background: #2d2d3a !important;
    color: #e0e0e0 !important;
}

/* Expansion items */
body.body--dark .q-expansion-item .q-item {
    color: #e0e0e0 !important;
}
body.body--dark .q-expansion-item__content {
    background: #1a1a2e !important;
}

/* Separator/Divider */
body.body--dark .q-separator {
    background: #37474f !important;
}

/* Tab panels */
body.body--dark .q-tab-panels {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
}
body.body--dark .q-tab--active {
    color: #82b1ff !important;
}
body.body--dark .q-tab-panel {
    color: #e0e0e0 !important;
}