/* ═══════════════════════════════════════════════════════════════
   VJ Plus Factory — Material Design 3 Light Theme
   Seed colour: #1A2B4A (VJ Plus Navy) + #F5C842 (Amber)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --md-primary:              #1A2B4A;
  --md-on-primary:           #FFFFFF;
  --md-primary-container:    #D3E4FF;
  --md-on-primary-container: #001C3D;
  --md-secondary:            #7B5800;
  --md-on-secondary:         #FFFFFF;
  --md-secondary-container:  #FFDEA8;
  --md-on-secondary-container:#271900;
  --md-tertiary:             #8B5000;
  --md-on-tertiary:          #FFFFFF;
  --md-tertiary-container:   #FFDBCA;
  --md-on-tertiary-container:#2E1500;
  --md-error:                #BA1A1A;
  --md-on-error:             #FFFFFF;
  --md-error-container:      #FFDAD6;
  --md-on-error-container:   #410002;
  --md-background:           #F8F9FF;
  --md-on-background:        #191C22;
  --md-surface:              #F8F9FF;
  --md-on-surface:           #191C22;
  --md-surface-variant:      #DFE2EB;
  --md-on-surface-variant:   #43474E;
  --md-outline:              #73777F;
  --md-outline-variant:      #C3C7CF;
  --md-surface-container-lowest:  #FFFFFF;
  --md-surface-container-low:     #F1F3FA;
  --md-surface-container:         #ECEEF5;
  --md-surface-container-high:    #E6E8EF;
  --md-surface-container-highest: #E0E3EA;
  --md-success:              #1A6B3A;
  --md-success-container:    #C8F5D7;
  --md-warning:              #7B5800;
  --md-warning-container:    #FFDEA8;
  --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-font:  'Roboto', sans-serif;
  --md-mono:  'Roboto Mono', monospace;
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --md-primary:              #A4C8FF;
  --md-on-primary:           #003064;
  --md-primary-container:    #00458E;
  --md-on-primary-container: #D3E4FF;
  --md-secondary:            #FFBA3B;
  --md-on-secondary:         #412D00;
  --md-secondary-container:  #5D4200;
  --md-on-secondary-container: #FFDEA8;
  --md-tertiary:             #FFB694;
  --md-on-tertiary:          #4E2600;
  --md-tertiary-container:   #6F3B11;
  --md-on-tertiary-container: #FFDBCA;
  --md-error:                #FFB4AB;
  --md-on-error:             #690005;
  --md-error-container:      #93000A;
  --md-on-error-container:   #FFDAD6;
  --md-background:           #111318;
  --md-on-background:        #E2E2E9;
  --md-surface:              #111318;
  --md-on-surface:           #E2E2E9;
  --md-surface-variant:      #43474E;
  --md-on-surface-variant:   #C3C7CF;
  --md-outline:              #8D9199;
  --md-outline-variant:      #43474E;
  --md-surface-container-lowest:  #0C0E13;
  --md-surface-container-low:     #191C22;
  --md-surface-container:         #1D2026;
  --md-surface-container-high:    #282B31;
  --md-surface-container-highest: #32353C;
  --md-success:              #72DB93;
  --md-success-container:    #004D20;
  --md-warning:              #FFBA3B;
  --md-warning-container:    #5D4200;
  --md-inverse-surface:      #E2E2E9;
  --md-inverse-on-surface:   #2F3036;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--md-background); color: var(--md-on-surface); font-family: var(--md-font); font-size: 14px; line-height: 1.5; min-height: 100vh; }

/* ── APP SHELL ── */
.app-shell { display: flex; flex-direction: row; height: 100vh; overflow: hidden; }
.main-content { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; background: var(--md-background); }

