/* ================================================================
   ESHKOL ERP v4 — PRECISION BLUEPRINT PRO
   Glassmorphism · Dark Mode · Full Design System
   ================================================================ */

/* ─── Light Theme ───────────────────────────────────────── */
:root {
  --brand-blue:      #004699;
  --brand-blue-mid:  #1563cc;
  --brand-blue-light:#3a80e8;
  --brand-blue-dim:  #c8dbff;
  --brand-blue-faint:#eef3ff;

  --brand-orange:    #e05c00;
  --brand-orange-mid:#f07020;
  --brand-orange-dim:#ffd4b8;
  --brand-orange-faint:#fff4ee;

  --success:   #15803d;  --success-bg: #dcfce7;  --success-border:#86efac;
  --warning:   #b45309;  --warning-bg: #fef3c7;  --warning-border:#fcd34d;
  --error:     #b91c1c;  --error-bg:   #fee2e2;  --error-border:  #fca5a5;
  --info:      #0369a1;  --info-bg:    #e0f2fe;  --info-border:   #7dd3fc;
  --purple:    #7c3aed;  --purple-bg:  #ede9fe;

  --bg:        #f2f4f8;
  --surface-0: #ffffff;
  --surface-1: #f7f8fc;
  --surface-2: #eef0f7;
  --surface-3: #e4e7f2;
  --surface-4: #d8dceb;

  --text-primary:  #0f1117;
  --text-secondary:#374151;
  --text-tertiary: #6b7280;
  --text-muted:    #9ca3af;
  --text-invert:   #ffffff;

  --border:      #e2e6f0;
  --border-focus:var(--brand-blue);

  /* Sidebar — dark always */
  --sidebar-bg:   #0a1628;
  --sidebar-text: rgba(255,255,255,0.70);
  --sidebar-dim:  rgba(255,255,255,0.28);
  --sidebar-hover:rgba(255,255,255,0.07);
  --sidebar-active:rgba(0,90,200,0.55);

  /* Glassmorphism */
  --glass-bg:     rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.5);
  --glass-shadow: 0 8px 32px rgba(15,23,58,0.12);

  /* Typography */
  --font-display:'Plus Jakarta Sans', sans-serif;
  --font-body:   'Inter', sans-serif;
  --font-mono:   'IBM Plex Mono', monospace;

  /* Radius */
  --r-xs:.25rem; --r-sm:.375rem; --r-md:.5rem;
  --r-lg:.75rem; --r-xl:1rem;   --r-2xl:1.375rem;
  --r-3xl:1.75rem; --r-full:9999px;

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(12,22,41,.06);
  --shadow-sm: 0 2px 8px rgba(12,22,41,.08), 0 0 0 1px rgba(12,22,41,.04);
  --shadow-md: 0 4px 20px rgba(12,22,41,.10), 0 0 0 1px rgba(12,22,41,.04);
  --shadow-lg: 0 8px 40px rgba(12,22,41,.14), 0 0 0 1px rgba(12,22,41,.04);
  --shadow-xl: 0 24px 64px rgba(12,22,41,.18);
  --shadow-blue:  0 6px 24px rgba(0,70,153,.22);
  --shadow-orange:0 6px 24px rgba(224,92,0,.22);
  --shadow-glow:  0 0 0 3px rgba(0,70,153,.14);

  --sidebar-w:15.5rem;
  --topbar-h: 3.75rem;
  --ease:      cubic-bezier(0.4,0,0.2,1);
  --ease-out:  cubic-bezier(0,0,0.2,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
}

/* ─── Dark Theme ────────────────────────────────────────── */
[data-theme="dark"] {
  --brand-blue-faint:#0d1f3c;
  --brand-blue-dim:  #1e3a5f;
  --brand-orange-faint:#2a1200;
  --brand-orange-dim: #4a2000;

  --success-bg:#052e16; --warning-bg:#1c1300; --error-bg:#1f0000; --info-bg:#031d2d;
  --purple-bg: #150d2e;

  --bg:       #0d1117;
  --surface-0:#161b22;
  --surface-1:#1c2330;
  --surface-2:#21293a;
  --surface-3:#2d3748;
  --surface-4:#374151;

  --text-primary: #e6edf3;
  --text-secondary:#b0bec5;
  --text-tertiary: #8b98a5;
  --text-muted:    #586069;

  --border:      #30363d;
  --glass-bg:    rgba(22,27,34,0.85);
  --glass-border:rgba(255,255,255,0.08);
  --glass-shadow:0 8px 32px rgba(0,0,0,0.4);

  --shadow-xs: 0 1px 3px rgba(0,0,0,.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,.4),  0 0 0 1px rgba(255,255,255,.04);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.55);
}

/* ─── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text-primary);min-height:100dvh;line-height:1.55;font-size:.9375rem;transition:background .25s var(--ease),color .25s var(--ease);}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);line-height:1.2;font-weight:700;}
a{text-decoration:none;color:inherit;}
input,select,textarea,button{font-family:inherit;}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;display:inline-block;line-height:1;vertical-align:middle;text-transform:none;white-space:nowrap;}
.material-symbols-outlined.fill{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;}

/* Production workspace */
.production-shell{display:flex;flex-direction:column;gap:1.35rem;}
.production-hero{
  position:relative;
  overflow:hidden;
  padding:1.65rem 1.75rem;
  border-radius:1.4rem;
  border:1px solid rgba(21,99,204,.18);
  background:
    radial-gradient(circle at top right, rgba(240,112,32,.24), transparent 28%),
    radial-gradient(circle at left center, rgba(21,99,204,.22), transparent 35%),
    linear-gradient(135deg, #ffffff 0%, #f8faff 42%, #edf4ff 100%);
  box-shadow:0 18px 40px rgba(8,25,56,.10), 0 0 0 1px rgba(21,99,204,.04);
}
.production-hero::after{
  content:'';
  position:absolute;inset:auto -10% -35% auto;
  width:18rem;height:18rem;border-radius:50%;
  background:radial-gradient(circle, rgba(240,112,32,.16), transparent 68%);
  pointer-events:none;
}
.production-hero-copy{display:flex;flex-direction:column;gap:.55rem;max-width:42rem;}
.production-hero-copy > p{
  margin:0 !important;
  color:var(--text-secondary) !important;
  opacity:1 !important;
  font-size:.98rem !important;
  max-width:44rem;
}
.production-hero-kicker{
  font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-blue);font-family:var(--font-display);
}
.production-hero-title{display:flex;align-items:center;gap:.8rem;}
.production-hero-title .material-symbols-outlined{
  width:2.8rem;height:2.8rem;display:inline-flex;align-items:center;justify-content:center;
  border-radius:1rem;background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-light));
  color:#fff;box-shadow:var(--shadow-blue);
}
.production-hero-title h1{margin:0;font-size:2rem;color:var(--text-primary);}
.production-hero-title h1::after{
  content:'';
  display:block;
  width:4.2rem;
  height:.3rem;
  margin-top:.55rem;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand-orange),var(--brand-blue));
}
.production-hero-text{margin:0;color:var(--text-secondary);max-width:44rem;font-size:.98rem;}
.production-hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;justify-content:space-between;margin-top:1rem;}
.production-hero-actions .btn{box-shadow:none;}
.production-hero-actions .btn.btn-sm{border-radius:.9rem;}
.production-hero-note{
  min-width:14rem;display:flex;flex-direction:column;gap:.15rem;
  padding:.85rem 1rem;border-radius:1rem;background:rgba(255,255,255,.76);
  border:1px solid var(--border);box-shadow:var(--shadow-xs);
}
.production-hero-note strong{font-size:1.45rem;color:var(--brand-blue);font-family:var(--font-display);}
.production-hero-note span{font-size:.82rem;color:var(--text-secondary);}
.production-hero-buttons{display:flex;flex-wrap:wrap;gap:.65rem;}
.production-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem;}
.production-phase-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.85rem;
}
.production-phase-tile{
  position:relative;
  text-align:left;
  padding:1rem 1rem 1rem 1.1rem;
  border-radius:1.1rem;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface-0),var(--surface-1));
  box-shadow:var(--shadow-xs);
  cursor:pointer;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.production-phase-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:rgba(21,99,204,.2);}
.production-phase-tile .material-symbols-outlined{
  color:var(--brand-blue);
  font-size:1.2rem;
  display:block;
  margin:.2rem 0 .45rem;
}
.production-phase-tile strong{
  display:block;
  font-size:.9rem;
  margin-bottom:.25rem;
}
.production-phase-tile p{
  margin:0;
  font-size:.78rem;
  color:var(--text-secondary);
  line-height:1.4;
}
.production-phase-tile__step{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.9rem;height:1.9rem;padding:0 .5rem;
  border-radius:.75rem;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-orange));
  color:#fff;font-weight:900;font-size:.78rem;
}
.production-stat-grid > div{
  background:linear-gradient(180deg,var(--surface-0),var(--surface-1)) !important;
  color:var(--text-primary) !important;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm) !important;
}
.production-stat-grid > div .material-symbols-outlined{opacity:1 !important;color:var(--brand-blue);}
.production-stat-grid > div:nth-child(2) .material-symbols-outlined{color:var(--brand-orange);}
.production-stat-grid > div:nth-child(3) .material-symbols-outlined,
.production-stat-grid > div:nth-child(6) .material-symbols-outlined{color:var(--success);}
.production-stat-grid > div:nth-child(4) .material-symbols-outlined{color:var(--purple);}
.production-stat-grid > div:nth-child(5) .material-symbols-outlined{color:var(--info);}
.production-stat-grid > div > div:nth-child(2){color:var(--text-primary) !important;}
.production-stat-grid > div > div:nth-child(3){color:var(--text-secondary) !important;opacity:1 !important;}
.production-stat-grid > div > div:last-child{
  border-top:1px solid var(--border) !important;
  margin-top:.9rem !important;padding-top:.9rem !important;
}
.production-stat-grid > div > div:last-child > div{color:var(--text-muted) !important;opacity:1 !important;}
.production-stat-grid .kpi-card{
  min-height:8.5rem;background:linear-gradient(180deg,var(--surface-0),var(--surface-1));
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
}
.production-stat-grid .kpi-value{letter-spacing:-.02em;}
.production-tabbar{
  display:flex;flex-wrap:wrap;gap:.45rem;padding:.45rem;
  width:100%;border-radius:1rem;background:var(--surface-1);
  border:1px solid var(--border);box-shadow:var(--shadow-xs);
}
.production-tab{
  display:inline-flex;align-items:center;gap:.45rem;border:none;cursor:pointer;
  padding:.72rem .95rem;border-radius:.85rem;background:transparent;color:var(--text-secondary);
  font-weight:700;transition:all .18s var(--ease);box-shadow:none;
}
.production-tab:hover{background:var(--surface-0);color:var(--brand-blue);}
.production-tab.active{background:var(--surface-0);color:var(--brand-blue);box-shadow:var(--shadow-xs);}
.production-tab.active .material-symbols-outlined{color:var(--brand-orange);}
.production-tab-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:1.2rem;height:1.2rem;
  padding:0 .35rem;border-radius:999px;background:var(--brand-orange);color:#fff;
  font-size:.62rem;font-weight:800;
}
.production-shell .card{border-radius:1.15rem;}
.production-shell .data-table th{font-size:.7rem;letter-spacing:.12em;}
.production-shell .card.animate-in{
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.production-orders-view,
.production-shopfloor-view,
.production-planning-view{display:flex;flex-direction:column;gap:1rem;}
.production-panel{
  background:linear-gradient(180deg,var(--surface-0),var(--surface-1));
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.production-panel-warning{
  background:linear-gradient(180deg,rgba(249,115,22,.05),rgba(249,115,22,.02));
}
.production-order-card,
.production-shopfloor-card{
  background:linear-gradient(180deg,var(--surface-0),var(--surface-1));
}
.production-order-layout{align-items:stretch !important;}
.production-order-main{display:flex;flex-direction:column;gap:.2rem;}
.production-order-actions{
  min-width:10rem;
  padding-left:1rem;
  border-left:1px solid var(--border);
  justify-content:center;
}
.production-order-actions .btn,
.production-shopfloor-card .btn{justify-content:center;}
.production-shopfloor-grid{align-items:start;}
.production-shopfloor-card{
  padding:1rem 1.05rem;
  box-shadow:var(--shadow-sm);
}
.production-live-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.2rem;height:1.2rem;padding:0 .4rem;border-radius:999px;
  background:rgba(239,68,68,.14);color:var(--error);font-size:.62rem;font-weight:800;
}
.production-overview-view,
.production-quality-view,
.production-materials-view,
.production-support-view{display:flex;flex-direction:column;gap:1rem;}
.production-stage-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.9rem;
}
.production-stage-card{
  background:linear-gradient(180deg,var(--surface-0),var(--surface-1));
  border:1px solid var(--border);border-radius:1.1rem;padding:1rem;
  box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:.35rem;
}
.production-stage-card .material-symbols-outlined{color:var(--brand-blue);font-size:1.2rem;}
.production-stage-card__value{
  font-size:1.4rem;font-weight:900;font-family:var(--font-display);color:var(--text-primary);
}
.production-stage-card__label{
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:800;
}
.production-stage-card p{margin:0;font-size:.8rem;color:var(--text-secondary);line-height:1.4;}
.production-overview-columns{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1rem;align-items:start;
}
.production-flow-strip{display:flex;flex-direction:column;gap:.8rem;}
.production-flow-step{
  display:grid;grid-template-columns:2.4rem 1fr;gap:.8rem;align-items:start;
  padding:.8rem .9rem;border-radius:1rem;background:var(--surface-1);border:1px solid var(--border);
}
.production-flow-step__number{
  width:2.2rem;height:2.2rem;border-radius:.8rem;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-orange));color:#fff;font-weight:900;
}
.production-flow-step strong{display:block;font-size:.9rem;margin-bottom:.15rem;}
.production-flow-step p{margin:0;font-size:.8rem;color:var(--text-secondary);line-height:1.4;}
.production-action-board{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.75rem;
}
.production-action-tile{
  text-align:left;border:1px solid var(--border);border-radius:1rem;padding:.9rem;
  background:linear-gradient(180deg,var(--surface-0),var(--surface-1));cursor:pointer;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.production-action-tile:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.production-action-tile__top{display:flex;justify-content:space-between;gap:.75rem;align-items:center;margin-bottom:.45rem;}
.production-action-tile__top span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:800;}
.production-action-tile__top strong{font-size:1.15rem;font-family:var(--font-display);}
.production-action-tile p{margin:0;font-size:.8rem;color:var(--text-secondary);line-height:1.4;}
.production-action-tile--warning{border-color:rgba(249,115,22,.24);}
.production-action-tile--warning .production-action-tile__top strong{color:var(--warning);}
.production-action-tile--success{border-color:rgba(16,185,129,.22);}
.production-action-tile--success .production-action-tile__top strong{color:var(--success);}
.production-action-tile--info{border-color:rgba(21,99,204,.18);}
.production-action-tile--info .production-action-tile__top strong{color:var(--brand-blue);}
.production-urgent-list{
  margin-top:.95rem;padding-top:.9rem;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:.55rem;
}
.production-urgent-row,
.production-watch-row{
  display:flex;justify-content:space-between;gap:.9rem;align-items:start;
  padding:.7rem .8rem;border-radius:.9rem;background:var(--surface-1);border:1px solid var(--border);
}
.production-urgent-row p,
.production-watch-row p{margin:.15rem 0 0;font-size:.78rem;color:var(--text-secondary);line-height:1.35;}
.production-inline-note-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.75rem;
}
.production-inline-note{
  border:1px solid var(--border);border-radius:1rem;padding:.85rem .95rem;background:var(--surface-1);
}
.production-inline-note strong{display:block;margin-bottom:.25rem;font-size:.86rem;}
.production-inline-note p{margin:0;font-size:.8rem;color:var(--text-secondary);line-height:1.45;}
.production-empty-panel{
  border-style:dashed;
  background:
    linear-gradient(180deg,rgba(21,99,204,.03),rgba(21,99,204,.01)),
    linear-gradient(180deg,var(--surface-0),var(--surface-1));
}
.production-watch-list{display:flex;flex-direction:column;gap:.55rem;}
.production-control-list{display:flex;flex-direction:column;gap:.65rem;}
.production-control-row{
  display:grid;grid-template-columns:1.1fr 1fr .8fr 1fr auto;gap:.85rem;align-items:start;
  padding:.85rem .95rem;border-radius:1rem;background:var(--surface-1);border:1px solid var(--border);
}
.production-control-row strong{display:block;font-size:.84rem;}
.production-control-row p{margin:.18rem 0 0;font-size:.78rem;color:var(--text-secondary);line-height:1.35;}
.production-subtabbar{
  display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);
}
.production-subtab{
  display:inline-flex;align-items:center;gap:.4rem;border:none;cursor:pointer;
  padding:.65rem .85rem;border-radius:.8rem;background:var(--surface-1);color:var(--text-secondary);
  font-weight:700;transition:all .18s var(--ease);
}
.production-subtab:hover{background:var(--surface-0);color:var(--brand-blue);}
.production-subtab.active{background:var(--surface-0);color:var(--brand-blue);box-shadow:var(--shadow-xs);}
.production-detail-shell{display:flex;flex-direction:column;gap:1rem;}
.production-detail-hero{
  display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;
  padding:1.15rem 1.25rem;border-radius:1.25rem;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-mid));
  color:#fff;
}
.production-detail-kicker{
  margin:0 0 .25rem;font-size:.68rem;opacity:.72;text-transform:uppercase;letter-spacing:.1em;
}
.production-detail-hero h2{margin:0;font-size:1.3rem;font-family:var(--font-display);}
.production-detail-subtitle{margin:.25rem 0 0;font-size:.82rem;opacity:.82;}
.production-detail-hero-badges{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:flex-end;}
.production-detail-flow{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;
}
.production-detail-flow-step{
  padding:.85rem .95rem;border-radius:1rem;border:1px solid var(--border);
  background:var(--surface-1);display:flex;gap:.65rem;align-items:flex-start;
}
.production-detail-flow-step__dot{
  width:.9rem;height:.9rem;border-radius:999px;margin-top:.15rem;flex-shrink:0;background:var(--surface-2);
}
.production-detail-flow-step--done .production-detail-flow-step__dot{background:var(--success);}
.production-detail-flow-step--current .production-detail-flow-step__dot{background:var(--brand-blue);}
.production-detail-flow-step strong{display:block;font-size:.84rem;}
.production-detail-flow-step p{margin:.15rem 0 0;font-size:.77rem;color:var(--text-secondary);line-height:1.35;}
.production-detail-summary{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;
}
.production-detail-summary-card{
  padding:.8rem .9rem;border-radius:1rem;border:1px solid var(--border);background:var(--surface-1);
}
.production-detail-summary-card span{
  display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:800;
}
.production-detail-summary-card strong{display:block;margin-top:.28rem;font-size:.92rem;}
.production-work-sequence{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.75rem;
}
.production-work-sequence__card{
  padding:.9rem .95rem;border-radius:1rem;border:1px solid var(--border);background:var(--surface-1);
  display:flex;flex-direction:column;gap:.5rem;
}
.production-work-sequence__head{display:flex;gap:.6rem;align-items:center;}
.production-work-sequence__number{
  width:1.7rem;height:1.7rem;border-radius:.6rem;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--text-primary);font-weight:900;font-size:.78rem;flex-shrink:0;
}
.production-work-sequence__card strong{font-size:.86rem;}
.production-work-sequence__card p{margin:0;font-size:.79rem;color:var(--text-secondary);line-height:1.4;flex:1;}
.production-work-sequence__card--current{border-color:rgba(21,99,204,.18);}
.production-work-sequence__card--current .production-work-sequence__number{background:rgba(21,99,204,.14);color:var(--brand-blue);}
.production-work-sequence__card--warning{border-color:rgba(249,115,22,.22);}
.production-work-sequence__card--warning .production-work-sequence__number{background:rgba(249,115,22,.14);color:var(--warning);}
.production-work-sequence__card--done{border-color:rgba(16,185,129,.22);}
.production-work-sequence__card--done .production-work-sequence__number{background:rgba(16,185,129,.14);color:var(--success);}
.production-detail-main{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(18rem,.95fr);gap:1rem;align-items:start;
}
.production-detail-column{display:flex;flex-direction:column;gap:1rem;}
.production-detail-section{
  padding:1rem;border-radius:1.1rem;border:1px solid var(--border);background:linear-gradient(180deg,var(--surface-0),var(--surface-1));
}
.production-detail-info-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-bottom:.9rem;
}
.production-detail-info-grid p{margin:.2rem 0 0;font-weight:700;}
.production-detail-alert{
  display:flex;gap:.55rem;align-items:flex-start;padding:.75rem .85rem;border-radius:1rem;
  background:var(--surface-1);border:1px solid var(--border);
}
.production-detail-alert p{margin:0;font-size:.8rem;color:var(--text-secondary);line-height:1.4;}
.production-detail-alert--warning{background:rgba(249,115,22,.08);border-color:rgba(249,115,22,.22);}
.production-detail-alert--warning .material-symbols-outlined{color:var(--warning);}
.production-detail-alert--success{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.2);}
.production-detail-alert--success .material-symbols-outlined{color:var(--success);}
.production-detail-operation-list{display:flex;flex-direction:column;gap:.65rem;}
.production-detail-operation-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.85rem;align-items:start;
  padding:.85rem .9rem;border-radius:1rem;border:1px solid var(--border);background:var(--surface-1);
}
.production-detail-operation-title{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;}
.production-detail-operation-row p{margin:.2rem 0 0;font-size:.78rem;color:var(--text-secondary);line-height:1.35;}
.production-detail-operation-meta{color:var(--text-muted)!important;}
.production-detail-operation-actions{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end;}
.production-detail-control-stack{display:flex;flex-direction:column;gap:1rem;}
.production-detail-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;}
.production-detail-side-list{display:flex;flex-direction:column;gap:.6rem;}
.production-detail-side-row{
  padding:.75rem .8rem;border-radius:.95rem;border:1px solid var(--border);background:var(--surface-1);
}
.production-detail-side-row p{margin:.2rem 0 0;font-size:.78rem;color:var(--text-secondary);line-height:1.35;}
.production-detail-side-note{color:var(--text-muted)!important;}
.production-shopfloor-card .flex-between strong,
.production-order-card strong[style*="font-family:var(--font-display)"]{
  letter-spacing:-.01em;
}
.production-planning-summary{
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)) !important;
}
.production-summary-card{
  padding:.95rem 1rem;
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
}
.production-planning-view .data-table td{vertical-align:top;}
.production-planning-view .data-table tbody tr:hover{
  background:rgba(21,99,204,.03);
}

