:root{
  --ink:#0e1726; --ink-2:#16233b; --panel:#0f1b30; --line:#22344f;
  --line-soft:#1a2a42; --paper:#f4f6fb; --paper-2:#ffffff;
  --text:#e8eef8; --muted:#8fa3c0; --dim:#63799a;
  --gold:#e3b23c; --gold-dim:#a7842a; --teal:#3fb6a8; --red:#e06666;
  --green:#57b894; --amber:#e3b23c;
  --shadow:0 10px 40px rgba(5,10,20,.45);
  /* Light navigation + table-header palette (2026-07-23 redesign).
     The dark --ink / --panel tokens above are still used intentionally by
     dashboard cards, print documents and modal calc panels — they stay. */
  --nav-bg-start:#F8FBFF; --nav-bg-end:#EEF4FA; --nav-border:#D5E1EC;
  --nav-text:#17324D; --nav-muted:#60758C; --nav-tab:#49627A;
  --nav-hover:#E5EFFA; --nav-active:#1D5FA7; --nav-underline:#2F80C9; --nav-focus:#2F80C9;
  --table-head-bg:#DDEAF6; --table-head-hover:#CEE0F0; --table-head-text:#17324D;
  --table-head-border:#BDD0E1; --table-head-sorted:#1D5FA7;
  --logo-box-bg:#FFFFFF; --logo-box-border:#D4E0EB; --logo-box-shadow:0 2px 8px rgba(35,67,98,.14);
  --mono:"SFMono-Regular",ui-monospace,"Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); background:var(--paper); color:#1a2436;
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- Top bar ---------- */
header.topbar{
  background:linear-gradient(180deg,var(--nav-bg-start) 0%,var(--nav-bg-end) 100%);
  color:var(--nav-text); padding:0 20px; position:sticky; top:0; z-index:40;
  border-bottom:1px solid var(--nav-border); box-shadow:0 1px 3px rgba(35,67,98,.08);
}
.topbar-inner{display:flex;align-items:stretch;gap:0;height:46px;width:100%}
.brand{display:flex;align-items:center;gap:10px;min-width:0;padding-right:18px;margin-right:18px;border-right:1px solid var(--nav-border)}
.brand .mark{
  width:32px;height:32px;border-radius:8px;flex:0 0 auto;
  background:radial-gradient(120% 120% at 30% 20%,var(--gold) 0%,var(--gold-dim) 70%);
  display:grid;place-items:center;font-weight:800;color:#1a1206;font-size:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.brand .btxt{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0}
.brand h1{font-size:13.5px;font-weight:700;letter-spacing:.01em;margin:0;color:var(--nav-text);white-space:nowrap;line-height:1.15}
.brand .sub{font-size:9.5px;color:var(--nav-muted);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
nav.tabs{display:flex;gap:0}
nav.tabs button{
  background:transparent;border:0;border-bottom:2px solid transparent;color:var(--nav-tab);
  padding:0 15px;cursor:pointer;font-weight:600;font-size:12.5px;letter-spacing:.01em;
  display:flex;align-items:center;transition:color .15s,background .15s,border-color .15s;
}
nav.tabs button:hover{color:var(--nav-active);background:var(--nav-hover)}
nav.tabs button.active{color:var(--nav-active);border-bottom-color:var(--nav-underline)}
nav.tabs button:focus-visible{outline:2px solid var(--nav-focus);outline-offset:-2px}
.topbar-spacer{flex:1}
.db-badge{
  display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--nav-muted);
  padding:0 12px;letter-spacing:.04em;white-space:nowrap;
}
.db-badge + .db-badge{border-left:1px solid var(--nav-border)}
.db-badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(87,184,148,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(87,184,148,.5)}70%{box-shadow:0 0 0 7px rgba(87,184,148,0)}100%{box-shadow:0 0 0 0 rgba(87,184,148,0)}}

/* ---------- Layout ---------- */
main{width:100%;padding:22px}
/* The app fills the viewport and never scrolls as a whole — each table panel
   scrolls internally instead, which is what keeps the frozen header frozen. */
html,body{height:100%}
body{overflow:hidden}
body{display:flex;flex-direction:column}
main{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;width:100%}
/* Compact windows fall back to ordinary page scrolling. */
@media(max-height:700px),(max-width:900px){
  html,body{height:auto}
  body{overflow:auto}
  main{overflow:visible}
}
.view{min-height:0}
.view.active{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.view{display:none;animation:fade .25s ease}
/* Dashboard / Reference / Settings are long documents — they scroll inside
   themselves. The Travel/Petty Cash log and filter views do NOT: their panel scrolls,
   so the toolbar, selection bar and frozen header stay put. */
.view.active{display:block}
#view-dash.active,#view-pcdash.active,#view-ref.active,#view-settings.active{overflow-y:auto;overflow-x:hidden}
#view-log.active,#view-filter.active,#view-pc.active,#view-pcfilter.active{overflow:hidden}
/* On short or narrow windows there isn't enough height left for a usable table
   panel once the KPI strip and toolbar are placed. Rather than squeezing it to
   a few rows, let these views scroll as a whole — the runtime sizer stands down
   to match (see sizeTablePanels). */
@media(max-height:700px),(max-width:900px){
  #view-log.active,#view-filter.active,#view-pc.active,#view-pcfilter.active{overflow-y:auto;overflow-x:hidden}
}
.view.active{display:block}
/* NB: no `transform` here. A transform on an ancestor establishes a containing
   block for fixed/sticky descendants, which un-sticks the table header for the
   duration of the animation (and permanently in some engines). Fade opacity
   only. */
@keyframes fade{from{opacity:0}to{opacity:1}}

.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
.toolbar .grow{flex:1;min-width:180px}
.search{position:relative;flex:1;min-width:220px;max-width:420px}
.search input{
  width:100%;padding:10px 12px 10px 36px;border:1px solid #d3dbe8;border-radius:9px;background:#fff;
  color:#1a2436;transition:.15s;
}
.search input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,178,60,.18)}
.search svg{position:absolute;left:11px;top:11px;width:16px;height:16px;stroke:#9aa8bd;fill:none}

.btn{
  border:1px solid #d3dbe8;background:#fff;color:#243247;padding:9px 15px;border-radius:9px;
  cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:.15s;white-space:nowrap;
}
.btn:hover{border-color:#b9c4d6;background:#f7f9fc}
.btn.primary{background:linear-gradient(180deg,#12203a,#0e1726);color:#fff;border-color:#0e1726}
.btn.primary:hover{background:#1a2c4d}
.btn.gold{background:linear-gradient(180deg,var(--gold),var(--gold-dim));border-color:var(--gold-dim);color:#1a1206}
.btn.gold:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border-color:transparent;color:#5a6b85}
.btn.ghost:hover{background:#eef2f8;color:#243247}
.btn.sm{padding:6px 9px;font-size:12px}
td.actcol{padding-left:6px;padding-right:6px}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.btn.danger:hover{border-color:var(--red);color:var(--red);background:#fdf3f3}

/* ---------- KPI strip ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{
  background:var(--paper-2);border:1px solid #e4e9f2;border-radius:13px;padding:15px 17px;position:relative;overflow:hidden;
}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.kpi.k-net::before{background:var(--ink)}
.kpi.k-refund::before{background:var(--teal)}
.kpi.k-txn::before{background:var(--dim)}
.kpi .label{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#8494ab;font-weight:700}
.kpi .value{font-family:var(--mono);font-size:23px;font-weight:600;margin-top:6px;color:#141d2e;letter-spacing:-.01em}
.kpi .unit{font-size:12px;color:#9aa8bd;font-weight:500}
.kpi .foot{font-size:11px;color:#9aa8bd;margin-top:3px}
/* dashboard KPI grid holds more cards and reflows cleanly */
#dbKpis{grid-template-columns:repeat(5,1fr)}
.kpi.k-pr::before{background:#3f77c4}
.kpi.k-avg::before{background:#7a6bd0}
.kpi.k-top::before{background:var(--gold)}
.kpi .value.sm{font-size:17px}
.kpi .value.md{font-size:19px}

/* ================= Dashboard redesign (vibrant) ==================== */
:root{
  --d-blue:#3f77c4; --d-violet:#7a6bd0; --d-teal:#3fb6a8; --d-rose:#e0678b;
  --d-sky:#38a3d1; --d-lime:#6fbf5e; --d-orange:#ef8f4a;
}
#view-dash .filterbar{
  background:linear-gradient(135deg,#101d34 0%,#1c3055 55%,#22406e 100%);
  border:1px solid #22344f;border-radius:14px;padding:12px 16px;
  box-shadow:0 8px 26px rgba(12,25,48,.18);
}
#view-dash .filterbar label{color:#9db2d2}
#view-dash .filterbar .fld input{background:rgba(255,255,255,.94);border-color:transparent}
#view-dash .filterbar .btn.ghost{color:#c8d8f0}
#view-dash .filterbar .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}

/* --- hero band --- */
.dbhero{
  display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px;margin:16px 0 18px;
}
.hero-card{
  position:relative;overflow:hidden;border-radius:16px;padding:18px 20px;color:#fff;
  box-shadow:0 12px 30px rgba(14,26,50,.20);border:1px solid rgba(255,255,255,.10);
}
.hero-card.main{background:linear-gradient(135deg,#0f1b30 0%,#1b3a6b 60%,#2c5aa0 100%)}
.hero-card.gold{background:linear-gradient(135deg,#a7842a 0%,#d1a238 55%,#e9c25c 100%);color:#1d1503}
.hero-card.teal{background:linear-gradient(135deg,#1d7a72 0%,#2f9f92 55%,#48c3b3 100%)}
.hero-card::after{
  content:"";position:absolute;right:-38px;top:-52px;width:170px;height:170px;border-radius:50%;
  background:rgba(255,255,255,.10);pointer-events:none;
}
.hero-card .hlab{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;opacity:.82}
.hero-card .hval{font-family:var(--mono);font-size:31px;font-weight:700;letter-spacing:-.02em;margin-top:7px;line-height:1.1}
.hero-card.main .hval{font-size:35px}
.hero-card .hval .cur{font-size:14px;font-weight:600;opacity:.75;margin-left:5px}
.hero-card .hsub{font-size:12px;margin-top:6px;opacity:.85;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero-card .spark{margin-top:12px;display:block;width:100%;height:42px;overflow:visible}
.hero-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.hero-pill{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:20px;
  padding:4px 11px;font-size:11.5px;font-weight:600;display:inline-flex;gap:6px;align-items:center;
}
.hero-card.gold .hero-pill{background:rgba(29,21,3,.13);border-color:rgba(29,21,3,.20)}
.hero-pill .pv{font-family:var(--mono);font-weight:700}
.hbar{height:8px;border-radius:20px;background:rgba(255,255,255,.22);overflow:hidden;margin-top:14px;display:flex}
.hbar span{height:100%;display:block;transition:width .55s cubic-bezier(.4,0,.2,1)}
.hero-card.gold .hbar{background:rgba(29,21,3,.15)}

/* --- metric tiles --- */
.mtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.mtile{
  background:#fff;border:1px solid #e4e9f2;border-radius:14px;padding:14px 16px;
  position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;
}
.mtile:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,35,65,.10)}
.mtile .mhead{display:flex;align-items:center;gap:9px}
.mtile .ico{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  font-size:14px;font-weight:800;color:#fff;
}
.mtile .mlab{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8494ab;font-weight:800}
.mtile .mval{font-family:var(--mono);font-size:21px;font-weight:700;color:#141d2e;margin-top:9px;letter-spacing:-.01em}
.mtile .mval.sm{font-size:15px;line-height:1.35}
.mtile .mval .u{font-size:11.5px;color:#9aa8bd;font-weight:600;margin-left:3px}
.mtile .mfoot{font-size:11.5px;color:#8b99ae;margin-top:4px}
.mtile .mprog{height:5px;border-radius:20px;background:#eef2f8;overflow:hidden;margin-top:10px}
.mtile .mprog span{display:block;height:100%;border-radius:20px;transition:width .55s ease}
.i-blue{background:linear-gradient(135deg,#3f77c4,#2f5fa5)}
.i-violet{background:linear-gradient(135deg,#8b7ce0,#6a5ac4)}
.i-teal{background:linear-gradient(135deg,#48c3b3,#2f9f92)}
.i-gold{background:linear-gradient(135deg,#e9c25c,#c19a2c);color:#1d1503!important}
.i-rose{background:linear-gradient(135deg,#ec7d9c,#d1547a)}
.i-sky{background:linear-gradient(135deg,#4fb4de,#2f8bb5)}
.i-lime{background:linear-gradient(135deg,#82cf72,#569f47)}
.i-navy{background:linear-gradient(135deg,#33507e,#16233b)}

/* --- section heading --- */
.dsec{display:flex;align-items:baseline;gap:11px;margin:22px 0 12px}
.dsec h2{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#43536d;font-weight:800}
.dsec .line{flex:1;height:1px;background:linear-gradient(90deg,#dbe3ef,rgba(219,227,239,0))}

/* --- richer cards --- */
.card.accent{position:relative;overflow:hidden}
.card.accent::before{content:"";position:absolute;left:0;right:0;top:0;height:3px}
.card.acc-gold::before{background:linear-gradient(90deg,var(--gold),#f0d68a)}
.card.acc-blue::before{background:linear-gradient(90deg,#3f77c4,#8ab6ea)}
.card.acc-teal::before{background:linear-gradient(90deg,#3fb6a8,#9fe0d6)}
.card.acc-violet::before{background:linear-gradient(90deg,#7a6bd0,#bdb2f0)}
.card .chead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card .cpill{
  font-family:var(--mono);font-size:11.5px;font-weight:700;color:#41526d;
  background:#f2f5fa;border:1px solid #e4e9f2;border-radius:20px;padding:3px 10px;white-space:nowrap;
}

/* --- combo trend chart --- */
.trendwrap{position:relative;width:100%}
.trendwrap svg{display:block;width:100%;height:250px;overflow:visible}
.tg-line{stroke:#eef1f6;stroke-width:1}
.tg-lab{font-size:9.5px;fill:#a5b2c6;font-family:var(--mono)}
.tg-xlab{font-size:10px;fill:#8b99ae}
.tbar2{transition:opacity .15s}
.tbar2:hover{opacity:.82}
.tdot{fill:#fff;stroke:#7a6bd0;stroke-width:2}
.tlegend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:#5d6d85}
.tlegend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}

/* --- leaderboard --- */
.lb{display:flex;flex-direction:column;gap:2px}
.lb-row{
  display:grid;grid-template-columns:26px 1fr 96px;align-items:center;gap:11px;
  padding:8px 8px;border-radius:9px;transition:background .14s;
}
.lb-row:hover{background:#f7f9fd}
.lb-rank{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--mono);font-size:11.5px;font-weight:800;color:#5d6d85;background:#f0f3f8;
}
.lb-row:nth-child(1) .lb-rank{background:linear-gradient(135deg,#e9c25c,#c19a2c);color:#1d1503}
.lb-row:nth-child(2) .lb-rank{background:linear-gradient(135deg,#cdd6e2,#aab6c7);color:#28313f}
.lb-row:nth-child(3) .lb-rank{background:linear-gradient(135deg,#e0b48c,#c1926a);color:#2b1e12}
.lb-main{min-width:0}
.lb-name{font-size:12.5px;color:#26324a;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-track{height:6px;background:#eef2f8;border-radius:20px;overflow:hidden;margin-top:5px}
.lb-track span{display:block;height:100%;border-radius:20px;transition:width .5s ease}
.lb-val{font-family:var(--mono);font-size:12.5px;font-weight:700;color:#243247;text-align:right}
.lb-val small{display:block;font-size:10.5px;color:#9aa8bd;font-weight:600}

/* --- status strip --- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.statbox{
  border-radius:12px;padding:13px 15px;border:1px solid #e4e9f2;background:#fbfcfe;position:relative;overflow:hidden;
}
.statbox .sname{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:#7688a1}
.statbox .sval{font-family:var(--mono);font-size:19px;font-weight:700;color:#182338;margin-top:5px}
.statbox .sfoot{font-size:11px;color:#93a1b6;margin-top:2px}
.statbox .sdash{position:absolute;left:0;top:0;bottom:0;width:4px}

/* --- heat matrix --- */
.matrix td.heat{position:relative}
.matrix .heatpill{
  display:inline-block;min-width:64px;text-align:right;padding:3px 9px;border-radius:20px;
  font-family:var(--mono);font-size:12px;font-weight:700;
}
.matrix .shr{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.matrix .shr .sbar{width:52px;height:6px;border-radius:20px;background:#eef2f8;overflow:hidden;flex:0 0 auto}
.matrix .shr .sbar span{display:block;height:100%;background:linear-gradient(90deg,#3f77c4,#7a6bd0);border-radius:20px}

/* --- insight callouts --- */
.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-bottom:18px}
.ins{
  display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #e4e9f2;
  border-left:4px solid var(--gold);border-radius:12px;padding:13px 15px;
}
.ins.b{border-left-color:#3f77c4}.ins.t{border-left-color:#3fb6a8}.ins.v{border-left-color:#7a6bd0}
.ins .ibadge{font-size:17px;line-height:1;margin-top:1px}
.ins .ititle{font-size:12px;font-weight:800;color:#26324a;letter-spacing:.02em}
.ins .itext{font-size:12px;color:#6b7a92;margin-top:3px;line-height:1.5}
.ins .itext b{color:#26324a;font-family:var(--mono)}

@media(max-width:1300px){
  .dbhero{grid-template-columns:1fr 1fr}
  .dbhero .hero-card.main{grid-column:1 / -1}
  .mtiles{grid-template-columns:repeat(2,1fr)}
  #dbKpis{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .dbhero{grid-template-columns:1fr}
  .mtiles{grid-template-columns:1fr}
  #dbKpis{grid-template-columns:1fr 1fr}
}
/* donut charts */
.donut-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.donut-wrap{display:flex;align-items:center;gap:18px}
.donut-wrap svg{flex:0 0 auto}
.donut-legend{display:flex;flex-direction:column;gap:9px;min-width:0;flex:1}
.donut-legend .lg{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:9px;font-size:12.5px}
.donut-legend .sw{width:12px;height:12px;border-radius:3px}
.donut-legend .lname{color:#3a4658;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.donut-legend .lval{font-family:var(--mono);font-weight:600;color:#243247;font-variant-numeric:tabular-nums}
.donut-center-v{font-family:var(--mono);font-size:15px;font-weight:700;fill:#141d2e}
.donut-center-l{font-size:8.5px;letter-spacing:.1em;fill:#9aa8bd;font-weight:700}
.lockbadge{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:#8a6d1e;background:#fdf6e3;border:1px solid #f0e2bd;border-radius:9px;padding:8px 14px}
.lockbadge.unlocked{color:#2f7d5b;background:#eaf6f0;border-color:#c9e8d8}
.lockbadge .btn.sm{padding:3px 9px;font-size:11.5px;margin-left:2px}
@media(max-width:1080px){ .donut-grid{grid-template-columns:1fr} }

/* ---------- Table ----------
   The log and filter panels own their own vertical scrolling.
   The page itself must NOT scroll: if it does, the sticky header scrolls away
   with it and the toolbar/selection bar drift off the top of the screen.
   The panel is therefore measured against the viewport rather than given a
   guessed max-height — see sizeTablePanels(). */
.tablewrap{background:#fff;border:1px solid #e4e9f2;border-radius:13px;overflow:hidden;display:flex;flex-direction:column;min-height:0;position:relative}
.tablewrap::after{content:"";position:absolute;right:0;bottom:0;width:10px;height:var(--footh,0px);
  background:#f2f5fa;border-top:2px solid #d9e0ec;box-sizing:border-box;pointer-events:none;z-index:7}
/* horizontal scroll is contained to THIS panel only — the page never scrolls sideways.
   columns size to their content so text never wraps or crops. */
.table-scroll{overflow-x:auto;overflow-y:auto;max-height:calc(100vh - 320px);min-height:120px;position:relative}
.table-scroll{scrollbar-width:thin;scrollbar-color:#c3ccdb transparent}
.table-scroll::-webkit-scrollbar{height:10px;width:10px;background:transparent}
.table-scroll::-webkit-scrollbar-track{background:transparent}
/* transparent border + padding-box clip gives the thumb its inset look without
   painting a white ring over whatever is behind the track */
.table-scroll::-webkit-scrollbar-thumb{background:#c3ccdb;border-radius:6px;border:2px solid transparent;background-clip:padding-box}
.table-scroll::-webkit-scrollbar-thumb:hover{background:#a9b4c7;background-clip:padding-box}
.table-scroll::-webkit-scrollbar-corner{background:#f2f5fa}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;table-layout:auto}
/* The header must stay put while the panel scrolls. `position:sticky` on the
   TH is the mechanism; it only works if no ancestor between the TH and the
   scroll container creates a transform/filter/contain stacking context, and if
   thead itself isn't given `display:block` anywhere. */
thead{position:sticky;top:0;z-index:6}
thead th{
  position:sticky;top:0;z-index:6;background:var(--table-head-bg);color:var(--table-head-text);text-align:left;
  padding:11px 14px;font-weight:700;letter-spacing:.03em;white-space:nowrap;font-size:10.5px;
  text-transform:uppercase;border-bottom:1px solid var(--table-head-border);
}
/* the sticky cells need their own opaque backing or rows show through as they
   pass under — this MUST match --table-head-bg exactly */
thead th::after{content:"";position:absolute;inset:0;background:var(--table-head-bg);z-index:-1}
thead th.num{text-align:right}
/* every cell sizes to its content on one line — nothing wraps, nothing is cropped */
tbody td{padding:11px 14px;border-bottom:1px solid #eef1f6;white-space:nowrap;color:#2a3648;vertical-align:middle}
tbody tr:hover{background:#f8fafd}
tbody td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
tbody td.route{color:#3a4658;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.sn{color:#9aa8bd;font-family:var(--mono);font-size:12px}
.derived{color:#9aa7bd}
/* optional priority hiding — only on genuinely small windows; full grid shows on normal desktops */
@media(max-width:1180px){ .p3{display:none} col.p3{display:none} }
@media(max-width:1024px){ .p2{display:none} col.p2{display:none} }
@media(max-width:900px){ .p1{display:none} col.p1{display:none} }
.colnote{font-size:11px;color:#9aa8bd;display:none;align-items:center;gap:6px}
@media(max-width:1180px){ .colnote{display:inline-flex} }
tfoot td{
  position:sticky;bottom:0;background:#f2f5fa;font-family:var(--mono);font-weight:700;
  padding:12px 14px;border-top:2px solid #d9e0ec;color:#141d2e;text-align:right;white-space:nowrap;
}
tfoot td.lbl{text-align:left;font-family:var(--sans);letter-spacing:.08em;text-transform:uppercase;font-size:11px;color:#5a6b85}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.posted{background:#eaf6f0;color:#2f9c73}
.pill.refund{background:#fbf1e6;color:#c98a2b}
.pill.reversal{background:#f0eefb;color:#7a6bd0}
.pill.pay-debit{background:#eef2f8;color:#5a6b85}
.pill.pay-cc{background:#e9f0fb;color:#3f77c4}
.pill.sp-supplier{background:#eef2f8;color:#4a5a75}
.pill.sp-petty{background:#fdf5e8;color:#b58524}

/* ---------- Travel grid: fit every column on screen ----------
   24 columns at content width measured 2870px against an 1874px panel. Nothing
   may be removed, so the 996px comes out of type size, padding and truncation.
   table-layout:fixed is what makes the colgroup widths binding — in auto layout
   a long traveller name simply pushes the column wider and the fit is lost.
   Truncated cells keep the full value in title=, in Edit and in every print. */
table.fitgrid{table-layout:fixed;font-size:11px}
table.fitgrid thead th{padding:7px 5px;font-size:9px;letter-spacing:.01em}
table.fitgrid tbody td{padding:5px 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.fitgrid tbody td.mono,table.fitgrid tbody td.num{font-size:10.5px;letter-spacing:-.2px}
/* Edit drops to an icon here — its label costs ~35px of a 100px action cell */
table.fitgrid .rowact .btn.sm span.lbl{display:none}
table.fitgrid .rowact .btn.sm{padding:3px 5px}
table.fitgrid tbody td.route{max-width:none}
table.fitgrid .pill{padding:2px 5px;font-size:9px;gap:3px}
table.fitgrid .pill::before{width:4px;height:4px}
table.fitgrid .sn{font-size:10.5px}
table.fitgrid .rowact{gap:3px}
table.fitgrid .rowact .btn.sm{padding:3px 6px;font-size:10px}
table.fitgrid .rowact .iconbtn{width:22px;height:22px}
table.fitgrid .rowact .iconbtn svg{width:12px;height:12px}
table.fitgrid tfoot td{padding:7px}
/* Printing needs natural widths — a fixed layout would crop the paper copy too. */
@media print{
  table.fitgrid{table-layout:auto;font-size:inherit}
  table.fitgrid tbody td{overflow:visible;text-overflow:clip}
}

/* ---------- Travel row tint ----------
   Status carries the colour, exactly as Petty Cash does; an amber left edge is
   layered on top when the row has not been processed in SAP, so the two
   independent facts stay independently readable. */
tr.tsv-posted>td{background:#f5fbf7}
tr.tsv-refund>td{background:#fdf7ee}
tr.tsv-reversal>td{background:#f7f5fd}
tbody tr.tsv-posted:hover>td{background:#edf7f1}
tbody tr.tsv-refund:hover>td{background:#faf0e0}
tbody tr.tsv-reversal:hover>td{background:#f0ecfa}
tr.tsv-unproc>td:first-child{box-shadow:inset 3px 0 0 #e8c473}
tr.tsv-posted.selected>td,tr.tsv-refund.selected>td,tr.tsv-reversal.selected>td{background:inherit}

/* ---------- attachment chips ---------- */
.atts{display:flex;gap:3px;align-items:center;overflow:hidden}
.attchip{display:inline-flex;align-items:center;padding:1px 5px;border-radius:5px;
  font-size:9.5px;font-weight:700;letter-spacing:.03em;cursor:pointer;border:1px solid transparent}
.attchip.t-apr{background:#eaf1fb;color:#2b5a9b;border-color:#cfe0f5}
.attchip.t-inv{background:#eaf6f0;color:#256b4e;border-color:#cbe6da}
.attchip.t-vch{background:#f3eefb;color:#5a44a0;border-color:#e0d5f3}
.attchip.t-rcp{background:#fdf3e6;color:#96661a;border-color:#f2ddbc}
.attchip.t-doc{background:#eef1f6;color:#4a5a75;border-color:#dde3ec}
.attchip:hover{filter:brightness(.94)}
.attmore{color:#8fa0b8;font-size:9.5px;font-weight:700}
.attnone{color:#c8d1de;font-size:11px}
.att-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #e4e9f2;
  border-radius:9px;margin-bottom:7px;background:#fbfcfe}
.att-row .an{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.att-row .am{color:#9aa8bd;font-size:11px;white-space:nowrap}
.att-pick{max-height:240px;overflow:auto;margin-top:8px}
.f.col3{grid-column:1/-1}
.att-staged{border-style:dashed;background:#fffdf6}
.att-row .ast{color:#b58524;font-size:10.5px;font-weight:700;letter-spacing:.04em}
.att-empty{color:#9aa8bd;font-size:12.5px;padding:10px 2px}
.att-warn{background:#fdf6e6;border:1px solid #f0dcae;color:#8a6a1d;border-radius:8px;
  padding:9px 12px;font-size:12.5px;margin-bottom:12px}

/* Petty Cash status — mirrors the workbook's conditional formatting, where
   $K2="Posted" filled the row green (#C6EFCE) and "Pending" amber (#FFEB9C).
   Those two states are now Processed / Unprocessed. */
.pill.processed{background:#eaf6f0;color:#2f9c73}
.pill.unprocessed{background:#fbf3e2;color:#b3841f}
.pill.pay-cash{background:#eef7f1;color:#4d8a68}
/* NB: the printed batch card already owns the .pc / .pc-top / .pc-no / .pc-emp
   / .pc-date / .pc-net namespace (see the print rules further down). Screen
   classes for this view are therefore .pcv- , never .pc- . */
tr.pcv-proc>td{background:#f2faf5}
tr.pcv-unproc>td{background:#fdf8ec}
tr.pcv-proc.selected>td,tr.pcv-unproc.selected>td{background:inherit}
tr.pcv-proc>td:first-child{box-shadow:inset 3px 0 0 #7ec9a5}
tr.pcv-unproc>td:first-child{box-shadow:inset 3px 0 0 #e8c473}
.pcv-auth{font-weight:600;color:#2c3e57}
.pcv-nomap{color:#b3841f;font-size:11.5px;margin-top:4px}
.pcv-warn{background:#fdf6e6;border:1px solid #f0dcae;color:#8a6a1d;border-radius:8px;padding:9px 12px;font-size:12.5px;margin-top:10px}
.pcv-map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:12px}
.pcv-map-card{border:1px solid #e3e9f2;border-radius:10px;padding:10px 12px;background:#fbfcfe}
.pcv-map-card h4{margin:0 0 6px;font-size:12.5px;color:#1d2b45}
.pcv-map-card.empty-map{border-color:#f0dcae;background:#fdf9f0}

.rowact{display:flex;gap:4px;opacity:0;transition:.15s}
tbody tr:hover .rowact{opacity:1}
tbody tr:focus-within .rowact{opacity:1}
th.actcol,td.actcol{background:#fff;border-left:1px solid #eef1f6;white-space:nowrap}
thead th.actcol{background:var(--table-head-bg)}
/* the totals row is one continuous band — the actions cell must not break it */
tfoot td.actcol{background:#f2f5fa}
/* leave tinted rows alone on hover, or the actions cell flashes white against
   a coloured row */
tbody tr:not([class*="tsv-"]):not([class*="pcv-"]):hover td.actcol{background:#fbfcfe}
.iconbtn{width:28px;height:28px;border:1px solid #e0e6ef;background:#fff;border-radius:7px;cursor:pointer;display:grid;place-items:center;color:#6b7b93;transition:.12s}
.iconbtn:hover{border-color:#c3ccdb;color:#243247;background:#f7f9fc}
.iconbtn.del:hover{border-color:var(--red);color:var(--red);background:#fdf3f3}
.iconbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

.empty{padding:60px 20px;text-align:center;color:#9aa8bd}
.empty svg{width:44px;height:44px;stroke:#c7d0de;fill:none;stroke-width:1.5;margin-bottom:12px}
.empty h3{margin:0 0 4px;color:#5a6b85;font-size:15px}

/* ---------- Filters row ---------- */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:#fff;border:1px solid #e4e9f2;border-radius:13px;padding:14px 16px;margin-bottom:16px}
.fld{display:flex;flex-direction:column;gap:5px}
.fld label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8494ab;font-weight:700}
.fld input,.fld select{padding:8px 10px;border:1px solid #d3dbe8;border-radius:8px;background:#fff;color:#1a2436;min-width:140px}
.fld input:focus,.fld select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,178,60,.16)}
.fld.date input{min-width:150px}

/* ---------- Multi-select filter (Travel/Petty Cash Filter › Department) ----------
   Built from a button + checkbox popover rather than <select multiple>, which
   renders as a fixed-height scroll box that breaks the single-row filter bar
   and hides the current selection behind a scroll. Follows .printmenu, which
   already pops out of this same bar without being clipped. */
.multi{position:relative;display:flex}
.multi-btn{
  display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:170px;
  padding:8px 10px;border:1px solid #d3dbe8;border-radius:8px;background:#fff;color:#1a2436;
  font:inherit;font-size:inherit;line-height:18px;cursor:pointer;text-align:left;
}
.multi-btn svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.multi.open .multi-btn svg{transform:rotate(180deg)}
.multi-btn:focus-visible,.multi.open .multi-btn{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,178,60,.16)}
.multi-btn.on{border-color:#9dbde3;background:#f2f7fd;font-weight:600}
.multi-pop{
  position:absolute;left:0;top:calc(100% + 6px);background:#fff;border:1px solid #d9e0ec;
  border-radius:11px;box-shadow:0 14px 40px rgba(12,22,42,.22);padding:6px;min-width:230px;
  z-index:50;display:none;
}
.multi.open .multi-pop{display:block}
.multi-head{display:flex;gap:6px;padding:3px 4px 6px;border-bottom:1px solid #eef1f6;margin-bottom:4px}
.multi-head button{
  flex:1;background:#f4f7fc;border:1px solid #e4e9f2;border-radius:7px;padding:5px 8px;
  font:inherit;font-size:11.5px;font-weight:700;color:#3c5a80;cursor:pointer;
}
.multi-head button:hover{background:#e8f0fa}
.multi-list{max-height:250px;overflow:auto}
.multi-list label{
  display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:7px;
  cursor:pointer;font-size:12.5px;color:#243247;
}
.multi-list label:hover{background:#f4f7fc}
.multi-list input{width:14px;height:14px;accent-color:#1D5FA7;cursor:pointer;margin:0;min-width:0}

/* ---------- Modal ----------
   The transaction form is tall. Rather than letting it outgrow the screen and
   push the whole page into a scroll, the modal is capped to the viewport and
   the BODY scrolls inside it, so the title and the save button stay put.
   Sizes are clamped against viewport units so the form shrinks to fit a
   laptop screen instead of overflowing it. */
.overlay{
  position:fixed;inset:0;background:rgba(9,14,24,.55);backdrop-filter:blur(3px);z-index:60;
  display:none;align-items:center;justify-content:center;padding:clamp(10px,2.2vh,28px) clamp(10px,2vw,20px);
  overflow:auto;overscroll-behavior:contain;
}
.overlay.open{display:flex}
.modal{
  background:#fff;border-radius:16px;width:100%;max-width:min(820px,96vw);
  max-height:calc(100vh - clamp(20px,4.4vh,56px));
  display:flex;flex-direction:column;min-height:0;
  box-shadow:0 30px 80px rgba(0,0,0,.4);animation:pop .22s ease;
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(12px,1.8vh,18px) clamp(16px,2vw,22px);border-bottom:1px solid #eef1f6;
  flex:0 0 auto;border-radius:16px 16px 0 0;background:#fff;
}
.modal-head h2{margin:0;font-size:clamp(15px,1.7vh,17px);color:#141d2e}
.modal-head .mh-sub{font-size:11.5px;color:#9aa8bd;margin-top:2px}
.modal-body{
  padding:clamp(14px,2vh,20px) clamp(16px,2vw,22px);
  overflow-y:auto;overflow-x:hidden;flex:1 1 auto;min-height:0;overscroll-behavior:contain;
}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.5vh,15px) 16px}
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f.col2{grid-column:span 2}
.f.col3{grid-column:span 3}
.f label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#7688a1;font-weight:700}
.f label .req{color:var(--red)}
.f input,.f select,.f textarea{padding:8px 10px;border:1px solid #d3dbe8;border-radius:8px;background:#fff;color:#1a2436;width:100%;min-width:0}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,178,60,.16)}
.f input:disabled,.f select:disabled{background:#f3f5f9;color:#7d8ba1;cursor:not-allowed}
.f .hint{font-size:11px;color:#9aa8bd}
.f.derived-field label::after{content:" • auto";color:var(--gold-dim);font-weight:700}
.divider{grid-column:span 3;border-top:1px dashed #e0e6ef;margin:2px 0 0;padding-top:3px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#a6b2c4;font-weight:700}
.calc-preview{grid-column:span 3;background:#0f1b30;border-radius:11px;padding:clamp(10px,1.5vh,14px) 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:2px}
.calc-preview .cp{display:flex;flex-direction:column;gap:2px;min-width:0}
.calc-preview .cp .l{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#63799a;font-weight:700}
.calc-preview .cp .v{font-family:var(--mono);font-size:clamp(14px,1.8vh,17px);color:#fff;font-weight:600}
.calc-preview .cp .v.gold{color:var(--gold)}
.modal-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:clamp(11px,1.6vh,16px) clamp(16px,2vw,22px);border-top:1px solid #eef1f6;
  background:#fafbfd;border-radius:0 0 16px 16px;flex:0 0 auto;flex-wrap:wrap;
}
.modal-foot .msg{font-size:12.5px;color:var(--red);font-weight:600;max-width:520px}
.modal-foot .msg.warn{color:#8a6d1e;background:#fdf6e3;border:1px solid #f0e2bd;border-radius:8px;padding:7px 11px;font-weight:600}
/* short screens (laptops, split windows): trade padding for form rows */
@media(max-height:820px){
  .modal-head .mh-sub{display:none}
  .f .hint{font-size:10.5px}
}
@media(max-height:680px){
  .calc-preview{grid-template-columns:repeat(4,1fr);padding:9px 13px}
  .calc-preview .cp .v{font-size:14px}
}

/* ---------- Dashboard ---------- */
.dash-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-top:4px}
.card{background:#fff;border:1px solid #e4e9f2;border-radius:14px;padding:18px 20px}
.card h3{margin:0 0 2px;font-size:14px;color:#141d2e}
.card .csub{font-size:11.5px;color:#9aa8bd;margin-bottom:14px}
.bar-row{display:grid;grid-template-columns:150px 1fr 92px;align-items:center;gap:12px;margin-bottom:9px}
.bar-row .bname{font-size:12.5px;color:#3a4658;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:22px;background:#f0f3f8;border-radius:6px;overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#2f5fa5,#5f9be0);transition:width .5s cubic-bezier(.4,0,.2,1)}
.bar-fill.svc{background:linear-gradient(90deg,var(--gold-dim),#f0cf78)}
.bar-track .bar-pct{
  position:absolute;right:8px;top:0;line-height:22px;font-family:var(--mono);font-size:11px;
  font-weight:700;color:#5d6d85;pointer-events:none;
}
.bar-val{font-family:var(--mono);font-size:12.5px;text-align:right;color:#243247;font-weight:600}
.trend{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:10px;border-bottom:1px solid #eef1f6}
.trend .tcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.trend .tbar{width:100%;max-width:52px;background:linear-gradient(180deg,var(--gold),var(--gold-dim));border-radius:6px 6px 0 0;min-height:3px;transition:height .5s ease;position:relative}
.trend .tbar:hover::after{content:attr(data-v);position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:#0e1726;color:#fff;font-size:11px;font-family:var(--mono);padding:2px 7px;border-radius:5px;white-space:nowrap}
.trend .tlab{font-size:11px;color:#9aa8bd;white-space:nowrap}
.matrix{width:100%;font-size:12.5px;border-collapse:collapse;min-width:0}
.matrix th{text-align:left;padding:8px 9px;color:#7688a1;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #eef1f6}
.matrix th.num,.matrix td.num{text-align:right;font-family:var(--mono)}
.matrix td{padding:8px 9px;border-bottom:1px solid #f3f5f9;color:#33415a}
.matrix tr:hover td{background:#fbfcfe}
.matrix .dep{font-weight:600;color:#1a2436}
.matrix .barcell{position:relative}
.matrix .barcell .mini{position:absolute;left:9px;right:9px;bottom:3px;height:3px;background:#eef1f6;border-radius:2px;overflow:hidden}
.matrix .barcell .mini span{display:block;height:100%;background:var(--gold)}

/* ---------- Reference view ---------- */
.ref-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.ref-card{background:#fff;border:1px solid #e4e9f2;border-radius:13px;padding:0;overflow:hidden}
.ref-card .rh{padding:13px 17px;background:#0f1b30;color:#c9d6ea;font-weight:700;font-size:12.5px;letter-spacing:.05em;display:flex;justify-content:space-between;align-items:center}
.ref-card .rh .cnt{font-family:var(--mono);color:#63799a;font-weight:600}
.ref-list{padding:10px 12px;display:flex;flex-wrap:wrap;gap:7px}
.chip{background:#f2f5fa;border:1px solid #e4e9f2;color:#3a4658;padding:5px 11px;border-radius:20px;font-size:12px;font-family:var(--mono);display:inline-flex;align-items:center;gap:7px}
.chip .x{cursor:pointer;color:#b3bfd0;font-weight:700;line-height:1;font-family:var(--sans);font-size:14px;transition:.12s}
.chip .x:hover{color:var(--red)}
.chip.edit{background:#fff;border-color:var(--gold);padding:2px 4px 2px 9px}
.chip.edit input{border:0;outline:0;font-family:var(--mono);font-size:12px;width:120px;color:#1a2436;background:transparent}
.chip .ok{cursor:pointer;color:var(--green);font-weight:700;font-size:13px}
.chip .txt{cursor:text}
/* marks a value the app adopted from a transaction rather than an admin edit */
.chip .auto{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#1f8a54;background:#e6f5ed;border:1px solid #c3e6d4;border-radius:9px;padding:1px 5px;line-height:1.4;cursor:help}
.ref-add{padding:0 12px 12px;display:flex;gap:7px}
.ref-add input{flex:1;padding:6px 10px;border:1px dashed #c7d0de;border-radius:8px;font-family:var(--mono);font-size:12px;background:#fbfcfe}
.ref-add input:focus{outline:0;border-color:var(--gold);border-style:solid;box-shadow:0 0 0 3px rgba(227,178,60,.16)}
.ref-add button{padding:6px 12px}
.ref-card.locked .ref-add,.ref-card.locked .chip .x{display:none}
.ref-card .lockmsg{padding:0 12px 12px;font-size:11px;color:#b3bfd0}
.dep-edit{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dep-col h4{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#7688a1}
.map-table td .mini-in{width:100%;padding:5px 8px;border:1px solid #d3dbe8;border-radius:6px;font-family:var(--mono);font-size:12px}
.map-table td .mini-in:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 2px rgba(227,178,60,.16)}
.map-table tr.editing td{background:#fffdf5}
.map-table .rowbtns{display:flex;gap:5px}
.map-table{width:100%;border-collapse:collapse;font-size:12.5px}
.map-table th{background:#f7f9fc;text-align:left;padding:9px 12px;color:#7688a1;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid #eef1f6}
.map-table td{padding:8px 12px;border-bottom:1px solid #f3f5f9;color:#33415a}
.map-table td.mono{font-family:var(--mono)}

/* ---------- Employees / duplicates / data gaps ---------- */
.ref-card.wide{grid-column:1 / -1}
.ref-list.scroll{max-height:190px;overflow-y:auto;align-content:flex-start}
.cnt-badge{display:inline-block;background:var(--gold);color:#1a1206;font-family:var(--mono);font-size:11px;font-weight:700;border-radius:20px;padding:1px 8px;margin-left:7px;vertical-align:middle}
.warnbar{
  background:#fdf6e3;border:1px solid #f0e2bd;color:#8a6d1e;border-radius:9px;
  padding:9px 13px;font-size:12px;line-height:1.6;margin:10px 0 4px;
}
.warnbar strong{font-family:var(--mono)}
.warnbar .btn.sm{margin-left:6px;vertical-align:baseline}
.dup-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #f3f5f9}
.dup-row:last-child{border-bottom:0}
.dup-side{min-width:0}
.dup-side .dn{font-weight:600;color:#1a2436;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dup-side .dm{font-size:11.5px;color:#9aa8bd;margin:2px 0 7px}
.dup-row .dup-side:last-child{text-align:right}
.dup-mid{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto}
.dup-dist{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#9aa8bd;font-weight:700;white-space:nowrap}
.dup-same{font-size:10px;background:#fdf5e8;color:#b58524;border-radius:20px;padding:2px 8px;font-weight:700;white-space:nowrap}
@media(max-width:720px){ .dup-row{grid-template-columns:1fr;text-align:left} .dup-row .dup-side:last-child{text-align:left} }

/* ---------- Activity log ---------- */
.audit-wrap{max-height:340px;overflow:auto;border:1px solid #e4e9f2;border-radius:10px;margin-top:12px}
.audit-table{width:100%;border-collapse:collapse;font-size:12.5px}
.audit-table th{position:sticky;top:0;background:var(--table-head-bg);color:var(--table-head-text);text-align:left;padding:8px 11px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--table-head-border)}
.audit-table td{padding:8px 11px;border-bottom:1px solid #f3f5f9;color:#33415a;vertical-align:top}
.audit-table tr:last-child td{border-bottom:0}
.audit-table .a-when{white-space:nowrap;color:#6b7b93;font-family:var(--mono);font-size:11.5px}
.audit-table .a-op{white-space:nowrap;font-weight:600}
.audit-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:20px;white-space:nowrap}
.audit-tag.create{background:#eaf6f0;color:#2f9c73}
.audit-tag.edit{background:#e9f0fb;color:#3f77c4}
.audit-tag.delete{background:#fdf3f3;color:#c0564e}
.audit-tag.ref,.audit-tag.data{background:#f0eefb;color:#7a6bd0}
.audit-tag.sap{background:#e6f5ed;color:#1f8a54}
.audit-det{color:#4a5a75}
.audit-det .chg{display:block;font-size:11.5px;color:#7688a1;margin-top:2px}
.audit-det .chg b{color:#33415a;font-weight:600}
.audit-empty{padding:26px;text-align:center;color:#9aa8bd;font-size:12.5px}

/* ---------- Settings view ---------- */
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.logo-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.logo-prev{
  width:76px;height:76px;border-radius:14px;flex:0 0 auto;border:1px solid #e4e9f2;background:#0f1b30;
  display:grid;place-items:center;overflow:hidden;
}
.logo-prev img{width:100%;height:100%;object-fit:contain;display:block}
.logo-prev .letter{
  width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:19px;color:#1a1206;
  background:radial-gradient(120% 120% at 30% 20%,var(--gold) 0%,var(--gold-dim) 70%);
}
.logo-actions{display:flex;flex-direction:column;gap:8px}
.logo-actions .row{display:flex;gap:8px;flex-wrap:wrap}
.set-note{font-size:11.5px;color:#9aa8bd;line-height:1.5}
.brand .mark img{width:100%;height:100%;object-fit:contain;display:block;border-radius:5px}
/* Uploaded logos sit in a white box so dark blue/green marks stay visible
   against the now-light nav bar — the old rule stripped the background and
   shadow, which made a dark logo vanish. */
.brand .mark.has-logo{
  background:var(--logo-box-bg);border:1px solid var(--logo-box-border);
  box-shadow:var(--logo-box-shadow);padding:3px;
}

.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid #f3f5f9}
.set-row:last-child{border-bottom:0}
.set-row .sl{font-size:12.5px;color:#3a4658;font-weight:600}
.set-row .sd{font-size:11px;color:#9aa8bd;margin-top:2px}
.set-row select,.set-row input[type=number]{padding:7px 10px;border:1px solid #d3dbe8;border-radius:8px;background:#fff;color:#1a2436;min-width:150px}
.set-row select:focus,.set-row input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,178,60,.16)}
.switch{position:relative;width:44px;height:24px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .sl-track{position:absolute;inset:0;background:#d3dbe8;border-radius:20px;cursor:pointer;transition:.2s}
.switch .sl-track::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .sl-track{background:var(--green)}
.switch input:checked + .sl-track::before{transform:translateX(20px)}
.switch input:disabled + .sl-track{opacity:.45;cursor:not-allowed}
.pathbox{
  font-family:var(--mono);font-size:12px;background:#f7f9fc;border:1px solid #e4e9f2;border-radius:8px;
  padding:8px 11px;color:#3a4658;word-break:break-all;flex:1;min-width:160px;
}
.pathbox.none{color:#b3bfd0;font-style:italic;font-family:var(--sans)}
.pathbox.warn{background:#fdf6e3;border-color:#f0e2bd;color:#8a6d1e}
.ab-state{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:20px}
.ab-state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ab-state.on{background:#eaf6f0;color:#2f7d5b}
.ab-state.off{background:#eef2f8;color:#7688a1}
.ab-state.warn{background:#fdf6e3;color:#8a6d1e}
.ab-state.err{background:#fdf3f3;color:#b64b4b}
#abBadge{cursor:pointer}
@media(max-width:1080px){ .set-grid{grid-template-columns:1fr} }

/* ---------- Sortable headers ---------- */
thead th[data-sort]{cursor:pointer;user-select:none;position:relative;padding-right:20px}
thead th[data-sort]:hover{background:var(--table-head-hover);color:var(--table-head-sorted)}
thead th[data-sort]::after{
  content:"";position:absolute;right:7px;top:50%;transform:translateY(-50%);
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-bottom:5px solid currentColor;opacity:0;transition:.15s;
}
thead th[data-sort]:hover::after{opacity:.45}
thead th.sorted{color:var(--table-head-sorted)}
thead th.sorted::after{opacity:1}
thead th.sorted.desc::after{border-bottom:0;border-top:5px solid currentColor}
thead th[data-sort]:focus-visible{outline:2px solid var(--nav-focus);outline-offset:-2px}


/* =====================================================================
   FORM-BASED PRINTING
   ---------------------------------------------------------------------
   Two distinct layouts, both built into #printForms (hidden on screen,
   shown only while printing):
     • .pv  — "voucher": ONE record per page, full detail, signature block
     • .pc  — "card":    batch mode, two compact record forms per page
   The existing table print (Print list) is untouched; a body class
   decides which of the three print modes the stylesheet applies.
   ===================================================================== */
#printForms{display:none}

/* ---- selection column (screen only) ---- */
.selcol{width:34px;text-align:center;padding-left:8px;padding-right:4px}
th.selcol{padding-top:0;padding-bottom:0}
.rowsel{
  width:15px;height:15px;cursor:pointer;accent-color:var(--gold);vertical-align:middle;margin:0;
}
/* ---- SAP-processing column (operationally important — never hidden by .p1/.p2/.p3) ---- */
.proc-col{white-space:nowrap;text-align:left}
.proc-cell{display:inline-flex;align-items:center;gap:6px}
.proc-check{width:15px;height:15px;cursor:pointer;accent-color:#1f8a54;vertical-align:middle;margin:0;flex:0 0 auto}
.proc-check:disabled{cursor:progress;opacity:.5}
.sap-type{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.03em;padding:1px 6px;border-radius:5px;line-height:1.5}
.sap-type.pr{background:#e7eefb;color:#2f62b0}
.sap-type.pt{background:#fbf1e6;color:#b0742b}
.sap-type.review{background:#f0eefb;color:#7a6bd0}
.proc-print{display:none}   /* text shown only in printed table output */
tbody tr.selected td{background:#fffaf0}
tbody tr.selected:hover td{background:#fff5e2}
.selbar{
  display:none;align-items:center;gap:12px;flex-wrap:wrap;
  background:linear-gradient(135deg,#0f1b30 0%,#1b3050 100%);
  border-radius:12px;padding:11px 16px;margin-bottom:14px;color:#dce6f5;
}
.selbar.show{display:flex}
.selbar .scount{font-family:var(--mono);font-weight:700;color:#fff;font-size:13.5px}
.selbar .scount b{color:var(--gold)}
.selbar .shidden{font-size:11.5px;color:#f0cf78;background:rgba(227,178,60,.12);border:1px solid rgba(227,178,60,.28);border-radius:20px;padding:3px 10px}
.selbar .sspacer{flex:1}
.selbar .btn{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);color:#eaf1fb}
.selbar .btn:hover{background:rgba(255,255,255,.18)}
.selbar .btn.gold{background:linear-gradient(180deg,var(--gold),var(--gold-dim));border-color:var(--gold-dim);color:#1a1206}
.selbar .btn.gold:hover{filter:brightness(1.06)}
.selbar .btn.green{background:linear-gradient(180deg,#2fa968,#1f8a54);border-color:#1f8a54;color:#fff}
.selbar .btn.green:hover{filter:brightness(1.06)}
.printmenu{position:relative;display:inline-flex}
.printmenu .pmpop{
  position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #d9e0ec;
  border-radius:11px;box-shadow:0 14px 40px rgba(12,22,42,.22);padding:6px;min-width:236px;z-index:50;display:none;
}
.printmenu.open .pmpop{display:block}
.pmpop button{
  display:flex;width:100%;gap:10px;align-items:flex-start;background:transparent;border:0;
  padding:9px 11px;border-radius:8px;cursor:pointer;text-align:left;color:#243247;
}
.pmpop button:hover{background:#f4f7fc}
.pmpop button .pmt{font-weight:700;font-size:12.5px;display:block}
.pmpop button .pmd{font-size:11px;color:#8b99ae;display:block;margin-top:1px;font-weight:500;line-height:1.4}
.pmpop .pmsep{height:1px;background:#eef1f6;margin:5px 4px}

/* =====================  PRINTED FORM LAYOUTS  ====================== */
/* Shared shell */
.pf-doc{color:#000;font-family:var(--sans)}
.pf-brand{display:flex;align-items:flex-start;gap:12pt;border-bottom:2pt solid #0f1b30;padding-bottom:7pt}
.pf-brand .pf-logo{width:42pt;height:42pt;object-fit:contain;flex:0 0 auto}
.pf-brand .pf-mark{
  width:34pt;height:34pt;border-radius:6pt;background:#0f1b30;color:#e3b23c;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16pt;flex:0 0 auto;
}
.pf-brand .pf-tt{flex:1;min-width:0}
.pf-brand h1{margin:0;font-size:15pt;letter-spacing:.02em;color:#0f1b30}
.pf-brand .pf-sub{font-size:8.5pt;color:#555;margin-top:1pt;letter-spacing:.12em;text-transform:uppercase}
.pf-brand .pf-ref{text-align:right;font-size:8pt;color:#444;flex:0 0 auto}
.pf-brand .pf-ref .pf-no{font-family:var(--mono);font-size:12pt;font-weight:700;color:#0f1b30;letter-spacing:.02em}

/* Section headings inside a form */
.pf-sec{
  margin:9pt 0 4pt;font-size:8pt;letter-spacing:.14em;text-transform:uppercase;
  color:#0f1b30;font-weight:800;border-bottom:.75pt solid #b9c4d6;padding-bottom:2pt;
}
/* Field grid — label above value, boxed like a paper form */
/* Field grid — label above value, boxed like a paper form.
   grid-auto-rows:min-content is essential: without it the implicit rows
   stretch to fill whatever space is going, so a short row (or one with
   empty values) balloons to a huge box and pushes the signature block onto
   a second page. Rows now size to their content and the cell's height
   floor is applied to the inner block, not to the grid item itself. */
.pf-grid{
  display:grid;gap:0;border-left:.5pt solid #c8d0dd;border-top:.5pt solid #c8d0dd;
  grid-auto-rows:min-content;align-content:start;
}
.pf-grid.c3{grid-template-columns:repeat(3,1fr)}
.pf-grid.c2{grid-template-columns:repeat(2,1fr)}
.pf-grid.c4{grid-template-columns:repeat(4,1fr)}
.pf-f{border-right:.5pt solid #c8d0dd;border-bottom:.5pt solid #c8d0dd;padding:3.5pt 6pt;min-height:0}
.pf-f-in{min-height:19pt}
.pf-f.span2{grid-column:span 2}
.pf-f.span3{grid-column:span 3}
.pf-f .pf-l{font-size:6.5pt;letter-spacing:.1em;text-transform:uppercase;color:#6b7a90;font-weight:700}
.pf-f .pf-v{font-size:9.5pt;color:#000;margin-top:1.5pt;word-break:break-word;line-height:1.3}
.pf-f .pf-v.mono{font-family:var(--mono)}
.pf-f .pf-v.big{font-size:11pt;font-weight:700}
.pf-f .pf-v.pf-blank{color:#9aa8bd}

/* Financial summary strip */
.pf-fin{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:7pt;border:1pt solid #0f1b30}
.pf-fin .pf-fc{padding:5pt 7pt;border-right:.5pt solid #c8d0dd;text-align:right}
.pf-fin .pf-fc:last-child{border-right:0;background:#f0f3f8}
.pf-fin .pf-fl{font-size:6.5pt;letter-spacing:.1em;text-transform:uppercase;color:#6b7a90;font-weight:700}
.pf-fin .pf-fv{font-family:var(--mono);font-size:11pt;font-weight:700;margin-top:1.5pt}
.pf-fin .pf-fc.net .pf-fv{font-size:12.5pt}

/* Signature block */
.pf-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:16pt;margin-top:16pt}
.pf-sign .pf-sg{font-size:7.5pt;color:#444}
.pf-sign .pf-sline{border-top:.75pt solid #333;margin-bottom:3pt;height:26pt}
.pf-sign .pf-sn{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:7pt;color:#0f1b30}
.pf-sign .pf-sd{font-size:6.5pt;color:#888;margin-top:1pt}

.pf-foot{margin-top:10pt;border-top:.5pt solid #c8d0dd;padding-top:4pt;font-size:6.5pt;color:#888;display:flex;justify-content:space-between;gap:10pt}

/* ---- BATCH CARD (compact — up to 5 per A4 portrait page) ----
   Cards are packed onto measured print-page containers by paginateBatch();
   sizes here are tuned so five cards + the compact running header clear one
   A4 portrait page at 7mm margins. Long values wrap inside their cell. */
.pc{border:.75pt solid #333;border-radius:2pt;padding:3.5pt 6pt;margin:0 0 3pt;box-sizing:border-box}
.pc:last-child{margin-bottom:0}
.pc-top{display:flex;justify-content:space-between;align-items:baseline;gap:8pt;border-bottom:.6pt solid #333;padding-bottom:2.5pt;margin-bottom:3pt}
.pc-top .pc-no{font-family:var(--mono);font-weight:700;font-size:8.5pt;color:#111;white-space:nowrap}
.pc-top .pc-emp{font-size:9pt;font-weight:700;color:#111;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-top .pc-date{font-size:7.5pt;color:#333;font-family:var(--mono);white-space:nowrap}
.pc-net{text-align:right;white-space:nowrap}
.pc-net .l{font-size:5.5pt;letter-spacing:.08em;text-transform:uppercase;color:#555;font-weight:700}
.pc-net .v{font-family:var(--mono);font-size:9pt;font-weight:700;color:#111}
/* tighter field cells inside a batch card only */
.pc .pf-f{min-height:0;padding:1.3pt 4pt;box-sizing:border-box}
.pc .pf-f-in{min-height:0}
.pc .pf-f .pf-l{font-size:5.7pt;letter-spacing:.05em;line-height:1.1}
.pc .pf-f .pf-v{font-size:7.8pt;margin-top:.3pt;line-height:1.12;overflow-wrap:anywhere}
.pc .pf-grid{border-left:.4pt solid #bbb;border-top:.4pt solid #bbb}
.pc .pf-f{border-right:.4pt solid #bbb;border-bottom:.4pt solid #bbb}

/* Compact running header repeated on every detail page (consistent, not
   decorative). Deliberately short so cards get the maximum vertical space. */
.pb-head{display:flex;align-items:center;gap:8pt;border-bottom:1pt solid #333;padding-bottom:3pt;margin-bottom:4pt}
.pb-head .pb-logo{width:22pt;height:22pt;object-fit:contain;flex:0 0 auto}
.pb-head .pb-mark{width:20pt;height:20pt;border-radius:4pt;background:#0f1b30;color:#e3b23c;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11pt;flex:0 0 auto}
.pb-head .pb-tt{flex:1;min-width:0}
.pb-head .pb-tt h1{margin:0;font-size:10.5pt;color:#111;letter-spacing:.01em}
.pb-head .pb-tt .pb-s{font-size:6.5pt;color:#555;letter-spacing:.12em;text-transform:uppercase}
.pb-head .pb-meta{text-align:right;font-size:6.5pt;color:#444;white-space:nowrap;line-height:1.3}
.pb-head .pb-meta b{font-size:8pt;color:#111}

/* Batch summary page */
.pb-page .pf-brand{padding-bottom:5pt}
.pb-page .pf-brand h1{font-size:12.5pt}
.pb-page .pf-brand .pf-logo,.pb-page .pf-brand .pf-mark{width:28pt;height:28pt;font-size:13pt}
.pb-sum{margin-top:10pt;border:1pt solid #0f1b30;padding:7pt 9pt}
.pb-sum h3{margin:0 0 5pt;font-size:9pt;letter-spacing:.1em;text-transform:uppercase;color:#0f1b30}
.pb-srow{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:.5pt solid #c8d0dd}
.pb-srow .pb-c{padding:4pt 6pt;border-right:.5pt solid #c8d0dd;text-align:right}
.pb-srow .pb-c:last-child{border-right:0}
.pb-srow .pb-l{font-size:6.5pt;letter-spacing:.1em;text-transform:uppercase;color:#6b7a90;font-weight:700}
.pb-srow .pb-v{font-family:var(--mono);font-size:10.5pt;font-weight:700;margin-top:1pt}

/* =====================  PRINT MEDIA RULES  ========================= */
@media print{
  /* ---- form modes: hide the app entirely, show only the forms ---- */
  body.printing-form header.topbar,
  body.printing-form main,
  body.printing-form .toast,
  body.printing-form .overlay{display:none!important}
  body.printing-form #printForms{display:block!important}
  body.printing-form{background:#fff!important}

  /* voucher: one record per page, portrait.
     Each .pf-page is forced to break after, and nothing inside it may split,
     so the signature block and footer can never be orphaned onto a page 2. */
  body.print-single #printForms .pf-page{
    page-break-after:always;break-after:page;
    page-break-inside:avoid;break-inside:avoid;
  }
  body.print-single #printForms .pf-page:last-child{page-break-after:auto;break-after:auto}
  body.print-single .pf-grid,
  body.print-single .pf-fin,
  body.print-single .pf-sign,
  body.print-single .pf-brand{page-break-inside:avoid;break-inside:avoid}

  /* batch: cards are pre-assigned to .pb-page containers by paginateBatch(),
     so each page breaks after and neither a page nor a card may split. */
  body.print-batch .pb-page{page-break-after:always;break-after:page;page-break-inside:avoid}
  body.print-batch .pb-page:last-child{page-break-after:auto;break-after:auto}
  body.print-batch .pc{page-break-inside:avoid;break-inside:avoid}
  body.print-batch .pb-sum,body.print-batch .pf-sign{page-break-inside:avoid;break-inside:avoid}

  .pf-doc{color:#000!important}
  .pf-brand .pf-mark,.pf-fin,.pf-fin .pf-fc:last-child,.pc,.pb-sum{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
}
/* page size is switched per mode via a runtime <style> (see setPrintPage) */
/* ---------- Print (table / list mode — unchanged behaviour) ---------- */
.printhead{display:none}
@media print{
  @page{size:A4 landscape;margin:12mm}
  html,body{background:#fff!important;font-size:9pt}
  /* release the on-screen viewport locks — printed tables must flow across
     pages, not be clipped to one screenful */
  html,body{height:auto!important;overflow:visible!important;display:block!important}
  main{flex:none!important;overflow:visible!important;display:block!important;min-height:0!important}
  header.topbar,.toolbar,.kpis,.filterbar,.colnote,.actcol,.rowact,.toast,.overlay,nav.tabs{display:none!important}
  .selbar,.selcol{display:none!important}
  /* SAP-processing column prints as plain text, not a checkbox graphic */
  .proc-check,.proc-cell .sap-type{display:none!important}
  .proc-print{display:inline!important;font-size:8pt;color:#000}
  main{max-width:none;padding:0}
  .view{display:none!important}
  .view.active{display:block!important;overflow:visible!important}
  .tablewrap{display:block!important}
  .printhead{display:block;margin-bottom:8pt;border-bottom:1.5pt solid #0f1b30;padding-bottom:6pt}
  .printhead h2{margin:0 0 2pt;font-size:13pt;color:#000}
  .printhead .pmeta{font-size:8pt;color:#444}
  .tablewrap{border:0;border-radius:0}
  .table-scroll{overflow:visible!important;max-height:none!important}
  table{font-size:8pt;width:100%}
  thead{display:table-header-group}          /* repeat headers on every page */
  tfoot{display:table-footer-group}
  thead th{background:#0f1b30!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;padding:4pt 5pt;position:static}
  thead th[data-sort]::after{display:none}
  tbody td{padding:3pt 5pt;white-space:normal;border-bottom:.5pt solid #ccc}
  tbody tr{page-break-inside:avoid}
  tfoot td{position:static;background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pill{border:.5pt solid #999;background:none!important;color:#000!important;padding:1pt 4pt}
  .pill::before{display:none}
  .p1,.p2,.p3,col.p1,col.p2,col.p3{display:table-cell}
}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:#0e1726;color:#fff;padding:12px 20px;border-radius:11px;box-shadow:var(--shadow);font-weight:600;font-size:13px;display:flex;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:.3s;z-index:80}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:17px;height:17px;stroke:var(--green);fill:none;stroke-width:2.5}
.toast.err svg{stroke:var(--red)}

.confirm .modal{max-width:min(420px,94vw)}
.confirm .modal-body{padding:24px}
.confirm p{margin:0;color:#4a5a75;font-size:14px;line-height:1.5}
.confirm .cwho{font-weight:700;color:#141d2e}

@media(max-width:1400px){ #dbKpis{grid-template-columns:repeat(4,1fr)} }
@media(max-width:1080px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  #dbKpis{grid-template-columns:repeat(3,1fr)}
  .dash-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .f.col3{grid-column:span 2}
  .divider{grid-column:span 2}
  .calc-preview{grid-column:span 2;grid-template-columns:repeat(4,1fr)}
  .ref-grid{grid-template-columns:1fr}
  .dep-edit{grid-template-columns:1fr}
}
@media(max-width:1180px){
  .brand .sub{display:none}
  #dbLabel .dbdetail{display:none}
}
@media(max-width:860px){
  .brand{padding-right:12px;margin-right:12px}
  nav.tabs button{padding:0 10px;font-size:12px}
  .db-badge{padding:0 9px}
}
@media(max-width:720px){
  header.topbar{padding:0 12px}
  .brand{padding-right:10px;margin-right:10px}
  .brand .btxt{display:none}              /* logo mark only — the tabs need the room */
  #dbBadge{display:none}
  .topbar-spacer{display:none}
  /* single slim row is kept; the tab strip scrolls sideways instead of wrapping */
  nav.tabs{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs button{padding:0 11px;font-size:11.5px;flex:0 0 auto}
  .form-grid{grid-template-columns:1fr}
  .f.col2,.f.col3{grid-column:span 1}
  .divider{grid-column:span 1}
  .calc-preview{grid-column:span 1;grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr 1fr}
  #dbKpis{grid-template-columns:repeat(2,1fr)}
  /* phone: use the whole screen rather than a floating card */
  .overlay{padding:0;align-items:stretch}
  .modal{max-width:100%;max-height:100vh;max-height:100dvh;border-radius:0}
  .modal-head,.modal-foot{border-radius:0}
  .modal-foot{justify-content:flex-end}
  .modal-foot .msg{width:100%;order:-1;max-width:none}
  .confirm .overlay,.confirm.overlay{padding:16px;align-items:center}
  .confirm .modal{max-width:min(420px,94vw);max-height:calc(100vh - 32px);border-radius:16px}
  .confirm .modal-head,.confirm .modal-foot{border-radius:16px 16px 0 0}
  .confirm .modal-foot{border-radius:0 0 16px 16px}
}

/* =====================================================================
   FRONTEND-SPLIT ADDITIONS (server-backed rewrite)
   ===================================================================== */

/* ---------- named print pages ----------
   The legacy injected a runtime <style> with @page rules (setPrintPage);
   CSP style-src 'self' forbids that, so page size/margin switching now uses
   named pages toggled by the body print classes the driver already sets. */
@page form { size:A4 portrait; margin:14mm }
@page batch { size:A4 portrait; margin:7mm }
@media print{
  body.print-single #printForms{page:form}
  body.print-batch #printForms{page:batch}
}

/* ---------- extracted inline styles ---------- */
.hidden{display:none}
.flex1{flex:1}
.mw160{max-width:160px}
.mw200{max-width:200px}
.mw220{max-width:220px}
.mwi210{min-width:210px}
.m0{margin:0}
.mt6{margin-top:6px}
.mt12{margin-top:12px}
.mt18{margin-top:18px}
.mb12{margin-bottom:12px}
.mb16{margin-bottom:16px}
.mb18{margin-bottom:18px}
.svg13{width:13px;height:13px}
.svg14{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.kpis-4{grid-template-columns:repeat(4,1fr)}
.kpis-5{grid-template-columns:repeat(5,1fr)}
.h2-plain{margin:0;font-size:17px;color:#141d2e}
.sub-note{font-size:12.5px;color:#9aa8bd}
.card-head-flex{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-head-flex-c{display:flex;align-items:center;justify-content:space-between}
.foot-btns{display:flex;gap:10px;margin-left:auto}
.pw-input{width:100%;padding:10px 12px;border:1px solid #d3dbe8;border-radius:9px;font-size:14px}
.msg-mt{margin-top:10px;min-height:16px}
.msg-mt8{margin-top:8px;min-height:16px}
.btn-red-solid{border-color:var(--red);color:#fff;background:var(--red)}
.tl-bar{background:linear-gradient(180deg,#e3b23c,#a7842a)}
.tl-line{background:#7a6bd0}
.tl-avg{background:#cfd8e6}
.dim-note{color:#9aa8bd;padding:8px}
.none-yet{color:#b3bfd0;font-size:12px}
.matrix-empty{padding:20px;text-align:center;color:#9aa8bd}
.fw600{font-weight:600}
.kpi-smval{font-size:17px}
.empty-chart{padding:40px;text-align:center;color:#9aa8bd}
.ref-list-btm{padding:0 0 10px}
.ref-add-flat{padding:0}
.legend-note{color:#9aa8bd;font-size:12.5px}
/* colgroup widths extracted from <col style="width:Npx"> */
.cw-26{width:26px}.cw-30{width:30px}.cw-32{width:32px}.cw-60{width:60px}
.cw-62{width:62px}.cw-64{width:64px}.cw-66{width:66px}.cw-68{width:68px}
.cw-70{width:70px}.cw-72{width:72px}.cw-74{width:74px}.cw-76{width:76px}
.cw-78{width:78px}.cw-80{width:80px}.cw-84{width:84px}.cw-86{width:86px}
.cw-88{width:88px}.cw-96{width:96px}.cw-100{width:100px}.cw-110{width:110px}
.cw-140{width:140px}

/* ---------- top bar: signed-in user ---------- */
.user-chip{display:flex;align-items:center;gap:8px;margin-left:10px;padding-left:14px;border-left:1px solid var(--nav-border)}
.user-chip .uname{color:var(--nav-text);font-size:12.5px;font-weight:600;white-space:nowrap}
.user-chip .urole{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:#0e1726;background:var(--gold);border-radius:20px;padding:2px 8px;text-transform:uppercase}
.user-chip .btn{white-space:nowrap}
@media(max-width:860px){ .user-chip .uname{display:none} }
/* Non-admin user-chip menu button: looks like the plain chip, opens .pmpop */
.usermenu-btn{display:flex;align-items:center;gap:8px;background:transparent;border:0;padding:0;cursor:pointer}
.usermenu .pmpop{min-width:210px}

/* ---------- role-based UI hiding (server enforces regardless) ---------- */
body.role-viewer .only-editor,body.role-viewer .only-admin{display:none!important}
body.role-editor .only-admin{display:none!important}
body.role-admin .only-nonadmin{display:none!important}

/* ---------- login page ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(160deg,#0e1726 0%,#16233c 55%,#1b2d4d 100%)}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(6,12,24,.45);overflow:hidden}
.login-head{padding:26px 28px 20px;border-bottom:1px solid #eef1f6;display:flex;align-items:center;gap:14px}
.login-head .mark{width:44px;height:44px;border-radius:12px;font-size:20px;background:radial-gradient(120% 120% at 30% 20%,var(--gold) 0%,var(--gold-dim) 70%);display:grid;place-items:center;font-weight:800;color:#1a1206}
.login-head h1{font-size:17px;margin:0;color:#141d2e}
.login-head .sub{font-size:12px;color:#9aa8bd;margin-top:2px}
.login-body{padding:22px 28px 26px}
.login-body .f{margin-bottom:14px}
.login-body .btn{width:100%;justify-content:center}
.login-err{background:#fdeeee;border:1px solid #f3caca;color:#a33a3a;border-radius:9px;padding:9px 12px;font-size:12.5px;margin-bottom:14px}
.login-note{font-size:12px;color:#9aa8bd;line-height:1.5;margin-top:14px}
.login-otp{display:block;width:100%;box-sizing:border-box;padding:12px;font-size:20px;letter-spacing:.35em;text-align:center;border:1px solid #d3dbe8;border-radius:9px;font-family:var(--mono)}
.login-qr{display:block;margin:6px auto 14px;width:180px;height:180px;border:1px solid #e4e9f2;border-radius:10px}
.login-secret{font-family:var(--mono);font-size:11px;word-break:break-all;background:#f5f7fb;border:1px solid #e4e9f2;border-radius:9px;padding:9px 11px;color:#33415e;user-select:all;margin-bottom:14px}
.login-pw-rules{font-size:12px;color:#6b7a90;line-height:1.6;margin:0 0 14px;padding-left:18px}

/* ---------- classes for styles formerly inline in GENERATED markup ---------- */
.mt3pt{margin-top:3pt}
.mt8pt{margin-top:8pt}
.pb-srow-1{grid-template-columns:1fr}
.pb-c-total{background:#f0f3f8}
.pb-v-big{font-size:14pt}
.pb-c-ok{background:#eef6f1}
.pb-c-warn{background:#fbf4ec}
.sval-u{font-size:12px;color:#9aa8bd;font-weight:600}
.heatpill-blue{color:#1c3560}
.iconbtn.ok{color:var(--green)}
.chip-x-float{float:right;cursor:pointer;color:#b3bfd0}
.donut-wrap circle.donut-arc{transition:stroke-dasharray .5s ease}

/* =====================================================================
   RESPONSIVE OVERHAUL (2026-08-06)
   ---------------------------------------------------------------------
   Everything below is scoped to `@media screen and (max-width:…)`, so
   desktop (≥1280px) and every @media print rule above are untouched.
   Breakpoints align with the legacy ones (1180 / 1080 / 1024 / 900 /
   768 / 720 / 560 / 480 / 400). Later rules win over earlier
   equal-specificity rules — that is what fixes the .kpis-4/.kpis-5
   utility classes overriding the narrow-window KPI grids.
   ===================================================================== */

/* Hamburger button — hidden on desktop, the media query below shows it.
   (header.topbar is display:none in print, so this never prints.) */
.nav-toggle{
  display:none;width:36px;height:36px;flex:0 0 auto;margin-left:8px;
  border:1px solid var(--nav-border);background:#fff;border-radius:8px;cursor:pointer;
  place-items:center;color:var(--nav-tab);transition:color .15s,background .15s;
}
.nav-toggle:hover{background:var(--nav-hover);color:var(--nav-active)}
.nav-toggle:focus-visible{outline:2px solid var(--nav-focus);outline-offset:-2px}
.nav-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* Generic horizontal-scroll wrapper for tables that live inside cards
   (users admin, G/L mapping, dashboard matrices). Screen-only: in print
   these views are hidden anyway and the wrapper must not clip. */
@media screen{
  .tscroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  .tscroll .map-table,.tscroll .matrix{min-width:560px}
}

/* ---------- dashboard copy buttons (clipboard-export.js) ----------
   Base rules keep the controls display:none — the @media screen block below
   is the ONLY place they become visible, so print output never contains them
   without touching any @media print rule. */
.cpwrap{display:none}
@media screen{
  .cpwrap{display:inline-block;position:relative;flex:0 0 auto;margin-left:auto}
  .cpwrap.floating{position:absolute;top:10px;right:12px;z-index:6}
  .cp-host{position:relative}
  .cpbtn{
    width:32px;height:32px;padding:6px;border:0;border-radius:8px;cursor:pointer;
    background:transparent;color:#a5b2c6;display:inline-flex;align-items:center;justify-content:center;
    transition:color .15s,background .15s;
  }
  .cpbtn:hover{background:#eef2f8;color:#33507e}
  .cpbtn:focus-visible{outline:2px solid var(--nav-focus);outline-offset:-2px}
  .cpbtn svg{width:16px;height:16px}
  .cpbtn .cpok{display:none}
  .cpbtn.ok .cpok{display:inline}
  .cpbtn.ok .cpico{display:none}
  .cpbtn.ok{color:var(--green)}
  /* hero cards sit on coloured gradients */
  .hero-card .cpbtn{color:rgba(255,255,255,.62)}
  .hero-card .cpbtn:hover{background:rgba(255,255,255,.14);color:#fff}
  .hero-card.gold .cpbtn{color:rgba(29,21,3,.5)}
  .hero-card.gold .cpbtn:hover{background:rgba(29,21,3,.12);color:#1d1503}
  .cpmenu{
    display:none;position:absolute;top:36px;right:0;z-index:30;min-width:150px;
    background:#fff;border:1px solid #e4e9f2;border-radius:10px;padding:4px;
    box-shadow:0 12px 30px rgba(20,35,65,.16);
  }
  .cpmenu.open{display:block}
  .cpmenu button{
    display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
    padding:8px 12px;font-size:12.5px;font-weight:600;color:#33507e;border-radius:7px;
  }
  .cpmenu button:hover,.cpmenu button:focus-visible{background:#eef2f8;outline:0}
}

/* Right-edge fade marking that a table panel scrolls sideways. The class
   is toggled by sizeTablePanels() only when content actually overflows. */
@media screen and (max-width:900px){
  .tablewrap.hint-x::before{
    content:"";position:absolute;top:0;right:0;bottom:0;width:20px;z-index:7;pointer-events:none;
    background:linear-gradient(to left,rgba(20,35,65,.12),rgba(20,35,65,0));
  }
}

/* ---------- 901–1180: tighten the tab strip so the bar always fits --- */
@media screen and (max-width:1180px){
  nav.tabs button{padding:0 12px}
}
@media screen and (max-width:1024px){
  nav.tabs button{padding:0 10px;font-size:12px}
  .brand .btxt{display:none}        /* logo mark only — room for the tabs */
  .brand{padding-right:12px;margin-right:12px}
  #dbBadge{display:none}
}

/* ---------- ≤900: tab strip becomes a hamburger drawer --------------- */
@media screen and (max-width:900px){
  .nav-toggle{display:grid}
  nav.tabs{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:45;
    flex-direction:column;gap:0;background:#fff;
    border-bottom:1px solid var(--nav-border);box-shadow:0 18px 40px rgba(12,22,42,.18);
    padding:6px 0;max-height:calc(100vh - 46px);max-height:calc(100dvh - 46px);overflow-y:auto;
  }
  nav.tabs.open{display:flex}
  nav.tabs button{
    padding:0 20px;font-size:13px;min-height:44px;justify-content:flex-start;
    border-bottom-color:transparent;border-left:3px solid transparent;
  }
  nav.tabs button.active{border-left-color:var(--nav-underline);background:var(--nav-hover)}
}

/* ---------- KPI strips: the .kpis-4/.kpis-5 utilities must not pin
   narrow windows to 4–5 sliver columns (they were declared after the
   legacy breakpoints, silently beating them) ------------------------- */
@media screen and (max-width:1080px){
  .kpis.kpis-4,.kpis.kpis-5{grid-template-columns:repeat(2,1fr)}
}

/* ---------- ≤768: comfortable touch targets, no iOS auto-zoom -------- */
@media screen and (max-width:768px){
  /* 16px minimum on text-entry controls keeps iOS from zooming on focus */
  .search input,.fld input,.fld select,.multi-btn,
  .f input,.f select,.f textarea,
  .toolbar select.btn,.filterbar select.btn,
  .login-body input,.set-row select,.set-row input,.ref-add input,
  .pw-input,.chip.edit input{font-size:16px}
  .toolbar .btn,.filterbar .btn,.selbar .btn,.modal-foot .btn,.login-body .btn,
  .ref-add button,.set-row .btn,.card-head-flex .btn,.card-head-flex-c .btn{min-height:40px}
  .modal-head .iconbtn{width:40px;height:40px}
  .rowsel,.proc-check{width:18px;height:18px}
}

/* ---------- ≤560: filter bars stack as a full-width form ------------- */
@media screen and (max-width:560px){
  .filterbar{flex-direction:column;align-items:stretch}
  .filterbar .fld{width:100%}
  .filterbar .fld input,.filterbar .fld select,
  .filterbar .multi,.filterbar .multi-btn{width:100%;min-width:0}
  .filterbar .flex1{display:none}
  .filterbar .btn{justify-content:center}
  .filterbar .printmenu{display:flex}
  .filterbar .printmenu .btn{flex:1;justify-content:center}
  .multi-pop{left:0;right:0;min-width:0}
  .toolbar .search{min-width:0;flex:1 1 100%}
  .toolbar .mw160,.toolbar .mw200{max-width:none}
  .selbar .sspacer{display:none}
}

/* ---------- ≤480: donut charts stack above their legends ------------- */
@media screen and (max-width:480px){
  .donut-wrap{flex-wrap:wrap}
  .donut-wrap svg{max-width:100%;height:auto}
}

/* ---------- ≤400: login card breathes on very small phones ----------- */
@media screen and (max-width:400px){
  .login-wrap{padding:12px}
  .login-head{padding:20px 18px 16px}
  .login-body{padding:18px 18px 20px}
}

/* =====================================================================
   AUTO-FIT COLUMNS + BRANDING (2026-08-06, second pass)
   ---------------------------------------------------------------------
   .fhide is toggled by fitTableColumns() (render.js) on col/th/td of a
   hidden f-group. Screen-only: the print rules above restore every
   column on paper regardless. Desktop identity is unchanged — the class
   is only applied while a table actually overflows its panel.
   ===================================================================== */
@media screen{
  .fhide{display:none}
  /* the narrow-window note also covers auto-fit-hidden columns */
  .colnote.show{display:inline-flex}
  /* uploaded logo on the sign-in card (header rules already cover .brand) */
  .login-head .mark.has-logo{background:#fff;border:1px solid #e4e9f2;box-shadow:0 2px 8px rgba(35,67,98,.10);padding:4px}
  .login-head .mark.has-logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:8px}
}

/* ---------- ≤1400: drop the badge detail so the stacked brand fits ----
   The two-line brand needs ~230px; the detail (" · v2026.08.05") is the
   spare fat. Below 1400 the bar would run over and the strap would slide
   under the first tab. The pulse dot + "Server DB" stay; the legacy rule
   hides the whole badge ≤1024. */
@media screen and (max-width:1400px){
  #dbLabel .dbdetail{display:none}
}

/* .logo-prev .letter (0,2,0) beats the plain .hidden utility — strengthen it */
@media screen{
  .logo-prev .letter.hidden{display:none}
}

/* ---------- admin column visibility (screen only — print shows all) ------ */
@media screen{
  .chide{display:none}
}

/* ---------- column visibility card ---------------------------------------- */
.cv-group{margin-bottom:12px}
.cv-group h4{margin:0 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#7688a1}
.cv-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 12px}
.cv-cols label{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#33415a;cursor:pointer;padding:3px 4px;border-radius:6px}
.cv-cols label:hover{background:#f4f7fc}
.cv-cols input{accent-color:#1D5FA7;cursor:pointer;margin:0}

/* =====================================================================
   ENTRY MODALS — DENSE DESKTOP GRID + VIEWPORT FIT (2026-08-07)
   ---------------------------------------------------------------------
   The New Transaction (#modal) and New Petty Cash Entry (#pcModal) forms
   overflowed a 1366x768 laptop screen. Screen-only, and scoped to those
   two overlays so the small confirm / password / user / attachments /
   restore dialogs sharing .modal/.form-grid are untouched:
     1. Density ≥1024px: tighter head/body/foot padding, 9px field-row
        gaps, 4px label gaps, ~36px inputs, slimmer dividers, calc panel
        and attachment rows. The ≤768px touch-target rules above are
        width-gated and still win on phones — no conflict.
     2. Wider, denser grids: travel goes 4-up on a ~1180px panel at
        ≥1280px viewport; petty cash keeps 3-up on a ~1000px panel at
        ≥1100px. Intermediate widths keep the legacy behaviour (travel
        3-up, petty cash 2-up); ≤720px everything stacks single-column.
   The .modal max-height + internal-scroll fallback stays for short
   viewports — it just never engages at 1366x768 or 1920x1080 anymore.
   ===================================================================== */
@media screen and (min-width:1024px){
  #modal .modal-head,#pcModal .modal-head{padding:10px 20px}
  #modal .modal-body,#pcModal .modal-body{padding:12px 20px}
  #modal .modal-foot,#pcModal .modal-foot{padding:8px 20px}
  #modal .form-grid,#pcModal .form-grid{gap:8px 14px}
  #modal .f,#pcModal .f{gap:4px}
  #modal .f input,#modal .f select,#modal .f textarea,
  #pcModal .f input,#pcModal .f select,#pcModal .f textarea{padding:6px 10px}
  #modal .divider,#pcModal .divider{margin:0;padding-top:2px}
  #modal .calc-preview{padding:8px 14px;margin-top:0}
  #modal .att-row,#pcModal .att-row{padding:5px 10px}
  #modal .att-empty,#pcModal .att-empty{padding:6px 2px}
}

/* short desktop windows (≤820px height): the last few px so the travel
   form still fits with two staged attachments and no fallback scroll --- */
@media screen and (min-width:1024px) and (max-height:820px){
  #modal .modal-head,#pcModal .modal-head{padding:9px 20px}
  #modal .form-grid,#pcModal .form-grid{row-gap:7px}
  #modal .att-row,#pcModal .att-row{padding:4px 10px}
  #modal .f .hint,#pcModal .f .hint{font-size:10.5px}
}

/* travel: 4-up on a wide panel ------------------------------------------ */
@media screen and (min-width:1280px){
  #modal .modal{max-width:min(1180px,96vw)}
  #modal .form-grid{grid-template-columns:repeat(4,1fr)}
  #modal .form-grid>.f:empty{display:none}        /* legacy 3-up spacers */
  #modal .f.col3,#modal .divider,#modal .calc-preview{grid-column:1/-1}
  /* Description pairs with Invoice on one full row */
  #modal .f:has(#m_desc){grid-column:span 3}
  /* staged/existing attachment rows pack 2-up so 0–2 files cost one row */
  #modal .f.col3{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
  #modal .f.col3 .att-empty{grid-column:1/-1}
}

/* petty cash: same 3-up grid on a wider panel ---------------------------- */
@media screen and (min-width:1100px){
  #pcModal .modal{max-width:min(1000px,96vw)}
  #pcModal .f.col3{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
  #pcModal .f.col3 .att-empty{grid-column:1/-1}
}
/* petty cash intermediate widths stay 2-up (travel stays 3-up) ----------- */
@media screen and (min-width:1081px) and (max-width:1099px){
  #pcModal .form-grid{grid-template-columns:repeat(2,1fr)}
  #pcModal .f.col3,#pcModal .divider{grid-column:span 2}
}

/* modern viewport units for the short-screen fallback (same cap) -------- */
@media screen{
  #modal .modal,#pcModal .modal{
    max-height:calc(100vh - clamp(20px,4.4vh,56px));
    max-height:calc(100dvh - clamp(20px,4.4vh,56px));
  }
}