/* Themes: Classic navy (default :root in erp.css), White, Black, Light blue; accent + background are user-customisable (see js/shell.js). */
:root{
  --sb-t:rgba(255,255,255,.72);--sb-t2:rgba(255,255,255,.78);--sb-strong:#fff;--sb-line:rgba(255,255,255,.08);--sb-hov:var(--sidebar2);--sb-act:rgba(124,151,255,.22);--sb-actb:#8FA7FF;
  --tbt:#fff;--tb-b:rgba(255,255,255,.14);--tb-b2:rgba(255,255,255,.26);--tb-bd:rgba(255,255,255,.28);--tb-line:transparent;
  --headtxt:var(--th);--thc:#fff;--thbd:rgba(255,255,255,.16);--onp:#fff;
}
/* ---- White ---- */
[data-theme=light]{
  --bg:#FFFFFF;--bg2:#F5F6F8;--surface:#FFFFFF;--border:#E3E6EB;--border2:#CDD2DA;--text:#0F1419;--text2:#4A5360;--text3:#6B7480;
  --p:#1D4ED8;--p2:color-mix(in srgb,var(--p) 86%,#fff);--p3:color-mix(in srgb,var(--p) 9%,#fff);
  --topbar:#FFFFFF;--sidebar:#FFFFFF;--sidebar2:#F2F4F7;--th:#F1F3F6;--shadow2:0 8px 24px rgba(15,20,25,.14);
  --sb-t:#3A4452;--sb-t2:#6B7480;--sb-strong:#0F1419;--sb-line:#EBEDF1;--sb-hov:#F2F4F7;--sb-act:var(--p3);--sb-actb:var(--p);
  --tbt:#0F1419;--tb-b:#F5F6F8;--tb-b2:#E9ECF1;--tb-bd:#D5D9E0;--tb-line:#E3E6EB;--headtxt:#0F1419;--thc:#1F2937;--thbd:#E3E6EB;
}
/* ---- Black ---- */
[data-theme=dark]{
  --bg:#0A0A0B;--bg2:#1A1A1D;--surface:#131315;--border:#2A2A2F;--border2:#3A3A41;--text:#F2F2F3;--text2:#B4B4BB;--text3:#8A8A93;
  --p:#4C7DFF;--p2:color-mix(in srgb,var(--p) 86%,#fff);--p3:color-mix(in srgb,var(--p) 18%,#131315);
  --topbar:#0A0A0B;--sidebar:#000000;--sidebar2:#1A1A1D;--th:#1D1D21;--shadow2:0 8px 24px rgba(0,0,0,.6);
  --green:#4DB380;--green2:#12261B;--red:#E5675F;--red2:#2C1716;--orange:#D9903E;--orange2:#2B1F0E;--blue:#6AA3DE;--blue2:#16263A;
  --purple:#9C86CF;--purple2:#231D36;--pink:#CC7D9B;--pink2:#2C1B24;--yellow:#D8AE4A;--yellow2:#2B230D;--teal:#58B3B1;--teal2:#112928;
  --sb-t:#A8A8B0;--sb-t2:#8A8A93;--sb-strong:#fff;--sb-line:#1C1C20;--sb-hov:#1A1A1D;--sb-act:var(--p3);--sb-actb:var(--p);
  --tbt:#F2F2F3;--tb-b:#1A1A1D;--tb-b2:#26262B;--tb-bd:#34343A;--tb-line:#2A2A2F;--headtxt:#F2F2F3;--thc:#EDEDEF;--thbd:#2A2A2F;
}
/* ---- Light blue ---- */
[data-theme=blue]{
  --bg:#E8F1FB;--bg2:#DCE9F8;--surface:#FFFFFF;--border:#BFD4EC;--border2:#9DB9DC;--text:#0F2240;--text2:#3A5278;--text3:#566C8C;
  --p:#1F5FD6;--p2:color-mix(in srgb,var(--p) 86%,#fff);--p3:color-mix(in srgb,var(--p) 10%,#fff);
  --topbar:#F6FAFF;--sidebar:#D6E6F8;--sidebar2:#C5DCF3;--th:#CFE1F6;--shadow2:0 8px 24px rgba(20,60,120,.18);
  --sb-t:#24405F;--sb-t2:#4A6685;--sb-strong:#0A1F3D;--sb-line:#BFD4EC;--sb-hov:#C5DCF3;--sb-act:#FFFFFF;--sb-actb:var(--p);
  --tbt:#0F2240;--tb-b:#EAF2FC;--tb-b2:#DCE9F8;--tb-bd:#BFD4EC;--tb-line:#BFD4EC;--headtxt:#0F2240;--thc:#0F2240;--thbd:#B3CBE8;
}
/* Navy (classic) keeps the erp.css defaults but follows a custom accent */
:root:not([data-theme=light]):not([data-theme=dark]):not([data-theme=blue]){--p3:color-mix(in srgb,var(--p) 11%,#fff);--p2:color-mix(in srgb,var(--p) 86%,#fff)}

/* ---- Chrome rules driven by the variables above ---- */
.sidebar{border-right:1px solid var(--sb-line)}
.sb-head,.sb-foot{border-color:var(--sb-line)}
.sb-sec{border-bottom-color:var(--sb-line)}
.sb-logo,.u-name{color:var(--sb-strong)}
.sb-biz{color:var(--sb-strong);background:var(--sb-hov)}
.sb-lbl{color:var(--sb-t2)}.sb-lbl:hover{color:var(--sb-strong);background:var(--sb-hov)}
.sb-item{color:var(--sb-t)}.sb-item:hover{background:var(--sb-hov);color:var(--sb-strong)}
.sb-item.active{background:var(--sb-act);color:var(--sb-strong);border-left-color:var(--sb-actb)}
.u-pill:hover{background:var(--sb-hov)}.u-role,.u-logout{color:var(--sb-t2)}.u-logout:hover{color:var(--sb-strong)}
.sb-logo-icon{background:#fff!important;border:1px solid var(--sb-line)}
.topbar{background:var(--topbar);border-bottom:1px solid var(--tb-line);box-shadow:none}
.tb-title,.tb-title *{color:var(--tbt)}
.tb-btn,.tb-menu,.tb-search{background:var(--tb-b);border-color:var(--tb-bd);color:var(--tbt)}
.tb-btn:hover,.tb-menu:hover,.tb-search:hover{background:var(--tb-b2);color:var(--tbt)}
.tb-search{color:var(--text3)}.tb-search kbd{border-color:var(--tb-bd)}
.ph-title,.kpi-val,.card>.card-title:first-child{color:var(--headtxt)}
.kpi-val.g{color:var(--green)}.kpi-val.r{color:var(--red)}
thead th{background:var(--th);color:var(--thc);border-right-color:var(--thbd)}
.btn-p,.auth-btn{color:var(--onp)}
[data-theme=dark] .card,[data-theme=dark] .kpi{background:var(--surface)}
[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] textarea{color-scheme:dark}

/* ---- Icons ---- */
.sb-icon{display:inline-flex!important;width:16px;height:16px;flex-shrink:0;align-items:center;justify-content:center;opacity:.85}
.sb-icon svg,.ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sb-item.active .sb-icon{opacity:1;color:var(--sb-actb)}
.sb-item{gap:9px;padding-left:18px}
.tb-btn .ic{display:inline-flex;width:16px;height:16px}.tb-btn .tb-t{margin-left:6px;font-size:12px}
.kpi-icon{display:flex!important;position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:4px;align-items:center;justify-content:center;background:var(--p3);color:var(--p);font-size:0}
.kpi-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kpi{padding-right:16px}.kpi-lbl{padding-right:34px}.kpi-val{font-size:17px!important;letter-spacing:-.2px;white-space:nowrap}

/* ---- Motion ---- */
@keyframes sfUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sfPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--p) 40%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
@keyframes sfGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.sf-in>.kpi,.sf-in>.card,.sf-in .kpi-row>.kpi,.sf-in .qa-tile,.sf-in .dash-split>.card{animation:sfUp .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*55ms)}
.kpi{transition:transform .18s,border-color .15s,box-shadow .18s}
.kpi[onclick]:hover{transform:translateY(-2px);box-shadow:0 6px 16px color-mix(in srgb,var(--p) 22%,transparent)}
.kpi[onclick]:hover .kpi-icon{background:var(--p);color:#fff}
.kpi-icon{transition:background .15s,color .15s}
.btn{transition:background .12s,border-color .12s,transform .08s}.btn:active{transform:scale(.97)}
.sf-bars>*{transform-origin:bottom;animation:sfGrow .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*18ms)}
.tb-dot{animation:sfPulse 1.8s infinite}
.wave{display:inline-block;transform-origin:70% 70%;animation:sfWave 2.2s ease-in-out 1}
@keyframes sfWave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(14deg)}20%,40%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- Quick actions, recent pages ---- */
.sfqa{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.qa-tile{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;color:var(--text);font:600 13px var(--font);text-align:left;transition:border-color .15s,transform .15s,box-shadow .15s}
.qa-tile:hover{border-color:var(--p);transform:translateY(-2px);box-shadow:0 6px 14px color-mix(in srgb,var(--p) 18%,transparent)}
.qa-tile i{width:30px;height:30px;border-radius:4px;background:var(--p3);color:var(--p);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qa-tile i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qa-tile small{display:block;font:400 11px var(--font);color:var(--text3);margin-top:1px}
.rc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 14px;font-size:12px;color:var(--text3)}
.rc button{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px 10px 3px 8px;font:500 12px var(--font);color:var(--text2);cursor:pointer}
.rc button:hover{border-color:var(--p);color:var(--p)}.rc svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- Theme panel and quick-create menu ---- */
.tp{position:fixed;top:56px;right:14px;width:320px;max-height:calc(100vh - 70px);overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow2);z-index:300;display:none;color:var(--text)}
.tp.open{display:block;animation:sfUp .18s both}
.tp h4{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--text3);margin:0 0 8px;font-weight:600}
.tp-s{padding:14px 16px;border-bottom:1px solid var(--border)}.tp-s:last-child{border-bottom:0}
.tp-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600}
.tp-head button{background:none;border:0;color:var(--text3);cursor:pointer;font:12px var(--font)}.tp-head button:hover{color:var(--text)}
.tp-themes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tp-th{background:var(--surface);border:2px solid var(--border);border-radius:5px;background:none;padding:0;cursor:pointer;overflow:hidden;font:500 11px var(--font);color:var(--text2)}
.tp-th.on{border-color:var(--p);color:var(--text)}
.tp-th span{display:block;height:38px;position:relative}.tp-th span::before{content:"";position:absolute;left:0;top:0;bottom:0;width:28%;background:var(--a)}.tp-th span::after{content:"";position:absolute;left:28%;right:0;top:0;height:22%;background:var(--b)}
.tp-th em{display:block;font-style:normal;padding:4px 0}
.tp-sw{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tp-sw button{width:24px;height:24px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px var(--border2);cursor:pointer;padding:0}
.tp-sw button.on{border-color:var(--surface);box-shadow:0 0 0 2px var(--p)}
.tp-sw label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);cursor:pointer}
.tp-sw input[type=color]{width:28px;height:24px;padding:0;border:1px solid var(--border2);border-radius:3px;background:none;cursor:pointer}
.tp-seg{display:flex;border:1px solid var(--border2);border-radius:4px;overflow:hidden}
.tp-seg button{flex:1;background:none;border:0;padding:6px;font:500 12px var(--font);color:var(--text2);cursor:pointer}.tp-seg button.on{background:var(--p);color:#fff}
.tp-reset{width:100%;margin-top:4px}
.qc{position:fixed;top:56px;right:150px;width:240px;background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow2);z-index:300;display:none;padding:6px}
.qc.open{display:block;animation:sfUp .15s both}
.qc button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:8px 10px;border-radius:4px;cursor:pointer;color:var(--text);font:500 13px var(--font);text-align:left}
.qc button:hover{background:var(--p3);color:var(--p)}.qc svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.tb-new{background:var(--p)!important;border-color:var(--p)!important;color:#fff!important}.tb-new:hover{background:var(--p2)!important}

/* ---- Density ---- */
[data-density=compact] .page{padding:12px 16px}[data-density=compact] tbody td{padding-top:4px;padding-bottom:4px}
[data-density=compact] .sb-item{padding-top:4px;padding-bottom:4px}[data-density=compact] .kpi{padding-top:10px;padding-bottom:8px}[data-density=compact] .card{padding:10px 12px}

@media(max-width:900px){.tp{right:8px;left:8px;width:auto}.qc{right:8px}.tb-btn .tb-t{display:none}.sfqa{grid-template-columns:repeat(2,1fr)}}
.sfqa{background:none!important;border:0!important;padding:0!important}
.eod-strip{margin-top:4px}.eod-strip>div:first-child{background:none}
.kpi-icon{top:10px;right:10px;width:26px;height:26px}.kpi-icon svg{width:14px;height:14px}.kpi-lbl{min-height:26px;margin-bottom:6px}
.kpi-card{container-type:inline-size;min-width:0}
.kpi-card-v{font-size:clamp(16px,9cqw,26px);font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.kpi{container-type:inline-size}