@media (max-width: 980px){
  .production-order-layout{flex-direction:column;}
  .production-order-actions{
    min-width:0;
    padding-left:0;
    padding-top:.9rem;
    border-left:none;
    border-top:1px solid var(--border);
    flex-direction:row !important;
    flex-wrap:wrap;
  }
  .production-overview-columns{grid-template-columns:1fr;}
  .production-control-row{grid-template-columns:1fr 1fr;}
  .production-detail-flow,
  .production-detail-summary,
  .production-detail-main{grid-template-columns:1fr;}
  .production-detail-operation-row{grid-template-columns:1fr;}
}

@media (max-width: 860px){
  .production-hero{padding:1.2rem;}
  .production-hero-title h1{font-size:1.55rem;}
  .production-hero-actions{align-items:stretch;}
  .production-hero-note{width:100%;}
  .production-tabbar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.6rem;}
  .production-control-row{grid-template-columns:1fr;}
  .production-detail-hero{flex-direction:column;}
  .production-detail-info-grid,
  .production-detail-action-grid{grid-template-columns:1fr;}
}

/* ─── Layout ────────────────────────────────────────────── */
#app-topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--topbar-h);
  background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;
  border-bottom:1px solid var(--border);box-shadow:var(--shadow-xs);
  transition:background .25s var(--ease);
}
#app-topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2.5px;
  background:linear-gradient(90deg,var(--brand-blue) 0%,var(--brand-blue-mid) 35%,var(--brand-orange-mid) 70%,var(--brand-orange) 100%);}

#app-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);z-index:90;
  background:var(--sidebar-bg);
  padding-top:calc(var(--topbar-h) + .5rem);
  display:flex;flex-direction:column;gap:.125rem;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  transform:translateX(0);transition:transform .28s var(--ease);
  box-shadow:2px 0 8px rgba(0,0,0,.1);}
#app-sidebar::-webkit-scrollbar{display:none;}

#app-content{
  margin-left:var(--sidebar-w);
  padding:calc(var(--topbar-h) + 1.75rem) 1.75rem 3rem;
  min-height:100dvh;transition:margin-left .28s var(--ease);
}
#app-content>.page-container{max-width:82rem;margin:0 auto;}

#app-bottomnav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:100;
  background:var(--glass-bg);backdrop-filter:blur(20px);
  height:4rem;align-items:center;justify-content:space-around;
  border-top:1px solid var(--border);box-shadow:0 -4px 20px rgba(0,0,0,.06);
}

/* ─── Glassmorphism Card ────────────────────────────────── */
.glass-card{
  background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);border-radius:var(--r-2xl);
  box-shadow:var(--glass-shadow);
}

/* ═════════════════════════════════════════════════════════════
   SIDEBAR — MODERN REDESIGN (v2: clean scroll, solid bg)
   ═════════════════════════════════════════════════════════════ */

/* Override the existing #app-sidebar layout so we own the scroll model.
   The aside itself MUST NOT scroll — only the .sidebar-nav scrolls.
   Brand + search stay pinned at top, footer stays pinned at bottom. */
#app-sidebar.sidebar-modern{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding-top:0;
  width:var(--sidebar-w);             /* lock width; beats all bare #app-sidebar width overrides */
  background:#0c1424;                 /* solid clean dark navy */
  border-right:1px solid rgba(255,255,255,.06);
}
/* (1,1,1) beats stale #app-sidebar::before (1,0,1) — owns the pseudo-element */
#app-sidebar.sidebar-modern::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.025) 0%, transparent 18%);
}
.sidebar-modern > *{position:relative;}  /* sit above the ::before sheen */
/* Push everything down to clear the topbar — done as a spacer, not padding,
   so the inner flex layout still works correctly. */
.sidebar-modern::after{
  content:none;
}

/* ─── Brand block (sits below the topbar, first thing in the flex column) */
.sidebar-modern .sidebar-brand{
  flex-shrink:0;
  margin:calc(var(--topbar-h) + .5rem) .625rem .375rem;   /* clear topbar */
  padding:.6rem .75rem;
  border-radius:.75rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.sidebar-brand-row{display:flex;align-items:center;gap:.625rem;}
.sidebar-brand-logo{
  width:2.4rem;height:2.4rem;border-radius:.55rem;overflow:hidden;flex-shrink:0;
  background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.sidebar-brand-logo img{width:100%;height:100%;object-fit:contain;}
.sidebar-brand-logo.no-logo{background:linear-gradient(135deg, var(--brand-blue), var(--brand-blue-mid));color:#fff;font-weight:800;}
.sidebar-brand-logo.no-logo::after{content:'EF';font-family:var(--font-display);}
.sidebar-brand-text{min-width:0;flex:1;}
.sidebar-brand-text p:first-child{
  font-family:var(--font-display);font-weight:700;font-size:.825rem;
  color:rgba(255,255,255,.94);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.01em;line-height:1.15;
}
.sidebar-brand-text p:last-child{
  font-size:.66rem;color:rgba(255,255,255,.42);
  margin-top:.1rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;
}
.sidebar-collapse-btn{
  width:1.85rem;height:1.85rem;border-radius:.45rem;border:none;background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.5);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s var(--ease);flex-shrink:0;
}
.sidebar-collapse-btn:hover{background:rgba(255,255,255,.12);color:#fff;}
.sidebar-collapse-btn .material-symbols-outlined{font-size:1.05rem;}

/* ─── Search bar ────────────────────────────────────────── */
.sidebar-modern .sidebar-search{
  flex-shrink:0;
  position:relative;margin:.25rem .625rem .5rem;
}
.sidebar-search-icon{
  position:absolute;left:.65rem;top:50%;transform:translateY(-50%);
  color:rgba(255,255,255,.45);font-size:1.05rem;pointer-events:none;
}
.sidebar-search input{
  width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);
  border-radius:.55rem;padding:.5rem 2.4rem .5rem 2.15rem;
  color:rgba(255,255,255,.92);font-size:.78rem;font-family:var(--font-sans, inherit);
  transition:all .15s var(--ease);outline:none;
}
.sidebar-search input::placeholder{color:rgba(255,255,255,.38);}
.sidebar-search input:focus{
  background:rgba(255,255,255,.10);
  border-color:rgba(96,165,250,.45);
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
.sidebar-search-kbd{
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:.65rem;font-weight:700;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);
  padding:.1rem .35rem;border-radius:.25rem;border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}

/* ─── Nav scroll area — THIS is the only scroll container ── */
.sidebar-modern .sidebar-nav{
  flex:1 1 auto;             /* take all remaining vertical space */
  min-height:0;              /* required for flex child to scroll */
  overflow-y:auto;
  overflow-x:hidden;
  padding:.25rem .375rem .75rem;
  display:flex;flex-direction:column;gap:.2rem;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
  -webkit-overflow-scrolling:touch;
}
.sidebar-modern .sidebar-nav::-webkit-scrollbar{width:7px !important;display:block !important;}
.sidebar-modern .sidebar-nav::-webkit-scrollbar-track{background:transparent !important;}
.sidebar-modern .sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14) !important;border-radius:99px !important;}
.sidebar-modern .sidebar-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28) !important;}

/* ─── Dashboard "home" item (always visible at top of nav) ── */
.sidebar-modern .nav-home{
  margin:.1rem .25rem .5rem !important;
  background:linear-gradient(135deg, rgba(0,70,153,.55), rgba(21,99,204,.4));
  border:1px solid rgba(96,165,250,.25);
  font-weight:700 !important;
}
.sidebar-modern .nav-home .material-symbols-outlined{
  background:rgba(255,255,255,.16);color:#fff;
}

/* ─── Collapsible group (button + body) ─────────────────── */
.sidebar-modern .nav-group{
  margin:.05rem .15rem;
  border-radius:.6rem;
  background:transparent;
}
.sidebar-modern .nav-group + .nav-group{margin-top:.15rem;}

