/* =====================================================================
TechnoCount — application design system
---------------------------------------------------------------------
One token layer, one radius language, one control height. Every class the
templates use is kept (nothing renamed); the values behind them changed.
Density is set for an accounting desk: 13px tables with tabular figures,
34px controls, 8px panel radius, no decorative shadows on interactive parts.
===================================================================== */
:root {
/* brand */
--brand: #007ba6; /* deep cyan from #009ACD: AA with white */
--brand-grad: linear-gradient(210deg, #00e5ee 0%, #009acd 100%); /* Vibrant Cyan Pulse */
--brand-grad-hover: linear-gradient(210deg, #00d2db 0%, #0088b8 100%);
--brand-on: #032f40; /* text on the gradient */
--brand-dark: #006f96;
--brand-soft: #e6fbfc;
--brand-ink: #035270;
--brand-light: #7fe9f0;
--accent: var(--brand); /* legacy alias used by inline styles */
--accent-dark: var(--brand-dark);
--accent-soft: var(--brand-soft);
--accent-ink: var(--brand-ink);
/* neutrals */
--bg: #f4f5f7; /* canvas */
--bg-2: #f9fafb; /* table heads, footers, hover */
--bg-3: #eef0f4; /* segmented control track */
--card: #ffffff;
--ink: #0f1522; /* headings, strong figures */
--text: #1d2433; /* body */
--text-2: #344054; /* labels, notes */
--muted: #667085;
--muted-2: #98a2b3;
--ink-soft: var(--text-2); /* legacy alias */
--navy: var(--ink); /* legacy alias */
--border: #e4e7ec;
--border-2: #eceef2;
--border-strong: #d0d5dd;
--line: var(--border); /* legacy alias */
--line-2: var(--border-2);
/* semantic */
--green: #15803d; --green-bg: #ecfdf3; --green-line: #bbe5c8;
--orange: #b45309; --orange-bg: #fff7e6; --orange-line: #f5d9a8;
--red: #b42318; --red-bg: #fef3f2; --red-line: #f4c7c3;
--blue: #1d4ed8; --blue-bg: #eff4ff; --blue-line: #c7d7fe;
/* shape + depth */
--r-sm: 6px;
--r: 8px;
--r-lg: 12px;
--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
--shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
--shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, 0.18), 0 2px 6px rgba(16, 24, 40, 0.06);
--ring: 0 0 0 3px rgba(0, 154, 205, 0.25);
/* metrics */
--ctl-h: 34px;
--ctl-h-sm: 28px;
--nav-h: 52px;
--tab-h: 38px;
}
/* ===== reset ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
background: var(--bg); color: var(--text);
font-size: 14px; line-height: 1.45; letter-spacing: -0.006em;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
font-feature-settings: "cv11", "ss01", "tnum" 0;
}
#app { min-height: 100vh; }
a { color: var(--brand-dark); }
a:hover { color: var(--brand-ink); }
b, strong { font-weight: 600; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 12px;
background: var(--bg-3); color: var(--text-2); padding: 1px 5px; border-radius: 4px; }
::selection { background: var(--brand-soft); color: var(--brand-ink); }
* { scrollbar-width: thin; scrollbar-color: #cbd0d8 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd0d8; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
[hidden] { display: none !important; }
/* keyboard focus — one ring everywhere, never the browser default outline */
:focus { outline: none; }
.btn:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible,
.navtop-link:focus-visible, .navtop-btn:focus-visible, .mditab:focus-visible, .ws-box:focus-visible {
box-shadow: var(--ring); outline: none;
}
/* ===== top navigation ===== */
.topnav {
position: sticky; top: 0; z-index: 40;
background: var(--card); color: var(--muted);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; height: var(--nav-h); padding: 0 16px 0 14px; gap: 6px;
}
.topnav .brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700;
font-size: 15.5px; letter-spacing: -0.02em; text-decoration: none; padding-right: 8px; flex-shrink: 0; }
.topnav .brand svg { width: 22px; height: 22px; }
/* The TC mark and wordmark (public/brand): navy on the light bar, white on Midnight. */
.topnav .brand img { display: block; width: auto; flex-shrink: 0; }
.topnav .brand .brand-mark { height: 22px; }
.topnav .brand .brand-wm { height: 16px; }
.topnav .brand .on-dark { display: none; }
:root[data-theme="midnight"] .topnav .brand .on-light { display: none; }
:root[data-theme="midnight"] .topnav .brand .on-dark { display: block; }
.topnav .brand-word { white-space: nowrap; }
.topnav .brand-word span { color: var(--brand); }
.topnav .demo-badge {
background: var(--orange-bg); color: var(--orange); border: 1px solid var(--orange-line);
font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 4px;
margin-right: 10px; flex-shrink: 0; line-height: 1.4; cursor: help;
}
.mtop-burger { display: none; background: none; border: none; color: var(--ink); font-size: 20px; line-height: 1;
cursor: pointer; padding: 6px 10px 6px 2px; border-radius: var(--r-sm); }
#topnav-menu { display: flex; align-items: center; flex: 1; min-width: 0; overflow: visible; gap: 2px; }
.navtop-item { position: relative; display: flex; align-items: center; }
.navtop-link, .navtop-btn {
display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; font-size: 13px; font-weight: 500;
color: var(--text-2); text-decoration: none; background: none; border: none; cursor: pointer;
border-radius: var(--r-sm); white-space: nowrap; font-family: inherit; letter-spacing: -0.006em;
transition: background 0.12s ease, color 0.12s ease;
}
.navtop-link:hover, .navtop-btn:hover, .navtop-item:hover > .navtop-btn { background: var(--bg-3); color: var(--ink); }
.navtop-item.active-top > .navtop-link,
.navtop-item.active-top > .navtop-btn { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.navtop-btn .caret { font-size: 8px; opacity: 0.55; margin-top: 1px; }
.navtop-menu {
display: none; position: absolute; top: 40px; left: 0; min-width: 236px; background: var(--card);
border: 1px solid var(--border); border-radius: 10px;
box-shadow: var(--shadow-lg); padding: 6px; z-index: 50;
max-height: calc(100vh - var(--nav-h) - 16px); overflow-y: auto;
}
/* "More" (priority+, fitNav in app.js): it sits at the right of the menu, so it opens leftwards,
and the groups folded into it keep their names as small headings */
.navtop-more .navtop-menu { left: auto; right: 0; }
.navtop-menu-h { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
padding: 10px 10px 4px; font-weight: 600; }
.navtop-menu-h:first-child { padding-top: 4px; }
/* invisible hover bridge so the pointer can cross the gap below the button */
.navtop-item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.navtop-item:hover > .navtop-menu, .navtop-item.open > .navtop-menu { display: block; }
.navtop-menu a {
display: flex; align-items: center; gap: 10px; padding: 7px 10px; color: var(--text);
text-decoration: none; font-size: 13px; border-radius: var(--r-sm); white-space: nowrap; line-height: 1.3;
}
.navtop-menu a .ico { width: 18px; text-align: center; opacity: 0.8; font-size: 13px; flex-shrink: 0; }
.navtop-menu a:hover { background: var(--bg-2); color: var(--ink); }
.navtop-menu a.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.topnav-right { display: flex; align-items: center; gap: 4px; margin-left: auto; padding-left: 8px; flex-shrink: 0; z-index: 1; }
.navtop-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
color: var(--muted); text-decoration: none; font-size: 16px; border-radius: var(--r-sm); transition: background 0.12s, color 0.12s; }
.navtop-icon svg { width: 18px; height: 18px; }
.navtop-icon:hover { background: var(--bg-3); color: var(--ink); }
/* ===== mobile drawer (built from the same NAV data) ===== */
#drawer {
position: fixed; top: 0; left: 0; height: 100vh; width: 272px; max-width: 86vw; z-index: 60;
background: var(--card); color: var(--text); overflow-y: auto; transform: translateX(-100%);
transition: transform 0.22s ease; box-shadow: var(--shadow-lg);
border-right: 1px solid var(--border);
}
.drawer-head { padding: 16px 18px 8px; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.drawer-head span { color: var(--brand); }
.navgroup { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 16px 18px 6px; font-weight: 600; }
#drawer-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 1px 8px; color: var(--text);
text-decoration: none; font-size: 13.5px; border-radius: var(--r-sm); font-weight: 500; }
#drawer-menu a:hover { background: var(--bg-2); color: var(--ink); }
#drawer-menu a.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
#drawer-menu a .ico { width: 18px; text-align: center; opacity: 0.8; }
#nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 21, 34, 0.45); z-index: 55; }
/* ===== MDI tab strip =====
Sits under the top bar and sticks with it. Hidden until a second tab exists. */
#tabbar { display: none; }
#tabbar.has-tabs {
display: flex; align-items: flex-end; gap: 8px;
position: sticky; top: var(--nav-h); z-index: 30; height: var(--tab-h);
background: var(--bg); border-bottom: 1px solid var(--border); padding: 0 16px;
}
.tabstrip { display: flex; align-items: flex-end; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; height: 100%; }
.tabstrip::-webkit-scrollbar { display: none; }
.mditab { display: flex; align-items: center; gap: 6px; flex-shrink: 0; max-width: 220px; cursor: pointer;
height: 31px; padding: 0 6px 0 10px; border-radius: var(--r-sm) var(--r-sm) 0 0; font-size: 12.5px; font-weight: 500;
color: var(--muted); background: transparent; border: 1px solid transparent; border-bottom: none;
user-select: none; white-space: nowrap; margin-bottom: -1px; transition: background 0.12s, color 0.12s; }
.mditab:hover { background: rgba(16, 24, 40, 0.05); color: var(--text); }
.mditab.active { background: var(--card); color: var(--ink); font-weight: 600; border-color: var(--border);
box-shadow: 0 1px 0 0 var(--card); }
.mditab .ico { font-size: 12px; opacity: 0.7; flex-shrink: 0; }
.mditab .lbl { overflow: hidden; text-overflow: ellipsis; }
.mditab .x { flex-shrink: 0; border: none; background: none; color: inherit; cursor: pointer;
opacity: 0.45; font-size: 11px; line-height: 1; width: 18px; height: 18px; display: inline-flex; align-items: center;
justify-content: center; border-radius: 4px; }
.mditab .x:hover { opacity: 1; background: var(--red-bg); color: var(--red); }
.tabclose-all { flex-shrink: 0; margin-bottom: 5px; border: 1px solid transparent; background: transparent;
color: var(--muted); font: inherit; font-size: 12px; font-weight: 500; padding: 4px 9px; border-radius: var(--r-sm); cursor: pointer; }
.tabclose-all:hover { color: var(--ink); background: var(--bg-3); }
@media (max-width: 1024px) {
#tabbar.has-tabs { padding: 0 10px; }
.mditab { max-width: 150px; }
.tabclose-all { display: none; }
}
/* ===== page ===== */
main { padding: 24px 32px 64px; max-width: 1440px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.page-head > div:first-child { min-width: 0; }
h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1.25;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h1 .pill { position: relative; top: 1px; }
.sub { color: var(--muted); font-size: 13px; margin-top: 3px; line-height: 1.45; }
h3 { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.head-actions, .row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-head .head-actions, .page-head .row-actions { padding-top: 1px; }
.row-actions input:not([type="file"]), .head-actions > input, .head-actions > select { width: auto; min-width: 200px; }
.backlink { display: inline-block; color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 500; margin-bottom: 6px; }
.backlink:hover { color: var(--brand-ink); }
/* ===== buttons ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: var(--ctl-h); padding: 0 14px; border-radius: var(--r-sm);
background: var(--brand-grad); color: var(--brand-on); border: 1px solid transparent;
font-size: 13px; font-weight: 600; letter-spacing: -0.006em; line-height: 1;
cursor: pointer; white-space: nowrap; font-family: inherit; text-decoration: none;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { background: var(--brand-grad-hover); color: var(--brand-on); }
.btn:active { transform: translateY(0.5px); }
.btn.primary { background: var(--brand-grad); color: var(--brand-on); }
.btn.secondary { background: var(--card); color: var(--text); border-color: var(--border-strong); font-weight: 500; }
.btn.secondary:hover { background: var(--bg-2); border-color: #b9c0cc; color: var(--ink); }
.btn.navy { background: var(--ink); color: #fff; }
.btn.navy:hover { background: #000; }
.btn.danger { background: var(--card); color: var(--red); border-color: var(--red-line); font-weight: 500; }
.btn.danger:hover { background: var(--red-bg); border-color: #e9a8a2; }
.btn.small { height: var(--ctl-h-sm); padding: 0 10px; font-size: 12px; }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.left { margin-right: auto; }
.btn.block { width: 100%; }
.rm { background: none; border: none; color: var(--muted-2); cursor: pointer; font-size: 13px; width: 26px; height: 26px;
border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; }
.rm:hover { color: var(--red); background: var(--red-bg); }
body.busy { cursor: progress; }
body.busy .btn { pointer-events: none; opacity: 0.6; }
/* ===== stat cards ===== */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow-sm); min-width: 0; }
.card .label { color: var(--muted); font-size: 12px; margin-bottom: 6px; font-weight: 500; }
.card .value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.card .hint { font-size: 12px; color: var(--muted-2); margin-top: 5px; }
/* ===== panels ===== */
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 16px; overflow-x: auto; box-shadow: var(--shadow-sm); }
.panel h2, .panel-head {
font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); padding: 11px 16px; min-height: 44px;
border-bottom: 1px solid var(--border-2); display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.panel h2 > span:first-child, .panel-head > b { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel h2 a { font-size: 12.5px; font-weight: 500; color: var(--brand-dark); text-decoration: none; }
.panel h2 a:hover { text-decoration: underline; }
.panel h2 .sub, .panel-head .sub { margin: 0; font-weight: 400; font-size: 12.5px; text-align: right; }
.panel h2 .btn { font-size: 12px; height: var(--ctl-h-sm); padding: 0 10px; }
.panel .body { padding: 16px; }
.panel .body > .panel { box-shadow: none; }
.panel > .empty, .panel .body > .empty { margin: 0; }
.panel .sub + table, .panel .note + table { border-top: 1px solid var(--border-2); }
/* ===== tables ===== */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
padding: 9px 14px; background: var(--bg-2); border-bottom: 1px solid var(--border); font-weight: 600; white-space: nowrap; }
td { padding: 10px 14px; border-bottom: 1px solid var(--border-2); font-size: 13px; vertical-align: middle; color: var(--text); }
tbody tr:last-child td { border-bottom: none; }
tfoot td, tfoot th { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: none; font-weight: 600;
color: var(--ink); font-size: 13px; text-transform: none; letter-spacing: 0; padding: 10px 14px; }
tbody th { background: transparent; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink); padding: 10px 14px; }
tr.click { cursor: pointer; }
tr.click:hover td { background: #f5f7fb; }
tr.subtotal td { background: var(--bg-2); font-weight: 500; }
tr.subtotal td b { font-weight: 600; }
tr.grand td { background: var(--brand-soft); font-weight: 600; color: var(--brand-ink); }
tr.grp td, tr.grp th { background: var(--bg-2); font-weight: 600; color: var(--ink); font-size: 12.5px; }
tr.inactive td, tr.inactive { opacity: 0.55; }
tr.sub td { color: var(--text-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td .btn.small { vertical-align: middle; }
td .sub { font-size: 12px; margin-top: 1px; }
.tbl { width: 100%; }
.tbl-scroll { overflow-x: auto; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.empty b { color: var(--text); font-weight: 600; }
.empty code { display: inline-block; margin-top: 6px; }
/* an empty state's one way forward sits clear of the sentence above it */
.empty > .btn:not(.small) { margin-top: 14px; }
td.empty { padding: 32px 20px; }
.pos { color: var(--green); } .neg { color: var(--red); } .warn { color: var(--orange); }
/* ===== pills / status ===== */
.pill { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px;
font-size: 11px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; line-height: 1; vertical-align: middle;
background: var(--bg-3); color: var(--text-2); }
.pill.gray { background: var(--bg-3); color: #475467; }
/* The package a menu entry needs (ADR-013): small, beside the label, never instead of it. */
.nav-pkg { font-size: 10px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; }
.pill.orange, .pill.amber { background: var(--orange-bg); color: var(--orange); }
.pill.red { background: var(--red-bg); color: var(--red); }
.pill.green { background: var(--green-bg); color: var(--green); }
.pill.blue { background: var(--blue-bg); color: var(--blue); }
.pill.gold, .pill.brand { background: var(--brand-soft); color: var(--brand-ink); }
td .pill, .sub .pill, .note .pill { position: relative; top: -1px; }
/* ===== segmented sub-navigation ===== */
.tabs { display: inline-flex; gap: 2px; margin-bottom: 16px; background: var(--bg-3);
border-radius: var(--r); padding: 3px; flex-wrap: wrap; }
.tabs button { background: none; border: none; height: 30px; padding: 0 14px; font-size: 13px; cursor: pointer;
color: var(--muted); border-radius: var(--r-sm); font-weight: 500; font-family: inherit; letter-spacing: -0.006em;
transition: background 0.12s, color 0.12s; }
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--ink); background: var(--card); box-shadow: var(--shadow-sm); font-weight: 600; }
/* ===== toolbars / action rows ===== */
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-2); }
.spacer { flex: 1; }
.nowrap { white-space: nowrap; }
/* ===== forms ===== */
.frow { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.frow.end { align-items: flex-end; }
.fgroup { flex: 1; min-width: 140px; }
.fgroup.x2 { flex: 2; }
.fgroup.x3 { flex: 3; }
.fgroup.action { flex: 0 0 auto; align-self: flex-end; min-width: 0; }
.fgroup > div > .btn, .fgroup.action > .btn { vertical-align: bottom; }
label { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom: 5px; line-height: 1.35; }
label .sub { display: inline; font-weight: 400; color: var(--muted); font-size: 12px; margin: 0; }
.help { font-size: 12px; color: var(--muted); margin-top: 5px; }
input, select, textarea {
width: 100%; height: var(--ctl-h); padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
font-size: 13.5px; font-family: inherit; background: var(--card); color: var(--text); line-height: 1.3;
transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
textarea { height: auto; min-height: 80px; padding: 8px 10px; line-height: 1.45; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #b9c0cc; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
/* background-color, not the shorthand: the shorthand reset the select chevron to repeat, so a
locked document's dropdowns filled with a zig-zag of arrows (UX review, 2026-10-11) */
input:disabled, select:disabled, textarea:disabled { background-color: var(--bg-2); color: var(--muted); border-color: var(--border); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input[type="number"] { font-variant-numeric: tabular-nums; }
input[type="date"], input[type="month"] { padding-right: 8px; }
select {
appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}
select:disabled { background-image: url("data:image/svg+xml;utf8,"); }
input[type="checkbox"], input[type="radio"] { width: 15px; height: 15px; accent-color: var(--brand); margin: 0; cursor: pointer;
padding: 0; border: none; box-shadow: none; vertical-align: middle; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { box-shadow: var(--ring); border-radius: 3px; }
input[type="file"] { height: auto; padding: 6px; }
/* a label that WRAPS its control is a choice row, not a field caption */
.check, label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 400; color: var(--text);
margin: 0; cursor: pointer; line-height: 1.3;
}
.check input, label > input[type="checkbox"], label > input[type="radio"] { width: 15px; height: 15px; flex-shrink: 0; }
.check.sub { color: var(--muted); font-size: 12.5px; }
.fgroup > div > label + label { margin-left: 12px; }
/* toolbar captions: "From [date]" — the control sits beside its word */
label.sub, .toolbar label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); }
label.sub input, label.sub select, .toolbar input, .toolbar select { width: auto; height: var(--ctl-h-sm); font-size: 12.5px; padding: 4px 8px; }
label.sub select, .toolbar select { padding-right: 26px; background-position: right 8px center; }
details > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2); list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; user-select: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.12s; }
details[open] > summary::before { transform: rotate(90deg); }
details > summary:hover { color: var(--ink); }
/* compact controls inside line tables */
table input, table select { height: 30px; padding: 4px 8px; font-size: 12.5px; border-radius: 5px; }
table select { padding-right: 24px; background-position: right 7px center; }
table input.num, td.num input { text-align: right; }
.lines-table th, .lines-table td { padding: 6px 5px; }
.lines-table th:first-child, .lines-table td:first-child { padding-left: 0; }
.lines-table th:last-child, .lines-table td:last-child { padding-right: 0; }
.lines-table tbody tr:last-child td { border-bottom: 1px solid var(--border-2); }
#v-lines th, #v-lines td { padding: 6px 5px; }
#v-lines th:first-child, #v-lines td:first-child { padding-left: 0; }
.totals { margin-left: auto; max-width: 340px; padding: 12px 0 0; }
.totals .trow { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.totals .grand { border-top: 2px solid var(--ink); font-weight: 700; font-size: 15px; padding-top: 9px; margin-top: 4px; letter-spacing: -0.01em; color: var(--ink); }
/* ===== document chain breadcrumb ===== */
.chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; font-size: 12px; }
.chain .node { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 5px 10px; color: var(--muted); line-height: 1.3; }
.chain .node small { font-size: 11px; opacity: 0.85; }
.chain .node.cur { border-color: var(--brand-light); color: var(--brand-ink); font-weight: 600; background: var(--brand-soft); }
.chain .node.done { color: var(--green); border-color: var(--green-line); background: var(--green-bg); cursor: pointer; }
.chain .node.done:hover { border-color: var(--green); }
.chain .arrow { color: var(--muted-2); font-size: 11px; }
/* ===== modal ===== */
#overlay { position: fixed; inset: 0; background: rgba(15, 21, 34, 0.5); display: none; align-items: flex-start; justify-content: center;
padding: 48px 16px; overflow-y: auto; z-index: 50; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
#overlay.open { display: flex; }
.modal { background: var(--card); border-radius: var(--r-lg); width: 100%; max-width: 720px; box-shadow: var(--shadow-lg);
border: 1px solid var(--border); animation: modal-in 0.14s ease-out; }
.modal.wide { max-width: 960px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.modal header { padding: 14px 20px; border-bottom: 1px solid var(--border-2); font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; line-height: 1.3; }
.modal header .pill { position: relative; top: -1px; margin-left: 2px; }
.modal header button { background: none; border: none; font-size: 15px; cursor: pointer; color: var(--muted); flex-shrink: 0;
width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); margin-right: -6px; }
.modal header button:hover { background: var(--bg-3); color: var(--ink); }
.modal .mbody { padding: 20px; }
.modal .mbody > :last-child, .panel .body > :last-child { margin-bottom: 0; }
.modal footer { padding: 12px 20px; border-top: 1px solid var(--border-2); display: flex; gap: 8px; justify-content: flex-end;
align-items: center; background: var(--bg-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.modal footer .left { margin-right: auto; }
.modal .panel { box-shadow: none; }
.modal .mbody > .panel:last-child { margin-bottom: 0; }
/* ===== toast ===== */
#toast { position: fixed; bottom: 22px; right: 22px; background: var(--ink); color: #fff; padding: 11px 16px; border-radius: var(--r);
font-size: 13px; font-weight: 500; line-height: 1.4; box-shadow: var(--shadow-lg); display: none; z-index: 99; max-width: min(460px, calc(100vw - 44px));
border-left: 3px solid var(--brand-light); animation: toast-in 0.16s ease-out; }
#toast.error { border-left-color: #f97066; }
#toast.success { border-left-color: #32d583; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ===== boot / loading / error screens ===== */
.boot { padding: 96px 20px; text-align: center; color: var(--muted); font-size: 14px; max-width: 420px; margin: 0 auto; }
.boot .spinner { margin: 0 auto 16px; }
.boot b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.boot .actions { justify-content: center; border-top: none; padding-top: 0; margin-top: 18px; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--brand);
animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty.loading::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; margin: 0 auto 10px;
border: 2.5px solid var(--border); border-top-color: var(--brand); animation: spin 0.8s linear infinite; }
/* ===== notes / callouts ===== */
.note { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 11px 14px; font-size: 13px;
color: var(--text-2); margin-bottom: 14px; line-height: 1.5; }
.note b { color: var(--ink); }
.note ul { margin: 6px 0 4px 18px; }
.note .btn { margin-top: 8px; }
.note.info { background: var(--blue-bg); border-color: var(--blue-line); border-left: 3px solid var(--blue); }
.note.warn { background: var(--orange-bg); border-color: var(--orange-line); border-left: 3px solid var(--orange); }
.note.error { background: var(--red-bg); border-color: var(--red-line); border-left: 3px solid var(--red); }
.note.success { background: var(--green-bg); border-color: var(--green-line); border-left: 3px solid var(--green); }
.note[style*="border-color"] { border-left-width: 3px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
/* ===== quick scan / AI ===== */
.dropzone { border: 1.5px dashed var(--brand-light); border-radius: var(--r); padding: 32px; text-align: center; color: var(--muted); background: #fbfbff; cursor: pointer; }
.dropzone:hover { background: var(--brand-soft); }
.conf { font-size: 10.5px; background: var(--blue-bg); color: var(--blue); border-radius: 999px; padding: 1px 7px; margin-left: 6px; font-weight: 600; }
.ai-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-soft); border: 1px solid #d9dcfb; color: var(--brand-ink);
border-radius: 999px; padding: 3px 11px; font-size: 12px; cursor: pointer; margin-top: 5px; }
.ai-chip:hover { background: #e3e6fb; }
/* AI features are labelled with the word AI rather than an icon — sized for the 18px nav icon slot. */
.ai-ico { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; }
.cap-grid { display: grid; grid-template-columns: minmax(280px, 5fr) minmax(320px, 6fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .cap-grid { grid-template-columns: 1fr; } }
/* One column on a phone: the scan is held to most of a screen, so what to do with it (the
review form, or "Open the bill") is a short scroll away rather than a page further down */
@media (max-width: 640px) { .cap-grid .panel .body img { max-height: 62vh; width: auto; max-width: 100%; display: block; margin: 0 auto; } }
.cap-grid .panel .body > .btn { margin-top: 12px; }
.cap-grid .panel .body input, .cap-grid .panel .body select { width: 100%; }
#cap-lines input { width: 100%; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.form-grid > div { min-width: 0; }
/* ===== reports ===== */
.report-line { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13.5px; gap: 14px; border-bottom: 1px solid var(--border-2); font-variant-numeric: tabular-nums; }
.report-line:last-child { border-bottom: none; }
.report-line.indent { padding-left: 20px; color: var(--text-2); }
.report-line.total { border-top: 1px solid var(--border); border-bottom: none; font-weight: 600; margin-top: 4px; padding-top: 9px; color: var(--ink); }
.report-line.grand { border-top: 2px solid var(--ink); border-bottom: none; font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; color: var(--ink); margin-top: 6px; padding-top: 10px; }
.report-line .cols { display: flex; gap: 0; }
.report-line .cols span { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.qr { image-rendering: pixelated; border: 1px solid var(--border); border-radius: 6px; }
.legend { font-size: 12px; color: var(--muted); display: flex; gap: 16px; margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
/* interactive charts: tooltip, hit targets, donut */
#chart-tip { position: fixed; display: none; background: var(--ink); color: #fff; padding: 8px 12px;
border-radius: var(--r); font-size: 12px; line-height: 1.5; pointer-events: none; z-index: 120;
box-shadow: var(--shadow-lg); max-width: 220px; }
.chart-hit { cursor: pointer; transition: opacity 0.12s; }
.chart-hit:hover { opacity: 0.75; }
.donut-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.donut-box { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
justify-content: center; pointer-events: none; text-align: center; }
.donut-center b { font-size: 15px; letter-spacing: -0.02em; }
.donut-center span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.donut-legend { flex: 1; min-width: 180px; }
.dlg-row { display: flex; align-items: center; gap: 8px; padding: 3.5px 6px; font-size: 12.5px; border-radius: var(--r-sm); }
.dlg-row:hover { background: var(--bg-2); }
.dlg-row i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dlg-label { flex: 1; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-val { font-variant-numeric: tabular-nums; color: var(--text); }
/* dashboard: aging bars */
.aging-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12.5px; }
.aging-label { width: 124px; color: var(--muted); flex-shrink: 0; }
.aging-track { flex: 1; height: 8px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.aging-bar { display: block; height: 100%; border-radius: 999px; }
.aging-amt { width: 104px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; color: var(--text); }
/* ===== company switcher (top bar) ===== */
.ws-box { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
padding: 3px 10px 3px 3px; cursor: pointer; max-width: 210px; margin-left: 6px; transition: background 0.12s, border-color 0.12s; }
/* The company name and plan need ~170px the menu needs more: shown from 1440px up only */
@media (max-width: 1439px) { .topnav .ws-box { max-width: none; } .topnav .ws-box .ws-meta { display: none; } }
.ws-box:hover { border-color: var(--border-strong); background: var(--bg-2); }
.ws-avatar { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--brand-grad); color: var(--brand-on); display: flex; align-items: center;
justify-content: center; font-weight: 700; font-size: 11.5px; flex-shrink: 0; letter-spacing: 0.02em; }
.ws-meta { min-width: 0; }
.ws-name { color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; line-height: 1.2; }
.ws-sub { color: var(--muted); font-size: 10.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-pick { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 8px; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.ws-pick:hover { border-color: var(--brand-light); background: var(--brand-soft); }
.ws-pick.active { border-color: var(--brand-light); }
/* ===== customer-facing pay page ===== */
.payview { max-width: 640px; margin: 0 auto; }
.pay-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 30px; box-shadow: var(--shadow); }
.pay-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid var(--brand); padding-bottom: 14px; gap: 16px; }
.pay-stamp { display: inline-block; border: 2px solid var(--green); color: var(--green); border-radius: 999px; padding: 1px 12px; font-weight: 700; font-size: 12px; margin-top: 6px; letter-spacing: 0.08em; }
.pay-lines { width: 100%; border-collapse: collapse; margin-top: 6px; }
.pay-lines th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 7px 6px; border-bottom: 1px solid var(--border); background: transparent; }
.pay-lines td { padding: 8px 6px; border-bottom: 1px solid var(--border-2); font-size: 13px; }
.pay-lines .num, .pay-lines th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pay-action { text-align: center; margin: 22px 0 6px; padding: 20px; background: var(--brand-soft); border-radius: var(--r); }
.pay-done { color: var(--green); font-weight: 600; font-size: 15px; }
.pay-foot { margin-top: 16px; border-top: 1px solid var(--border-2); padding-top: 10px; font-size: 11.5px; }
.pay-methods { display: flex; flex-direction: column; gap: 8px; }
.pmeth { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-strong); border-radius: var(--r); padding: 11px 13px; cursor: pointer; font-size: 13.5px; font-weight: 400; color: var(--text); margin: 0; }
.pmeth:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pmeth input { width: auto; }
/* ===== small layout helpers used by the templates ===== */
.kpi { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi .sub { display: inline; font-weight: 400; margin: 0 0 0 4px; }
.search-bar { padding: 10px 12px; }
.search-bar input { max-width: 440px; }
.choices { display: flex; align-items: center; gap: 16px; min-height: var(--ctl-h); flex-wrap: wrap; }
.toolbar.subnav { margin-bottom: 16px; }
.toolbar .tabs { margin-bottom: 0; }
.toolbar select.lg { height: var(--ctl-h); font-size: 13.5px; }
td.indent { padding-left: 30px; }
.report-line.section { border: none; margin-top: 10px; padding-bottom: 4px; font-weight: 600; color: var(--ink); }
.card .value.small { font-size: 17px; }
.fgroup.action > .check { height: var(--ctl-h); }
.section-title { margin: 18px 0 8px; display: flex; align-items: baseline; gap: 6px; }
.section-title:first-child { margin-top: 0; }
.section-title .sub { font-weight: 400; margin: 0; }
.struck { text-decoration: line-through; }
.tree-caret { color: var(--muted); font-size: 11px; margin-right: 5px; }
.ob-dr, .ob-cr, .obi-qty, .obi-cost, .obi-amt, .bg-cell, .st-count, .cap-l-qty, .cap-l-price, .cap-l-amt { text-align: right; }
.head-actions > select { min-width: 0; }
.panel h2 select { height: var(--ctl-h-sm); font-size: 12.5px; width: auto; padding-right: 26px; background-position: right 8px center; }
.panel h2 .head-actions { gap: 6px; }
/* ===== data-lens refinements (critique pass) ===== */
/* numeric columns shrink to their figures so Dr / Cr / Balance sit together instead of
being spread across the slack of a wide table; the text column absorbs the slack */
th.num { width: 1%; }
td.num, th.num { padding-left: 22px; }
th.num:first-child, td.num:first-child { padding-left: 14px; }
/* the stat-card colour classes must win over the card's own ink colour */
.card .value.neg { color: var(--red); }
.card .value.pos { color: var(--green); }
/* line editors: typed figures align with the computed amount */
.lines-table input[type="number"], .lines-table input.num, #v-lines input[type="number"] { text-align: right; }
/* totals blocks sit under the AMOUNT column, not under the remove-button gutter */
.totals { padding-right: 34px; }
.vtotals { text-align: right; padding-right: 34px; font-variant-numeric: tabular-nums; }
.vtotals #v-total { font-size: 16px; color: var(--ink); }
/* ruled statements: one rule between a section's last line and its total */
.report-line:has(+ .report-line.total) { border-bottom: none; }
.report-line.total.key { background: var(--bg-2); padding: 9px 10px; margin: 8px -10px 0; border-radius: var(--r-sm); border-top: none; font-weight: 700; }
/* the account tree: a fixed code column and a caret gutter, so depth reads as indent */
.coa-tree th:first-child, .coa-tree td.tree-code { width: 150px; }
.tree-caret { display: inline-block; width: 16px; margin-left: -16px; margin-right: 0; text-align: left; }
/* journal cards in the Account Journal share one column grid */
.journal-lines { table-layout: auto; }
.journal-lines th:first-child { width: 110px; }
.journal-lines th:nth-child(2) { width: 96px; }
.journal-lines th.num { width: 130px; }
/* the 12-month budget grid: tight cells, a sticky account column, and a horizontal scroll */
.budget-grid th, .budget-grid td { padding: 6px 5px; }
.budget-grid th:first-child, .budget-grid td:first-child { padding-left: 16px; position: sticky; left: 0; background: var(--card); z-index: 1; min-width: 200px; }
.budget-grid th:first-child { background: var(--bg-2); }
.budget-grid .bg-cell { width: 86px; }
/* ===== settings: billing ===== */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.plan-card { border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; background: var(--card); display: flex; flex-direction: column; gap: 4px; }
.plan-card.current { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.plan-card .plan-name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 600; color: var(--ink); }
.plan-card .plan-price { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.plan-card .plan-price .sub { font-size: 12px; font-weight: 500; }
.plan-card .plan-save { color: var(--green); font-weight: 600; font-size: 11.5px; }
.plan-card .plan-feat { font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.plan-card .btn { margin-top: auto; width: 100%; }
.quota { margin: 10px 0; }
.quota-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; color: var(--text-2); }
.quota-track { height: 6px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.quota-track i { display: block; height: 100%; background: var(--brand-grad); border-radius: 999px; }
.quota-track i.warn { background: var(--orange); }
.quota-track i.over { background: var(--red); }
.billing-lines .report-line { font-size: 13px; }
.interval-toggle { margin-bottom: 12px; }
/* ===== print / PDF ===== */
#print-root { display: none; }
/* Report print header (company, title, basis, print date) — paper only. */
.print-head { display: none; }
@media print {
@page { size: A4; margin: 12mm; }
body { background: #fff !important; }
body.printing #app, body.printing #overlay, body.printing #toast { display: none !important; }
body.printing #print-root { display: block !important; }
.topnav, #tabbar, #drawer, .head-actions, .row-actions, .tabs, .btn, .chain, .note, .dropzone, .rm, .toolbar, .actions { display: none !important; }
main { padding: 0 !important; max-width: none !important; }
.panel { border: none; box-shadow: none; }
.no-print { display: none !important; }
.print-head { display: block !important; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid #111; }
.print-head .ph-org { font-size: 18px; font-weight: 700; color: #111; letter-spacing: -0.01em; }
.print-head .ph-title { font-size: 14px; font-weight: 600; color: #111; margin-top: 2px; }
.print-head .ph-meta { font-size: 11px; color: #555; margin-top: 3px; }
tr { break-inside: avoid; }
}
.psheet { font-size: 12.5px; color: #111; font-family: "Inter", "Segoe UI", system-ui, sans-serif; }
.psheet .phead { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid var(--brand); padding-bottom: 14px; margin-bottom: 18px; }
.psheet .cname { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.psheet .cmeta { font-size: 11.5px; color: #444; margin-top: 4px; line-height: 1.55; }
.psheet .dtitle { text-align: right; }
.psheet .dtitle h2 { font-size: 20px; letter-spacing: 0.1em; color: var(--ink); margin: 0; }
.psheet .dnum { font-size: 13px; color: #333; margin-top: 3px; }
.psheet .stamp { display: inline-block; border: 2px solid; border-radius: 999px; padding: 2px 13px; font-weight: 700; font-size: 12.5px; margin-top: 8px; letter-spacing: 0.08em; }
.psheet .stamp.paid { color: var(--green); border-color: var(--green); }
.psheet .stamp.draft { color: #b06a00; border-color: #b06a00; }
.psheet .stamp.cancelled { color: var(--red); border-color: var(--red); }
.psheet .prow { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.psheet .pbox { min-width: 180px; }
.psheet .pbox .lbl { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #999; margin-bottom: 4px; font-weight: 600; }
.psheet .pbox .val { line-height: 1.55; }
.psheet table.plines { width: 100%; border-collapse: collapse; margin: 6px 0 12px; }
.psheet table.plines th { background: var(--ink); color: #fff; padding: 7px 9px; font-size: 10.5px; text-align: left; text-transform: uppercase; letter-spacing: 0.05em; }
.psheet table.plines th.num, .psheet table.plines td.num { text-align: right; font-variant-numeric: tabular-nums; }
.psheet table.plines td { padding: 7px 9px; border-bottom: 1px solid #ddd; vertical-align: top; }
.psheet .ptotals { margin-left: auto; width: 270px; }
.psheet .ptotals .trow { display: flex; justify-content: space-between; padding: 4px 0; }
.psheet .ptotals .grand { border-top: 2px solid var(--ink); font-weight: 700; font-size: 15px; padding-top: 7px; margin-top: 4px; }
.psheet .ptotals .due { color: var(--red); font-weight: 600; }
/* the receipts behind the Paid line — compact, below the totals, only when there are any */
.psheet .ppay { clear: both; margin-top: 16px; }
.psheet .ppay-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #999; font-weight: 600; margin-bottom: 4px; }
.psheet table.ppay { margin: 0; }
.psheet table.ppay th { padding: 5px 9px; font-size: 10px; }
.psheet table.ppay td { padding: 5px 9px; font-size: 11.5px; }
.psheet .einv { display: flex; gap: 16px; align-items: center; background: var(--brand-soft); border: 1px solid #c7cbf5; border-radius: var(--r); padding: 12px 16px; margin: 18px 0; }
.psheet .einv .uuid { font-family: Consolas, monospace; font-size: 11.5px; word-break: break-all; }
.psheet .pnote { margin-top: 14px; font-size: 12px; color: #333; }
.psheet .pfoot { margin-top: 28px; border-top: 1px solid #ccc; padding-top: 10px; font-size: 10.5px; color: #777; display: flex; justify-content: space-between; gap: 16px; }
.psheet .pdemo { background: var(--orange-bg); border: 1px solid var(--orange-line); color: var(--orange); font-size: 11px; font-weight: 600; text-align: center; letter-spacing: 0.03em; padding: 6px 10px; border-radius: var(--r-sm); margin-bottom: 14px; }
/* ===== SST-02 working paper (laid out like the RMCD form; never the return itself) =====
Nothing here may use .note/.btn/.toolbar/.tabs/.actions: the print rules above hide them. */
.sst02 table.sstf { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 11.5px; }
.sst02 table.sstf th, .sst02 table.sstf td { border: 1px solid #9aa0ab; padding: 5px 7px; vertical-align: top; text-align: left; }
.sst02 table.sstf th.part { background: #e6eaf2; letter-spacing: .02em; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sst02 table.sstf th.part .pn { font-weight: 400; font-style: italic; color: #555; }
.sst02 table.sstf th.col { background: #f4f6fa; font-weight: 600; font-size: 10.5px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sst02 table.sstf th.col.num { text-align: right; }
.sst02 table.sstf tr.grp td { background: #fafbfc; font-weight: 600; }
.sst02 table.sstf tr.office td { background: #f0f1f4; color: #888; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sst02 td.ino { width: 64px; font-weight: 600; white-space: nowrap; }
.sst02 td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 120px; }
.sst02 .sst-sub { display: block; font-size: 10.5px; color: #666; margin-top: 2px; }
.sst02 .sst-blank { display: inline-block; min-width: 96px; height: 1.2em; border-bottom: 1px dashed #666; vertical-align: bottom; }
.sst02 .sst-na { color: #9aa0ab; }
.sst02 .sst-auto { color: #666; font-style: italic; font-size: 10.5px; }
.sst02 .sst-box { display: inline-block; width: 12px; height: 12px; border: 1px solid #333; font-size: 10px; line-height: 11px; text-align: center; font-weight: 700; margin-right: 4px; vertical-align: -2px; }
.sst02 .sst-choice { margin-right: 18px; white-space: nowrap; }
.sst02 .sst-hint { font-size: 11px; color: #333; margin: -6px 0 12px; }
.sst02 .sst-decl { line-height: 1.5; }
.sst-preview { overflow-x: auto; }
@media print { .sst02 table.sstf tr { break-inside: avoid; } }
/* ===== responsive ===== */
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, 1fr); } .grid2 { grid-template-columns: 1fr; } }
/* mobile / small tablet: horizontal menu → hamburger + drawer */
@media (max-width: 1024px) {
.mtop-burger { display: block; }
#topnav-menu { display: none; }
.topnav { padding: 0 12px; }
body.nav-open #drawer { transform: none; }
body.nav-open #nav-backdrop { display: block; }
main { padding: 16px; }
h1 { font-size: 20px; }
.ws-box .ws-meta { display: none; }
.cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#overlay { padding: 12px 8px; align-items: flex-start; }
.modal, .modal.wide { max-width: 100%; }
.modal .mbody { padding: 14px; }
/* wide line tables keep a typeable width and scroll sideways inside their container
instead of squashing every input to a few characters */
.modal .mbody > table, .panel .body > .lines-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.modal .mbody > table input, .modal .mbody > table select,
.panel .body > .lines-table input, .panel .body > .lines-table select { min-width: 110px; }
.modal .mbody > table input[type="number"], .panel .body > .lines-table input[type="number"] { min-width: 84px; }
/* list tables: keep document numbers, dates and amounts on one line and let the panel scroll */
.panel > table td, .panel > table th, .tbl td, .tbl th { white-space: nowrap; }
.panel > table td.empty, .tbl td.empty { white-space: normal; }
.modal header, .modal footer { padding: 12px 14px; }
.modal footer { flex-wrap: wrap; }
.modal footer .btn { flex: 1; }
.totals { max-width: none; }
#toast { left: 12px; right: 12px; bottom: 12px; text-align: center; max-width: none; }
}
@media (max-width: 460px) {
/* Forms one field a row on a phone: two squeezed fields clipped a company name to
"TechnoCount Demo Sdi". Settings and dialogs; the document editor keeps its pairs. */
.settings-main .frow > .fgroup, .modal .frow > .fgroup { flex: 1 1 100% !important; min-width: 0; }
/* Two stat cards a row, so the four headline figures fit above the fold on a phone */
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cards .card { padding: 12px; }
.cards .card .value { font-size: 18px; overflow-wrap: anywhere; }
.cards .card .hint { font-size: 11.5px; }
.page-head .head-actions, .page-head .row-actions { width: 100%; }
.page-head .head-actions .btn, .page-head .row-actions .btn { flex: 1; }
}
/* ===== list search + status filter (document lists, contacts; UX review 2026-10-11) ===== */
.list-tools { justify-content: space-between; margin-bottom: 12px; }
.list-tools .tabs { margin-bottom: 0; }
.list-tools .tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; }
.list-tools .tabs .n { font-size: 11.5px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.list-tools .tabs .n.red { color: var(--red); font-weight: 600; }
.list-tools .tabs button.zero { opacity: 0.55; }
.list-tools input[type="search"] { width: 300px; max-width: 100%; height: var(--ctl-h); font-size: 13px; background: var(--card); }
.list-foot { min-height: 18px; margin-top: 8px; font-size: 12.5px; }
.list-foot:empty { display: none; }
td .sub.phone-only, .phone-only, .contact-list .phone-cell { display: none; }
@media (max-width: 640px) {
/* Phones keep what a list is for: number, who, amount and status. The date moves under
the contact, the status under the amount; TIN, term and e-Invoice wait in the document. */
.doc-list .opt, .contact-list .opt { display: none; }
.doc-list td .phone-only, .contact-list td .sub.phone-only { display: block; }
.doc-list .hide-sm { display: none; }
.doc-list td.num .phone-only { margin-top: 4px; }
/* Contacts: "They owe" and "You owe" share one Balance column, labelled per row */
.contact-list .phone-cell { display: table-cell; }
/* ...and the four columns left fit a 390px screen: names wrap, cells pad less */
.doc-list th, .doc-list td, .contact-list th, .contact-list td { padding-left: 8px; padding-right: 8px; }
.doc-list tr > :first-child, .contact-list tr > :first-child { padding-left: 12px; }
.doc-list tr > :last-child, .contact-list tr > :last-child { padding-right: 12px; }
.doc-list td:nth-child(2), .contact-list td:first-child { white-space: normal; }
.list-tools { gap: 8px; }
.list-tools input[type="search"] { order: -1; width: 100%; }
.list-tools .tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.list-tools .tabs button { flex: none; }
}
/* Bank Reconciliation with no bank account: the import/AI header buttons cannot work yet */
.tabpane:has(.recon-none) .recon-actions { display: none; }
/* Opening Balances: the date is a date, the amounts get room (th.num is otherwise 1% wide) */
.fgroup.w-date { flex: 0 0 200px; }
.ob-grid th.num { width: 170px; }
.ob-grid td.num input { width: 100%; text-align: right; }
.ob-grid td:last-child { width: 40px; }
/* ===== phones: a document's lines as cards (docs.js lineRows; UX review 2026-10-11) =====
Six-column grid: item and description full width, qty / price / disc a third each,
tax and dimension pickers half each, the amount closing the card on the right. */
@media (max-width: 640px) {
.panel .body > table.cards-sm, .modal .mbody > table.cards-sm { display: block; overflow: visible; }
table.cards-sm thead { display: none; }
table.cards-sm tbody { display: block; }
table.cards-sm tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px;
position: relative; padding: 14px 0; border-bottom: 1px solid var(--border-2); }
table.cards-sm td { display: block; padding: 0 !important; border: 0 !important; width: auto !important; min-width: 0 !important; white-space: normal; }
table.cards-sm td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px;
font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
table.cards-sm .l-item { grid-column: 1 / -1; padding-right: 40px !important; }
table.cards-sm .l-desc { grid-column: 1 / -1; }
table.cards-sm .l-fig { grid-column: span 2; }
table.cards-sm .l-sel { grid-column: span 3; }
table.cards-sm .l-amt { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline;
font-weight: 600; font-size: 14px; }
table.cards-sm .l-amt::before { margin: 0; }
table.cards-sm .l-rm { position: absolute; top: 31px; right: 0; }
table.cards-sm .l-rm:empty { display: none; }
table.cards-sm input, table.cards-sm select { width: 100%; min-width: 0 !important; height: var(--ctl-h); font-size: 14px; }
table.cards-sm .l-n { display: none; } /* a voucher's line number: the card is the line */
.fgroup.contact-group { flex: 1 1 100% !important; } /* beats the inline flex:2 */
.totals { padding-right: 0; }
}
/* An empty list on a narrow screen: the column headings would hold the table at full width
and push the "nothing here yet" message off the right edge, so they step aside. */
@media (max-width: 1024px) {
.panel table:has(> tbody > tr:only-child > td.empty) thead { display: none; }
.panel > table td.wrap { white-space: normal; }
}
@media (max-width: 640px) {
/* Chart of accounts: long names and their pills wrap, so the row menu stays on screen */
.coa-tree td:nth-child(2) { white-space: normal; }
.aging-label { white-space: nowrap; width: 104px; font-size: 12px; }
}
/* Month-End checklist: each check's sentence wraps on a narrow screen instead of running
off the panel; the counts and buttons keep to one line */
.tbl.me-check td:not(.num) { white-space: normal; }
/* the account tree's CODE heading lines up with the codes under it */
.coa-tree th:first-child { padding-left: 30px; }
/* The chart grouped like N3 (12 Nov 2026): group rows, carets that fold, name first. */
.coa-tree.n3 th:first-child { padding-left: 30px; }
.coa-tree.n3 td.coa-code { width: 130px; font-variant-numeric: tabular-nums; color: var(--muted); }
.coa-tree.n3 td.coa-type { width: 170px; }
.coa-tree.n3 tr.coa-group td { background: var(--bg-2); font-size: 13px; letter-spacing: .02em; text-transform: uppercase; padding-top: 9px; padding-bottom: 9px; }
.coa-tree.n3 tr.coa-group .sub { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.tree-tog { border: 0; background: none; cursor: pointer; width: 20px; padding: 0; margin-right: 4px; color: var(--muted); font-size: 12px; line-height: 1; }
.tree-tog:hover { color: var(--ink); }
.tree-tog-pad { display: inline-block; width: 24px; }
.coa-bar { display: flex; gap: 8px; align-items: center; }
.coa-bar input { flex: 1; }
/* ===== Settings: a section menu beside the panels (views.js settingsNavHtml) ===== */
.settings-layout { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: calc(var(--nav-h) + var(--tab-h) + 16px); display: flex; flex-direction: column; gap: 2px; }
.settings-nav button { text-align: left; background: none; border: 0; border-radius: var(--r-sm); padding: 8px 12px;
font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.settings-nav button:hover { color: var(--ink); background: var(--bg-3); }
.settings-nav button.active { color: var(--ink); background: var(--card); box-shadow: var(--shadow-sm); font-weight: 600; }
.set-sec { scroll-margin-top: calc(var(--nav-h) + var(--tab-h) + 16px); }
@media (max-width: 1100px) {
.settings-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.settings-nav { top: calc(var(--nav-h) + var(--tab-h)); z-index: 5; flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 4px;
margin: 0 -16px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--border-2); }
.settings-nav button { flex: none; white-space: nowrap; padding: 6px 12px; }
.set-sec { scroll-margin-top: calc(var(--nav-h) + var(--tab-h) + 60px); }
}
@media print { .settings-nav { display: none; } .settings-layout { display: block; } }
/* ===== a page header's "More" menu (ui.js actionMenuHtml) ===== */
.act-more { position: relative; display: inline-flex; }
.act-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; z-index: 60;
background: var(--card); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 4px; }
.act-more.open .act-menu { display: block; }
.act-menu .btn { display: flex; width: 100%; justify-content: flex-start; height: 34px; padding: 0 10px; border: 0;
background: none; box-shadow: none; color: var(--text); font-weight: 500; }
.act-menu .btn:hover { background: var(--bg-3); }
.act-menu .btn.danger { color: var(--red); }
.act-menu .btn.danger:hover { background: var(--red-bg); }
@media (max-width: 460px) {
.page-head .head-actions .act-more { flex: 1; }
.page-head .head-actions .act-more > .btn { flex: 1; }
.act-menu { left: 0; right: auto; }
}
/* ===== dashboard: first steps for a new company (views.js setupPanelHtml) ===== */
.panel.setup h2 { align-items: center; }
.setup-bar { height: 6px; border-radius: 999px; background: var(--bg-3); overflow: hidden; margin-bottom: 6px; }
.setup-bar > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.setup-steps { list-style: none; margin: 0; padding: 0; }
.setup-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-2); }
.setup-steps li:last-child { border-bottom: 0; }
.setup-text { flex: 1; min-width: 0; }
.setup-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border);
display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.setup-steps li.done .setup-tick { background: var(--green); border-color: var(--green); }
.setup-steps li.done .setup-text b { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.setup-import { margin-top: 10px; }
/* a dialog focused as a whole (touch screens) shows no ring; its fields still do */
.modal:focus { outline: none; }
/* Borang B working paper (spa/tax.js) */
.bb-tbl { width: 100%; }
.bb-tbl td { vertical-align: top; white-space: normal; }
.bb-tbl td.num { white-space: nowrap; }
.bb-tbl tr.bb-total td { font-weight: 700; border-top: 1px solid var(--border); }
.bb-tbl tr.bb-sub td { border-top: 1px solid var(--border-2); }
.bb-tbl tr.bb-grp td { background: var(--canvas, #f4f5f7); }
.bb-tbl tr.bb-off td { color: var(--text-3, #8a94a6); }
.bb-tbl tr.bb-off td.num { text-decoration: line-through; }
.bb-tbl tr.bb-in td { padding-top: 2px; padding-bottom: 2px; border-top: 0; }
.bb-code { display: inline-block; min-width: 38px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-2, #4a5568); }
.bb-bm { margin-left: 4px; font-size: 12px; font-weight: 400; color: var(--text-3, #8a94a6); font-style: italic; }
.bb-meta { margin: 2px 0 0 42px; font-size: 12px; color: var(--text-2, #4a5568); }
.bb-amt { width: 132px; text-align: right; }
.bb-count { width: 64px; text-align: right; }
.bb-check { display: inline-flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 0; }
.bb-userline { display: flex; gap: 8px; align-items: center; }
.bb-userline input { flex: 1; min-width: 0; }
.bb-inline { margin-top: 6px; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-2, #4a5568); }
.bb-kids { display: inline-flex; gap: 10px; }
.bb-kids label { display: inline-flex; gap: 4px; align-items: center; font-weight: 400; margin: 0; }
.bb-confirm { padding: 12px 16px; }
.bb-confirm summary { cursor: pointer; font-weight: 600; }
.bb-confirm ul { margin: 8px 0; padding-left: 18px; }
.bb-acc summary { cursor: pointer; font-size: 12px; color: var(--brand); margin-top: 3px; }
.bb-acc-tbl { width: 100%; margin: 6px 0 2px; font-size: 12.5px; }
.bb-acc-tbl select { max-width: 220px; }
/* things to check, and the AI review (spa/tax.js bbChecksPanel) */
.bb-ci { padding: 12px 16px; border-top: 1px solid var(--border-2); }
#bb-checks-body > .bb-ci:first-child { border-top: 0; }
.bb-ci-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.bb-ci-detail { margin-top: 4px; font-size: 13px; color: var(--text-2); max-width: 920px; }
.bb-ci-acts { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bb-ci-none { padding: 12px 16px; color: var(--text-2); font-size: 13px; }
.bb-ci-gone { padding: 8px 16px 12px; border-top: 1px solid var(--border-2); }
.bb-ci-gone .bb-ci { padding-left: 0; padding-right: 0; opacity: 0.75; }
.bb-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--brand); cursor: pointer; text-decoration: underline; }
.bb-ai { border-top: 1px solid var(--border); padding: 12px 16px 14px; background: var(--bg, #f4f5f7); border-radius: 0 0 var(--r, 8px) var(--r, 8px); }
.bb-ai-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.bb-ai-head .sub { margin-top: 4px; max-width: 780px; }
.bb-ai-items { margin: 12px 0 8px; padding-left: 20px; }
.bb-ai-items li { margin: 0 0 8px; }
.bb-ai-sum { margin: 8px 0; padding: 10px 12px; background: #fff; border: 1px solid var(--border-2); border-radius: var(--r-sm, 6px); }
.bb-ai-sum p { margin: 4px 0 10px; font-size: 13px; }
.bb-ai-sum-h { display: flex; gap: 10px; align-items: baseline; }
.bb-ai .panel { margin: 10px 0 0; }
/* the bar that stays in view: the four figures, where the paper stands, Save, and the sections */
.bb-bar { position: sticky; top: var(--nav-h); z-index: 20; margin: 0 0 14px; padding: 10px 14px 8px;
background: var(--bg-1, #fff); border: 1px solid var(--border); border-radius: var(--r, 8px); box-shadow: 0 4px 14px rgba(15, 21, 34, 0.06); }
body:has(#tabbar.has-tabs) .bb-bar { top: calc(var(--nav-h) + var(--tab-h)); }
.bb-figs { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.bb-fig { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bb-fig-l { font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.bb-fig-l .sub { font-size: 11px; }
.bb-fig b { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-act { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.bb-status { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.bb-status.ok { color: var(--green); }
.bb-status.warn { color: var(--orange); }
.bb-status.busy { color: var(--brand); }
.bb-status.error { color: var(--red); white-space: normal; max-width: 340px; }
.bb-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.bb-nav-bar { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-2); }
.bb-nav-top { display: none; }
.bb-chip { border: 1px solid var(--border); background: var(--bg, #f4f5f7); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px;
color: var(--text-2); cursor: pointer; white-space: nowrap; }
.bb-chip:hover { border-color: var(--brand); color: var(--brand); }
.bb-chip-v { color: var(--text-3, #8a94a6); font-variant-numeric: tabular-nums; }
.bb-sec { scroll-margin-top: calc(var(--nav-h) + var(--tab-h) + 120px); }
.bb-amt.invalid, .bb-count.invalid { border-color: var(--red); background: var(--red-bg, #fdecec); }
.bb-capped { margin-right: 4px; }
.bb-ok { margin-top: 6px; font-size: 12.5px; color: var(--green); }
.bb-n tr.bb-zero { display: none; }
.bb-n.show-all tr.bb-zero { display: table-row; }
.bb-early { border-bottom: 1px solid var(--border-2); }
.bb-early > summary { cursor: pointer; padding: 10px 16px; font-size: 13px; color: var(--brand); }
@media print { .bb-n tr.bb-zero { display: table-row; } .bb-bar, .bb-nav { display: none !important; } }
@media (max-width: 640px) {
/* On a phone the bar sits at the bottom: the tax, the balance and Save, always in reach. */
.bb-root { padding-bottom: 96px; }
body:has(.bb-bar) #toast { bottom: 96px; }
.bb-bar { position: fixed; top: auto !important; bottom: 0; left: 0; right: 0; margin: 0; border-radius: 0; border-width: 1px 0 0;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(15, 21, 34, 0.08); z-index: 45; }
.bb-figs { gap: 12px; flex-wrap: nowrap; align-items: center; }
.bb-fig-b1, .bb-figs .bb-fig:nth-child(2) { display: none; }
.bb-fig b { font-size: 15px; }
.bb-fig-l .sub { display: none; }
.bb-act { gap: 8px; flex-direction: column; align-items: flex-end; }
.bb-status { font-size: 11px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.bb-status.error { white-space: nowrap; }
.bb-nav-bar { display: none; }
.bb-ai-head { flex-direction: column; }
.bb-nav-top { display: flex; flex-wrap: nowrap; overflow-x: auto; margin: 0 0 12px; padding-bottom: 4px; scrollbar-width: none; }
.bb-tbl thead { display: none; }
.bb-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 12px; border-top: 1px solid var(--border-2); }
.panel > table.bb-tbl td { padding: 0 !important; border: 0 !important; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.panel > table.bb-tbl td.num { white-space: nowrap; overflow-wrap: normal; }
.bb-tbl td:first-child { grid-column: 1 / -1; }
.bb-tbl tr.bb-in, .bb-tbl tr.bb-total { border-top: 0; }
.bb-meta { margin-left: 0; }
.bb-amt { width: 120px; }
.bb-acc-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.bb-acc-tbl td:last-child { grid-column: 1 / -1; }
.bb-acc-tbl select { max-width: 100%; width: 100%; }
}
/* the Email invoice dialog's preview of the message (docs.js emailInvoiceModal) */
.email-preview { display: block; width: 100%; height: 420px; margin-top: 6px; border: 1px solid var(--border);
border-radius: var(--r-sm); background: #fff; }
@media (max-width: 640px) { .email-preview { height: 360px; } }
/* trial balance: the code column is a fixed gutter, the account name takes the slack */
.tb-table th:first-child { width: 120px; }
/* ===== critique pass: hierarchy, states, contrast ===== */
/* one filled button per action bar — the former black "navy" variant becomes an outlined brand button */
.btn.navy { background: var(--card); color: var(--brand-ink); border-color: var(--brand-light); font-weight: 600; }
.btn.navy:hover { background: var(--brand-soft); color: var(--brand-ink); }
/* disabled is a solid quiet surface, not a ghost of the primary */
.btn:disabled, .btn[disabled] { background: var(--bg-3); color: var(--muted); border-color: var(--border); opacity: 1; box-shadow: none; }
.btn.secondary:disabled, .btn.danger:disabled { background: var(--bg-2); color: var(--muted); border-color: var(--border); }
/* stat-card hints carry information — keep them at AA */
.card .hint { color: var(--muted); }
/* tab strip: fade the cut edges, keep the close control legible, show it only where it matters */
.tabstrip { scroll-padding-inline: 12px;
mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 22px), transparent);
-webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 22px), transparent); }
.mditab { max-width: 190px; }
.mditab .x { opacity: 0; width: 0; padding: 0; margin-left: -4px; overflow: hidden; color: var(--muted); transition: opacity 0.12s, width 0.12s; }
.mditab.active .x, .mditab:hover .x, .mditab:focus-within .x { opacity: 1; width: 18px; margin-left: 0; }
.mditab .x:hover { color: var(--red); }
/* emoji in menus and tabs sit in one quiet tone next to the line icons */
.navtop-menu a .ico, #drawer-menu a .ico, .mditab .ico { filter: grayscale(1); opacity: 0.55; }
.navtop-menu a .ico .ai-ico, #drawer-menu a .ico .ai-ico, .mditab .ico .ai-ico,
.navtop-menu a .ico:has(.ai-ico), #drawer-menu a .ico:has(.ai-ico), .mditab .ico:has(.ai-ico) { filter: none; opacity: 1; color: var(--brand-ink); }
/* nav dropdown chevron: the same 12px stroke chevron the selects use */
.navtop-btn .caret { width: 12px; height: 12px; font-size: 0; opacity: 0.7; margin-top: 0;
background: url("data:image/svg+xml;utf8,") center / 12px no-repeat; }
.navtop-menu { border-radius: var(--r); }
.topnav .demo-badge { font-size: 10.5px; padding: 2px 8px; }
/* line remove control at contrast */
.rm { color: var(--muted); width: 28px; height: 28px; border: 1px solid transparent; }
.rm:hover, .rm:focus-visible { color: var(--red); background: var(--red-bg); border-color: var(--red-line); }
/* read-only values read as data, not as an unfilled form */
input:disabled, select:disabled, textarea:disabled { color: var(--text-2); -webkit-text-fill-color: var(--text-2); opacity: 1; }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
/* warning panels share the panel weight — tinted head, 1px border */
.panel.warn { border-color: var(--orange-line); }
.panel.warn > .body > b:first-child, .panel.danger > .body > b:first-child { color: var(--orange); }
.panel.danger { border-color: var(--red-line); }
.panel.danger > .body > b:first-child { color: var(--red); }
.note.warn { color: var(--text-2); }
.note.warn > b:first-child { color: var(--orange); }
.note.error { color: var(--text-2); }
.note.error > b:first-child { color: var(--red); }
/* the quiet "system" tag on the chart of accounts */
.pill.sys { background: transparent; border: 1px solid var(--border); color: var(--muted); font-weight: 500; height: 20px; }
/* short fixed values do not get a full column */
.fgroup.narrow { flex: 0 0 120px; min-width: 100px; }
/* a superseded journal reads as history */
.panel.superseded .journal-lines td, .panel.superseded tfoot td { color: var(--muted); }
/* plan cards: the current plan's action is quiet, upgrades carry the fill */
.plan-card.current .btn { background: var(--card); color: var(--brand-ink); border-color: var(--brand-light); }
.plan-card.current .btn:hover { background: var(--brand-soft); }
/* the account search sits on the canvas, not in an empty card */
.panel.search-bar { background: transparent; border: 0; box-shadow: none; padding: 0; margin-bottom: 14px; overflow: visible; }
.search-bar input { max-width: 420px; background: var(--card); }
/* line-table selects never clip their value */
.lines-table select, #v-lines select { text-overflow: ellipsis; }
/* budget grid fits twelve months at the design width */
.budget-grid th, .budget-grid td { padding: 5px 3px; }
.budget-grid th:first-child, .budget-grid td:first-child { min-width: 184px; padding-left: 14px; }
.budget-grid .bg-cell { width: 80px; padding: 4px 6px; font-size: 12px; }
/* mobile drawer close */
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding-right: 10px; }
.drawer-close { width: 32px; height: 32px; border: none; background: none; color: var(--muted); font-size: 14px; line-height: 1; border-radius: var(--r-sm); cursor: pointer; }
.drawer-close:hover { background: var(--bg-3); color: var(--ink); }
.panel .body, .note { text-wrap: pretty; }
@media (max-width: 460px) {
.modal .frow .fgroup { flex: 1 1 100%; min-width: 0; }
.aging-label { width: 96px; } .aging-amt { width: 88px; } .aging-row { gap: 8px; }
.panel table th, .panel table td { padding: 8px 10px; }
}
/* line editors keep their fixed column widths — the shrink-to-figures rule is for read-only tables */
.lines-table th.num, #v-lines th.num, .budget-grid th.num { width: auto; }
.lines-table th.num, .lines-table td.num, #v-lines th.num, #v-lines td.num { padding-left: 5px; }
/* Settings › Document numbering: the format box is wide enough to read a whole format, the
row's error wraps under it (list tables are nowrap on a phone), and the table scrolls
inside .tbl-scroll rather than widening the page */
.docnum input.dn-fmt { min-width: 190px; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
.docnum input.dn-start { width: 110px; min-width: 90px; }
.docnum input[aria-invalid="true"] { border-color: var(--red); }
.docnum .dn-err { color: var(--red); font-size: 12px; margin-top: 4px; white-space: normal; max-width: 280px; }
.docnum .dn-err:empty { display: none; }
/* ===== Home: six plain actions (partner feedback round 4, R01) ===== */
.home { max-width: 1120px; margin: 0 auto; padding: 8px 0 24px; }
.home-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.home-crumb { font-size: 12px; color: var(--muted); }
.home-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: var(--brand); margin-bottom: 10px; }
.home-h1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.6px; margin: 0 0 10px; font-weight: 650; color: var(--ink); }
.home-intro { color: var(--muted); margin: 0 0 26px; line-height: 1.6; }
.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.home-card { display: flex; align-items: center; gap: 16px; text-align: left; background: var(--card); color: inherit;
border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 20px; min-height: 148px; cursor: pointer;
box-shadow: var(--shadow-sm); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; font: inherit; }
.home-card:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(0, 123, 166, 0.10); transform: translateY(-2px); }
.home-card:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.home-ico { display: grid; place-items: center; width: 52px; height: 56px; flex-shrink: 0; border-radius: 12px;
background: var(--brand-soft); color: var(--brand); }
.home-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.home-txt strong { font-size: 17px; font-weight: 650; letter-spacing: -0.2px; color: var(--ink); }
.home-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
.home-mod { font-size: 11px; color: var(--muted-2); letter-spacing: 0.3px; }
.home-arrow { margin-left: auto; color: var(--muted-2); font-size: 20px; flex-shrink: 0; }
.home-card:hover .home-arrow { color: var(--brand); }
.home-links { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 28px 0 4px; }
.home-links a { color: var(--text-2); text-decoration: none; padding: 8px 4px; }
.home-links a:hover { color: var(--brand); }
.home-div { height: 15px; border-left: 1px solid var(--border-strong); }
@media (max-width: 1024px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
.home-grid { grid-template-columns: 1fr; }
.home-h1 { font-size: 25px; }
.home-card { min-height: 0; padding: 18px 16px; }
}
/* English / Bahasa Melayu switch */
.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--card); }
.lang-switch button { border: 0; background: none; font: inherit; font-size: 12px; padding: 5px 12px; color: var(--muted); cursor: pointer; }
.lang-switch button.on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
/* All Menus */
.menus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.menus-list { display: flex; flex-direction: column; gap: 2px; }
.menus-link { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; }
.menus-link .ico { width: 18px; text-align: center; filter: grayscale(1); opacity: 0.8; }
.menus-link:hover { background: var(--bg-2); color: var(--ink); }
/* Search anything (R09): the box in the top bar, its results under it */
.gsearch { position: relative; display: flex; align-items: center; margin-right: 4px; }
.gsearch-ico { position: absolute; left: 9px; color: var(--muted-2); pointer-events: none; }
.gsearch input { width: 210px; height: 32px; padding: 0 10px 0 30px; border-radius: var(--r); border: 1px solid transparent;
background: var(--bg-3); font-size: 13px; transition: width 0.15s, background 0.15s; }
.gsearch input:focus { width: 280px; background: var(--card); border-color: var(--border-strong); box-shadow: var(--ring); outline: none; }
.gsearch-pop { position: absolute; top: calc(100% + 6px); right: 0; width: 440px; max-width: 92vw; max-height: 72vh; overflow-y: auto;
background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 6px; z-index: 70; }
.gsearch-btn { display: none; border: 0; background: none; cursor: pointer; }
.gs-inline { margin-top: 10px; max-height: 60vh; overflow-y: auto; }
.gs-group { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted-2); padding: 10px 10px 4px; }
.gs-row { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; background: none; font: inherit;
padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; color: var(--text); }
.gs-row:hover, .gs-row.sel { background: var(--brand-soft); }
.gs-main { font-size: 13px; }
.gs-meta { font-size: 12px; color: var(--muted); }
.gs-note { padding: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.gs-note.error { color: var(--red); }
.gs-more { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--border-2); background: none; font: inherit;
font-size: 12.5px; color: var(--brand); padding: 9px 10px; margin-top: 4px; cursor: pointer; }
.gs-more:hover { text-decoration: underline; }
@media (max-width: 1280px) { .gsearch input { width: 160px; } .gsearch input:focus { width: 240px; } }
@media (max-width: 1024px) { .gsearch { display: none; } .gsearch-btn { display: inline-flex; } }
.ar-makeup { margin-top: 10px; line-height: 1.5; }
/* Preview ▾ — the button and its Print / Download PDF menu read as one control (R02) */
.split-btn { display: inline-flex; align-items: stretch; }
.split-btn > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-btn .act-more > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; padding-left: 8px; padding-right: 8px; }
/* The customer's copy shown in a dialog, as it will print */
.doc-preview { max-height: 68vh; overflow: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 18px; }
/* Receipt / Payment Voucher: what it settles (partner feedback round 4, R03) */
.v-mode { margin: 4px 0 10px; gap: 18px; }
.v-alloc { border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; margin: 0 0 12px; background: var(--bg-2); }
.v-alloc .section-title { margin-top: 0; }
.v-alloc-tbl { width: 100%; background: var(--card); }
.v-alloc-tbl input[type="number"] { text-align: right; }
.v-alloc-tbl input[aria-invalid="true"] { border-color: var(--red); }
.v-metrics { display: flex; gap: 22px; justify-content: flex-end; font-size: 13px; color: var(--text-2); margin-top: 10px; }
.v-metrics .neg { color: var(--red); font-weight: 600; }
.v-status { margin-right: auto; font-size: 12.5px; color: var(--muted); }
.v-status.error { color: var(--red); }
/* Smart Capture review: each line's coding and where it came from (round 4, R05) */
.cap-lines-tbl .cap-src { font-size: 11px; cursor: help; }
.cap-dest { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 8px; }
.cap-dest .check { align-items: flex-start; }
.cr-cond .fgroup { margin-bottom: 6px; }
.cap-dest input[type="radio"] { width: 15px; flex: 0 0 15px; margin-top: 2px; }
/* The review gives the form the room: the document stays beside it, narrower (R05). */
.cap-grid.cap-review { grid-template-columns: minmax(240px, 30%) minmax(0, 1fr); }
.cap-lines-wrap { overflow-x: auto; }
.cap-lines-tbl { min-width: 760px; }
.cap-lines-tbl .cap-l-desc { min-width: 150px; }
@media (max-width: 1024px) { .cap-grid.cap-review { grid-template-columns: 1fr; } .cap-lines-tbl { min-width: 0; } }
/* Bank statement PDF review (R08) */
.st-tbl .st-in, .st-tbl .st-out { min-width: 96px; text-align: right; }
.st-tbl .st-desc { min-width: 220px; }
/* ===== Midnight theme (partner UAT UX-09, 29 Oct 2026) =====
The partner's proposed colours: Midnight Blue #172B4D with Aqua #38BCC7, white cards, clear
contrast. The DEFAULT since 30 Oct: index.html ships , and the
switch on Home brings back the classic cyan (:root above) for anyone who prefers it,
remembered on this device (ui.js setTheme).
Pairs meet WCAG AA: white on Midnight 14:1, Midnight on Aqua 6.2:1, the link aqua #1C7C86 on
white 4.9:1. Aqua itself is never used for text on white (2.3:1). */
:root[data-theme="midnight"] {
--brand: #1c7c86;
--brand-grad: linear-gradient(210deg, #5fd0d9 0%, #38bcc7 100%);
--brand-grad-hover: linear-gradient(210deg, #4cc5ce 0%, #2fb0bb 100%);
--brand-on: #172b4d;
--brand-dark: #176a72;
--brand-soft: #e7f6f7;
--brand-ink: #134f55;
--brand-light: #9fe3e8;
--ink: #172b4d;
--ring: 0 0 0 3px rgba(56, 188, 199, 0.32);
}
:root[data-theme="midnight"] .topnav { background: #172b4d; color: #c9d4e6; border-bottom-color: #0f1f3a; }
:root[data-theme="midnight"] .topnav .brand { color: #fff; }
:root[data-theme="midnight"] .topnav .brand-word span { color: #38bcc7; }
:root[data-theme="midnight"] .topnav .brand svg rect { fill: #38bcc7; }
:root[data-theme="midnight"] .topnav .brand svg path { stroke: #fff; }
:root[data-theme="midnight"] .navtop-link, :root[data-theme="midnight"] .navtop-btn,
:root[data-theme="midnight"] .navtop-icon, :root[data-theme="midnight"] .mtop-burger { color: #dbe3f0; }
:root[data-theme="midnight"] .navtop-link:hover, :root[data-theme="midnight"] .navtop-btn:hover,
:root[data-theme="midnight"] .navtop-item:hover > .navtop-btn, :root[data-theme="midnight"] .navtop-icon:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
:root[data-theme="midnight"] .navtop-item.active-top > .navtop-link,
:root[data-theme="midnight"] .navtop-item.active-top > .navtop-btn { background: rgba(56, 188, 199, 0.22); color: #fff; }
:root[data-theme="midnight"] .gsearch input { background: rgba(255, 255, 255, 0.96); }
.home-switches { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }