/* ============================================================
   FuelMS — Main Stylesheet (Glassmorphism — Messenger Edition)
   Font: Google Prompt (Thai)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ── */
:root {
  --bg-primary:    #080c1c;
  --bg-secondary:  #0e1530;
  --bg-card:       rgba(255,255,255,0.055);
  --bg-card-hover: rgba(255,255,255,0.095);
  --border-color:  rgba(255,255,255,0.09);
  --text-primary:  #eef2ff;
  --text-secondary:#8b95c0;
  --text-muted:    #4a5280;
  --glass-bg:      rgba(8,12,28,0.82);
  --glass-blur:    blur(28px);
  --shadow-glass:  0 8px 40px rgba(0,0,0,0.5);
  --input-bg:      rgba(255,255,255,0.055);
  --input-border:  rgba(255,255,255,0.10);
  --accent-blue:   #60a5fa;
  --accent-indigo: #818cf8;
  --accent-purple: #a78bfa;
  --accent-emerald:#34d399;
  --accent-amber:  #fbbf24;
  --accent-rose:   #fb7185;
  --accent-cyan:   #22d3ee;
  --sidebar-w:     260px;
  --sidebar-col:   72px;
  --topbar-h:      64px;
  --radius:        18px;
  --radius-sm:     11px;
  --radius-xs:     7px;
  /* Gradients */
  --grad-primary:  linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#db2777 100%);
  --grad-blue:     linear-gradient(135deg,#1d4ed8 0%,#3b82f6 100%);
  --grad-purple:   linear-gradient(135deg,#5b21b6 0%,#8b5cf6 100%);
  --grad-emerald:  linear-gradient(135deg,#065f46 0%,#10b981 100%);
  --grad-amber:    linear-gradient(135deg,#92400e 0%,#f59e0b 100%);
  --grad-rose:     linear-gradient(135deg,#9d174d 0%,#f43f5e 100%);
  --grad-cyan:     linear-gradient(135deg,#164e63 0%,#06b6d4 100%);
}

[data-theme="light"] {
  --bg-primary:    #eef2ff;
  --bg-secondary:  #dde7f7;
  --bg-card:       rgba(255,255,255,0.70);
  --bg-card-hover: rgba(255,255,255,0.92);
  --border-color:  rgba(99,102,241,0.16);
  --text-primary:  #1e1b4b;
  --text-secondary:#4338ca;
  --text-muted:    #818cf8;
  --glass-bg:      rgba(238,242,255,0.85);
  --input-bg:      rgba(255,255,255,0.85);
  --input-border:  rgba(99,102,241,0.22);
  --shadow-glass:  0 8px 32px rgba(79,70,229,0.13);
}

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Prompt',sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  display:flex;min-height:100vh;
  overflow-x:hidden;
  transition:background .3s,color .3s;
  line-height:1.5;
}

/* ── Background ambient light (macOS wallpaper style) ── */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 130% 70% at -10% -5%,  rgba(79,70,229,.38)  0%,transparent 55%),
    radial-gradient(ellipse 90%  65% at 105% 105%, rgba(219,39,119,.32)  0%,transparent 55%),
    radial-gradient(ellipse 75%  55% at 90%  15%,  rgba(6,182,212,.18)   0%,transparent 50%),
    radial-gradient(ellipse 65%  75% at 10%  90%,  rgba(124,58,237,.28)  0%,transparent 52%),
    radial-gradient(ellipse 50%  40% at 55%  50%,  rgba(16,185,129,.05)  0%,transparent 60%);
}

a{text-decoration:none;color:inherit}
img{max-width:100%}
button{cursor:pointer;font-family:'Prompt',sans-serif}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(124,58,237,.3);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(124,58,237,.5)}

/* ── Sidebar ── */
.sidebar{
  width:var(--sidebar-w);min-height:100vh;
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--border-color);
  position:fixed;left:0;top:0;bottom:0;z-index:100;
  display:flex;flex-direction:column;
  transition:width .3s ease;
  box-shadow:4px 0 30px rgba(0,0,0,.3);
}
.sidebar.collapsed{width:var(--sidebar-col)}
.sidebar-header{
  height:var(--topbar-h);display:flex;align-items:center;gap:12px;
  padding:0 20px;border-bottom:1px solid var(--border-color);flex-shrink:0;
}
.logo-icon{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;
  background:var(--grad-primary);display:flex;align-items:center;justify-content:center;
  font-size:18px;box-shadow:0 4px 18px rgba(124,58,237,.55);
}
.logo-text{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden}
.logo-text span{display:block;font-size:10px;color:var(--text-secondary);font-weight:400}
.sidebar.collapsed .logo-text{display:none}
.sidebar-nav{flex:1;overflow-y:auto;padding:12px 10px}
.nav-section{margin-bottom:8px}
.nav-section-label{
  font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--text-muted);
  text-transform:uppercase;padding:10px 12px 4px;white-space:nowrap;overflow:hidden;
}
.sidebar.collapsed .nav-section-label{opacity:0}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:var(--radius-sm);
  color:var(--text-secondary);font-size:13.5px;font-weight:500;
  transition:all .2s;cursor:pointer;white-space:nowrap;overflow:hidden;
  border:1px solid transparent;margin-bottom:2px;
}
.nav-item:hover{
  background:rgba(124,58,237,.12);
  color:var(--text-primary);
  border-color:rgba(124,58,237,.2);
}
.nav-item.active{
  background:linear-gradient(135deg,rgba(79,70,229,.28),rgba(124,58,237,.22),rgba(219,39,119,.15));
  color:#c4b5fd;
  border-color:rgba(124,58,237,.38);
  box-shadow:inset 0 0 22px rgba(124,58,237,.12), 0 2px 12px rgba(124,58,237,.18);
}
.nav-icon{width:20px;height:20px;flex-shrink:0;font-size:18px;text-align:center}
.nav-label{flex:1}
.nav-badge{background:var(--grad-rose);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;flex-shrink:0;box-shadow:0 2px 8px rgba(244,63,94,.4)}
.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-badge{display:none}
.sidebar-footer{padding:12px 10px;border-top:1px solid var(--border-color)}
.user-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid var(--border-color);cursor:pointer;transition:all .2s}
.user-card:hover{background:var(--bg-card-hover);border-color:rgba(124,58,237,.25)}
.avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--grad-primary);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;
  box-shadow:0 0 0 2px rgba(124,58,237,.45);overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.user-info{overflow:hidden;flex:1}