.sidebar-modern .nav-group-header{
  width:100%;
  display:flex;align-items:center;gap:.55rem;
  padding:.5rem .6rem;border:none;background:transparent;
  border-radius:.5rem;
  cursor:pointer;user-select:none;
  font-family:var(--font-display);font-size:.68rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.5);
  transition:background .12s ease, color .12s ease;
  text-align:left;
}
.sidebar-modern .nav-group-header:hover{
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.85);
}
.sidebar-modern .nav-group-header[aria-expanded="true"]{
  color:rgba(255,255,255,.92);
}
.sidebar-modern .nav-group-icon{
  font-size:1rem !important;color:rgba(147,197,253,.85);
  width:1.4rem;height:1.4rem;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sidebar-modern .nav-group-label{
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar-modern .nav-group-count{
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);
  font-size:.6rem;font-weight:700;padding:.05rem .4rem;border-radius:99px;
  font-family:var(--font-mono);letter-spacing:0;
}
.sidebar-modern .nav-group-chevron{
  font-size:1rem !important;color:rgba(255,255,255,.45);
  transition:transform .2s ease;flex-shrink:0;
}
.sidebar-modern .nav-group-header[aria-expanded="true"] .nav-group-chevron{
  transform:rotate(180deg);color:rgba(255,255,255,.75);
}
.sidebar-modern .nav-group-header[aria-expanded="false"] + .nav-group-body{
  display:none;
}
/* Glow on collapsed group when it contains the active route */
.sidebar-modern .nav-group[data-has-active="true"] > .nav-group-header[aria-expanded="false"]{
  background:rgba(96,165,250,.10);color:#bfdbfe;
}
.sidebar-modern .nav-group[data-has-active="true"] > .nav-group-header[aria-expanded="false"] .nav-group-icon{
  color:#bfdbfe;
}

.sidebar-modern .nav-group-body{
  padding:.15rem 0 .3rem .35rem;
  display:flex;flex-direction:column;gap:.1rem;
}

/* ─── Nav item (the leaf links) — compact + readable ─────── */
.sidebar-modern .nav-item{
  display:flex;align-items:center;gap:.55rem;
  padding:.4rem .55rem;margin:0;
  border-radius:.45rem;
  font-size:.795rem;font-weight:500;color:rgba(255,255,255,.78);
  cursor:pointer;user-select:none;text-decoration:none;
  transition:background .12s ease, color .12s ease;
  position:relative;line-height:1.2;
  background:transparent;border:none;overflow:visible; /* cancel stale nav-item overrides */
  --nav-icon-color:#93c5fd;
  --nav-icon-bg:rgba(255,255,255,.06);
}
.sidebar-modern .nav-item .material-symbols-outlined{
  width:1.65rem;height:1.65rem;display:inline-flex;align-items:center;justify-content:center;
  border-radius:.4rem;font-size:.95rem;flex-shrink:0;
  color:var(--nav-icon-color);
  background:var(--nav-icon-bg);
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 20;
  transition:background .12s ease, color .12s ease;
}
.sidebar-modern .nav-label{
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.sidebar-modern .nav-item:hover{
  background:rgba(255,255,255,.06);color:#fff;transform:none; /* cancel stale translateX */
}
.sidebar-modern .nav-item:hover .material-symbols-outlined{
  background:rgba(255,255,255,.12);color:#fff;
}

.sidebar-modern .nav-item.active{
  background:linear-gradient(90deg, rgba(0,90,200,.55), rgba(0,70,153,.35));
  color:#fff;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.sidebar-modern .nav-item.active::before{
  content:'';position:absolute;left:-.4rem;top:50%;transform:translateY(-50%);
  width:3px;height:1.2rem;border-radius:0 99px 99px 0;
  background:#60a5fa;
}
.sidebar-modern .nav-item.active .material-symbols-outlined{
  background:rgba(255,255,255,.18);color:#fff;
  font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 20;
}
/* Cancel the stale chevron pseudo-element added by older nav-item rules */
.sidebar-modern .nav-item::after{display:none;content:none;}

/* Filter / role-hide */
.nav-item-hidden{display:none !important;}

.sidebar-empty-msg{
  display:none;text-align:center;padding:1.5rem 1rem;
  color:rgba(255,255,255,.42);font-size:.78rem;font-style:italic;
}
.sidebar-empty-msg.visible{display:block;}

/* ─── Mobile responsive (modern sidebar) ───────────────── */
@media (max-width: 1024px){
  #app-sidebar.sidebar-modern{
    transform:translateX(-100%);
    z-index:200;width:18rem;
    box-shadow:22px 0 52px rgba(0,0,0,.45);
  }
  #app-sidebar.sidebar-modern.open,
  #app-sidebar.sidebar-modern.mobile-open{
    transform:translateX(0);
  }
  .sidebar-modern ~ #app-content{
    margin-left:0;
    padding:calc(var(--topbar-h) + 1rem) 1rem 5.25rem;
  }
  .sidebar-modern ~ #app-bottomnav{display:flex;}
  /* Disable collapse on mobile (it's already drawer-style) */
  .sidebar-collapse-btn{display:none;}
}

/* ─── Per-route icon accents (subtle, by category) ─────── */
.nav-item[data-route="dashboard"]      {--nav-icon-color:#93c5fd;--nav-icon-bg:rgba(96,165,250,.16);}
/* Sales / Customers — sky blue */
.nav-item[data-route="pfi"], .nav-item[data-route="sof"], .nav-item[data-route="customers"],
.nav-item[data-route="crm"], .nav-item[data-route="products"]
                                        {--nav-icon-color:#7dd3fc;--nav-icon-bg:rgba(56,189,248,.14);}
/* Production / QC — orange */
.nav-item[data-route="production"], .nav-item[data-route="qc"], .nav-item[data-route="kanban"],
.nav-item[data-route="bom"], .nav-item[data-route="mrp"], .nav-item[data-route="costing"],
.nav-item[data-route="aps"], .nav-item[data-route="shopfloor"], .nav-item[data-route="qms"],
.nav-item[data-route="fgs"]
                                        {--nav-icon-color:#fdba74;--nav-icon-bg:rgba(249,115,22,.14);}
/* Stock / Logistics — teal */
.nav-item[data-route="stores"], .nav-item[data-route="procurement"],
.nav-item[data-route="warehouse"], .nav-item[data-route="fleet"],
.nav-item[data-route="drn"], .nav-item[data-route="dn"]
                                        {--nav-icon-color:#5eead4;--nav-icon-bg:rgba(20,184,166,.14);}
/* Finance / HR — emerald */
.nav-item[data-route="invoice"], .nav-item[data-route="accounts"], .nav-item[data-route="imprest"],
.nav-item[data-route="vouchers"], .nav-item[data-route="expenses"],
.nav-item[data-route="financial-reports"], .nav-item[data-route="hr"]
                                        {--nav-icon-color:#86efac;--nav-icon-bg:rgba(34,197,94,.14);}
/* Insights — violet */
.nav-item[data-route="bi"], .nav-item[data-route="manufacturing-intelligence"],
.nav-item[data-route="reports"], .nav-item[data-route="advanced-reports"],
.nav-item[data-route="ai"], .nav-item[data-route="workflow-automation"]
                                        {--nav-icon-color:#c4b5fd;--nav-icon-bg:rgba(139,92,246,.14);}
/* System — slate */
.nav-item[data-route="settings"], .nav-item[data-route="users"],
.nav-item[data-route="documents"], .nav-item[data-route="audit-trail"],
.nav-item[data-route="backup-recovery"]
                                        {--nav-icon-color:#cbd5e1;--nav-icon-bg:rgba(148,163,184,.14);}
/* Advanced Tools — amber */
.nav-item[data-route="crm"], .nav-item[data-route="kanban"], .nav-item[data-route="bom"],
.nav-item[data-route="fgs"], .nav-item[data-route="costing"], .nav-item[data-route="mrp"],
.nav-item[data-route="advanced-reports"], .nav-item[data-route="notifications"],
.nav-item[data-route="scheduler"], .nav-item[data-route="comms"],
.nav-item[data-route="master-data"], .nav-item[data-route="document-sequences"],
.nav-item[data-route="bulk-operations"], .nav-item[data-route="portal-users"]
                                        {--nav-icon-color:#fcd34d;--nav-icon-bg:rgba(245,158,11,.14);}

.sidebar-modern .sidebar-footer{
  flex-shrink:0;
  margin-top:0;
  padding:.65rem .75rem .85rem;
  border-top:1px solid rgba(255,255,255,.07);
  border-radius:0; /* cancel stale .sidebar-footer border-radius */
  background:rgba(0,0,0,.18);
}
.nav-badge{
  margin-left:auto;background:var(--brand-orange);color:#fff;font-size:.6rem;font-weight:800;
  min-width:1.25rem;height:1.25rem;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 .3rem;
}

/* ─── Collapsed (icon-only) sidebar ─────────────────────── */
#app-sidebar.sidebar-modern[data-collapsed="true"]{width:4.25rem;}
#app-sidebar.sidebar-modern[data-collapsed="true"] ~ #app-content{margin-left:4.25rem;}
#app-sidebar.sidebar-modern[data-collapsed="true"] .sidebar-brand-text,
#app-sidebar.sidebar-modern[data-collapsed="true"] .sidebar-search,
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-group-label,
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-group-count,
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-group-chevron,
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-label,
#app-sidebar.sidebar-modern[data-collapsed="true"] .sidebar-empty-msg,
#app-sidebar.sidebar-modern[data-collapsed="true"] #sidebar-user-info > div:nth-child(2){display:none;}
#app-sidebar.sidebar-modern[data-collapsed="true"] .sidebar-collapse-btn .material-symbols-outlined{transform:rotate(180deg);}
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-group-header{justify-content:center;padding:.5rem .25rem;}
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-item{justify-content:center;padding:.45rem .25rem;}
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-item.active::before{display:none;}
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-group-body{padding-left:0;}
#app-sidebar.sidebar-modern[data-collapsed="true"] #sidebar-user-info{justify-content:center;}
/* tooltips on hover when collapsed */
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-item{position:relative;}
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-item:hover::after{
  content:attr(data-tooltip);
  position:absolute;left:calc(100% + .65rem);top:50%;transform:translateY(-50%);
  background:#0c1424;color:#fff;
  padding:.35rem .65rem;border-radius:.4rem;
  font-size:.75rem;white-space:nowrap;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 4px 18px rgba(0,0,0,.4);
  z-index:200;pointer-events:none;
}

/* ─── Bottom Nav ────────────────────────────────────────── */
.bottomnav-item{display:flex;flex-direction:column;align-items:center;gap:.125rem;padding:.375rem .75rem;
  border-radius:var(--r-xl);color:var(--text-tertiary);cursor:pointer;text-decoration:none;
  font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;transition:all .15s var(--ease);}
.bottomnav-item.active{color:var(--brand-blue);background:var(--brand-blue-faint);}
.bottomnav-item .material-symbols-outlined{font-size:1.375rem;}

/* ─── Page Header ───────────────────────────────────────── */
.page-header{margin-bottom:2rem;animation:fadeSlideUp .3s var(--ease) both;}
.page-header h1{font-size:1.875rem;font-weight:800;letter-spacing:-.03em;color:var(--text-primary);margin-bottom:.375rem;}
.page-header p{color:var(--text-tertiary);font-size:.9375rem;max-width:44rem;}
.breadcrumb{display:flex;align-items:center;gap:.375rem;font-size:.6875rem;font-weight:700;
  color:var(--brand-blue);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem;}

/* ─── Cards ─────────────────────────────────────────────── */
.card{background:var(--surface-0);border-radius:var(--r-2xl);padding:1.5rem;
  box-shadow:var(--shadow-sm);border:1px solid var(--border);
  transition:all .3s var(--ease);position:relative;overflow:hidden;}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,70,153,.1),transparent);opacity:0;transition:opacity .3s var(--ease);}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:rgba(0,70,153,.15);}
.card:hover::before{opacity:1;}
[data-theme="dark"] .card{border-color:var(--border);}
[data-theme="dark"] .card:hover{border-color:rgba(100,150,255,.2);transform:translateY(-2px);}

/* Premium Glass Card */
.card-glass{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  border-radius:var(--r-2xl);padding:1.5rem;transition:all .3s var(--ease);}
.card-glass:hover{box-shadow:0 12px 48px rgba(15,23,58,.16);transform:translateY(-3px);}

/* Gradient Card */
.card-gradient{position:relative;border:none;padding:1.5rem;border-radius:var(--r-2xl);
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-light));color:#fff;
  box-shadow:0 8px 32px rgba(0,70,153,.25);overflow:hidden;}
.card-gradient::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);animation:gradientPulse 8s ease-in-out infinite;}
@keyframes gradientPulse{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(10px,10px) scale(1.1);}}
.card-gradient h3{color:#fff;margin-bottom:.5rem;}
.card-gradient p{color:rgba(255,255,255,.85);margin-bottom:1rem;}
.card-gradient .btn{background:#fff;color:var(--brand-blue);box-shadow:0 4px 16px rgba(0,0,0,.15);}
.card-gradient .btn:hover{background:rgba(255,255,255,.95);transform:translateY(-1px);}

/* ─── KPI Card ──────────────────────────────────────────── */
.kpi-card{background:var(--surface-0);border-radius:var(--r-2xl);padding:1.375rem 1.5rem;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:all .2s var(--ease);animation:fadeSlideUp .4s var(--ease) both;}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--kpi-bar,linear-gradient(90deg,var(--brand-blue),var(--brand-blue-light)));}
.kpi-card::after{content:'';position:absolute;top:-1.5rem;right:-1.5rem;width:5.5rem;height:5.5rem;
  border-radius:50%;background:var(--kpi-glow,rgba(0,70,153,.06));transition:transform .3s var(--ease);}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.kpi-card:hover::after{transform:scale(1.2);}
.kpi-icon{width:2.75rem;height:2.75rem;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
  background:var(--kpi-icon-bg,var(--brand-blue-faint));}
.kpi-icon .material-symbols-outlined{color:var(--kpi-icon-color,var(--brand-blue));font-size:1.375rem;
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;}
.kpi-value{font-family:var(--font-display);font-size:2rem;font-weight:800;letter-spacing:-.04em;color:var(--text-primary);line-height:1;margin-bottom:.25rem;}
.kpi-label{font-size:.8125rem;color:var(--text-tertiary);font-weight:500;}
.kpi-sub{font-size:.75rem;color:var(--text-muted);margin-top:.75rem;}
.kpi-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.6875rem;font-weight:700;padding:.2rem .5rem;border-radius:var(--r-full);}
.kpi-badge.up{background:var(--success-bg);color:var(--success);}
.kpi-badge.down{background:var(--error-bg);color:var(--error);}
.kpi-badge.flat{background:var(--surface-2);color:var(--text-tertiary);}

/* ─── Buttons ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.625rem 1.25rem;border-radius:var(--r-lg);font-family:var(--font-body);
  font-weight:600;font-size:.875rem;cursor:pointer;border:none;white-space:nowrap;
  user-select:none;text-decoration:none;transition:all .16s var(--ease);position:relative;}
.btn:active{transform:scale(.97);}
.btn .material-symbols-outlined{font-size:1.125rem;}
.btn-primary{background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-mid));color:#fff;
  box-shadow:0 2px 8px rgba(0,70,153,.28),inset 0 1px 0 rgba(255,255,255,.12);}
.btn-primary:hover{box-shadow:var(--shadow-blue);filter:brightness(1.07);}
.btn-secondary{background:var(--brand-blue-faint);color:var(--brand-blue);border:1.5px solid var(--brand-blue-dim);}
.btn-secondary:hover{background:var(--brand-blue-dim);}
.btn-orange{background:linear-gradient(135deg,var(--brand-orange),var(--brand-orange-mid));color:#fff;
  box-shadow:0 2px 8px rgba(224,92,0,.28),inset 0 1px 0 rgba(255,255,255,.12);}
.btn-orange:hover{box-shadow:var(--shadow-orange);filter:brightness(1.07);}
.btn-danger{background:linear-gradient(135deg,var(--error),#dc2626);color:#fff;box-shadow:0 2px 8px rgba(185,28,28,.22);}
.btn-danger:hover{filter:brightness(1.07);}
.btn-success{background:linear-gradient(135deg,var(--success),#16a34a);color:#fff;}
.btn-purple{background:linear-gradient(135deg,var(--purple),#8b5cf6);color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.22);}
.btn-ghost{background:transparent;color:var(--text-tertiary);}
.btn-ghost:hover{background:var(--surface-2);color:var(--text-primary);}
.btn-sm{padding:.4rem .875rem;font-size:.8125rem;}
.btn-sm .material-symbols-outlined{font-size:1rem;}
.btn-lg{padding:.875rem 1.75rem;font-size:1rem;}
.btn-icon{padding:.5rem;border-radius:var(--r-full);}
.btn-icon:hover{background:var(--surface-2);}

/* ─── Forms ─────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:.375rem;}
.form-label{font-family:var(--font-display);font-size:.8125rem;font-weight:600;color:var(--text-secondary);}
.form-label-sm{font-family:var(--font-display);font-size:.6875rem;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.07em;}
.form-input,.form-select{width:100%;background:var(--surface-1);border:1.5px solid var(--border);
  border-radius:var(--r-lg);padding:.65rem .875rem;font-family:var(--font-body);font-size:.9rem;
  color:var(--text-primary);outline:none;transition:all .16s var(--ease);}
.form-input:focus,.form-select:focus{border-color:var(--brand-blue);background:var(--surface-0);box-shadow:var(--shadow-glow);}
.form-input::placeholder{color:var(--text-muted);}
.form-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%239ca3af' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;padding-right:2.25rem;}
textarea.form-input{resize:vertical;min-height:4.5rem;}

/* Form Validation States */
.form-input.valid{border-color:var(--success);background:var(--surface-0);}
.form-input.invalid{border-color:var(--error);background:var(--error-bg);}
.form-input:focus.valid{box-shadow:0 0 0 3px rgba(21,128,61,.1);}
.form-input:focus.invalid{box-shadow:0 0 0 3px rgba(185,28,28,.1);}

/* Validation Message */
.validation-message{font-size:.75rem;margin-top:.25rem;display:flex;align-items:center;gap:.375rem;}
.validation-message.error{color:var(--error);}
.validation-message.success{color:var(--success);}
.validation-message .material-symbols-outlined{font-size:.875rem;}

/* Required Field Indicator */
.form-label.required::after{content:'*';color:var(--error);margin-left:.25rem;font-weight:700;}

