/* ============================================================
   LGBMS portal styles - ported verbatim from the front-end
   prototype (prototype/index.html). Do not diverge from the
   prototype look; screen markup is being migrated to match.
   ============================================================ */

:root{
  /* Philippine government portal palette (PRC-style) */
  --font-sans:"Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --font-serif:Georgia,"Times New Roman","Noto Serif",serif;
  --gov-black:#0f0f10; --gov-black-ink:#d7dade;
  --band:#e9e7e0;               /* warm beige official header band */
  --band-ink:#12233b;
  --navy:#3c6497;               /* primary nav bar */
  --navy-deep:#2f4f78; --navy-ink:#eef3f8;
  --ground:#f2f3f4; --panel:#ffffff; --panel-2:#f5f6f7; --panel-3:#eaecee;
  --ink:#141719; --ink-soft:#565d64; --ink-faint:#858c93;
  --line:#d8dbde; --line-strong:#c2c7cc;
  --accent:#3c6497; --accent-bright:#1f8fb0; --accent-wash:#e7eef5;
  --ok:#2f7d3e; --ok-wash:#e6f1e7;
  --warn:#946213; --warn-wash:#f6eeda;
  --over:#c1272d; --over-wash:#f7e5e4;   /* flag red - alerts / over-obligation */
  --shadow-sm:0 1px 2px rgba(18,25,35,.07);
  --shadow-md:0 2px 6px rgba(18,25,35,.08),0 12px 28px -14px rgba(18,25,35,.22);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --gov-black:#08090a; --gov-black-ink:#c3c8ce;
    --band:#1b2431; --band-ink:#dfe6ef;
    --navy:#3f6ea8; --navy-deep:#335c8f; --navy-ink:#eef3f8;
    --ground:#0e1216; --panel:#161b21; --panel-2:#1b2128; --panel-3:#222a32;
    --ink:#e3e7eb; --ink-soft:#9aa4af; --ink-faint:#69737e;
    --line:#28313b; --line-strong:#3a4552;
    --accent:#6ea9d6; --accent-bright:#54b8d6; --accent-wash:#16242f;
    --ok:#63b98d; --ok-wash:#14241d;
    --warn:#d3a54f; --warn-wash:#26200e;
    --over:#e26a63; --over-wash:#2b1512;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 2px 6px rgba(0,0,0,.4),0 14px 30px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --gov-black:#08090a; --gov-black-ink:#c3c8ce;
  --band:#1b2431; --band-ink:#dfe6ef;
  --navy:#3f6ea8; --navy-deep:#335c8f; --navy-ink:#eef3f8;
  --ground:#0d1116; --panel:#161c23; --panel-2:#1b222a; --panel-3:#212a33;
  --ink:#e3e7eb; --ink-soft:#9aa4af; --ink-faint:#69737e;
  --line:#28313b; --line-strong:#3a4552;
  --accent:#63abdc; --accent-bright:#8cc6ec; --accent-wash:#172834;
  --ok:#63b98d; --ok-wash:#14241d;
  --warn:#d3a54f; --warn-wash:#26200e;
  --over:#e07a60; --over-wash:#2a1611;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 2px 6px rgba(0,0,0,.4),0 14px 30px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--font-sans);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

a{color:var(--accent-bright);text-decoration:none}
a:hover{text-decoration:underline}
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums}

/* ---------- government header bands (PRC-style) ---------- */
.govbar{background:var(--gov-black); color:var(--gov-black-ink); font-size:.72rem; letter-spacing:.02em;
  display:flex; align-items:center; gap:14px; padding:6px 22px}
.govbar a{color:var(--gov-black-ink); text-decoration:none; font-weight:600}
.govbar a:hover{text-decoration:underline}
.govbar .sp{flex:1}
.govband{background:var(--band); color:var(--band-ink); border-bottom:3px solid var(--navy);
  display:flex; align-items:center; gap:14px; padding:11px 22px}
