/* Trillium Accounts. Same "Leaf accents" tokens as the portal, HRM and CRM. */
:root{
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --leaf:#8EAB3E; --petal:#F17E41;
  --bg:#F5F7F1; --surface:#FFFFFF; --surface-dim:#F2F5EC;
  --ink:#1F2A17; --ink-soft:#66725C; --ink-faint:#7A8570;
  --accent:#557718; --accent-pale:#EEF4E1; --heading:#2E4413;
  --red:#B3261E; --red-pale:#FBE6E3; --amber:#9A6A0A; --amber-pale:#FBF3DF; --blue:#2F6FB0; --blue-pale:#E5EFF9;
  --up:#C2551B; --down:#3F7D1E;
  --on-accent:#FFFFFF; --border:#E3E8DA; --border-strong:#CFD8C2;
  --hover:#F2F6EA; --row-hover:#F7FAF1; --focus:rgba(85,119,24,.18); --placeholder:#9AA58F;
  --nav-text:#3A4632; --topbar:rgba(255,255,255,.92);
  --login-bg:linear-gradient(160deg, #EEF4E1 0%, #F5F7F1 55%, #FDEEE5 100%);
  --tone-leaf-bg:#EEF4E1; --tone-leaf-fg:#3F5A12; --tone-orange-bg:#FDEEE5; --tone-orange-fg:#B24A14;
  --tone-amber-bg:#FBF3DF; --tone-amber-fg:#8A5A06; --tone-red-bg:#FBE6E3; --tone-red-fg:#B3261E; --tone-blue-bg:#E5EFF9; --tone-blue-fg:#2F6FB0;
  --shadow:0 1px 2px rgba(40,55,20,.06); --shadow-lift:0 8px 22px rgba(40,55,20,.10);
  --r:12px;
}
[data-theme="dark"]{
  --bg:#0F140C; --surface:#171F13; --surface-dim:#1D2718;
  --ink:#E9EEE3; --ink-soft:#9AA88F; --ink-faint:#7E8A74;
  --accent:#A8C556; --accent-pale:#23301A; --heading:#D4E6B5;
  --red:#F0877D; --red-pale:#3B211E; --amber:#E0A846; --amber-pale:#352B14; --blue:#7FB0E6; --blue-pale:#1A2A3A;
  --up:#F5A06E; --down:#B5D66E;
  --on-accent:#141B0C; --border:#2B3724; --border-strong:#38462F;
  --hover:#1F2A1A; --row-hover:#1C2517; --focus:rgba(168,197,86,.24); --placeholder:#6A7760;
  --nav-text:#CBD5C0; --topbar:rgba(24,32,20,.92); --login-bg:#11160E;
  --tone-leaf-bg:#23301A; --tone-leaf-fg:#B5D66E; --tone-orange-bg:#3A2417; --tone-orange-fg:#F5A06E;
  --tone-amber-bg:#352B14; --tone-amber-fg:#E6BD62; --tone-red-bg:#3B211E; --tone-red-fg:#F3A79E; --tone-blue-bg:#1A2A3A; --tone-blue-fg:#7FB0E6;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lift:0 8px 22px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14.5px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--accent)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-soft)} .faint{color:var(--ink-faint)} .small{font-size:12.5px}
.hidden{display:none!important}

/* ---------- shell (same structure as the HRM and CRM) ---------- */
#app{display:flex;min-height:100vh}
#sidebar{width:252px;flex:0 0 252px;background:var(--surface);border-right:1px solid var(--border);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:60}
.sb-brand{padding:20px 22px 14px;display:flex;flex-direction:column;gap:6px}
.sb-brand img{width:124px;height:auto;display:block}
.sb-brand::after,.login .brand-line{content:'';display:block;height:3px;width:44px;border-radius:3px;background:linear-gradient(90deg,var(--leaf) 0 60%,var(--petal) 60% 100%)}
.sb-brand::after{margin-top:2px}
.sb-brand span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
#nav{flex:1;overflow-y:auto;padding:4px 12px 12px;display:flex;flex-direction:column;gap:2px}
.nav-group-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:12px 10px 4px}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border-radius:10px;color:var(--nav-text);font-size:14.5px;font-weight:500;text-decoration:none;cursor:pointer}
.nav-item svg{width:20px;height:20px;flex:none;color:var(--tone-fg,var(--ink-soft))}
.nav-item:hover{background:var(--hover);color:var(--ink)}
.nav-item.on{background:var(--accent-pale);color:var(--heading);font-weight:600;box-shadow:inset 3px 0 0 var(--petal)}
.nav-item .badge{margin-left:auto;background:var(--petal);color:#fff;font-size:11px;border-radius:999px;padding:1px 7px;font-weight:700}
.tone-leaf{--tone-bg:var(--tone-leaf-bg);--tone-fg:var(--tone-leaf-fg)} .tone-orange{--tone-bg:var(--tone-orange-bg);--tone-fg:var(--tone-orange-fg)}
.tone-amber{--tone-bg:var(--tone-amber-bg);--tone-fg:var(--tone-amber-fg)} .tone-red{--tone-bg:var(--tone-red-bg);--tone-fg:var(--tone-red-fg)}
.tone-blue{--tone-bg:var(--tone-blue-bg);--tone-fg:var(--tone-blue-fg)} .tone-muted{--tone-bg:var(--surface-dim);--tone-fg:var(--ink-soft)}
.icon-chip{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--tone-bg);color:var(--tone-fg)}
.icon-chip svg{width:19px;height:19px}
.sb-foot{border-top:1px solid var(--border);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.sb-user{display:flex;align-items:center;gap:10px;min-width:0}
.sb-avatar{flex:0 0 34px;height:34px;border-radius:50%;background:var(--leaf);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;text-transform:uppercase}
.sb-whoami{display:flex;flex-direction:column;min-width:0;font-size:13px}
.sb-whoami strong,.sb-whoami small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-whoami small{color:var(--ink-soft)}
.sb-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.btn-xs{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--surface);color:var(--nav-text);border:1px solid var(--border-strong);border-radius:8px;padding:5px 10px;min-height:32px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn-xs:hover{background:var(--hover)} .btn-xs svg{width:15px;height:15px}
#main{flex:1;min-width:0;display:flex;flex-direction:column}
#topbar{position:sticky;top:0;z-index:40;background:var(--topbar);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:12px 32px;min-height:64px}
#topbar h1{font-size:20px;font-weight:700;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--heading)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--ink);padding:8px;border-radius:10px;cursor:pointer}
.icon-btn:hover{background:var(--hover)} .icon-btn svg{width:22px;height:22px}
#menuBtn{display:none}
#sideBackdrop{display:none}
#content{padding:24px 32px 48px;flex:1;width:100%;max-width:1320px;margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.page-head h1{display:none}
.page-head .sub{color:var(--ink-soft);font-size:13px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;min-height:38px;border-radius:10px;border:1px solid var(--border-strong);font-weight:600;cursor:pointer;background:var(--surface);color:var(--ink);text-decoration:none;white-space:nowrap;font-size:14px}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--accent);border-color:transparent;color:var(--on-accent)} .btn.primary:hover{filter:brightness(1.08)}
.btn.warn{background:var(--petal);border-color:var(--petal);color:#fff}
.btn.danger{color:var(--red);border-color:var(--red-pale)} .btn.danger:hover{background:var(--red-pale)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{min-height:30px;padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:16px;height:16px}
label.f{display:block;font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-bottom:5px}
.in,select.in,textarea.in{width:100%;padding:9px 11px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);min-height:40px;outline:none}
.in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus)}
textarea.in{min-height:70px;resize:vertical}
.seg{display:inline-flex;background:var(--surface-dim);border:1px solid var(--border);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:none;background:none;padding:6px 12px;border-radius:9px;font-weight:600;color:var(--ink-soft);cursor:pointer;font-size:13px}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.card h3{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--heading);display:flex;align-items:center;gap:8px}
.card h3 .hint{font-weight:400;color:var(--ink-faint);font-size:12px;margin-left:auto}
.grid{display:grid;gap:16px}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.st-draft{background:var(--surface-dim);color:var(--ink-soft)}
.st-submitted{background:var(--amber-pale);color:var(--amber)}
.st-approved{background:var(--accent-pale);color:var(--accent)}
.st-rejected{background:var(--red-pale);color:var(--red)}
.st-void{background:var(--red-pale);color:var(--red);text-decoration:line-through}
.t-payment{color:var(--up)} .t-receipt{color:var(--down)}
.msg{border-radius:10px;padding:10px 12px;font-size:13.5px;margin:10px 0}
.msg.err{background:var(--red-pale);color:var(--red)} .msg.ok{background:var(--accent-pale);color:var(--accent)} .msg.warn{background:var(--amber-pale);color:var(--amber)}
.empty{text-align:center;color:var(--ink-faint);padding:34px 10px}
.empty svg{width:42px;height:42px;opacity:.5;display:block;margin:0 auto 8px}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;background:var(--surface);z-index:1}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr.click{cursor:pointer} .tbl tr.click:hover td{background:var(--row-hover)}
.tbl .r{text-align:right;white-space:nowrap}
.tbl tfoot td{font-weight:700;border-top:2px solid var(--border-strong);border-bottom:none}
.scroll-x{overflow-x:auto}