/* Form Grid */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.form-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.form-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}

/* Form Actions */
.form-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border);}
.form-actions-left{justify-content:flex-start;}

/* Form Section */
.form-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border);}
.form-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}

/* ─── Tables ────────────────────────────────────────────── */
.data-table{width:100%;text-align:left;border-collapse:collapse;border-spacing:0;}
.data-table thead tr{background:var(--surface-1);}
.data-table th{padding:.75rem 1rem;font-family:var(--font-display);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text-tertiary);white-space:nowrap;border-bottom:1px solid var(--border);cursor:pointer;user-select:none;transition:background .2s var(--ease);position:relative;}
.data-table th:hover{background:var(--surface-2);color:var(--text-primary);}
.data-table th.sortable::after{content:'';margin-left:.375rem;opacity:.3;font-size:.75rem;}
.data-table th.sort-asc::after{content:'';opacity:1;color:var(--brand-blue);}
.data-table th.sort-desc::after{content:'';opacity:1;color:var(--brand-blue);}
.data-table td{padding:.75rem 1rem;font-size:.875rem;border-bottom:1px solid var(--border);vertical-align:middle;}
.data-table tbody tr:last-child td{border-bottom:none;}
.data-table tbody tr{transition:all .12s var(--ease);}
.data-table tbody tr:hover{background:var(--brand-blue-faint);transform:scale(1.002);}

/* Premium Data Table */
.data-table-premium{width:100%;text-align:left;border-collapse:separate;border-spacing:0;}
.data-table-premium thead{background:linear-gradient(180deg,var(--surface-1) 0%,var(--surface-2) 100%);}
.data-table-premium th{padding:1rem 1.25rem;font-family:var(--font-display);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-primary);border-bottom:2px solid var(--border);position:relative;cursor:pointer;user-select:none;transition:all .2s var(--ease);}
.data-table-premium th:first-child{border-top-left-radius:var(--r-xl);border-bottom-left-radius:0;}
.data-table-premium th:last-child{border-top-right-radius:var(--r-xl);border-bottom-right-radius:0;}
.data-table-premium th:hover{background:var(--brand-blue-faint);color:var(--brand-blue);}
.data-table-premium td{padding:1rem 1.25rem;font-size:.875rem;border-bottom:1px solid var(--border);color:var(--text-primary);}
.data-table-premium tbody tr{transition:all .2s var(--ease);background:var(--surface-0);}
.data-table-premium tbody tr:hover{background:var(--brand-blue-faint);box-shadow:0 4px 12px rgba(0,70,153,.08);transform:translateY(-1px);z-index:1;position:relative;}
.data-table-premium tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r-xl);}
.data-table-premium tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r-xl);}

/* Table Filters */
.table-filters{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem;padding:1rem;background:var(--surface-1);border-radius:var(--r-xl);border:1px solid var(--border);}
.table-search{flex:1;min-width:12rem;position:relative;}
.table-search input{width:100%;padding:.5rem .5rem .5rem 2.25rem;border:1.5px solid var(--border);border-radius:var(--r-lg);background:var(--surface-0);font-size:.875rem;transition:all .2s var(--ease);}
.table-search input:focus{border-color:var(--brand-blue);outline:none;box-shadow:var(--shadow-glow);}
.table-search::before{content:'';position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239ca3af'%3E%3Cpath d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' stroke='%239ca3af' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center;background-size:contain;opacity:.5;}
.table-filter-select{padding:.5rem 2rem .5rem .75rem;border:1.5px solid var(--border);border-radius:var(--r-lg);background:var(--surface-0);font-size:.875rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%239ca3af' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;min-width:8rem;}
.table-filter-select:focus{border-color:var(--brand-blue);outline:none;}
.table-actions{display:flex;gap:.5rem;}
.table-btn{padding:.4rem .75rem;font-size:.75rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-0);cursor:pointer;transition:all .2s var(--ease);display:flex;align-items:center;gap:.375rem;}
.table-btn:hover{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);transform:translateY(-1px);}
.table-btn.active{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);}

/* Pagination */
.table-pagination{display:flex;align-items:center;justify-content:space-between;padding:1rem;margin-top:1rem;background:var(--surface-1);border-radius:var(--r-xl);border:1px solid var(--border);}
.pagination-info{font-size:.8125rem;color:var(--text-tertiary);}
.pagination-controls{display:flex;gap:.375rem;align-items:center;}
.pagination-btn{width:2.25rem;height:2.25rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-0);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease);}
.pagination-btn:hover:not(:disabled){background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);transform:translateY(-1px);}
.pagination-btn:disabled{opacity:.4;cursor:not-allowed;}
.pagination-btn.active{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);font-weight:700;}
.pagination-ellipsis{padding:0 .5rem;color:var(--text-muted);font-weight:600;}

/* ─── Badges ────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .625rem;border-radius:var(--r-full);font-family:var(--font-display);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7;flex-shrink:0;}
.badge-success{background:var(--success-bg);color:var(--success);}
.badge-warning{background:var(--warning-bg);color:var(--warning);}
.badge-danger{background:var(--error-bg);color:var(--error);}
.badge-primary{background:var(--brand-blue-faint);color:var(--brand-blue);}
.badge-info{background:var(--info-bg);color:var(--info);}
.badge-secondary{background:var(--brand-orange-faint);color:var(--brand-orange);}
.badge-purple{background:var(--purple-bg);color:var(--purple);}

/* ─── Alerts ────────────────────────────────────────────── */
.alert{padding:.875rem 1.125rem;border-radius:var(--r-lg);display:flex;align-items:flex-start;gap:.75rem;font-size:.875rem;}
.alert-warning{background:var(--warning-bg);color:var(--warning);border-left:3px solid var(--warning);}
.alert-success{background:var(--success-bg);color:var(--success);border-left:3px solid var(--success);}
.alert-danger{background:var(--error-bg);color:var(--error);border-left:3px solid var(--error);}
.alert-info{background:var(--info-bg);color:var(--info);border-left:3px solid var(--info);}

/* ─── Progress ──────────────────────────────────────────── */
.progress-bar{height:6px;background:var(--surface-3);border-radius:999px;overflow:hidden;}
.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-blue-light));transition:width .6s var(--ease);}
.progress-fill.orange{background:linear-gradient(90deg,var(--brand-orange),var(--brand-orange-mid));}
.progress-fill.success{background:var(--success);}
.progress-fill.purple{background:linear-gradient(90deg,var(--purple),#8b5cf6);}
.progress-fill.warning{background:var(--warning);}

/* ─── Section Header ────────────────────────────────────── */
.section-header{display:flex;align-items:center;gap:.625rem;padding-bottom:.875rem;border-bottom:1px solid var(--border);margin-bottom:1.25rem;}
.section-header h2{font-size:1rem;font-weight:700;}
.section-header .material-symbols-outlined{color:var(--brand-blue);font-size:1.25rem;}

/* ─── Toast ─────────────────────────────────────────────── */
.toast-container{position:fixed;top:calc(var(--topbar-h) + .875rem);right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;pointer-events:none;}
.toast{background:var(--sidebar-bg);color:#fff;padding:.875rem 1.25rem;border-radius:var(--r-xl);font-size:.875rem;font-weight:500;
  display:flex;align-items:center;gap:.75rem;box-shadow:var(--shadow-xl);
  animation:toastIn .32s var(--ease-spring) both;min-width:18rem;max-width:26rem;pointer-events:all;border-left:3px solid transparent;}
.toast-success{border-left-color:var(--success);}
.toast-error{border-left-color:var(--error);}
.toast-warning{border-left-color:var(--warning);}
.toast-info{border-left-color:#60a5fa;}

/* ─── Modal ─────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(10,16,32,.7);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;padding:1.25rem;animation:fadeIn .18s var(--ease);}
.modal-content{background:var(--surface-0);border-radius:var(--r-3xl);padding:2rem;max-width:48rem;width:100%;
  max-height:90vh;overflow-y:auto;box-shadow:0 32px 64px rgba(12,22,41,.3),0 0 0 1px rgba(255,255,255,.1) inset;
  border:1px solid var(--border);animation:scaleIn .25s var(--ease-spring) both;scrollbar-width:thin;scrollbar-color:var(--border) transparent;position:relative;}
.modal-content::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-blue-light));border-radius:var(--r-3xl) var(--r-3xl) 0 0;}

/* Premium Modal Variants */
.modal-lg{max-width:64rem;}
.modal-xl{max-width:80rem;}
.modal-sm{max-width:32rem;}

/* Modal Header */
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border);}
.modal-title{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--text-primary);letter-spacing:-.03em;}
.modal-close{width:2.25rem;height:2.25rem;border-radius:var(--r-full);border:1.5px solid var(--border);background:var(--surface-1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease);color:var(--text-tertiary);}
.modal-close:hover{background:var(--error);border-color:var(--error);color:#fff;transform:rotate(90deg);}

/* Modal Body */
.modal-body{margin-bottom:1.5rem;}

/* Modal Footer */
.modal-footer{display:flex;gap:.75rem;justify-content:flex-end;padding-top:1.25rem;border-top:1px solid var(--border);}

/* ─── Kanban Board ──────────────────────────────────────── */
.kanban-board{display:grid;grid-auto-columns:minmax(16rem,1fr);grid-auto-flow:column;gap:1rem;overflow-x:auto;padding-bottom:1rem;}
.kanban-col{background:var(--surface-1);border-radius:var(--r-2xl);padding:1rem;min-height:24rem;border:1px solid var(--border);}
.kanban-col-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.875rem;}
.kanban-col-title{font-family:var(--font-display);font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;}
.kanban-count{font-size:.6875rem;font-weight:800;padding:.2rem .5rem;border-radius:var(--r-full);background:var(--surface-3);color:var(--text-tertiary);}
.kanban-card{background:var(--surface-0);border-radius:var(--r-xl);padding:.875rem;margin-bottom:.625rem;
  border:1px solid var(--border);cursor:grab;transition:all .2s var(--ease);box-shadow:var(--shadow-xs);}
.kanban-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand-blue);}
.kanban-card:active{cursor:grabbing;}
.kanban-card.dragging{opacity:.5;transform:rotate(2deg);}
.kanban-drop-zone{min-height:3rem;border:2px dashed var(--border);border-radius:var(--r-xl);
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.75rem;}
.kanban-drop-zone.drag-over{border-color:var(--brand-blue);background:var(--brand-blue-faint);}

/* ─── Search Overlay ────────────────────────────────────── */
#global-search-overlay{position:fixed;inset:0;z-index:2000;background:rgba(10,16,32,.7);backdrop-filter:blur(10px);
  display:none;align-items:flex-start;justify-content:center;padding-top:5.5rem;}
#global-search-overlay.open{display:flex;animation:fadeIn .15s var(--ease);}
.search-box{background:var(--surface-0);border-radius:var(--r-2xl);box-shadow:var(--shadow-xl);width:100%;max-width:38rem;border:1px solid var(--border);overflow:hidden;}
.search-input-wrap{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border);}
.search-input-wrap input{flex:1;border:none;outline:none;background:transparent;font-size:1.125rem;color:var(--text-primary);}
.search-results{max-height:24rem;overflow-y:auto;}
.search-result-item{display:flex;align-items:center;gap:.875rem;padding:.875rem 1.25rem;cursor:pointer;transition:background .12s;}
.search-result-item:hover{background:var(--surface-1);}

/* ─── Icon Button ───────────────────────────────────────── */
.icon-btn{width:2.25rem;height:2.25rem;border-radius:var(--r-full);border:none;background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);
  transition:all .15s var(--ease);position:relative;}
.icon-btn:hover{background:var(--surface-2);color:var(--text-primary);}

/* ─── Company Pill ──────────────────────────────────────── */
.company-pill{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border-radius:var(--r-full);
  background:var(--surface-1);border:1.5px solid var(--border);cursor:pointer;font-size:.8125rem;
  font-weight:600;color:var(--text-secondary);transition:all .15s var(--ease);}
.company-pill:hover{border-color:var(--brand-blue);color:var(--brand-blue);background:var(--brand-blue-faint);}

/* ─── Dark Mode Toggle ──────────────────────────────────── */
.theme-toggle{width:2.75rem;height:1.5rem;background:var(--surface-3);border-radius:var(--r-full);
  position:relative;cursor:pointer;border:none;transition:background .2s var(--ease);flex-shrink:0;}
.theme-toggle::after{content:'';position:absolute;top:.2rem;left:.2rem;width:1.1rem;height:1.1rem;
  border-radius:50%;background:var(--text-muted);transition:all .25s var(--ease-spring);}
[data-theme="dark"] .theme-toggle{background:var(--brand-blue);}
[data-theme="dark"] .theme-toggle::after{left:calc(100% - 1.3rem);background:#fff;}

/* ─── Signature Pad ─────────────────────────────────────── */
.signature-pad{background:var(--surface-0);border:1.5px dashed var(--border);border-radius:var(--r-xl);
  min-height:9rem;position:relative;cursor:crosshair;overflow:hidden;
  background-image:radial-gradient(var(--border) .5px,transparent .5px);background-size:24px 24px;}
.signature-pad canvas{width:100%;height:100%;position:absolute;inset:0;}

/* ─── Empty State ───────────────────────────────────────── */
.empty-state{text-align:center;padding:4.5rem 2rem;color:var(--text-muted);}
.empty-state .material-symbols-outlined{font-size:3.5rem;color:var(--surface-3);display:block;margin-bottom:1rem;}
.empty-state h3{font-size:1.125rem;color:var(--text-secondary);margin-bottom:.5rem;}

/* ─── Fleet Map ─────────────────────────────────────────── */
.map-container{background:var(--surface-1);border-radius:var(--r-2xl);overflow:hidden;position:relative;}
.map-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,70,153,.03),rgba(224,92,0,.03));}
.fleet-pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;}
.fleet-pin-dot{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.25);animation:fleetPulse 2s ease infinite;}
@keyframes fleetPulse{0%,100%{box-shadow:0 4px 12px rgba(0,0,0,.25),0 0 0 0 rgba(0,70,153,0);}50%{box-shadow:0 4px 12px rgba(0,0,0,.25),0 0 0 8px rgba(0,70,153,.15);}}