.govband .gseal{width:44px;height:44px;flex:none}
.govband .wm b{display:block; font-weight:700; font-size:1.02rem; line-height:1.15; letter-spacing:.01em}
.govband .wm .eb{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8}
.govband .wm .pv{font-size:.76rem; opacity:.85}
.govband .sys{margin-left:auto; text-align:right; font-size:.82rem; line-height:1.3; white-space:nowrap}
.govband .sys b{font-weight:700}

.app{display:grid; grid-template-columns:236px 1fr; min-height:calc(100% - 96px)}

/* ---------- sidebar ---------- */
aside{background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh}
.brand{padding:16px 18px 14px; border-bottom:1px solid var(--line); display:flex; gap:11px; align-items:center}
.seal{width:28px;height:28px;border-radius:2px;flex:none;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.7rem;letter-spacing:.02em}
/* when the seal / gseal is the real municipal image, drop the placeholder chrome */
img.seal,.govband img.gseal{background:transparent;display:block;object-fit:contain}
img.seal{border-radius:0}
.brand b{font-weight:700; font-size:.98rem; letter-spacing:.02em; display:block; line-height:1.15}
.brand span{font-size:.7rem; color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase}
nav.rail{padding:12px 10px; flex:1; overflow-y:auto}
nav.rail .grp{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); padding:14px 12px 6px}
nav.rail a{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:4px; text-decoration:none;
  color:var(--ink-soft); font-weight:500; font-size:.88rem; margin:1px 0; border-left:3px solid transparent}
nav.rail a .ic{width:16px;height:16px;flex:none;opacity:.75}
nav.rail a:hover{background:var(--panel-2); color:var(--ink); text-decoration:none}
nav.rail a.active{background:var(--accent-wash); color:var(--navy-deep); font-weight:700; border-left-color:var(--navy)}
nav.rail a.soon{opacity:.45; pointer-events:none}
nav.rail a.soon::after{content:"later"; margin-left:auto; font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line-strong); border-radius:3px; padding:1px 4px}
.railfoot{padding:12px 16px; border-top:1px solid var(--line); font-size:.72rem; color:var(--ink-faint);
  font-family:var(--font-mono)}
nav.rail a .navbadge{margin-left:auto; background:var(--navy); color:#fff; font-family:var(--font-mono);
  font-size:.6rem; font-weight:600; line-height:1; padding:3px 6px; border-radius:9px}
nav.rail a.active .navbadge{background:var(--navy-deep)}

/* ---------- navy control bar ---------- */
.main{display:flex; flex-direction:column; min-width:0}
.topbar{position:sticky; top:0; z-index:20; background:var(--navy); color:var(--navy-ink);
  border-bottom:1px solid var(--navy-deep); display:flex; align-items:center; gap:16px; padding:9px 22px}
.topbar .muni{font-weight:700; font-size:.86rem; letter-spacing:.02em}
.topbar .muni small{opacity:.72; font-weight:400}
.spacer{flex:1}
.field{display:flex; align-items:center; gap:7px; font-size:.8rem; color:var(--navy-ink)}
.field label{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; opacity:.75}
select,input[type=text],input[type=date],input[type=number],input[type=email],input[type=password],textarea{
  font:inherit; font-size:.84rem; color:var(--ink); background:var(--panel); border:1px solid var(--line-strong);
  border-radius:3px; padding:6px 9px}
select:focus,input:focus,textarea:focus{outline:2px solid var(--accent-bright); outline-offset:1px; border-color:var(--accent-bright)}
.topbar select,.topbar input[type=date]{background:rgba(255,255,255,.94); border-color:var(--navy-deep)}
.userchip{display:flex; align-items:center; gap:8px; font-size:.8rem; padding:4px 11px 4px 5px; border:1px solid rgba(255,255,255,.28);
  border-radius:3px; background:rgba(255,255,255,.10); color:var(--navy-ink)}
.userchip .av{width:22px;height:22px;border-radius:2px;background:#fff;color:var(--navy-deep);display:grid;place-items:center;
  font-size:.62rem;font-weight:700}
