/* ============================================================
   Production Monitoring System — Main Stylesheet
   Dark-mode-first, CSS custom properties, no inline styles
   ============================================================ */

/* ---- Kill WebKit tap highlight on ALL elements (Android/iOS blue flash) ---- */
*, *::before, *::after {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
}

/* ---- Custom Properties ------------------------------------ */
:root {
    /* Brand */
    --color-primary:       #16f92d;
    --color-primary-hover: #0aea1d;
    --color-primary-muted: rgba(22, 226, 249, 0.15);

    /* Backgrounds */
    --bg-base:    #0f1117;
    --bg-surface: #1a1d27;
    --bg-card:    #1e2130;
    --bg-input:   #252836;
    --bg-hover:   #2a2d3e;
    --bg-muted:   #2f3347;

    /* Text */
    --text-primary:   #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;
    --text-inverse:   #0f1117;

    /* Borders */
    --border-color:       #2d3149;
    --border-color-focus: #16f938;
    --border-radius-sm:   4px;
    --border-radius:      8px;
    --border-radius-lg:   12px;
    --border-radius-xl:   16px;

    /* Status */
    --color-success:       #22c55e;
    --color-success-bg:    rgba(34, 197, 94, 0.12);
    --color-warning:       #eab308;
    --color-warning-bg:    rgba(234, 179, 8, 0.12);
    --color-danger:        #ef4444;
    --color-danger-bg:     rgba(239, 68, 68, 0.12);
    --color-info:          #38bdf8;
    --color-info-bg:       rgba(56, 189, 248, 0.12);

    /* Role badge colors */
    --role-admin:       #a78bfa;
    --role-manager:     #38bdf8;
    --role-supervisor:  #34d399;
    --role-storekeeper: #fbbf24;

    /* Shift colors */
    --shift-a: #38bdf8;
    --shift-b: #a78bfa;

    /* Status colors */
    --status-pending:   #64748b;
    --status-submitted: #f97316;
    --status-approved:  #22c55e;
    --status-rejected:  #ef4444;
    --status-corrected: #38bdf8;

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow:    0 4px 16px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
    --shadow-primary: 0 4px 20px rgba(249,115,22,0.25);

    /* Transitions */
    --transition-fast:   0.1s ease;
    --transition-base:   0.2s ease;
    --transition-slow:   0.3s ease;

    /* Sidebar */
    --sidebar-width: 240px;
    --topbar-height: 60px;

    /* Glassmorphism */
    --glass-bg:     rgba(30, 33, 48, 0.55);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-blur:   16px;
    --body-gradient: radial-gradient(circle at 15% 0%, rgba(22, 249, 45, 0.10), transparent 40%),
                      radial-gradient(circle at 85% 100%, rgba(56, 189, 248, 0.08), transparent 45%),
                      var(--bg-base);
}

/* ---- Light theme overrides --------------------------------- */
[data-theme="light"] {
    /* Brand — slightly deeper green reads better on light backgrounds */
    --color-primary:       #0ea337;
    --color-primary-hover: #0c8a2f;
    --color-primary-muted: rgba(14, 163, 55, 0.12);

    /* Backgrounds — cool slate base, neumorphic depth */
    --bg-base:    #e8ecf3;
    --bg-surface: #e8ecf3;
    --bg-card:    #e8ecf3;
    --bg-input:   #e2e7ef;
    --bg-hover:   #dde2ea;
    --bg-muted:   #d8dde6;

    /* Text */
    --text-primary:   #1e2433;
    --text-secondary: #5b6679;
    --text-muted:     #8a93a6;
    --text-inverse:   #ffffff;

    /* Borders — very subtle on neumorphic */
    --border-color:       rgba(255,255,255,0.6);
    --border-color-focus: #0ea337;

    /* Status backgrounds (lighter tints for light bg) */
    --color-success-bg: rgba(34, 197, 94, 0.10);
    --color-warning-bg: rgba(234, 179, 8, 0.12);
    --color-danger-bg:  rgba(239, 68, 68, 0.10);
    --color-info-bg:    rgba(56, 189, 248, 0.10);

    /* Neumorphic shadows — light source top-left */
    --shadow-sm:      4px 4px 8px rgba(163,177,198,0.6), -4px -4px 8px rgba(255,255,255,0.9);
    --shadow:         6px 6px 14px rgba(163,177,198,0.65), -6px -6px 14px rgba(255,255,255,0.95);
    --shadow-lg:      10px 10px 24px rgba(163,177,198,0.7), -10px -10px 24px rgba(255,255,255,1);
    --shadow-inset:   inset 4px 4px 8px rgba(163,177,198,0.5), inset -4px -4px 8px rgba(255,255,255,0.9);
    --shadow-primary: 0 4px 16px rgba(14, 163, 55, 0.30);

    /* No glassmorphism in light mode — neumorphic surface instead */
    --glass-bg:     #e8ecf3;
    --glass-border: rgba(255,255,255,0.7);
    --glass-blur:   0px;
    --body-gradient: #e8ecf3;
}

/* ---- Light mode: neumorphic sidebar ------------------------ */
[data-theme="light"] .sidebar {
    background:            #dde2ec;
    backdrop-filter:       none;
    -webkit-backdrop-filter: none;
    border-right:          1px solid rgba(255,255,255,0.85);
    box-shadow:            4px 0 16px rgba(163,177,198,0.5), -2px 0 0 rgba(255,255,255,0.9);
    --text-primary:        #1e2433;
    --text-secondary:      #5b6679;
    --text-muted:          #8a93a6;
    --border-color:        rgba(255,255,255,0.7);
    --bg-hover:            rgba(163,177,198,0.25);
    --color-primary-muted: rgba(14,163,55,0.12);
}

/* Brand icon + active nav pill get neumorphic raised look */
[data-theme="light"] .sidebar-brand {
    border-bottom: 1px solid rgba(163,177,198,0.35);
}

[data-theme="light"] .nav-item:hover {
    background:   rgba(163,177,198,0.22);
    box-shadow:   2px 2px 5px rgba(163,177,198,0.4), -2px -2px 5px rgba(255,255,255,0.85);
    border-radius: var(--border-radius);
}

[data-theme="light"] .nav-item.active {
    background:   var(--color-primary-muted);
    box-shadow:   inset 2px 2px 5px rgba(163,177,198,0.35), inset -2px -2px 5px rgba(255,255,255,0.7);
    border-radius: var(--border-radius);
}

[data-theme="light"] .sidebar-footer {
    border-top: 1px solid rgba(163,177,198,0.35);
}

[data-theme="light"] .user-avatar {
    box-shadow: 2px 2px 6px rgba(163,177,198,0.5), -2px -2px 6px rgba(255,255,255,0.9);
}

[data-theme="light"] .sidebar-brand-icon {
    box-shadow: 2px 2px 6px rgba(163,177,198,0.5), -2px -2px 6px rgba(255,255,255,0.9);
}

/* ---- Light mode: neumorphic topbar ------------------------- */
[data-theme="light"] .topbar {
    background:      #e8ecf3;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom:   1px solid rgba(255,255,255,0.8);
    box-shadow:      0 4px 12px rgba(163,177,198,0.45), 0 -1px 0 rgba(255,255,255,0.9);
}

/* ---- Light mode: neumorphic cards -------------------------- */
[data-theme="light"] .card {
    background:      #e8ecf3;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border:          1px solid rgba(255,255,255,0.8);
    box-shadow:      var(--shadow);
}

[data-theme="light"] .stat-card {
    background:  #e8ecf3;
    border:      1px solid rgba(255,255,255,0.8);
    box-shadow:  var(--shadow);
}

/* ---- Light mode: neumorphic modals ------------------------- */
[data-theme="light"] .modal {
    background:      #e8ecf3;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border:          1px solid rgba(255,255,255,0.8);
    box-shadow:      var(--shadow-lg);
}