/* ─── HR Timeline ───────────────────────────────────────── */
.timeline-dot{width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.timeline-line{width:2px;background:var(--border);flex:1;min-height:2rem;margin-left:1.25rem;}

/* ─── AI Forecast Chart ─────────────────────────────────── */
.forecast-bar{transition:height .7s var(--ease);border-radius:4px 4px 0 0;position:relative;cursor:pointer;}
.forecast-bar:hover::after{content:attr(data-val);position:absolute;top:-.5rem;left:50%;transform:translate(-50%,-100%);
  background:var(--sidebar-bg);color:white;padding:.25rem .5rem;border-radius:var(--r-sm);font-size:.625rem;font-weight:700;white-space:nowrap;}
.forecast-label{font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-top:.375rem;text-align:center;}

/* ─── CRM Pipeline ──────────────────────────────────────── */
.pipeline-stage{flex:1;background:var(--surface-1);border-radius:var(--r-xl);padding:.875rem;border:1px solid var(--border);min-width:11rem;}
.pipeline-card{background:var(--surface-0);border-radius:var(--r-lg);padding:.75rem;margin-top:.5rem;border:1px solid var(--border);cursor:pointer;transition:all .15s var(--ease);}
.pipeline-card:hover{border-color:var(--brand-blue);transform:translateX(2px);}
.pipeline-value{font-family:var(--font-display);font-size:.875rem;font-weight:800;color:var(--brand-blue);}

/* ─── Animations ────────────────────────────────────────── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
@keyframes shimmer{from{background-position:-400px 0}to{background-position:400px 0}}
@keyframes bounceIn{0%{opacity:0;transform:scale(0.3);}50%{opacity:1;transform:scale(1.05);}70%{transform:scale(0.9);}100%{transform:scale(1);}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes glow{0%,100%{box-shadow:0 0 5px rgba(0,70,153,.3);}50%{box-shadow:0 0 20px rgba(0,70,153,.6),0 0 30px rgba(0,70,153,.4);}}

.animate-in{animation:fadeSlideUp .35s var(--ease) both;}
.d1{animation-delay:.04s} .d2{animation-delay:.08s} .d3{animation-delay:.12s}
.d4{animation-delay:.16s} .d5{animation-delay:.2s}  .d6{animation-delay:.24s}

/* Premium Animation Classes */
.animate-bounce{animation:bounceIn 0.6s var(--ease-spring) both;}
.animate-slide-down{animation:slideDown 0.4s var(--ease) both;}
.animate-float{animation:float 3s ease-in-out infinite;}
.animate-glow{animation:glow 2s ease-in-out infinite;}

/* ─── Utilities ─────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.flex-center{display:flex;align-items:center;}
.gap-1{gap:.25rem} .gap-2{gap:.5rem} .gap-3{gap:.75rem} .gap-4{gap:1rem} .gap-6{gap:1.5rem}
.mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem} .mt-8{margin-top:2rem}
.mb-2{margin-bottom:.5rem} .mb-4{margin-bottom:1rem} .mb-6{margin-bottom:1.5rem}
.text-primary{color:var(--brand-blue)!important}
.text-orange{color:var(--brand-orange)!important}
.text-success{color:var(--success)!important}
.text-muted{color:var(--text-muted)!important}
.font-display{font-family:var(--font-display)}
.font-mono{font-family:var(--font-mono)}
.fw-800{font-weight:800}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

/* ─── Responsive ────────────────────────────────────────── */
@media(max-width:1024px){
  #app-sidebar{transform:translateX(-100%);}
  #app-sidebar.open{transform:translateX(0);box-shadow:8px 0 40px rgba(0,0,0,.3);}
  #app-content{margin-left:0;}
  #app-bottomnav{display:flex;}
  #app-content{padding-bottom:5.5rem;}
}
@media(max-width:768px){
  .page-header h1{font-size:1.5rem;}
  .page-header p{font-size:.875rem;}
  #app-content{padding:calc(var(--topbar-h) + .75rem) .75rem 5rem;}
  .card{padding:1rem;border-radius:var(--r-xl);}
  .modal-content{padding:1.25rem;border-radius:var(--r-xl);max-width:100%;margin:.5rem;}
  .modal-lg,.modal-xl{max-width:100%;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;gap:1rem;}
  .kanban-board{grid-auto-columns:minmax(16rem,1fr);padding-bottom:.5rem;}

  /* Mobile Tables - Card View */
  .data-table{display:block;}
  .data-table thead{display:none;}
  .data-table tbody,.data-table tr{display:block;}
  .data-table tr{margin-bottom:.75rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-0);padding:.75rem;}
  .data-table td{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border-weak);font-size:.875rem;}
  .data-table td:last-child{border-bottom:none;}
  .data-table td::before{content:attr(data-label);font-weight:600;color:var(--text-secondary);font-size:.75rem;}

  /* Mobile Forms */
  .form-group{margin-bottom:1rem;}
  .form-label{font-size:.8125rem;}
  .form-input,.form-select{font-size:16px;padding:.625rem .75rem;}
  .form-row{flex-direction:column;gap:0;}
  .form-row .form-group{width:100%;}

  /* Touch Friendly */
  .nav-item,.bottomnav-item,.btn,.table-btn,.page-btn{min-height:44px;min-width:44px;}
  .btn{padding:.625rem 1rem;font-size:.875rem;}
  .icon-btn{width:44px;height:44px;}

  /* Mobile Sidebar Overlay */
  #app-sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;z-index:200;transform:translateX(-100%);transition:transform .3s var(--ease);}
  #app-sidebar.open{transform:translateX(0);}
  .sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;opacity:0;visibility:hidden;transition:all .3s;}
  .sidebar-overlay.open{opacity:1;visibility:visible;}

  /* Mobile Cards */
  .stat-card{padding:1rem;}
  .stat-value{font-size:1.5rem;}
  .pipeline-stage{min-width:14rem;}

  /* Mobile Search */
  .table-filters{flex-direction:column;align-items:stretch;gap:.625rem;padding:.875rem;}
  .table-search{min-width:100%;}
  .table-search input{width:100%;}
  .table-filter-select{width:100%;}
  .table-actions{flex-wrap:wrap;justify-content:flex-end;}

  /* Mobile Tabs */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .tab{white-space:nowrap;padding:.625rem 1rem;font-size:.875rem;}

  /* Mobile Toast */
  .toast-container{top:auto;bottom:5.5rem;left:.75rem;right:.75rem;}
  .toast{max-width:100%;min-width:auto;}
}

@media(max-width:480px){
  #app-topbar{padding:0 .5rem;}
  #company-name{display:none;}
  .page-header h1{font-size:1.25rem;}
  .bottomnav-item span{font-size:.625rem;}
  .card{padding:.875rem;}
  .data-table tr{padding:.625rem;}
  .modal-content{padding:1rem;}
  .btn{width:100%;justify-content:center;}
  .btn-group{flex-direction:column;width:100%;}
  .btn-group .btn{width:100%;}
}
@media print{#app-topbar,#app-sidebar,#app-bottomnav,.toast-container{display:none!important}#app-content{margin:0!important;padding:0!important}}

/* ─── Extended palette ──────────────────────────────────── */
:root {
  --purple:    #7c3aed;  --purple-bg: #ede9fe;
  --teal:      #0d7377;  --teal-bg:   #e6f7f6;
  --success-border: #86efac;
  --warning-border: #fcd34d;
  --error-border:   #fca5a5;
}
.badge-purple { background: var(--purple-bg); color: var(--purple); }

/* ─── Glassmorphism Panel ───────────────────────────────── */
.glass-panel {
  background: var(--glass-bg, rgba(255,255,255,0.8));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.5));
  box-shadow: var(--glass-shadow, 0 8px 32px rgba(0,0,0,0.1));
}

/* Rehoboth theme overrides */
[data-company="rehoboth"] #app-topbar::after {
  background: linear-gradient(90deg, #0d7377 0%, #14a085 50%, #1ec8a8 100%);
}
[data-company="rehoboth"] .sidebar-brand,
[data-company="rehoboth"] #app-sidebar {
  background-image: radial-gradient(circle at 80% 10%, rgba(14,180,166,0.15) 0%, transparent 60%);
}

/* Kanban drag */
.kanban-card.dragging { opacity: 0.4; transform: rotate(2deg); }
.kanban-drop-zone.drag-over { background: var(--brand-blue-faint) !important; outline: 2px dashed var(--brand-blue); outline-offset: -2px; }

/* Theme toggle in sidebar footer */
.theme-toggle {
  width: 2.75rem; height: 1.5rem;
  background: var(--surface-3); border-radius: var(--r-full);
  position: relative; cursor: pointer;
  border: none; transition: background 0.3s var(--ease); flex-shrink: 0;
}
.theme-toggle::after {
  content: ''; position: absolute; top: 0.2rem; left: 0.2rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--text-muted); transition: all 0.3s var(--ease);
}
[data-theme="dark"] .theme-toggle { background: var(--brand-blue); }
[data-theme="dark"] .theme-toggle::after { left: calc(100% - 1.3rem); background: #fff; }

/* ─── PFI & Payment UI Polish ───────────────────────────── */
.btn-orange {
  background: linear-gradient(135deg, var(--brand-orange), #f07020);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(224,92,0,.25);
}
.btn-orange:hover  { opacity: .92; box-shadow: 0 6px 20px rgba(224,92,0,.3); }
.btn-success { background: var(--success); color: #fff; box-shadow: 0 4px 14px rgba(21,128,61,.2); }
.btn-success:hover { opacity: .92; }
.btn-danger  { background: var(--error);   color: #fff; box-shadow: 0 4px 14px rgba(185,28,28,.2); }
.btn-danger:hover  { opacity: .92; }

/* KPI card sub-text */
.kpi-sub { font-size:.6875rem; color:var(--text-muted); margin-top:.25rem; font-weight:500; }

/* Alert component */
.alert { display:flex; align-items:flex-start; gap:.625rem; padding:.875rem 1rem; border-radius:var(--r-xl); border:1px solid; }

/* ─── Premium Progress Bar ─────────────────────────────────── */
.progress-bar{width:100%;height:.5rem;background:var(--surface-2);border-radius:var(--r-full);overflow:hidden;position:relative;}
.progress-bar::after{content:'';position:absolute;top:0;left:0;height:100%;width:var(--progress,0%);
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-blue-light));border-radius:var(--r-full);
  transition:width .6s var(--ease-spring);animation:progressShine 2s ease-in-out infinite;}
@keyframes progressShine{0%{background-position:-100% 0;}100%{background-position:200% 0;}}
.progress-bar.success::after{background:linear-gradient(90deg,var(--success),#22c55e);}
.progress-bar.warning::after{background:linear-gradient(90deg,var(--warning),#fbbf24);}
.progress-bar.danger::after{background:linear-gradient(90deg,var(--error),#f87171);}

/* ─── Premium Stats Card ──────────────────────────────────── */
.stats-card{background:var(--surface-0);border-radius:var(--r-2xl);padding:1.25rem;position:relative;overflow:hidden;
  border:1px solid var(--border);transition:all .3s var(--ease);}
.stats-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--stat-color,var(--brand-blue)),var(--brand-blue-light));}
.stats-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.stats-value{font-family:var(--font-display);font-size:2.25rem;font-weight:800;letter-spacing:-.04em;color:var(--text-primary);line-height:1;}
.stats-label{font-size:.8125rem;color:var(--text-tertiary);font-weight:500;margin-bottom:.5rem;}
.stats-change{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:600;padding:.25rem .5rem;border-radius:var(--r-md);}
.stats-change.positive{background:var(--success-bg);color:var(--success);}
.stats-change.negative{background:var(--error-bg);color:var(--error);}
.stats-change.neutral{background:var(--surface-2);color:var(--text-tertiary);}

/* ─── Premium Chart Placeholder ─────────────────────────────── */
.chart-container{background:var(--surface-0);border-radius:var(--r-2xl);padding:1.5rem;border:1px solid var(--border);
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.chart-container::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,70,153,.1),transparent);}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;}
.chart-title{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text-primary);}
.chart-legend{display:flex;gap:1rem;font-size:.75rem;}
.chart-legend-item{display:flex;align-items:center;gap:.375rem;}
.chart-legend-dot{width:8px;height:8px;border-radius:50%;background:var(--legend-color,var(--brand-blue));}
.chart-placeholder{height:200px;background:linear-gradient(180deg,var(--surface-1) 0%,var(--surface-2) 100%);
  border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.875rem;}

/* ─── Premium Activity Feed ───────────────────────────────── */
.activity-feed{display:flex;flex-direction:column;gap:1rem;}
.activity-item{display:flex;gap:.875rem;position:relative;}
.activity-item::before{content:'';position:absolute;left:.9375rem;top:2rem;bottom:-1rem;width:1px;background:var(--border);}
.activity-item:last-child::before{display:none;}
.activity-icon{width:1.875rem;height:1.875rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--activity-bg,var(--brand-blue-faint));flex-shrink:0;z-index:1;}
.activity-icon .material-symbols-outlined{font-size:1rem;color:var(--activity-color,var(--brand-blue));}
.activity-content{flex:1;padding-top:.125rem;}
.activity-title{font-size:.875rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem;}
.activity-meta{font-size:.75rem;color:var(--text-muted);}
.activity-time{font-size:.6875rem;color:var(--text-tertiary);font-weight:500;}

/* ─── Premium Quick Action Buttons ─────────────────────────── */
.quick-action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:1rem;}
.quick-action-btn{display:flex;flex-direction:column;align-items:center;gap:.625rem;padding:1.25rem;
  background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-xl);cursor:pointer;
  transition:all .3s var(--ease);text-decoration:none;}
.quick-action-btn:hover{background:var(--brand-blue-faint);border-color:var(--brand-blue);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.quick-action-icon{width:3rem;height:3rem;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;
  background:var(--action-bg,var(--brand-blue-faint));color:var(--action-color,var(--brand-blue));}
.quick-action-icon .material-symbols-outlined{font-size:1.5rem;}
.quick-action-label{font-family:var(--font-display);font-size:.8125rem;font-weight:600;color:var(--text-primary);text-align:center;}

/* ─── Premium Notification Badge Pulse ─────────────────────── */
@keyframes badgePulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(224,92,0,.4);}50%{transform:scale(1.1);box-shadow:0 0 0 8px rgba(224,92,0,0);}}
.notification-pulse{animation:badgePulse 2s infinite;}

/* ─── Premium Skeleton Loading ─────────────────────────────── */
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:200% 100%;animation:skeletonShimmer 1.5s infinite;border-radius:var(--r-md);}
@keyframes skeletonShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.skeleton-text{height:.875rem;width:100%;border-radius:var(--r-sm);}
.skeleton-title{height:1.5rem;width:60%;margin-bottom:.75rem;}
.skeleton-avatar{width:2.5rem;height:2.5rem;border-radius:50%;}

/* ─── Premium Empty State ──────────────────────────────────── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;}
.empty-state .material-symbols-outlined{font-size:4rem;color:var(--text-muted);margin-bottom:1.5rem;opacity:.5;}
.empty-state h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem;}
.empty-state p{font-size:.875rem;color:var(--text-tertiary);max-width:28rem;margin-bottom:1.5rem;}

/* ─── Premium Tooltip ─────────────────────────────────────── */
[data-tooltip]{position:relative;}
[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + .5rem);left:50%;transform:translateX(-50%);
  background:var(--text-primary);color:var(--surface-0);padding:.375rem .75rem;border-radius:var(--r-md);
  font-size:.75rem;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s var(--ease);
  z-index:1000;}
[data-tooltip]:hover::after{opacity:1;}

/* ─── Premium Floating Action Button ───────────────────────── */
.fab{position:fixed;bottom:2rem;right:2rem;width:3.75rem;height:3.75rem;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-light));color:#fff;
  box-shadow:0 8px 32px rgba(0,70,153,.3);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .3s var(--ease);z-index:100;}
.fab:hover{transform:scale(1.1) rotate(90deg);box-shadow:0 12px 48px rgba(0,70,153,.4);}
.fab .material-symbols-outlined{font-size:1.5rem;}
.alert-info { background:rgba(14,130,223,.06); border-color:rgba(14,130,223,.2); color:var(--brand-blue); }
.alert-warning { background:var(--warning-bg); border-color:var(--warning-border); color:var(--warning); }
.alert-success { background:var(--success-bg); border-color:var(--success-border); color:var(--success); }

/* Shadow blue variant for payment type buttons */
:root { --shadow-blue: 0 2px 10px rgba(0,70,153,.3); }

/* Form label small */
.form-label-sm {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* Success/warning border variables */
:root {
  --success-border: rgba(21,128,61,.3);
  --warning-border: rgba(180,83,9,.3);
  --error-border:   rgba(185,28,28,.3);
  --brand-orange-dim: rgba(224,92,0,.2);
  --brand-blue-dim: rgba(0,70,153,.15);
}

/* ─── Scheduler / Calendar ──────────────────────────────── */
.cal-cell-hover:hover { background: var(--surface-1) !important; }

/* ─── Expenses purple badge ─────────────────────────────── */
.badge-purple { background: #ede9fe; color: #7c3aed; }

/* ─── Alert variants ────────────────────────────────────── */
.alert-error   { background:var(--error-bg);   border-color:var(--error-border);   color:var(--error); }
.alert-success { background:var(--success-bg);  border-color:var(--success-border); color:var(--success); }
:root {
  --error-bg: #fef2f2;
  --error-border: rgba(185,28,28,.25);
}

/* ─── Sidebar scroll fix ────────────────────────────────── */
#app-sidebar {
  overflow-y: auto;
  overflow-x: hidden;
}
#app-sidebar::-webkit-scrollbar { width: 3px; }
#app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 999px; }

/* ─── Search result item ────────────────────────────────── */
.search-result-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.25rem;
  cursor: pointer;
  transition: background .15s;
  border-radius: var(--r-lg);
  margin: .125rem .5rem;
}
/* ─── Search result item ────────────────────────────────── */
.search-result-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.25rem;
  cursor: pointer;
  transition: background .15s;
  border-radius: var(--r-lg);
  margin: .125rem .5rem;
}
.search-result-item:hover { background: var(--surface-2); }

/* ─── KPI Trend Arrows ──────────────────────────────────── */
.kpi-trend {
  font-size: .75rem;
  font-weight: 800;
  padding: .125rem .4rem;
  border-radius: .375rem;
  line-height: 1;
}
.kpi-trend.up   { background: var(--success-bg); color: var(--success); }
.kpi-trend.down { background: var(--error-bg); color: var(--error); }
.kpi-trend.flat { background: var(--surface-2); color: var(--text-muted); }