.userchip b{font-weight:700}
.userchip span{opacity:.8}
.userchip form{display:inline}
.themebtn{border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.10); color:var(--navy-ink); border-radius:3px;
  width:32px;height:31px; cursor:pointer; font-size:.9rem}
.themebtn:hover{background:rgba(255,255,255,.2)}
.linkbtn{border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.10); color:var(--navy-ink);
  border-radius:3px; padding:5px 10px; font:inherit; font-size:.78rem; cursor:pointer}
.linkbtn:hover{background:rgba(255,255,255,.2)}

/* ---------- page ---------- */
.page{padding:24px 28px 60px; max-width:1180px; width:100%}
.pagehead{display:flex; align-items:flex-end; gap:18px; margin-bottom:20px}
.pagehead h1{font-family:var(--font-sans); font-weight:700; font-size:1.5rem; margin:0; letter-spacing:-.01em}
.pagehead p{margin:3px 0 0; color:var(--ink-soft); font-size:.86rem}
.pagehead .spacer{flex:1}
.btn{font:inherit; font-weight:600; font-size:.84rem; padding:8px 15px; border-radius:7px; border:1px solid var(--line-strong);
  background:var(--panel); color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; gap:7px}
.btn:hover{background:var(--panel-2); text-decoration:none}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-bright)}
.btn.ghost{border-color:transparent; background:transparent; color:var(--accent-bright)}

/* ---------- stat tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:15px 16px; box-shadow:var(--shadow-sm); text-align:center}
.tile .lbl{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint)}
.tile .val{font-family:"IBM Plex Mono",monospace; font-size:1.5rem; font-weight:600; margin-top:4px; letter-spacing:-.02em}
.tile .sub{font-size:.74rem; color:var(--ink-soft); margin-top:2px}
.tile.accent{border-left:3px solid var(--accent)}
.meter{height:6px;border-radius:4px;background:var(--panel-3);margin-top:9px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent-bright);border-radius:4px}
.meter.warn i{background:var(--warn)} .meter.over i{background:var(--over)}

/* ---------- panels & tables ---------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:4px; box-shadow:var(--shadow-sm); margin-bottom:20px; overflow:hidden}
.panel > header{display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line)}
.panel > header h2{font-family:var(--font-sans); font-weight:700; font-size:.98rem; margin:0; letter-spacing:.01em}
.panel > header .spacer{flex:1}
.toolbar{display:flex; gap:9px; flex-wrap:wrap; align-items:center; padding:11px 16px; border-bottom:1px solid var(--line); background:var(--panel-2)}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:.83rem}
th,td{padding:9px 13px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
thead th{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--panel-2); position:sticky; top:0; border-bottom:2px solid var(--line-strong)}
th.r,td.r{text-align:right}
tbody tr:hover{background:var(--panel-2)}
tr.grp td{background:var(--panel-3); font-weight:700; font-size:.78rem; letter-spacing:.02em; text-transform:uppercase;
  font-family:"IBM Plex Mono",monospace; color:var(--ink-soft)}
tr.sub td{font-weight:600; background:var(--panel-2)}
tr.total td{font-weight:700; border-top:2px solid var(--line-strong); background:var(--panel-2)}
td.acct .s{display:block;color:var(--ink-faint);font-size:.76rem}
.stripe-over{box-shadow:inset 3px 0 0 var(--over)}
.chip{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.62rem; font-weight:600; letter-spacing:.04em;
  padding:2px 6px; border-radius:3px; text-transform:uppercase}
.chip.ok{background:var(--ok-wash);color:var(--ok)}
.chip.warn{background:var(--warn-wash);color:var(--warn)}
.chip.over{background:var(--over-wash);color:var(--over)}
.chip.mut{background:var(--panel-3);color:var(--ink-soft);border:1px solid var(--line)}
.chip.draft{background:var(--panel-3);color:var(--ink-soft)}

.ubar{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.ubar .track{width:66px;height:6px;border-radius:4px;background:var(--panel-3);overflow:hidden;flex:none}
.ubar .track i{display:block;height:100%;background:var(--accent-bright)}
.ubar .track i.warn{background:var(--warn)} .ubar .track i.over{background:var(--over)}

/* .tablewrap.xscroll - a self-contained scroll region: the table keeps its
   own vertical + horizontal scrollbars instead of stretching the page. No
   sticky header or columns. base.html mirrors the horizontal scrollbar
   above the header as well, so it can be reached without scrolling down. */
