/* Stackflo ERP theme: flat, dense, neutral. No gradients, no shadows, no emoji. Class names unchanged. */
:root{
  --bg:#E3E8F2;--bg2:#EDF1F9;--surface:#FFFFFF;--border:#C9D2E4;--border2:#A9B5CD;--th:#16256B;--topbar:#1D3FDB;
  --text:#101A33;--text2:#3E4E6C;--text3:#5B6A86;
  --p:#1D3FDB;--p2:#3354EA;--p3:#E7ECFE;
  --green:#1E7B4F;--green2:#E5F1EA;--red:#B3261E;--red2:#F9E8E7;--orange:#A8590A;--orange2:#FAEFE0;
  --blue:#2B6CB0;--blue2:#E5EEF8;--purple:#5E4B8B;--purple2:#EEEAF6;--pink:#8A4660;--pink2:#F6E9EE;
  --yellow:#946200;--yellow2:#FAF1D9;--teal:#25706F;--teal2:#E2F1F0;
  --sidebar:#0E1A44;--sidebar2:#18286A;--sw:240px;--r:3px;--r2:3px;--r3:4px;--shadow:none;--shadow2:0 4px 14px rgba(20,30,45,.18);
  --font:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
[data-theme=dark]{
  --bg:#0D1226;--bg2:#141B36;--surface:#182042;--border:#2B3563;--border2:#3D4A80;--th:#22328C;--topbar:#101C5C;
  --text:#E6EAF0;--text2:#A8B2BF;--text3:#7F8A99;--p3:#1A2550;
  --green:#4DB380;--green2:#16301F;--red:#E5675F;--red2:#331B1A;--orange:#D9903E;--orange2:#33250F;
  --blue:#6AA3DE;--blue2:#1B2D44;--purple:#9C86CF;--purple2:#2A2340;--pink:#CC7D9B;--pink2:#35202A;
  --yellow:#D8AE4A;--yellow2:#33290F;--teal:#58B3B1;--teal2:#14302F;--sidebar:#0A1130;--sidebar2:#131F55;--shadow2:0 4px 14px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:13px}
body{font-family:var(--font);font-size:13px;line-height:1.45;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border2);border:2px solid var(--bg);border-radius:6px}::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--p);outline-offset:1px}