.kpi-sub {
  font-size: .6875rem;
  color: var(--text-muted);
  margin-top: .1875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* KPI card CSS variable support */
.kpi-card {
  --kpi-color: var(--brand-blue);
  --kpi-bg: var(--brand-blue-faint);
}
.kpi-card .kpi-icon {
  background: var(--kpi-bg, var(--brand-blue-faint));
  color: var(--kpi-color, var(--brand-blue));
}
[style*="--kpi-bar"] .kpi-icon {
  background: var(--kpi-icon-bg, rgba(0,70,153,.1));
  color: var(--kpi-icon-color, var(--brand-blue));
}

/* ─── Sticky Table Headers ──────────────────────────────────── */
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-1);
}

/* ─── Tag / Chip Component ──────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1875rem .625rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: default;
  white-space: nowrap;
}
.tag-blue   { background: var(--brand-blue-faint); color: var(--brand-blue); border-color: var(--brand-blue-dim); }
.tag-green  { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.tag-orange { background: var(--brand-orange-faint); color: var(--brand-orange); border-color: var(--brand-orange-dim); }
.tag-red    { background: var(--error-bg); color: var(--error); border-color: var(--error-border); }
.tag-purple { background: var(--purple-bg); color: var(--purple); border-color: rgba(124,58,237,.2); }

/* ─── No-scrollbar utility ──────────────────────────────────── */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ─── btn-danger ────────────────────────────────────────────── */
.btn-danger {
  background: var(--error);
  color: white;
  border: none;
}
.btn-danger:hover { filter: brightness(1.1); }

/* ─── Split Card ────────────────────────────────────────────── */
.split-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* ─── Dashboard animate-in delays ──────────────────────────── */
.animate-in { animation: fadeSlideIn .35s cubic-bezier(0.22,0.61,0.36,1) both; }
.anim-d1 { animation-delay: .04s; }
.anim-d2 { animation-delay: .08s; }
.anim-d3 { animation-delay: .12s; }
.anim-d4 { animation-delay: .18s; }
.anim-d5 { animation-delay: .24s; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Print Styles ──────────────────────────────────────────── */
@media print {
  #app-topbar, #app-sidebar, #app-bottomnav, #login-screen,
  .btn, .page-header .btn, .section-header .btn { display: none !important; }
  #app-content { margin: 0 !important; padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  .data-table { font-size: 10pt; }
  h1 { font-size: 16pt; }
}

/* ─── Payslip specific ──────────────────────────────────────── */
.payslip-section { break-inside: avoid; }

/* ─── Scrollbar Theming ─────────────────────────────────────── */
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Button success variant ────────────────────────────────── */
.btn-success {
  background: var(--success);
  color: white;
  border: none;
}
.btn-success:hover { filter: brightness(1.08); }

/* ─── Dark mode additions ───────────────────────────────────── */
[data-theme="dark"] {
  --brand-blue-faint: rgba(0,70,153,.2);
  --brand-orange-faint: rgba(224,92,0,.15);
  --success-bg: rgba(21,128,61,.15);
  --error-bg: rgba(185,28,28,.15);
  --warning-bg: rgba(180,83,9,.15);
}

/* ─── Empty state ───────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.empty-state .material-symbols-outlined {
  font-size: 3rem;
  display: block;
  margin-bottom: .75rem;
  opacity: .2;
}
.empty-state h3 { font-size: 1rem; color: var(--text-secondary); margin-bottom: .375rem; }
.empty-state p  { font-size: .875rem; }

/* ─── Data Table Enhancements ───────────────────────────── */
.data-table-wrap { overflow-x: auto; border-radius: var(--r-2xl); border: 1px solid var(--border); }
.data-table thead { position: sticky; top: 0; z-index: 2; }
.data-table thead tr { background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-mid)) !important; }
.data-table th { color: rgba(255,255,255,.9) !important; border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: var(--surface-1); }

/* ─── Status Stamp Overlay ─────────────────────────────────── */
.status-stamp {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .875rem; border-radius: var(--r-full);
  font-family: var(--font-display); font-size: .65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; border: 2px solid currentColor;
}
.status-stamp.paid   { color: var(--success); background: var(--success-bg); }
.status-stamp.pending{ color: var(--warning); background: var(--warning-bg); }
.status-stamp.overdue{ color: var(--error);   background: var(--error-bg); }
.status-stamp.draft  { color: var(--text-muted); background: var(--surface-2); }

/* ─── Timeline ──────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: .625rem; position: relative; }
.timeline::before { content: ''; position: absolute; left: 1.125rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--border); z-index: 0; }
.timeline-item { display: flex; gap: .75rem; align-items: flex-start; position: relative; z-index: 1; }
.timeline-dot { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--surface-0); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.timeline-dot.success { border-color: var(--success); background: var(--success-bg); }
.timeline-dot.warning { border-color: var(--warning); background: var(--warning-bg); }
.timeline-body { flex: 1; background: var(--surface-1); border-radius: var(--r-xl); padding: .75rem; border: 1px solid var(--border); }

/* ─── Tab Navigation ───────────────────────────────────────── */
.tab-nav { display: flex; gap: .25rem; background: var(--surface-1); border-radius: var(--r-xl); padding: .25rem; border: 1px solid var(--border); flex-wrap: wrap; }
.tab-btn { flex: 1; min-width: fit-content; padding: .5rem 1rem; border-radius: var(--r-lg); font-family: var(--font-display); font-size: .8125rem; font-weight: 600; cursor: pointer; border: none; background: transparent; color: var(--text-tertiary); display: flex; align-items: center; gap: .375rem; justify-content: center; transition: all .16s var(--ease); white-space: nowrap; }
.tab-btn.active { background: var(--surface-0); color: var(--brand-blue); box-shadow: var(--shadow-xs); border: 1px solid var(--border); }
.tab-btn:hover:not(.active) { background: var(--surface-2); color: var(--text-secondary); }

/* ─── Section Header ───────────────────────────────────────── */
.section-header { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); margin: -1.5rem -1.5rem 1.25rem; }
.section-header h2 { font-size: 1rem; font-weight: 700; }
.section-header .material-symbols-outlined { color: var(--brand-blue); font-size: 1.25rem; }

/* ─── Document Action Buttons ─────────────────────────────── */
.doc-action-btn { width: 2rem; height: 2rem; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--border); background: var(--surface-0); cursor: pointer; transition: all .15s var(--ease); color: var(--text-tertiary); }
.doc-action-btn:hover { background: var(--brand-blue-faint); border-color: var(--brand-blue-dim); color: var(--brand-blue); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ─── Tooltip ──────────────────────────────────────────────── */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--text-primary); color: var(--text-invert); font-size: .6875rem; white-space: nowrap; padding: .25rem .625rem; border-radius: var(--r-md); opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; }
[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── Mobile Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  #app-sidebar { transform: translateX(-100%); z-index: 200; width: 16rem; }
  #app-sidebar.mobile-open { transform: translateX(0); box-shadow: var(--shadow-xl); }
  #app-content { margin-left: 0 !important; padding: calc(var(--topbar-h) + 1rem) 1rem 5rem; }
  #app-bottomnav { display: flex; }
  .page-header h1 { font-size: 1.375rem; }
  .kpi-card .kpi-value { font-size: 1.5rem; }
  .modal-content { margin: .5rem; max-height: 95dvh; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .data-table th, .data-table td { padding: .5rem .625rem; font-size: .8rem; }
}

/* ─── Finance Ledger Export Button ─────────────────────────── */
.ledger-export-btn { display: inline-flex; align-items: center; gap: .375rem; padding: .5rem 1.25rem; background: var(--surface-1); border: 1.5px solid var(--border); border-radius: var(--r-lg); color: var(--success); font-weight: 700; font-size: .8125rem; cursor: pointer; transition: all .15s; }
.ledger-export-btn:hover { background: var(--success-bg); border-color: var(--success-border); }

/* ─── Document Status Left-Border ──────────────────────────── */
.doc-status-draft    { border-left: 4px solid var(--text-muted) !important; }
.doc-status-approved { border-left: 4px solid var(--brand-blue) !important; }
.doc-status-paid     { border-left: 4px solid var(--success) !important; }
.doc-status-partial  { border-left: 4px solid var(--warning) !important; }
.doc-status-overdue  { border-left: 4px solid var(--error) !important; }

/* ─── Progress Bar variants ────────────────────────────────── */
.progress-bar { background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; transition: width .7s cubic-bezier(.4,0,.2,1); }
.progress-fill.blue { background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-light)); }
.progress-fill.green { background: linear-gradient(90deg, var(--success), #22c55e); }
.progress-fill.orange { background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-mid)); }

/* ─── Float Action (mobile) ────────────────────────────────── */
.fab { position: fixed; bottom: 5rem; right: 1.5rem; z-index: 150; width: 3.5rem; height: 3.5rem; border-radius: var(--r-full); background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-mid)); color: white; box-shadow: var(--shadow-blue), var(--shadow-lg); display: none; align-items: center; justify-content: center; border: none; cursor: pointer; transition: transform .2s var(--ease-spring); }
.fab:hover { transform: scale(1.08); }
@media (max-width: 768px) { .fab { display: flex; } }

/* ─── Pulsing Finance Badge ────────────────────────────────── */
@keyframes badge-pulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
.pulse { animation: badge-pulse 1.8s ease-in-out infinite; }

/* ─── Print: color-accurate ────────────────────────────────── */
@media print {
  .receipt-header, .kpi-card::before, .data-table thead tr {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* ─── Quick Actions Floating Bar ───────────────────────────── */
#quick-actions-bar { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 998; }
.quick-actions-container { position: relative; }
.qa-btn { width: 3.5rem; height: 3.5rem; border-radius: var(--r-full); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s var(--ease-spring); box-shadow: var(--shadow-blue), var(--shadow-lg); }
.qa-main { background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-mid)); color: white; }
.qa-main:hover { transform: scale(1.08); }
.qa-main:active { transform: scale(0.95); }
.qa-menu { position: absolute; bottom: 4rem; right: 0; display: flex; flex-direction: column; gap: .5rem; opacity: 0; pointer-events: none; transform: translateY(10px); transition: all .2s var(--ease); }
.qa-menu.qa-open { opacity: 1; pointer-events: all; transform: translateY(0); }
.qa-item { width: 3rem; height: 3rem; border-radius: var(--r-full); background: var(--surface-0); border: 1.5px solid var(--border); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s var(--ease); box-shadow: var(--shadow-md); }
.qa-item:hover { background: var(--brand-blue); border-color: var(--brand-blue); color: white; transform: scale(1.1); }
.qa-item .material-symbols-outlined { font-size: 1.25rem; }

/* ================================================================
   UI Refresh 2026-04
   High-level visual polish applied as late overrides
   ================================================================ */

body{
  background:
    radial-gradient(circle at top left, rgba(0,70,153,.12), transparent 30%),
    radial-gradient(circle at top right, rgba(224,92,0,.10), transparent 24%),
    linear-gradient(180deg, #eef4ff 0%, #f6f7fb 22%, #f3f5f9 100%);
  background-attachment: fixed;
}

body::before,
body::after{
  content:'';
  position:fixed;
  z-index:-1;
  pointer-events:none;
  filter:blur(28px);
  opacity:.9;
}

body::before{
  width:18rem;
  height:18rem;
  top:5rem;
  left:14rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(58,128,232,.18) 0%, rgba(58,128,232,0) 70%);
}

body::after{
  width:20rem;
  height:20rem;
  right:2rem;
  top:8rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(240,112,32,.14) 0%, rgba(240,112,32,0) 72%);
}

[data-theme="dark"] body{
  background:
    radial-gradient(circle at top left, rgba(58,128,232,.12), transparent 28%),
    radial-gradient(circle at top right, rgba(224,92,0,.10), transparent 24%),
    linear-gradient(180deg, #0a0f17 0%, #0f1520 24%, #111827 100%);
}

#app-topbar{
  background:rgba(255,255,255,.74);
  border-bottom:1px solid rgba(255,255,255,.75);
  box-shadow:0 12px 40px rgba(15,23,42,.08);
}

[data-theme="dark"] #app-topbar{
  background:rgba(17,24,39,.72);
  border-bottom:1px solid rgba(255,255,255,.06);
}

#app-sidebar{
  width:20.75rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    radial-gradient(circle at top left, rgba(59,130,246,.16), transparent 26%),
    linear-gradient(180deg, #091423 0%, #0d1b31 45%, #101d38 100%);
}

.sidebar-brand{
  background:linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.sidebar-section{
  color:rgba(255,255,255,.4);
  letter-spacing:.18em;
}

.nav-item{
  margin:.1rem .65rem;
  border:1px solid transparent;
}

.nav-item:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.05);
  transform:translateX(4px);
}

.nav-item.active{
  background:linear-gradient(135deg, rgba(37,99,235,.55), rgba(14,165,233,.22));
  border-color:rgba(147,197,253,.18);
  box-shadow:0 10px 24px rgba(0,70,153,.22);
}

.sidebar-footer{
  margin:.75rem;
  margin-top:auto;
  padding:1rem .95rem;
  border-radius:1.1rem;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

#app-content{
  padding:calc(var(--topbar-h) + 2rem) 2rem 3.25rem;
}

#app-content > .page-container{
  max-width:85rem;
}

.page-header{
  position:relative;
  margin-bottom:2.25rem;
  padding:1.6rem 1.8rem;
  border-radius:1.6rem;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.6));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 18px 45px rgba(15,23,42,.06);
  overflow:hidden;
}

.page-header::before{
  content:'';
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, var(--brand-blue), var(--brand-blue-light), var(--brand-orange-mid));
  opacity:.9;
}

[data-theme="dark"] .page-header{
  background:linear-gradient(180deg, rgba(22,27,34,.86), rgba(22,27,34,.7));
  border-color:rgba(255,255,255,.06);
}

.breadcrumb{
  display:inline-flex;
  padding:.35rem .7rem;
  border-radius:999px;
  background:rgba(0,70,153,.08);
}

.card,
.kpi-card,
.stats-card{
  border-color:rgba(226,230,240,.7);
  box-shadow:0 12px 32px rgba(15,23,42,.06), 0 1px 0 rgba(255,255,255,.7) inset;
  backdrop-filter:blur(8px);
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
}

.card:hover,
.kpi-card:hover,
.stats-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 42px rgba(15,23,42,.1), 0 1px 0 rgba(255,255,255,.75) inset;
}

[data-theme="dark"] .card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .stats-card{
  background:linear-gradient(180deg, rgba(28,35,48,.92), rgba(22,27,34,.88));
  box-shadow:0 16px 36px rgba(0,0,0,.26), 0 1px 0 rgba(255,255,255,.03) inset;
}

.kpi-card{
  padding:1.45rem 1.55rem;
}

.kpi-card::after{
  opacity:.85;
}

.btn{
  border-radius:999px;
  font-weight:700;
  letter-spacing:-.01em;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}

.btn-primary{
  background:linear-gradient(135deg, #0453b8 0%, #1b6fe0 55%, #3a80e8 100%);
}

.btn-primary:hover{
  transform:translateY(-1px);
}

.btn-secondary,
.btn-ghost{
  border:1px solid rgba(15,23,42,.08);
}

.icon-btn{
  width:2.5rem;
  height:2.5rem;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}

.icon-btn:hover{
  background:#fff;
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(15,23,42,.09);
}

[data-theme="dark"] .icon-btn{
  background:rgba(31,41,55,.75);
  border-color:rgba(255,255,255,.07);
}

.company-pill{
  padding:.48rem .92rem;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}

[data-theme="dark"] .company-pill{
  background:rgba(31,41,55,.8);
  border-color:rgba(255,255,255,.06);
}

.data-table-wrap,
.data-table{
  border-radius:1.2rem;
}

.data-table thead tr{
  background:linear-gradient(135deg, rgba(0,70,153,.96), rgba(21,99,204,.92)) !important;
}

.data-table tbody tr{
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.data-table tbody tr:hover{
  background:linear-gradient(90deg, rgba(0,70,153,.05), rgba(224,92,0,.04));
  transform:translateX(2px);
}

[data-theme="dark"] .data-table tbody tr:hover{
  background:linear-gradient(90deg, rgba(59,130,246,.08), rgba(249,115,22,.06));
}

.empty-state{
  padding:4.5rem 2rem;
  border-radius:1.5rem;
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.28));
  border:1px dashed rgba(0,70,153,.18);
}