.tablewrap.xscroll{overflow:auto;max-height:max(340px, calc(100vh - 188px))}
.tablewrap.xscroll thead th{position:static}   /* scrolls with the body - not a frozen header */
.xscroll-top{overflow-x:auto;overflow-y:hidden;background:var(--panel-2);
  border-bottom:1px solid var(--line)}
.xscroll-top > div{height:1px}

/* .freeze3 add-on: keep the first three columns in view while the rest
   scrolls sideways (header still scrolls vertically with the body).
   Rows that merge cells - a colspan subtotal / empty-state row - opt out. */
.tablewrap.xscroll.freeze3 thead th:nth-child(1),
.tablewrap.xscroll.freeze3 tbody tr:not(.total):not(.sub):not(.grp) td:not([colspan]):nth-child(1){
  position:sticky;left:0;z-index:2;width:165px;min-width:165px;max-width:165px}
.tablewrap.xscroll.freeze3 thead th:nth-child(2),
.tablewrap.xscroll.freeze3 tbody tr:not(.total):not(.sub):not(.grp) td:not([colspan]):nth-child(2){
  position:sticky;left:165px;z-index:2;width:110px;min-width:110px;max-width:110px}
.tablewrap.xscroll.freeze3 thead th:nth-child(3),
.tablewrap.xscroll.freeze3 tbody tr:not(.total):not(.sub):not(.grp) td:not([colspan]):nth-child(3){
  position:sticky;left:275px;z-index:2;box-shadow:1px 0 0 var(--line-strong);
  max-width:230px;overflow:hidden;text-overflow:ellipsis}
.tablewrap.xscroll.freeze3 thead th:nth-child(-n+3){background:var(--panel-2)}
.tablewrap.xscroll.freeze3 tbody tr:not(.total):not(.sub):not(.grp) td:not([colspan]):nth-child(-n+3){background:var(--panel)}
.tablewrap.xscroll.freeze3 tbody tr:hover td:not([colspan]):nth-child(-n+3){background:var(--panel-2)}

/* ---------- chart ---------- */
.charts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.charts{grid-template-columns:1fr}}
.chart svg{display:block;width:100%;height:auto}
.legend{display:flex;gap:16px;font-size:.74rem;color:var(--ink-soft);padding:0 16px 14px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* ---------- obligation form ---------- */
.formgrid{display:grid;grid-template-columns:1fr 328px;gap:22px;align-items:start}
@media (max-width:960px){.formgrid{grid-template-columns:1fr}}
.formcard{background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow-sm);padding:20px 22px}
.frow{margin-bottom:15px}
.frow.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.frow label{display:block;font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.frow input,.frow select,.frow textarea{width:100%}
.frow .hint{font-size:.72rem;color:var(--ink-faint);margin-top:4px}
.frow .hint b{color:var(--accent-bright);cursor:pointer;font-family:"IBM Plex Mono",monospace}
.cascade{display:grid;gap:10px}
fieldset{border:1px solid var(--line);border-radius:9px;padding:14px 15px;margin:0 0 15px}
fieldset legend{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);padding:0 6px}
.balcard{position:sticky;top:76px;background:var(--panel);border:1px solid var(--line);border-radius:4px;
  box-shadow:var(--shadow-md);overflow:hidden}
