/* Fuga Books — original design system */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f3f5f7;
  --panel: #ffffff;
  --ink: #1b2733;
  --muted: #61707f;
  --line: #dfe6ec;
  --brand: #1A5FAB;
  --brand-dark: #134A87;
  --accent: #E8B923;
  --danger: #b6382a;
  --warn: #a8711c;
  --ok: #1e7e34;
  --sidebar-bg: #0E1C30;
  --sidebar-ink: #C6D4E8;
  --radius: 8px;
}
html, body { height: 100%; }
body { font: 14px/1.5 "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--bg); }
.app { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar { width: 216px; flex: 0 0 216px; background: var(--sidebar-bg); color: var(--sidebar-ink);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px; font-size: 17px; font-weight: 600; color: #fff; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 7px; background: var(--accent); color: #16233A; font-size: 13px; font-weight: 700; }
#nav { flex: 1; padding: 6px 0; overflow-y: auto; }
#nav a { display: block; padding: 9px 18px; color: var(--sidebar-ink); text-decoration: none;
  font-size: 13.5px; border-left: 3px solid transparent; cursor: pointer; }
#nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
#nav a.active { background: rgba(255,255,255,.09); color: #fff; border-left-color: var(--accent); }
.sidebar-foot { padding: 12px 16px; font-size: 11.5px; color: #7E93B5; border-top: 1px solid rgba(255,255,255,.08); }
#company-tag { color: #A9C0DD; font-weight: 600; }

/* Main */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px;
  background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
#company-select { font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); max-width: 320px; font-weight: 600; }
.topbar-actions { display: flex; gap: 8px; }
#global-search { flex: 1; max-width: 340px; margin: 0 14px; font: inherit; font-size: 13px;
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 20px; background: #f7fafb; color: var(--ink); }
#global-search:focus { outline: 2px solid rgba(26,95,171,.25); border-color: var(--brand); background: #fff; }
#search-results button { white-space: normal; line-height: 1.35; }
#view { padding: 22px; max-width: 1180px; width: 100%; }

/* Buttons */
.btn { font: inherit; font-size: 13px; padding: 7px 14px; cursor: pointer; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; color: var(--ink); }
.btn:hover { border-color: #b3c2cd; background: #f7fafc; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.danger { color: var(--danger); }
.btn.small { padding: 3px 9px; font-size: 12px; }
.btn.link { border: none; background: none; color: var(--brand); font-weight: 600; padding: 0; }
.btn.link:hover { text-decoration: underline; background: none; }

/* Page structure */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.page-head h1 { font-size: 20px; font-weight: 600; }
.page-head .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tabs */
.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { font: inherit; font-size: 13.5px; padding: 8px 14px; border: none; background: none; cursor: pointer;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tabs button.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.tabs button:hover { color: var(--ink); }

/* Brand theme (company primary + accent from Settings) & per-module accents */
:root { --module-accent: var(--brand); --module-accent-soft: rgba(26,95,171,.12); }
.page-head h1 { border-left: 4px solid var(--module-accent); padding-left: 10px; }
.tabs button.active { color: var(--module-accent); border-bottom-color: var(--module-accent); }
#nav a.active { border-left-color: var(--module-accent); }
.module-chip { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* Dashboard KPI cards */
/* Cards are at least 250 px wide (4 per row on a wide screen, not 5), so a figure up to KSh 99,999,999.99
   shows on one line at 800–1920 px; if a card is ever narrower the value wraps after "KSh" (and, as a last
   resort, inside the number) — it is never cut off (Argus H1, 23 Oct 2026). */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line);
  border-left: 5px solid var(--kpi); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.kpi .ico { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 40px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--kpi-soft); color: var(--kpi); }
.kpi .ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi .lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.kpi .val { font-size: 18px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; }
/* KPI guide (views.js KPI_GUIDES): the ⓘ sits in the card's top-right corner, out of the value's way (only
   the label row keeps room for it); its panel drops down under the card, up to 360 px wide and never wider
   than the screen (views.js placeKpiGuide keeps it inside #view), above the cards below and under the
   sticky top bar. Screen only. */
.kpi { position: relative; }
.kpi { padding-top: 14px; }        /* 2 px more above the label: the ⓘ (4–28 px) stays clear of the value line */
.kpi .lbl { padding-right: 26px; }
.kpi.guide-open { z-index: 4; }   /* above the cards below, under the sticky top bar (5) */
.kpi-info { position: absolute; top: 4px; right: 6px; width: 24px; height: 24px; padding: 0; margin: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.kpi-info:hover, .kpi-info[aria-expanded="true"] { color: var(--kpi); border-color: var(--kpi); }
.kpi-info:focus-visible { outline: 2px solid var(--kpi); outline-offset: 2px; }
.kpi-guide { position: absolute; top: calc(100% + 6px); left: 0; width: min(360px, calc(100vw - 32px)); z-index: 1; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-top: 3px solid var(--kpi); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(11,37,69,.18);
  padding: 10px 12px; font-size: 12.5px; line-height: 1.45; max-height: 60vh; overflow-y: auto; text-transform: none; letter-spacing: normal; }
.kpi-guide[hidden] { display: none; }
.kpi-guide .kg-means { font-weight: 600; margin-bottom: 4px; }
.kpi-guide ul { margin: 6px 0 6px 18px; }
.kpi-guide li { margin: 2px 0; }
.kpi-guide .kg-scope { color: var(--muted); font-size: 11.5px; }
@media print { .kpi-info, .kpi-guide { display: none !important; } }
.chart-card svg { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; margin-top: 6px; }
.chart-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.form-section { grid-column: 1 / -1; font-weight: 600; font-size: 12.5px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line); }
.form-grid .check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); font-weight: 500; }
.form-grid .check input { width: auto; margin: 0; }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; }
.tile .label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.tile .value { font-size: 19px; font-weight: 700; margin-top: 4px; white-space: nowrap; }
.tile .value.neg { color: var(--danger); }
.tile .value.pos { color: var(--ok); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.card h2 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }

/* Tables */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: #f7fafb; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #f7fafb; }
tbody tr.clickable { cursor: pointer; }
thead th.clickable { cursor: pointer; user-select: none; white-space: nowrap; }
/* long product names / descriptions wrap in their own cell (Products list) instead of widening the table */
td.wrap { white-space: normal; overflow-wrap: anywhere; min-width: 200px; max-width: 420px; }
tr.total-row td { font-weight: 700; border-top: 2px solid var(--ink); background: #f7fafb; }
tr.section-row td { font-weight: 700; background: #eef3f1; }
tr.subtotal-row td { font-weight: 600; border-top: 1px solid var(--muted); }
.empty { padding: 26px; text-align: center; color: var(--muted); }
.indent { padding-left: 28px !important; }

/* Filter input */
.filter-bar { margin-bottom: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter-bar input[type="search"], .filter-bar input[type="date"], .filter-bar input[type="number"], .filter-bar select,
.filter-bar input:not([type]), .filter-bar input[type="text"] {
  font: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.filter-bar label { font-size: 12px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 5px; }

/* Pills */
.pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.pill.paid { background: #e6f4ea; color: var(--ok); }
.pill.open { background: #e8eef4; color: #33526e; }
.pill.partial { background: #fdf3e3; color: var(--warn); }
.pill.overdue { background: #fdecea; color: var(--danger); }
.pill.converted { background: #e6f4ea; color: var(--ok); }
.pill.nonposting { background: #eef0f2; color: var(--muted); }
/* Approvals count in the menu (batch 2b) and the "waiting for approval" card above a list */
.nav-badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 6px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; }
.pending-card { border-color: var(--warn); }

/* Modal */
#modal-root:empty { display: none; }
.modal-overlay { position: fixed; inset: 0; background: rgba(13,25,22,.5); display: flex; align-items: flex-start;
  justify-content: center; padding: 36px 16px; z-index: 50; overflow-y: auto; }
.modal { background: #fff; border-radius: 10px; width: 100%; max-width: 720px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modal.narrow { max-width: 460px; }
.modal.wide { max-width: 880px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 16px; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--muted); line-height: 1; }
.modal-body { padding: 16px 18px; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
label.field { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
label.field input, label.field select, label.field textarea { display: block; width: 100%; margin-top: 4px;
  font: inherit; font-size: 13.5px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
label.field input:focus, label.field select:focus { outline: 2px solid rgba(26,95,171,.25); border-color: var(--brand); }
.form-error { color: var(--danger); font-size: 12.5px; margin-top: 8px; min-height: 1em; }

/* Line editor */
.lines-table { width: 100%; margin-top: 6px; }
.lines-table th { background: none; padding: 4px 6px; }
.lines-table td { padding: 3px 4px; border-bottom: none; }
.lines-table input, .lines-table select { width: 100%; font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; }
.lines-table .qty { width: 68px; }
.lines-table .price { width: 108px; }
.lines-table .line-total { width: 108px; text-align: right; font-variant-numeric: tabular-nums; padding-right: 8px; }
.lines-table .rm { width: 30px; text-align: center; }
/* sales item picker (filterable combobox) */
.item-picker { position: relative; }
.lines-table .line-desc, .lines-table .line-vat { display: block; }   /* stack under the picker inside the cell */
.item-picker-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-height: 264px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgba(22,35,58,.14); margin-top: 2px; }
.item-picker-opt { padding: 6px 9px; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-picker-opt.active, .item-picker-opt:hover { background: rgba(26,95,171,.10); }
.item-picker-more { padding: 6px 9px; font-size: 12px; }
/* the item picker outside a lines table (stock adjustment, production order) */
div.field > .item-picker { margin-top: 4px; }
div.field > .item-picker .line-item-search { display: block; width: 100%; font: inherit; font-size: 13.5px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
/* type-to-filter box in front of a long customer / supplier / employee list */
label.field input.select-filter { margin-bottom: 2px; font-size: 12.5px; padding: 5px 8px; background: #f7fafb; }
/* purchase forms: "Category details" / "Item details" sections */
.lines-section-title { font-weight: 600; font-size: 12.5px; margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--line); }
.lines-section-title:first-of-type { margin-top: 4px; }
/* "You have unsaved changes" question: above the modal it guards */
.modal-overlay.leave-overlay { z-index: 70; align-items: center; }
/* receipt preview after a sale: the printed layout inside a modal */
.receipt-preview { max-height: 62vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; padding: 16px; background: #fff; }
.receipt-preview .print-doc .ph { display: flex; justify-content: space-between; margin-bottom: 16px; }
.totals-box { margin-top: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 13.5px; }
.totals-box .grand { font-size: 15px; font-weight: 700; }

/* Apply-to table (payments) */
.apply-table input[type="number"] { width: 110px; }

/* + New menu */
.menu { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 60; min-width: 190px; padding: 4px 0; }
.menu button { display: block; width: 100%; text-align: left; padding: 7px 14px; background: none; border: none;
  font: inherit; font-size: 13px; cursor: pointer; }
.menu button:hover { background: #f0f4f3; }
.menu .menu-sep { border-top: 1px solid var(--line); margin: 4px 0; }
.menu .menu-label { padding: 5px 14px 2px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* Alerts bell (branch reorder points) */
#alerts-bell { display: none; position: relative; }
#alerts-bell.has-alerts { border-color: var(--warn); color: var(--warn); }
.alert-badge:empty { display: none; }
.alert-badge { display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; }
.alerts-menu { min-width: 300px; max-width: 380px; max-height: 360px; overflow-y: auto; padding: 6px 0; }
.menu-alert { padding: 7px 14px; font-size: 12.5px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-alert:last-child { border-bottom: none; }

/* Report centre */
.report-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.report-group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.report-group a { display: block; padding: 6px 0; color: var(--brand); font-weight: 600; text-decoration: none; cursor: pointer; }
.report-group a:hover { text-decoration: underline; }
.report-title { text-align: center; margin-bottom: 4px; }
.report-title .company-name { font-size: 16px; font-weight: 700; }
.report-title .report-name { font-size: 14px; }
.report-title .report-range { font-size: 12px; color: var(--muted); margin-bottom: 10px; }

.muted { color: var(--muted); }
.right { text-align: right; }
.mt { margin-top: 12px; }
a.rowlink { color: var(--brand); text-decoration: none; font-weight: 600; cursor: pointer; }
a.rowlink:hover { text-decoration: underline; }

/* History-company controls: not-a-filing-source banner (app.js renderHistoryBanner).
   Pinned above the (sticky) top bar so it never scrolls out of view; the top bar sits
   just below it while it is shown. */
#history-banner { position: sticky; top: 0; z-index: 6; }
#history-banner:empty { display: none; }
.history-banner { background: #7a1f1f; color: #fff; font-weight: 700; letter-spacing: .06em; text-align: center;
  height: 34px; line-height: 18px; padding: 8px 22px; box-sizing: border-box; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main:has(> #history-banner:not(:empty)) > .topbar { top: 34px; }
/* Tones: red = provisional / not a filing source; green = practice / training. Solid fills with white
   text (contrast about 10:1 red, 8:1 green), so they read the same on a light or a dark page; the
   tone is also in the text, never colour alone. One banner per company. */
.history-banner.banner-history { background: #7a1f1f; }
.history-banner.banner-practice { background: #1e5c34; }
/* Practice company: a green hue on the sidebar so it is never mistaken for the real books. */
body[data-company-tone="practice"] .sidebar { box-shadow: inset 6px 0 0 #2e8b57; }
body[data-company-tone="practice"] #company-tag { color: #8fe0ae; }
body[data-company-tone="practice"] #company-select { border-color: #2e8b57; box-shadow: 0 0 0 2px rgba(46,139,87,.35); }
body[data-company-tone="history"] .sidebar { box-shadow: inset 6px 0 0 #7a1f1f; }

/* Print */
#print-root { display: none; }
body.printing #app-root, body.printing #modal-root { display: none !important; }
body.printing #print-root { display: block; padding: 24px; }
@media print {
  #app-root, #modal-root { display: none !important; }
  #print-root { display: block !important; }
  body { background: #fff; }
}
.print-doc { max-width: 720px; margin: 0 auto; font-size: 13px; }
.print-doc .ph { display: flex; justify-content: space-between; margin-bottom: 22px; }
.print-doc h1 { font-size: 22px; letter-spacing: .04em; }
.print-doc table { margin-top: 14px; }
.print-doc th, .print-doc td { border-bottom: 1px solid #ccc; }
.print-doc .totals { margin-top: 14px; text-align: right; }
.print-doc .totals div { padding: 2px 0; }
.print-doc .grand { font-size: 16px; font-weight: 700; border-top: 2px solid #000; display: inline-block; padding-top: 4px; }

/* Payslips: one per page when printing */
.payslip { page-break-after: always; margin-bottom: 40px; }
.payslip table { margin-top: 10px; }

/* Product labels: compact sticker sheet (fits ~62mm label stock) */
.label-sheet { display: flex; flex-wrap: wrap; gap: 6px; }
.sticker { width: 62mm; border: 1px dashed #bbb; padding: 3mm; text-align: center;
  page-break-inside: avoid; background: #fff; }
.sticker .nm { font-weight: 700; font-size: 12px; line-height: 1.2; }
.sticker .pr { font-size: 14px; font-weight: 700; margin: 2px 0; }
.sticker .codes { display: flex; align-items: center; justify-content: center; gap: 6px; }
.sticker .codes svg { max-width: 100%; }
.sticker .sk { font-size: 11px; letter-spacing: .05em; font-weight: 600; }

@media (max-width: 780px) {
  .sidebar { display: none; }
  .form-grid, .form-grid.three { grid-template-columns: 1fr; }
}

/* clock myself in (hrm.js, 0041): big buttons that work on a phone */
.self-clock-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.self-clock-state { font-size: 15px; margin: 4px 0 10px; }
.self-clock-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.self-clock-btn { font-size: 17px; padding: 14px 24px; min-width: 150px; }
.self-clock-msg { margin-top: 10px; font-size: 14px; }
.self-clock-msg.ok { color: var(--ok, #2e7d32); font-weight: 600; }
.self-clock-msg.err { color: var(--danger, #c62828); font-weight: 600; }
@media (max-width: 640px) { .self-clock-btn { flex: 1 1 100%; min-height: 56px; } }

/* Theme: blue to gold (owner, 22 Oct 2026: "Put some colour hue on the headers and make them bold. Bluish to gold
   hues are great for the panels."). Screen only, and scoped to the app and its dialogs (#app-root, #modal-root):
   the printed layouts (#print-root, and a print preview shown inside a dialog) are unchanged. Colours only — no
   size or layout changes beyond a 1px thicker column-header rule.
   Contrast (WCAG 2.1): --fb-blue-900 text on white 15.4:1, on --fb-blue-100 13.4:1, on --fb-gold-100 13.9:1; white
   on --fb-blue-900 15.4:1; the sidebar text #C6D4E8 on --fb-blue-900 10.3:1 and its footer #9DB0CC 7.0:1. Gold is
   decoration only (strips, rules, the active-menu bar), never text. The app has no dark mode. */
:root {
  --fb-blue-900: #0b2545;   /* = the logo navy (--k-navy); was #0f2f57 */
  --fb-blue-600: #1f5fae;
  --fb-blue-100: #e8f0fb;
  --fb-gold-500: #c9a227;
  --fb-gold-100: #fbf3d9;
  --fb-strip: linear-gradient(90deg, var(--fb-blue-600) 0%, var(--fb-blue-600) 30%, var(--fb-gold-500) 100%);
}
@media screen {
  /* headers: bold, deep blue (an inline colour — e.g. the red "Danger zone" — still wins) */
  #app-root h1, #app-root h2, #app-root h3, #modal-root h1, #modal-root h2, #modal-root h3 { color: var(--fb-blue-900); font-weight: 700; }
  #app-root .form-section, #modal-root .form-section, #modal-root .lines-section-title { color: var(--fb-blue-900); font-weight: 700; }
  /* page titles: a short gold rule under the title (the module colour stays on the left) */
  #app-root .page-head h1 { padding-bottom: 3px;
    background: linear-gradient(90deg, var(--fb-gold-500), rgba(201,162,39,0)) left bottom / 140px 2px no-repeat; }
  /* top bar: a thin blue-to-gold rule along its bottom edge */
  #app-root .topbar { background: var(--fb-strip) left bottom / 100% 2px no-repeat, var(--panel); }
  /* column headers: bold deep blue on light blue, a soft gold rule below (solid, so a sticky header stays readable) */
  #app-root th, #modal-root th { color: var(--fb-blue-900); font-weight: 700; background: var(--fb-blue-100);
    border-bottom: 2px solid rgba(201,162,39,.55); }
  /* line editors (sales / purchase / POS lines) keep their plain, dense header row */
  #app-root .lines-table th, #modal-root .lines-table th { background: none; border-bottom: 1px solid var(--line); }
  /* report section rows: light gold */
  #app-root tr.section-row td, #modal-root tr.section-row td { background: var(--fb-gold-100); }
  /* panels: a blue-to-gold strip along the top edge; bodies stay white */
  #app-root .card, #modal-root .card, #app-root .tile { background: var(--fb-strip) left top / 100% 3px no-repeat, var(--panel); }
  /* dialogs: light blue to light gold header with the deep-blue bold title */
  #modal-root .modal-head { background: linear-gradient(90deg, var(--fb-blue-100), var(--fb-gold-100));
    border-bottom: 1px solid rgba(201,162,39,.45); border-radius: 10px 10px 0 0; }
  #modal-root .modal-close { color: var(--fb-blue-900); }
  /* sidebar: deep blue, gold bar on the active entry */
  #app-root .sidebar { background: var(--fb-blue-900); }
  #app-root .sidebar-foot { color: #9DB0CC; }
  #nav a.active { border-left-color: var(--fb-gold-500); background: rgba(201,162,39,.14); }
  /* the point of sale stays plain: no strips behind the sale lines */
  body[data-module="pos"] #app-root .card { background: var(--panel); }
  /* a print preview inside the app or a dialog (receipt after a sale, document preview) keeps the print look */
  #app-root .print-doc h1, #app-root .print-doc h2, #app-root .print-doc h3,
  #modal-root .print-doc h1, #modal-root .print-doc h2, #modal-root .print-doc h3 { color: inherit; }
  #app-root .print-doc th, #modal-root .print-doc th { color: var(--muted); background: #f7fafb; border-bottom: 1px solid #ccc; }
  #app-root .print-doc tr.section-row td, #modal-root .print-doc tr.section-row td { background: #eef3f1; }
}

/* Product name: Kamili Tax 360 (owner, 22 Oct 2026); logo V3. The mark and the wordmark come from views.js
   BRAND (kMark / kWordmark; index.html holds empty slots), both drawn as SVG paths by brand/make_brand.mjs:
   three arcs (navy, red, gold) around a heavy K, and one line of heavy capitals KAMIL (navy) ITAX (red)
   360 (gold). The wordmark SVG is role="img" with the accessible name "Kamili Tax 360"; the mark is
   aria-hidden. The colours are the logo's and the theme's (--fb-blue-900 = --k-navy, --fb-gold-500 = --k-gold).
   Contrast (WCAG 2.1): --k-navy on white 15.4:1; --k-red on white 5.9:1; on the navy sidebar white 15.4:1,
   --k-red-on-dark #ff4d63 4.8:1, --k-gold 6.4:1; the tagline grey on white 6.0:1. "360" in gold on white
   is 2.4:1: part of the logotype, which WCAG 1.4.3 exempts. */
:root {
  --k-navy: #0b2545;
  --k-red: #c8102e;
  --k-red-on-dark: #ff4d63;
  --k-gold: #c9a227;
  --k-grey: #5b6472;
}
.k-mark { display: block; flex: 0 0 auto; }
/* the wordmark is ~10.3 : 1; its height sets its size, the width follows */
.k-word { display: block; flex: 0 1 auto; height: .9em; width: auto; max-width: 100%; }
.k-logo { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 24px; }
.k-tagline { text-align: center; color: var(--k-grey); font-size: 13px; font-style: italic; margin: 8px 0 14px; }
.k-legal { font-size: 11px; line-height: 1.45; color: var(--muted); margin-top: 16px; text-align: left; }
.sidebar-foot .k-foot { display: block; margin-top: 8px; font-size: 10.5px; line-height: 1.35; color: #9DB0CC; }
/* the sidebar brand: the mark beside the one-line wordmark (fits the 216 px sidebar) */
.brand { gap: 10px; }
.brand .k-word { height: 13px; }
.topbar-brand .k-word { height: 15px; }
/* the name in the top bar on a phone (the sidebar is hidden below 780px) */
.topbar-brand { display: none; align-items: center; gap: 8px; font-size: 16px; }
@media (max-width: 780px) {
  .topbar { flex-wrap: wrap; gap: 8px; }
  .topbar-brand { display: flex; flex: 1 0 100%; }
}

/* web edition: online-backup chrome */
.cloud-status { font-size: 12px; align-self: center; margin-right: 4px; white-space: nowrap; }
#cloud-banner:empty { display: none; }
.cloud-banner-inner { background: #fdf3e3; border-bottom: 1px solid var(--line); padding: 10px 22px;
  font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }