/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --pri:#7C3AED; --pri2:#6D28D9; --pri-soft:rgba(124,58,237,.09);
  --pri-shadow:rgba(124,58,237,.35); --pri-focus:rgba(124,58,237,.14);
  --pri-gradient:linear-gradient(135deg,#7C3AED,#9333ea);
  --sec:#3B82F6; --sec-soft:rgba(59,130,246,.09);
  --green:#059669; --green-soft:rgba(5,150,105,.09);
  --red:#EF4444;   --red-soft:rgba(239,68,68,.09);
  --amber:#D97706; --amber-soft:rgba(217,119,6,.09);
  --bg:#F0F2F6; --bg2:#F8FAFC;
  --card:#FFFFFF; --card2:#F4F6FF;
  --border:#E2E8F0; --border2:#CBD5E1;
  --text:#0F172A; --sub:#334155; --muted:#64748B; --muted2:#94A3B8;
  --r-xs:5px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:18px; --r-2xl:22px;
  --sh-xs:0 1px 3px rgba(15,23,42,.06);
  --sh-sm:0 2px 8px rgba(15,23,42,.08);
  --sh-md:0 4px 16px rgba(15,23,42,.11);
  --sh-lg:0 8px 32px rgba(15,23,42,.15);
  --t:all .16s cubic-bezier(.4,0,.2,1);
  --sidebar-w:256px;
  /* Touch-friendly tap target */
  --tap:44px;
}