.balcard header{padding:12px 16px;border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",monospace;
  font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.balcard .body{padding:6px 16px 14px}
.balrow{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px dashed var(--line)}
.balrow:last-child{border-bottom:0}
.balrow .k{font-size:.78rem;color:var(--ink-soft)}
.balrow .v{font-family:"IBM Plex Mono",monospace;font-size:.9rem;font-weight:600}
.balrow.big .v{font-size:1.15rem}
.balrow.big .k{font-weight:600;color:var(--ink)}
.balnote{margin:12px 16px 16px;padding:10px 12px;border-radius:8px;font-size:.78rem;line-height:1.4}
.balnote.ok{background:var(--ok-wash);color:var(--ok)}
.balnote.warn{background:var(--warn-wash);color:var(--warn)}
.balnote.over{background:var(--over-wash);color:var(--over)}
.balnote.idle{background:var(--panel-2);color:var(--ink-faint)}
.pos{color:var(--ok)} .neg{color:var(--over)}

/* ---------- SAAO statement ---------- */
.statement{background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow-sm);
  padding:34px clamp(18px,4vw,46px)}
.sh{text-align:center;font-family:var(--font-serif);line-height:1.35}
.sh .r1{font-size:.86rem;color:var(--ink-soft)}
.sh .r2{font-size:1.15rem;font-weight:600;letter-spacing:.02em}
.sh .r3{font-size:.86rem;color:var(--ink-soft)}
.sh .title{margin-top:14px;font-size:1.02rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.sh .asof{font-size:.82rem;color:var(--ink-soft);font-family:var(--font-sans)}
.statement table{margin-top:20px;font-size:.8rem}
.statement thead th{background:transparent;border-bottom:2px solid var(--ink);position:static;color:var(--ink);
  font-family:"IBM Plex Mono",monospace;font-size:.6rem}
.statement tr.grp td{background:transparent;border-bottom:1px solid var(--line);color:var(--ink);font-family:"IBM Plex Mono",monospace}
.statement tr.total td{background:transparent}
.statement tr.grand td{border-top:3px double var(--ink);border-bottom:0;font-weight:700}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--ground);font-size:.84rem;font-weight:500;padding:11px 18px;border-radius:9px;
  box-shadow:var(--shadow-md);transition:.22s;z-index:60;display:flex;gap:9px;align-items:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}

.note{font-size:.78rem;color:var(--ink-faint);margin-top:10px;font-style:italic}

/* ---------- responsive shell ---------- */
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  aside{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;border-right:0;border-bottom:1px solid var(--line)}
  .brand{border-bottom:0;flex:1}
  nav.rail{display:flex;flex-wrap:wrap;padding:6px;flex:1 0 100%;order:3}
  nav.rail .grp,.railfoot{display:none}
  nav.rail a{margin:2px}
  .topbar{flex-wrap:wrap}
}
/* ---------- user's guide ---------- */
.guide{max-width:780px}
.guide .panel{margin-bottom:16px}
.guide .gbody{padding:16px 20px 18px}
.guide h3{font-family:var(--font-sans);font-weight:700;font-size:.98rem;margin:18px 0 7px}
.guide .gbody > h3:first-child{margin-top:0}
.guide p{margin:0 0 11px;color:var(--ink-soft);font-size:.92rem;line-height:1.6}
.guide ol,.guide ul{margin:0 0 13px;padding-left:1.35em}
.guide li{margin:5px 0;color:var(--ink-soft);font-size:.92rem;line-height:1.55}
.guide strong{color:var(--ink);font-weight:600}
.guide .gtag{font-family:var(--font-mono);font-size:.8em;background:var(--panel-3);border:1px solid var(--line);
  border-radius:3px;padding:1px 5px;white-space:nowrap;color:var(--ink)}
.guide .flow{font-family:var(--font-mono);font-size:.8rem;background:var(--panel-2);border:1px solid var(--line);
  border-radius:4px;padding:12px 14px;margin:0 0 13px;line-height:1.7;color:var(--ink-soft);overflow-x:auto}