.user-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:11px;color:var(--text-muted)}
.sidebar.collapsed .user-info{display:none}

/* ── Main Wrapper ── */
.main-wrap{
  flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;
  min-height:100vh;transition:margin-left .3s;position:relative;z-index:1;
}
.sidebar.collapsed~.main-wrap{margin-left:var(--sidebar-col)}

/* ── Topbar ── */
.topbar{
  height:var(--topbar-h);background:var(--glass-bg);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--border-color);
  display:flex;align-items:center;gap:14px;
  padding:0 24px;position:sticky;top:0;z-index:90;
  box-shadow:0 2px 20px rgba(0,0,0,.25);
}
.topbar-toggle{
  width:36px;height:36px;border-radius:9px;background:var(--bg-card);
  border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-secondary);transition:all .2s;font-size:16px;flex-shrink:0;
}
.topbar-toggle:hover{background:rgba(124,58,237,.15);color:var(--text-primary);border-color:rgba(124,58,237,.3)}
.topbar-title{font-size:15px;font-weight:600;flex:1;min-width:0}
.topbar-title small{display:block;font-size:11px;color:var(--text-muted);font-weight:400;margin-top:1px}
.topbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.topbar-btn{
  width:36px;height:36px;border-radius:9px;background:var(--bg-card);
  border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-secondary);transition:all .2s;font-size:15px;position:relative;
}
.topbar-btn:hover{background:rgba(124,58,237,.15);color:var(--text-primary);border-color:rgba(124,58,237,.3)}
.badge-dot{
  position:absolute;top:5px;right:5px;width:8px;height:8px;
  border-radius:50%;background:var(--accent-rose);
  box-shadow:0 0 8px var(--accent-rose);border:2px solid var(--bg-primary);
}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted)}
.breadcrumb span{color:var(--text-secondary)}

/* ── Page Content ── */
.page-content{padding:22px 24px;flex:1}