/* ── THEME OVERRIDES ────────────────────────────────────────── */
[data-color="purple"]{
  --pri:#7C3AED;--pri2:#6D28D9;--pri-soft:rgba(124,58,237,.09);
  --pri-shadow:rgba(124,58,237,.35);--pri-focus:rgba(124,58,237,.14);
  --pri-gradient:linear-gradient(135deg,#7C3AED,#9333ea);
}
[data-color="blue"]{
  --pri:#2563EB;--pri2:#1D4ED8;--pri-soft:rgba(37,99,235,.09);
  --pri-shadow:rgba(37,99,235,.35);--pri-focus:rgba(37,99,235,.14);
  --pri-gradient:linear-gradient(135deg,#2563EB,#60A5FA);
}
[data-color="emerald"]{
  --pri:#059669;--pri2:#047857;--pri-soft:rgba(5,150,105,.09);
  --pri-shadow:rgba(5,150,105,.35);--pri-focus:rgba(5,150,105,.14);
  --pri-gradient:linear-gradient(135deg,#059669,#34D399);
}

/* ── DARK MODE ──────────────────────────────────────────────── */
[data-theme="dark"]{
  --bg:#0F172A;--bg2:#111827;--card:#1E293B;--card2:#243048;
  --border:#2D3748;--border2:#374151;
  --text:#F1F5F9;--sub:#CBD5E1;--muted:#94A3B8;--muted2:#64748B;
  --sh-xs:0 1px 2px rgba(0,0,0,.35);--sh-sm:0 2px 8px rgba(0,0,0,.45);
  --sh-md:0 4px 16px rgba(0,0,0,.55);--sh-lg:0 8px 32px rgba(0,0,0,.65);
  --pri-soft:rgba(124,58,237,.16);--sec-soft:rgba(59,130,246,.16);
  --green-soft:rgba(5,150,105,.16);--red-soft:rgba(239,68,68,.16);
  --amber-soft:rgba(217,119,6,.16);
}
[data-theme="dark"][data-color="blue"]   {--pri-soft:rgba(37,99,235,.16)}
[data-theme="dark"][data-color="emerald"]{--pri-soft:rgba(5,150,105,.16)}

/* ── RESET ──────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body,#root{height:100%;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:14px;line-height:1.6;color:var(--text);background:var(--bg);
  -webkit-text-size-adjust:100%;overflow-x:hidden;
}
@media(min-width:640px){body{font-size:15px}}

/* ── APP LAYOUT ─────────────────────────────────────────────── */
.app{display:flex;height:100dvh;overflow:hidden;background:var(--bg)}

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sidebar{
  position:fixed;inset-y:0;left:0;z-index:40;
  width:var(--sidebar-w);max-width:82vw;
  background:var(--card);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateX(-100%);
  transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s;
}
.sidebar.open{transform:translateX(0);box-shadow:var(--sh-lg)}
@media(min-width:1024px){.sidebar{transform:translateX(0)!important;box-shadow:none}}
.sidebar-logo{
  display:flex;align-items:center;gap:11px;
  padding:0 14px;height:54px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.logo-ic{
  width:34px;height:34px;border-radius:var(--r-md);flex-shrink:0;
  background:var(--pri-gradient);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.logo-name{font-weight:800;font-size:13.5px;color:var(--text);line-height:1.2;letter-spacing:-.02em}
.logo-sub{font-size:10.5px;color:var(--muted)}
.close-btn{
  margin-left:auto;min-width:var(--tap);min-height:var(--tap);border-radius:var(--r-sm);
  border:none;background:none;cursor:pointer;color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:18px;transition:var(--t);
}
.close-btn:hover{background:var(--bg);color:var(--text)}
@media(min-width:1024px){.close-btn{display:none}}

/* NAV */
.nav{
  flex:1;padding:6px;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
}
.nav::-webkit-scrollbar{width:3px}
.nav::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.nav-section{font-size:10px;font-weight:700;color:var(--muted2);
  text-transform:uppercase;letter-spacing:.08em;padding:10px 12px 4px;margin-top:2px}
.ni{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:var(--r-md);
  font-size:13px;font-weight:500;color:var(--muted);
  cursor:pointer;transition:var(--t);
  border:none;background:none;width:100%;text-align:left;
  margin-bottom:1px;position:relative;
  min-height:var(--tap);
}
.ni:hover{background:var(--pri-soft);color:var(--pri)}
.ni.active{background:var(--pri-soft);color:var(--pri);font-weight:700}
.ni.active::before{
  content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;background:var(--pri);border-radius:0 3px 3px 0;
}
.ni-icon{width:20px;text-align:center;font-size:14px;flex-shrink:0}
.ni-badge{
  margin-left:auto;background:var(--bg2);color:var(--muted);
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:20px;
}
.ni.active .ni-badge{background:var(--pri);color:#fff}

/* User area */
.sidebar-user{padding:8px;border-top:1px solid var(--border);flex-shrink:0}
.user-row{
  display:flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:var(--r-md);margin-bottom:6px;
  cursor:pointer;transition:var(--t);
}
.user-row:hover{background:var(--bg2)}
.uav{
  width:32px;height:32px;border-radius:var(--r-sm);flex-shrink:0;
  background:var(--pri-gradient);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
}
.user-name{font-size:12.5px;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:10.5px;color:var(--muted)}
.logout-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px;border-radius:var(--r-md);min-height:38px;
  font-size:12.5px;font-weight:600;color:var(--muted);
  background:none;border:1.5px solid var(--border);cursor:pointer;transition:var(--t);
}
.logout-btn:hover{background:var(--red-soft);color:var(--red);border-color:var(--red)}

/* Backdrop */
.backdrop{position:fixed;inset:0;z-index:30;background:rgba(15,23,42,.5);
  backdrop-filter:blur(4px);display:none}
.backdrop.show{display:block}
@media(min-width:1024px){.backdrop{display:none!important}}

/* ── MAIN ───────────────────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;max-width:100vw}
@media(min-width:1024px){.main{margin-left:var(--sidebar-w)}}

/* ── TOPBAR ─────────────────────────────────────────────────── */
.topbar{
  height:54px;background:var(--card);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;padding:0 12px;flex-shrink:0;
  position:sticky;top:0;z-index:20;box-shadow:var(--sh-xs);
}
@media(min-width:640px){.topbar{height:56px;padding:0 18px}}
.hamburger{
  min-width:var(--tap);min-height:var(--tap);border-radius:var(--r-sm);
  border:none;background:none;cursor:pointer;
  color:var(--muted);display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;transition:var(--t);margin:-4px;
}
.hamburger:hover{background:var(--bg);color:var(--text)}
@media(min-width:1024px){.hamburger{display:none}}
.topbar-title{
  font-size:15px;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;
  letter-spacing:-.03em;
}
@media(min-width:640px){.topbar-title{font-size:16px}}
.topbar-badge{
  padding:4px 9px;background:var(--bg2);border-radius:var(--r-md);
  font-size:11px;color:var(--muted);border:1px solid var(--border);
  white-space:nowrap;flex-shrink:0;font-weight:600;display:none;
}
@media(min-width:640px){.topbar-badge{display:inline-flex;align-items:center}}
.theme-toggle{
  min-width:var(--tap);min-height:var(--tap);border-radius:var(--r-sm);
  border:1.5px solid var(--border);background:var(--card);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:15px;transition:var(--t);flex-shrink:0;color:var(--text);
}
.theme-toggle:hover{background:var(--bg)}

/* ── CONTENT ────────────────────────────────────────────────── */
.content{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:12px;-webkit-overflow-scrolling:touch;
}
@media(min-width:640px){.content{padding:18px 20px}}
@media(min-width:1280px){.content{padding:22px 28px;max-width:1400px;margin:0 auto;width:100%}}
.content::-webkit-scrollbar{width:4px}
.content::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
.space-y>*+*{margin-top:10px}
@media(min-width:640px){.space-y>*+*{margin-top:14px}}

/* ── CARD ───────────────────────────────────────────────────── */
.card{
  background:var(--card);border-radius:var(--r-xl);
  border:1px solid var(--border);box-shadow:var(--sh-xs);transition:var(--t);
}
@media(max-width:639px){.card{border-radius:var(--r-lg)}}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-pri{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:0 14px;height:38px;border-radius:var(--r-md);
  background:var(--pri);color:#fff;
  font-size:13px;font-weight:600;border:none;cursor:pointer;
  transition:var(--t);white-space:nowrap;flex-shrink:0;min-height:var(--tap);
}
.btn-pri:hover{background:var(--pri2);box-shadow:0 4px 14px var(--pri-shadow)}
.btn-pri:active{transform:scale(.97);box-shadow:none}
.btn-pri:disabled{opacity:.45;pointer-events:none}
/* Mobile: full height tap area */
@media(max-width:639px){.btn-pri{height:42px;font-size:14px}}

.btn-sec{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:0 14px;height:38px;border-radius:var(--r-md);
  background:var(--card);color:var(--sub);
  font-size:13px;font-weight:600;
  border:1.5px solid var(--border);cursor:pointer;
  transition:var(--t);white-space:nowrap;flex-shrink:0;min-height:var(--tap);
}
.btn-sec:hover{background:var(--bg2);border-color:var(--border2)}
@media(max-width:639px){.btn-sec{height:42px;font-size:14px}}

.ibt{
  min-width:var(--tap);min-height:var(--tap);border-radius:var(--r-sm);
  border:none;background:none;cursor:pointer;
  color:var(--muted);display:inline-flex;align-items:center;justify-content:center;
  transition:var(--t);font-size:15px;flex-shrink:0;
}
.ibt:hover{background:var(--pri-soft);color:var(--pri)}
.ibt.del:hover{background:var(--red-soft);color:var(--red)}

/* ── BADGES ─────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 8px;border-radius:20px;
  font-size:11px;font-weight:700;white-space:nowrap;
}
.bg-green{background:var(--green-soft);color:#065f46}
.bg-amber{background:var(--amber-soft);color:#92400e}
.bg-blue{background:var(--sec-soft);color:#1d4ed8}
.bg-red{background:var(--red-soft);color:#991b1b}
.bg-gray{background:var(--bg2);color:var(--muted)}
.bg-purple{background:var(--pri-soft);color:var(--pri)}
.bg-cyan{background:rgba(6,182,212,.1);color:#0e7490}
.bg-orange{background:rgba(249,115,22,.1);color:#9a3412}
[data-theme="dark"] .bg-green{color:#6ee7b7}
[data-theme="dark"] .bg-amber{color:#fcd34d}
[data-theme="dark"] .bg-blue{color:#93c5fd}
[data-theme="dark"] .bg-red{color:#fca5a5}
[data-theme="dark"] .bg-purple{color:var(--pri)}
[data-theme="dark"] .bg-cyan{color:#67e8f9}
[data-theme="dark"] .bg-orange{color:#fdba74}

/* ── FORM ───────────────────────────────────────────────────── */
.fl{margin-bottom:12px}
.fl-lbl{display:block;font-size:12px;font-weight:700;color:var(--muted);
  margin-bottom:4px;letter-spacing:.01em;text-transform:none}
input,select,textarea{
  width:100%;padding:9px 12px;border-radius:var(--r-md);
  border:1.5px solid var(--border);background:var(--card);color:var(--text);
  font-size:14px;font-weight:500;font-family:inherit;outline:none;transition:var(--t);
  /* iOS fix */
  -webkit-appearance:none;appearance:none;
  min-height:var(--tap);
}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
textarea{min-height:auto}
input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-focus)}
input:disabled,select:disabled{opacity:.5;background:var(--bg2);cursor:default}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
  background:var(--card2);border-color:var(--border2);color-scheme:dark;
}
@media(max-width:639px){input,select,textarea{font-size:16px}} /* prevent iOS zoom */

/* ── MODAL ──────────────────────────────────────────────────── */
.ov{
  position:fixed;inset:0;z-index:50;
  background:rgba(15,23,42,.6);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fadeIn .15s ease;overflow-y:auto;
}
@media(min-width:640px){.ov{align-items:flex-start;padding:24px 16px}}
.mb{
  background:var(--card);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  border:1px solid var(--border);
  width:100%;max-width:100%;
  max-height:94dvh;
  display:flex;flex-direction:column;
  animation:slideUp .22s cubic-bezier(.4,0,.2,1);
}
@media(min-width:640px){
  .mb{border-radius:var(--r-2xl);max-width:580px;margin:auto;
      box-shadow:var(--sh-lg);max-height:90dvh}
  .mb.wide{max-width:820px}
}
.mh{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.mh h3{font-size:15px;font-weight:700;color:var(--text)}
/* Drag handle on mobile */
.mb::before{
  content:'';display:block;width:40px;height:4px;border-radius:2px;
  background:var(--border2);margin:10px auto -4px;flex-shrink:0;
}
@media(min-width:640px){.mb::before{display:none}}
.mbody{padding:16px 18px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.mfooter{
  display:flex;justify-content:flex-end;gap:8px;
  margin-top:14px;padding-top:12px;
  border-top:1px solid var(--border);
  position:sticky;bottom:0;background:var(--card);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ── GRIDS ──────────────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
@media(max-width:479px){
  .g2{gap:8px}
  .g3{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:1fr 1fr}
  .g5{grid-template-columns:1fr 1fr}
}
@media(min-width:480px) and (max-width:639px){
  .g3{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:1fr 1fr}
  .g5{grid-template-columns:1fr 1fr 1fr}
}
.cs2{grid-column:span 2}
@media(max-width:479px){.cs2{grid-column:span 1}}

/* ── KPI STAT CARD ──────────────────────────────────────────── */
.sc{
  background:var(--card);border-radius:var(--r-xl);
  border:1px solid var(--border);
  padding:13px 12px;
  display:flex;align-items:flex-start;gap:10px;
  box-shadow:var(--sh-xs);transition:var(--t);
  cursor:pointer;
}
.sc:hover{box-shadow:var(--sh-sm);transform:translateY(-1px)}
.sc:active{transform:scale(.98)}
.sc-ic{
  width:40px;height:40px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.sc-lbl{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.01em;line-height:1.3}
@media(max-width:399px){.sc-lbl{font-size:10px}}
.sc-val{font-size:16px;font-weight:800;color:var(--text);line-height:1.2;margin-top:2px;letter-spacing:-.02em}
@media(min-width:640px){.sc-val{font-size:20px}}
@media(max-width:399px){.sc-val{font-size:14px}}
.sc-trend{font-size:11px;margin-top:3px;font-weight:600}
@media(max-width:639px){
  .sc{padding:10px 9px;gap:7px}
  .sc-ic{width:34px;height:34px;font-size:16px;border-radius:10px}
  .sc-lbl{font-size:10px}
}
@media(max-width:360px){
  .sc{padding:8px 7px;gap:5px}
  .sc-ic{width:28px;height:28px;font-size:14px}
}

/* ── FILTER ROW ─────────────────────────────────────────────── */
.fr{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.fr select{width:auto;min-height:38px;padding:0 28px 0 10px;font-size:13px}
@media(max-width:639px){
  .fr{gap:6px}
  .fr select{font-size:14px;min-height:42px}
}
.sw{position:relative;flex:1;min-width:130px}
.sw input{padding-left:32px;min-height:38px}
@media(max-width:639px){.sw input{min-height:42px;font-size:16px}}
.si{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;font-size:14px}

/* ── TABLE ──────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{
  text-align:left;padding:9px 12px;
  font-size:10.5px;font-weight:700;color:var(--muted);
  background:var(--bg2);border-bottom:1.5px solid var(--border);
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
  position:sticky;top:0;z-index:1;
}
.tbl td{
  padding:10px 12px;border-bottom:1px solid var(--border);
  vertical-align:middle;font-size:13px;font-weight:500;
}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--pri-soft)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  /* Show horizontal scroll hint on mobile */
  scroll-snap-type:none;
}
[data-theme="dark"] .tbl th{background:var(--card2)}

/* Desktop only / mobile only */
.desk-only{display:none}
@media(min-width:640px){.desk-only{display:block}.mob-only{display:none}}

/* ── MOBILE CARD ────────────────────────────────────────────── */
.mob-card{
  border-radius:var(--r-xl);border:1px solid var(--border);
  background:var(--card);padding:12px 14px;margin-bottom:8px;
  box-shadow:var(--sh-xs);
}
.mob-card:active{background:var(--bg2)}
.mob-card-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mob-actions{display:flex;align-items:center;gap:4px}
/* Touch-friendly action buttons in cards */
.mob-actions .ibt{min-width:40px;min-height:40px}

/* ── TABS ───────────────────────────────────────────────────── */
.tabs{
  display:flex;border-bottom:1.5px solid var(--border);
  margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:9px 13px;font-size:13px;font-weight:600;
  color:var(--muted);border-bottom:2.5px solid transparent;
  cursor:pointer;border-top:none;border-left:none;border-right:none;
  background:none;margin-bottom:-1.5px;transition:var(--t);
  white-space:nowrap;flex-shrink:0;min-height:40px;
}
.tab:hover{color:var(--sub)}
.tab.active{color:var(--pri);border-bottom-color:var(--pri)}
@media(max-width:639px){.tab{padding:8px 10px;font-size:12.5px}}

/* ── PERIOD FILTER PILLS ────────────────────────────────────── */
.pf{display:flex;gap:5px;flex-wrap:wrap}
.pfb{
  padding:6px 10px;border-radius:var(--r-md);
  font-size:12px;font-weight:600;cursor:pointer;
  background:var(--bg2);color:var(--muted);
  border:1px solid var(--border);transition:var(--t);white-space:nowrap;
  min-height:34px;display:inline-flex;align-items:center;
}
.pfb.active{background:var(--pri);color:#fff;border-color:var(--pri)}
.pfb:hover:not(.active){background:var(--pri-soft);color:var(--pri);border-color:var(--pri)}
@media(max-width:639px){
  .pfb{font-size:11.5px;padding:5px 8px;min-height:32px;}
  /* Hide scrollbar on pill row */
  .pf::-webkit-scrollbar{display:none}
  .pf{-ms-overflow-style:none;scrollbar-width:none}
}

/* ── TOAST ──────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:200;background:var(--text);color:var(--card);
  font-size:13px;font-weight:500;padding:10px 18px;border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);pointer-events:none;
  opacity:0;transition:opacity .2s;white-space:nowrap;max-width:90vw;
  overflow:hidden;text-overflow:ellipsis;
}
.toast.on{opacity:1}
@media(max-width:639px){.toast{bottom:auto;top:62px;font-size:12.5px}}

/* ── PAGINATION ─────────────────────────────────────────────── */
.pagrow{
  padding:9px 14px;font-size:12px;color:var(--muted);
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px;background:var(--bg2);
  border-radius:0 0 var(--r-xl) var(--r-xl);
}
.pg-btns{display:flex;align-items:center;gap:3px}
.pg-btn{
  min-width:32px;height:32px;padding:0 5px;border-radius:var(--r-sm);
  border:1.5px solid var(--border);background:var(--card);
  font-size:12px;cursor:pointer;color:var(--text);font-weight:600;
  display:flex;align-items:center;justify-content:center;transition:var(--t);
}
.pg-btn:hover:not(:disabled){border-color:var(--pri);color:var(--pri)}
.pg-btn.active{background:var(--pri);color:#fff;border-color:var(--pri)}
.pg-btn:disabled{opacity:.35;cursor:default}
/* Larger touch targets on mobile */
@media(max-width:639px){.pg-btn{min-width:36px;height:36px}}

/* ── LOG DOT ────────────────────────────────────────────────── */
.ldot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}

/* ── MISC ───────────────────────────────────────────────────── */
.cmsg{font-size:13.5px;color:var(--sub);line-height:1.65;margin-bottom:4px}
.t-red{color:var(--red)}.t-green{color:var(--green)}.t-muted{color:var(--muted)}.fw7{font-weight:700}

/* ── QUICK ACTIONS GRID ─────────────────────────────────────── */
.qa-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:420px){.qa-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.qa-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.qa-grid{grid-template-columns:repeat(5,1fr)}}
.qa-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:12px 8px;border-radius:var(--r-xl);
  background:var(--card);border:1px solid var(--border);
  cursor:pointer;transition:var(--t);box-shadow:var(--sh-xs);
  min-height:76px;justify-content:center;
}
.qa-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--pri-soft)}
.qa-btn:active{transform:scale(.97)}
.qa-icon{
  width:36px;height:36px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.qa-label{
  font-size:11px;font-weight:600;color:var(--sub);
  text-align:center;line-height:1.3;
  overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}

/* ── DATE PICKER ─────────────────────────────────────────────── */
.date-picker-wrap{display:block;width:100%}
.date-picker-wrap input[type="date"]{
  width:100%;min-height:var(--tap);padding:0 12px;
  border-radius:var(--r-md);border:1.5px solid var(--border);
  background:var(--card);color:var(--text);
  font-size:14px;font-family:inherit;font-weight:500;
  cursor:pointer;outline:none;transition:var(--t);
  -webkit-appearance:none;
}
.date-picker-wrap input[type="date"]:hover{border-color:var(--pri)}
.date-picker-wrap input[type="date"]:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-focus)}
[data-theme="dark"] .date-picker-wrap input[type="date"]{color-scheme:dark;background:var(--card2)}
@media(max-width:639px){.date-picker-wrap input[type="date"]{font-size:16px}}

/* ── CLICK CARD (Dashboard) ─────────────────────────────────── */
.click-card{
  background:var(--card);border-radius:var(--r-xl);border:1px solid var(--border);
  padding:14px;display:flex;align-items:center;gap:12px;
  cursor:pointer;transition:var(--t);box-shadow:var(--sh-xs);
  text-align:left;width:100%;
}
.click-card:hover{box-shadow:var(--sh-md);border-color:var(--pri-soft);transform:translateY(-1px)}
.click-card:active{transform:scale(.98)}

/* ── DRILL DOWN MODAL TABLE ─────────────────────────────────── */
.drill-tbl{width:100%;border-collapse:collapse;font-size:13px}
.drill-tbl th{padding:8px 10px;font-size:10px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;border-bottom:1.5px solid var(--border);
  background:var(--bg2);white-space:nowrap}
.drill-tbl td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.drill-tbl tr:last-child td{border-bottom:none}
.drill-tbl tr:hover td{background:var(--pri-soft)}

/* ── NICE SCROLLBAR ─────────────────────────────────────────── */
@media(min-width:640px){
  *::-webkit-scrollbar{width:5px;height:5px}
  *::-webkit-scrollbar-track{background:transparent}
  *::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
  *::-webkit-scrollbar-thumb:hover{background:var(--muted2)}
}

/* ── RESPONSIVE HELPERS ─────────────────────────────────────── */
@media(max-width:639px){
  /* Tighter padding in cards on very small screens */
  .mob-card{padding:11px 12px}
  /* Smaller modal header */
  .mh{padding:12px 14px}
  .mh h3{font-size:14px}
  .mbody{padding:12px 14px}
  /* Smaller tabs */
  .tabs{margin-bottom:10px}
  /* Stack form footer buttons */
  .mfooter{gap:6px}
}

/* ── FOCUS VISIBLE ──────────────────────────────────────────── */
*:focus-visible{outline:2.5px solid var(--pri);outline-offset:2px;border-radius:var(--r-sm)}
button:focus:not(:focus-visible){outline:none}


/* ── CUSTOM CHECKBOX ────────────────────────────────────────── */
.cb-wrap{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex-shrink:0;cursor:pointer;
}
.cb-wrap input[type="checkbox"]{display:none}
.cb-box{
  width:20px;height:20px;border-radius:6px;
  border:2px solid var(--border2);background:var(--card);
  display:flex;align-items:center;justify-content:center;
  transition:var(--t);flex-shrink:0;
}
.cb-wrap:hover .cb-box{border-color:var(--pri)}
.cb-box.checked{background:var(--pri);border-color:var(--pri)}
.cb-box.checked::after{
  content:'';display:block;
  width:5px;height:9px;
  border:2px solid #fff;border-top:none;border-left:none;
  transform:rotate(45deg) translateY(-1px);
}
.cb-box.indeterminate{background:var(--pri);border-color:var(--pri)}
.cb-box.indeterminate::after{
  content:'';display:block;width:10px;height:2px;background:#fff;border-radius:1px;
}