.guide dl{margin:0}
.guide dl div{display:flex;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.guide dl div:last-child{border-bottom:0}
.guide dt{flex:none;width:170px}
.guide dd{margin:0;color:var(--ink-soft)}
.guide code{font-family:var(--font-mono);font-size:.82em;background:var(--panel-3);border:1px solid var(--line);
  border-radius:3px;padding:.05em .35em}
.guide .guide-shot{margin:12px 0 16px;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--panel-2)}
.guide .guide-shot img{display:block;width:100%;height:auto}
.guide .guide-shot figcaption{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);
  padding:7px 12px;border-top:1px solid var(--line)}

:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent);color:#fff}

/* login / signup card (shared with prototype's modal styling) */
.login-wrap{max-width:380px;margin:9vh auto;background:var(--panel);border:1px solid var(--line);border-radius:4px;
  box-shadow:var(--shadow-md);padding:28px 26px}
.login-wrap h2{margin:0 0 4px;font-size:1.15rem}
.login-wrap p.sub{margin:0 0 18px;color:var(--ink-faint);font-size:.8rem}
.login-wrap label{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin:12px 0 4px}
.login-wrap input{width:100%}
.login-wrap .btn{width:100%;justify-content:center;margin-top:18px}
.errornote{color:var(--over);font-size:.8rem;margin:8px 0;background:var(--over-wash);padding:8px 10px;border-radius:6px}
.messages{margin-bottom:14px}
.messages .success,.messages .info{background:var(--ok-wash);color:var(--ok);padding:8px 12px;border-radius:6px;font-size:.82rem;margin:4px 0}
.messages .error{background:var(--over-wash);color:var(--over);padding:8px 12px;border-radius:6px;font-size:.82rem;margin:4px 0}

/* ===== transitional shims: keep not-yet-ported screens legible.
   Removed screen by screen as each template is migrated to the
   prototype's own classes. ===== */