/* ---- Light mode: neumorphic form inputs -------------------- */
[data-theme="light"] .form-control {
    background:  #e8ecf3;
    border:      1px solid rgba(255,255,255,0.7);
    box-shadow:  var(--shadow-inset);
    color:       var(--text-primary);
}
[data-theme="light"] .form-control:focus {
    border-color: var(--border-color-focus);
    box-shadow:   var(--shadow-inset), 0 0 0 3px rgba(14,163,55,0.15);
}

/* ---- Light mode: neumorphic buttons ------------------------ */
[data-theme="light"] .btn-outline {
    background:  #e8ecf3;
    border:      1px solid rgba(255,255,255,0.7);
    box-shadow:  var(--shadow-sm);
}
[data-theme="light"] .btn-outline:hover {
    box-shadow:  var(--shadow);
}
[data-theme="light"] .btn-ghost:hover {
    background:  #e8ecf3;
    box-shadow:  var(--shadow-sm);
}

/* ---- Light mode: select dropdown option colours ------------ */
[data-theme="light"] select.form-control option {
    background: #e8ecf3;
    color:      #1e2433;
}

/* ---- Light mode: notification badge border fix ------------- */
[data-theme="light"] .notif-badge {
    border-color: #e8ecf3;
}

/* ---- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }

body {
    overflow-x: hidden;
    width: 100%;
    font-family:      var(--font-sans);
    font-size:        var(--font-size-base);
    background:       var(--body-gradient);
    background-attachment: fixed;
    color:            var(--text-primary);
    line-height:      1.6;
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button { cursor: pointer; font-family: inherit; }

/* ---- Utilities ------------------------------------------- */
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger);  }
.text-warning { color: var(--color-warning); }
.text-primary-brand { color: var(--color-primary); }
.font-mono { font-family: var(--font-mono); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }

/* ---- Alerts ---------------------------------------------- */
.alert {
    padding:       var(--space-3) var(--space-4);
    border-radius: var(--border-radius);
    font-size:     var(--font-size-sm);
    border:        1px solid transparent;
    margin-bottom: var(--space-4);
}
.alert-danger  { background: var(--color-danger-bg);  border-color: var(--color-danger);  color: var(--color-danger);  }
.alert-success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }
.alert-info    { background: var(--color-info-bg);    border-color: var(--color-info);    color: var(--color-info);    }

/* ---- Buttons --------------------------------------------- */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    padding:         var(--space-2) var(--space-5);
    border-radius:   var(--border-radius);
    font-size:       var(--font-size-sm);
    font-weight:     500;
    border:          1px solid transparent;
    transition:      background var(--transition-fast),
                     color       var(--transition-fast),
                     box-shadow  var(--transition-fast);
    white-space:     nowrap;
    text-decoration: none;
    line-height:     1.5;
}
.btn:disabled { opacity: 0.5; pointer-events: none; }

.btn-primary {
    background:   var(--color-primary);
    color:        var(--text-inverse);
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background:  var(--color-primary-hover);
    box-shadow:  var(--shadow-primary);
    text-decoration: none;
}

.btn-outline {
    background:   transparent;
    color:        var(--text-primary);
    border-color: var(--border-color);
}
.btn-outline:hover { background: var(--bg-hover); text-decoration: none; }

.btn-danger {
    background:   var(--color-danger);
    color:        #fff;
    border-color: var(--color-danger);
}
.btn-danger:hover { filter: brightness(1.1); text-decoration: none; }

.btn-ghost {
    background:   transparent;
    color:        var(--text-secondary);
    border-color: transparent;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
#theme-toggle svg { width: 20px; height: 20px; }

.btn-block { width: 100%; }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); }
.btn-lg { padding: var(--space-3) var(--space-8); font-size: var(--font-size-base); }

.btn-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ---- Forms ----------------------------------------------- */
.form-group {
    margin-bottom: var(--space-5);
}
.form-label {
    display:       block;
    font-size:     var(--font-size-sm);
    font-weight:   500;
    color:         var(--text-secondary);
    margin-bottom: var(--space-2);
}
.form-control {
    width:            100%;
    padding:          var(--space-3) var(--space-4);
    background:       var(--bg-input);
    border:           1px solid var(--border-color);
    border-radius:    var(--border-radius);
    color:            var(--text-primary);
    font-size:        var(--font-size-sm);
    font-family:      inherit;
    transition:       border-color var(--transition-fast),
                      box-shadow   var(--transition-fast);
    outline:          none;
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:focus {
    border-color: var(--border-color-focus);
    box-shadow:   0 0 0 3px var(--color-primary-muted);
}
.form-control.is-invalid { border-color: var(--color-danger); }

.form-error {
    font-size:  var(--font-size-xs);
    color:      var(--color-danger);
    margin-top: var(--space-1);
}
.form-hint {
    font-size:  var(--font-size-xs);
    color:      var(--text-muted);
    margin-top: var(--space-1);
}

.input-group { position: relative; display: flex; }
.input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-addon {
    display:        flex;
    align-items:    center;
    padding:        0 var(--space-3);
    background:     var(--bg-input);
    border:         1px solid var(--border-color);
    border-left:    none;
    border-radius:  0 var(--border-radius) var(--border-radius) 0;
    color:          var(--text-muted);
    transition:     color var(--transition-fast);
}
.input-addon:hover { color: var(--text-primary); }
.input-addon svg { width: 18px; height: 18px; }

select.form-control {
    padding-right: 2.5rem;
    cursor: pointer;
}
select.form-control option { background: var(--bg-card); }

textarea.form-control { resize: vertical; min-height: 80px; }

/* ---- Auth layout ----------------------------------------- */
.auth-body {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--bg-base);
    padding:         var(--space-4);
}

.auth-wrapper {
    width:     100%;
    max-width: 420px;
}

.auth-card {
    background:    var(--bg-card);
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius-xl);
    padding:       var(--space-8);
    box-shadow:    var(--shadow-lg);
}

.auth-brand {
    text-align:    center;
    margin-bottom: var(--space-8);
}
.auth-brand-icon {
    width:         56px;
    height:        56px;
    margin:        0 auto var(--space-3);
    background:    var(--color-primary-muted);
    border-radius: var(--border-radius-lg);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--color-primary);
}
.auth-brand-icon svg { width: 28px; height: 28px; }
.auth-brand-name {
    font-size:   var(--font-size-xl);
    font-weight: 700;
    color:       var(--text-primary);
}
.auth-brand-tagline {
    font-size: var(--font-size-sm);
    color:     var(--text-muted);
    margin-top: var(--space-1);
}

/* Tabs */
.auth-tabs {
    display:       flex;
    background:    var(--bg-input);
    border-radius: var(--border-radius);
    padding:       3px;
    margin-bottom: var(--space-6);
    gap:           3px;
}
.auth-tab {
    flex:            1;
    padding:         var(--space-2) var(--space-3);
    border:          none;
    background:      transparent;
    color:           var(--text-muted);
    font-size:       var(--font-size-sm);
    font-weight:     500;
    border-radius:   calc(var(--border-radius) - 2px);
    transition:      all var(--transition-fast);
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
}
.auth-tab.active {
    background: var(--bg-card);
    color:      var(--text-primary);
    box-shadow: var(--shadow-sm);
}
.auth-tab:hover:not(.active) { color: var(--text-secondary); }
.tab-icon { width: 16px; height: 16px; }

.auth-form { display: flex; flex-direction: column; }

/* Biometric panel */
.biometric-hero {
    text-align:    center;
    padding:       var(--space-6) 0;
}
.biometric-icon {
    width:         80px;
    height:        80px;
    margin:        0 auto var(--space-4);
    background:    var(--color-primary-muted);
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--color-primary);
    transition:    transform var(--transition-slow), background var(--transition-slow);
}
.biometric-icon svg { width: 40px; height: 40px; }
.biometric-icon.scanning {
    animation: pulse 1.5s ease-in-out infinite;
    background: var(--color-primary-muted);
}
.biometric-icon.success { background: var(--color-success-bg); color: var(--color-success); }
.biometric-icon.error   { background: var(--color-danger-bg);  color: var(--color-danger);  }