/* ---------- dashboard ---------- */
.hero{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px;position:relative;overflow:hidden;box-shadow:inset 0 4px 0 var(--leaf),var(--shadow)}
.hero::after{content:'';position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(241,126,65,.12),transparent 70%);pointer-events:none}
.hero > *{position:relative;z-index:1}
.hero .top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.hero .date{font-size:12.5px;color:var(--ink-soft)}
.hero h1{margin:2px 0 2px;font-size:24px;font-weight:700;color:var(--heading)}
.hero .period{font-size:15px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;margin-top:6px}
.hero .period button{background:var(--surface);border:1px solid var(--border-strong);color:var(--ink);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:15px;display:inline-flex;align-items:center;justify-content:center}
.hero .period button:hover{background:var(--hover)}
.hero .cmp{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.scopes{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 0}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-strong);background:var(--surface);border-radius:999px;padding:5px 12px;font-weight:600;font-size:12.5px;cursor:pointer;color:var(--ink);white-space:nowrap}
.chip i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.chip.on{background:var(--accent-pale);color:var(--heading);border-color:var(--accent)}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:16px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px 10px;box-shadow:var(--shadow);min-width:0;transition:transform .15s,box-shadow .15s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.kpi .icon-chip{margin-bottom:12px}
.kpi .k{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.kpi .v{font-size:26px;font-weight:750;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.kpi .d{font-size:12px;display:flex;align-items:center;gap:6px;color:var(--ink-soft);margin-top:2px}
.delta{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;font-weight:700;border-radius:999px;padding:1px 7px;font-size:11.5px}
.delta.bad{background:var(--tone-orange-bg);color:var(--tone-orange-fg)} .delta.good{background:var(--tone-leaf-bg);color:var(--tone-leaf-fg)} .delta.flat{background:var(--surface-dim);color:var(--ink-soft)}
.kpi svg.spark{width:100%;height:30px;display:block;margin-top:8px}
.dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:16px}
.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-7{grid-column:span 7}.span-6{grid-column:span 6}.span-5{grid-column:span 5}.span-4{grid-column:span 4}
.chart-box{position:relative;height:290px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft)} .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.proj{border:1px solid var(--border);border-radius:14px;padding:12px 12px 8px;cursor:pointer;background:var(--surface);transition:transform .15s, box-shadow .15s, border-color .15s;position:relative;overflow:hidden}
.proj::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.proj:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--c)}
.proj.on{border-color:var(--c);box-shadow:0 0 0 2px var(--c) inset}
.proj .n{font-weight:700;font-size:13.5px;display:flex;justify-content:space-between;gap:6px}
.proj .n small{font-size:10.5px;color:var(--ink-faint);font-weight:700;letter-spacing:.06em}
.proj .a{font-size:19px;font-weight:800;margin-top:4px;letter-spacing:-.01em}
.proj .g{font-size:11px;color:var(--ink-faint)}
.proj svg{width:100%;height:28px;display:block;margin-top:4px}