h2.page-title{font-family:var(--font-sans);font-weight:700;font-size:1.5rem;margin:4px 0 2px;letter-spacing:-.01em}
.page-note{color:var(--ink-soft);font-size:.86rem;margin:0 0 16px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:6px 0 20px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:15px 16px;box-shadow:var(--shadow-sm)}
.stat .k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.stat .v{font-family:var(--font-mono);font-size:1.5rem;font-weight:600;margin:4px 0 1px}
.stat .m{font-size:.74rem;color:var(--ink-soft)}
table.grid{border-collapse:collapse;width:100%;font-size:.83rem}
table.grid th,table.grid td{padding:9px 13px;border-bottom:1px solid var(--line);text-align:left}
table.grid th{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);border-bottom:2px solid var(--line-strong)}
table.grid td.num,table.grid th.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
table.grid tr.group td{background:var(--panel-3);font-weight:700;font-size:.78rem;text-transform:uppercase;font-family:var(--font-mono);color:var(--ink-soft)}
table.grid tr.subtotal td{background:var(--panel-2);font-weight:600;border-bottom:2px solid var(--line-strong)}
table.grid tr.grand td{background:var(--panel-2);font-weight:700;border-top:2px solid var(--line-strong)}
.acct .s{display:block;color:var(--ink-faint);font-size:.76rem}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.bar{height:6px;background:var(--panel-3);border-radius:3px;overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;background:var(--accent-bright)}
.bar>i.warn{background:var(--warn)} .bar>i.over{background:var(--over)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:560px){.grid-2{grid-template-columns:1fr}}
.formrow{margin:12px 0}
.formrow label{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}
.formrow input,.formrow select,.formrow textarea{width:100%}
.formrow .hint{font-size:.72rem;color:var(--ink-faint);margin-top:2px}
.formrow.err input,.formrow.err select{border-color:var(--over)}
.formrow .errtext{color:var(--over);font-size:.72rem;margin-top:2px}
.form-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.detailtable{width:100%;border-collapse:collapse;font-size:.86rem;max-width:680px}
.detailtable th{text-align:left;width:165px;vertical-align:top;padding:6px 10px 6px 0;color:var(--ink-faint);font-weight:600}
.detailtable td{padding:6px 0;border-bottom:1px solid var(--line)}
.assignbox{background:var(--accent-wash);border:1px solid var(--navy);border-radius:4px;padding:12px 14px;margin:4px 0 16px}
.assignbox label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-deep);font-weight:700;display:block;margin-bottom:4px}
.assignbox input{font-family:var(--font-mono);width:100%;max-width:320px}
.assignbox .hint{font-size:.72rem;color:var(--ink-soft);margin-top:4px}
.statuspill{display:inline-block;padding:2px 8px;border-radius:10px;font-family:var(--font-mono);font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.st-prepared{background:var(--panel-3);color:var(--ink-soft)}
.st-submitted{background:var(--accent-wash);color:var(--navy-deep)}
.st-returned{background:var(--warn-wash);color:var(--warn)}
.st-recorded{background:var(--ok-wash);color:var(--ok)}
.returnnote{background:var(--warn-wash);border-left:3px solid var(--warn);padding:8px 12px;font-size:.8rem;color:var(--warn);margin:10px 0}
.obr-history{list-style:none;margin:0;padding:0;border-left:2px solid var(--line);max-width:680px}
.obr-history li{position:relative;padding:9px 0 9px 20px;font-size:.85rem;border-bottom:1px dashed var(--line)}
.obr-history li:last-child{border-bottom:0}
.obr-history li::before{content:"";position:absolute;left:-7px;top:15px;width:10px;height:10px;border-radius:50%;
  background:var(--panel);border:2px solid var(--accent-bright)}
.obr-history .t{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);margin-right:8px}
.obr-history .a{font-weight:600}
.obr-history .who{color:var(--ink-soft);margin-left:8px}
.obr-history .meta{display:inline-block;margin-left:8px;color:var(--ink-soft);font-family:var(--font-mono);font-size:.74rem}
.obr-history .note{display:block;color:var(--ink-soft);font-style:italic;margin-top:2px}
.settabs{display:flex;gap:4px;border-bottom:1px solid var(--line-strong);margin:6px 0 18px;flex-wrap:wrap}
.settabs a{padding:7px 14px;font-size:.86rem;color:var(--ink-soft);border:1px solid transparent;border-bottom:0;border-radius:4px 4px 0 0}
.settabs a:hover{background:var(--panel-2);text-decoration:none}
.settabs a.on{background:var(--panel);border-color:var(--line-strong);color:var(--navy);font-weight:600;position:relative;top:1px}
.tabbadge{display:inline-block;min-width:16px;padding:0 5px;border-radius:9px;background:var(--over);color:#fff;font-size:.62rem;text-align:center}

@media print{
  @page{size:A4 landscape;margin:12mm}
  .govbar,.govband,aside,.topbar,.settabs,.filters,.messages,.pagehead .btn,.toolbar{display:none!important}
  .app{display:block}
  .page{padding:0;max-width:none}
  .statement{border:0;box-shadow:none;padding:0}
  .panel{border:0;box-shadow:none;margin:0}
  body{background:#fff;font-size:10px}
  tr.grp td,table.grid tr.group td{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* the scroll region is a screen aid only - let the whole table flow onto paper */
  .tablewrap,.tablewrap.xscroll{max-height:none;overflow:visible}
  .tablewrap.xscroll.freeze3 th,.tablewrap.xscroll.freeze3 td{position:static;max-width:none;overflow:visible}
  .xscroll-top{display:none!important}
  /* fit every column on the sheet: shrink the table, let the description
     column wrap, but keep each figure on one line */
  table{font-size:8.5px;width:100%}
  th,td{padding:2px 5px;white-space:normal;overflow-wrap:anywhere}
  th.r,td.r,td.num{white-space:nowrap}
  thead{display:table-header-group}
  tr{page-break-inside:avoid}
}