@keyframes pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.08); opacity: 0.85; }
}

.biometric-hint {
    font-size: var(--font-size-sm);
    color:     var(--text-secondary);
}

.auth-divider-text {
    text-align:  center;
    font-size:   var(--font-size-xs);
    color:       var(--text-muted);
    margin:      var(--space-4) 0 var(--space-3);
    position:    relative;
}
.auth-divider-text::before,
.auth-divider-text::after {
    content:    '';
    position:   absolute;
    top:        50%;
    width:      30%;
    height:     1px;
    background: var(--border-color);
}
.auth-divider-text::before { left: 0; }
.auth-divider-text::after  { right: 0; }

.auth-footer {
    text-align:  center;
    font-size:   var(--font-size-xs);
    color:       var(--text-muted);
    margin-top:  var(--space-6);
    padding-top: var(--space-4);
    border-top:  1px solid var(--border-color);
}

/* ---- App Layout ------------------------------------------ */
.app-layout { display: flex; min-height: 100vh; }

.sidebar {
    width:      var(--sidebar-width);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-right: 1px solid var(--glass-border);
    display:    flex;
    flex-direction: column;
    position:   fixed;
    top:        0;
    left:       0;
    height:     100vh;
    z-index:    100;
    transition: transform var(--transition-slow);
}

.sidebar-brand {
    padding:       var(--space-5) var(--space-5);
    border-bottom: 1px solid var(--border-color);
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
}
.sidebar-brand-icon {
    width:         36px;
    height:        36px;
    background:    var(--color-primary-muted);
    border-radius: var(--border-radius);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--color-primary);
    flex-shrink:   0;
}
.sidebar-brand-icon svg { width: 20px; height: 20px; }
.sidebar-brand-text { font-size: var(--font-size-sm); font-weight: 600; line-height: 1.3; }
.sidebar-brand-sub  { font-size: var(--font-size-xs); color: var(--text-muted); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--space-4) 0; }
.sidebar-section { margin-bottom: var(--space-4); }
.sidebar-section-label {
    font-size:     var(--font-size-xs);
    font-weight:   600;
    color:         var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding:       0 var(--space-5) var(--space-2);
}
.nav-item {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    padding:     var(--space-2) var(--space-5);
    color:       var(--text-secondary);
    font-size:   var(--font-size-sm);
    transition:  all var(--transition-fast);
    border-left: 3px solid transparent;
    text-decoration: none;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.nav-item.active {
    background:   var(--color-primary-muted);
    color:        var(--color-primary);
    border-left-color: var(--color-primary);
    font-weight:  500;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

.sidebar-footer {
    padding:    var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-color);
}
.user-pill {
    display:    flex;
    align-items: center;
    gap:        var(--space-3);
}
.user-avatar {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--color-primary-muted);
    color:           var(--color-primary);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       var(--font-size-sm);
    font-weight:     700;
    flex-shrink:     0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: var(--font-size-sm); font-weight: 500; truncate: ellipsis; }
.user-role { font-size: var(--font-size-xs); color: var(--text-muted); }

/* Main content */
.main-content {
    margin-left: var(--sidebar-width);
    flex:        1;
    display:     flex;
    flex-direction: column;
    min-height:  100vh;
    min-width:   0;
    width:       0; /* forces flex child to not overflow */
    overflow-x:  hidden;
}

/* Ensure app-layout never exceeds viewport */
.app-layout {
    max-width:  100vw;
    overflow-x: hidden;
}

.topbar {
    height:          var(--topbar-height);
    background:      var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom:   1px solid var(--glass-border);
    padding:         0 var(--space-6);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    position:        sticky;
    top:             0;
    z-index:         90;
}
.topbar-title { font-size: var(--font-size-lg); font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-3); }

.page-content { padding: var(--space-8) var(--space-6); flex: 1; min-width: 0; overflow-x: hidden; }
.page-header { margin-bottom: var(--space-6); }
.page-title  { font-size: var(--font-size-2xl); font-weight: 700; }
.page-subtitle { color: var(--text-muted); font-size: var(--font-size-sm); margin-top: var(--space-1); }

/* ---- Cards ----------------------------------------------- */
.card {
    background:      var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border:        1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    box-shadow:    var(--shadow-sm);
    min-width:     0;
    overflow:      hidden;
}
.card-header {
    padding:       var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-color);
    display:       flex;
    align-items:   center;
    justify-content: space-between;
}
.card-title { font-size: var(--font-size-base); font-weight: 600; }
.card-body  { padding: var(--space-5); }
.card-footer {
    padding:    var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface);
}

/* Stat cards */
.stat-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   var(--space-4);
    margin-bottom:         var(--space-6);
}
.stat-card {
    background:    var(--bg-card);
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding:       var(--space-5);
    min-width:     0;
    overflow:      hidden;
}
.stat-label  { font-size: var(--font-size-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.stat-value  { font-size: var(--font-size-3xl); font-weight: 700; line-height: 1; }
.stat-delta  { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: var(--space-2); }
.stat-delta.up   { color: var(--color-success); }
.stat-delta.down { color: var(--color-danger); }

/* ---- Tables ---------------------------------------------- */
.table-wrapper { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.data-table th {
    padding:        var(--space-3) var(--space-4);
    text-align:     left;
    font-size:      var(--font-size-xs);
    font-weight:    600;
    color:          var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom:  1px solid var(--border-color);
    white-space:    nowrap;
    background:     var(--bg-surface);
}
.data-table td {
    padding:       var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    color:         var(--text-primary);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-hover); }

/* ---- Badges ---------------------------------------------- */
.badge {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1);
    padding:       2px 8px;
    border-radius: 999px;
    font-size:     var(--font-size-xs);
    font-weight:   600;
    white-space:   nowrap;
}
.badge-admin       { background: rgba(167,139,250,0.15); color: var(--role-admin); }
.badge-manager     { background: rgba(56,189,248,0.15);  color: var(--role-manager); }
.badge-supervisor  { background: rgba(52,211,153,0.15);  color: var(--role-supervisor); }
.badge-storekeeper { background: rgba(251,191,36,0.15);  color: var(--role-storekeeper); }

.badge-pending   { background: rgba(100,116,139,0.15); color: var(--status-pending); }
.badge-submitted { background: rgba(249,115,22,0.15);  color: var(--status-submitted); }
.badge-approved  { background: rgba(34,197,94,0.15);   color: var(--status-approved); }
.badge-rejected  { background: rgba(239,68,68,0.15);   color: var(--status-rejected); }
.badge-corrected { background: rgba(56,189,248,0.15);  color: var(--status-corrected); }

.badge-shift-a { background: rgba(56,189,248,0.15); color: var(--shift-a); }
.badge-shift-b { background: rgba(167,139,250,0.15); color: var(--shift-b); }

/* ---- Modals ---------------------------------------------- */
.modal-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.7);
    z-index:    200;
    display:    flex;
    align-items: center;
    justify-content: center;
    padding:    var(--space-4);
    backdrop-filter: blur(2px);
}
.modal {
    background:    var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border:        1px solid var(--glass-border);
    border-radius: var(--border-radius-xl);
    width:         100%;
    max-width:     520px;
    max-height:    90vh;
    overflow-y:    auto;
    box-shadow:    var(--shadow-lg);
}
.modal-header {
    padding:        var(--space-5) var(--space-6);
    border-bottom:  1px solid var(--border-color);
    display:        flex;
    align-items:    center;
    justify-content: space-between;
}
.modal-title  { font-size: var(--font-size-lg); font-weight: 600; }
.modal-close  { background: none; border: none; color: var(--text-muted); padding: var(--space-1); border-radius: var(--border-radius-sm); }
.modal-close:hover { color: var(--text-primary); background: var(--bg-hover); }
.modal-close svg { width: 20px; height: 20px; }
.modal-body   { padding: var(--space-6); }
.modal-footer {
    padding:    var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-color);
    display:    flex;
    justify-content: flex-end;
    gap:        var(--space-3);
}