/* ---------- Sign-in / sign-up ---------- */
#authWrap{min-height:100vh;background:var(--bg);display:flex;flex-direction:column}
.auth-top{display:flex;min-height:100vh;background:#0E1A44}
.auth-left{flex:1;display:flex;flex-direction:column;justify-content:center;padding:44px 56px;background:#0E1A44;color:#fff;min-width:0}
.ws-brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:600;margin-bottom:28px}
.auth-mark{width:40px;height:40px;border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center}.auth-mark svg{width:26px;height:26px}
.ws-h1{font-size:36px;line-height:1.15;font-weight:600;letter-spacing:-.6px;margin:0 0 10px}
.ws-lead{font-size:15px;color:#A9B7E6;margin:0 0 22px;max-width:34em}
.ws-box{max-width:560px}
.ws-tabs{display:flex;gap:2px;border-bottom:1px solid #2B3C86}
.ws-tabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:#A9B7E6;font:500 13px var(--font);padding:9px 14px;cursor:pointer}
.ws-tabs button:hover{color:#fff}.ws-tabs button.on{color:#fff;border-bottom-color:#6F8CFF}
.ws-slip{background:#fff;color:#0E1A44;border-radius:3px;padding:18px 20px;margin-top:14px;min-height:330px}
.ws-h{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}.ws-h b{font-size:15px}.ws-h span{font-size:12px;color:#667289}
.ws-rail{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid #DDE3F5}
.ws-row{position:relative;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}.ws-row.in{opacity:1;transform:none}
.ws-row i{position:absolute;left:-22px;top:13px;width:10px;height:10px;border-radius:1px}
.ws-row button{width:100%;display:grid;grid-template-columns:84px 1fr auto;gap:10px;align-items:center;text-align:left;background:none;border:0;border-bottom:1px solid #EEF1FA;padding:9px 6px;cursor:pointer;font:13px var(--font);color:#0E1A44}
.ws-row button:hover{background:#F3F6FF}
.ws-m{font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#36507A}.ws-a{font-weight:600;font-variant-numeric:tabular-nums}
.ws-row p{display:none;margin:0;padding:8px 6px 10px 100px;font-size:12px;color:#4A5778;line-height:1.5;background:#F8F9FE}.ws-row.open p{display:block}
.ws-j{margin-top:12px;border:1px solid #DDE3F5;font-size:12px}.ws-j>span{display:block;background:#EEF1FA;padding:4px 8px;font-weight:600;color:#36507A}
.ws-j div{display:grid;grid-template-columns:1fr 90px 90px;padding:4px 8px;border-top:1px solid #EEF1FA}.ws-j em{font-style:normal}.ws-j u{text-decoration:none;text-align:right;font-variant-numeric:tabular-nums}
.ws-f{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11px;color:#667289}
.ws-f button{background:none;border:1px solid #C5CEEE;border-radius:3px;padding:3px 10px;font:12px var(--font);color:var(--p);cursor:pointer}.ws-f button:hover{background:#E7ECFE}
.auth-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.auth-chips span{border:1px solid #3A4C95;border-radius:2px;padding:3px 10px;font-size:12px;color:#A9B7E6}
.auth-explore{margin-top:14px;align-self:flex-start;color:#A9B7E6;font-size:13px;cursor:pointer;border-bottom:1px solid #3A4C95;padding-bottom:1px}
.auth-explore:hover{color:#fff;border-color:#fff}

.auth-cta-p,.auth-cta-s{font:600 14px var(--font);padding:11px 22px;border-radius:var(--r);cursor:pointer;border:1px solid var(--p)}
.auth-cta-p{background:var(--p);color:#fff}.auth-cta-p:hover{background:var(--p2)}
.auth-cta-s{background:transparent;color:var(--text);border-color:var(--border2)}.auth-cta-s:hover{background:var(--bg2)}
.auth-cta-s.dark{color:var(--text);border-color:var(--border2)}
.auth-right{width:460px;flex-shrink:0;background:var(--surface);display:flex;flex-direction:column;justify-content:center;padding:44px 44px;color:var(--text)}
.auth-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:26px}
.auth-tabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 0;font:500 14px var(--font);color:var(--text2);cursor:pointer}
.auth-tabs button:hover{color:var(--text)}
.auth-tabs button.active{color:var(--p);border-bottom-color:var(--p);font-weight:600}
.auth-panel{display:none}.auth-panel.active{display:block}
.auth-title{font-size:22px;font-weight:600;color:var(--text);margin-bottom:4px}
.auth-sub2{font-size:13px;color:var(--text3);margin-bottom:22px}
.afl{margin-bottom:14px}
.afl label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:4px}
.afi{width:100%;padding:10px 12px;background:var(--surface);border:1px solid var(--border2);border-radius:6px;font-size:14px;color:var(--text);font-family:inherit;outline:none}
.afi::placeholder{color:var(--text3)}
.afi:focus{border-color:var(--p);box-shadow:0 0 0 2px var(--p3)}
.auth-btn{width:100%;padding:11px;border-radius:6px;background:var(--p);color:#fff;border:1px solid var(--p);border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer;margin-top:6px;font-family:inherit}
.auth-btn:hover{background:var(--p2)}.auth-btn:disabled{opacity:.6;cursor:not-allowed}
.auth-btn-g{background:var(--green);border-color:var(--green)}
.auth-err{background:var(--red2);border:1px solid var(--red);color:var(--red);border-radius:var(--r);padding:8px 11px;font-size:13px;margin-top:8px;display:none}
.auth-divider{text-align:center;margin:16px 0;color:var(--text3);font-size:12px;position:relative}
.auth-divider::before,.auth-divider::after{content:"";position:absolute;top:50%;width:42%;height:1px;background:var(--border)}
.auth-divider::before{left:0}.auth-divider::after{right:0}
.auth-switch{text-align:center;font-size:13px;color:var(--text3)}
.auth-switch a{color:var(--p);cursor:pointer;font-weight:600}
.afl label.lbl-row{display:flex;justify-content:space-between;align-items:baseline}.forgot{font-size:12px;font-weight:600;color:var(--p);cursor:pointer}.forgot:hover{text-decoration:underline}
.pwd-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--p);font:600 12px var(--font);cursor:pointer;padding:4px}
.freg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-more{background:var(--bg);border-top:1px solid var(--border);padding:64px 72px}
.auth-more-in{max-width:1080px;margin:0 auto}
.auth-more h2{font-size:26px;font-weight:600;color:var(--text);letter-spacing:-.2px}
.auth-more-sub{color:var(--text2);font-size:15px;margin:8px 0 26px;max-width:40em}
.auth-caps{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.auth-cap{padding:20px 22px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.auth-cap:nth-child(3n){border-right:0}.auth-cap:nth-last-child(-n+3){border-bottom:0}
.auth-cap h3{font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px}
.auth-cap p{font-size:13px;color:var(--text2);line-height:1.55}
.auth-more-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}


/* ---------- Shell ---------- */
#appWrap{display:none}
.app-layout{display:flex;min-height:100vh}
.sidebar{width:var(--sw);background:var(--sidebar);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;overflow-y:auto;transition:transform .2s}
.sb-head{padding:14px 14px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-logo{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:#fff}
.sb-logo-icon{width:26px;height:26px;background:#fff!important;border-radius:3px;display:flex;align-items:center;justify-content:center}
.sb-by{font-size:10px;color:rgba(255,255,255,.4);margin-top:3px}
.sb-biz{font-size:12px;color:rgba(255,255,255,.7);margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.sb-nav{flex:1;padding:6px 0;overflow-y:auto}
.sb-sec{margin-bottom:0;border-bottom:1px solid rgba(255,255,255,.06)}
.sb-lbl{font-size:11px;font-weight:600;color:rgba(255,255,255,.62);letter-spacing:.8px;text-transform:uppercase;padding:10px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none}
.sb-lbl:hover{color:#fff;background:var(--sidebar2)}
.sb-lbl::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:2px;transition:transform .15s}
.sb-sec.collapsed .sb-lbl::after{transform:rotate(-45deg)}
.sb-sec.collapsed .sb-item{display:none!important}
.sb-item{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 24px;color:rgba(255,255,255,.7);font-size:13px;font-weight:400;cursor:pointer;position:relative;border-left:3px solid transparent}
.sb-item:hover{background:var(--sidebar2);color:#fff}
.sb-item.active{background:var(--sidebar2);color:#fff;font-weight:600;border-left-color:#7C97FF}
.sb-icon{display:none}
.sb-badge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:600;padding:1px 6px;border-radius:2px}
.sb-foot{padding:8px;border-top:1px solid rgba(255,255,255,.08)}
.u-pill{display:flex;align-items:center;gap:8px;padding:6px;border-radius:var(--r);cursor:pointer}
.u-pill:hover{background:var(--sidebar2)}
.u-av{width:28px;height:28px;border-radius:3px;background:var(--p);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;color:#fff;flex-shrink:0}
.u-info{flex:1;min-width:0}
.u-name{font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-role{font-size:11px;color:rgba(255,255,255,.5)}
.u-logout{background:none;border:none;color:rgba(255,255,255,.55);cursor:pointer;font-size:12px;padding:3px 6px;font-family:inherit}
.u-logout:hover{color:#fff;text-decoration:underline}
.main-area{margin-left:var(--sw);flex:1;display:flex;flex-direction:column;min-height:100vh;min-width:0}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 20px;height:48px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:50}
.tb-menu{display:none;background:none;border:1px solid var(--border);border-radius:var(--r);font-size:16px;cursor:pointer;color:var(--text2);padding:2px 8px}
.tb-title{font-size:14px;font-weight:600;color:var(--text);flex:1;text-transform:uppercase;letter-spacing:.5px}
.tb-actions{display:flex;align-items:center;gap:6px}
.tb-btn{min-width:30px;height:30px;padding:0 8px;border-radius:var(--r);border:1px solid var(--border2);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:600;color:var(--text2);position:relative;font-family:inherit}
.tb-btn:hover{background:var(--bg2);color:var(--text)}
.tb-dot{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 3px;background:var(--red);color:#fff;font-size:10px;font-weight:600;border-radius:2px;display:flex;align-items:center;justify-content:center}
.page{padding:18px 20px;flex:1;min-width:0}

/* ---------- Panels, summary strips ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;box-shadow:none}
.card-title{font-size:12px;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.card>.card-title:first-child{margin:-14px -16px 12px;padding:9px 16px;background:var(--bg2);border-bottom:1px solid var(--border);border-radius:var(--r) var(--r) 0 0}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin-bottom:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.kpi{padding:12px 16px;position:relative;border-left:1px solid var(--border);border-top:0;background:transparent;min-width:0}
.kpi:first-child{border-left:0}
.kpi-glow,.kpi-icon{display:none}
.kpi-lbl{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.kpi-val{font-size:21px;font-weight:600;color:var(--text);line-height:1.15}
.kpi-val.g{color:var(--green)}.kpi-val.r{color:var(--red)}
.kpi-sub{font-size:11px;color:var(--text3);margin-top:3px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r);font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;border:1px solid transparent;line-height:1.3;white-space:nowrap}
.btn-p{background:var(--p);color:#fff;border-color:var(--p)}.btn-p:hover{background:var(--p2);border-color:var(--p2)}
.btn-g{background:var(--green);color:#fff;border-color:var(--green)}.btn-g:hover{filter:brightness(1.08)}
.btn-r{background:var(--red);color:#fff;border-color:var(--red)}.btn-r:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border2)}.btn-ghost:hover{background:var(--bg2)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-sm{padding:4px 10px;font-size:12px}.btn-xs{padding:2px 7px;font-size:11px}

/* ---------- Data grid ---------- */
.tbl-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.card .tbl-wrap{border:0;border-radius:0}
@media(min-width:769px){.tbl-wrap{max-height:calc(100vh - 235px)}.modal .tbl-wrap,.card .card .tbl-wrap{max-height:none}}
table{width:100%;border-collapse:collapse}
thead th{padding:7px 10px;font-size:12px;font-weight:600;color:var(--text);text-align:left;background:var(--bg2);border-bottom:1px solid var(--border2);border-right:1px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:2}
thead th:last-child{border-right:0}
th.sortable{cursor:pointer;user-select:none}th.sortable:hover{background:var(--p3)}
th.sorted-asc::after{content:" \25B2";font-size:9px;color:var(--p)}th.sorted-desc::after{content:" \25BC";font-size:9px;color:var(--p)}
tbody td{padding:6px 10px;font-size:13px;color:var(--text);border-bottom:1px solid var(--border);border-right:1px solid var(--border);vertical-align:middle}
tbody td:last-child{border-right:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--bg2) 55%,transparent)}
tbody tr:hover td{background:var(--p3)}
.grid-foot{padding:6px 10px;font-size:12px;color:var(--text3);border-top:1px solid var(--border);background:var(--bg2)}
.badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:2px;font-size:11px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.b-g{background:var(--green2);color:var(--green);border-color:color-mix(in srgb,var(--green) 35%,transparent)}
.b-r{background:var(--red2);color:var(--red);border-color:color-mix(in srgb,var(--red) 35%,transparent)}
.b-o{background:var(--orange2);color:var(--orange);border-color:color-mix(in srgb,var(--orange) 35%,transparent)}
.b-b{background:var(--blue2);color:var(--blue);border-color:color-mix(in srgb,var(--blue) 35%,transparent)}
.b-p{background:var(--purple2);color:var(--purple);border-color:color-mix(in srgb,var(--purple) 35%,transparent)}
.b-y{background:var(--yellow2);color:var(--yellow);border-color:color-mix(in srgb,var(--yellow) 35%,transparent)}
.b-gr{background:var(--bg2);color:var(--text2);border-color:var(--border2)}

/* ---------- Dialogs ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(15,22,32,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r3);width:100%;max-width:520px;max-height:92vh;overflow-y:auto;box-shadow:var(--shadow2)}
.modal-lg{max-width:720px}.modal-xl{max-width:1040px;width:96vw}
.mh{padding:12px 16px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:3}
.mt{font-size:15px;font-weight:600;color:var(--text)}
.ms{font-size:12px;color:var(--text3);margin-top:2px}
.mx{width:26px;height:26px;border-radius:var(--r);background:var(--surface);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--text2)}
.mx:hover{background:var(--red);color:#fff;border-color:var(--red)}
.mb{padding:14px 16px}.mf{padding:10px 16px;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--border);background:var(--bg2)}

/* ---------- Forms ---------- */
.fg{margin-bottom:11px}
.fg label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:3px}
.fc{width:100%;padding:6px 9px;border:1px solid var(--border2);border-radius:var(--r);font-size:13px;font-family:inherit;color:var(--text);background:var(--surface);outline:none;min-height:30px}
input[type=date].fc{cursor:pointer}
[data-theme=dark] input[type=date].fc::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7}
.fc:focus{border-color:var(--p);box-shadow:0 0 0 2px var(--p3)}
.fc-ro{background:var(--bg2);color:var(--text2)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:11px}.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.f-total{background:var(--bg2);border:1px solid var(--border2);border-left:3px solid var(--p);color:var(--text);border-radius:var(--r);padding:10px 14px;display:flex;justify-content:space-between;align-items:center}
.f-total-l{font-size:13px;color:var(--text2)}.f-total-v{font-size:18px;font-weight:600}

/* ---------- Page header, toolbar ---------- */
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.ph-title{font-size:20px;font-weight:600;color:var(--text);letter-spacing:-.1px}
.ph-sub{font-size:12px;color:var(--text3);margin-top:2px}
.ph-r{display:flex;gap:6px;flex-wrap:wrap}
.sw{flex:1;position:relative;min-width:160px}
.sw span{display:none}
.sw input{width:100%;padding:6px 9px;border:1px solid var(--border2);border-radius:var(--r);font-size:13px;font-family:inherit;outline:none;background:var(--surface);color:var(--text);min-height:30px}
.sw input:focus{border-color:var(--p);box-shadow:0 0 0 2px var(--p3)}
.fbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;padding:8px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);align-items:center}

/* ---------- Feedback ---------- */
.toast-box{position:fixed;bottom:16px;right:16px;z-index:999;display:flex;flex-direction:column;gap:6px}
.toast{background:var(--surface);color:var(--text);padding:9px 14px;border-radius:var(--r);font-size:13px;box-shadow:var(--shadow2);border:1px solid var(--border2);border-left-width:4px;display:flex;align-items:center;gap:8px;max-width:380px}
.toast.s{border-left-color:var(--green)}.toast.e{border-left-color:var(--red)}.toast.i{border-left-color:var(--p)}
.loading{display:flex;align-items:center;justify-content:center;padding:48px;flex-direction:column;gap:10px;color:var(--text3)}
.spin{width:22px;height:22px;border:2px solid var(--border);border-top-color:var(--p);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:40px 20px;color:var(--text3)}
.empty-icon{display:none}
.empty-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}
.empty-sub{font-size:13px;line-height:1.5;margin-bottom:14px}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(15,22,32,.5);z-index:99}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:14px;overflow-x:auto}
.tab{padding:8px 14px;font-size:13px;font-weight:500;cursor:pointer;color:var(--text2);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--text);background:var(--bg2)}
.tab.active{color:var(--p);border-bottom-color:var(--p);font-weight:600}

/* ---------- Records / people ---------- */
.emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.emp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px;cursor:pointer}
.emp-card:hover{border-color:var(--p);background:var(--p3)}
.e-av{width:36px;height:36px;border-radius:3px;background:var(--p);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#fff;margin-bottom:8px}
.e-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.e-role{font-size:12px;color:var(--text3);margin-bottom:6px}
.fin-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}
.fin-row:last-child{border-bottom:none}
.fin-row.tot{font-weight:600;font-size:13px;background:var(--bg2);margin:0 -16px;padding:8px 16px;border-top:1px solid var(--border2)}
.fin-row.sh{font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);background:var(--bg2);margin:4px -16px 2px;padding:5px 16px}
.fin-row:has(>span:nth-child(4)){display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fin-row:has(>span:nth-child(4))>span:nth-child(n+2),.fin-head>*:nth-child(n+2){text-align:right}
.fin-head{gap:8px}
.fv{font-weight:600}.fv.pos{color:var(--green)}.fv.neg{color:var(--red)}
.detail-row{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}
.detail-row:last-child{border-bottom:none}
.detail-lbl{font-size:12px;font-weight:600;color:var(--text3);min-width:120px;flex-shrink:0}
.detail-val{color:var(--text);flex:1}
.set-grid{display:grid;grid-template-columns:200px 1fr;gap:16px}
.sm-item{padding:7px 10px;font-size:13px;font-weight:500;cursor:pointer;color:var(--text2);display:flex;align-items:center;gap:7px;border-left:3px solid transparent}
.sm-item:hover{background:var(--bg2);color:var(--text)}
.sm-item.active{background:var(--p3);color:var(--p);font-weight:600;border-left-color:var(--p)}
.set-sec{display:none}.set-sec.active{display:block}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border)}
.set-row:last-child{border-bottom:none}
.set-lbl{font-size:13px;font-weight:600;color:var(--text)}.set-sub{font-size:12px;color:var(--text3);margin-top:2px}
.toggle{width:36px;height:20px;background:var(--border2);border-radius:3px;cursor:pointer;position:relative;flex-shrink:0}
.toggle.on{background:var(--green)}
.toggle::after{content:"";position:absolute;width:14px;height:14px;background:#fff;border-radius:2px;top:3px;left:3px;transition:transform .15s}
.toggle.on::after{transform:translateX(16px)}
.cp-row{display:flex;gap:5px;flex-wrap:wrap}
.cp{width:22px;height:22px;border-radius:3px;cursor:pointer;border:2px solid transparent}
.cp:hover{outline:1px solid var(--border2)}.cp.on{border-color:var(--text)}
.dash-grid{display:grid;grid-template-columns:3fr 2fr;gap:14px}
.bar-chart{display:flex;align-items:flex-end;gap:3px;height:56px;margin-top:9px}
.bar{flex:1;background:var(--p);border-radius:2px 2px 0 0;opacity:.75;min-width:7px;cursor:pointer}
.bar:hover{opacity:1}
.bar-labels{display:flex;justify-content:space-between;margin-top:3px}
.bar-label{font-size:10px;color:var(--text3);flex:1;text-align:center}
.qa{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;border:1px solid var(--border);background:var(--surface);margin-bottom:5px;border-radius:var(--r)}
.qa:hover{border-color:var(--p);background:var(--p3)}
.qa-icon{display:none}
.qa-text{font-size:13px;font-weight:500;color:var(--text)}
.ec-grid{display:grid;grid-template-columns:250px 1fr;gap:16px}
.ec-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px}
.ec-av{width:60px;height:60px;border-radius:3px;background:var(--p);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;color:#fff}
.ec-stat{text-align:center;padding:8px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:6px}
.ec-stat-val{font-size:17px;font-weight:600;color:var(--text)}.ec-stat-lbl{font-size:11px;color:var(--text3);margin-top:2px}
.recon-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}
.v-pos{color:var(--green);font-weight:600}.v-neg{color:var(--red);font-weight:600}
.cheque-box{background:#fffef0;border:2px solid #c8a900;border-radius:4px;padding:20px;font-family:Georgia,serif;color:#333}
.cheque-payee-line{border-bottom:1px solid #333;padding-bottom:3px;font-size:16px;font-weight:700;margin-bottom:10px}
.cheque-amt-box{border:2px solid #333;border-radius:2px;padding:6px 12px;font-size:16px;font-weight:700}
.cheque-sig{border-top:1px solid #333;margin-top:20px;padding-top:6px;text-align:right;font-size:12px;color:#666}
.ps-biz{font-size:15px;font-weight:600;color:var(--text)}
.ps-emp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;padding:10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r)}
.ps-field label{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);font-weight:600}
.ps-field p{font-size:13px;font-weight:600;color:var(--text);margin-top:2px}

@media(max-width:768px){
  .auth-top{flex-direction:column;min-height:0}.auth-left{padding:32px 20px 26px}.auth-sub{margin-bottom:6px}.auth-right{width:100%;padding:26px 20px 34px}.auth-more{padding:40px 20px}.auth-caps{grid-template-columns:1fr}.auth-cap,.auth-cap:nth-child(3n){border-right:0}.auth-cap:nth-last-child(-n+3){border-bottom:1px solid var(--border)}.auth-cap:last-child{border-bottom:0}.auth-explore{display:none}
  .sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}
  .sb-overlay.open{display:block}.main-area{margin-left:0}
  .tb-menu{display:flex}.topbar{padding:0 12px}.page{padding:12px}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}.kpi{border-top:1px solid var(--border)}.kpi:nth-child(-n+2){border-top:0}.kpi:nth-child(odd){border-left:0}
  .fr,.fr3{grid-template-columns:1fr}.dash-grid,.set-grid,.ec-grid{grid-template-columns:1fr}.emp-grid{grid-template-columns:1fr}.freg{grid-template-columns:1fr}
}
@media(max-width:480px){.kpi-grid{grid-template-columns:1fr}.kpi{border-left:0;border-top:1px solid var(--border)}.kpi:first-child{border-top:0}}
@media print{.sidebar,.topbar,.ph-r{display:none!important}.main-area{margin:0}body{background:#fff}}

/* =====================================================================
   Enterprise layer: stronger colour, structure and interaction
   ===================================================================== */
/* top bar: brand blue, breadcrumbs, search */
.topbar{background:var(--topbar);border-bottom:0;height:52px;padding:0 18px;gap:14px;box-shadow:0 1px 0 rgba(0,0,0,.18)}
.tb-title{flex:0 1 auto;text-transform:none;letter-spacing:0;display:flex;align-items:center;gap:8px;color:#fff;font-size:14px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden}
.crumb-mod{color:rgba(255,255,255,.72);font-weight:500}
.crumb-sep{color:rgba(255,255,255,.45);font-weight:400}
.crumb-page{color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.tb-search{flex:1;max-width:420px;margin-left:12px;height:32px;display:flex;align-items:center;gap:8px;padding:0 10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:var(--r);color:rgba(255,255,255,.85);font:400 13px var(--font);cursor:pointer;text-align:left}
.tb-search:hover{background:rgba(255,255,255,.22);color:#fff}
.tb-search span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-search kbd,.pal kbd{font:600 10px var(--font);padding:2px 5px;border:1px solid rgba(255,255,255,.4);border-radius:2px;color:inherit}
.tb-actions{margin-left:auto}
.tb-btn,.tb-menu{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff}
.tb-btn:hover,.tb-menu:hover{background:rgba(255,255,255,.26);color:#fff}
.tb-dot{border:2px solid var(--topbar)}

/* sidebar */
.sb-head{padding:16px 14px 14px}
.sb-logo{font-size:17px;letter-spacing:.2px}
.sb-biz{color:#fff;font-weight:600;background:rgba(255,255,255,.08);margin:10px -14px 0;padding:8px 14px;border-top:0}
.sb-lbl{color:rgba(255,255,255,.78)}
.sb-item.active{background:rgba(124,151,255,.22);border-left-color:#8FA7FF}
.sb-item{transition:background .12s,color .12s}

/* page header: a defined band, not floating text */
.ph{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--p);border-radius:var(--r);padding:12px 16px;margin-bottom:14px}
.ph-title{font-size:21px;color:var(--th)}
[data-theme=dark] .ph-title{color:var(--text)}
.wave{display:inline-block;transform-origin:70% 70%;animation:wave 1.8s ease 1 .4s}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-10deg)}50%{transform:rotate(8deg)}}

/* summary tiles: separate cards with a coloured top rule */
.kpi-grid{gap:12px;background:transparent;border:0;border-radius:0}
.kpi-grid,.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(156px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--surface);border:1px solid var(--border)!important;border-radius:var(--r);padding:14px 16px 12px;overflow:hidden;transition:border-color .12s,box-shadow .12s}
.kpi[onclick]{cursor:pointer}
.kpi[onclick]:hover{border-color:var(--p)!important;box-shadow:0 3px 10px rgba(29,63,219,.16)}
.kpi-glow{display:block!important;position:absolute;top:0;left:0;right:0;height:3px;width:auto;border-radius:0;opacity:1;filter:none}
.kpi:not(:has(.kpi-glow))::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--p)}
.kpi-val{font-size:22px;color:var(--th)}
[data-theme=dark] .kpi-val{color:var(--text)}
.kpi-val.g{color:var(--green)}.kpi-val.r{color:var(--red)}

/* panels */
.card{border-color:var(--border)}
.card>.card-title:first-child{background:var(--p3);color:var(--th);border-bottom:1px solid var(--border);border-left:3px solid var(--p)}
[data-theme=dark] .card>.card-title:first-child{color:var(--text)}

/* data grids: navy header, banded rows */
thead th{background:var(--th);color:#fff;border-bottom:0;border-right:1px solid rgba(255,255,255,.16);letter-spacing:.2px}
th.sortable:hover{background:var(--p)}
th.sorted-asc::after,th.sorted-desc::after{color:#FFD76A}
th.sortable{padding-right:18px}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--p3) 45%,transparent)}
tbody tr:hover td{background:color-mix(in srgb,var(--p) 14%,var(--surface))}
.tbl-wrap{border-color:var(--border2)}
.grid-tools{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.grid-tools input{flex:0 1 300px;min-height:30px;padding:5px 10px 5px 10px;border:1px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--text);font:400 13px var(--font);outline:none}
.grid-tools input:focus{border-color:var(--p);box-shadow:0 0 0 2px var(--p3)}
.grid-tools .gt-count{margin-left:auto;font-size:12px;color:var(--text3)}
.fbar{background:var(--surface);border-color:var(--border2)}
.btn-p{box-shadow:inset 0 -1px 0 rgba(0,0,0,.2)}
.btn{transition:background .12s,border-color .12s,filter .12s}
.btn:active{transform:translateY(1px)}

/* quick-jump palette */
.pal-bg{position:fixed;inset:0;background:rgba(10,16,44,.55);z-index:500;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh}
.pal{width:min(560px,92vw);background:var(--surface);border:1px solid var(--border2);border-radius:var(--r3);box-shadow:var(--shadow2);overflow:hidden;color:var(--text)}
.pal-in{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--th)}
.pal-in input{flex:1;background:transparent;border:0;outline:none;color:#fff;font:500 15px var(--font)}
.pal-in input::placeholder{color:rgba(255,255,255,.6)}
.pal-in kbd{color:rgba(255,255,255,.8)}
.pal-list{max-height:min(380px,50vh);overflow-y:auto}
.pal-i{display:flex;align-items:baseline;gap:10px;padding:9px 14px;cursor:pointer;border-bottom:1px solid var(--border);font-size:13px}
.pal-i b{font-weight:600}.pal-i small{color:var(--text3);font-size:11px;text-transform:uppercase;letter-spacing:.4px;margin-left:auto}
.pal-i.on{background:var(--p);color:#fff}.pal-i.on small{color:rgba(255,255,255,.8)}
.pal-empty{padding:18px 14px;color:var(--text3);font-size:13px}
.pal-foot{padding:7px 14px;background:var(--bg2);color:var(--text3);font-size:11px;display:flex;gap:14px}
.pal-foot kbd{border-color:var(--border2);color:var(--text2)}

.dash-split{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:14px}
.dash-split>*{min-width:0}
/* gentle page transition */
@media (prefers-reduced-motion:no-preference){#pc>*{animation:pgin .16s ease-out both}}
@keyframes pgin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

@media(max-width:768px){
  .tb-actions .tb-btn:not(#notifBtn){display:none}
  .topbar{gap:8px;padding:0 10px}.tb-actions{margin-left:0}
  .tb-search{flex:1;max-width:none;margin-left:0}.tb-search kbd{display:none}
  .crumb-mod,.crumb-sep{display:none}.tb-title{flex:0 1 38%}
  .kpi-grid,.kpi-row{grid-template-columns:repeat(2,1fr)}
  .card,.ph{max-width:100%;min-width:0}.page{overflow-x:hidden}
  .dash-split{grid-template-columns:1fr}
}
@media(max-width:480px){.kpi-grid,.kpi-row{grid-template-columns:1fr}}
@media print{.grid-tools,.pal-bg{display:none!important}}
@media(max-width:900px){.ws-h1{font-size:27px}.ws-slip{min-height:0;padding:14px}.ws-tabs{overflow-x:auto}.ws-row button{grid-template-columns:70px 1fr auto}.ws-row p{padding-left:86px}.ws-j div{grid-template-columns:1fr 70px 70px}.auth-left{padding:28px 18px}}
@media(prefers-reduced-motion:reduce){.ws-row{transition:none}}