.treemap{position:relative;height:330px;border-radius:12px;overflow:hidden;background:var(--surface-dim)}
.tm{position:absolute;padding:8px 9px;color:#fff;overflow:hidden;cursor:pointer;border:2px solid var(--surface);border-radius:8px;transition:filter .15s, transform .15s;display:flex;flex-direction:column;justify-content:space-between}
.tm:hover{filter:brightness(1.1);z-index:2}
.tm b{font-size:12.5px;line-height:1.2;display:block;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.tm span{font-size:12px;opacity:.95;font-weight:700}
.tm em{font-style:normal;font-size:10.5px;opacity:.9}
.crumbs{display:flex;gap:4px;align-items:center;flex-wrap:wrap;font-size:12.5px;margin-bottom:8px}
.crumbs a{cursor:pointer;text-decoration:none;font-weight:600}
.heat-legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-faint)}
.heat-legend .bar{width:120px;height:8px;border-radius:4px;background:linear-gradient(90deg,#3E8428,#5F7D72,#D2652A)}

.movers .mv{display:grid;grid-template-columns:minmax(0,1fr) 120px 92px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13px;cursor:pointer}
.movers .mv:last-child{border-bottom:none}
.movers .mv .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.movers .mv .nm small{display:block;color:var(--ink-faint);font-size:11px}
.dbar{height:10px;position:relative;background:var(--surface-dim);border-radius:5px}
.dbar i{position:absolute;top:0;bottom:0;border-radius:5px}
.dbar::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--border-strong)}
.hbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;margin-bottom:9px;font-size:13px}
.hbar .t{height:7px;border-radius:4px;background:var(--surface-dim);grid-column:span 2;overflow:hidden}
.hbar .t i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--leaf),var(--accent));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.feed .it{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer}
.feed .it:last-child{border-bottom:none}
.feed .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;font-weight:800;font-size:13px}
.feed .ic.payment{background:#FDEEE5;color:#C2551B} .feed .ic.receipt{background:var(--accent-pale);color:var(--accent)}
[data-theme="dark"] .feed .ic.payment{background:#3A2417;color:#F5A06E}
.feed .tx{flex:1;min-width:0} .feed .tx b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.feed .tx small{color:var(--ink-faint);font-size:11.5px}
.feed .am{font-weight:700;white-space:nowrap;font-size:13.5px}

/* ---------- voucher form ---------- */
.vform{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px}
.fgrid .s2{grid-column:span 2}.fgrid .s3{grid-column:span 3}
.typeswitch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.typeswitch button{border:2px solid var(--border);background:var(--surface);border-radius:14px;padding:12px;cursor:pointer;text-align:left;font-weight:700;display:flex;gap:10px;align-items:center}
.typeswitch button small{display:block;font-weight:500;color:var(--ink-faint);font-size:12px}
.typeswitch button.on.payment{border-color:var(--petal);background:linear-gradient(135deg,rgba(241,126,65,.10),transparent)}
.typeswitch button.on.receipt{border-color:var(--leaf);background:linear-gradient(135deg,rgba(142,171,62,.14),transparent)}
.typeswitch .ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px}
.typeswitch .payment .ico{background:#FDEEE5;color:#C2551B} .typeswitch .receipt .ico{background:var(--accent-pale);color:var(--accent)}
.projpick{display:flex;flex-wrap:wrap;gap:6px}
.projpick .chip.on{background:var(--c);border-color:var(--c);color:#fff}
.lines{width:100%;border-collapse:separate;border-spacing:0 6px}
.lines th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);text-align:left;padding:0 6px}
.lines td{padding:0 4px;vertical-align:top}
.lines td.n{width:26px;color:var(--ink-faint);font-weight:700;padding-top:11px;text-align:center}
.lines td.amt{width:150px} .lines td.amt .in{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.lines td.del{width:34px}
.lines .lp{font-size:11.5px;margin-top:3px}
.lines .lp select{border:none;background:none;color:var(--ink-faint);font-size:11.5px;padding:0;cursor:pointer}
.acc-pick{position:relative}
.acc-pick .chosen{display:flex;flex-direction:column;justify-content:center;padding:6px 11px;border:1px solid var(--border-strong);border-radius:10px;min-height:40px;cursor:text;background:var(--surface)}
.acc-pick .chosen b{font-size:13.5px} .acc-pick .chosen small{font-size:11px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-pop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow-lift);max-height:360px;overflow-y:auto;padding:4px;min-width:340px}
.acc-pop .o{padding:8px 10px;border-radius:8px;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
.acc-pop .o.on,.acc-pop .o:hover{background:var(--hover)}
.acc-pop .o b{font-size:13.5px;font-weight:600} .acc-pop .o b mark{background:rgba(142,171,62,.3);color:inherit;border-radius:3px;padding:0 1px}
.acc-pop .o small{grid-column:1;font-size:11px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-pop .o .cls{grid-row:span 2;align-self:center;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--surface-dim);color:var(--ink-soft)}
.acc-pop .o .cls.exp{background:#FDEEE5;color:#B24A14} .acc-pop .o .cls.inc{background:var(--accent-pale);color:var(--accent)} .acc-pop .o .cls.ast{background:var(--blue-pale);color:var(--blue)}
[data-theme="dark"] .acc-pop .o .cls.exp{background:#3A2417;color:#F5A06E}
.acc-pop .hd{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);padding:8px 10px 4px;font-weight:700}
.acc-pop .used{font-size:10.5px;color:var(--accent);font-weight:700}
.totalbox{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-top:4px;box-shadow:inset 0 4px 0 var(--leaf),var(--shadow)}
.totalbox .lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:600}
.totalbox .amt{font-size:28px;font-weight:750;letter-spacing:-.01em;color:var(--heading)}
.totalbox .words{font-size:12px;color:var(--ink-soft);font-style:italic;margin-top:4px}
.drop{border:2px dashed var(--border-strong);border-radius:14px;padding:18px;text-align:center;cursor:pointer;color:var(--ink-soft);transition:background .15s,border-color .15s}
.drop.over,.drop:hover{border-color:var(--accent);background:var(--accent-pale)}
.drop svg{width:28px;height:28px;display:block;margin:0 auto 6px;opacity:.7}
.files{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.file{display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid var(--border);border-radius:10px;font-size:12.5px}
.file .th{width:38px;height:38px;border-radius:7px;background:var(--surface-dim) center/cover no-repeat;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:10px;color:var(--red)}
.file .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file a{text-decoration:none;color:inherit}

/* ---------- voucher view ---------- */
.vhead{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.vhead .big{font-size:30px;font-weight:800;letter-spacing:-.02em}
.timeline{display:flex;gap:0;margin:14px 0 4px;flex-wrap:wrap}
.timeline .s{flex:1;min-width:120px;position:relative;padding-top:18px;font-size:12px;color:var(--ink-faint)}
.timeline .s::before{content:"";position:absolute;top:5px;left:0;right:0;height:3px;background:var(--border)}
.timeline .s::after{content:"";position:absolute;top:0;left:0;width:13px;height:13px;border-radius:50%;background:var(--surface);border:3px solid var(--border)}
.timeline .s.done::before{background:var(--leaf)} .timeline .s.done::after{border-color:var(--leaf);background:var(--leaf)}
.timeline .s.bad::after{border-color:var(--red);background:var(--red)}
.timeline .s b{display:block;color:var(--ink);font-size:12.5px}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;font-size:13.5px}
.kv span{display:block;font-size:11.5px;color:var(--ink-faint);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.preview{border:1px solid var(--border);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;background:var(--surface-dim)}
.preview .im{height:120px;background:center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--red);font-size:20px}
.preview .cap{padding:6px 8px;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--surface)}

/* ---------- reports ---------- */
.pl td{padding:7px 10px}
.pl tr.sec td{background:var(--surface-dim);font-weight:800;color:var(--heading);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.pl tr.sub td{font-weight:700}
.pl tr.tot td{font-weight:800;border-top:2px solid var(--border-strong);background:var(--accent-pale)}
.pl tr.grand td{font-weight:800;font-size:15px;background:var(--accent-pale);color:var(--heading);border-top:2px solid var(--accent)}
.pl .tw{cursor:pointer;display:inline-flex;width:16px;justify-content:center;color:var(--ink-faint);user-select:none}
.pl .nm{display:flex;align-items:center;gap:4px}
.pl .vbar{display:inline-block;height:6px;border-radius:3px;vertical-align:middle;margin-right:6px}
.pl td.heat{text-align:right}
.chg-up{color:var(--up);font-weight:700} .chg-down{color:var(--down);font-weight:700}
.tree .node{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:8px;font-size:13.5px}
.tree .node:hover{background:var(--row-hover)}
.tree .node .tw{width:18px;text-align:center;cursor:pointer;color:var(--ink-faint);user-select:none}
.tree .node .acts{margin-left:auto;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.tree .node:hover .acts{opacity:1}
.tree .off{opacity:.45;text-decoration:line-through}

/* ---------- training (same layout as the HRM / PMS training) ---------- */
.tr-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:22px;align-items:start}
.tr-side{display:flex;flex-direction:column;gap:12px}
.tr-bar{height:8px;background:var(--border);border-radius:999px;overflow:hidden}
.tr-fill{height:100%;background:linear-gradient(90deg,var(--leaf),var(--petal));border-radius:999px;transition:width .4s}
.tr-lessons{display:flex;flex-direction:column;gap:8px}
.tr-lesson{display:flex;gap:12px;align-items:flex-start;text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:12px;padding:12px 14px;width:100%;cursor:pointer;font-size:13.5px}
.tr-lesson:hover{background:var(--row-hover)} .tr-lesson.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus)}
.tr-num{flex:0 0 28px;height:28px;border-radius:50%;background:var(--border);color:var(--heading);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.tr-lesson.done .tr-num{background:var(--leaf);color:#fff}
.tr-text{display:flex;flex-direction:column;gap:2px} .tr-text small{color:var(--ink-soft);font-weight:400}
.tr-card{margin:0} .tr-h{color:var(--heading);margin:10px 0 8px;font-size:20px} .tr-body{font-size:14.5px;line-height:1.6}
.tr-dots{display:flex;gap:6px;margin-top:10px} .tr-dots button{width:26px;height:6px;border-radius:3px;border:none;background:var(--border);cursor:pointer;padding:0}
.tr-dots button.seen{background:var(--leaf);opacity:.5} .tr-dots button.on{background:var(--petal)}
.tr-q{margin-bottom:12px} .tr-opts{display:flex;flex-direction:column;gap:6px}
.tr-opt{text-align:left;border:1px solid var(--border-strong);background:var(--surface);border-radius:10px;padding:8px 12px;cursor:pointer;font-size:13.5px}
.tr-opt:hover{background:var(--hover)} .tr-opt.right{border-color:var(--accent);background:var(--accent-pale);color:var(--heading);font-weight:600} .tr-opt.wrong{border-color:var(--red);background:var(--red-pale);color:var(--red)}
.tr-flow{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .tr-flow .pill{border:none;cursor:pointer;font-size:12.5px;padding:6px 12px}
.tr-sort{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed var(--border);font-size:13.5px}
.tr-sort .tr-opt{padding:5px 10px;font-size:12px}
.tr-faq{border-bottom:1px solid var(--border);padding:10px 2px} .tr-faq summary{cursor:pointer;font-weight:600} .tr-faq p{margin:8px 0 2px;color:var(--ink-soft)}
@media (max-width:900px){ .tr-layout{grid-template-columns:1fr} }

/* ---------- modal / toast / login ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(15,20,10,.45);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)}
.modal{background:var(--surface);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.3);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:20px}
.modal h2{margin:0 0 12px;font-size:18px;color:var(--heading)}
.modal .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-weight:600;z-index:200;box-shadow:var(--shadow-lift);font-size:13.5px}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--login-bg);padding:16px}
.login .box{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:32px 30px;max-width:400px;width:100%;text-align:center;box-shadow:var(--shadow-lift)}
.login img{width:150px;display:block;margin:0 auto} .login .brand-line{margin:10px auto 14px} .login h1{margin:0 0 2px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.skel{background:linear-gradient(90deg,var(--surface-dim),var(--hover),var(--surface-dim));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:10px}
@keyframes sk{to{background-position:-200% 0}}
.fade-in{animation:fi .35s ease both} @keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- responsive (drawer below 1024px, like the HRM) ---------- */
@media (max-width:1180px){ .kpis{grid-template-columns:repeat(3,minmax(0,1fr))} .span-8,.span-7,.span-5,.span-4,.span-6{grid-column:span 12} .vform{grid-template-columns:1fr} }
@media (max-width:1023px){
  #sidebar{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);height:auto;transform:translateX(-102%);transition:transform .22s ease;box-shadow:0 6px 20px rgba(20,40,30,.18);z-index:1150}
  #sidebar.open{transform:none}
  #sideBackdrop{display:block;position:fixed;inset:0;background:rgba(15,25,20,.45);z-index:1140;opacity:0;pointer-events:none;transition:opacity .2s}
  #sidebar.open ~ #sideBackdrop{opacity:1;pointer-events:auto}
  #menuBtn{display:inline-flex}
  #topbar{padding:10px 16px;min-height:58px} #topbar h1{font-size:18px}
  #content{padding:20px 16px 60px}
}
@media (max-width:760px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .kpi .v{font-size:21px}
  .fgrid{grid-template-columns:1fr} .fgrid .s2,.fgrid .s3{grid-column:auto}
  .kv{grid-template-columns:1fr 1fr}
  .hero{padding:16px} .hero h1{font-size:20px}
  .scopes{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px} .scopes::-webkit-scrollbar{display:none}
  .kpi .d span:last-child{display:none}
  .lines thead{display:none} .lines tr{display:grid;grid-template-columns:1fr 130px 34px;gap:6px;border-bottom:1px dashed var(--border);padding-bottom:6px}
  .lines td.n{display:none} .lines td.acc{grid-column:span 3} .lines td{padding:0}
  .acc-pop{min-width:0}
  .movers .mv{grid-template-columns:minmax(0,1fr) 80px 80px}
  .tbl.stack thead{display:none} .tbl.stack tr{display:block;border-bottom:1px solid var(--border);padding:8px 0} .tbl.stack td{display:flex;justify-content:space-between;border:none;padding:3px 4px}
  .tbl.stack td::before{content:attr(data-l);color:var(--ink-faint);font-size:12px;margin-right:10px}
  #topbar .top-actions .btn span{display:none}
}
@media print{
  #sidebar,#topbar,.no-print,.page-head .row{display:none!important}
  #app{display:block} #content{padding:0;max-width:none}
  .card{border:none;box-shadow:none;padding:0}
  body{background:#fff}
  .pl tr.grand td{background:#EEF4E1!important;color:#2E4413!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}