/* ---- Notification dot ------------------------------------ */
.notif-badge {
    position:      absolute;
    top:           -3px;
    right:         -3px;
    width:         18px;
    height:        18px;
    background:    var(--color-danger);
    border-radius: 50%;
    font-size:     10px;
    font-weight:   700;
    color:         #fff;
    display:       flex;
    align-items:   center;
    justify-content: center;
    border:        2px solid var(--bg-surface);
}

/* ---- Spinner --------------------------------------------- */
.spinner {
    width:  20px;
    height: 20px;
    border: 2px solid var(--bg-muted);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- 403 partial ----------------------------------------- */
.page-403 {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
    text-align:      center;
}
.page-403 h1 { font-size: 5rem; color: var(--color-warning); }

/* ---- Multi-select ----------------------------------------- */
select[multiple].form-control {
    padding:        var(--space-2);
    background-image: none; /* no arrow on multi-select */
}
select[multiple].form-control option {
    padding:       var(--space-2) var(--space-3);
    border-radius: var(--border-radius-sm);
    margin-bottom: 2px;
}
select[multiple].form-control option:checked {
    background: var(--color-primary-muted);
    color:      var(--color-primary);
}
[data-theme="light"] select[multiple].form-control option:checked {
    background: rgba(14,163,55,0.15);
    color:      #0c8a2f;
}

/* ---- Layout utilities ------------------------------------ */
.topbar-left {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
}

/* Clock centred absolutely so it doesn't push left/right content */
.topbar-center {
    position:        absolute;
    left:            50%;
    transform:       translateX(-50%);
    pointer-events:  none;
}

.topbar-clock {
    font-size:   var(--font-size-sm);
    font-family: var(--font-mono);
    color:       var(--text-muted);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.notif-wrap {
    position: relative;
}

.theme-icon {
    display:     flex;
    width:       20px;
    height:      20px;
    align-items: center;
    justify-content: center;
}
.theme-icon--hidden { display: none; }

.icon-md { width: 20px; height: 20px; }
.icon-sm { width: 18px; height: 18px; }

/* ============================================================
   RESPONSIVE SYSTEM
   Breakpoints:
     Desktop  : > 1024px  — sidebar always visible, no bottom nav
     Tablet   : 641–1024px — sidebar collapsed (icon-only), toggle expands
     Mobile   : ≤ 640px  — sidebar off-screen, bottom nav bar
   ============================================================ */

/* ---- Sidebar overlay (tablet + mobile) ------------------- */
.sidebar-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.55);
    z-index:    99;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

/* ---- Bottom navigation bar (mobile only) ----------------- */
.bottom-nav {
    display:              none; /* shown only on mobile via media query */
    position:             fixed;
    bottom:               0;
    left:                 0;
    width:                100vw;        /* full viewport — not affected by parent transforms */
    height:               64px;
    background:           var(--glass-bg);
    backdrop-filter:      blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-top:           1px solid var(--glass-border);
    z-index:              110;
    padding-bottom:       env(safe-area-inset-bottom, 0px);
    box-sizing:           border-box;
}

.bottom-nav-inner {
    display:         flex;
    align-items:     stretch;
    justify-content: space-around;
    width:           100%;
    height:          calc(64px - env(safe-area-inset-bottom, 0px));
    max-height:      64px;
}

.bottom-nav-item {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             2px;
    flex:            1;
    min-width:       0;
    color:           var(--text-muted);
    font-size:       9px;
    font-weight:     500;
    font-family:     inherit;
    text-decoration: none;
    padding:         6px 4px 4px;
    border-radius:   0;
    background:      none;
    border:          none;
    cursor:          pointer;
    transition:      color var(--transition-fast), background var(--transition-fast);
    position:        relative;
    -webkit-tap-highlight-color: transparent;
    overflow:        hidden;
}

.bottom-nav-item span {
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     100%;
    line-height:   1.1;
}

.bottom-nav-item svg {
    width:       22px;
    height:      22px;
    flex-shrink: 0;
}

.bottom-nav-item.active {
    color: var(--color-primary);
}

.bottom-nav-item.active::before {
    content:       '';
    position:      absolute;
    top:           0;
    left:          50%;
    transform:     translateX(-50%);
    width:         32px;
    height:        3px;
    background:    var(--color-primary);
    border-radius: 0 0 4px 4px;
}

.bottom-nav-item:active {
    background: var(--bg-hover);
}

/* Light mode bottom nav */
[data-theme="light"] .bottom-nav {
    background: #e8ecf3;
    border-top: 1px solid rgba(163,177,198,0.4);
    box-shadow: 0 -4px 12px rgba(163,177,198,0.35);
}

/* Notification dot on bottom nav */
.bottom-nav-item .notif-dot {
    position:      absolute;
    top:           6px;
    right:         calc(50% - 14px);
    width:         7px;
    height:        7px;
    background:    var(--color-danger);
    border-radius: 50%;
    border:        2px solid var(--bg-base);
}
[data-theme="light"] .bottom-nav-item .notif-dot {
    border-color: #e8ecf3;
}

/* ---- More drawer (overflow nav items on mobile) ----------- */
.bottom-nav-more-drawer {
    position:         fixed;
    bottom:           64px;
    left:             0;
    width:            100vw;
    background:       var(--glass-bg);
    backdrop-filter:  blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-top:       1px solid var(--glass-border);
    z-index:          109;
    transform:        translateY(100%);
    transition:       transform var(--transition-slow);
    box-shadow:       0 -8px 24px rgba(0,0,0,0.25);
    box-sizing:       border-box;
}
.bottom-nav-more-drawer.open {
    transform: translateY(0);
}
.bottom-nav-more-drawer-inner {
    display:        grid;
    grid-template-columns: repeat(4, 1fr);
    gap:            0;
    padding:        var(--space-3) var(--space-2) var(--space-4);
}
.bottom-nav-more-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content:center;
    gap:            4px;
    padding:        var(--space-3) var(--space-2);
    color:          var(--text-muted);
    font-size:      10px;
    font-weight:    500;
    text-decoration:none;
    border-radius:  var(--border-radius);
    transition:     color var(--transition-fast), background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav-more-item svg {
    width:  24px;
    height: 24px;
}
.bottom-nav-more-item.active { color: var(--color-primary); }
.bottom-nav-more-item:active  { background: var(--bg-hover); }
[data-theme="light"] .bottom-nav-more-drawer {
    background: #e8ecf3;
    border-top: 1px solid rgba(163,177,198,0.4);
}
/* Scrim behind more drawer */
.bottom-nav-scrim {
    display:    none;
    position:   fixed;
    inset:      0;
    bottom:     128px; /* above bottom nav */
    background: rgba(0,0,0,0.4);
    z-index:    108;
}
.bottom-nav-scrim.active { display: block; }

/* ---- DESKTOP (> 1024px) ---------------------------------- */
/* Sidebar always visible, no overlay, no bottom nav */
@media (min-width: 1025px) {
    .sidebar {
        transform: none !important;
        width:     var(--sidebar-width);
    }

    /* When desktop sidebar is toggled collapsed */
    .sidebar.desktop-collapsed {
        width: 64px;
    }
    .sidebar.desktop-collapsed .sidebar-brand-text,
    .sidebar.desktop-collapsed .nav-item span,
    .sidebar.desktop-collapsed .sidebar-section-label,
    .sidebar.desktop-collapsed .user-info {
        display: none;
    }
    .sidebar.desktop-collapsed .sidebar-brand {
        justify-content: center;
        padding: var(--space-4) var(--space-3);
    }
    .sidebar.desktop-collapsed .nav-item {
        justify-content: center;
        padding: var(--space-3);
        border-left: none;
        border-radius: var(--border-radius);
        margin: 2px var(--space-2);
    }
    .sidebar.desktop-collapsed .nav-item.active {
        border-left: none;
    }
    .sidebar.desktop-collapsed .sidebar-footer {
        padding: var(--space-3);
    }
    .sidebar.desktop-collapsed .user-pill {
        justify-content: center;
    }
    .sidebar.desktop-collapsed .user-avatar {
        margin: 0;
    }

    .main-content {
        margin-left: var(--sidebar-width);
        transition: margin-left var(--transition-slow);
    }
    .main-content.sidebar-collapsed {
        margin-left: 64px;
    }

    .bottom-nav,
    .bottom-nav-more-drawer,
    .bottom-nav-scrim { display: none !important; }
    .sidebar-overlay { display: none !important; }
}

/* ---- TABLET (641px – 1024px) ----------------------------- */
@media (min-width: 641px) and (max-width: 1024px) {
    :root {
        --sidebar-width: 260px;
    }

    /* Sidebar hidden off-screen by default, slides in on toggle */
    .sidebar {
        transform:  translateX(-100%);
        transition: transform var(--transition-slow);
        z-index:    200;
        width:      var(--sidebar-width);
    }
    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .bottom-nav,
    .bottom-nav-more-drawer,
    .bottom-nav-scrim { display: none !important; }

    /* Page content padding reduced */
    .page-content {
        padding: var(--space-6) var(--space-5);
    }

    /* Stat grid: 2-column on tablet */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Topbar: show hamburger */
    #sidebar-toggle {
        display: flex !important;
    }

    /* Tables: allow horizontal scroll */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Modals: wider on tablet */
    .modal {
        max-width: 90vw;
    }

    /* Cards: reduce padding */
    .card-body  { padding: var(--space-4); }
    .card-header { padding: var(--space-3) var(--space-4); }
    .modal-body { padding: var(--space-5); }
    .modal-header { padding: var(--space-4) var(--space-5); }
    .modal-footer { padding: var(--space-3) var(--space-5); }
}