/* ── NAV RAIL ── */
.nav-rail { width: 80px; background: var(--md-surface-container-low); border-right: 1px solid var(--md-outline-variant); display: flex; flex-direction: column; align-items: center; padding: 12px 0 16px; gap: 2px; flex-shrink: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; position: sticky; top: 0; }
.rail-brand { width: 48px; height: 48px; border-radius: var(--md-shape-md); background: var(--md-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; flex-shrink: 0; text-decoration: none; }
.rail-brand-text { color: var(--md-on-primary); font-size: 16px; font-weight: 700; font-family: var(--md-mono); }
.rail-item { width: 72px; border-radius: var(--md-shape-full); display: flex; flex-direction: column; align-items: center; padding: 4px 0 6px; cursor: pointer; text-decoration: none; transition: all .15s; position: relative; gap: 2px; flex-shrink: 0; }
.rail-indicator { width: 56px; height: 32px; border-radius: var(--md-shape-full); display: flex; align-items: center; justify-content: center; transition: background .15s; position: relative; }
.rail-item:hover .rail-indicator { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.rail-item.active .rail-indicator { background: var(--md-secondary-container); }
.rail-item .material-icons-round { color: var(--md-on-surface-variant); font-size: 22px; }
.rail-item.active .material-icons-round { color: var(--md-on-secondary-container); }
.rail-label { font-size: 10px; font-weight: 500; color: var(--md-on-surface-variant); text-align: center; line-height: 1.2; text-transform: uppercase; letter-spacing: .3px; width: 70px; word-wrap: break-word; }
.rail-item.active .rail-label { color: var(--md-secondary); }
.rail-badge { position: absolute; top: -2px; right: 2px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--md-error); color: var(--md-on-error); font-size: 9px; font-weight: 700; padding: 0 4px; display: flex; align-items: center; justify-content: center; }
.rail-divider { width: 40px; height: 1px; background: var(--md-outline-variant); margin: 6px 0; flex-shrink: 0; }
.rail-group-divider { width: 40px; height: 1px; background: var(--md-outline-variant); margin: 10px 0 2px; flex-shrink: 0; }
.rail-group-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--md-on-surface-variant); opacity: 0.5; padding: 0 0 3px; text-align: center; }

/* ── TOP BAR ── */
.top-bar { background: var(--md-surface-container-low); height: 64px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; flex-shrink: 0; border-bottom: 1px solid var(--md-outline-variant); }
.top-bar-left { display: flex; align-items: center; gap: 16px; }
.top-bar-title { font-size: 20px; font-weight: 500; color: var(--md-on-surface); }
.top-bar-sub { font-size: 12px; color: var(--md-on-surface-variant); }
.top-bar-right { display: flex; align-items: center; gap: 8px; }
.shutdown-chip { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--md-shape-full); background: var(--md-warning-container); color: var(--md-warning); font-size: 11px; font-weight: 500; }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--md-shape-full); background: var(--md-surface-container-high); cursor: pointer; text-decoration: none; transition: background .15s; }
.user-chip:hover { background: var(--md-surface-container-highest); }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--md-primary-container); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: var(--md-on-primary-container); flex-shrink: 0; }
.user-name { font-size: 13px; font-weight: 500; color: var(--md-on-surface); }
.user-role { font-size: 11px; color: var(--md-on-surface-variant); }

