/* Ported from the SMC Treasury Prototype v0.7 (docs/design in the COOP workspace). Keep the look in sync with it. */
/* Poppins (Regular 400, Medium 500, SemiBold 600) self-hosted (static/fonts).
   Poppins is (c) 2014-2017 Indian Type Foundry, licensed under the SIL Open Font License 1.1 (see static/fonts/OFL.txt). */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/Poppins-400.731a28a413d6.ttf") format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/Poppins-500.a4e11dda4053.ttf") format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/Poppins-600.e63b93dfac26.ttf") format('truetype'); }

/* ===== SMC Treasury Prototype v0.5 - Design Refresh (look only; same data and logic) ===== */
:root {
  --teal:#357A69; --teal-dk:#2C6C5D; --link:#2F7566;
  --menu-text:#F0F8F5; --menu-label:#EAF5F1; --menu-sub:#EAF5F1;
  --bg:#F4F5F5; --card:#FFFFFF; --ink:#2B3A36; --muted:#5F706B; --line:#EDF2F0;
  --btn-border:#BFD9D0; --in-border:#CFDDD8; --in-bg:#FAFCFB; --ring:#DDF0E8;
  --coh-tint:#DDF0E8; --bank-tint:#D9EEF0;
  --shadow:0 1px 6px rgba(30,60,50,.07);
  --danger:#A33224;
  --ok-bg:#DDF3E6; --ok-fg:#14573A; --warn-bg:#FFF0CC; --warn-fg:#6B4A00; --err-bg:#FBE0DC; --err-fg:#8A2A1D;
  --can-bg:#E8ECEA; --can-fg:#3E4A46; --dra-bg:#E4ECF7; --dra-fg:#2F4E85;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:"Poppins","Segoe UI",system-ui,sans-serif; font-weight:400; font-size:14px; line-height:1.5; color:var(--ink); background:var(--bg); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.printbanner { display:none; }
.hidden { display:none !important; }
svg { flex:none; }

/* ---------- top header bar ---------- */
.appbar { min-height:64px; background:var(--teal); color:#fff; display:flex; align-items:center; gap:16px; padding:8px 24px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:12px; flex:1 1 auto; min-width:0; }
/* L-01 (v0.6): the SMC logo (embedded PNG, round) replaces the dashed "LOGO HERE" box */
.logoimg { width:48px; height:48px; border-radius:50%; display:block; flex:none; object-fit:cover; }
.appname { margin:0; font-size:16px; font-weight:600; line-height:1.2; color:#fff; }
.orgname { font-size:11.5px; line-height:1.25; color:#fff; }
.apprt { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.banner { background:#FFF1CC; color:#6B4A00; font-size:11px; font-weight:600; letter-spacing:.04em; padding:4px 12px; border-radius:999px; white-space:nowrap; }
.userbox { display:flex; align-items:center; gap:4px; background:rgba(0,0,0,.16); border-radius:999px; padding:4px 10px 4px 4px; position:relative; color:#fff; }
.avatar { width:30px; height:30px; border-radius:50%; background:#fff; color:#2F7566; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; flex:none; margin-right:4px; }
.userbox select { appearance:none; -webkit-appearance:none; background:transparent; color:#fff; border:0; font:inherit; font-size:13px; font-weight:500; padding:6px 4px; cursor:pointer; max-width:230px; text-overflow:ellipsis; }
.userbox select option { color:#2B3A36; background:#fff; }
.userbox select:focus-visible { outline:2px solid #fff; outline-offset:2px; border-radius:4px; }
.iconbtn { width:44px; height:44px; padding:0; border:0; border-radius:4px; background:transparent; color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.iconbtn:hover { background:rgba(0,0,0,.14); }
.iconbtn:focus-visible { outline:2px solid #fff; outline-offset:-2px; }
.menubtn, .menuclose { display:none; }

/* ---------- shell: floating menu card + content ---------- */
/* P-20 (v0.6): full-width layout. No page max-width, no side margins: the menu touches the left edge of the window; the content uses the rest
   and keeps a 16 px inner padding on the right. */
.shell { display:flex; align-items:flex-start; gap:16px; padding:16px 16px 24px 0; max-width:none; margin:0; }
.content { flex:1 1 auto; min-width:0; }
.menucard { flex:0 0 260px; width:260px; background:var(--teal); color:var(--menu-text); border-radius:0 6px 6px 0; box-shadow:var(--shadow); padding:10px 10px 16px; position:sticky; top:16px; max-height:calc(100vh - 32px); overflow-y:auto; }
.navlabel { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--menu-label); padding:14px 12px 6px; }
nav#nav a, .navitem { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border:0; border-radius:4px; background:transparent; color:var(--menu-text); font:inherit; font-size:13.5px; font-weight:400; text-align:left; text-decoration:none; cursor:pointer; position:relative; line-height:1.3; }
nav#nav a:hover, .navitem:hover { background:rgba(0,0,0,.1); color:#fff; }
nav#nav a:focus-visible, .navitem:focus-visible { outline:2px solid #fff; outline-offset:-2px; }
nav#nav a.active { background:rgba(0,0,0,.14); color:#fff; font-weight:600; box-shadow:inset 3px 0 0 #fff; }
.navitem { justify-content:flex-start; }
.navgroupbtn .chev { margin-left:auto; transition:transform .15s; }
.navgroupbtn[aria-expanded="false"] .chev { transform:rotate(-90deg); }
.subnav { padding:2px 0 2px 14px; }
.subnav a { color:var(--menu-sub); font-size:13px; }
.badge { margin-left:auto; background:#FFE7A8; color:#5A3F00; border-radius:10px; font-size:11px; font-weight:600; padding:0 8px; min-width:22px; text-align:center; line-height:1.6; }
.scrim { display:none; }
/* P-21: the phone back link and bottom bar exist only on phone widths (see the phone section) */
.backlink, .bottombar { display:none; }
@media (min-width:761px) { .sheetback { display:none !important; } }

/* ---------- page title, messages, cards ---------- */
.pagehead { display:flex; align-items:baseline; justify-content:space-between; gap:6px 16px; flex-wrap:wrap; margin:2px 0 16px; }
main h2 { margin:0; font-size:16px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); overflow-wrap:anywhere; }
.pagenote { font-size:11px; color:var(--muted); }
h3 { margin:22px 0 10px; font-size:13.5px; font-weight:600; color:var(--ink); }
.card h3:first-child { margin-top:0; }
#msg { margin:0; }
.msg { border-radius:6px; padding:10px 14px; margin-bottom:12px; font-size:13px; }
.msg div + div { margin-top:3px; }
.msg.ok { background:var(--ok-bg); color:var(--ok-fg); }
.msg.err { background:var(--err-bg); color:var(--err-fg); }
.msg.warn { background:var(--warn-bg); color:var(--warn-fg); }
.card { background:var(--card); border-radius:6px; box-shadow:var(--shadow); padding:18px; margin-bottom:16px; }
.demo-note { background:var(--warn-bg); color:var(--warn-fg); padding:8px 12px; border-radius:6px; font-size:12px; margin-bottom:14px; }
a { color:var(--link); }

/* ---------- buttons, inputs ---------- */
button, .btn { background:var(--teal); color:#fff; border:1px solid var(--teal); padding:8px 16px; border-radius:4px; cursor:pointer; font:inherit; font-size:13px; font-weight:500; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; line-height:1.3; }
button:hover, .btn:hover { background:var(--teal-dk); border-color:var(--teal-dk); }
button.sec, .btn.sec { background:#fff; color:var(--link); border-color:var(--btn-border); }
button.sec:hover, .btn.sec:hover { background:#F1F8F5; }
button.text, .btn.text { background:transparent; border-color:transparent; color:var(--link); padding:8px 8px; }
button.text:hover { background:#F1F8F5; }
button.danger { background:var(--danger); border-color:var(--danger); }
button.danger:hover { background:#8C291D; border-color:#8C291D; }
button.small, .btn.small { padding:4px 10px; font-size:12px; }
button:focus-visible, .btn:focus-visible, a:focus-visible, abbr:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; align-items:center; }
input, select, textarea { font:inherit; font-size:13px; color:var(--ink); }
.f input, .f select, .filters input, .filters select, .tablewrap td input[type=text], .tablewrap td select, .reasonbox input {
  width:100%; padding:8px 10px; border:1px solid var(--in-border); background:var(--in-bg); border-radius:4px; }
/* P-08 (v0.5.1): every box has the same height; boxes of one row start on the same line */
.f input, .f select, .filters input, .filters select, .tablewrap td input[type=text], .tablewrap td select { height:38px; }
input:focus, select:focus, textarea:focus { outline:0; border-color:var(--teal); box-shadow:0 0 0 3px var(--ring); }
input:disabled, select:disabled { background:#EEF2F0; color:var(--muted); }
::placeholder { color:var(--muted); opacity:1; }
input.amt { text-align:right; font-variant-numeric:tabular-nums; }
.tablewrap td input[type=text], .tablewrap td select { min-width:120px; }
.tablewrap td input.amt { min-width:110px; }
/* P-08: a field = label + box + one hint line (always present). The boxes sit at the BOTTOM of their cell, the hint line has the same height
   in every cell, so boxes of one row have the same top line even when one label wraps to two lines, at any zoom. */
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px 16px; align-items:end; }
.grid.one { grid-template-columns:minmax(0, 460px); }
.grid .full { grid-column:1 / -1; }
.f, .filters > div { display:flex; flex-direction:column; justify-content:flex-end; min-width:0; }
.f.datebox input { width:220px; max-width:100%; }
.f label, .filters label { display:block; font-size:12px; font-weight:500; color:var(--muted); margin-bottom:4px; line-height:1.3; }
.hint { font-size:11px; color:var(--muted); margin-top:3px; line-height:1.35; min-height:1.35em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hint.wide { white-space:normal; min-height:0; margin:-4px 0 10px; font-size:12px; }
.filters { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px 14px; align-items:end; }

/* ---------- tables ---------- */
.tablewrap { overflow-x:auto; background:#fff; border-radius:6px; box-shadow:var(--shadow); margin-bottom:16px; }
.tablewrap.stackwrap { container-type:inline-size; container-name:stackbox; }
table { border-collapse:collapse; width:100%; }
th { text-align:left; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap; background:#fff; }
td { padding:12px 14px; font-size:12.5px; border-bottom:1px solid var(--line); vertical-align:top; }
tbody tr:last-child td { border-bottom:0; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table[data-table=history] td:nth-child(1), table[data-table=history] td:nth-child(6), table[data-table=history] td:nth-child(4) { white-space:nowrap; }
td.pt { max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table[data-table=recent] td { white-space:nowrap; }
/* the extra Pending Approval pill of a Pending Approvals row is only for the phone card (a laptop shows the table as in v0.5) */
table[data-table=pending] td.c-status { display:none; }
tr.muted td { color:var(--muted); background:#F8FAF9; }
tr.cancelled td { color:var(--muted); background:#F3F5F4; }
tr.cancelled td.name { text-decoration:line-through; }
tr.forward td { background:#F1F8F5; font-weight:600; }
.strike { text-decoration:line-through; color:var(--muted); }
.status { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; white-space:nowrap; line-height:1.5; }
.st-Draft { background:var(--dra-bg); color:var(--dra-fg); }
.st-Pending { background:var(--warn-bg); color:var(--warn-fg); }
.st-Approved { background:var(--ok-bg); color:var(--ok-fg); }
.st-Rejected { background:var(--err-bg); color:var(--err-fg); }
.st-Cancelled { background:var(--can-bg); color:var(--can-fg); }
/* B-01: bank account statuses (Active, Inactive; Pending Approval / Rejected / Cancelled use the pills above) */
.st-Active { background:var(--ok-bg); color:var(--ok-fg); }
.st-Inactive { background:var(--can-bg); color:var(--can-fg); }
.btn.big, button.big { min-height:48px; padding:10px 18px; font-size:14px; font-weight:600; gap:10px; }
table[data-table=banks] td.c-status { white-space:nowrap; }
abbr.ab { text-decoration:underline dotted; cursor:help; }

/* ---------- Dashboard ---------- */
.cards4 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-bottom:16px; }
.statcard { background:#fff; border-radius:6px; box-shadow:var(--shadow); padding:16px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; min-width:0; color:var(--ink); text-decoration:none; }
a.statcard:hover { box-shadow:0 2px 10px rgba(30,60,50,.14); }
.statcard .tile { width:38px; height:38px; border-radius:6px; background:var(--coh-tint); color:#2F7566; display:flex; align-items:center; justify-content:center; flex:none; }
.statcard .body { min-width:0; max-width:100%; }
.statcard .amt { font-size:21px; font-weight:600; line-height:1.25; font-variant-numeric:tabular-nums; white-space:nowrap; }
.statcard .lbl { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.statcard .note { font-size:11.5px; color:var(--muted); margin-top:2px; }
/* P-01 (v0.5.1): the Pending Approvals card is amber (same family as the Pending pill) so it is noticed first. Text #6B4A00 on #FFF0CC is about 7 : 1. */
.statcard.amber { background:#FFF0CC; color:#6B4A00; border:2px solid #E3B341; padding:14px; }
.statcard.amber .tile { background:#FFD875; color:#5A3F00; }
.statcard.amber .lbl, .statcard.amber .note { color:#6B4A00; }
.statcard.amber .amt { font-size:30px; }
a.statcard.amber:hover { background:#FFE9B0; box-shadow:0 2px 10px rgba(107,74,0,.25); }
a.statcard:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }
.statcard.small .amt { font-size:17px; }
/* P-07 (v0.5.1): shortcuts at the top of the Dashboard, big (48 px or more) with icon + label */
.shortcuts { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin:0 0 18px; }
.shortcuts .btn { min-height:48px; padding:10px 14px; font-size:14px; font-weight:600; gap:10px; text-align:center; line-height:1.25; }
.dash2 { display:grid; grid-template-columns:minmax(0, 1fr); gap:0; align-items:start; }
.dash2 > .card { margin-bottom:16px; }
.cardhead { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; }
.cardhead h3 { margin:0; }
.donutwrap { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.donut { width:132px; height:132px; border-radius:50%; position:relative; flex:none; }
.donut::after { content:""; position:absolute; inset:27px; background:#fff; border-radius:50%; }
.donut .mid { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; text-align:center; font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.legend { list-style:none; margin:0; padding:0; flex:1 1 220px; min-width:0; }
.legend li { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
.legend li:last-child { border-bottom:0; }
.legend .sw { width:10px; height:10px; border-radius:2px; flex:none; }
.legend .nm { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.legend .nm small { display:block; color:var(--muted); font-size:11px; }
.legend .pc { font-weight:600; font-variant-numeric:tabular-nums; min-width:46px; text-align:right; }
.legend .av { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; min-width:104px; }
.fineprint { font-size:11px; color:var(--muted); margin-top:8px; }

/* ---------- forms (OR, CDV) ---------- */
.formgrid { display:grid; grid-template-columns:minmax(0, 2.1fr) minmax(0, 1fr); gap:16px; align-items:start; max-width:1200px; }
.formside .card { margin-bottom:16px; }
.formside h3 { margin-top:0; }
.total-box { font-size:13px; }
.total-box > div + div { margin-top:6px; }
.total-box .big { display:block; font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.checks { font-size:13px; }
.checks .err { color:var(--err-fg); }
.checks .warn { color:var(--warn-fg); }
.checks .ok { color:var(--ok-fg); font-weight:500; }
.checks > div + div { margin-top:4px; }
.reasonbox { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.reasonbox input { flex:1 1 180px; width:auto; }
/* P-08: the lines of the OR (particulars) and CDV (accounts) forms. Money columns are fixed and right-aligned; the Account column takes the rest. */
.stackwrap th, .stackwrap td { padding:8px 8px; }
table.lines { table-layout:auto; }
table.lines th.c-dr, table.lines td.c-dr, table.lines th.c-cr, table.lines td.c-cr { width:124px; }
table.lines th.c-rm, table.lines td.c-rm { width:78px; }
table.lines td.c-acct input { min-width:170px; }
.tablewrap td input.amt { min-width:96px; }

/* ---------- Cashbook ---------- */
.cashbook th.grp { text-align:center; color:var(--ink); border-bottom:1px solid #fff; }
.cashbook th.grp-coh, .cashbook th.h-coh { background:var(--coh-tint); color:var(--ink); }
.cashbook th.grp-bank, .cashbook th.h-bank { background:var(--bank-tint); color:var(--ink); }
/* P-20 (v0.6): slightly tighter cell padding (8 px -> 6 px) and Particulars minimum (190 -> 170 px) so all 12 columns fit at 1536 px and wider without sideways scrolling */
.cashbook th, .cashbook td { padding:10px 6px; }
.cashbook td.c-date, .cashbook td.c-or, .cashbook td.c-cdv, .cashbook td.num, .cashbook td.c-status { white-space:nowrap; }
.cashbook td.c-name { min-width:170px; }
.cashbook td.c-mv { display:none; }
/* P-11: scroll bar above the table, moves together with the one below it */
.cbtop { overflow-x:auto; overflow-y:hidden; height:16px; margin:0 0 4px; }
.cbtop-in { height:1px; }
.totalsbar { background:var(--teal); color:#fff; border-radius:6px; padding:14px 18px; display:flex; flex-wrap:wrap; gap:10px 36px; margin-bottom:16px; }
.totalsbar .tl { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#fff; }
.totalsbar .tv { font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- documents (also the print layout) ---------- */
/* P-20: documents (OR, CDV and Daily Treasury Report on screen) are left-aligned, not centred with big side gaps; like the forms they keep a comfortable maximum width (1200 px) */
.doc { background:#fff; border-radius:6px; box-shadow:var(--shadow); padding:22px; max-width:1200px; margin:0 0 16px; }
.dochead { display:flex; gap:14px; align-items:center; border-bottom:2px solid var(--teal); padding-bottom:10px; margin-bottom:12px; }
.logo-img { width:64px; height:64px; border-radius:50%; display:block; flex:none; object-fit:cover; }
.dochead .nm { font-weight:600; font-size:15px; color:var(--ink); }
.dochead .ad { font-size:12.5px; }
.dochead .pd { font-size:11px; color:var(--warn-fg); font-weight:600; }
.doctitle { margin:8px 0; text-align:center; font-size:15px; font-weight:600; text-transform:none; }
.docline { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; }
.kv { display:flex; gap:8px; padding:4px 0; border-bottom:1px dotted #B8C4C0; }
.kv .k { flex:0 0 190px; color:var(--muted); font-size:12px; }
.kv .v { flex:1; min-width:0; overflow-wrap:anywhere; }
.sigs { display:flex; gap:20px; flex-wrap:wrap; margin-top:28px; }
.sig { flex:1 1 200px; border-top:1px solid #2B3A36; text-align:center; font-size:12px; padding-top:3px; }
.docfoot { margin-top:14px; font-size:11px; color:var(--warn-fg); text-align:center; font-weight:600; }
.docstamp { text-align:center; font-weight:600; color:var(--err-fg); border:2px solid var(--err-fg); border-radius:4px; display:inline-block; padding:1px 10px; margin:4px 0; font-size:12px; }

/* ---------- Glossary ---------- */
.gl-letter { background:var(--teal); color:#fff; padding:2px 12px; border-radius:4px; display:inline-block; margin:16px 0 8px; font-weight:600; }
.gl-item { background:#fff; border-radius:6px; box-shadow:var(--shadow); padding:10px 14px; margin-bottom:8px; }
.gl-item .t { font-weight:600; color:var(--ink); }
.gl-item .how { font-style:italic; color:var(--warn-fg); margin-top:2px; }
.gl-see { padding:4px 14px; margin-bottom:8px; color:var(--muted); }

footer#foot { text-align:center; padding:18px 12px 8px; font-size:11.5px; color:var(--muted); }

/* ---------- P-05 pop-up notifications (v0.5.1): centred card on a dimmed backdrop ---------- */
body.pop-open { overflow:hidden; }
.popback { position:fixed; inset:0; z-index:200; background:rgba(20,40,34,.58); display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; }
.popup { --pa:#1C6F6A; --pf:#DDF0EE; --pt:#2B3A36; position:relative; display:flex; gap:16px; align-items:flex-start; width:min(520px, 100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--pf); color:var(--pt); border:1px solid var(--pa); border-radius:14px; box-shadow:0 14px 44px rgba(0,0,0,.38); padding:22px 60px 20px 20px; }
.popup:focus { outline:0; }
.popup.pop-warn { --pa:#8A5A00; --pf:#FFF0CC; --pt:#5A3F00; }
.popup.pop-err { --pa:#A62B1F; --pf:#FBE0DC; --pt:#6E1B12; }
.popup.pop-ok { --pa:#14573A; --pf:#DDF3E6; --pt:#2B3A36; }
.pop-ico { width:44px; height:44px; border-radius:50%; background:var(--pa); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.pop-main { flex:1 1 auto; min-width:0; }
.pop-title { margin:2px 0 6px; font-size:17px; font-weight:600; letter-spacing:.07em; color:var(--pa); }
.pop-msg p { margin:0 0 8px; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.pop-msg p.pop-todo { font-size:14.5px; }
.pop-btns { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:14px; }
.popup .pop-ok, .popup .pop-cancel { min-height:44px; min-width:100px; font-size:15px; font-weight:600; }
.popup .pop-ok { background:var(--pa); border-color:var(--pa); color:#fff; }
.popup .pop-ok:hover { background:var(--pa); filter:brightness(.9); }
.popup .pop-cancel { background:#fff; border-color:var(--pa); color:var(--pa); }
.popup .pop-cancel:hover { background:#fff; filter:brightness(.95); }
.popup .pop-x { position:absolute; top:8px; right:8px; width:44px; min-height:44px; height:44px; padding:0; background:transparent; border-color:transparent; color:var(--pt); }
.popup .pop-x:hover { background:rgba(0,0,0,.08); }
.popup button:focus-visible { outline:3px solid var(--pt); outline-offset:2px; }

/* ---------- laptop narrow (761 to 1100) ---------- */
@media (max-width:1240px) {
  .cards4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .shortcuts { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:1023px) and (min-width:761px) {
  .shell { gap:16px; padding:16px 16px 16px 0; }
  .menucard { flex-basis:220px; width:220px; }
  .formgrid { grid-template-columns:minmax(0, 1fr); }
}

/* ---------- phone (760 px and narrower) ---------- */
@media (max-width:760px) {
  body { font-size:14px; }
  .appbar { padding:6px 10px; gap:8px; }
  .menubtn { display:inline-flex; }
  .orgname { display:none; }
  .logoimg { width:40px; height:40px; }
  .brand { gap:6px; }
  .apprt { flex:1 1 100%; justify-content:space-between; gap:8px; }
  .userbox select { max-width:150px; }
  .shell { display:block; padding:12px; }
  .menucard { position:fixed; top:0; left:0; bottom:0; width:min(300px, 86vw); max-height:none; border-radius:0 6px 6px 0; z-index:60; transform:translateX(-105%); visibility:hidden; transition:transform .18s ease, visibility 0s linear .18s; padding-top:8px; }
  body.menu-open .menucard { transform:none; visibility:visible; transition:transform .18s ease, visibility 0s; }
  .menuclose { display:inline-flex; margin-left:auto; }
  .scrim { display:block; position:fixed; inset:0; background:rgba(20,40,34,.45); z-index:55; opacity:0; visibility:hidden; transition:opacity .18s; }
  body.menu-open .scrim { opacity:1; visibility:visible; }
  button, .btn, .iconbtn { min-height:44px; }
  nav#nav a, .navitem { min-height:44px; }
  input, select, textarea { min-height:44px; }
  .cards4 { grid-template-columns:minmax(0, 1fr); }
  .formgrid { grid-template-columns:minmax(0, 1fr); }
  .grid { grid-template-columns:minmax(0, 1fr); }
  .card { padding:14px; }
  .kv { flex-direction:column; gap:0; }
  .kv .k { flex:none; }
  .doc { padding:12px; }
  .actions > button, .actions > .btn { flex:1 1 auto; }
  /* OI-027: OR particulars and CDV account lines stack (no sideways scroll) */
  .tablewrap.stackwrap { overflow:visible; background:transparent; box-shadow:none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display:block; width:100%; }
  table.stack thead { display:none; }
  table.stack tr { background:#fff; border:1px solid var(--line); border-radius:6px; padding:10px; margin-bottom:10px; }
  table.stack td { border:0; padding:5px 0; }
  table.stack td::before { content:attr(data-label); display:block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
  table.stack td:last-child::before { display:none; }
  .tablewrap td input[type=text], .tablewrap td select, .tablewrap td input.amt { min-width:0; }
  table.lines td.c-dr, table.lines td.c-cr, table.lines td.c-rm, table.lines td.c-acct { width:100%; }
  /* OI-026: each Cashbook row becomes a card */
  .cbwrap { overflow:visible; background:transparent; box-shadow:none; }
  table.cashbook, table.cashbook tbody { display:block; width:100%; }
  table.cashbook thead { display:none; }
  table.cashbook tr { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:2px 12px; background:#fff; border-radius:6px; box-shadow:var(--shadow); padding:12px 14px; margin-bottom:10px; }
  table.cashbook td { display:block; border:0; padding:0; font-size:12.5px; min-width:0; overflow-wrap:anywhere; }
  table.cashbook td.c-date { grid-column:1; grid-row:1; font-weight:600; }
  table.cashbook td.c-or, table.cashbook td.c-cdv { grid-column:2; grid-row:1; text-align:right; font-weight:600; }
  table.cashbook td.c-name { grid-column:1 / -1; grid-row:2; margin:4px 0 6px; }
  table.cashbook td.c-cohbal { grid-column:1; grid-row:3; text-align:left; }
  table.cashbook td.c-bankbal { grid-column:2; grid-row:3; text-align:left; }
  table.cashbook td.c-cohbal::before { content:"COH balance"; display:block; font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
  table.cashbook td.c-bankbal::before { content:"Bank balance"; display:block; font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
  table.cashbook td.c-cohbal, table.cashbook td.c-bankbal { font-size:15px; font-weight:600; }
  table.cashbook td.c-cohdr, table.cashbook td.c-cohcr, table.cashbook td.c-bankdr, table.cashbook td.c-bankcr { display:none; }
  table.cashbook td.c-mv { display:block; grid-column:1 / -1; grid-row:4; margin-top:6px; color:var(--muted); font-size:12px; text-align:left; }
  table.cashbook td.c-status { grid-column:1; grid-row:5; margin-top:8px; }
  table.cashbook td.c-bank { grid-column:2; grid-row:5; margin-top:8px; text-align:right; color:var(--muted); font-size:12px; }
  table.cashbook td:empty { display:none; }
  table.cashbook tr.forward { background:#F1F8F5; }
  table.cashbook tr.muted td, table.cashbook tr.cancelled td, table.cashbook tr.forward td { background:transparent; }
  table.cashbook tr.muted, table.cashbook tr.cancelled { background:#F3F5F4; }
  .totalsbar { gap:8px 24px; }
  /* P-05: the pop-up fits the screen width and scrolls inside when long */
  .popback { padding:10px; }
  .popup { gap:12px; padding:18px 52px 16px 14px; }
  .pop-btns > button { flex:1 1 auto; }
  /* P-13: the user name in the top bar is shown in full (the box is as wide as the screen) */
  .userbox { flex:1 1 100%; }
  .userbox select { max-width:none; width:100%; flex:1 1 auto; text-overflow:clip; }
  /* P-07: two shortcuts per row */
  .shortcuts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .shortcuts .btn { padding:8px 10px; text-align:center; line-height:1.25; }
  /* P-11: no top scroll bar on a phone (the Cashbook rows are cards) */
  .cbtop { display:none !important; }
  /* P-21 (A): small "Dashboard" back link at the top of every inner page (44 px touch height) */
  .backlink { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px 0 2px; margin:-6px 0 2px; font-size:14px; font-weight:600; color:var(--link); text-decoration:none; }
  /* P-21 (B): fixed bottom bar with 5 big buttons (56 px or more). The page gets extra bottom space so the bar never covers content or form buttons. */
  body { padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom:96px; }
  .bottombar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; gap:4px; padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); background:#fff; border-top:2px solid var(--btn-border); box-shadow:0 -2px 10px rgba(30,60,50,.14); }
  .bottombar .bb { flex:1 1 0; min-width:0; min-height:56px; padding:4px 2px; border:0; border-radius:6px; background:transparent; color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font:inherit; font-size:12.5px; font-weight:500; line-height:1.2; text-decoration:none; position:relative; }
  .bottombar .bb:hover { background:#F1F8F5; }
  .bottombar .bb.on { background:var(--coh-tint); color:#1F5A4C; font-weight:600; box-shadow:inset 0 3px 0 var(--teal); }
  .bottombar .bb:focus-visible { outline:3px solid var(--teal); outline-offset:-3px; }
  .bottombar .bbico { position:relative; display:inline-flex; }
  .bottombar .bbbadge { position:absolute; top:-6px; left:calc(100% - 8px); background:#FFE7A8; color:#5A3F00; border:1px solid #E3B341; border-radius:10px; font-size:11px; font-weight:700; min-width:20px; padding:0 5px; text-align:center; line-height:1.5; }
  /* P-21: the "New" chooser (bottom sheet). It is above the bar (z-index 150); pop-ups (200) are above it. */
  body.sheet-open { overflow:hidden; }
  .sheetback { position:fixed; inset:0; z-index:150; background:rgba(20,40,34,.55); display:flex; align-items:flex-end; justify-content:center; }
  .sheet { position:relative; width:min(560px, 100%); max-height:100%; overflow:auto; background:#fff; border-radius:14px 14px 0 0; padding:18px 16px calc(16px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:10px; box-shadow:0 -6px 30px rgba(0,0,0,.3); }
  .sheet-title { font-size:16px; font-weight:600; padding-right:52px; margin:2px 0 4px; color:var(--ink); }
  .sheet-x { position:absolute; top:8px; right:8px; width:44px; height:44px; min-height:44px; padding:0; background:transparent; border-color:transparent; color:var(--ink); }
  .sheet-x:hover { background:rgba(0,0,0,.08); }
  .sheet-btn { min-height:60px; font-size:15px; font-weight:600; gap:12px; text-align:left; justify-content:flex-start; padding:10px 16px; }
  .sheet-btn.sec { justify-content:center; }
  /* P-13: OR list, CDV list, Pending Approvals and Dashboard Recent Transactions: every row is a small card.
     Document number + date on the left, the AMOUNT big on the right, particulars, status pill; nothing needs a sideways swipe. */
  .cardwrap { overflow:visible; background:transparent; box-shadow:none; }
  table.cardlist, table.cardlist tbody { display:block; width:100%; }
  table.cardlist thead { display:none; }
  table.cardlist tr { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"doc amt" "date amt" "name name" "kind status" "sys sys" "by by" "act act"; column-gap:12px; align-items:start; background:#fff; border-radius:6px; box-shadow:var(--shadow); padding:12px 14px; margin-bottom:10px; }
  .dash2 .cardwrap tr { box-shadow:none; border:1px solid var(--line); }
  table.cardlist td { display:block; border:0; padding:0; min-width:0; max-width:none; overflow:visible; text-overflow:clip; white-space:normal; font-size:12.5px; }
  table.cardlist td.c-doc { grid-area:doc; font-size:15px; font-weight:600; overflow-wrap:anywhere; }
  table.cardlist td.c-date { grid-area:date; color:var(--muted); }
  table.cardlist td.c-amt { grid-area:amt; align-self:center; font-size:18px; font-weight:600; white-space:nowrap; text-align:right; }
  table.cardlist td.c-name { grid-area:name; margin:6px 0 4px; overflow-wrap:anywhere; }
  table.cardlist td.c-kind, table.cardlist td.c-type { grid-area:kind; align-self:center; color:var(--muted); }
  table.cardlist td.c-status { grid-area:status; justify-self:end; margin-top:2px; }
  table.cardlist td.c-sys { grid-area:sys; margin-top:4px; color:var(--muted); font-size:11.5px; }
  table.cardlist td.c-by { grid-area:by; margin-top:2px; color:var(--muted); font-size:11.5px; }
  table.cardlist td.c-act { grid-area:act; margin-top:8px; }
  table[data-table=pending] td.c-status { display:block; }
  /* B-01: the Bank Accounts list as cards: small captions in front of the account number and the Pending count */
  table[data-table=banks] td.c-name::before { content:"Account no. "; color:var(--muted); }
  table[data-table=banks] td.c-kind::before { content:"Pending entries using it: "; }
  table[data-table=banks] td.c-kind { color:var(--ink); }
  table.cardlist td:empty { display:none; }
}

/* P-08/P-16: when the box that holds the OR particulars or the CDV account lines is narrow (small screen OR big zoom OR a narrow form column),
   each line is stacked so the Account box gets the full width and nothing is cut off. (Same rules as the phone layout, but by the real width of the box.) */
@container stackbox (max-width: 560px) {
  table.stack,table.stack tbody, table.stack tr, table.stack td { display:block; width:100%; }
  table.stack thead { display:none; }
  table.stack tr { background:#fff; border:1px solid var(--line); border-radius:6px; padding:10px; margin-bottom:10px; }
  table.stack td { border:0; padding:5px 0; width:100%; }
  table.stack td::before { content:attr(data-label); display:block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
  table.stack td:last-child::before { display:none; }
  .tablewrap td input[type=text], .tablewrap td select, .tablewrap td input.amt, table.lines td.c-acct input { min-width:0; }
  table.lines td.c-dr, table.lines td.c-cr, table.lines td.c-rm, table.lines td.c-acct { width:100%; }
}

/* ---------- v0.7 Members ---------- */
.editcmp { width:100%; margin-top:6px; font-size:12px; }
.editcmp th { padding:4px 8px; font-size:10.5px; }
.editcmp td { padding:4px 8px; font-size:12px; border-bottom:1px solid var(--line); }
.editcmp td.ec-old { color:var(--muted); text-decoration:line-through; }
table[data-table=members] td.c-status, table[data-table=member-docs] td.c-status { white-space:nowrap; }
table[data-table=members] td.c-sys { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:760px) {
  /* Members list as cards: small captions in front of the two balances */
  table[data-table=members] td.c-amt::before { content:"Share Capital"; display:block; font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); text-align:right; }
  table[data-table=members] td.c-sys::before { content:"Savings balance: "; }
  table[data-table=members] td.c-sys { text-align:left; color:var(--ink); }
  table[data-table=members] td.c-name { font-weight:600; font-size:14px; }
  table[data-table=member-docs] td.c-name::before { content:"Tag: "; color:var(--muted); }
  /* generic small tables as cards (summary, history, requests): no sideways swipe */
  .stackcard { overflow:visible; background:transparent; box-shadow:none; }
  .stackcard table, .stackcard tbody { display:block; width:100%; }
  .stackcard thead { display:none; }
  .stackcard tr { display:block; background:#fff; border-radius:6px; box-shadow:var(--shadow); padding:10px 14px; margin-bottom:10px; }
  .stackcard td { display:block; border:0; padding:3px 0; font-size:12.5px; white-space:normal; text-align:left; overflow-wrap:anywhere; }
  .stackcard td::before { content:attr(data-label); display:block; font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
  .stackcard td.num { text-align:left; }
  table.editcmp, table.editcmp tbody, table.editcmp tr, table.editcmp td { display:block; width:100%; }
  table.editcmp thead { display:none; }
  table.editcmp tr { border:1px solid var(--line); border-radius:6px; padding:6px 8px; margin-bottom:6px; background:#fff; }
  table.editcmp td { border:0; padding:2px 0; }
  table.editcmp td.ec-f { font-weight:600; }
  table.editcmp td.ec-old::before { content:"Old: "; color:var(--muted); }
  table.editcmp td.ec-new::before { content:"New: "; color:var(--muted); }
}
/* Members list: compact enough for a 1280 px laptop without a sideways scroll (headings may wrap; Account No., name and date stay on one line) */
table[data-table=members] th, table[data-table=member-docs] th { white-space:normal; }
table[data-table=members] th, table[data-table=members] td { padding-left:9px; padding-right:9px; }
table[data-table=members] td.c-doc, table[data-table=members] td.c-date { white-space:nowrap; }
table[data-table=members] td.c-name { min-width:190px; }
@media (max-width:760px) {
  table[data-table=members] td.c-doc, table[data-table=members] td.c-date { white-space:normal; }
  table[data-table=members] td.c-name { min-width:0; }
}

/* ---------- v0.7 (M-09) Member picker and tags in the OR and CDV forms ---------- */
.mp { border:1px solid var(--btn-border); background:#F7FBF9; border-radius:6px; padding:12px 14px; margin:0 0 14px; }
.mp-title { font-size:13.5px; font-weight:600; margin-bottom:4px; }
.mp-search input { width:100%; padding:8px 10px; border:1px solid var(--in-border); background:#fff; border-radius:4px; height:38px; }
.mp-results { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.mp-item { justify-content:flex-start; text-align:left; background:#fff; color:var(--ink); border:1px solid var(--btn-border); min-height:44px; white-space:normal; font-weight:400; }
.mp-item:hover { background:#F1F8F5; border-color:var(--teal); }
.mp-none { font-size:12.5px; color:var(--warn-fg); background:var(--warn-bg); padding:8px 10px; border-radius:4px; }
.mp-picked { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin-top:6px; }
.mp-tagpill { background:var(--teal); color:#fff; border-radius:999px; padding:4px 14px; font-weight:600; font-size:13px; }
.mp-bal { font-size:12.5px; color:var(--ink); }
.mp-warn { font-size:12.5px; color:var(--err-fg); font-weight:600; }
/* the Tag box of every line: only when a member is picked */
#orform:not(.has-member) .tagcell, #cdvform:not(.has-member) .tagcell { display:none !important; }
table.lines th.tagcell, table.lines td.tagcell { width:150px; }
.tagcell select { min-width:130px; }
@media (max-width:760px) {
  .has-member table.stack td.tagcell { display:block; width:100%; }
  .mp { padding:10px; }
}

/* ---------- v0.7 Member Settings and Encoding Batches ---------- */
table[data-table=batches] td.c-name .fineprint { margin-top:2px; overflow-wrap:anywhere; }
table[data-table=batches] td.c-act { white-space:normal; }
@media (max-width:760px) {
  table[data-table=batches] td.c-kind, table[data-table=batches] td.c-status { color:var(--ink); }
  table[data-table=batches] td.c-status { justify-self:start; }
}
table[data-table=batches] td.c-doc { white-space:nowrap; } @media (max-width:760px) { table[data-table=batches] td.c-doc { white-space:normal; } }

@media print {
  @page { margin: 14mm; }
  body { background:#fff; font-size:11.5pt; color:#000; }
  header.top, #msg, .noprint, .actions, button, .filters, nav#nav, .menucard, .scrim, .pagehead, .totalsbar, .popback, .bottombar, .sheetback, .backlink { display:none !important; }
  body { padding-bottom:0 !important; }
  .printbanner { display:block; text-align:center; font-weight:600; color:#8A2A1D; border:1px solid #8A2A1D; padding:2px 6px; margin-bottom:6px; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .shell { display:block; padding:0; max-width:none; }
  .content { width:100%; }
  main { padding:0; max-width:none; }
  .doc { border:none; box-shadow:none; border-radius:0; max-width:none; margin:0; padding:0; }
  .tablewrap { overflow:visible; border:1px solid #666; box-shadow:none; border-radius:0; page-break-inside:avoid; }
  th { position:static; background:#eee !important; color:#000; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  tr { page-break-inside:avoid; }
  .dochead { border-bottom:2px solid #000; }
  .docfoot, .dochead .pd { color:#000 !important; }
  footer#foot { border-top:1px solid #666; color:#000; }
  .card { border:none; box-shadow:none; padding:0; }
  a { color:#000; text-decoration:none; }

  /* OI-016: the Daily Treasury Report must fit ONE page (A4 and Letter). Tighter type and spacing, 4 tables in a 2 x 2 grid. */
  [data-doc="REPORT"] { font-size:9pt; line-height:1.3; }
  [data-doc="REPORT"] th, [data-doc="REPORT"] td { padding:2px 6px; font-size:9pt; }
  [data-doc="REPORT"] .repgrid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; align-items:start; }
  [data-doc="REPORT"] .tablewrap { margin-bottom:6px; }
  [data-doc="REPORT"] .dochead { padding-bottom:4px; margin-bottom:4px; }
  [data-doc="REPORT"] .logo-img { width:44px; height:44px; }
  .logo-img { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  [data-doc="REPORT"] .doctitle { margin:2px 0; font-size:12pt; }
  [data-doc="REPORT"] .msg { padding:3px 8px; margin-bottom:4px; }
  [data-doc="REPORT"] .sigs { margin-top:14px; }
  [data-doc="REPORT"] .docfoot { margin-top:6px; }
}
/* v0.7 (M-09): the Official Receipt (OR) and Cash Disbursement Voucher (CDV) are a little tighter on paper, so the extra "Member Account No." line of a linked member
   (and a few more particulars or account lines) still print on ONE page on A4 and Letter. (In v0.6 an OR with 2 particulars lines already needed 2 pages on Letter.) */
@media print {
  [data-doc="OR"], [data-doc="CDV"] { font-size:10.5pt; line-height:1.3; }
  [data-doc="OR"] .kv, [data-doc="CDV"] .kv { padding:2px 0; }
  [data-doc="OR"] th, [data-doc="OR"] td, [data-doc="CDV"] th, [data-doc="CDV"] td { padding:3px 6px; font-size:10pt; }
  [data-doc="OR"] .tablewrap, [data-doc="CDV"] .tablewrap { margin-bottom:6px; }
  [data-doc="OR"] .dochead, [data-doc="CDV"] .dochead { padding-bottom:4px; margin-bottom:6px; }
  [data-doc="OR"] .logo-img, [data-doc="CDV"] .logo-img { width:52px; height:52px; }
  [data-doc="OR"] .doctitle, [data-doc="CDV"] .doctitle { margin:4px 0; font-size:13pt; }
  [data-doc="OR"] .sigs, [data-doc="CDV"] .sigs { margin-top:16px; }
  [data-doc="OR"] .docfoot, [data-doc="CDV"] .docfoot { margin-top:6px; }
}
/* v0.7 (M-12): the Encoding Batch print. A normal batch (up to about 25 members) fits ONE page on A4 and Letter; a very long list continues on more pages. */
@media print {
  [data-doc="BATCH"] { font-size:10pt; line-height:1.3; }
  [data-doc="BATCH"] th, [data-doc="BATCH"] td { padding:2px 6px; font-size:9.5pt; }
  [data-doc="BATCH"] .kv { padding:2px 0; }
  [data-doc="BATCH"] .tablewrap { page-break-inside:auto; margin-bottom:6px; }
  [data-doc="BATCH"] .dochead { padding-bottom:4px; margin-bottom:6px; }
  [data-doc="BATCH"] .logo-img { width:48px; height:48px; }
  [data-doc="BATCH"] .doctitle { margin:4px 0; font-size:13pt; }
  [data-doc="BATCH"] h3:not(.doctitle) { margin:8px 0 4px; font-size:11pt; }
  [data-doc="BATCH"] .sigs { margin-top:18px; }
  [data-doc="BATCH"] .docfoot { margin-top:6px; }
}