/* ── Glass Card ── */
.glass-card{
  background:var(--bg-card);backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-color);border-radius:var(--radius);
  box-shadow:var(--shadow-glass), inset 0 1px 0 rgba(255,255,255,.06);
  transition:all .2s;
}
.glass-card:hover{
  background:var(--bg-card-hover);
  border-color:rgba(124,58,237,.18);
  box-shadow:var(--shadow-glass), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(124,58,237,.08);
}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border-color)}
.card-title{font-size:14px;font-weight:600}
.card-title small{display:block;font-size:11px;color:var(--text-muted);font-weight:400;margin-top:2px}
.card-body{padding:16px 20px}
.card-footer{padding:12px 20px;border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:flex-end;gap:8px}

/* ── KPI Card ── */
.kpi-card{
  padding:20px 22px;border-radius:var(--radius);position:relative;
  overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:default;
}
.kpi-card:hover{transform:translateY(-3px);box-shadow:0 24px 48px rgba(0,0,0,.35)}
.kpi-card::before{content:'';position:absolute;top:-30px;right:-30px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.07)}
.kpi-card::after {content:'';position:absolute;bottom:-20px;left:-20px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.04)}
.kpi-label{font-size:12px;color:rgba(255,255,255,.72);font-weight:500;margin-bottom:8px;position:relative;z-index:1}
.kpi-value{font-size:28px;font-weight:700;color:#fff;position:relative;z-index:1;line-height:1.1}
.kpi-value small{font-size:14px;font-weight:500}
.kpi-sub{font-size:11px;color:rgba(255,255,255,.5);margin-top:6px;position:relative;z-index:1}
.kpi-icon{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:42px;opacity:.18;z-index:0}
.kpi-trend{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 8px;border-radius:999px;position:relative;z-index:1;margin-top:6px}
.kpi-trend.up    {background:rgba(52,211,153,.22);color:#6ee7b7}
.kpi-trend.down  {background:rgba(251,113,133,.22);color:#fda4af}
.kpi-trend.neutral{background:rgba(148,163,184,.18);color:#94a3b8}
/* KPI color variants */
.kc-blue   {background:linear-gradient(135deg,rgba(30,78,138,.85),rgba(59,130,246,.65));border:1px solid rgba(59,130,246,.28);box-shadow:0 8px 32px rgba(59,130,246,.28)}
.kc-indigo {background:linear-gradient(135deg,rgba(55,48,163,.85),rgba(124,58,237,.65));border:1px solid rgba(124,58,237,.3);box-shadow:0 8px 32px rgba(124,58,237,.28)}
.kc-emerald{background:linear-gradient(135deg,rgba(6,78,59,.85),rgba(16,185,129,.65));border:1px solid rgba(16,185,129,.28);box-shadow:0 8px 32px rgba(16,185,129,.25)}
.kc-amber  {background:linear-gradient(135deg,rgba(120,53,15,.85),rgba(245,158,11,.65));border:1px solid rgba(245,158,11,.28);box-shadow:0 8px 32px rgba(245,158,11,.22)}
.kc-rose   {background:linear-gradient(135deg,rgba(157,23,77,.85),rgba(244,63,94,.65));border:1px solid rgba(244,63,94,.28);box-shadow:0 8px 32px rgba(244,63,94,.25)}
.kc-purple {background:linear-gradient(135deg,rgba(91,33,182,.85),rgba(167,139,250,.6));border:1px solid rgba(167,139,250,.28);box-shadow:0 8px 32px rgba(139,92,246,.28)}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-blue   {background:rgba(96,165,250,.14);color:#93c5fd;border:1px solid rgba(96,165,250,.22)}
.badge-emerald{background:rgba(52,211,153,.14);color:#6ee7b7;border:1px solid rgba(52,211,153,.22)}
.badge-amber  {background:rgba(251,191,36,.14); color:#fcd34d;border:1px solid rgba(251,191,36,.22)}
.badge-rose   {background:rgba(251,113,133,.14);color:#fda4af;border:1px solid rgba(251,113,133,.22)}
.badge-slate  {background:rgba(148,163,184,.11);color:#94a3b8;border:1px solid rgba(148,163,184,.18)}
.badge-purple {background:rgba(167,139,250,.14);color:#c4b5fd;border:1px solid rgba(167,139,250,.22)}
.badge-indigo {background:rgba(129,140,248,.14);color:#a5b4fc;border:1px solid rgba(129,140,248,.22)}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:var(--radius-sm);
  font-family:'Prompt',sans-serif;font-size:13px;font-weight:600;
  border:none;cursor:pointer;transition:all .22s;text-decoration:none;
}
.btn-primary  {background:var(--grad-primary); color:#fff;box-shadow:0 4px 18px rgba(124,58,237,.42)}
.btn-success  {background:var(--grad-emerald);  color:#fff;box-shadow:0 4px 14px rgba(16,185,129,.32)}
.btn-warning  {background:var(--grad-amber);    color:#fff;box-shadow:0 4px 14px rgba(245,158,11,.32)}
.btn-danger   {background:var(--grad-rose);     color:#fff;box-shadow:0 4px 14px rgba(244,63,94,.32)}
.btn-secondary{background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border-color)}
.btn-sm       {padding:6px 12px;font-size:12px;border-radius:8px}
.btn-lg       {padding:12px 24px;font-size:15px;border-radius:14px}
.btn:hover    {transform:translateY(-1px);filter:brightness(1.12)}
.btn-secondary:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:rgba(124,58,237,.25)}

/* ── Form Controls ── */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group.full{grid-column:1/-1}
.form-label{font-size:12px;font-weight:600;color:var(--text-secondary);display:flex;align-items:center;gap:6px}
.form-label .req{color:var(--accent-rose)}
.form-control{
  background:var(--input-bg);border:1px solid var(--input-border);
  border-radius:var(--radius-sm);padding:10px 14px;
  color:var(--text-primary);font-family:'Prompt',sans-serif;font-size:13.5px;
  transition:all .2s;outline:none;width:100%;
}
.form-control:focus{
  border-color:rgba(124,58,237,.6);
  box-shadow:0 0 0 3px rgba(124,58,237,.18);
  background:rgba(124,58,237,.06);
}
.form-control::placeholder{color:var(--text-muted)}
.form-control[readonly]{background:rgba(16,185,129,.05);border-color:rgba(16,185,129,.2);cursor:default}

/* ── Native select: fallback styling (before JS runs) ── */
select.form-control{
  cursor:pointer;
  background-color:#0e1530;color:#eef2ff;color-scheme:dark;
}
select.form-control option{background-color:#0e1530;color:#eef2ff}
select.form-control option[value=""]{color:#4a5280}
[data-theme="light"] select.form-control{background-color:#fff;color:#1e1b4b;color-scheme:light}
[data-theme="light"] select.form-control option{background-color:#fff;color:#1e1b4b}

/* ── Native select: hidden by JS via display:none (set inline) ── */
/* display:none completely removes UA min-height; value still submits */

/* ── Custom Select (csel) — full glassmorphism ── */
.csel{position:relative;width:100%}
.csel-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:#0e1530;border:1px solid var(--input-border);
  border-radius:var(--radius-sm);padding:10px 14px;
  color:#eef2ff;font-family:'Prompt',sans-serif;font-size:13.5px;
  cursor:pointer;transition:border-color .18s,box-shadow .18s,background .18s;
  user-select:none;
}
.csel-trigger:hover{
  border-color:rgba(124,58,237,.45);
  background:rgba(124,58,237,.06);
}
.csel-trigger.open{
  border-color:rgba(124,58,237,.6);
  box-shadow:0 0 0 3px rgba(124,58,237,.18);
  background:rgba(124,58,237,.08);
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.csel-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csel-val.placeholder{color:#4a5280}
.csel-arrow{
  flex-shrink:0;font-size:11px;color:#4a5280;
  transition:transform .18s;line-height:1;
}
.csel-trigger.open .csel-arrow{transform:rotate(180deg);color:#a78bfa}
.csel-trigger.csel-error{border-color:rgba(251,113,133,.7)!important;box-shadow:0 0 0 3px rgba(251,113,133,.2)!important;animation:csel-shake .35s ease}
[data-theme="light"] .csel-trigger.csel-error{border-color:rgba(220,38,38,.6)!important;box-shadow:0 0 0 3px rgba(220,38,38,.15)!important}
.csel-err-msg{color:#f87171;font-size:12px;margin-top:4px;display:flex;align-items:center;gap:4px}
@keyframes csel-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
/* Dropdown panel — Portal: appended to <body>, position:fixed escapes all stacking contexts */
.csel-drop{
  display:none;position:fixed;
  /* left/top/width set dynamically by JS via getBoundingClientRect() */
  z-index:9000;
  background:rgba(10,15,40,0.97);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(124,58,237,.35);
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 1px rgba(124,58,237,.08);
  max-height:220px;overflow-y:auto;
}
.csel-drop.open{display:block}
/* Belt-and-suspenders: native select inside .csel is always hidden */
.csel > select{display:none !important}
/* Scrollbar inside dropdown */
.csel-drop::-webkit-scrollbar{width:4px}
.csel-drop::-webkit-scrollbar-thumb{background:rgba(124,58,237,.3);border-radius:4px}
/* Option items */
.csel-opt{
  padding:10px 14px;
  font-family:'Prompt',sans-serif;font-size:13.5px;
  color:#eef2ff;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .12s,color .12s;
}
.csel-opt:last-child{border-bottom:none}
.csel-opt:hover{background:rgba(124,58,237,.22);color:#c4b5fd}
.csel-opt.selected{background:rgba(124,58,237,.16);color:#c4b5fd}
.csel-opt.placeholder{color:#4a5280}
.csel-opt.placeholder:hover{background:rgba(255,255,255,.04);color:#64748b}
.csel-opt.disabled{color:#2d3a5a;cursor:default;pointer-events:none}

/* ── Light mode overrides ── */
[data-theme="light"] .csel-trigger{background:#ffffff;color:#1e1b4b;border-color:rgba(99,102,241,.22)}
[data-theme="light"] .csel-trigger:hover{border-color:rgba(99,102,241,.45);background:rgba(99,102,241,.04)}
[data-theme="light"] .csel-trigger.open{border-color:rgba(99,102,241,.6);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
[data-theme="light"] .csel-val.placeholder{color:#94a3b8}
[data-theme="light"] .csel-drop{background:rgba(255,255,255,.98);border-color:rgba(99,102,241,.3);box-shadow:0 12px 40px rgba(99,102,241,.18)}
[data-theme="light"] .csel-opt{color:#1e1b4b;border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .csel-opt:hover{background:rgba(99,102,241,.1);color:#4f46e5}
[data-theme="light"] .csel-opt.selected{background:rgba(99,102,241,.12);color:#4f46e5}
[data-theme="light"] .csel-opt.placeholder{color:#94a3b8}
[data-theme="light"] .csel-opt.placeholder:hover{color:#818cf8;background:rgba(99,102,241,.05)}
textarea.form-control{resize:vertical;min-height:80px}
.form-hint{font-size:11px;color:var(--text-muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

/* ── File Drop ── */
.file-drop{
  border:2px dashed var(--input-border);border-radius:var(--radius-sm);
  padding:24px;text-align:center;cursor:pointer;
  transition:all .2s;background:var(--input-bg);
}
.file-drop:hover,.file-drop.dragover{
  border-color:rgba(124,58,237,.5);
  background:rgba(124,58,237,.06);
}

/* ── Data Table ── */
.data-table{width:100%;border-collapse:collapse}
.data-table thead th{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);padding:10px 14px;text-align:left;
  border-bottom:1px solid var(--border-color);white-space:nowrap;
}
.data-table tbody tr{border-bottom:1px solid rgba(255,255,255,.035);transition:background .15s}
.data-table tbody tr:last-child{border-bottom:none}
.data-table tbody tr:hover{background:rgba(124,58,237,.06)}
.data-table tbody td{padding:11px 14px;font-size:13px}
.data-table.striped tbody tr:nth-child(even){background:rgba(255,255,255,.018)}

/* ── FIFO Row highlight ── */
.fifo-active {background:linear-gradient(90deg,rgba(79,70,229,.14),rgba(124,58,237,.07))!important;border-left:3px solid #7c3aed!important}
.fifo-next   {background:linear-gradient(90deg,rgba(16,185,129,.07),transparent)!important;border-left:3px solid #10b981!important}
.fifo-done   {opacity:.42}

/* ── Progress bar ── */
.progress-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.progress-fill{height:100%;border-radius:6px;transition:width .5s}
.progress-fill.blue   {background:linear-gradient(90deg,#1d4ed8,#3b82f6)}
.progress-fill.emerald{background:linear-gradient(90deg,#065f46,#10b981)}
.progress-fill.amber  {background:linear-gradient(90deg,#92400e,#f59e0b)}
.progress-fill.rose   {background:linear-gradient(90deg,#9d174d,#f43f5e)}
.progress-fill.purple {background:linear-gradient(90deg,#5b21b6,#8b5cf6)}

/* ── Alert / Info boxes ── */
.alert{padding:12px 16px;border-radius:var(--radius-sm);font-size:13px;display:flex;align-items:flex-start;gap:10px}
.alert-info   {background:rgba(96,165,250,.1); border:1px solid rgba(96,165,250,.2); color:#93c5fd}
.alert-success{background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.2); color:#6ee7b7}
.alert-warning{background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.2); color:#fcd34d}
.alert-danger {background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.2);color:#fda4af}

/* ── Notification dropdown ── */
.notif-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  width:340px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-color);border-radius:var(--radius);
  box-shadow:var(--shadow-glass);display:none;z-index:200;
  max-height:420px;overflow-y:auto;
}
.notif-dropdown.open{display:block}
.notif-item{
  display:flex;gap:10px;padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.045);
  transition:background .15s;cursor:pointer;
}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:rgba(124,58,237,.08)}
.notif-item.unread{background:rgba(79,70,229,.09)}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-purple);flex-shrink:0;margin-top:5px;box-shadow:0 0 6px rgba(167,139,250,.6)}

/* ── Pagination ── */
.pagination{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.page-btn{
  min-width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;
  justify-content:center;font-size:13px;background:var(--bg-card);
  border:1px solid var(--border-color);color:var(--text-secondary);transition:all .2s;
}
.page-btn:hover{background:rgba(124,58,237,.14);color:var(--text-primary);border-color:rgba(124,58,237,.3)}
.page-btn.active{background:var(--grad-primary);color:#fff;border-color:transparent;box-shadow:0 3px 12px rgba(124,58,237,.35)}
.page-info{font-size:12px;color:var(--text-muted);margin-left:8px}

/* ── Modal ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);
  z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{
  background:var(--bg-secondary);border:1px solid var(--border-color);
  border-radius:var(--radius);box-shadow:0 28px 70px rgba(0,0,0,.55);
  width:100%;max-width:560px;max-height:90vh;overflow-y:auto;
  transform:scale(.94);transition:transform .26s cubic-bezier(.34,1.3,.64,1);
}
.modal-overlay.open .modal{transform:scale(1)}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--border-color);
}
.modal-title{font-size:15px;font-weight:700}
.modal-close{width:30px;height:30px;border-radius:7px;background:transparent;border:none;color:var(--text-muted);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.modal-close:hover{background:rgba(251,113,133,.15);color:var(--accent-rose)}
.modal-body{padding:20px 22px}
.modal-footer{padding:14px 22px;border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:10px}

/* ── Toast ── */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:99999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{
  background:#1e1b4b;backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-color);border-radius:14px;
  padding:14px 18px;display:flex;align-items:center;gap:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.45);font-size:13px;font-weight:600;
  max-width:340px;min-width:260px;pointer-events:auto;
  transform:translateX(calc(100% + 32px));transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.toast.show{transform:translateX(0)}
.toast.success{background:#052e16;border-color:rgba(52,211,153,.5);color:#6ee7b7}
.toast.error  {background:#450a0a;border-color:rgba(251,113,133,.5);color:#fda4af}
.toast.warning{background:#422006;border-color:rgba(251,191,36,.5); color:#fcd34d}
.toast.info   {background:#1e1b4b;border-color:rgba(167,139,250,.5);color:#c4b5fd}
[data-theme="light"] .toast{background:#fff;box-shadow:0 8px 32px rgba(0,0,0,.18)}
[data-theme="light"] .toast.success{background:#f0fdf4;border-color:rgba(22,163,74,.5);color:#15803d}
[data-theme="light"] .toast.error  {background:#fff1f2;border-color:rgba(220,38,38,.5);color:#dc2626}
[data-theme="light"] .toast.warning{background:#fffbeb;border-color:rgba(217,119,6,.5);color:#b45309}
[data-theme="light"] .toast.info   {background:#eff6ff;border-color:rgba(59,130,246,.5);color:#1d4ed8}

/* ── Search bar ── */
.search-bar{
  display:flex;align-items:center;gap:8px;
  background:var(--input-bg);border:1px solid var(--input-border);
  border-radius:var(--radius-sm);padding:8px 14px;
  transition:all .2s;
}
.search-bar:focus-within{
  border-color:rgba(124,58,237,.5);
  box-shadow:0 0 0 3px rgba(124,58,237,.15);
}
.search-bar input{background:transparent;border:none;outline:none;color:var(--text-primary);font-family:'Prompt',sans-serif;font-size:13px;flex:1}
.search-bar input::placeholder{color:var(--text-muted)}

/* ── Overlay for mobile sidebar ── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99;backdrop-filter:blur(4px)}
.sidebar-overlay.show{display:block}

/* ── Responsive ── */
@media(max-width:1200px){
  .kpi-grid-4{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:960px){
  .sidebar{transform:translateX(-100%);width:var(--sidebar-w)!important}
  .sidebar.mobile-open{transform:translateX(0)}
  .main-wrap{margin-left:0!important}
  .form-grid,.form-grid-3{grid-template-columns:1fr}
  .chart-row-2,.table-row-2{grid-template-columns:1fr!important}
}
@media(max-width:540px){
  .kpi-grid-4{grid-template-columns:1fr!important}
  .page-content{padding:16px}
  .topbar{padding:0 16px;gap:10px}
}

/* ── Flatpickr date picker — dark theme override ── */
.flatpickr-calendar {
  background: rgba(10,15,40,0.97) !important;
  backdrop-filter: blur(28px);
  border: 1px solid rgba(124,58,237,.35) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.6) !important;
  font-family: 'Prompt', sans-serif !important;
  color: #eef2ff !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year {
  color: #eef2ff !important;
  fill: #eef2ff !important;
  background: transparent !important;
  font-family: 'Prompt', sans-serif !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #a78bfa !important;
  fill: #a78bfa !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #c4b5fd !important;
  fill: #c4b5fd !important;
}
.flatpickr-weekdays, span.flatpickr-weekday {
  background: transparent !important;
  color: #4a5280 !important;
  font-family: 'Prompt', sans-serif !important;
}
.flatpickr-day {
  color: #eef2ff !important;
  border-radius: 8px !important;
  font-family: 'Prompt', sans-serif !important;
}
.flatpickr-day:hover {
  background: rgba(124,58,237,.22) !important;
  border-color: transparent !important;
  color: #c4b5fd !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--grad-primary) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(124,58,237,.45) !important;
}
.flatpickr-day.today {
  border-color: rgba(124,58,237,.5) !important;
  color: #a78bfa !important;
}
.flatpickr-day.today:hover {
  background: rgba(124,58,237,.22) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #2d3a5a !important;
}
/* Light mode */
[data-theme="light"] .flatpickr-calendar {
  background: rgba(255,255,255,.98) !important;
  border-color: rgba(99,102,241,.3) !important;
  box-shadow: 0 12px 40px rgba(99,102,241,.18) !important;
  color: #1e1b4b !important;
}
[data-theme="light"] .flatpickr-months .flatpickr-month,
[data-theme="light"] .flatpickr-current-month,
[data-theme="light"] .flatpickr-current-month .cur-month,
[data-theme="light"] .flatpickr-current-month input.cur-year {
  color: #1e1b4b !important;
  fill: #1e1b4b !important;
}
[data-theme="light"] .flatpickr-day { color: #1e1b4b !important; }
[data-theme="light"] .flatpickr-day:hover { background: rgba(99,102,241,.1) !important; color: #4f46e5 !important; }
[data-theme="light"] .flatpickr-day.today { border-color: rgba(99,102,241,.5) !important; color: #4f46e5 !important; }
[data-theme="light"] span.flatpickr-weekday { color: #818cf8 !important; }