[data-theme="dark"] .empty-state{
  background:linear-gradient(180deg, rgba(28,35,48,.68), rgba(22,27,34,.46));
  border-color:rgba(96,165,250,.14);
}

.search-box{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.9));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 30px 60px rgba(15,23,42,.14);
}

[data-theme="dark"] .search-box{
  background:linear-gradient(180deg, rgba(22,27,34,.96), rgba(28,35,48,.92));
  border-color:rgba(255,255,255,.08);
}

#quick-actions-bar .qa-main{
  background:linear-gradient(135deg, #0453b8 0%, #1563cc 52%, #e05c00 130%);
}

@media (max-width: 1024px){
  body::before{left:-3rem;top:6rem;}
  body::after{right:-4rem;top:14rem;}
  #app-content{padding:calc(var(--topbar-h) + 1.25rem) 1rem 5.25rem;}
  .page-header{padding:1.25rem 1.15rem;border-radius:1.25rem;}
}
@media (max-width: 768px) { #quick-actions-bar { bottom: 5rem; } }

/* ================================================================
   UI Cleanup 2026-04
   Faster-feeling shell and more organized enterprise layout
   ================================================================ */

:root{
  --sidebar-w:14.75rem;
}

body{
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.08), transparent 26%),
    linear-gradient(180deg, #f5f7fb 0%, #eef2f8 100%);
}

[data-theme="dark"] body{
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.14), transparent 24%),
    linear-gradient(180deg, #0b1120 0%, #111827 100%);
}

#app-topbar{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

#app-sidebar{
  contain:layout paint;
  scrollbar-gutter:stable;
}

#app-content{
  padding:calc(var(--topbar-h) + 1.25rem) 1.35rem 2.5rem;
}

#app-content > .page-container{
  max-width:78rem;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}

.sidebar-section{
  margin-top:.8rem;
  padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.06);
}

.nav-item{
  min-height:2.9rem;
  padding:.5rem .95rem;
  font-size:.84rem;
}

.nav-item.sub{
  margin-left:1rem;
  padding-left:.85rem;
  opacity:.94;
}

.nav-item:hover,
.nav-item.active{
  transform:none;
}

.page-header{
  margin-bottom:0;
  padding:1.2rem 1.3rem;
  border-radius:1.25rem;
}

.page-header h1{
  font-size:1.6rem;
}

.breadcrumb{
  margin-bottom:.65rem;
}

.card,
.kpi-card,
.stats-card,
.search-box{
  border-radius:1.1rem;
}

.card,
.kpi-card,
.stats-card{
  box-shadow:0 8px 22px rgba(15,23,42,.06);
}

.card:hover,
.kpi-card:hover,
.stats-card:hover,
.data-table tbody tr:hover{
  transform:none;
}

.section-header{
  margin:-1.2rem -1.2rem 1rem;
  padding:.9rem 1.2rem;
  background:linear-gradient(180deg, rgba(0,70,153,.03), rgba(0,70,153,0));
  border-bottom:1px solid var(--border);
}

.grid-2,
.grid-3,
.grid-4{
  align-items:start;
}

.data-table{
  table-layout:auto;
}

.data-table th{
  font-size:.66rem;
}

.data-table td{
  padding:.7rem .9rem;
}

.data-table tbody tr:nth-child(even){
  background:rgba(15,23,42,.018);
}

[data-theme="dark"] .data-table tbody tr:nth-child(even){
  background:rgba(255,255,255,.018);
}

@media (max-width: 1024px){
  #app-content{
    padding:calc(var(--topbar-h) + 1rem) 1rem 5rem;
  }

  #app-content > .page-container{
    gap:1rem;
  }

  .page-header{
    padding:1rem 1.05rem;
  }
}

/* ================================================================
   Visual Reset 2026-04
   Cleaner shell, reliable icon font rendering, calmer dashboard
   ================================================================ */

.material-symbols-outlined{
  font-family:"Material Symbols Outlined";
  font-weight:normal;
  font-style:normal;
  letter-spacing:normal;
  text-transform:none;
  white-space:nowrap;
}

#app-topbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1rem;
  align-items:center;
}

#app-topbar > div:first-child,
#app-topbar > div:last-child{
  min-width:0;
}

#app-topbar > div:last-child{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:.45rem;
  flex-wrap:nowrap;
}

#app-topbar a[href="#/dashboard"]{
  min-width:0;
}

#company-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.icon-btn{
  width:2.25rem;
  height:2.25rem;
}

.icon-btn .material-symbols-outlined{
  font-size:1.15rem;
}

.company-pill{
  padding:.42rem .78rem;
  white-space:nowrap;
}

#app-sidebar{
  width:14.5rem;
}

.sidebar-brand{
  margin:.35rem .55rem .55rem;
}

.nav-item{
  margin:.08rem .55rem;
  min-height:2.7rem;
}

.nav-item.sub{
  margin-left:.9rem;
}

.dashboard-shell{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}

.dashboard-hero{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(18rem,.95fr);
  gap:1.1rem;
  align-items:center;
  padding:1.45rem 1.55rem;
  border-radius:1.3rem;
  color:#fff;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(135deg, #123a8f 0%, #1e5cc8 55%, #1d97d7 100%);
  box-shadow:0 18px 38px rgba(15,65,145,.22);
}

.dashboard-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.34rem .7rem;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  font-size:.74rem;
  font-weight:700;
  margin-bottom:.8rem;
}

.dashboard-hero h1{
  margin:0 0 .3rem;
  font-size:2rem;
  font-weight:800;
  letter-spacing:-.04em;
  color:#fff;
}

.dashboard-hero p{
  margin:0;
  color:rgba(255,255,255,.88);
}

.dashboard-hero__meta{
  margin-top:.6rem;
  color:rgba(255,255,255,.72);
  font-size:.82rem;
}

.dashboard-hero__actions{
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.dashboard-clock-card{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.9rem 1rem;
  border-radius:1rem;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
}

.dashboard-clock-card small{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.dashboard-clock-card strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.18rem;
  font-weight:800;
  color:#fff;
}

.dashboard-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  justify-content:flex-end;
}

.dashboard-cta-row .btn{
  box-shadow:none;
}

.dashboard-cta-row .btn-secondary{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
  color:#fff;
}

.dashboard-cta-row .btn-secondary:hover{
  background:rgba(255,255,255,.18);
}

.dashboard-cta-row .btn-primary{
  background:#fff;
  color:#0f3c8e;
}

.dashboard-metric-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}

.dashboard-metric-card{
  min-height:11.75rem;
  display:flex;
  flex-direction:column;
  gap:.68rem;
  padding:1.15rem;
  border-radius:1.2rem;
  color:#fff;
  box-shadow:0 12px 26px rgba(15,23,42,.12);
}

.dashboard-metric-card__head,
.dashboard-metric-card__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

.dashboard-metric-card__head .material-symbols-outlined{
  font-size:1.5rem;
}

.dashboard-metric-card__badge{
  padding:.26rem .62rem;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.dashboard-metric-card__value{
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.04em;
}

.dashboard-metric-card__label{
  color:rgba(255,255,255,.84);
  font-size:.88rem;
}

.dashboard-metric-card__foot{
  margin-top:auto;
  padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.76);
  font-size:.76rem;
}

.dashboard-metric-card__foot strong{
  color:#fff;
  font-size:.82rem;
}

.dashboard-metric-progress{
  width:100%;
  height:.38rem;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  overflow:hidden;
}

.dashboard-metric-progress span{
  display:block;
  height:100%;
  background:#fff;
  border-radius:999px;
}