/* ── ALERTS / BANNERS ── */
.alert-bar { flex-shrink: 0; }
.md-banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; font-size: 13px; border-bottom: 1px solid var(--md-outline-variant); }
.md-banner.warning { background: var(--md-warning-container); color: var(--md-on-secondary-container); }
.md-banner.error   { background: var(--md-error-container);   color: var(--md-on-error-container); }
.md-banner.info    { background: var(--md-primary-container);  color: var(--md-on-primary-container); }
.md-banner.success { background: var(--md-success-container);  color: var(--md-success); }
.md-banner a, .alert-link { color: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.alert-dismiss { margin-left: auto; background: transparent; border: none; cursor: pointer; color: inherit; font-size: 16px; opacity: .7; flex-shrink: 0; }
.flash-message { padding: 10px 16px; border-radius: var(--md-shape-sm); margin-bottom: 12px; font-size: 13px; }
.flash-success { background: var(--md-success-container); color: var(--md-success); }
.flash-error   { background: var(--md-error-container);   color: var(--md-on-error-container); }
.flash-info    { background: var(--md-primary-container);  color: var(--md-on-primary-container); }
.flash-warning { background: var(--md-warning-container);  color: var(--md-warning); }

/* ── PAGE CONTENT ── */
.page-content { padding: 20px 24px; flex: 1; max-width: 1480px; width: 100%; }

/* ── CARDS ── */
.md-card          { background: var(--md-surface-container-low);     border-radius: var(--md-shape-lg); padding: 16px; }
.md-card-outlined { background: var(--md-surface-container-lowest);  border-radius: var(--md-shape-lg); padding: 16px; border: 1px solid var(--md-outline-variant); }
.md-card-elevated { background: var(--md-surface-container-lowest);  border-radius: var(--md-shape-lg); padding: 16px; box-shadow: 0 1px 3px rgba(26,43,74,.15); }
.md-card-title    { font-size: 11px; font-weight: 500; letter-spacing: .8px; color: var(--md-on-surface-variant); text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.md-card-title .mls { margin-left: auto; font-size: 11px; text-transform: none; letter-spacing: 0; }

/* ── STATS ── */
.stats-row    { display: grid; gap: 12px; margin-bottom: 20px; }
.stats-4      { grid-template-columns: repeat(4,1fr); }
.stats-5      { grid-template-columns: repeat(5,1fr); }
.stats-3      { grid-template-columns: repeat(3,1fr); }
.stats-6      { grid-template-columns: repeat(6,1fr); }
.md-stat      { background: var(--md-surface-container); border-radius: var(--md-shape-lg); padding: 16px; border-left: 4px solid var(--stat-color, var(--md-outline-variant)); }
.md-stat-label{ font-size: 11px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--md-on-surface-variant); margin-bottom: 4px; }
.md-stat-value{ font-size: 32px; font-weight: 300; color: var(--stat-color, var(--md-on-surface)); line-height: 1; font-family: var(--md-mono); }
.md-stat-sub  { font-size: 11px; color: var(--md-on-surface-variant); margin-top: 3px; }
.md-stat.primary { --stat-color: var(--md-primary); }
.md-stat.secondary{ --stat-color: var(--md-secondary); }
.md-stat.error    { --stat-color: var(--md-error); }
.md-stat.success  { --stat-color: var(--md-success); }
.md-stat.warning  { --stat-color: var(--md-warning); }
.md-stat.tertiary { --stat-color: var(--md-tertiary); }

/* ── GRID HELPERS ── */
.g2  { display: grid; grid-template-columns: 1fr 1fr;      gap: 16px; }
.g3  { display: grid; grid-template-columns: 1fr 1fr 1fr;  gap: 16px; }
.gsb { display: grid; grid-template-columns: 280px 1fr;    gap: 16px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }

/* ── TILES ── */
.tiles-grid   { display: grid; gap: 12px; margin-bottom: 20px; }
.tiles-6      { grid-template-columns: repeat(6,1fr); }
.tiles-4      { grid-template-columns: repeat(4,1fr); }
.md-tile      { background: var(--md-surface-container-high); border-radius: var(--md-shape-lg); padding: 16px 14px 14px; cursor: pointer; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .2s; text-decoration: none; }
.md-tile:hover{ box-shadow: 0 2px 8px rgba(26,43,74,.18); }
.md-tile-icon { width: 40px; height: 40px; border-radius: var(--md-shape-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.md-tile-icon.primary   { background: var(--md-primary-container); }
.md-tile-icon.primary .material-icons-round { color: var(--md-on-primary-container); }
.md-tile-icon.secondary { background: var(--md-secondary-container); }
.md-tile-icon.secondary .material-icons-round { color: var(--md-on-secondary-container); }
.md-tile-icon.tertiary  { background: var(--md-tertiary-container); }
.md-tile-icon.tertiary .material-icons-round { color: var(--md-on-tertiary-container); }
.md-tile-icon.error     { background: var(--md-error-container); }
.md-tile-icon.error .material-icons-round { color: var(--md-on-error-container); }
.md-tile-icon.success   { background: var(--md-success-container); }
.md-tile-icon.success .material-icons-round { color: var(--md-success); }
.md-tile-label{ font-size: 13px; font-weight: 500; color: var(--md-on-surface); line-height: 1.2; }
.md-tile-badge{ display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--md-shape-full); font-size: 11px; font-weight: 500; width: fit-content; }
.md-tile-badge.error   { background: var(--md-error-container);   color: var(--md-on-error-container); }
.md-tile-badge.warning { background: var(--md-warning-container); color: var(--md-warning); }
.md-tile-badge.success { background: var(--md-success-container); color: var(--md-success); }
.md-tile-badge.primary { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.md-tile-badge.surface { background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); }
/* ── Page-specific tile icon colours (match nav rail / page themes) ── */
.md-tile-icon.page-prod2    { background: #FFE4E6; }
.md-tile-icon.page-prod2    .material-icons-round { color: #881337; }
.md-tile-icon.page-prod1    { background: #DBEAFE; }
.md-tile-icon.page-prod1    .material-icons-round { color: #1E3A8A; }
.md-tile-icon.page-inv1     { background: #FEF3C7; }
.md-tile-icon.page-inv1     .material-icons-round { color: #78350F; }
.md-tile-icon.page-inv2     { background: #D1FAE5; }
.md-tile-icon.page-inv2     .material-icons-round { color: #064E3B; }
.md-tile-icon.page-po       { background: #FFEDD5; }
.md-tile-icon.page-po       .material-icons-round { color: #7C2D12; }
.md-tile-icon.page-delivery { background: #CFFAFE; }
.md-tile-icon.page-delivery .material-icons-round { color: #0C4A6E; }
.md-tile-icon.page-reports  { background: #E2E8F0; }
.md-tile-icon.page-reports  .material-icons-round { color: #0F172A; }
[data-theme="dark"] .md-tile-icon.page-prod2    { background: #9F1239; }
[data-theme="dark"] .md-tile-icon.page-prod2    .material-icons-round { color: #FECDD3; }
[data-theme="dark"] .md-tile-icon.page-prod1    { background: #1E40AF; }
[data-theme="dark"] .md-tile-icon.page-prod1    .material-icons-round { color: #BFDBFE; }
[data-theme="dark"] .md-tile-icon.page-inv1     { background: #92400E; }
[data-theme="dark"] .md-tile-icon.page-inv1     .material-icons-round { color: #FDE68A; }
[data-theme="dark"] .md-tile-icon.page-inv2     { background: #065F46; }
[data-theme="dark"] .md-tile-icon.page-inv2     .material-icons-round { color: #A7F3D0; }
[data-theme="dark"] .md-tile-icon.page-po       { background: #9A3412; }
[data-theme="dark"] .md-tile-icon.page-po       .material-icons-round { color: #FED7AA; }
[data-theme="dark"] .md-tile-icon.page-delivery { background: #0E7490; }
[data-theme="dark"] .md-tile-icon.page-delivery .material-icons-round { color: #BAE6FD; }
[data-theme="dark"] .md-tile-icon.page-reports  { background: #1E293B; }
[data-theme="dark"] .md-tile-icon.page-reports  .material-icons-round { color: #CBD5E1; }

/* ── TABLES ── */
.tw            { overflow-x: auto; }
table          { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th       { background: var(--md-surface-container-high); padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--md-on-surface-variant); white-space: nowrap; border-bottom: 1px solid var(--md-outline-variant); }
tbody tr       { border-bottom: 1px solid var(--md-outline-variant); transition: background .1s; }
tbody tr:hover { background: color-mix(in srgb, var(--md-primary) 4%, transparent); }
tbody td       { padding: 10px 16px; color: var(--md-on-surface); overflow: hidden; text-overflow: ellipsis; max-width: 220px; white-space: nowrap; }
.td-num        { text-align: right; font-family: var(--md-mono); }
tr.row-error   { background: color-mix(in srgb, var(--md-error) 6%, transparent) !important; }
tr.row-warning { background: color-mix(in srgb, var(--md-warning) 5%, transparent) !important; }
tr.row-success { background: color-mix(in srgb, var(--md-success) 5%, transparent) !important; }

/* ── CHIPS / BADGES ── */
.md-chip          { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--md-shape-full); font-size: 11px; font-weight: 500; white-space: nowrap; }
.chip-primary     { background: var(--md-primary-container);    color: var(--md-on-primary-container); }
.chip-secondary   { background: var(--md-secondary-container);  color: var(--md-on-secondary-container); }
.chip-tertiary    { background: var(--md-tertiary-container);   color: var(--md-on-tertiary-container); }
.chip-error       { background: var(--md-error-container);      color: var(--md-on-error-container); }
.chip-success     { background: var(--md-success-container);    color: var(--md-success); }
.chip-warning     { background: var(--md-warning-container);    color: var(--md-warning); }
.chip-surface     { background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); }

/* ── BUTTONS ── */
.btn            { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; border-radius: var(--md-shape-full); font-family: var(--md-font); font-size: 13px; font-weight: 500; letter-spacing: .1px; cursor: pointer; border: none; position: relative; overflow: hidden; white-space: nowrap; text-decoration: none; transition: box-shadow .15s; }
.btn .material-icons-round { font-size: 16px; }
.btn-filled     { background: var(--md-primary); color: var(--md-on-primary); }
.btn-filled:hover { box-shadow: 0 1px 4px rgba(26,43,74,.35); }
.btn-tonal      { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.btn-tonal:hover{ box-shadow: 0 1px 3px rgba(26,43,74,.2); }
.btn-outlined   { background: transparent; color: var(--md-primary); border: 1px solid var(--md-outline); }
.btn-text       { background: transparent; color: var(--md-primary); padding: 8px 12px; }
.btn-error-tonal{ background: var(--md-error-container); color: var(--md-on-error-container); }
.btn-success-tonal { background: var(--md-success-container); color: var(--md-success); }
.btn-sm         { padding: 5px 14px; font-size: 12px; }
.btn-sm .material-icons-round { font-size: 14px; }
.btn-row        { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.btn-split      { display: inline-flex; }
.btn-split .btn { border-radius: 0; }
.btn-split .btn:first-child { border-radius: var(--md-shape-full) 0 0 var(--md-shape-full); }
.btn-split .btn-split-more  { border-radius: 0 var(--md-shape-full) var(--md-shape-full) 0; border-left: none; padding: 5px 10px; }

/* ── FORMS ── */
.form-row  { display: grid; gap: 12px; margin-bottom: 14px; }
.f2 { grid-template-columns: 1fr 1fr; }
.f3 { grid-template-columns: 1fr 1fr 1fr; }
.f4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.form-label { font-size: 11px; font-weight: 500; color: var(--md-on-surface-variant); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; display: block; }
.form-input, .form-select {
  width: 100%; background: var(--md-surface-container-high);
  border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-xs);
  color: var(--md-on-surface); font-family: var(--md-font); font-size: 13px;
  padding: 8px 12px; outline: none; transition: border .15s;
}
.form-input:focus, .form-select:focus { border-color: var(--md-primary); border-width: 2px; }
.form-select option { background: var(--md-surface-container); }
.form-textarea { width: 100%; background: var(--md-surface-container-high); border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-xs); color: var(--md-on-surface); font-family: var(--md-font); font-size: 13px; padding: 8px 12px; outline: none; resize: vertical; }

/* ── DIALOGS ── */
.md-scrim  { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 600; align-items: center; justify-content: center; }
.md-scrim.show { display: flex; }
.md-dialog { background: var(--md-surface-container-high); border-radius: var(--md-shape-xl); padding: 24px; width: 520px; max-width: 95vw; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.md-dialog-title   { font-size: 20px; font-weight: 500; color: var(--md-on-surface); }
.md-dialog-body    { font-size: 14px; color: var(--md-on-surface-variant); line-height: 1.6; }
.md-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }

/* ── SNACKBAR ── */
.snackbar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--md-on-surface); color: var(--md-surface); border-radius: var(--md-shape-md); padding: 12px 20px; font-size: 14px; font-weight: 500; z-index: 900; opacity: 0; transition: opacity .2s, transform .25s; pointer-events: none; white-space: nowrap; max-width: 90vw; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.snackbar.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ── MISC ── */
.sep        { height: 1px; background: var(--md-outline-variant); margin: 12px 0; }
.md-progress      { background: var(--md-surface-container-highest); border-radius: 4px; height: 4px; overflow: hidden; }
.md-progress-fill { height: 4px; border-radius: 4px; background: var(--md-primary); }
.md-progress-fill.success { background: var(--md-success); }
.md-progress-fill.warning { background: var(--md-warning); }
.md-progress-fill.error   { background: var(--md-error); }
.material-icons-round { font-size: 20px; line-height: 1; vertical-align: middle; }
.priority-flag { display: inline-flex; align-items: center; gap: 3px; background: var(--md-error-container); color: var(--md-on-error-container); border-radius: var(--md-shape-full); padding: 2px 7px; font-size: 10px; font-weight: 500; }
.mono { font-family: var(--md-mono); }

/* ── LOGIN PAGE ── */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--md-background); }
.login-surface { background: var(--md-surface-container-lowest); border-radius: var(--md-shape-xl); padding: 40px; width: 380px; box-shadow: 0 4px 16px rgba(26,43,74,.14); }
.login-brand   { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.login-logomark{ width: 48px; height: 48px; border-radius: var(--md-shape-md); background: var(--md-primary); display: flex; align-items: center; justify-content: center; }
.login-logomark span { color: var(--md-on-primary); font-size: 18px; font-weight: 700; font-family: var(--md-mono); }
.login-title   { font-size: 20px; font-weight: 500; color: var(--md-on-surface); }
.login-title small { display: block; font-size: 12px; font-weight: 400; color: var(--md-on-surface-variant); }
.login-error   { background: var(--md-error-container); color: var(--md-on-error-container); padding: 10px 14px; border-radius: var(--md-shape-sm); font-size: 13px; margin-bottom: 16px; }
.login-btn     { width: 100%; padding: 12px; background: var(--md-primary); color: var(--md-on-primary); border: none; border-radius: var(--md-shape-full); font-family: var(--md-font); font-size: 14px; font-weight: 500; cursor: pointer; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; }
.login-divider::before,.login-divider::after { content:''; flex:1; height:1px; background: var(--md-outline-variant); }
.login-divider span { font-size: 11px; color: var(--md-on-surface-variant); white-space: nowrap; }

/* ── KIOSK ── */
.kiosk-page { min-height: 100vh; background: var(--md-background); }
.kiosk-bar  { background: var(--md-primary); padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.kiosk-title{ font-size: 22px; font-weight: 500; color: var(--md-on-primary); }
.kiosk-offline { background: var(--md-warning-container); color: var(--md-warning); padding: 8px 16px; font-size: 12px; font-weight: 500; display: none; }
.kiosk-offline.show { display: block; }

/* ── HAMBURGER / MOBILE NAV ── */
.hamburger-btn { display: none; background: none; border: none; cursor: pointer; padding: 6px; border-radius: var(--md-shape-sm); color: var(--md-on-surface-variant); line-height: 1; }
.hamburger-btn:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.hamburger-btn .material-icons-round { font-size: 24px; display: block; }
.nav-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 199; }
.nav-scrim.show { display: block; }

/* ── SPLIT BUTTON ── */
.split-btn-wrap{position:relative;display:inline-flex}
.split-btn-main{padding:5px 12px;font-size:12px;font-weight:500;cursor:pointer;background:var(--md-surface-container-high);color:var(--md-on-surface);border:1px solid var(--md-outline-variant);border-right:none;border-radius:var(--md-shape-sm) 0 0 var(--md-shape-sm);font-family:var(--md-font);transition:background .15s}
.split-btn-main:hover{background:var(--md-surface-container-highest)}
.split-btn-arrow{padding:5px 4px;cursor:pointer;background:var(--md-surface-container-high);color:var(--md-on-surface-variant);border:1px solid var(--md-outline-variant);border-radius:0 var(--md-shape-sm) var(--md-shape-sm) 0;font-family:var(--md-font);transition:background .15s;display:flex;align-items:center}
.split-btn-arrow:hover{background:var(--md-surface-container-highest)}
.split-btn-menu{display:none;position:fixed;background:var(--md-surface-container-high);border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-sm);box-shadow:0 4px 12px rgba(0,0,0,.15);min-width:160px;z-index:2000;overflow:hidden}
.split-btn-menu.open{display:block}
.split-btn-menu a,.split-btn-menu button{display:block;width:100%;text-align:left;padding:9px 16px;font-size:13px;font-family:var(--md-font);background:none;border:none;cursor:pointer;color:var(--md-on-surface);text-decoration:none;transition:background .1s;box-sizing:border-box}
.split-btn-menu a:hover,.split-btn-menu button:hover{background:var(--md-surface-container-highest)}
.split-btn-menu .menu-divider{border-top:1px solid var(--md-outline-variant);margin:2px 0}

/* ── TAB BAR ── */
.md-tab-bar{display:flex;gap:0;border-bottom:2px solid var(--md-outline-variant);flex-wrap:wrap;margin-bottom:20px}
.md-tab{padding:10px 20px;font-size:13px;font-weight:500;cursor:pointer;background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;color:var(--md-on-surface-variant);font-family:var(--md-font);transition:color .15s;white-space:nowrap;display:flex;align-items:center;gap:6px}
.md-tab.active{color:var(--md-primary);border-bottom-color:var(--md-primary)}
.md-tab:hover:not(.active){color:var(--md-on-surface)}
.md-tab-badge{font-size:10px;padding:1px 5px;border-radius:8px;background:var(--md-error-container,#fde8e8);color:var(--md-error)}

/* ── SUB-TAB BAR (nested tabs, smaller, surface-container background) ── */
.md-sub-tab-bar{display:flex;gap:0;border-bottom:1px solid var(--md-outline-variant);margin-bottom:16px;background:var(--md-surface-container);border-radius:var(--md-shape-sm) var(--md-shape-sm) 0 0;padding:0 8px;flex-wrap:wrap}
.md-sub-tab{padding:8px 16px;font-size:12px;font-weight:500;cursor:pointer;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--md-on-surface-variant);font-family:var(--md-font);transition:color .15s;white-space:nowrap;display:flex;align-items:center;gap:4px}
.md-sub-tab.active{color:var(--md-primary);border-bottom-color:var(--md-primary)}
.md-sub-tab:hover:not(.active){color:var(--md-on-surface)}

/* ── EMPTY STATE HELPER ── */
.del-empty{padding:32px;text-align:center;color:var(--md-on-surface-variant)}
.del-empty .material-icons-round{font-size:40px;display:block;margin-bottom:8px;opacity:.4}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .hamburger-btn { display: flex; align-items: center; justify-content: center; }
  .nav-rail {
    display: flex;
    position: fixed;
    left: -88px;
    top: 0;
    height: 100vh;
    z-index: 200;
    transition: left .25s ease;
    box-shadow: 4px 0 16px rgba(0,0,0,.15);
    width: 80px;
  }
  .nav-rail.open { left: 0; }
  .stats-4,.stats-5,.stats-3 { grid-template-columns: repeat(2,1fr); }
  .g2,.g3,.gsb { grid-template-columns: 1fr; }
  .tiles-6,.tiles-4 { grid-template-columns: repeat(2,1fr); }
}