/* ---- MOBILE (≤ 640px) ------------------------------------ */
@media (max-width: 640px) {
    :root {
        --topbar-height: 56px;
        --sidebar-width: 280px;
    }

    /* Sidebar: full-height drawer */
    .sidebar {
        transform:  translateX(-100%);
        transition: transform var(--transition-slow);
        z-index:    200;
        width:      var(--sidebar-width);
    }
    .sidebar.open {
        transform: translateX(0);
    }

    /* Main content: no left margin, bottom padding for nav bar */
    .main-content {
        margin-left:    0;
        padding-bottom: 64px; /* height of bottom nav */
    }

    /* Show bottom nav bar */
    .bottom-nav {
        display: flex;
    }

    /* Hide hamburger on mobile — bottom nav serves as the menu */
    #sidebar-toggle {
        display: none !important;
    }

    /* Page content: tight mobile padding */
    .page-content {
        padding: var(--space-4) var(--space-4);
    }

    .page-title {
        font-size: var(--font-size-xl);
    }

    .topbar {
        padding: 0 var(--space-3);
        height: var(--topbar-height);
    }

    .topbar-title {
        font-size: var(--font-size-sm);
        font-weight: 600;
    }

    .topbar-left {
        gap: var(--space-2);
    }

    .topbar-actions {
        gap: var(--space-1);
    }

    .topbar-clock {
        font-size: var(--font-size-xs);
    }

    .topbar .btn-ghost,
    .topbar .btn-sm {
        padding: var(--space-1);
        min-width: 32px;
        min-height: 32px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius);
    }

    .topbar .icon-md {
        width: 18px;
        height: 18px;
    }

    .topbar .icon-sm {
        width: 16px;
        height: 16px;
    }

    .topbar .theme-icon svg,
    .topbar .notif-wrap svg,
    .topbar-logout svg {
        width: 16px;
        height: 16px;
    }

    /* Badge on notification bell */
    .notif-badge {
        font-size: 9px;
        min-width: 14px;
        height: 14px;
        padding: 0 3px;
    }

    /* Live clock: show on mobile, compact font size */
    #live-clock {
        font-size: var(--font-size-xs);
    }

    /* Stat grid: 2 columns on mobile */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .stat-card {
        padding: var(--space-4);
    }

    .stat-value {
        font-size: var(--font-size-2xl);
    }

    /* Cards */
    .card-body   { padding: var(--space-4); }
    .card-header { padding: var(--space-3) var(--space-4); }
    .card-footer { padding: var(--space-3) var(--space-4); }

    /* Tables: horizontal scroll + compact cells */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(-1 * var(--space-4));
        padding: 0 var(--space-4);
    }
    .data-table th,
    .data-table td {
        padding:    var(--space-2) var(--space-3);
        white-space: nowrap;
    }

    /* Modals: full-width bottom sheet on mobile */
    .modal-overlay {
        align-items: flex-end;
        padding:     0;
    }
    .modal {
        max-width:     100%;
        width:         100%;
        border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
        max-height:    92vh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .modal-header {
        padding: var(--space-4) var(--space-5);
    }
    .modal-body {
        padding: var(--space-4) var(--space-5);
    }
    .modal-footer {
        padding:         var(--space-4) var(--space-5);
        flex-direction:  column-reverse;
        gap:             var(--space-2);
    }
    .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    /* Buttons: full-width in modal footers */
    .btn-lg {
        padding: var(--space-3) var(--space-6);
    }

    /* Auth */
    .auth-card {
        padding: var(--space-5);
    }

    /* Page header actions stack on mobile */
    .page-header {
        display:        flex;
        flex-direction: column;
        gap:            var(--space-3);
    }
    .page-header .btn {
        width:           100%;
        justify-content: center;
    }

    /* Show logout in topbar on mobile */
    .topbar-logout {
        display: flex;
    }

    /* Notification dropdown: full width */
    .notif-dropdown {
        position: fixed !important;
        left:     var(--space-4) !important;
        right:    var(--space-4) !important;
        top:      calc(var(--topbar-height) + var(--space-2)) !important;
        width:    auto !important;
    }

    /* Filter/toolbar rows: wrap */
    .toolbar,
    .filters-row {
        flex-wrap: wrap;
        gap:       var(--space-2);
    }
    .toolbar .form-control,
    .filters-row .form-control {
        flex: 1 1 140px;
        min-width: 0;
    }
}

/* Logout button in topbar: hidden on desktop (sidebar has it), shown on mobile */
@media (min-width: 641px) {
    .topbar-logout {
        display: none;
    }
}

/* ---- Extra small (≤ 380px) ------------------------------- */
@media (max-width: 380px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }

    .bottom-nav-item {
        font-size: 9px;
    }

    .bottom-nav-item svg {
        width:  20px;
        height: 20px;
    }
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.skeleton-row td { border-bottom: 1px solid var(--border-color); padding: var(--space-3) var(--space-4); }

.skeleton-cell {
    height:        14px;
    border-radius: var(--border-radius-sm);
    background:    linear-gradient(90deg,
        var(--bg-muted) 25%,
        var(--bg-hover) 50%,
        var(--bg-muted) 75%
    );
    background-size: 200% 100%;
    animation:     skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

[data-theme="light"] .skeleton-cell {
    background: linear-gradient(90deg,
        rgba(163,177,198,0.3) 25%,
        rgba(255,255,255,0.7) 50%,
        rgba(163,177,198,0.3) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

/* ============================================================
   RESPONSIVE UTILITY CLASSES
   Replace hardcoded inline grid styles in views
   ============================================================ */

/* 2-col grid that collapses to 1 col on mobile */
.grid-2col {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-6);
    margin-bottom:         var(--space-6);
}

/* 2-col form grid inside modals */
.form-grid-2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-4);
}

/* Page header: title left, actions right */
.page-header-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   var(--space-6);
    gap:             var(--space-3);
}

/* Report filter bar */
.filter-bar {
    display:     flex;
    gap:         var(--space-4);
    flex-wrap:   wrap;
    align-items: flex-end;
}

.filter-bar .form-group {
    margin: 0;
    min-width: 130px;
    flex: 1 1 130px;
}