.dashboard-metric-card--revenue{background:linear-gradient(135deg,#5f6fe5 0%,#7c4ec2 100%);}
.dashboard-metric-card--production{background:linear-gradient(135deg,#da5eb6 0%,#ee6276 100%);}
.dashboard-metric-card--cash{background:linear-gradient(135deg,#2499d8 0%,#25c1eb 100%);}
.dashboard-metric-card--inventory{background:linear-gradient(135deg,#28b56f 0%,#4ad9b2 100%);}

.dashboard-focus-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(18rem,1fr);
  gap:1.25rem;
  margin-bottom:1.75rem;
}
.dashboard-focus-card{
  background:var(--surface-0);
  border:1px solid var(--border);
  border-radius:1.35rem;
  padding:1.15rem 1.2rem;
  box-shadow:var(--shadow-sm);
}
.dashboard-focus-card h3{
  font-size:1rem;
  font-weight:800;
  margin-bottom:.25rem;
  letter-spacing:-.02em;
}
.dashboard-focus-card p{
  color:var(--text-tertiary);
  font-size:.86rem;
  margin-bottom:1rem;
}
.dashboard-focus-list{
  display:grid;
  gap:.75rem;
}
.dashboard-focus-item{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  padding:.8rem .9rem;
  border-radius:1rem;
  background:var(--surface-1);
  border:1px solid rgba(0,70,153,.07);
}
.dashboard-focus-item .material-symbols-outlined{
  width:2rem;
  height:2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.8rem;
  background:var(--brand-blue-faint);
  color:var(--brand-blue);
  font-size:1.05rem;
  flex-shrink:0;
}
.dashboard-focus-item strong{
  display:block;
  font-size:.88rem;
  font-weight:700;
  color:var(--text-primary);
  margin-bottom:.15rem;
}
.dashboard-focus-item span{
  display:block;
  font-size:.8rem;
  color:var(--text-tertiary);
  line-height:1.45;
}
.dashboard-command-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.95rem 1.1rem;
  border-radius:1.1rem;
  background:linear-gradient(135deg,var(--surface-0),var(--surface-1));
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
  margin-bottom:1.25rem;
}
.dashboard-command-strip__meta{
  display:flex;
  align-items:center;
  gap:.85rem;
  min-width:0;
}
.dashboard-command-strip__icon{
  width:2.4rem;
  height:2.4rem;
  border-radius:.9rem;
  background:linear-gradient(135deg,var(--brand-blue-faint),#dfe9ff);
  color:var(--brand-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.dashboard-command-strip h4{
  font-size:.92rem;
  font-weight:800;
  margin-bottom:.12rem;
}
.dashboard-command-strip p{
  font-size:.8rem;
  color:var(--text-tertiary);
}
.dashboard-shortcuts{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.dashboard-chip-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .8rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-0);
  color:var(--text-secondary);
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  transition:all .16s var(--ease);
}
.dashboard-chip-btn:hover{
  border-color:var(--brand-blue-dim);
  color:var(--brand-blue);
  background:var(--brand-blue-faint);
}
@media (max-width: 980px){
  .dashboard-focus-grid{grid-template-columns:1fr;}
  .dashboard-command-strip{flex-direction:column;align-items:flex-start;}
  .dashboard-shortcuts{justify-content:flex-start;}
}

/* Sidebar visual direction inspired by the uploaded concept */
#app-sidebar{
  background:
    radial-gradient(circle at 18% 12%, rgba(74,144,255,.24), transparent 26%),
    radial-gradient(circle at 78% 42%, rgba(255,146,86,.16), transparent 24%),
    radial-gradient(circle at 68% 78%, rgba(201,111,255,.16), transparent 22%),
    radial-gradient(circle at 32% 64%, rgba(89,215,255,.12), transparent 20%),
    linear-gradient(180deg, rgba(10,17,38,.96) 0%, rgba(8,12,26,.98) 100%);
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:16px 0 42px rgba(0,0,0,.34);
}
#app-sidebar::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.12) 0 1px, transparent 1.4px),
    radial-gradient(circle at 78% 32%, rgba(255,255,255,.08) 0 1px, transparent 1.6px),
    radial-gradient(circle at 58% 74%, rgba(255,255,255,.08) 0 1px, transparent 1.4px),
    radial-gradient(circle at 26% 84%, rgba(255,255,255,.06) 0 1px, transparent 1.2px);
  background-size:240px 240px, 300px 300px, 280px 280px, 220px 220px;
  opacity:.9;
}
.sidebar-brand{
  position:relative;
  margin:.5rem .9rem 1rem;
  padding:.88rem 1rem;
  border-radius:1.15rem;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.sidebar-brand::after{
  content:'';
  position:absolute;
  inset:auto .9rem -.2rem .9rem;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}
.sidebar-section{
  padding:.9rem 1.55rem .3rem;
  color:rgba(255,255,255,.46);
  letter-spacing:.18em;
  font-size:.62rem;
}
.nav-item{
  margin:0 .95rem .52rem;
  padding:.86rem 1rem;
  border-radius:1.04rem;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 10px 20px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.05);
  color:rgba(255,255,255,.9);
  overflow:hidden;
}
.nav-item.sub{
  margin-left:.95rem;
  margin-right:.95rem;
  padding-left:1rem;
  font-size:.86rem;
}
.nav-item::before{
  left:auto;
  right:0;
  top:auto;
  bottom:0;
  width:0;
  height:2px;
  transform:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  border-radius:999px;
  transition:width .22s var(--ease);
}
.nav-item::after{
  content:'chevron_right';
  font-family:'Material Symbols Outlined';
  font-size:1.02rem;
  line-height:1;
  color:rgba(255,255,255,.58);
  margin-left:auto;
  transition:transform .18s var(--ease), color .18s var(--ease);
}
.nav-item:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
  border-color:rgba(255,255,255,.14);
  box-shadow:
    0 14px 28px rgba(0,0,0,.18),
    0 0 22px rgba(84,146,255,.12),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-item:hover::before,
.nav-item.active::before{width:100%;}
.nav-item:hover::after{
  color:rgba(255,255,255,.86);
  transform:translateX(2px);
}
.nav-item.active{
  background:
    radial-gradient(circle at 10% 50%, rgba(130,195,255,.26), transparent 18%),
    linear-gradient(90deg, rgba(74,126,255,.38), rgba(82,145,255,.18) 55%, rgba(74,126,255,.26) 100%);
  border-color:rgba(120,178,255,.45);
  box-shadow:
    0 16px 32px rgba(0,0,0,.24),
    0 0 26px rgba(85,151,255,.34),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.nav-item.active::after{
  color:#f8fbff;
}
.nav-item .material-symbols-outlined{
  width:2.1rem;
  height:2.1rem;
  border-radius:.8rem;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-item.active .material-symbols-outlined{
  box-shadow:
    0 0 18px color-mix(in srgb, var(--nav-icon-color) 38%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.3rem;
  height:1.3rem;
  padding:0 .35rem;
  margin-left:.55rem;
  border-radius:999px;
  background:linear-gradient(135deg,#ff6b6b,#ff476f);
  color:#fff;
  font-size:.68rem;
  font-weight:800;
  box-shadow:0 0 14px rgba(255,91,114,.45);
}

.nav-item[data-route="dashboard"],
.nav-item[data-route="pfi"],
.nav-item[data-route="production"],
.nav-item[data-route="stores"],
.nav-item[data-route="invoice"],
.nav-item[data-route="financial-reports"]{
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.055)),
    linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border-color:rgba(255,255,255,.12);
}
.nav-item[data-route="dashboard"]{
  box-shadow:
    0 12px 26px rgba(0,0,0,.2),
    0 0 26px rgba(88,150,255,.32),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-item[data-route="pfi"]{
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 18px rgba(80,141,255,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-item[data-route="production"]{
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 20px rgba(255,160,92,.2),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-item[data-route="stores"]{
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 20px rgba(255,199,92,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-item[data-route="invoice"]{
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 18px rgba(54,211,180,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-item[data-route="financial-reports"]{
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 20px rgba(186,103,255,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.nav-item[data-route="dashboard"].active{
  background:
    radial-gradient(circle at 14% 50%, rgba(152,215,255,.34), transparent 18%),
    linear-gradient(90deg, rgba(84,135,255,.55), rgba(95,146,255,.24) 58%, rgba(104,191,255,.38) 100%);
  border-color:rgba(128,185,255,.56);
  box-shadow:
    0 16px 36px rgba(0,0,0,.26),
    0 0 34px rgba(85,151,255,.42),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-item[data-route="pfi"].active{
  background:
    radial-gradient(circle at 14% 50%, rgba(147,204,255,.26), transparent 18%),
    linear-gradient(90deg, rgba(54,127,255,.38), rgba(82,116,202,.18) 58%, rgba(99,74,189,.22) 100%);
}
.nav-item[data-route="production"].active{
  background:
    radial-gradient(circle at 14% 50%, rgba(255,205,133,.26), transparent 18%),
    linear-gradient(90deg, rgba(247,138,61,.38), rgba(205,120,78,.18) 58%, rgba(162,98,122,.18) 100%);
  border-color:rgba(255,177,115,.4);
}
.nav-item[data-route="stores"].active{
  background:
    radial-gradient(circle at 14% 50%, rgba(255,219,141,.28), transparent 18%),
    linear-gradient(90deg, rgba(231,160,67,.42), rgba(190,116,72,.2) 58%, rgba(149,93,98,.14) 100%);
  border-color:rgba(255,202,126,.42);
}
.nav-item[data-route="invoice"].active{
  background:
    radial-gradient(circle at 14% 50%, rgba(137,255,222,.24), transparent 18%),
    linear-gradient(90deg, rgba(54,204,166,.38), rgba(53,127,175,.18) 58%, rgba(88,103,186,.16) 100%);
  border-color:rgba(120,241,213,.38);
}
.nav-item[data-route="financial-reports"].active{
  background:
    radial-gradient(circle at 14% 50%, rgba(218,169,255,.26), transparent 18%),
    linear-gradient(90deg, rgba(144,81,255,.36), rgba(140,81,214,.18) 58%, rgba(210,112,206,.22) 100%);
  border-color:rgba(198,143,255,.42);
}
.sidebar-footer{
  margin:.6rem .75rem .9rem;
  padding:1rem .95rem .85rem;
  border-top:none;
  border-radius:1.1rem;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}
#sidebar-user-info{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.08);
}
@media (max-width: 1024px){
  #app-sidebar{
    box-shadow:20px 0 44px rgba(0,0,0,.42);
  }
}

@media (max-width: 1200px){
  .dashboard-metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 900px){
  #app-topbar{
    grid-template-columns:1fr;
    height:auto;
    min-height:var(--topbar-h);
    padding:.55rem .85rem;
  }

  #app-topbar > div:last-child{
    justify-self:stretch;
    justify-content:flex-end;
  }

  .dashboard-hero{
    grid-template-columns:1fr;
    padding:1.15rem;
  }

  .dashboard-cta-row{
    justify-content:flex-start;
  }
}

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

  .dashboard-hero h1{
    font-size:1.55rem;
  }
}

/* Forced sidebar reference skin */
.sidebar-reference-skin{
  width:20.75rem !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(74,144,255,.26), transparent 26%),
    radial-gradient(circle at 82% 44%, rgba(255,154,97,.17), transparent 24%),
    radial-gradient(circle at 70% 78%, rgba(205,122,255,.18), transparent 22%),
    radial-gradient(circle at 32% 64%, rgba(89,215,255,.12), transparent 20%),
    linear-gradient(180deg, rgba(11,16,36,.98) 0%, rgba(8,11,24,.99) 100%) !important;
  border-right:1px solid rgba(255,255,255,.08) !important;
  box-shadow:18px 0 46px rgba(0,0,0,.38) !important;
}
.sidebar-reference-skin ~ #app-content{
  margin-left:20.75rem !important;
}
.sidebar-reference-skin ~ #app-bottomnav{
  display:none;
}
.sidebar-reference-skin .sidebar-brand{
  margin:.55rem .9rem 1rem !important;
  padding:.95rem 1rem !important;
  border-radius:1.2rem !important;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.045)) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.sidebar-reference-skin .sidebar-section{
  padding:.95rem 1.55rem .34rem !important;
  font-size:.64rem !important;
  letter-spacing:.19em !important;
  color:rgba(255,255,255,.48) !important;
}
.sidebar-reference-skin .nav-item{
  margin:0 .95rem .52rem !important;
  padding:.9rem 1rem !important;
  min-height:3.35rem !important;
  border-radius:1.04rem !important;
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
  border:1px solid rgba(255,255,255,.085) !important;
  color:rgba(255,255,255,.92) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.sidebar-reference-skin .nav-item.sub{
  margin-left:.95rem !important;
  margin-right:.95rem !important;
  padding-left:1rem !important;
  font-size:.86rem !important;
}
.sidebar-reference-skin .nav-item::before{
  left:auto !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  width:0 !important;
  height:2px !important;
  transform:none !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent) !important;
}
.sidebar-reference-skin .nav-item::after{
  content:'chevron_right' !important;
  font-family:'Material Symbols Outlined' !important;
  color:rgba(255,255,255,.6) !important;
  font-size:1rem !important;
  margin-left:auto !important;
}
.sidebar-reference-skin .nav-item:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.065)) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.18), 0 0 24px rgba(84,146,255,.12), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.sidebar-reference-skin .nav-item:hover::before,
.sidebar-reference-skin .nav-item.active::before{
  width:100% !important;
}
.sidebar-reference-skin .nav-item.active{
  color:#fff !important;
  border-color:rgba(128,185,255,.5) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.26), 0 0 30px rgba(85,151,255,.38), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.sidebar-reference-skin .nav-item .material-symbols-outlined{
  width:2.1rem !important;
  height:2.1rem !important;
  border-radius:.78rem !important;
  border:1px solid rgba(255,255,255,.1) !important;
}
.sidebar-reference-skin .nav-item[data-route="dashboard"]{
  background:
    radial-gradient(circle at 14% 50%, rgba(152,215,255,.34), transparent 18%),
    linear-gradient(90deg, rgba(84,135,255,.5), rgba(95,146,255,.22) 58%, rgba(104,191,255,.32) 100%) !important;
}
.sidebar-reference-skin .nav-item[data-route="pfi"]{
  background:
    radial-gradient(circle at 14% 50%, rgba(147,204,255,.18), transparent 18%),
    linear-gradient(90deg, rgba(54,127,255,.22), rgba(82,116,202,.1) 58%, rgba(99,74,189,.12) 100%) !important;
}
.sidebar-reference-skin .nav-item[data-route="production"]{
  background:
    radial-gradient(circle at 14% 50%, rgba(255,205,133,.2), transparent 18%),
    linear-gradient(90deg, rgba(247,138,61,.24), rgba(205,120,78,.1) 58%, rgba(162,98,122,.1) 100%) !important;
}
.sidebar-reference-skin .nav-item[data-route="stores"]{
  background:
    radial-gradient(circle at 14% 50%, rgba(255,219,141,.22), transparent 18%),
    linear-gradient(90deg, rgba(231,160,67,.26), rgba(190,116,72,.1) 58%, rgba(149,93,98,.08) 100%) !important;
}
.sidebar-reference-skin .nav-item[data-route="invoice"]{
  background:
    radial-gradient(circle at 14% 50%, rgba(137,255,222,.18), transparent 18%),
    linear-gradient(90deg, rgba(54,204,166,.22), rgba(53,127,175,.1) 58%, rgba(88,103,186,.08) 100%) !important;
}
.sidebar-reference-skin .nav-item[data-route="financial-reports"]{
  background:
    radial-gradient(circle at 14% 50%, rgba(218,169,255,.18), transparent 18%),
    linear-gradient(90deg, rgba(144,81,255,.24), rgba(140,81,214,.1) 58%, rgba(210,112,206,.12) 100%) !important;
}
.sidebar-reference-skin .nav-badge{
  display:inline-flex !important;
}
@media (max-width: 1180px){
  .sidebar-reference-skin{
    transform:translateX(-100%) !important;
    z-index:200 !important;
  }
  .sidebar-reference-skin.open,
  .sidebar-reference-skin.mobile-open{
    transform:translateX(0) !important;
    box-shadow:22px 0 52px rgba(0,0,0,.45) !important;
  }
  .sidebar-reference-skin ~ #app-content{
    margin-left:0 !important;
    padding:calc(var(--topbar-h) + 1rem) 1rem 5.25rem !important;
  }
  .sidebar-reference-skin ~ #app-bottomnav{
    display:flex !important;
  }
  .sidebar-overlay{
    position:fixed !important;
    inset:0 !important;
    background:rgba(5,10,24,.62) !important;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:199 !important;
    opacity:0;
    visibility:hidden;
    transition:all .28s var(--ease);
  }
  .sidebar-overlay.open{
    opacity:1 !important;
    visibility:visible !important;
  }
}
@media (max-width: 640px){
  .sidebar-reference-skin{
    width:min(88vw, 19.25rem) !important;
  }
  .sidebar-reference-skin ~ #app-content{
    padding:calc(var(--topbar-h) + .85rem) .8rem 5rem !important;
  }
}

/* ================================================================
   UI/UX REFINEMENT LAYER — v5 POLISH
   Beautiful borders · Modern fields · Refined hierarchy
   ================================================================ */

/* ─── Form Controls (primary class used across modules) ────── */
.form-control {
  width: 100%;
  background: var(--surface-0);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: .65rem .9rem;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-primary);
  outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  box-shadow: 0 1px 2px rgba(15,23,58,.04);
}
.form-control::placeholder { color: var(--text-muted); font-weight: 400; }
.form-control:hover:not(:focus):not(:disabled) {
  border-color: var(--brand-blue-dim);
  background: var(--surface-1);
}
.form-control:focus {
  border-color: var(--brand-blue);
  background: var(--surface-0);
  box-shadow: 0 0 0 3px rgba(0,70,153,.13), 0 1px 2px rgba(15,23,58,.04);
}
.form-control:disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: .7;
}

/* Native select arrow */
select.form-control {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%236b7280' d='M7 10l5 5 5-5H7z'/></svg>");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  padding-right: 2.25rem;
}
select.form-control:focus { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%23004699' d='M7 10l5 5 5-5H7z'/></svg>"); }

textarea.form-control { resize: vertical; min-height: 5rem; line-height: 1.55; }

/* Number input — remove spinners for cleaner look */
.form-control[type=number]::-webkit-inner-spin-button,
.form-control[type=number]::-webkit-outer-spin-button { opacity: .4; }

/* Form labels (refined typography) */
.form-label {
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -.005em;
  margin-bottom: .375rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}

[data-theme="dark"] .form-control {
  background: var(--surface-1);
  border-color: var(--border);
}
[data-theme="dark"] .form-control:hover:not(:focus):not(:disabled) {
  background: var(--surface-2);
  border-color: var(--brand-blue-light);
}
[data-theme="dark"] .form-control:focus {
  background: var(--surface-1);
  border-color: var(--brand-blue-light);
  box-shadow: 0 0 0 3px rgba(58,128,232,.18);
}
[data-theme="dark"] select.form-control {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%238b98a5' d='M7 10l5 5 5-5H7z'/></svg>");
}

/* ─── Fieldset (used in workflow builder, etc.) ────────────── */
fieldset {
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.125rem 1.125rem 1rem;
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 60%);
  position: relative;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
fieldset:hover { border-color: var(--brand-blue-dim); box-shadow: 0 4px 16px rgba(15,23,58,.06); }
fieldset legend {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .25rem .625rem;
  background: var(--surface-0);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-secondary);
}

/* ─── Modal polish ─────────────────────────────────────────── */
.modal-content {
  box-shadow: 0 32px 80px rgba(15,23,58,.32), 0 0 0 1px rgba(15,23,58,.06);
}
.modal-content::before {
  height: 4px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-light), var(--brand-orange-mid));
}
.modal-header h2, .modal-header h3, .modal-header .modal-title {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--text-primary);
}
.modal-body .form-group { margin-bottom: .25rem; }

/* Modal backdrop refined */
.modal-overlay {
  background: radial-gradient(ellipse at top, rgba(10,16,32,.55), rgba(10,16,32,.78));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ─── Stat cards (refined with accent strip) ───────────────── */
.stat-card {
  background: var(--surface-0);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.125rem 1.25rem;
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-blue-light));
  opacity: .85;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15,23,58,.10);
  border-color: var(--brand-blue-dim);
}
.stat-card .stat-label {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-tertiary);
  margin-bottom: .35rem;
}
.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-primary);
  line-height: 1.1;
}

/* ─── Tabs polish ──────────────────────────────────────────── */
.tab-bar {
  display: inline-flex;
  gap: .25rem;
  padding: .375rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  flex-wrap: wrap;
}
.tab-btn {
  padding: .5rem 1.05rem;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .16s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}
.tab-btn:hover:not(.active) { background: rgba(255,255,255,.5); color: var(--text-primary); }
.tab-btn.active {
  background: var(--surface-0);
  color: var(--brand-blue);
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0,70,153,.08), 0 0 0 1px rgba(0,70,153,.04);
  font-weight: 700;
}
[data-theme="dark"] .tab-btn:hover:not(.active) { background: rgba(255,255,255,.04); }

/* ─── Badges (richer) ──────────────────────────────────────── */
.badge {
  padding: .25rem .65rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid transparent;
}
.badge-success    { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge-warning    { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.badge-danger,.badge-error { background: var(--error-bg); color: var(--error); border-color: var(--error-border); }
.badge-info       { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.badge-primary    { background: var(--brand-blue-faint); color: var(--brand-blue); border-color: var(--brand-blue-dim); }
.badge-secondary  { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
.badge-purple     { background: var(--purple-bg); color: var(--purple); border-color: rgba(124,58,237,.3); }

/* ─── Buttons polish ───────────────────────────────────────── */
.btn {
  letter-spacing: -.005em;
  font-weight: 600;
  border-radius: var(--r-lg);
  transition: transform .14s var(--ease), box-shadow .18s var(--ease), filter .14s var(--ease), background .18s var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-mid) 100%);
  box-shadow: 0 4px 14px rgba(0,70,153,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover { box-shadow: 0 8px 24px rgba(0,70,153,.36), inset 0 1px 0 rgba(255,255,255,.18); transform: translateY(-1px); }
.btn-secondary {
  background: var(--surface-0);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 2px rgba(15,23,58,.04);
}
.btn-secondary:hover {
  background: var(--surface-1);
  border-color: var(--brand-blue-dim);
  color: var(--brand-blue);
  transform: translateY(-1px);
}
.btn-sm { padding: .4rem .8rem; font-size: .8125rem; border-radius: var(--r-md); }

/* ─── Data table polish ────────────────────────────────────── */
.table-wrapper {
  background: var(--surface-0);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,23,58,.04);
}
.data-table thead tr {
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%);
}
.data-table th {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .85rem 1rem;
  color: var(--text-tertiary);
  border-bottom: 2px solid var(--border);
}
.data-table td {
  padding: .85rem 1rem;
  font-size: .875rem;
  color: var(--text-primary);
}
.data-table tbody tr:hover {
  background: var(--brand-blue-faint);
  transform: none;
}
.data-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--brand-blue); }

/* ─── Page header polish ───────────────────────────────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.page-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text-primary);
  margin-bottom: .25rem;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--brand-blue) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-subtitle {
  color: var(--text-tertiary);
  font-size: .9rem;
  font-weight: 500;
  max-width: 56rem;
}

/* ─── Empty state polish ───────────────────────────────────── */
.empty-state {
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-2xl);
  padding: 3rem 1.5rem;
  text-align: center;
}
.empty-state h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: .5rem;
}
.empty-state .material-symbols-outlined {
  background: linear-gradient(135deg, var(--brand-blue-faint), var(--brand-blue-dim));
  color: var(--brand-blue);
  width: 4rem; height: 4rem;
  border-radius: var(--r-2xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 2rem !important;
  opacity: 1;
}

/* ─── Stats grid responsive ────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* ─── Code chip ────────────────────────────────────────────── */
code {
  font-family: var(--font-mono);
  font-size: .78em;
  background: var(--brand-blue-faint);
  color: var(--brand-blue);
  padding: .15rem .45rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--brand-blue-dim);
  font-weight: 600;
}

/* ─── Card hover refinement ────────────────────────────────── */
.card {
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 2px rgba(15,23,58,.04);
}
.card:hover { border-color: var(--brand-blue-dim); }

/* ─── Page container vertical rhythm ───────────────────────── */
.page-container { display: grid; gap: 1.25rem; padding-bottom: 4rem; }
.page-container > * { min-width: 0; }

/* ─── Smooth modal-body scroll ─────────────────────────────── */
.modal-body, .modal-content { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }

/* ─── Mobile field tweaks ──────────────────────────────────── */
@media (max-width: 640px) {
  .form-control { font-size: 16px; padding: .7rem .9rem; }
  .stat-card .stat-value { font-size: 1.4rem; }
  .page-title { font-size: 1.5rem; }
  fieldset { padding: 1rem .85rem .85rem; }
}