/* aboo brand layer over tina4css — admin PWA shell, mobile-first.
tina4css provides btn/card/badge/grid/forms; this adds the app frame + brand tokens. */
/* Brand tokens mapped from the canonical aboo palette (brand/aboo-colors.css).
--aboo-accent / --aboo-bg / --aboo-fg flip with [data-theme]; we layer surfaces on top. */
:root{
--brand: var(--aboo-accent); /* teal #19C4C4 light / #2AE0E0 dark */
--brand-ink: var(--aboo-ink); /* #0E2E33 deep teal — drawer, code chips */
--bg: var(--aboo-bg); /* #EAF3F2 mist (light) / #0E2E33 (dark) */
--ink: var(--aboo-fg); /* text */
--surface:#ffffff; --muted:#2E575E; --line:#d3e6e4;
--ok:#15803d; --bad:#b91c1c; --warn:#b45309; --info:#0e7490;
/* v2 layout metrics (sleek.css): 8px radius, 12px cards; tenant sidebar is 200px (t-shell) */
--drawer-w:248px; --bar-h:58px; --radius:8px; --radius-lg:12px;
--brand-faint:rgba(25,196,196,.12); --brand-fainter:rgba(25,196,196,.05);
--shadow:0 1px 3px rgba(0,0,0,.1); --shadow-lg:0 4px 12px rgba(0,0,0,.1);
/* mobile bottom nav: bar height, and the padding pages need so content clears it (+ the
iPhone home-indicator inset, available because index.html sets viewport-fit=cover) */
--bottom-nav-h:56px; --bottom-nav-space:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom,0px));
}
/* aboo-colors.css lists `:root` in the LIGHT selector after the dark block (equal specificity →
:root wins), so --aboo-bg/fg/accent never flip. Re-assert the dark values at higher specificity. */
:root[data-theme="dark"]{
/* depth: drawer (darkest) < content bg < elevated surfaces (cards/app-bar) */
--bg:#0c2429; --ink:#EAF3F2; --surface:#15414A; --muted:#8fb1b0; --line:#2E575E;
--brand: var(--aboo-teal-bright); /* #2AE0E0 bright teal in dark */
}
:root[data-theme="dark"] .drawer{ background:#081e22; }
:root[data-theme="dark"] .form-control{ background:#0c2429; color:var(--ink); border-color:var(--line); }
:root[data-theme="dark"] .form-control::placeholder{ color:#6f9694; }
:root[data-theme="dark"] .cat-code,
:root[data-theme="dark"] .iso-badge{ background:#081e22; color:var(--aboo-teal-bright); }
:root[data-theme="dark"] .row-card:hover,
:root[data-theme="dark"] .kpi{ box-shadow:0 1px 2px rgba(0,0,0,.3); }
*{box-sizing:border-box}
html,body{margin:0;height:100%}
/* v2 typography: the system stack at 16px/1.5 (sleek.css body) — Sora retired */
body{background:var(--bg);color:var(--ink);
font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
#app{height:100%}
a{color:var(--brand);text-decoration:none}
/* ---------- brand lockup ---------- */
.brand-lockup{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:-.01em}
.brand-dot{width:14px;height:14px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(25,196,196,.25)}
.brand-name{font-size:20px}
.brand-sub{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;opacity:.6;margin-left:2px}
/* ---------- layout ---------- */
.layout{min-height:100%}
.drawer{position:fixed;top:0;left:0;width:var(--drawer-w);height:100%;background:var(--brand-ink);
color:#cfe9e8;display:flex;flex-direction:column;z-index:40;transition:transform .22s ease;overflow-y:auto}
.drawer-brand{padding:16px 18px;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.nav-list{padding:10px 10px 24px}
.nav-section{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#7fb1ad;
padding:14px 12px 6px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:#cfe9e8;
cursor:pointer;font-weight:500;user-select:none}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:var(--brand);color:var(--aboo-ink);font-weight:600}
.nav-item.soon{opacity:.45;cursor:default}
.nav-item.soon:hover{background:none;color:#cfe9e8}
.nav-ico{width:20px;text-align:center;font-size:15px;opacity:.9}
/* The Reports "∑" reads optically high beside its label — the glyph has no descender like the "p"
in "Reports", so align-items:center (which aligns ink centres) leaves the title looking a touch
high. Owner-chosen: nudge the LABEL down 2px (not the icon) so "Reports" sits in the middle of
the ∑. Scoped to Reports only, via the adjacent sibling of its per-key icon class. */
.nav-ico-reports + .nav-lbl{position:relative;top:2px}
.nav-lbl{flex:1}
.soon-badge{font-size:12px;opacity:.8}
.main{margin-left:var(--drawer-w);min-height:100%;display:flex;flex-direction:column}
.app-bar{position:sticky;top:0;height:var(--bar-h);background:var(--surface);border-bottom:1px solid var(--line);
display:flex;align-items:center;gap:12px;padding:0 16px;z-index:30}
.app-title-wrap{display:flex;flex-direction:column;line-height:1.1}
.app-company{font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38ch}
.app-title{font-weight:500;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.app-user{display:flex;align-items:center;gap:10px;margin-left:auto}
.user-name{font-size:13px;color:var(--muted);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Admin/Member role badge next to the signed-in name (owner 2026-09-10 — "tells you if you are an
admin or normal user"). Sits on the header band; admin = brand pill, member = subtle neutral. */
.role-badge{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:1px 7px;border-radius:999px;line-height:1.3;white-space:nowrap;flex:0 0 auto}
.role-admin{background:var(--brand);color:#fff}
/* Owner badge: a fixed amber pill (Andre 2026-09-14 — the old var(--ink) was near-black in light
and white-on-white in DARK, unreadable). Amber-700 + white reads on both themes, distinct from
the teal admin badge. */
.role-owner{background:#b45309;color:#fff}
.role-member{background:rgba(120,140,140,.22);color:var(--muted)}
/* tenant header: global "+ New" create menu + Approvals/Expenses notification shortcuts */
.t-newmenu-wrap{position:relative;display:inline-flex}
.t-new-btn{display:inline-flex;align-items:center;gap:5px;background:var(--brand);color:var(--aboo-ink,#04312e);
border:0;border-radius:9px;padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;line-height:1.2}
.t-new-btn:hover{filter:brightness(1.06)}
.t-new-caret{font-size:12px;opacity:.85}
.t-menu-backdrop{position:fixed;inset:0;z-index:60}
.t-newmenu-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:61;min-width:196px;
background:var(--surface,#fff);border:1px solid var(--line,#ddd);border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column}
.t-newmenu-cap{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#777);font-weight:700;padding:7px 10px 2px}
.t-newmenu-item{text-align:left;background:none;border:0;border-radius:6px;padding:8px 10px;font-size:13px;color:var(--ink);cursor:pointer;width:100%}
.t-newmenu-item:hover{background:var(--brand-faint,rgba(25,196,196,.12))}
.t-notif{position:relative;appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);
border-radius:9px;padding:5px 9px;cursor:pointer;font-size:15px;line-height:1}
.t-notif:hover{border-color:var(--muted,#999)}
.t-notif-badge{position:absolute;top:-7px;right:-7px;background:var(--bad,#dc2626);color:#fff;
font-size:12px;font-weight:800;min-width:18px;height:18px;line-height:18px;border-radius:9px;padding:0 4px;text-align:center}
.nav-badge{margin-left:auto;background:var(--bad,#dc2626);color:#fff;font-size:12px;font-weight:800;
min-width:19px;height:19px;line-height:19px;border-radius:10px;padding:0 5px;text-align:center}
.nav-item.active .nav-badge{background:#fff;color:var(--bad,#dc2626)}
/* NOTE: the app-bar hamburger is gone. On mobile the menu is the bottom bar (its "More" tab opens
this drawer); on desktop the drawer is always visible. Nothing left for a top-left ☰ to do. */
.content{padding:18px 16px 64px;flex:1}
.scrim{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:35}
/* mobile */
@media (max-width:767px){
.drawer{transform:translateX(-100%)}
.layout.nav-open .drawer{transform:translateX(0)}
.layout.nav-open .scrim{display:block}
.main{margin-left:0}
.cb-summary{flex-wrap:wrap;gap:8px;position:static}
.cb-summary-staged{flex-wrap:wrap;gap:8px}
}
/* ---------- page ---------- */
.page{max-width:920px;margin:0 auto}
.page-head{margin:2px 0 16px}
/* keep the title + "+ Add" action in reach while scrolling long grids (#9) */
.page-head.with-action{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
position:sticky;top:var(--bar-h);z-index:20;background:var(--bg);padding:10px 0;margin:0 0 12px}
.page-title{font-size:22px;margin:0 0 2px}
.page-sub{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:8px}
.muted-block{color:var(--muted);text-align:center;padding:42px 0}
.count-line{font-size:12px;color:var(--muted);margin:0 2px 10px}
.toolbar{display:flex;gap:8px;margin:6px 0 12px;flex-wrap:wrap}
.toolbar .form-control{flex:1 1 200px}
.per-select{flex:0 0 130px;max-width:140px}
/* ---------- list pager (Prev · page numbers · Next · range) — top & bottom of lists ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:12px 2px}
.pager-hidden{display:none}
.pager-info{font-size:12.5px;color:var(--muted);margin-left:6px}
.pager-btn{background:var(--surface);color:var(--brand);border:1px solid var(--line);
border-radius:var(--radius);padding:7px 14px;font-weight:600;cursor:pointer}
.pager-btn:hover:not(:disabled){background:var(--brand);color:#fff;border-color:var(--brand)}
.pager-btn:disabled{opacity:.4;cursor:not-allowed;color:var(--muted);background:var(--surface)}
.pager-num{min-width:36px;text-align:center;background:var(--surface);color:var(--ink);
border:1px solid var(--line);border-radius:var(--radius);padding:7px 10px;font-weight:600;cursor:pointer}
.pager-num:hover{border-color:var(--brand);color:var(--brand)}
.pager-num.active{background:var(--brand);color:#fff;border-color:var(--brand);cursor:default}
.pager-gap{color:var(--muted);padding:0 2px;user-select:none}
/* ---------- KPI dashboard ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
border-left:4px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.04)}
.kpi .card-body{padding:14px 16px}
.kpi-label{font-size:12.5px;color:var(--muted);font-weight:600}
.kpi-val{font-size:30px;font-weight:800;line-height:1.1;margin:6px 0 4px;letter-spacing:-.02em}
.kpi-sub{font-size:12.5px;color:var(--muted)}
.kpi-sub.pending{color:var(--warn)}
.kpi.accent-primary{border-left-color:var(--brand)}
.kpi.accent-success{border-left-color:var(--ok)}
.kpi.accent-danger{border-left-color:var(--bad)}
.kpi.accent-info{border-left-color:var(--info)}
.kpi.accent-dark{border-left-color:var(--brand-ink)}
/* ---------- ledger categories ---------- */
.cat-root{margin:0 0 16px}
.cat-root-head{display:flex;align-items:baseline;gap:8px;padding:0 2px 7px}
.cat-root-head h2{font-size:14px;margin:0;text-transform:uppercase;letter-spacing:.05em}
.cat-stmt{font-size:12.5px;color:var(--muted)}
.cat-cards{display:flex;flex-direction:column;gap:8px}
.cat-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);padding:11px 14px}
.cat-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:12.5px;
background:var(--brand-ink);color:#fff;padding:3px 8px;border-radius:8px;min-width:48px;text-align:center}
.cat-name{flex:1;font-weight:600}
.cat-edit{padding:2px 9px;line-height:1.4}
/* ---------- list rows (clickable) ---------- */
.row-list{display:flex;flex-direction:column;gap:8px}
.row-card.inactive{opacity:.55}
.row-card.is-root{cursor:default;border-left:3px solid var(--brand)}
.trans-key{flex:0 0 auto;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-family:SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--brand);
background:var(--bg);border:1px solid var(--line);padding:3px 9px;border-radius:7px}
.row-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);padding:12px 14px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.row-card:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(79,70,229,.12)}
.iso-badge{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:12px;
background:var(--brand-ink);color:#fff;padding:4px 9px;border-radius:8px;min-width:42px;text-align:center}
.row-main{flex:1;display:flex;flex-direction:column;min-width:0}
.row-main b{font-weight:600}
.row-sub{font-size:12px;color:var(--muted)}
.row-chevron{color:var(--muted);font-size:22px;line-height:1}
/* billing status pill on a company row (green = active, per the colour convention) */
.row-status{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.row-status.ok{background:color-mix(in srgb,#16a34a 16%,transparent);color:#16a34a}
/* ---------- DEMO badge ----------
The demo company is a sandbox. Everything it produces must be impossible to mistake for the real
thing, so the badge is deliberately LOUD and does not reuse .row-status / .badge (both of which
read as ordinary metadata): amber, uppercase, letter-spaced, with a solid border. Amber is the
convention's "V" colour — attention, not error. */
.demo-badge{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
padding:3px 9px;border-radius:6px;line-height:1.4;
color:#92400e;background:color-mix(in srgb,#f59e0b 26%,transparent);border:1px solid #f59e0b;
/* align-self, not just flex, because .row-main is a COLUMN flex container: `flex:0 0 auto`
governs the main (vertical) axis there, and the default `align-items:stretch` then blew the
badge out to the full row width. Measured at 375px before this line: 313px wide. */
align-self:flex-start}
:root[data-theme="dark"] .demo-badge{color:#fde68a;background:color-mix(in srgb,#f59e0b 22%,transparent)}
/* in the app bar (a ROW flex) it sits beside the title and should stay vertically centred */
.app-bar .demo-badge{margin-left:10px;align-self:center}
/* on a row card it sits on the name's line, not under it */
.row-main > b + .demo-badge{margin:3px 0 1px}
.demo-note{font-size:12px;color:var(--muted);line-height:1.35}
/* dashboard quick links (#2) */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:0 0 20px}
.quick-card{display:flex;align-items:center;gap:12px;text-align:left;background:var(--surface);
border:1px solid var(--line);border-radius:var(--radius);padding:14px;cursor:pointer;
transition:border-color .12s,box-shadow .12s}
.quick-card:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(79,70,229,.12)}
.quick-ico{font-size:20px;color:var(--brand);line-height:1}
.quick-text{flex:1;display:flex;flex-direction:column;min-width:0}
.quick-sub{font-size:12px;color:var(--muted)}
/* flash the just-added / just-edited row so the user sees where it went */
@keyframes rowflash{0%{background:rgba(56,178,172,.28)}100%{background:transparent}}
.row-card.row-hl,.cat-card.row-hl,.tier.row-hl{animation:rowflash 1.8s ease-out}
/* pane switch (e.g. Debtors ↔ Creditors) — a quick fade-rise on the fresh pane */
@keyframes pane-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pane-in{animation:pane-in .22s ease}
@media (prefers-reduced-motion: reduce){.pane-in{animation:none}}
/* inline delete (no window.confirm) — ONE small trash icon; in-place "Delete? Yes/No" when armed. */
.btn-row-del{appearance:none;border:1px solid transparent;background:none;cursor:pointer;line-height:1;
display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:7px;
font-size:14px;color:var(--muted);transition:color .12s,background .12s,border-color .12s}
.btn-row-del .del-ico{font-size:14px;filter:none;display:inline-flex;align-items:center}
.btn-row-del .del-lbl{display:none}
.btn-row-del:hover{color:var(--bad);border-color:var(--bad);background:rgba(185,28,28,.10)}
/* ── Andre "basics": figures tabular + right-aligned, app-wide ─────────────────
tabular-nums is harmless on non-digits, so apply it broadly; the right-align
utilities are additive (screens already right-align via scoped rules — these just
make .num/.text-right/.ta-r/td.r work everywhere, so no numeric column is missed). */
body,input,select,textarea,button,table,.dash-kpi-val{font-variant-numeric:tabular-nums}
.text-right,.ta-r,.num,.money,.currency{text-align:right}
td.text-right,th.text-right,td.ta-r,th.ta-r,td.num,th.num,td.r,th.r,td.money,th.money,td.currency,th.currency{text-align:right}
.num,.money,.currency{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Owner (2026-09-17): every price / currency INPUT is right-aligned by default so the
decimal point stays under the column heading — same rule for a bare
and for an inputmode="decimal" text input. Explicit .text-left on the field opts out on
the rare non-money numeric input (e.g. a page count). */
input[type="number"],input[inputmode="decimal"],input[inputmode="numeric"].money-in{text-align:right}
input.text-left{text-align:left}
.btn-row-del:hover .del-ico{filter:none}
.confirm-inline{display:inline-flex;align-items:center;gap:7px}
.confirm-q{font-size:13px;font-weight:600;color:var(--bad)}
/* delete blocked → show why, inline on the row (#34) */
.confirm-err{flex-wrap:wrap;max-width:320px;text-align:right}
.confirm-errmsg{font-size:12px;color:var(--bad);line-height:1.35}
/* blocked-delete message shown beside the name so the row's action buttons stay put */
.row-err{flex:1 1 auto;min-width:120px;font-size:12px;color:var(--bad);line-height:1.35}
.row-card.row-blocked .row-main{flex:0 0 auto}
/* required-field validation highlight (#10) */
.form-control.is-invalid{border-color:var(--bad)}
.form-control.is-invalid:focus{border-color:var(--bad);box-shadow:0 0 0 3px rgba(185,28,28,.15)}
.field-required{color:var(--bad);font-size:12px;margin:-4px 0 8px}
/* forgot-password link under the login password field */
.login-forgot{text-align:right;font-size:13px}
.login-forgot a{color:var(--brand);cursor:pointer}
/* email templates (per-country) */
.tpl-card{cursor:pointer}
.tpl-vars{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 6px}
.tpl-vars-lbl{font-size:12px;color:var(--muted)}
.tpl-var{appearance:none;border:1px solid var(--line);background:var(--bg,#f8fafc);color:var(--ink);
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;padding:2px 8px;
border-radius:6px;cursor:pointer}
.tpl-var:hover{border-color:var(--brand);color:var(--brand)}
.tpl-body{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.5}
.tpl-preview-head{display:flex;align-items:center;gap:12px;margin:2px 0 6px}
.tpl-preview-wrap{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 10px}
.tpl-preview{width:100%;height:280px;border:0;background:#eef2f3;display:block}
.btn-danger-text{color:var(--bad);border-color:var(--bad)}
/* tenant home / onboarding (no admin drawer) */
.tenant-main{margin-left:0}
/* Tenant drawer company context (v2 left-nav header: back-to-companies + company name) */
.drawer-co{padding:10px 14px 6px;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer-back{background:none;border:none;color:#cfe9e8;font-size:12.5px;font-weight:600;cursor:pointer;padding:2px 0}
.drawer-back:hover{color:#fff}
.drawer-co-name{color:#fff;font-weight:700;font-size:14px;margin-top:2px;line-height:1.25}
.onboard-wrap{max-width:520px;margin:32px auto;padding:0 16px}
.onboard-card{width:100%}
.onboard-title{font-size:22px;font-weight:800;margin:0 0 4px}
.onboard-page{max-width:720px;margin:0 auto}
/* regime reporting-fields editor rows */
.rg-field-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.rg-field-row .form-control{flex:1;margin:0}
/* idle auto-logout warning (#1) */
.idle-overlay{z-index:1200}
.idle-card{max-width:400px}
.idle-msg{margin:4px 0 16px;color:var(--ink);line-height:1.5}
.btn-confirm-yes,.btn-confirm-no{appearance:none;border:1px solid var(--line);border-radius:8px;
padding:4px 12px;font-size:13px;font-weight:600;cursor:pointer;background:var(--surface);color:var(--ink)}
.btn-confirm-yes{background:var(--bad);border-color:var(--bad);color:#fff;min-width:44px}
.btn-confirm-yes:hover{filter:brightness(.93)}
.btn-confirm-yes:disabled{opacity:.6;cursor:default}
.btn-confirm-no:hover{border-color:var(--muted)}
/* Journal post is a positive action, not a destructive delete — its confirm strip is GREEN, not the shared red (Andre 2026-09-17) */
.confirm-inline.confirm-go .confirm-q{color:var(--ok)}
.confirm-inline.confirm-go .btn-confirm-yes{background:var(--ok);border-color:var(--ok)}
/* ---------- detail: back link, tabs, fields ---------- */
.back-link{display:inline-block;color:var(--muted);font-size:13px;cursor:pointer;margin:0 0 6px}
.back-link:hover{color:var(--brand)}
.tabbar{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:4px 0 16px;overflow-x:auto}
.tab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);
font-size:14px;font-weight:600;padding:9px 12px;cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.field{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.field-label{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.field-val{font-size:15px;font-weight:600;margin-top:3px}
.hint{margin-top:14px;font-size:12.5px;color:var(--muted);background:#e3f2f1;border-radius:10px;padding:10px 12px}
/* tina4: tina4-css sets .badge{font-size:0.75em}, so a badge inherits 75% of whatever it sits in —
measured at 9.75px inside a 13px .page-sub and 11.25px inside body copy. Relative sizing means
there is no floor, so badges get illegible wherever the context is small. Pin an absolute
readable size; the em-based default is part of the upstream write-up
(plan/upstream-tina4-css-touch-targets.md). */
.badge{font-size:12px}
/* tina4css button/badge primaries → aboo teal (dark text for contrast on the bright teal) */
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--aboo-ink)}
.btn-primary:hover{background:var(--brand);border-color:var(--brand);filter:brightness(.94)}
.badge-primary{background:var(--brand);color:var(--aboo-ink)}
.brand-dot{background:var(--brand)}
/* outline / secondary button — theme-aware (tina4css default has dark text invisible on dark) */
.btn-outline{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-outline:hover{background:rgba(127,160,160,.14);border-color:var(--muted);color:var(--ink)}
/* comfortable, consistent modal actions */
.form-actions .btn{padding:9px 18px;border-radius:10px;font-weight:600;min-width:96px}
.muted-sub{font-size:12.5px;color:var(--muted)}
/* ---------- pricing tiers ---------- */
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.tier{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tier.inactive{opacity:.55}
.tier-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.tier-name{font-weight:700;font-size:15px}
.tier-head-actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap}
.tier-code{font-size:12.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-top:1px}
.tier-price{font-size:22px;font-weight:800;margin:8px 0 0;color:var(--brand)}
.tier-per{font-size:12px;font-weight:600;color:var(--muted)}
.tier-year{font-size:12.5px;color:var(--muted);margin-top:1px}
.tier-caps{font-size:12px;color:var(--muted);margin-top:8px}
.tier-badges{margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* form layout helpers (side-by-side fields + left-aligned destructive action) */
.form-row{display:flex;gap:10px}
.form-col{flex:1;min-width:0}
.form-actions-spacer{flex:1}
.tier-delete{color:var(--bad);border-color:var(--bad)}
.tier-delete:hover{background:var(--bad);color:#fff}
/* ---------- account add/edit form + modal ---------- */
.tab-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.tab-actions-right{display:flex;align-items:center;gap:8px}
.tab-actions-right .per-select{flex:0 0 120px}
.ledger-search{margin:0 0 12px}
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:flex-start;
justify-content:center;z-index:50;padding:24px 16px;overflow-y:auto}
.modal-card{background:var(--surface);color:var(--ink);border-radius:16px;width:100%;max-width:440px;
padding:20px 22px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.modal-wide{max-width:620px}
/* oversight grants list inside the admin modal (#8) — scrolls when an admin oversees many */
.grants-list{margin-top:8px;max-height:min(46vh,340px);overflow-y:auto}
/* default-codes picker — scrollable checklist of the country chart */
.code-picker{max-height:48vh;overflow-y:auto;border:1px solid var(--line);border-radius:10px;
background:var(--bg);padding:4px}
.code-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.code-row:hover{background:var(--surface)}
.code-row.on{background:color-mix(in srgb, var(--brand) 14%, transparent)}
.code-row .cat-code{flex:0 0 auto}
.code-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code-desc{flex:1;min-width:0;height:30px;padding:3px 8px;font-size:13px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal-head h3{margin:0;font-size:18px}
.modal-x{appearance:none;border:none;background:none;font-size:18px;color:var(--muted);cursor:pointer;line-height:1}
.form-check{display:flex;align-items:center;gap:8px;font-size:14px;margin:8px 0;cursor:pointer}
.form-note{font-size:13px;color:var(--muted);margin:-2px 0 10px}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.cat-card.inactive{opacity:.55}
.tag-off{font-size:12px;background:#fee2e2;color:var(--bad);padding:1px 6px;border-radius:999px;margin-left:8px;font-weight:600}
.tag-on{font-size:12px;background:#dcfce7;color:#15803d;padding:1px 6px;border-radius:999px;font-weight:600}
/* ---------- theme toggle ---------- */
.theme-toggle{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);
border-radius:9px;padding:5px 9px;cursor:pointer;font-size:15px;line-height:1}
/* ---------- dark mode (brand) — token mapping handles bg/ink/surface; these are tweaks ---------- */
:root[data-theme="dark"] .hint{background:#123339}
:root[data-theme="dark"] .tag-off{background:#3b1414}
:root[data-theme="dark"] .tag-on{background:#14321c;color:#4ade80}
:root[data-theme="dark"] .row-card:hover{box-shadow:0 2px 10px rgba(0,0,0,.4)}
/* ---------- login ---------- */
.login-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px;
background:radial-gradient(1200px 600px at 50% -10%,#1a4d54 0%,#0E2E33 55%,#07191c 100%)}
/* The login card is a fixed white card on the teal gradient — theme-independent (don't inherit
dark-mode text colours, or it goes invisible on white). */
/* theme toggle floating on the gradient (light styling so it shows on the dark backdrop) */
.login-toggle{position:fixed;top:16px;right:16px;z-index:2;background:rgba(255,255,255,.12);
border-color:rgba(255,255,255,.25);color:#EAF3F2}
/* login card adapts to the theme (white card / dark text in light; dark card / light text in dark) */
.login-card{width:100%;max-width:380px;border:1px solid var(--line);border-radius:18px;
box-shadow:0 24px 60px rgba(0,0,0,.45);background:var(--surface);color:var(--ink)}
.login-card .card-body{padding:28px 26px 30px}
.login-card .brand-name{color:var(--ink)}
.login-title{font-size:22px;margin:6px 0 0;color:var(--ink)}
.login-hint{font-size:13px;color:var(--muted)}
/* dev-only surface switch on the login (never rendered in a production build) */
.login-devhint{font-size:12px;color:var(--muted);border:1px dashed var(--line);border-radius:8px;padding:6px 10px}
.login-devhint a{color:var(--brand);cursor:pointer;text-decoration:underline}
.login-remember{margin:2px 0 14px;color:var(--muted)}
.login-card .btn-primary{background:var(--brand);border-color:var(--brand);color:var(--aboo-ink)}
/* Companies / Admin sign-in choice (#8) — segmented, mirrors .signup-kind */
.login-kind{display:flex;gap:8px;margin:0 0 16px}
.login-kind-btn{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:10px;
background:var(--surface);color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;
transition:border-color .15s,background .15s,color .15s}
.login-kind-btn:hover{border-color:var(--brand)}
.login-kind-btn.on{border-color:var(--brand);color:var(--ink);
background:color-mix(in srgb,var(--brand) 12%,transparent)}
.form-label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 5px}
/* ---------- sign-up ---------- */
.login-card{max-width:420px}
.login-alt{font-size:13px;color:var(--muted);text-align:center;margin:0}
.login-alt a{color:var(--brand);cursor:pointer;font-weight:600}
.signup-kinds{display:flex;gap:10px}
.signup-kind{flex:1;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.signup-kind:hover{border-color:var(--brand)}
.signup-kind.active{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.signup-kind-label{font-weight:700;font-size:14px}
.signup-kind-sub{font-size:13px;color:var(--muted)}
.signup-done{text-align:center}
.signup-done .brand-lockup{justify-content:center}
.signup-tick{width:56px;height:56px;margin:14px auto 4px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-size:28px;color:#fff;background:var(--brand)}
/* ---------- data import (CSV -> chart of accounts) ---------- */
/* Phases are shown/hidden with [hidden] so the file input never sits in a reactive block. */
.import-phase[hidden]{display:none}
.import-counts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.import-rows{margin:10px 0 4px}
/* Mobile-first: each row stacks, then becomes one line from tablet up. */
.import-row{flex-wrap:wrap;cursor:default;align-items:flex-start;gap:8px}
.import-row .row-main{flex:1 1 100%}
.import-row .form-control{flex:1 1 140px;min-width:0;font-size:13px;padding:6px 9px;margin:0}
.import-row.row-warn{border-left:3px solid var(--warn,#d97706)}
.import-row:hover{border-color:var(--line);box-shadow:none}
.import-errors{margin:6px 0 0;padding-left:20px;font-size:13px}
.import-offer{border-top:1px solid var(--line);margin:14px 0 4px;padding-top:14px}
@media (min-width:720px){
.import-row{flex-wrap:nowrap;align-items:center}
.import-row .row-main{flex:1 1 auto}
.import-row .import-action{flex:0 0 150px}
.import-row .import-target{flex:0 0 96px}
.import-row .import-category{flex:0 0 190px}
}
/* ---------- bottom navigation (MOBILE) ----------
Product decision 2026-07-23 (Andre): on a phone the menu belongs under the thumb — a top-left
hamburger is the hardest one-handed target on a modern handset. So below the breakpoint the
bottom bar IS the navigation and the drawer only appears when its "More" tab asks for it; from
767px up the bar disappears and the drawer is the static desktop sidebar.
The SAME max-width:767px query the drawer already uses — deliberately not a new breakpoint. */
.bottom-nav{display:none}
.form-actions-center{justify-content:center}
@media (max-width:767px){
.bottom-nav{display:flex;align-items:stretch;position:fixed;left:0;right:0;bottom:0;z-index:45;
background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(15,23,42,.07);
/* iPhone home indicator — without this the tabs sit under it and are unhittable */
padding-bottom:env(safe-area-inset-bottom,0px)}
.bn-item{flex:1 1 0;min-width:0;min-height:var(--bottom-nav-h);display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:3px;padding:8px 4px;appearance:none;border:none;
background:none;color:var(--muted);font:inherit;cursor:pointer}
.bn-item.active{color:var(--brand)}
.bn-ico{font-size:18px;line-height:1}
.bn-lbl{font-size:12px;font-weight:600;line-height:1.1;max-width:100%;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bn-confirm{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;
min-height:var(--bottom-nav-h);padding:8px 14px}
.bn-confirm-q{font-size:14px;font-weight:600;color:var(--bad)}
/* content must clear the bar — otherwise the last row of every list hides behind it */
.content{padding-bottom:calc(24px + var(--bottom-nav-space))}
.drawer{padding-bottom:var(--bottom-nav-space)}
.modal-overlay{padding-bottom:calc(24px + var(--bottom-nav-space))}
/* the tenant screens' session actions now live in the bottom bar — don't show them twice.
(Admin keeps its app-bar "Sign out": its bar's five slots are all navigation.) */
.tenant-main .app-user .btn,
.tenant-main .app-user .confirm-inline{display:none}
}
/* ---------- touch targets: >= 44px on touch devices (WCAG 2.5.5 / Apple HIG) ----------
tina4: LOCAL OVERRIDE of tina4-css. public/css/tina4.min.css ships
.btn { padding:.375rem .75rem; font-size:1rem; line-height:1.5 }
.form-control{ padding:.375rem .75rem; font-size:1rem; line-height:1.5;
min-height:calc(1.5em + .75rem + 2px) }
which renders 38px — under the 44px touch minimum. That is a Bootstrap-derived default that
predates touch guidance, and it fails on EVERY tina4 app, not just aboo, so the real fix belongs
upstream in tina4-css (CLAUDE.md rule #7). The case is written up in
plan/upstream-tina4-css-touch-targets.md. DO NOT edit or fork public/css/tina4.min.css.
TEMPORARY: delete this block once a tina4-css release ships touch-sized controls.
Scoped to (pointer: coarse) so mouse/trackpad density on desktop is untouched. */
@media (pointer: coarse){
.btn,.form-control,.theme-toggle,.pager-btn,.pager-num,.tab,.quick-card,.cat-edit,
.btn-confirm-yes,.btn-confirm-no,.btn-row-del,.tpl-var,.modal-x,.nav-item,.code-row,
.form-check,.signup-kind{min-height:44px}
.btn{padding-top:10px;padding-bottom:10px}
.btn-sm{padding-top:9px;padding-bottom:9px;font-size:14px}
/* 16px is also what stops iOS Safari zooming the page when a field takes focus */
.form-control{padding-top:10px;padding-bottom:10px;font-size:16px}
.import-row .form-control{min-height:44px;padding:10px 9px;font-size:16px}
.theme-toggle{min-width:44px;padding:8px 11px;font-size:17px}
.modal-x{min-width:44px}
.pager-num{min-width:44px}
.form-check input[type=checkbox]{width:22px;height:22px}
/* inline text links measured 16.5px tall — the smallest real targets on the public screens */
.login-forgot a,.login-alt a,.back-link{display:inline-flex;align-items:center;min-height:44px}
}
/* ---------------------------------------------------------------------------------------------
MOBILE STACKING — must live at the END of this file.
These override base rules (.row-main{flex:1} at ~line 149, .app-title{flex:1} at ~line 65) which
have the SAME specificity, so they only win by coming later. An earlier @media block silently
loses — measured: flex-wrap took effect but .row-main stayed on the buttons' line.
The bug being fixed (measured on staging at 375px): .row-card is flex/nowrap, and once the
touch-target pass grew the action buttons (92px + 197px + gaps inside a 343px card) the flex:1
.row-main was squeezed to width:0, so the company name painted straight over the buttons.
NOTE this class of bug does NOT surface as horizontal overflow — scrollWidth stayed exactly ==
the viewport, because the elements collide INSIDE the viewport instead of spilling outside it.
The no-overflow tests all passed while the screen was visibly broken.
--------------------------------------------------------------------------------------------- */
@media (max-width:767px){
/* Row cards: title on its own line, actions wrapping beneath it. */
.row-card{flex-wrap:wrap}
.row-card > .row-main{flex:1 0 100%}
.row-card > .btn{flex:1 1 auto}
/* App bar: brand + title + user could not share 375px and .app-user's right edge landed past the
viewport edge. The bottom nav already says which screen you are on, so the middle title goes. */
.app-bar .app-title{display:none}
.app-bar .app-user{min-width:0;flex:0 1 auto}
/* The ACTION must never be the thing that shrinks — the NAME is what may ellipsise.
Kept as a DEFENSIVE rule, and the comment says so honestly rather than claiming a repro it
does not have. A report described the app-bar "Sign out" as collapsed to 0x0 at 375px and
blamed the `min-width:0` above for letting the flex algorithm crush the last child. Measured
against this stylesheet in a real browser (Chromium, 375px AND 320px, long and short user
names), with these two rules present and again with them reverted, the button measured
78x31 every single time. The crush does not reproduce here.
What DOES measure 0x0 at 375px is the TENANT bar's "Sign out", and the cause is
`display:none` from the deliberate `.tenant-main .app-user .btn` rule ~50 lines above — the
tenant's session actions moved to the bottom nav, which really does carry a 188x56 "Sign out"
tab. Measured tenant bar at 375px: brand 16..91, .app-title display:none, .app-user at
x=103, "Sign out" display:none 0x0 — which matches the report exactly. So that is intent,
not breakage. (Admin keeps its app-bar button, and needs it: the admin drawer and bottom nav
have no sign-out of their own. Measured visible at both 375px and 320px.)
These two lines stay because they make the intent explicit and cost nothing: whatever the
available width, pin the button and let the name be the flexible item. */
.app-bar .app-user > .btn{flex:0 0 auto;white-space:nowrap}
.app-bar .user-name{flex:0 1 auto;min-width:0;max-width:92px}
/* The DEMO badge must survive the same squeeze — it is a safety label, not decoration. */
.app-bar .demo-badge{margin-left:6px}
/* Page heading and its primary action, stacked so neither gets crushed. */
.page-head.with-action{flex-wrap:wrap}
.page-head.with-action > :first-child{flex:1 0 100%}
}
/* ---------------------------------------------------------------------------------------------
APP BAR — the action must never shrink or wrap, at ANY width. GLOBAL, deliberately NOT inside a
media query.
Reported with a screenshot: "Sign out" wrapped onto two lines and clipped at the right edge.
The earlier fix for this lived inside @media (max-width:767px), so it did nothing in the band
just above the breakpoint — measured at 820px: .app-title{flex:1 1 0%} claimed 444px and the
user block was squeezed until the button wrapped. Chasing that with another breakpoint would
just move the failure, so the rule is stated once, unconditionally:
the TITLE is the flexible item and truncates; the ACTION is fixed and stays whole.
.app-title needs min-width:0 because a flex item's default min-width:auto refuses to shrink
below its content — without it the title pushes the button out instead of ellipsising.
--------------------------------------------------------------------------------------------- */
.app-bar .app-user{flex:0 0 auto}
.app-bar .app-user > .btn{flex:0 0 auto;white-space:nowrap}
.app-bar .app-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------------------------------------------------------------------------------------------
CHART OF ACCOUNTS — read-only chart screen (src/tenant/chart.js).
MUST STAY AT THE END OF THIS FILE. `.chart-row > .row-main` and the MOBILE STACKING block's
`.row-card > .row-main{flex:1 0 100%}` have IDENTICAL specificity (two classes + a child
combinator), so these rules only win by coming later — exactly the trap documented in the
MOBILE STACKING header above. Appending anything after this block is fine; MOVING this block
above MOBILE STACKING silently reverts the phone layout.
The generic mobile rule would give each account row three stacked lines (code, name, nothing),
wasting a third of a phone screen on an 86-row list. The chart wants the CODE and the NAME on
the SAME line — the code is the mapping key, so it is the thing being scanned — with the
classification wrapping underneath it. Hence the override.
--------------------------------------------------------------------------------------------- */
.chart-count{font-size:13px;color:var(--muted);font-weight:600;margin:0 2px 12px}
.chart-groups{display:flex;flex-direction:column;gap:18px}
.chart-group-head{display:flex;align-items:baseline;gap:8px;padding:0 2px 7px;flex-wrap:wrap}
.chart-group-head h2{font-size:14px;margin:0;text-transform:uppercase;letter-spacing:.05em}
.chart-group-root{font-size:12.5px;color:var(--muted)}
.chart-group-n{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
/* The CODE is the mapping key — mono, boxed and the first thing the eye lands on. */
.chart-code{flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;
font-size:13px;background:var(--brand-ink);color:#fff;padding:4px 9px;border-radius:8px;
min-width:54px;text-align:center;font-variant-numeric:tabular-nums}
.chart-vat{flex:0 0 auto;margin-left:auto;align-self:center;font-size:12px;font-weight:600;color:var(--brand);background:var(--surface-2,rgba(0,0,0,.04));border:1px solid var(--line);border-radius:6px;padding:1px 7px;white-space:nowrap}
.chart-row{cursor:default}
.chart-row:hover{border-color:var(--line);box-shadow:none}
/* A system-role account (retained earnings, year-end contra, FX, rounding, suspense) is one an
import must never remap — flagged so it reads as special, not as an ordinary account. */
.chart-row.chart-system{border-left:3px solid var(--brand)}
.chart-row.inactive .chart-code{background:var(--muted)}
@media (max-width:767px){
/* Code and name share line 1; the classification wraps beneath. See the header above for why
this must not be hoisted anywhere earlier in the file. */
.chart-row{flex-wrap:wrap;align-items:flex-start;gap:10px}
.chart-row > .chart-code{flex:0 0 auto}
/* flex-basis MUST be 0, not auto. Measured in Chromium at 375px with `flex:1 1 auto`: flex line
breaking uses each item's HYPOTHETICAL main size (here the name's max-content width) BEFORE
any shrinking, so a long account name — "Machinery and Equipment - Cost" — pushed .row-main
onto its own line and the code sat alone above it, making that one row twice as tall as its
neighbours. Basis 0 means it always fits beside the code and then grows into the space. */
.chart-row > .row-main{flex:1 1 0;min-width:0}
.chart-group-n{margin-left:0}
}
/* ── tenant bank screens (feature/bank-accounts) ─────────────────────── */
.btn-back{border:0;background:none;color:var(--ink);font-size:22px;line-height:1;padding:4px 10px;cursor:pointer;border-radius:8px}
.btn-back:hover{background:var(--surface-2,rgba(0,0,0,.06))}
.tshell-title{display:flex;flex-direction:column;min-width:0}
.tshell-co{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tshell-screen{font-size:12px;color:var(--muted,#777)}
.row-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* company picker: pop a company out into its own window (icon + label on one line) */
.co-popout{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.row-open{color:var(--muted,#999);font-size:20px;padding-left:2px}
.co-card{cursor:pointer}
.co-backbar{margin:0 0 12px}
.icon-btn{border:0;background:none;cursor:pointer;font-size:15px;padding:4px 6px;border-radius:8px;line-height:1}
.icon-btn:hover{background:var(--surface-2,rgba(0,0,0,.06))}
.chip-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;font-weight:600}
.chip-btn:hover{border-color:var(--brand)}
/* Reminder day-tier editor (Settings → Reminders): inline caption + removable day pills + a number
"Add" box (owner: needs an interface, not hand-entered text). No on/off toggle — adding a day means
you want it as a reminder (owner 2026-09-15); the ✕ removes a tier. */
.remday-field{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 2px}
.remday-cap{font-size:13px;font-weight:600;color:var(--muted)}
.remday-chip{display:inline-flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--brand);color:var(--brand);border-radius:999px;padding:4px 5px 4px 12px;font-weight:700;font-size:13px;line-height:1}
.remday-x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:0;border-radius:999px;background:transparent;color:var(--brand);cursor:pointer;font-size:13px;line-height:1;padding:0}
.remday-x:hover{background:var(--brand);color:#fff}
/* margin-left:auto right-aligns the add group so BOTH day-tier rows' "+ Add" line up (owner 2026-09-15) */
.remday-add{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.remday-in{width:110px;box-sizing:border-box;text-align:left}
.remday-add-btn{white-space:nowrap}
/* Documents: Dashboard button sits on its own row above the Debtors/Creditors strip (owner 2026-09-15) */
.doc-dash-row{display:flex;justify-content:flex-end;margin-bottom:8px}
.amt-in{color:var(--ok,#15803d)}
.amt-out{color:var(--bad)}
.form-control-sm{padding:4px 8px;font-size:13px}
.alert-ok{border:1px solid var(--ok,#15803d);color:var(--ok,#15803d);border-radius:10px;padding:6px 12px;background:var(--surface)}
.alert-warn{border:1px solid #b45309;color:#b45309;border-radius:10px;padding:6px 12px;background:var(--surface)}
.check-line{display:flex;gap:8px;align-items:center;font-size:14px;margin:6px 0}
/* rules form */
.rule-form{display:grid;grid-template-columns:1fr;gap:8px}
.rule-form-err{grid-column:1 / -1}
.rule-edit-form{display:flex;flex-direction:column;gap:8px}
.rule-edit-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}
@media (min-width:760px){.rule-form{grid-template-columns:2fr 1fr 1fr 2fr auto}}
/* ── the cashbook — live-parity single page (feature/bank-accounts) ────── */
/* live v2 works on a 1200px surface — the summary strip needs it to hold one line */
.page.cb-page{max-width:1200px}
.page.page-wide{max-width:1200px}
.cb-page .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.cb-page .text-right{text-align:right}
.cb-page .fw-700{font-weight:700}
.t-in{color:var(--ok,#15803d)}
.t-out{color:var(--bad)}
.t-label{color:var(--muted,#777)}
/* Signed financial figures: positive is green, negative is red, zero stays neutral. `totalTone()`
supplies these classes to balances, totals, and line amounts across the tenant application. */
.tot-pos{color:var(--ok,#15803d) !important}
.tot-neg{color:var(--bad,#b91c1c) !important}
.t-val{font-weight:600}
/* statement-import notice (no AI key / extraction error) — persistent, above the drop cards */
.cb-keynotice{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);
border:1px solid var(--warn);border-left:4px solid var(--warn);border-radius:var(--radius,8px);
padding:10px 12px;margin:6px 0 4px;font-size:13px;color:var(--ink)}
.cb-keynotice-key{border-color:var(--info);border-left-color:var(--info)}
.cb-keynotice-icon{font-size:16px;line-height:1}
.cb-keynotice-msg{flex:1 1 220px;min-width:0}
.cb-keynotice-cta{flex:0 0 auto;white-space:nowrap}
.cb-keynotice-x{flex:0 0 auto;background:none;border:0;color:var(--muted);font-size:15px;line-height:1;
cursor:pointer;padding:2px 4px;border-radius:6px}
.cb-keynotice-x:hover{color:var(--ink);background:rgba(128,128,128,.14)}
/* inline "Set up API key" link inside a keynotice (document scan dropzone) */
.cb-keynotice-link{flex:0 0 auto;white-space:nowrap;font-weight:700;color:var(--brand,#0b7);text-decoration:underline;cursor:pointer}
.scan-keynotice{margin:0 0 10px}
/* AI-assist bar: proactive no-key note + set-up link (shown when no AI key is configured) */
.ai-bar-nokey{font-size:12.5px;color:var(--warn,#b45309);flex:1 1 100%}
.ai-bar-setup{font-weight:700;color:var(--brand,#0b7);text-decoration:underline;cursor:pointer;margin-left:4px}
/* account cards strip */
.cb-cards{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:8px 2px 6px}
.cb-card{flex:0 0 auto;min-width:160px;max-width:210px;background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;position:relative;transition:border-color .15s,box-shadow .15s;display:flex;flex-direction:column;gap:2px}
.cb-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.cb-card:hover{border-color:var(--muted,#999)}
.cb-card.active{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.cb-card-drag{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand);background:var(--surface-2,rgba(0,180,160,.06))}
.cb-card-add{border-style:dashed;color:var(--muted,#777)}
.cb-card-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.cb-card-acct{font-size:12px;color:var(--muted,#777);margin-top:2px}
.cb-card-bal{font-size:14px;font-weight:700;margin-top:4px;text-align:right;white-space:nowrap}
.cb-card-badge{position:absolute;top:-8px;right:-8px;background:var(--brand);color:#fff;font-size:12px;font-weight:700;padding:2px 7px;border-radius:10px;min-width:20px;text-align:center;z-index:2}
.cb-pwd-icon{position:absolute;top:6px;right:6px;border:0;background:none;cursor:pointer;font-size:12px;opacity:.5;padding:2px}
.cb-pwd-icon:hover{opacity:1}
.cb-pwd-row{display:flex;gap:4px;margin-top:6px}
.cb-pwd-input{font-size:12px;padding:3px 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);width:100%;min-width:0}
.cb-pwd-save{background:var(--brand);color:#fff;border:0;border-radius:6px;padding:2px 8px;cursor:pointer;flex:0 0 auto}
.cb-addform{display:grid;grid-template-columns:1fr;gap:8px;padding:0;margin:2px 2px 10px}
.cb-in-gl{background:var(--hover,rgba(25,196,196,.08));cursor:default}
@media (min-width:760px){.cb-addform{grid-template-columns:3fr 1fr 3fr 2fr 1.5fr auto}}
/* Bank-account add row (owner 2026-09-15 "currency and add button must be same size as others"): the
text inputs, the native