.filter-bar-actions {
    display:     flex;
    gap:         var(--space-2);
    align-items: flex-end;
    flex-wrap:   wrap;
    margin-left: auto;
}

@media (max-width: 640px) {
    .grid-2col {
        grid-template-columns: 1fr;
        gap:                   var(--space-4);
    }

    .form-grid-2 {
        grid-template-columns: 1fr;
    }

    .page-header-row {
        flex-direction: column;
        align-items:    flex-start;
    }

    .page-header-row > *:last-child {
        width: 100%;
    }

    .page-header-row .btn {
        width: 100%;
        justify-content: center;
    }

    .filter-bar {
        gap: var(--space-3);
    }

    .filter-bar .form-group {
        flex: 1 1 calc(50% - var(--space-3));
        min-width: 120px;
    }

    .filter-bar-actions {
        margin-left: 0;
        width:       100%;
    }

    .filter-bar-actions .btn {
        flex: 1;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .grid-2col {
        grid-template-columns: 1fr;
        gap:                   var(--space-4);
    }

    .form-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   INLINE STYLE OVERRIDES — mobile breakdowns
   These override hardcoded inline grid/flex styles in views
   that can't be changed via media queries otherwise.
   ============================================================ */

/* Products grid — auto-fill minmax already responsive, but cap columns on mobile */
@media (max-width: 640px) {
    /* Any inline style="display:grid;..." on a direct child of .page-content */
    .page-content > [style*="grid-template-columns"],
    .page-content > div > [style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    /* Exception: stat-grid should stay 2-col on mobile (handled by stat-grid class) */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Form grids inside modals/cards */
    .modal [style*="grid-template-columns"],
    .card [style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    /* page-header inline flex: stack on mobile */
    .page-header[style*="display:flex"] {
        display:        flex !important;
        flex-direction: column !important;
        align-items:    flex-start !important;
        gap:            var(--space-3) !important;
    }

    /* filter/export button rows: wrap and full width */
    [style*="display:flex"][style*="gap"] > .btn,
    [style*="display:flex"][style*="gap"] > button {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* inline flex bars used as filter toolbars */
    .card > div > [style*="display:flex"][style*="flex-wrap:wrap"],
    .card > [style*="padding"] > [style*="display:flex"][style*="flex-wrap:wrap"] {
        gap: var(--space-3) !important;
    }

    /* manager 1.5fr 1fr grid → 1col */
    [style*="1.5fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* supervisor 3-col grid → 1col */
    [style*="repeat(3,1fr)"],
    [style*="repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* storekeeper stat-grid override → 2col */
    .stat-grid[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    /* Keep 2-col grids at 1-col on tablet too */
    .page-content > [style*="grid-template-columns:1fr 1fr"],
    .page-content > div > [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    [style*="1.5fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   UTILITY CLASSES — replaces inline styles in views
   ============================================================ */

/* Page header flex row */
.page-header-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--space-3);
}

/* Sections toggled visible/hidden by JS */
.section-hidden { display: none; }

/* Filter bar: horizontal, wrapping */
.filter-bar {
    display:     flex;
    gap:         var(--space-3);
    flex-wrap:   wrap;
    align-items: flex-end;
    padding:     var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.filter-bar .form-group {
    margin:    0;
    min-width: 120px;
}

.filter-control-auto {
    width: auto;
    min-width: 140px;
    flex-shrink: 0;
}

/* Two-column form grids that collapse on mobile */
.form-grid-2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-4);
}

/* Shift progress card */
.shift-progress-card {
    margin-bottom: var(--space-6);
    padding:       var(--space-5);
}

.shift-progress-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   var(--space-3);
}

.shift-progress-label { font-size: var(--font-size-sm); font-weight: 600; }
.shift-progress-count { font-size: var(--font-size-sm); color: var(--text-muted); }

.progress-track {
    background:    var(--bg-muted);
    border-radius: 999px;
    height:        8px;
    overflow:      hidden;
}

.progress-fill {
    background:    var(--color-primary);
    height:        100%;
    border-radius: 999px;
    width:         0%;
    transition:    width 0.5s ease;
}

/* Shift stats trio */
.shift-stats-trio {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-4);
    margin-top:            var(--space-5);
}

.shift-stat { text-align: center; }
.shift-stat-value {
    font-size:   1.75rem;
    font-weight: 700;
}
.shift-stat-value--success { color: var(--color-success); }
.shift-stat-value--warning  { color: var(--color-warning); }
.shift-stat-value--danger   { color: var(--color-danger); }
.shift-stat-desc { font-size: var(--font-size-xs); color: var(--text-muted); }

/* Session grid */
.session-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   var(--space-4);
    margin-bottom:         var(--space-6);
}

.session-skeleton {
    height:        80px;
    background:    var(--bg-muted);
    border-radius: var(--border-radius);
}

/* Admin dashboard two-panel grid */
.dashboard-panels {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-6);
    margin-bottom:         var(--space-6);
}

/* Card with bottom margin */
.card-mb { margin-bottom: var(--space-6); }

/* Stat value colour overrides */
.stat-value--warning { color: var(--color-warning); }
.stat-value--danger  { color: var(--color-danger); }

/* Badge shift */
.badge-shift { font-size: var(--font-size-sm); padding: var(--space-2) var(--space-4); }

/* Checkbox row (is-missing) */
.checkbox-row {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    margin-bottom: var(--space-5);
    padding:       var(--space-4);
    background:    var(--bg-surface);
    border-radius: var(--border-radius);
    border:        1px solid var(--border-color);
}
.checkbox-row input[type="checkbox"] {
    width:        18px;
    height:       18px;
    accent-color: var(--color-primary);
    flex-shrink:  0;
}

/* Form row label */
.form-label-inline {
    font-weight: 500;
    cursor:      pointer;
}
.form-label-hint {
    font-size:  var(--font-size-xs);
    color:      var(--text-muted);
    margin:     0;
}

/* Production entries header */
.entries-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   var(--space-3);
}

/* No-entries hint */
.no-entries-hint {
    text-align: center;
    color:      var(--text-muted);
    font-size:  var(--font-size-sm);
    padding:    var(--space-4);
}

/* Downtime form / session card narrow */
.card-narrow { max-width: 420px; margin: 0 auto; }

/* Required star */
.required-star { color: var(--color-danger); }

/* History date pickers row */
.date-range-row {
    display: flex;
    gap:     var(--space-2);
}
.date-range-row .form-control {
    width:     auto;
    font-size: var(--font-size-sm);
}

/* Section description text */
.section-desc {
    color:         var(--text-secondary);
    font-size:     var(--font-size-sm);
    margin-bottom: var(--space-4);
}

/* ---- Responsive adjustments for utility classes ----------- */
@media (max-width: 640px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }

    .shift-stats-trio {
        grid-template-columns: repeat(3, 1fr); /* keep trio on mobile */
    }

    .dashboard-panels {
        grid-template-columns: 1fr;
    }

    .date-range-row {
        flex-direction: column;
    }
    .date-range-row .form-control {
        width: 100%;
    }

    .session-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .dashboard-panels {
        grid-template-columns: 1fr;
    }
}

/* Bootstrap-compat shims used in report filter bar */
.ms-auto { margin-left: auto; }
.d-flex   { display: flex; }
.gap-2    { gap: var(--space-2); }

/* ---- Additional utility classes -------------------------- */
.font-normal    { font-weight: 400; }
.text-center    { text-align: center; }
.p-8            { padding: var(--space-8); }
.p-3            { padding: var(--space-3) var(--space-4); }
.text-muted     { color: var(--text-muted); }

/* Settings card max width */
.settings-card  { max-width: 680px; }

/* Multi-select with visible height */
.multi-select   { min-height: 120px; }
select[multiple].multi-select { min-height: 120px; }

/* Modal size variants */
.modal-lg { max-width: 600px; }

/* ---- Additional stat grid variants ----------------------- */
.stat-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.stat-grid--3col {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: var(--space-6);
}

/* ---- Stat value size/color variants ---------------------- */
.stat-value--success { color: var(--color-success); }
.stat-value--lg      { font-size: 1.2rem; }

/* ---- Wide modal (manager review) ------------------------- */
.modal-lg-wide { max-width: 680px; }

/* ---- Card title bottom margin ---------------------------- */
.mb-5 { margin-bottom: var(--space-5); }

/* ---- dashboard-panels: asymmetric on desktop ------------- */
@media (min-width: 1025px) {
    .dashboard-panels {
        grid-template-columns: 1.5fr 1fr;
    }
}

/* ---- Mobile: compact stat grids -------------------------- */
@media (max-width: 640px) {
    .stat-grid--compact {
        grid-template-columns: repeat(2, 1fr);
    }
    .stat-grid--3col {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---- Products grid --------------------------------------- */
.products-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap:                   var(--space-5);
}

@media (max-width: 640px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   FLUTTER MATERIAL DESIGN 3 — MOBILE OVERRIDES (≤ 640px)
   Layout, spacing, shape, touch-targets, typography scale.
   ALL colours use the existing design tokens — no overrides.
   ============================================================ */

@media (max-width: 640px) {

    /* ---- MD3 Shape & spacing tokens ----------------------- */
    :root {
        --md-shape-xs:   4px;
        --md-shape-sm:   8px;
        --md-shape-md:   12px;
        --md-shape-lg:   16px;
        --md-shape-xl:   28px;
        --md-shape-full: 50px;
        --md-touch-target: 48px;

        /* MD3 type scale */
        --md-display-sm:  1.75rem;
        --md-headline-sm: 1.5rem;
        --md-title-lg:    1.375rem;
        --md-title-md:    1rem;
        --md-label-lg:    0.875rem;
        --md-label-md:    0.75rem;
        --md-label-sm:    0.6875rem;
        --md-body-lg:     1rem;
        --md-body-md:     0.875rem;
        --md-body-sm:     0.75rem;
    }

    /* ---- App body ----------------------------------------- */
    body {
        -webkit-font-smoothing: antialiased;
        font-size: var(--md-body-md);
        letter-spacing: 0.01em;
    }

    /* ---- Topbar ------------------------------------------- */
    .topbar {
        height:   56px;
        padding:  0 var(--space-3);
    }
    .topbar-title {
        font-size:      var(--font-size-sm);
        font-weight:    600;
        letter-spacing: 0.01em;
    }
    .topbar-left  { gap: var(--space-2); }
    .topbar-actions { gap: var(--space-1); }
    .topbar .btn-ghost,
    .topbar .btn-sm {
        min-width:       36px;
        min-height:      36px;
        width:           36px;
        height:          36px;
        border-radius:   var(--md-shape-full);
        display:         flex;
        align-items:     center;
        justify-content: center;
        padding:         0;
    }
    .topbar .icon-md,
    .topbar .icon-sm { width: 18px; height: 18px; }
    .topbar .theme-icon svg,
    .topbar .notif-wrap svg,
    .topbar-logout svg { width: 18px; height: 18px; }

    /* ---- Page content ------------------------------------- */
    .page-content {
        padding: 16px 16px 96px;
    }
    .page-header {
        margin-bottom: 20px;
    }
    .page-title {
        font-size:      var(--md-headline-sm);
        font-weight:    600;
        letter-spacing: -0.01em;
        line-height:    1.2;
    }
    .page-subtitle {
        font-size:  var(--md-body-sm);
        margin-top: 4px;
        letter-spacing: 0.015em;
    }

    /* ---- Stat cards --------------------------------------- */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap:           12px;
        margin-bottom: 20px;
    }
    .stat-card {
        border-radius: var(--md-shape-lg);
        padding:       16px;
    }
    .stat-card:active {
        transform: scale(0.97);
    }
    .stat-label {
        font-size:      var(--md-label-md);
        font-weight:    500;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom:  6px;
        line-height:    1.3;
    }
    .stat-value {
        font-size:      var(--md-display-sm);
        font-weight:    700;
        line-height:    1;
        letter-spacing: -0.02em;
    }
    .stat-delta {
        font-size:   var(--md-label-sm);
        margin-top:  6px;
        line-height: 1.3;
    }

    /* ---- Cards -------------------------------------------- */
    .card {
        border-radius: var(--md-shape-lg);
    }
    .card-header {
        padding: 14px 16px;
    }
    .card-title {
        font-size:      var(--md-title-md);
        font-weight:    600;
        letter-spacing: 0.01em;
    }
    .card-body {
        padding: 16px;
    }
    .card-mb {
        margin-bottom: 16px;
    }

    /* ---- Buttons ------------------------------------------ */
    .btn-primary {
        border-radius:   var(--md-shape-full);
        font-size:       var(--md-label-lg);
        font-weight:     600;
        letter-spacing:  0.03em;
        height:          40px;
        padding:         0 24px;
        min-height:      40px;
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
        gap:             8px;
    }
    .btn-primary:active {
        transform: scale(0.97);
    }
    .btn-outline {
        border-radius:   var(--md-shape-full);
        font-size:       var(--md-label-lg);
        font-weight:     600;
        letter-spacing:  0.03em;
        height:          40px;
        padding:         0 24px;
        min-height:      40px;
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
        gap:             8px;
    }
    .btn-ghost {
        border-radius:   var(--md-shape-full);
        font-size:       var(--md-label-lg);
        font-weight:     500;
        padding:         0 12px;
        height:          40px;
        min-height:      40px;
        display:         inline-flex;
        align-items:     center;
        gap:             8px;
    }
    .btn-sm {
        height:     36px;
        min-height: 36px;
        padding:    0 16px;
        font-size:  var(--md-label-md);
    }
    .btn-danger {
        border-radius:   var(--md-shape-full);
        font-weight:     600;
        height:          40px;
        padding:         0 24px;
        min-height:      40px;
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
    }
    .modal-footer .btn {
        width:           100%;
        justify-content: center;
    }
    .page-header .btn {
        width:           100%;
        justify-content: center;
    }

    /* ---- Badges ------------------------------------------- */
    .badge {
        padding:        4px 12px;
        border-radius:  var(--md-shape-full);
        font-size:      var(--md-label-sm);
        font-weight:    600;
        letter-spacing: 0.04em;
    }

    /* ---- Form inputs -------------------------------------- */
    .form-control {
        border-radius: var(--md-shape-sm);
        font-size:     var(--md-body-lg);
        height:        48px;
        padding:       0 14px;
        width:         100%;
        box-sizing:    border-box;
    }
    select.form-control {
        appearance: none;
        -webkit-tap-highlight-color: transparent;
    }

    input.form-control,
    textarea.form-control {
        -webkit-tap-highlight-color: transparent;
    }
    textarea.form-control {
        height:     auto;
        min-height: 80px;
        padding:    14px;
        resize:     vertical;
    }
    .form-label {
        font-size:      var(--md-label-lg);
        font-weight:    500;
        margin-bottom:  6px;
        display:        block;
        letter-spacing: 0.02em;
    }
    .form-group {
        margin-bottom: 16px;
    }

    /* ---- Tables ------------------------------------------- */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0 0 var(--md-shape-lg) var(--md-shape-lg);
    }
    .data-table th {
        padding:        10px 14px;
        font-size:      var(--md-label-md);
        font-weight:    700;
        letter-spacing: 0.06em;
        white-space:    nowrap;
        text-transform: uppercase;
    }
    .data-table td {
        padding:       12px 14px;
        font-size:     var(--md-body-md);
        vertical-align: middle;
        white-space:   nowrap;
    }

    /* ---- Bottom navigation bar ---------------------------- */
    .bottom-nav {
        display: flex;
        height:  80px;
    }
    .bottom-nav-inner {
        height:     80px;
        max-height: 80px;
    }
    .bottom-nav-item {
        font-size:      var(--md-label-sm);
        font-weight:    500;
        letter-spacing: 0.03em;
        padding:        12px 4px 16px;
        gap:            4px;
        position:       relative;
    }
    /* MD3 nav indicator pill */
    .bottom-nav-item.active::before {
        content:       '';
        position:      absolute;
        top:           8px;
        left:          50%;
        transform:     translateX(-50%);
        width:         64px;
        height:        32px;
        background:    var(--color-primary-muted);
        border-radius: var(--md-shape-full);
        z-index:       0;
    }
    .bottom-nav-item svg,
    .bottom-nav-item span {
        position: relative;
        z-index:  1;
    }
    .bottom-nav-item svg {
        width:  24px;
        height: 24px;
    }
    .bottom-nav-more-drawer {
        border-radius: var(--md-shape-lg) var(--md-shape-lg) 0 0;
        bottom: 80px;
    }
    .bottom-nav-more-item {
        border-radius: var(--md-shape-md);
        font-size:     var(--md-label-md);
        padding:       12px 8px;
        gap:           6px;
    }
    .main-content {
        padding-bottom: 0;
    }

    /* ---- Modal (bottom sheet) ----------------------------- */
    .modal-overlay {
        align-items: flex-end;
        padding:     0;
    }
    .modal {
        border-radius:  var(--border-radius-xl) var(--border-radius-xl) 0 0;
        max-width:      100%;
        width:          100%;
        max-height:     90vh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* drag handle */
    .modal::before {
        content:       '';
        display:       block;
        width:         32px;
        height:        4px;
        background:    var(--text-muted);
        border-radius: var(--md-shape-full);
        margin:        12px auto 0;
        opacity:       0.4;
    }
    .modal-header {
        padding:    16px 20px 12px;
    }
    .modal-title {
        font-size:      var(--md-title-lg);
        font-weight:    600;
        letter-spacing: 0.01em;
    }
    .modal-close {
        min-width:       var(--md-touch-target);
        min-height:      var(--md-touch-target);
        border-radius:   var(--md-shape-full);
        display:         flex;
        align-items:     center;
        justify-content: center;
    }
    .modal-body {
        padding: 16px 20px;
    }
    .modal-footer {
        padding:        12px 20px 20px;
        flex-direction: column-reverse;
        gap:            10px;
    }

    /* ---- Filter bar --------------------------------------- */
    .filter-bar {
        padding:  12px 16px;
        gap:      10px;
        flex-wrap: wrap;
    }
    .filter-bar .form-group {
        flex:      1 1 calc(50% - 10px);
        min-width: 120px;
        margin:    0;
    }
    .filter-bar .btn {
        width: 100%;
        flex:  1 1 100%;
    }
    .filter-bar-actions {
        margin-left: 0;
        width:       100%;
        flex:        1 1 100%;
    }
    .filter-bar-actions .btn {
        flex: 1;
    }

    /* ---- Shift progress card ------------------------------ */
    .shift-progress-card {
        border-radius: var(--md-shape-lg);
        padding:       20px;
        margin-bottom: 16px;
    }
    .progress-track {
        height:        6px;
        border-radius: var(--md-shape-full);
    }
    .progress-fill {
        border-radius: var(--md-shape-full);
    }
    .shift-stats-trio {
        margin-top:            16px;
        grid-template-columns: repeat(3, 1fr);
        gap:                   8px;
    }
    .shift-stat {
        border-radius: var(--md-shape-md);
        padding:       12px 8px;
        text-align:    center;
    }
    .shift-stat-value {
        font-size:      1.5rem;
        font-weight:    700;
        letter-spacing: -0.02em;
    }
    .shift-stat-desc {
        font-size:   var(--md-label-sm);
        margin-top:  4px;
        letter-spacing: 0.03em;
    }

    /* ---- Session grid ------------------------------------- */
    .session-grid {
        grid-template-columns: repeat(2, 1fr);
        gap:           10px;
        margin-bottom: 16px;
    }
    .session-skeleton {
        height:        88px;
        border-radius: var(--md-shape-lg);
    }

    /* ---- Dashboard panels --------------------------------- */
    .dashboard-panels {
        grid-template-columns: 1fr;
        gap:           16px;
        margin-bottom: 16px;
    }

    /* ---- Page header row ---------------------------------- */
    .page-header-row {
        flex-direction: column;
        align-items:    flex-start;
        gap:            12px;
    }
    .page-header-row > *:last-child { width: 100%; }
    .page-header-row .btn {
        width:           100%;
        justify-content: center;
    }

    /* ---- Checkbox row ------------------------------------- */
    .checkbox-row {
        border-radius: var(--md-shape-lg);
        padding:       16px;
        gap:           12px;
    }
    .checkbox-row input[type="checkbox"] {
        width:  22px;
        height: 22px;
    }

    /* ---- Alert -------------------------------------------- */
    .alert {
        border-radius: var(--md-shape-lg);
        font-size:     var(--md-body-md);
        padding:       12px 16px;
    }

    /* ---- Auth card ---------------------------------------- */
    .auth-card {
        border-radius: var(--md-shape-xl);
        padding:       28px 24px;
    }

    /* ---- Sidebar drawer ----------------------------------- */
    .sidebar-brand {
        padding: 20px 16px;
    }
    .nav-item {
        border-radius: var(--md-shape-full);
        margin:        2px 8px;
        padding:       0 16px;
        height:        56px;
        min-height:    56px;
        font-size:     var(--md-label-lg);
        font-weight:   500;
        letter-spacing: 0.02em;
        display:       flex;
        align-items:   center;
        gap:           12px;
        border-left:   none !important;
    }
    .nav-item.active {
        border-left: none !important;
    }
    .sidebar-footer {
        padding: 12px 8px;
    }
    .user-pill {
        border-radius: var(--md-shape-lg);
        padding:       10px 12px;
    }

    /* ---- Spinner ------------------------------------------ */
    .spinner {
        width:        24px;
        height:       24px;
        border-width: 2.5px;
    }

    /* ---- Form grid ---------------------------------------- */
    .form-grid-2 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* ---- Date range row ----------------------------------- */
    .date-range-row {
        flex-direction: column;
        gap: 10px;
    }
    .date-range-row .form-control {
        width: 100%;
    }

    /* ---- Notification dropdown ---------------------------- */
    .notif-dropdown {
        position: fixed !important;
        left:     12px !important;
        right:    12px !important;
        top:      calc(56px + 8px) !important;
        width:    auto !important;
        border-radius: var(--border-radius-lg) !important;
    }

    /* ---- Logout button in topbar -------------------------- */
    .topbar-logout {
        display:         flex;
        min-width:       var(--md-touch-target);
        min-height:      var(--md-touch-target);
        border-radius:   var(--md-shape-full);
        align-items:     center;
        justify-content: center;
        color:           var(--color-danger);
        padding:         0;
    }
    .topbar-logout svg {
        width:  22px;
        height: 22px;
    }

    /* ---- Products grid ------------------------------------ */
    .products-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* ---- Export buttons ----------------------------------- */
    #header-export-btns {
        display:   flex;
        flex-wrap: wrap;
        gap:       8px;
        width:     100%;
    }
    #header-export-btns .btn {
        flex:      1 1 calc(33% - 8px);
        min-width: 80px;
        justify-content: center;
    }

    /* ---- Skeleton cells ----------------------------------- */
    .skeleton-cell {
        border-radius: var(--md-shape-sm);
        height:        16px;
    }

}

/* ---- Extra-small (≤ 380px) adjustments ------------------- */
@media (max-width: 380px) {
    .stat-value {
        font-size: 1.6rem;
    }
    .stat-label {
        font-size: 0.6rem;
    }
    .shift-stats-trio {
        gap: 6px;
    }
    .shift-stat {
        padding: 10px 4px;
    }
    .shift-stat-value {
        font-size: 1.25rem;
    }
}


/* Remove tap flash on mobile */
@media (hover: none) and (pointer: coarse) {
    * { -webkit-tap-highlight-color: transparent; }
}