:root {
  --bg: #f4f6f4; --surface: #ffffff; --surface-2: #eef2ef; --text: #111a15; --muted: #4f5c55;
  --border: #dbe2dd; --border-2: #c7d0ca; --primary: #0b6e4f; --primary-h: #095c42; --on-primary: #ffffff;
  --danger: #b42318; --warn: #a15c07; --ok: #067647; --info: #175cd3;
  --inc: #0b6e4f; --exp: #c4892b; --ring: rgba(11, 110, 79, .28);
  --shadow: 0 1px 2px rgba(16, 24, 20, .05), 0 1px 3px rgba(16, 24, 20, .07);
  --radius: 10px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Segoe UI Arabic", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1311; --surface: #151c19; --surface-2: #1c2521; --text: #e4ebe7; --muted: #92a299;
    --border: #28332e; --border-2: #36433d; --primary: #3fb98d; --primary-h: #5ccda3; --on-primary: #05241a;
    --danger: #f97066; --warn: #f5b84a; --ok: #4fd18f; --info: #84adff; --inc: #3fb98d; --exp: #e0a54a;
    --ring: rgba(63, 185, 141, .3); --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1311; --surface: #151c19; --surface-2: #1c2521; --text: #e4ebe7; --muted: #92a299;
  --border: #28332e; --border-2: #36433d; --primary: #3fb98d; --primary-h: #5ccda3; --on-primary: #05241a;
  --danger: #f97066; --warn: #f5b84a; --ok: #4fd18f; --info: #84adff; --inc: #3fb98d; --exp: #e0a54a;
  --ring: rgba(63, 185, 141, .3); --shadow: none; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 14.5px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 0 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.ok { color: var(--ok); } .err { color: var(--danger); } .warn { color: var(--warn); }
.mt { margin-top: 16px; } .mb { margin-bottom: 12px; }
.num, .r input, td.num { font-variant-numeric: tabular-nums; }
.r { text-align: right; }
.grow { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }

/* ------------ layout */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--surface); border-right: 1px solid var(--border); padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; gap: 10px; align-items: center; padding: 0 8px 14px; }
.logo { width: 34px; height: 34px; border-radius: 9px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.brand-name { font-weight: 700; }
.brand-sub { font-size: 11px; color: var(--muted); }
.co { display: block; margin: 0 4px 10px; padding: 10px; border-radius: 8px; background: var(--surface-2); color: var(--text); }
.co:hover { text-decoration: none; outline: 1px solid var(--border-2); }
#coName { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#coTrn { font-size: 11px; color: var(--muted); }
#nav a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--text); font-size: 14px; }
#nav a:hover { background: var(--surface-2); text-decoration: none; }
#nav a.active { background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary); font-weight: 600; }
.nav-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 14px 10px 4px; }
.nav-gap { height: 8px; }
main { padding: 24px 28px 64px; max-width: 1280px; width: 100%; min-width: 0; }
.topbar { display: none; }
.scrim { display: none; }

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 60; transform: translateX(-102%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .25); }
  body.nav-open .side { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 55; }
  .topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px 12px; }
  main { padding: 16px 16px 64px; }
  h1 { font-size: 19px; }
  .tbl td { white-space: nowrap; }
  .stmt td:first-child { white-space: normal; }
}

/* ------------ page furniture */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.back { display: inline-block; font-size: 12.5px; margin-bottom: 4px; color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; }
.card.flush { padding: 0; overflow: hidden; }
.card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-h.pad { padding: 14px 16px 0; }
.card-h h2 { margin-bottom: 10px; }
.welcome { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.welcome p { color: var(--muted); max-width: 640px; }
.notice { padding: 10px 14px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 14px; font-size: 13px; }
.notice.warn { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.notice.err { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.notice.ok-bg { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.hint { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.tag { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); margin-right: 4px; white-space: nowrap; }

.grid { display: grid; gap: 12px 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; }
@media (max-width: 860px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .span3 { grid-column: span 2; } }
@media (max-width: 560px) { .g2, .g4 { grid-template-columns: minmax(0, 1fr); } .span2, .span3 { grid-column: auto; } }

/* ------------ forms */
label { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }
label > input, label > select, label > textarea, label > .row { display: flex; margin-top: 4px; }
label > .row { color: var(--text); }
label > .muted { font-weight: 400; }
input, select, textarea { font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border-2); border-radius: 7px; padding: 7px 9px; width: 100%; min-width: 0; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
input[readonly] { background: var(--surface-2); }
input.r { text-align: right; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset:disabled input, fieldset:disabled select, fieldset:disabled textarea { background: var(--surface-2); color: var(--text); opacity: 1; }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-weight: 400; font-size: 13.5px; }
label.check { display: flex; }
label.check > input { width: auto; margin: 0; }
.checks { display: flex; flex-direction: column; gap: 6px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.form-actions.sticky { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 40%); padding: 18px 0 12px; margin: 0 0 8px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 13.5px; font-weight: 500; padding: 7px 13px; border-radius: 7px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:focus-visible, .icon-btn:focus-visible, .seg > *:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-h); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.btn.sm { padding: 4px 9px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.toolbar { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar input[type=search] { max-width: 320px; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; }
.seg.wrap { flex-wrap: wrap; display: flex; }
.seg > button, .seg > a { border: 0; background: transparent; font: inherit; font-size: 13px; padding: 5px 11px; border-radius: 6px; color: var(--muted); cursor: pointer; }
.seg > a:hover { text-decoration: none; color: var(--text); }
.seg > .on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }

/* ------------ tables */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: color-mix(in srgb, var(--text) 78%, var(--bg)); padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl tbody tr:last-child td { border-bottom-color: var(--border); }
.tbl tfoot td { font-weight: 600; background: var(--surface-2); }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.tbl td.empty { text-align: center; color: var(--muted); padding: 32px; }
.tbl.compact td { padding: 7px 4px; }
td.pos { color: var(--ok); }
.c-code { width: 80px; }

.lines-wrap { margin: 18px 0 10px; border: 1px solid var(--border); border-radius: 8px; }
.lines { min-width: 1080px; }
.lines td { padding: 5px 6px; }
.lines th { padding: 8px 6px; }
.lines input, .lines select { padding: 6px 7px; font-size: 13.5px; }
.c-item { width: 190px; }
.lines td .hint { margin: 2px 2px 0; white-space: nowrap; }
.lines.adj { min-width: 760px; }
[hidden] { display: none !important; }
.c-desc { min-width: 220px; } .c-acct { width: 190px; } .c-vat { width: 170px; } .c-n { width: 76px; } .c-p { width: 120px; }

.doc-foot { display: flex; gap: 24px; margin-top: 14px; align-items: flex-start; flex-wrap: wrap; }
.doc-foot .grow { display: flex; flex-direction: column; gap: 12px; min-width: 260px; }
.totals { min-width: 300px; margin-left: auto; }
.totals table { width: 100%; border-collapse: collapse; }
.totals td { padding: 5px 0; }
.totals td.num { text-align: right; padding-left: 16px; white-space: nowrap; }
.totals tr.grand td { font-weight: 700; font-size: 15px; border-top: 1px solid var(--border-2); padding-top: 8px; }
.totals tr.muted td { color: var(--muted); font-size: 13px; }

.badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; letter-spacing: 0; text-transform: none;
  background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
.b-paid, .b-applied { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.b-overdue { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.b-partial, .b-open { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.b-unpaid { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.b-void { text-decoration: line-through; }

/* ------------ dashboard */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); color: var(--text); display: block; }
a.kpi[href]:hover { text-decoration: none; border-color: var(--border-2); }
.kpi-l { font-size: 12px; color: var(--muted); }
.kpi-v { font-size: 21px; font-weight: 650; margin: 2px 0; letter-spacing: -.01em; }
.kpi-s { font-size: 11.5px; color: var(--muted); }
.dash { align-items: start; }
@media (max-width: 980px) { .dash { grid-template-columns: minmax(0, 1fr); } }
.legend { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.sw.inc, .bar.inc { background: var(--inc); }
.sw.exp, .bar.exp { background: var(--exp); }
.bars { display: flex; gap: 10px; height: 220px; align-items: stretch; padding-top: 8px; }
.bar-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bar-pair { flex: 1; display: flex; gap: 4px; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--border-2); }
.bar { width: 42%; max-width: 26px; border-radius: 4px 4px 0 0; min-height: 1px; }
.bar-l { text-align: center; font-size: 11.5px; color: var(--muted); padding-top: 6px; }
.info .lbl, .lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }

/* ------------ reports */
.controls { padding: 12px 16px; }
.controls input, .controls select { width: auto; }
.controls label.check { align-self: flex-end; padding-bottom: 8px; }
.controls label.check input { margin: 0; }
.report { padding: 22px; }
.rep-h { margin-bottom: 16px; }
.rep-h h2 { font-size: 19px; margin: 2px 0; }
.rep-co { font-size: 12.5px; color: var(--muted); }
.stmt { max-width: 720px; }
.stmt td { padding: 6px 10px; }
.stmt tr.h td { font-weight: 700; padding-top: 18px; border-bottom: 1px solid var(--border-2); background: transparent; }
.stmt tr.line td:first-child { padding-left: 22px; }
.stmt tr.sub td { font-weight: 600; }
.stmt tr.total td { font-weight: 700; border-top: 1px solid var(--border-2); background: var(--surface-2); }
.stmt tr.grand td { font-weight: 800; font-size: 15px; border-top: 2px solid var(--text); border-bottom: 3px double var(--text); }
.vat td.box, .vat th.box { width: 56px; font-weight: 600; }
.vat tr.total td { font-weight: 700; background: var(--surface-2); }
.vat tr.grand td { font-weight: 800; font-size: 15px; background: color-mix(in srgb, var(--primary) 10%, transparent); }
.gl-h { margin: 22px 0 8px; }
details summary { cursor: pointer; font-weight: 600; padding: 6px 0; }

/* ------------ modal & toast */
.modal-bg { position: fixed; inset: 0; background: rgba(10, 16, 13, .45); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; }
.modal-body { padding: 18px; }
#toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 200; max-width: calc(100vw - 36px); }
.toast { background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 8px; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); opacity: 0; transform: translateY(8px); transition: .2s; }
.toast.show { opacity: 1; transform: none; }
.toast.err { background: var(--danger); color: #fff; }
.hist { display: grid; gap: 12px; max-height: 65vh; overflow: auto; }
.hist-e { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.hist-e.hist-hi { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.hist-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.hist-h .grow { flex: 1; }
.hist-t td { vertical-align: top; overflow-wrap: anywhere; }
.hist-t td:first-child { white-space: nowrap; color: var(--muted); }
.hist-old { color: var(--danger); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.hist-new { color: var(--text); font-weight: 500; }
.ua-h { font-size: 16px; margin: 22px 0 4px; }
.ua-bar-h { width: 120px; }
.ua-bar { display: block; height: 8px; min-width: 2px; border-radius: 4px; background: var(--primary); }
.idle-warn { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); background: var(--text); color: var(--bg); padding: 10px 12px 10px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
@media print { .idle-warn { display: none; } }
.toast.warn { background: var(--warn); color: #fff; }

/* ------------ e-invoicing */
details.einv { margin-top: 18px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; background: var(--surface-2); }
details.einv[open] { padding-bottom: 16px; }
details.einv > summary { font-weight: 600; }
details.einv .grid { margin-top: 10px; }
.flags { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
.warn-btn { border-color: color-mix(in srgb, var(--warn) 60%, var(--border-2)); color: var(--warn); }
.kpi-v.small-v { font-size: 15px; word-break: break-all; }
.kpi-v.ok { color: var(--ok); } .kpi-v.err { color: var(--danger); }
.rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rules li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border-radius: 8px; }
.rules li.error { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.rules li.warn { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.rules li > span { font-weight: 700; }
.rules li.error > span { color: var(--danger); } .rules li.warn > span { color: var(--warn); }
.einv-tbl tr.grp td { background: var(--surface-2); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.einv-tbl tr.bad td { background: color-mix(in srgb, var(--danger) 6%, transparent); }
.einv-tbl td.val { max-width: 380px; word-break: break-word; font-variant-numeric: tabular-nums; }
.einv-tbl td { white-space: normal !important; }
.c-no { width: 40px; }
pre.xml { max-height: 480px; overflow: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 12px; line-height: 1.45; margin: 12px 0 0; }
a.badge:hover { text-decoration: none; filter: brightness(.95); }

/* ------------ printable tax invoice */
.print-bar { display: flex; gap: 8px; align-items: center; max-width: 840px; margin: 0 auto 14px; }
.print-bar .back { margin: 0; }
body.print-mode .side, body.print-mode .topbar { display: none; }
body.print-mode .app { grid-template-columns: minmax(0, 1fr); }
.sheet { position: relative; background: #fff; color: #1a1a1a; max-width: 840px; margin: 0 auto; padding: 40px 44px; border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); font-size: 12.5px; overflow-x: auto; }
.sheet .lbl { color: #666; }
.sh-top { display: flex; justify-content: space-between; gap: 24px; border-bottom: 3px solid #0b3a6f; padding-bottom: 16px; }
.sh-co { font-size: 18px; font-weight: 700; }
.sh-co-ar { font-size: 16px; font-weight: 600; }
.sh-trn { margin-top: 4px; }
.sh-title { text-align: right; }
.sh-title .en { font-size: 24px; font-weight: 800; color: #0b3a6f; text-transform: uppercase; letter-spacing: .02em; }
.sh-title .ar { font-size: 20px; font-weight: 700; color: #0b3a6f; }
.sh-mid { display: flex; justify-content: space-between; gap: 24px; margin: 18px 0; flex-wrap: wrap; }
.sh-pname { font-size: 15px; font-weight: 700; }
.sh-meta td { padding: 2px 0 2px 16px; vertical-align: top; }
.sh-meta td:first-child { color: #666; padding-left: 0; }
.sh-meta td:last-child { font-weight: 600; text-align: right; }
.ar-s { color: #888; font-size: 11px; }
.sh-lines { width: 100%; border-collapse: collapse; min-width: 560px; }
.sh-lines th { background: #0b3a6f; color: #fff; text-align: left; padding: 7px 8px; font-size: 11px; font-weight: 600; line-height: 1.3; }
.sh-lines th span { font-weight: 400; opacity: .85; }
.sh-lines td { padding: 8px; border-bottom: 1px solid #e3e3e3; }
.sh-lines .r { text-align: right; }
.sh-bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 18px; flex-wrap: wrap; }
.sh-words { flex: 1; min-width: 240px; }
.sh-tot { border-collapse: collapse; min-width: 300px; }
.sh-tot td { padding: 5px 0; }
.sh-tot td:last-child { text-align: right; padding-left: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-tot tr.grand td { font-weight: 800; font-size: 14px; border-top: 2px solid #1a1a1a; padding-top: 8px; }
.sh-foot { margin-top: 32px; padding-top: 10px; border-top: 1px solid #e3e3e3; color: #888; font-size: 11px; text-align: center; }
.void-mark { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-20deg); font-size: 120px; font-weight: 900; color: rgba(180, 35, 24, .15); pointer-events: none; }

@media print {
  :root { --bg: #fff; --surface: #fff; --surface-2: #f3f3f3; --text: #000; --muted: #555; --border: #ccc; --border-2: #999; --shadow: none; color-scheme: light; }
  @page { size: A4; margin: 12mm; }
  body { background: #fff; color: #000; font-size: 12px; }
  .side, .topbar, .no-print, .page-head .actions, .print-bar, #toasts, .form-actions, .scrim { display: none !important; }
  .app { display: block; }
  main { padding: 0; max-width: none; }
  .card { border: 0; box-shadow: none; padding: 0; }
  .sheet { border: 0; box-shadow: none; padding: 0; max-width: none; }
  .sh-lines th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tbl tr.click:hover td { background: none; }
  a { color: inherit; }
}

/* ------------ jobs, classes, quotations, reconciliation */
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cols2 > .card { margin-bottom: 0; }
@media (max-width: 1180px) { .cols2 { grid-template-columns: minmax(0, 1fr); } }
.cols2 + .card, .cols2 + .cols2 { margin-top: 16px; }
.g1 { grid-template-columns: minmax(0, 1fr); }
.span4 { grid-column: 1 / -1; }
.info .lbl, .gp .lbl { font-size: 12px; color: var(--muted); }
.card-sub { border-top: 1px solid var(--border); padding-top: 14px; }
.neg { color: var(--danger); }
.meter { height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin: 6px 0 2px; min-width: 90px; }
.meter > span { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.meter.over > span { background: var(--danger); }
.c-bar { width: 170px; }
.gp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gp b { font-size: 17px; }
table.mini { width: 100%; border-collapse: collapse; }
table.mini td { padding: 7px 4px; border-bottom: 1px solid var(--border); }
table.mini tr.click { cursor: pointer; }
table.mini tr.click:hover td { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.tbl.rec td.c-chk { width: 36px; }
.tbl.rec input[type=checkbox], .tbl input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); }
.rec-sum .kpi-v.ok { color: var(--ok); }
.tbl.lines.jl { min-width: 980px; }
.card-h.pad .check { margin: 0; }

/* ------------ Sage-style reports: grouped menu and statements */
.rep-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 14px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow); }
.rep-grp { min-width: 0; }
.rep-gh { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); padding: 2px 6px 2px; }
.rep-grp a { display: block; padding: 2px 6px; border-radius: 5px; color: var(--text); font-size: 13px; }
.rep-grp a:hover { background: var(--surface-2); text-decoration: none; }
.rep-grp a.on { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.report { font-size: 15px; }
.report .rep-h { text-align: center; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 2px solid var(--text); }
.report .rep-h h2 { font-size: 22px; margin: 4px 0; letter-spacing: -.01em; }
.report .rep-co { font-weight: 700; font-size: 15px; }
.stmt { max-width: 860px; margin: 0 auto; }
.stmt.multi { max-width: none; }
.stmt thead th { font-size: 12.5px; text-align: right; border-bottom: 2px solid var(--text); background: transparent; }
.stmt td { padding: 7px 12px; font-size: 15px; }
.stmt tr.h td { color: var(--primary); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; background: color-mix(in srgb, var(--primary) 7%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
.stmt tr.line:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.stmt tr.line a { color: var(--text); }
.stmt tr.line a:hover { color: var(--primary); }
.stmt tr.grand td { background: color-mix(in srgb, var(--primary) 9%, transparent); font-size: 16px; }
.stmt tr.ratio td { font-size: 13px; font-style: italic; color: var(--muted); border-bottom: 0; }
.stmt td.pct { font-size: 12.5px; color: var(--muted); width: 70px; }
.stmt td.neg, .tbl td.neg { color: var(--danger); }
.tbl.daybook td, .tbl.audit td { padding: 7px 10px; font-size: 13.5px; white-space: nowrap; }
.tbl.daybook td.wrap, .tbl.audit td.wrap { white-space: normal; min-width: 180px; }
.tbl.audit tr.first td { border-top: 2px solid var(--border-2); }
.tbl.daybook tfoot td, .tbl.audit tfoot td { font-size: 14px; border-top: 2px solid var(--text); }
@media (max-width: 860px) {
  .cols2, .gp { grid-template-columns: minmax(0, 1fr); }
  .rep-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stmt td { font-size: 14px; padding: 6px 8px; }
}
@media print {
  .rep-menu { display: none; }
  .stmt tr.h td, .stmt tr.grand td, .stmt tr.line:nth-child(even) td { background: none !important; }
}

/* =====================================================================
   v2 shell: dark sidebar with icons, sticky header with search and "+ New",
   command palette, dashboard widgets, money bar, using
   common layout conventions for business software.
   ===================================================================== */
:root {
  --side-bg: #0f2a22; --side-fg: #b8cbc2; --side-muted: #6f8e82; --side-hover: rgba(255, 255, 255, .07);
  --side-active: rgba(92, 205, 163, .16); --side-accent: #5ccda3; --side-line: rgba(255, 255, 255, .08);
  --net: #3b5bab; --hdr-bg: rgba(255, 255, 255, .88);
  --shadow-lg: 0 18px 50px -12px rgba(16, 40, 30, .28), 0 4px 12px rgba(16, 40, 30, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --side-bg: #0a1210; --side-fg: #a9bab2; --side-muted: #5f746b; --side-hover: rgba(255, 255, 255, .06);
    --side-active: rgba(63, 185, 141, .18); --side-accent: #5ccda3; --side-line: rgba(255, 255, 255, .07);
    --net: #8fb0ff; --hdr-bg: rgba(21, 28, 25, .88); --shadow-lg: 0 18px 50px -12px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  --side-bg: #0a1210; --side-fg: #a9bab2; --side-muted: #5f746b; --side-hover: rgba(255, 255, 255, .06);
  --side-active: rgba(63, 185, 141, .18); --side-accent: #5ccda3; --side-line: rgba(255, 255, 255, .07);
  --net: #8fb0ff; --hdr-bg: rgba(21, 28, 25, .88); --shadow-lg: 0 18px 50px -12px rgba(0, 0, 0, .7);
}

body { font-size: 14px; }
.ico-svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico { display: inline-flex; }
kbd { display: inline-block; font: 600 10.5px/1 var(--font); padding: 3px 5px; border-radius: 4px; border: 1px solid var(--border-2); border-bottom-width: 2px; background: var(--surface); color: var(--muted); min-width: 18px; text-align: center; }

/* layout */
.app { grid-template-columns: 244px minmax(0, 1fr); }
.content { min-width: 0; display: flex; flex-direction: column; }
main { margin: 0 auto; max-width: 1400px; padding: 22px 28px 64px; }

/* sidebar */
.side { background: var(--side-bg); color: var(--side-fg); border-right: 0; padding: 14px 10px 10px; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--side-line) transparent; }
.kpi2 .kpi-v { overflow: hidden; text-overflow: ellipsis; }
.side .brand { padding: 2px 8px 14px; border-bottom: 1px solid var(--side-line); margin-bottom: 4px; }
.side .logo { background: #fff; color: #0b3a6f; border-radius: 9px; }
.side .brand-name { color: #fff; font-size: 15px; }
.side .brand-sub { color: var(--side-muted); }
#nav { flex: 1; }
#nav a { display: flex; align-items: center; gap: 11px; padding: 7px 10px; margin: 1px 0; border-radius: 8px; color: var(--side-fg); font-size: 13.5px; white-space: nowrap; }
#nav a span { overflow: hidden; text-overflow: ellipsis; }
#nav a .ico-svg { color: var(--side-muted); }
#nav a:hover { background: var(--side-hover); color: #fff; text-decoration: none; }
#nav a:hover .ico-svg { color: var(--side-fg); }
#nav a.active { background: var(--side-active); color: #fff; font-weight: 600; }
#nav a.active .ico-svg { color: var(--side-accent); }
#nav a:focus-visible { outline: 2px solid var(--side-accent); outline-offset: -2px; }
.nav-h { color: var(--side-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; padding: 14px 10px 4px; }
.side-collapse { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border: 0; border-top: 1px solid var(--side-line); background: none; color: var(--side-muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.side-collapse:hover { color: #fff; }
@media (min-width: 861px) {
  body.side-mini .app { grid-template-columns: 68px minmax(0, 1fr); }
  body.side-mini .brand-txt, body.side-mini #nav a span, body.side-mini .side-collapse span { display: none; }
  body.side-mini .side .brand { justify-content: center; padding-inline: 0; }
  body.side-mini #nav a { justify-content: center; padding: 9px 0; }
  body.side-mini .nav-h { font-size: 0; padding: 8px 0 4px; margin: 0 12px; border-top: 1px solid var(--side-line); }
  body.side-mini .nav-gap { height: 4px; }
  body.side-mini .side-collapse { justify-content: center; }
  body.side-mini .side-collapse .ico-svg { transform: rotate(180deg); }
}

/* header */
.hdr { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 28px; background: var(--hdr-bg); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); }
.hdr-menu { display: none; }
.search-trigger { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 13.5px; cursor: text; text-align: left; min-width: 0; }
.search-trigger:hover { border-color: var(--border-2); }
.search-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.search-trigger .st-txt { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hdr-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hdr .btn.primary { height: 36px; padding: 0 14px; }
.hdr-ico { width: 36px; height: 36px; display: grid; place-items: center; }
.co-chip { display: flex; align-items: center; gap: 10px; padding: 3px 12px 3px 3px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); background: var(--surface); }
.co-chip:hover { text-decoration: none; border-color: var(--border-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.co-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
#coName { font-size: 13px; font-weight: 600; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#coTrn { font-size: 11px; color: var(--muted); }

/* + New menu */
.qc { position: relative; }
.qc-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; width: min(760px, calc(100vw - 32px)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); }
.qc-h { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 2px 8px 6px; }
.qc-col button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.qc-col button .ico-svg { color: var(--primary); }
.qc-col button:hover, .qc-col button:focus-visible { background: var(--surface-2); outline: none; }
.qc-col button kbd { margin-left: auto; }

/* command palette */
.cmdk-bg { place-items: start center; padding-top: 11vh; }
.cmdk { width: min(660px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--muted); }
.cmdk-in input { border: 0; box-shadow: none !important; background: transparent; font-size: 16px; padding: 4px 0; }
.cmdk-list { max-height: min(58vh, 520px); overflow-y: auto; padding: 6px; }
.cmdk-g { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.cmdk-item .ico-svg { color: var(--muted); }
.cmdk-item.on { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.cmdk-item.on .ico-svg { color: var(--primary); }
.ci-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ci-s { margin-left: auto; padding-left: 12px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.cmdk-empty { padding: 28px; text-align: center; color: var(--muted); }
.cmdk-foot { display: flex; gap: 18px; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); background: var(--surface-2); }
.cmdk-foot span:last-child { margin-left: auto; }
.cmdk-foot kbd { margin-right: 3px; }
.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.keys-t td { padding: 6px 4px; font-size: 13px; }
.keys-t td:first-child { white-space: nowrap; width: 1%; padding-right: 14px; }
.keys-t tr.kh td { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 0; padding-top: 12px; }

/* general refresh */
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.page-head { margin-bottom: 20px; }
.card { border-radius: 12px; }
.btn { border-radius: 8px; padding: 7px 14px; }
.btn .ico-svg { width: 16px; height: 16px; }
.tbl th { background: var(--surface); color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; border-bottom: 1px solid var(--border-2); padding: 11px 12px; }
.tbl td { padding: 11px 12px; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.tbl tfoot td { background: var(--surface-2); }
.seg { border-radius: 9px; }
.seg .cnt { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }
.seg .on .cnt { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.toolbar input[type=search] { max-width: 340px; padding-left: 12px; }
.badge { font-size: 11.5px; padding: 2px 9px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }

/* money bar (sales & purchases) */
.mbar { padding: 12px 14px 14px; }
.mb-segs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mb-seg { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.mb-seg:hover { background: var(--surface-2); }
.mb-l { font-size: 12px; color: var(--muted); font-weight: 600; }
.mb-v { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.mb-n { font-size: 12px; color: var(--muted); }
.mb-seg.od .mb-v { color: var(--danger); }
.mb-seg.soon .mb-v { color: var(--warn); }
.mb-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--surface-2); margin-top: 10px; }
.mb-bar span { display: block; height: 100%; }
.mb-bar .od { background: var(--danger); }
.mb-bar .soon { background: var(--warn); }
.mb-bar .later { background: var(--info); }

/* dashboard */
.dash-head h1 { font-size: 26px; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi2 { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); color: var(--text); min-width: 0; }
.kpi2:hover { text-decoration: none; border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.kpi2 > div { min-width: 0; }
.kpi2 .kpi-v { font-size: 22px; }
.kpi2 .kpi-s { font-size: 12px; }
.kpi2.neg-k .kpi-v { color: var(--danger); }
.k-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.dash2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dash2 > .card { margin: 0; min-width: 0; }
.w8 { grid-column: span 8; } .w6 { grid-column: span 6; } .w4 { grid-column: span 4; }
@media (max-width: 1180px) { .w8, .w4 { grid-column: span 12; } }
@media (max-width: 900px) { .w6 { grid-column: span 12; } }
.legend .sw.net { background: var(--net); border-radius: 50%; }
.chart-wrap { overflow-x: auto; margin-top: 6px; }
.chart { width: 100%; height: auto; min-width: 480px; display: block; }
.chart .grid { stroke: var(--border); stroke-dasharray: 3 4; }
.chart .axis { stroke: var(--border-2); }
.chart .tick { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .tick.now { fill: var(--text); font-weight: 700; }
.chart .b-inc { fill: var(--inc); }
.chart .b-exp { fill: var(--exp); }
.chart .l-net { fill: none; stroke: var(--net); stroke-width: 2; stroke-linejoin: round; }
.chart .d-net { fill: var(--surface); stroke: var(--net); stroke-width: 2; }
.pl-row { margin-bottom: 11px; }
.pl-l { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; margin-bottom: 4px; }
.pl-row.strong .pl-l { font-weight: 700; }
.pl-bar { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pl-bar span { display: block; height: 100%; border-radius: 99px; }
.p-rev { background: var(--inc); } .p-cost { background: var(--exp); } .p-gp { background: var(--primary); } .p-net { background: var(--net); } .p-neg { background: var(--danger); }
.pl-ratios { display: flex; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.pl-ratios b { color: var(--text); }
.ag-top { display: flex; justify-content: space-between; gap: 12px; margin-top: 2px; }
.big { font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.ag-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--surface-2); margin: 14px 0 12px; gap: 2px; }
.ag-bar span { display: block; height: 100%; }
.a0 { background: var(--inc); } .a1 { background: color-mix(in srgb, var(--warn) 60%, var(--surface)); } .a2 { background: var(--warn); }
.a3 { background: color-mix(in srgb, var(--danger) 70%, var(--surface)); } .a4 { background: var(--danger); }
.ag-leg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ag-leg a { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 8px; color: var(--text); font-size: 12px; min-width: 0; }
.ag-leg a:hover { background: var(--surface-2); text-decoration: none; }
.ag-leg i { display: block; width: 18px; height: 4px; border-radius: 99px; margin-bottom: 4px; }
.ag-leg span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-leg b { font-size: 13px; }
.todo { display: flex; flex-direction: column; gap: 8px; }
.td { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); }
.td:hover { text-decoration: none; background: var(--surface-2); }
.td-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.td.err .td-ico { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.td.warn .td-ico { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.td.info .td-ico { background: color-mix(in srgb, var(--info) 13%, transparent); color: var(--info); }
.td-t { display: flex; flex-direction: column; min-width: 0; }
.td-t span { font-size: 12.5px; color: var(--muted); }
.td-go { margin-left: auto; color: var(--muted); }
.all-clear { display: flex; align-items: center; gap: 12px; padding: 18px 4px; }
.all-clear .ico-svg { width: 30px; height: 30px; color: var(--ok); }
.bank-t tr.tot td { border-top: 2px solid var(--border-2); border-bottom: 0; }
.steps { margin: 4px 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

/* mobile */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .hdr { padding: 0 12px; gap: 8px; height: 56px; }
  .hdr-menu { display: grid; place-items: center; width: 36px; height: 36px; font-size: 20px; }
  .search-trigger kbd, .co-txt, .hdr-ico { display: none; }
  .co-chip { padding: 2px; }
  .side-collapse { display: none; }
  main { padding: 16px 16px 64px; }
  .mb-segs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qc-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); position: fixed; top: 64px; right: 16px; }
  .ag-leg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .keys { grid-template-columns: minmax(0, 1fr); }
  .cmdk-foot span:last-child { display: none; }
}
@media (max-width: 560px) {
  .nb-txt { display: none; }
  .search-trigger .st-txt { font-size: 13px; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi2 { flex-direction: column; gap: 8px; padding: 12px; }
  .kpi2 .kpi-v { font-size: 18px; }
  .k-ico { width: 32px; height: 32px; }
}

body.print-mode .hdr { display: none; }
@media print { .hdr, .qc-menu { display: none !important; } }

/* =====================================================================
   v2 document editor (invoices, credit notes, bills, debit notes, quotations)
   ===================================================================== */
.doc-form fieldset { display: flex; flex-direction: column; gap: 16px; }
.doc-form .card { margin: 0; }
.req { color: var(--danger); }
.doc-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 1.3fr; gap: 16px; align-items: center; padding: 14px 18px; }
.doc-strip b { font-size: 16px; }
.doc-strip .lbl { margin-bottom: 2px; }
.ds-meter .meter { margin: 0 0 4px; height: 8px; }

.doc-card { padding: 0; overflow: hidden; }
.doc-band { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), var(--surface) 70%); flex-wrap: wrap; }
.doc-id { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.doc-kind { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.doc-no { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.doc-amt { text-align: right; }
.doc-amt .lbl { display: block; }
.doc-amt b { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.doc-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; padding: 20px; }
.party { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.party-sel { font-size: 15px; font-weight: 600; padding: 9px 11px; }
.party-card { border: 1px dashed var(--border-2); border-radius: 10px; padding: 12px 14px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; min-height: 64px; }
.pc-empty { color: var(--muted); margin: auto 0; }
.pc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-name { font-weight: 700; font-size: 14px; color: var(--text); }
.pc-line { color: var(--muted); }
.pc-bal { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; }
.pc-bal span { color: var(--muted); }
.pc-warn { margin-top: 4px; padding: 6px 10px; border-radius: 7px; font-size: 12.5px; background: color-mix(in srgb, var(--warn) 12%, var(--surface)); color: var(--text); }
.meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-content: start; }
.doc-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 16px; padding: 14px 20px 18px; border-top: 1px solid var(--border); background: var(--surface-2); }
.doc-opts input, .doc-opts select { background: var(--surface); }

.doc-lines { padding: 18px 20px; }
.doc-lines .lines-wrap { margin: 6px 0 10px; }
.tbl.lines.v2 { min-width: 960px; }
.tbl.lines.v2 th { background: var(--surface-2); }
.tbl.lines.v2 td { vertical-align: top; padding: 8px 6px; }
.tbl.lines.v2 tbody tr:hover td { background: transparent; }
.tbl.lines.v2 tbody tr:focus-within td { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.tbl.lines.v2 .c-no { width: 34px; text-align: center; padding-top: 16px; font-size: 12px; }
.tbl.lines.v2 .c-itemdesc { min-width: 260px; }
.tbl.lines.v2 .c-itemdesc select { margin-bottom: 6px; font-weight: 600; }
.tbl.lines.v2 textarea { resize: none; min-height: 34px; line-height: 1.4; font-size: 13.5px; padding: 6px 8px; overflow: hidden; }
.tbl.lines.v2 .c-acct { width: 180px; }
.tbl.lines.v2 .c-n { width: 76px; } .tbl.lines.v2 .c-p { width: 110px; } .tbl.lines.v2 .c-d { width: 70px; }
.tbl.lines.v2 .c-vat { width: 180px; }
.tbl.lines.v2 td .hint { margin: 4px 2px 0; white-space: nowrap; }
.tbl.lines.v2 .c-amt { width: 120px; font-weight: 600; padding-top: 16px; padding-right: 10px; }
.tbl.lines.v2 .c-act { width: 64px; white-space: nowrap; padding-top: 10px; }
.tbl.lines.v2 .c-act .icon-btn { width: 26px; height: 26px; font-size: 15px; }
.stock-hint { color: var(--primary); }
.lines-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lines-actions .small { margin-left: 6px; }
.doc-lines .doc-foot { margin-top: 18px; gap: 28px; }
.doc-lines .totals { min-width: 340px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.totals tr.vrow td { font-size: 12.5px; color: var(--muted); padding: 2px 0; }
.totals tr.sub td { border-top: 1px dashed var(--border-2); padding-top: 7px; }
.totals tr.grand td { font-size: 17px; }
.totals tr.grand.due td { color: var(--primary); }

.doc-actions { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 16px 0 0; padding: 12px 18px; background: var(--hdr-bg); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
.da-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.da-total b { font-size: 18px; }
.da-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-form details.einv { margin-top: 0; background: var(--surface); border-radius: 12px; padding: 14px 20px; box-shadow: var(--shadow); }

@media (max-width: 980px) {
  .doc-top { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .doc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-meter { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .doc-top, .doc-lines { padding: 14px; }
  .doc-band, .doc-opts { padding-left: 14px; padding-right: 14px; }
  .meta { grid-template-columns: minmax(0, 1fr); }
  .doc-amt { text-align: left; width: 100%; display: flex; align-items: baseline; gap: 10px; }
  .doc-amt .lbl { display: inline; }
  .doc-lines .totals { min-width: 0; width: 100%; }
  .doc-actions { padding: 10px 12px; }
  .da-btns { width: 100%; } .da-btns .btn { flex: 1; }
}
@media print { .doc-actions { display: none !important; } }

/* =====================================================================
   v3 compact density: compact left panel, tighter detail panels and
   frosted (backdrop) menus, so most work fits on one screen.
   ===================================================================== */
:root { --glass: rgba(255, 255, 255, .72); --glass-line: rgba(255, 255, 255, .55); --scrim: rgba(12, 28, 22, .32); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass: rgba(24, 33, 29, .72); --glass-line: rgba(255, 255, 255, .08); --scrim: rgba(0, 0, 0, .5); } }
:root[data-theme="dark"] { --glass: rgba(24, 33, 29, .72); --glass-line: rgba(255, 255, 255, .08); --scrim: rgba(0, 0, 0, .5); }

body { font-size: 13.5px; line-height: 1.45; }

/* compact left panel */
.app { grid-template-columns: 208px minmax(0, 1fr); }
.side { padding: 10px 8px 6px;
  background:
    radial-gradient(120% 50% at 0% 0%, rgba(96, 165, 250, .22), transparent 60%),
    radial-gradient(90% 40% at 100% 100%, rgba(56, 189, 248, .12), transparent 65%),
    var(--side-bg); }
.side .brand { gap: 8px; padding: 0 6px 10px; margin-bottom: 2px; }
.side .logo { width: 28px; height: 28px; font-size: 11px; border-radius: 8px; }
.side .brand-name { font-size: 14px; }
.side .brand-sub { font-size: 10px; }
#nav a { gap: 9px; padding: 5px 9px; margin: 0; font-size: 13px; border-radius: 7px; }
#nav a .ico-svg { width: 16px; height: 16px; }
.nav-h { font-size: 9.5px; padding: 9px 9px 2px; }
.nav-gap { height: 4px; }
.side-collapse { padding: 6px 9px; margin-top: 4px; font-size: 12px; }
@media (min-width: 861px) {
  body.side-mini .app { grid-template-columns: 56px minmax(0, 1fr); }
  body.side-mini #nav a { padding: 7px 0; }
}

/* frosted header, menus and drawers */
.hdr { height: 52px; padding: 0 20px; gap: 12px; background: var(--glass); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
.search-trigger { height: 34px; }
.hdr .btn.primary { height: 32px; }
.hdr-ico { width: 32px; height: 32px; }
.avatar { width: 28px; height: 28px; font-size: 11px; }
.qc-menu, .cmdk, .modal { background: var(--glass); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-color: var(--glass-line); }
.cmdk-foot { background: transparent; }
.modal-bg { background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (max-width: 860px) {
  .side { box-shadow: 0 0 60px rgba(0, 0, 0, .35); }
  body.nav-open .scrim { background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .qc-menu, .cmdk, .modal { background: var(--surface); }
}

/* compact page furniture */
main { padding: 14px 20px 40px; }
h1 { font-size: 20px; }
.page-head { margin-bottom: 12px; align-items: center; }
.back { margin-bottom: 0; font-size: 12px; }
.card { padding: 14px; margin-bottom: 12px; border-radius: 10px; }
.card-h h2, h2 { font-size: 15px; margin-bottom: 8px; }
.grid { gap: 8px 12px; }
label { font-size: 12px; }
label > input, label > select, label > textarea, label > .row { margin-top: 3px; }
input, select, textarea { padding: 5px 8px; font-size: 13.5px; border-radius: 6px; }
.btn { padding: 5px 11px; font-size: 13px; border-radius: 7px; }
.btn.sm { padding: 3px 8px; font-size: 12px; }
.toolbar { margin-bottom: 8px; }
.seg > button, .seg > a { padding: 4px 10px; }
.tbl th { padding: 8px 10px; font-size: 11px; }
.tbl td { padding: 7px 10px; }
.notice { padding: 8px 12px; margin-bottom: 10px; }
.form-actions { margin-top: 12px; }
.kpis { gap: 10px; margin-bottom: 12px; }
.kpi { padding: 10px 12px; }
.kpi-v { font-size: 18px; }

/* dashboard */
.dash-head h1 { font-size: 21px; }
.kpi-row { gap: 10px; margin-bottom: 12px; }
.kpi2 { padding: 11px 12px; gap: 10px; border-radius: 10px; }
.kpi2 .kpi-v { font-size: 18px; }
.k-ico { width: 32px; height: 32px; border-radius: 8px; }
.dash2 { gap: 12px; }
.chart { max-height: 230px; }
.td { padding: 7px 10px; }
.td-ico { width: 28px; height: 28px; }
.todo { gap: 6px; }
.ag-bar { margin: 10px 0 8px; }
.mbar { padding: 8px 10px 10px; }
.mb-v { font-size: 16px; }

/* document editor: detail panel */
.doc-form fieldset { gap: 12px; }
.doc-strip { padding: 10px 14px; gap: 12px; }
.doc-strip b { font-size: 14.5px; }
.doc-band { padding: 9px 16px; }
.doc-no { font-size: 17px; }
.doc-amt b { font-size: 18px; }
.doc-top { padding: 12px 16px; gap: 20px; }
.party { gap: 8px; }
.party-sel { font-size: 14px; padding: 6px 9px; }
.party-card { padding: 8px 12px; min-height: 0; gap: 2px; font-size: 12.5px; }
.pc-bal { margin-top: 4px; padding-top: 5px; }
.meta { gap: 8px 12px; }
.doc-opts { padding: 10px 16px 12px; gap: 8px 12px; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
.doc-lines { padding: 12px 16px; }
.tbl.lines.v2 td { padding: 5px 5px; }
.tbl.lines.v2 .c-no, .tbl.lines.v2 .c-amt { padding-top: 11px; }
.tbl.lines.v2 .c-act { padding-top: 6px; }
.tbl.lines.v2 .c-itemdesc select { margin-bottom: 4px; }
.tbl.lines.v2 textarea { min-height: 30px; padding: 5px 8px; }
.doc-lines .doc-foot { margin-top: 10px; gap: 20px; }
.doc-lines .totals { padding: 10px 14px; }
.totals td { padding: 3px 0; }
.doc-actions { margin-top: 10px; padding: 8px 14px; background: var(--glass); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
.da-total b { font-size: 16px; }
.doc-form details.einv { padding: 10px 16px; }

/* reports */
.rep-menu { padding: 8px 10px; margin-bottom: 10px; }
.report { padding: 16px; }
.stmt td { padding: 5px 10px; font-size: 14px; }
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .hdr { padding: 0 10px; height: 50px; }
  main { padding: 12px 12px 40px; }
}
#nav a { padding: 4px 9px; }
.doc-band { padding: 7px 16px; }
.doc-amt .lbl { display: none; }
.doc-form textarea[name=notes] { min-height: 52px; height: 52px; }
@media (min-width: 1280px) { .doc-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .meta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =====================================================================
   v4 brand palette (matches the CRM):
   deep navy actions, ocean-blue sidebar, light blue fields, red logo accent.
   ===================================================================== */
:root {
  --bg: #f2f5fa; --surface: #ffffff; --surface-2: #eef3fa; --text: #0f1b2d; --muted: #566377;
  --border: #dbe3ee; --border-2: #c4d0e0; --primary: #0b3a6f; --primary-h: #072a52; --on-primary: #ffffff;
  --info: #0b8a60; --inc: #1e56b0; --exp: #5db6ea; --net: #e0962a; --ring: rgba(11, 58, 111, .22);
  --brand-red: #d71f26; --field: #f4f8fe;
  --side-bg: #0a2557; --side-fg: #c6d4ec; --side-muted: #7f95ba; --side-hover: rgba(255, 255, 255, .08);
  --side-active: rgba(110, 176, 255, .2); --side-accent: #7cc0ff; --side-line: rgba(255, 255, 255, .09);
  --glass: rgba(255, 255, 255, .74); --hdr-bg: rgba(255, 255, 255, .8); --scrim: rgba(8, 24, 54, .35);
  --shadow: 0 1px 2px rgba(15, 30, 60, .05), 0 1px 3px rgba(15, 30, 60, .07);
  --shadow-lg: 0 18px 50px -12px rgba(10, 37, 87, .3), 0 4px 12px rgba(10, 37, 87, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a101b; --surface: #111a29; --surface-2: #172237; --text: #e3ebf7; --muted: #94a4be;
    --border: #23314a; --border-2: #31425f; --primary: #6aa5ff; --primary-h: #8bbaff; --on-primary: #061833;
    --info: #84b4ff; --inc: #5b9cff; --exp: #7dd3fc; --net: #f5b54a; --ring: rgba(106, 165, 255, .3);
    --brand-red: #ff5a5f; --field: #142036;
    --side-bg: #060e1e; --side-fg: #b3c3dd; --side-muted: #6a7fa3; --side-active: rgba(106, 165, 255, .2); --side-accent: #8cc8ff;
    --glass: rgba(17, 26, 41, .74); --hdr-bg: rgba(17, 26, 41, .8); --scrim: rgba(0, 0, 0, .55); --shadow: none;
    --shadow-lg: 0 18px 50px -12px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a101b; --surface: #111a29; --surface-2: #172237; --text: #e3ebf7; --muted: #94a4be;
  --border: #23314a; --border-2: #31425f; --primary: #6aa5ff; --primary-h: #8bbaff; --on-primary: #061833;
  --info: #84b4ff; --inc: #5b9cff; --exp: #7dd3fc; --net: #f5b54a; --ring: rgba(106, 165, 255, .3);
  --brand-red: #ff5a5f; --field: #142036;
  --side-bg: #060e1e; --side-fg: #b3c3dd; --side-muted: #6a7fa3; --side-active: rgba(106, 165, 255, .2); --side-accent: #8cc8ff;
  --glass: rgba(17, 26, 41, .74); --hdr-bg: rgba(17, 26, 41, .8); --scrim: rgba(0, 0, 0, .55); --shadow: none;
  --shadow-lg: 0 18px 50px -12px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
input, select, textarea { background: var(--field); }
input[readonly] { background: var(--surface-2); }
.side { background:
    radial-gradient(130% 45% at 0% 0%, rgba(96, 165, 250, .28), transparent 60%),
    radial-gradient(100% 35% at 100% 55%, rgba(56, 189, 248, .14), transparent 65%),
    radial-gradient(120% 40% at 20% 100%, rgba(30, 86, 176, .45), transparent 70%),
    var(--side-bg); }
.side .logo { background: #fff; padding: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.side .logo svg { width: 100%; height: 100%; display: block; }
.btn.primary { box-shadow: 0 1px 2px rgba(11, 58, 111, .25); }
.doc-band { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 10%, var(--surface)), var(--surface) 70%); }
.hdr-user { display: flex; align-items: center; gap: 4px; }

/* ------------ sign-in page */
body.locked .app { display: none; }
body.locked .modal-bg { z-index: 600; }
body.locked #toasts { z-index: 700; }
#login { position: fixed; inset: 0; z-index: 500; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #f2f6f9; color: #0f1b2d; overflow: auto; color-scheme: light; font-size: 14px; }
#login[hidden] { display: none !important; }
.lg-left { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 48px max(24px, 4vw); color: #fff; text-align: center; background-color: #0a2d57; background-size: cover; background-position: center; overflow: hidden; min-height: 100%; }
.lg-left::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 22, 52, .35), rgba(6, 22, 52, .05) 45%, rgba(6, 22, 52, .35)); pointer-events: none; }
.lg-left > * { position: relative; z-index: 1; }
.lg-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .18em; opacity: .9; }
.lg-title { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.02em; margin: 4px 0 10px; }
.lg-sub { max-width: 470px; margin: 0 auto; font-size: 14.5px; line-height: 1.55; opacity: .92; }
.lg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(520px, 100%); }
.lg-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lg-card .ci { width: 34px; height: 34px; border-radius: 9px; background: #fff; color: #0b3a6f; display: grid; place-items: center; }
.lg-card .ci .ico-svg { width: 20px; height: 20px; stroke-width: 2; }
.lg-card b { font-size: 11px; font-weight: 800; letter-spacing: .06em; line-height: 1.3; }
.lg-card span { font-size: 11px; opacity: .8; line-height: 1.35; }

.lg-ill { position: relative; width: min(370px, 92%); margin-top: 6px; }
.lg-win { background: #f5f8fd; border-radius: 10px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55); overflow: hidden; text-align: left; }
.lg-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: #fff; border-bottom: 1px solid #e3e9f3; }
.lg-bar i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.lg-bar i:nth-child(1) { background: #ff5f57; } .lg-bar i:nth-child(2) { background: #febc2e; } .lg-bar i:nth-child(3) { background: #28c840; }
.lg-bar span { flex: 1; height: 7px; margin: 0 40px; border-radius: 9px; background: #e3e9f3; }
.lg-body { display: grid; grid-template-columns: 56px minmax(0, 1fr); min-height: 190px; }
.lg-side { background: #0b3a6f; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.lg-side i { display: block; height: 4px; border-radius: 9px; background: rgba(255, 255, 255, .55); }
.lg-side i:first-child { background: #fff; width: 80%; }
.lg-main { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.lg-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lg-kpi { background: #fff; border: 1px solid #e3e9f3; border-radius: 6px; padding: 6px 7px; }
.lg-kpi small { display: block; font-size: 7.5px; color: #66748a; font-weight: 600; }
.lg-kpi b { display: block; font-size: 10px; color: #0b3a6f; margin-top: 1px; }
.lg-kpi:nth-child(2) b { color: #0b8a60; } .lg-kpi:nth-child(3) b { color: #2fbf8a; }
.lg-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 6px; }
.lg-panel { background: #fff; border: 1px solid #e3e9f3; border-radius: 6px; padding: 6px; }
.lg-panel small { display: block; font-size: 7.5px; color: #66748a; font-weight: 600; margin-bottom: 3px; }
.lg-panel svg { display: block; width: 100%; height: auto; }
.lg-float { position: absolute; display: flex; align-items: center; gap: 8px; background: #fff; color: #0f1b2d; border-radius: 9px; padding: 8px 10px; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45); text-align: left; font-size: 10.5px; line-height: 1.3; }
.lg-float b { display: block; font-size: 11px; }
.lg-float span { color: #66748a; }
.lg-float.f1 { right: -18px; top: -16px; }
.lg-float.f2 { left: -26px; bottom: 18px; }
.lg-float .ok-dot { width: 20px; height: 20px; border-radius: 50%; background: #e3f6ea; color: #1a9a4b; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
.lg-float svg { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .lg-float.f1 { animation: lgfloat 6s ease-in-out infinite; }
  .lg-float.f2 { animation: lgfloat 7s ease-in-out -2s infinite; }
}
@keyframes lgfloat { 50% { transform: translateY(-6px); } }

.lg-right { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px 56px; background-color: #f2f6f9; background-size: cover; background-position: center; min-height: 100%; }
.lg-support { position: absolute; top: 20px; right: 24px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; border: 1px solid #d5ddea; background: rgba(255, 255, 255, .85); color: #0b3a6f; font: inherit; font-weight: 600; cursor: pointer; }
.lg-support:hover { background: #fff; }
.lg-form { width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; }
.lg-logo { display: flex; justify-content: center; }
.lg-logo svg { width: 112px; height: auto; }
.lg-h { text-align: center; }
.lg-h h1 { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #0f1b2d; margin: 4px 0 2px; }
.lg-h p { color: #5a6678; margin: 0; }
.lg-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #1b2738; text-transform: uppercase; }
.lg-in { position: relative; display: flex; align-items: center; }
.lg-in > .ico-svg { position: absolute; left: 13px; color: #7a8698; width: 17px; height: 17px; pointer-events: none; }
.lg-in input { margin: 0; height: 44px; padding: 0 44px 0 40px; border-radius: 8px; border: 1px solid #d3dfe9; background: #f5f9fc; color: #0f1b2d; font-size: 14.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.lg-in input:focus { border-color: #0b3a6f; box-shadow: 0 0 0 3px rgba(11, 58, 111, .18); background: #fbfdff; }
.lg-eye { position: absolute; right: 8px; width: 30px; height: 30px; border: 0; background: none; color: #7a8698; cursor: pointer; display: grid; place-items: center; border-radius: 6px; }
.lg-eye:hover { color: #0b3a6f; }
.lg-opts { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lg-opts label.check { color: #3a4658; font-size: 14px; }
.lg-link { border: 0; background: none; color: #0b3a6f; font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.lg-link:hover { text-decoration: underline; }
.lg-btn { height: 46px; border: 0; border-radius: 8px; background: #0b3a6f; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(11, 58, 111, .6); }
.lg-btn:hover { background: #072a52; }
.lg-btn:focus-visible, .lg-link:focus-visible, .lg-support:focus-visible, .lg-eye:focus-visible { outline: 3px solid rgba(11, 58, 111, .35); outline-offset: 2px; }
.lg-err { min-height: 18px; color: #b42318; font-size: 13px; text-align: center; margin: -4px 0; }
.lg-note { color: #5a6678; font-size: 12.5px; text-align: center; line-height: 1.5; }
.lg-foot { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #7a8698; font-size: 12.5px; }
.lg-mobile-head { display: none; }
@media (max-width: 900px) {
  #login { grid-template-columns: minmax(0, 1fr); }
  .lg-left { display: none; }
  .lg-right { padding-top: 76px; }
}
.lg-right, .lg-left { justify-content: safe center; }
.lg-right { padding-bottom: 20px; }
.lg-foot { position: static; margin-top: 22px; }

/* ------------ v5: sign-in fits the screen (no scrolling) */
#login { height: 100vh; height: 100dvh; overflow: hidden; }
.lg-left, .lg-right { min-height: 0; height: 100%; justify-content: center; }
.lg-left { gap: clamp(12px, 3vh, 28px); padding: clamp(16px, 4vh, 48px) max(24px, 4vw); }
.lg-right { padding: clamp(56px, 8vh, 72px) 24px clamp(10px, 2vh, 20px); }
.lg-form { gap: clamp(8px, 1.7vh, 14px); }
.lg-logo img { display: block; height: clamp(54px, 15vh, 140px); width: auto; max-width: 100%; }
.lg-h h1 { font-size: clamp(21px, 3.2vh, 26px); }
.lg-in input { height: clamp(38px, 5.4vh, 44px); }
.lg-btn { height: clamp(40px, 5.6vh, 46px); flex: none; }
.lg-foot { margin-top: clamp(8px, 2.4vh, 22px); flex: none; }
.lg-ill { width: min(370px, 92%, 46vh); }
.lg-back { align-self: center; font-size: 13px; }
@media (max-height: 690px) { .lg-ill { display: none; } }
@media (max-height: 620px) { .lg-sub { display: none; } .lg-cards { gap: 8px; } .lg-card { padding: 10px 8px; gap: 6px; } .lg-card > span:last-child { display: none; } }
@media (max-height: 500px) { .lg-cards { display: none; } .lg-foot { display: none; } .lg-h p { display: none; } .lg-support { top: 10px; } .lg-right { padding-top: 46px; } }
@media (max-width: 900px) {
  .lg-right { padding: clamp(56px, 9vh, 80px) 20px clamp(10px, 2vh, 18px); }
  .lg-support { top: 14px; right: 16px; padding: 7px 13px; }
}
@media (max-width: 900px) and (min-height: 760px) { .lg-logo img { height: clamp(90px, 16vh, 150px); } }
@media (max-width: 420px) { .lg-opts label.check, .lg-link { font-size: 13px; } }
@media (max-height: 420px) and (max-width: 900px) { #login { overflow-y: auto; } .lg-right { height: auto; min-height: 100%; } } /* phone held sideways: allow a scroll rather than hide the button */

/* ------------ v5: header company switcher + user */
.co-wrap { position: relative; }
.co-chip { cursor: pointer; font: inherit; text-align: left; }
.co-chip .co-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.co-chip .co-caret { width: 15px; height: 15px; color: var(--muted); margin-left: 2px; }
.co-chip.single .co-caret { display: none; }
.co-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 300px; max-width: calc(100vw - 24px); z-index: 60; padding: 8px; border-radius: 12px; border: 1px solid var(--glass-line, var(--border)); background: var(--surface); box-shadow: 0 18px 50px -12px rgba(5, 20, 50, .35); }
.co-m-h { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 8px 8px; font-weight: 700; font-size: 13px; }
.co-menu input[type=search] { margin: 0 0 6px; }
.co-list { display: flex; flex-direction: column; gap: 2px; max-height: min(320px, 55vh); overflow: auto; }
.co-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.co-opt:hover, .co-opt:focus-visible { background: color-mix(in srgb, var(--primary) 9%, transparent); outline: none; }
.co-opt.on { background: color-mix(in srgb, var(--primary) 13%, transparent); }
.co-opt .ico-svg { width: 16px; height: 16px; color: var(--primary); margin-left: auto; flex: none; }
.co-o-t { display: flex; flex-direction: column; min-width: 0; }
.co-o-t b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-o-t small { font-size: 11px; color: var(--muted); }
.co-none { padding: 10px 8px; }
.co-m-f { display: flex; flex-wrap: wrap; gap: 4px 14px; border-top: 1px solid var(--border); margin-top: 6px; padding: 8px 8px 2px; font-size: 12.5px; }
.co-m-f a { display: inline-flex; align-items: center; gap: 6px; }
.co-m-f .ico-svg { width: 14px; height: 14px; }
.avatar.sm { width: 26px; height: 26px; font-size: 10.5px; }
.avatar.user { background: var(--surface-2); color: var(--primary); border: 1px solid var(--border); }
.user-chip { display: flex; }
@media (max-width: 860px) { #signOutBtn { display: grid; } .user-chip { display: none; } .co-menu { position: fixed; top: 60px; right: 12px; } }

/* ------------ v5: users, roles, access */
.modal.wide { width: min(760px, 100%); }
.lnk { border: 0; background: none; padding: 0; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; }
.lnk:disabled { color: inherit; cursor: default; }
.nowrap { white-space: nowrap; }
.perm-t td.c, .perm-t th.c { text-align: center; width: 92px; }
.perm-t td, .perm-t th { padding-top: 5px; padding-bottom: 5px; }
.perm-t input[type=radio] { width: auto; margin: 0; accent-color: var(--primary); }
.co-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.role-card { margin: 0; display: flex; flex-direction: column; }
.role-card h2 { display: flex; align-items: center; gap: 8px; }
.role-card h2 .ico-svg { width: 17px; height: 17px; color: var(--primary); }
.role-card .row { margin-top: auto; padding-top: 12px; gap: 6px; }
.perm-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pc { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.pc.edit { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, transparent); font-weight: 600; }
.pc.view { background: color-mix(in srgb, var(--exp) 16%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--exp) 40%, transparent); }
.pc.none { color: var(--muted); text-decoration: line-through; opacity: .7; }
.ro-banner { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; font-size: 13px; background: color-mix(in srgb, var(--net) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--net) 35%, transparent); }
.ro-banner .ico-svg { width: 16px; height: 16px; flex: none; }
.no-access { display: flex; gap: 16px; align-items: flex-start; max-width: 620px; margin: 40px auto; }
.no-access > .ico-svg { width: 34px; height: 34px; color: var(--primary); flex: none; }
.no-access h2 { margin: 0 0 6px; }
.side .logo img { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: inherit; }

/* ------------ v6: grouped menu with dropdowns, collapse button at the top, hover to open */
.side .brand { display: flex; align-items: center; }
.side .brand-txt { flex: 1; min-width: 0; }
.side-collapse { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: 0 -2px 0 0; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--side-muted); cursor: pointer; }
.side-collapse:hover, .side-collapse:focus-visible { background: var(--side-hover); color: #fff; outline: none; }
.side-collapse .ico-svg { width: 17px; height: 17px; }
#nav { display: flex; flex-direction: column; gap: 1px; padding-top: 6px; }
.nav-gh { display: flex; align-items: center; gap: 9px; width: 100%; padding: 5px 9px; border: 0; border-radius: 7px; background: none; color: var(--side-fg); font: inherit; font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap; }
.nav-gh > span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-gh .ico-svg { width: 16px; height: 16px; color: var(--side-muted); flex: none; }
.nav-gh .nav-chev { width: 14px; height: 14px; transform: rotate(180deg); transition: transform .18s ease; }
.nav-gh:hover { background: var(--side-hover); color: #fff; }
.nav-gh:focus-visible { outline: 2px solid var(--side-accent); outline-offset: -2px; }
.nav-grp.open > .nav-gh .nav-chev { transform: rotate(-90deg); }
.nav-grp.has-active > .nav-gh { color: #fff; font-weight: 600; }
.nav-grp.has-active > .nav-gh > .ico-svg:first-child { color: var(--side-accent); }
.nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
.nav-sub > * { overflow: hidden; }
.nav-grp.open > .nav-sub { grid-template-rows: 1fr; }
.nav-sub a { margin-left: 17px !important; padding-left: 12px !important; border-left: 1px solid var(--side-line); border-radius: 0 7px 7px 0 !important; font-size: 12.5px !important; }
.nav-sub a .ico-svg { width: 14px !important; height: 14px !important; }
.nav-grp.open > .nav-sub > div { padding: 1px 0 3px; }
@media (min-width: 861px) {
  .side { transition: width .18s ease, box-shadow .18s ease; }
  body.side-mini .side { width: 56px; z-index: 70; }
  body.side-mini .side-collapse { display: none; }
  body.side-mini .nav-gh { justify-content: center; padding: 7px 0; }
  body.side-mini .nav-gh > span, body.side-mini .nav-gh .nav-chev, body.side-mini .nav-sub { display: none; }
  /* hovering the collapsed menu slides the full menu out over the page */
  body.side-mini.side-peek .side { width: 208px; box-shadow: 12px 0 40px -10px rgba(4, 18, 45, .45); }
  body.side-mini.side-peek .brand-txt { display: block; }
  body.side-mini.side-peek .side .brand { justify-content: flex-start; padding: 0 6px 10px; }
  body.side-mini.side-peek .side-collapse { display: grid; }
  body.side-mini.side-peek #nav a { justify-content: flex-start; padding: 5px 9px; }
  body.side-mini.side-peek #nav a span { display: inline; }
  body.side-mini.side-peek .nav-gh { justify-content: flex-start; padding: 5px 9px; }
  body.side-mini.side-peek .nav-gh > span, body.side-mini.side-peek .nav-gh .nav-chev { display: block; }
  body.side-mini.side-peek .nav-sub { display: grid; }
}
@media (max-width: 860px) { .side-collapse { display: none; } }
.nav-grp:not(.open) > .nav-sub > div { visibility: hidden; transition: visibility 0s .2s; }

/* =====================================================================
   Palette "Ocean · Emerald · Mist" (v11; was Midnight · Champagne · Ivory).
   Ocean blue for structure and actions, emerald green for accents and
   focus, cool mist for the canvas. Token names (--navy, --gold) are kept.
   ===================================================================== */
:root {
  --navy: #0b3a6f; --navy-2: #1559a6; --navy-deep: #072a52;
  --gold: #0e9f6e; --gold-2: #2fbf8a; --gold-soft: #e2f6ee; --gold-ink: #08694a;
  --ivory: #f2f6f9; --ivory-2: #f8fbfd;

  --bg: var(--ivory); --surface: #ffffff; --surface-2: var(--ivory-2); --text: #0a1a2e; --muted: #6b6f78;
  --border: #dde6ee; --border-2: #c8d5e1; --primary: var(--navy); --primary-h: var(--navy-deep); --on-primary: #f5faff;
  --danger: #a3392e; --warn: #9a6a12; --ok: #2e7552; --info: #1559a6;
  --inc: var(--navy); --exp: var(--gold-2); --net: #08694a; --ring: rgba(14, 159, 110, .35);
  --field: #fbfdfe; --brand-red: #c8232a;
  --side-bg: var(--navy-deep); --side-fg: #c9cfda; --side-muted: #7f8899; --side-hover: rgba(255, 255, 255, .055);
  --side-active: rgba(47, 191, 138, .13); --side-accent: var(--gold-2); --side-line: rgba(47, 191, 138, .14);
  --glass: rgba(251, 253, 255, .82); --hdr-bg: rgba(246, 250, 253, .82); --scrim: rgba(7, 34, 66, .42);
  --shadow: 0 1px 2px rgba(10, 34, 62, .04), 0 2px 8px -2px rgba(10, 34, 62, .06);
  --shadow-lg: 0 24px 60px -18px rgba(7, 34, 66, .35), 0 6px 16px rgba(7, 34, 66, .06);
  --radius: 14px;
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Noto Sans Arabic", "Segoe UI Arabic", sans-serif;
  --font-display: "Segoe UI Variable Display", "Inter", "Segoe UI", -apple-system, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0f18; --surface: #111823; --surface-2: #151e2b; --text: #e6eff7; --muted: #9a9ca3;
    --border: #232c3a; --border-2: #303a4a; --primary: var(--gold-2); --primary-h: #5fd6a8; --on-primary: #072a52;
    --danger: #e0786c; --warn: #e2b55a; --ok: #6fbf94; --info: #8ec2f2;
    --inc: #6fb0ee; --exp: var(--gold-2); --net: #b5ecd6; --ring: rgba(47, 191, 138, .35);
    --field: #0f1620; --side-bg: #070c14; --gold-soft: rgba(47, 191, 138, .1); --gold-ink: var(--gold-2);
    --glass: rgba(17, 24, 35, .82); --hdr-bg: rgba(10, 15, 24, .82); --scrim: rgba(0, 0, 0, .6);
    --shadow: none; --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, .75);
  }
}
:root[data-theme="dark"] {
  --bg: #0a0f18; --surface: #111823; --surface-2: #151e2b; --text: #e6eff7; --muted: #9a9ca3;
  --border: #232c3a; --border-2: #303a4a; --primary: var(--gold-2); --primary-h: #5fd6a8; --on-primary: #072a52;
  --danger: #e0786c; --warn: #e2b55a; --ok: #6fbf94; --info: #8ec2f2;
  --inc: #6fb0ee; --exp: var(--gold-2); --net: #b5ecd6; --ring: rgba(47, 191, 138, .35);
  --field: #0f1620; --side-bg: #070c14; --gold-soft: rgba(47, 191, 138, .1); --gold-ink: var(--gold-2);
  --glass: rgba(17, 24, 35, .82); --hdr-bg: rgba(10, 15, 24, .82); --scrim: rgba(0, 0, 0, .6);
  --shadow: none; --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, .75);
}

/* type */
body { font-feature-settings: "cv11", "ss01"; letter-spacing: -.003em; }
h1, .dash-head h1 { font-family: var(--font-display); font-weight: 650; letter-spacing: -.022em; }
h2 { font-weight: 620; letter-spacing: -.01em; }
.num, .kpi-v, .tbl td.r { font-variant-numeric: tabular-nums; }
::selection { background: color-mix(in srgb, var(--gold-2) 35%, transparent); }

/* focus: a fine champagne ring everywhere */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--ring); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* fields */
input, select, textarea { border-color: var(--border-2); border-radius: 9px; transition: border-color .15s, box-shadow .15s; }
input:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--gold) 45%, var(--border-2)); }
label { letter-spacing: .01em; }

/* buttons: midnight in light mode, champagne in dark mode */
.btn { border-radius: 9px; font-weight: 550; border-color: var(--border-2); transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; }
.btn:hover { border-color: color-mix(in srgb, var(--gold) 50%, var(--border-2)); background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 86%, #fff), var(--primary)); border-color: var(--primary); color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(7, 34, 66, .25), 0 4px 12px -4px rgba(7, 34, 66, .35); }
.btn.primary:hover { background: linear-gradient(180deg, var(--primary), var(--primary-h)); border-color: var(--primary-h); color: var(--on-primary); }
.btn.danger { color: var(--danger); }

/* cards and panels */
.card, .kpi, .kpi2 { border-color: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.kpi2 { position: relative; overflow: hidden; }
.kpi2::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--gold-2), transparent 75%); opacity: .9; }
.kpi2:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); box-shadow: 0 10px 26px -14px rgba(7, 34, 66, .3); }
.k-ico { background: var(--gold-soft); color: var(--gold-ink); border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); }
.kpi-l { text-transform: uppercase; font-size: 10.5px; letter-spacing: .09em; font-weight: 650; }
.kpi2 .kpi-v { font-family: var(--font-display); font-weight: 650; letter-spacing: -.02em; }
.card-h h2 { font-size: 15px; }

/* tables */
.tbl th { background: var(--surface-2); color: var(--muted); font-size: 10.5px; letter-spacing: .09em; font-weight: 650; border-bottom: 1px solid var(--border-2); }
.tbl td { border-bottom-color: color-mix(in srgb, var(--border) 75%, transparent); }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--gold-soft) 45%, transparent); }

/* tabs, badges */
.seg { background: var(--surface-2); border-color: var(--border); border-radius: 10px; }
.seg > .on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(7, 34, 66, .08), inset 0 -2px 0 var(--gold-2); }
.seg .on .cnt { background: var(--gold-soft); color: var(--gold-ink); }
.badge { font-weight: 600; letter-spacing: .01em; border: 1px solid transparent; }
.b-paid, .b-applied { border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.b-overdue { border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.b-partial, .b-open { border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.b-unpaid { background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--info); border-color: color-mix(in srgb, var(--info) 20%, transparent); }

/* header */
.hdr { background: var(--hdr-bg); border-bottom: 1px solid var(--border); }
.search-trigger { background: var(--surface); border-color: var(--border); border-radius: 10px; }
.search-trigger:hover { border-color: color-mix(in srgb, var(--gold) 50%, var(--border)); }
.co-chip { border-color: var(--border); background: var(--surface); }
.co-chip:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); }
.avatar { background: linear-gradient(135deg, var(--navy-2), var(--navy-deep)); color: var(--gold-2); box-shadow: inset 0 0 0 1px rgba(47, 191, 138, .4); letter-spacing: .04em; }
.avatar.user { background: var(--gold-soft); color: var(--gold-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); border: 0; }

/* sidebar: deep midnight with a faint champagne sheen */
.side { background:
    radial-gradient(120% 38% at 0% 0%, rgba(47, 191, 138, .11), transparent 62%),
    radial-gradient(110% 40% at 100% 100%, rgba(21, 89, 166, .55), transparent 70%),
    linear-gradient(180deg, #0a2f5c, var(--side-bg) 55%); }
.side .brand { border-bottom-color: var(--side-line); }
.side .brand-name { font-family: var(--font-display); letter-spacing: .01em; color: #f5faff; }
.side .brand-sub { color: var(--gold-2); opacity: .85; letter-spacing: .04em; }
.side .logo { box-shadow: 0 0 0 1px rgba(47, 191, 138, .5), 0 4px 12px rgba(0, 0, 0, .35); }
#nav a, .nav-gh { position: relative; }
#nav a:hover, .nav-gh:hover { color: #fff; }
#nav a.active { background: linear-gradient(90deg, rgba(47, 191, 138, .17), rgba(47, 191, 138, .03)); color: #eafaf3; }
#nav a.active .ico-svg { color: var(--gold-2); }
#nav a.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--gold-2); box-shadow: 0 0 8px rgba(47, 191, 138, .6); }
.nav-sub a.active::before { left: -1px; }
.nav-grp.has-active > .nav-gh { color: #eafaf3; }
.nav-grp.has-active > .nav-gh > .ico-svg:first-child { color: var(--gold-2); }
.nav-sub a { border-left-color: rgba(47, 191, 138, .16) !important; }

/* menus and dialogs */
.qc-menu, .cmdk, .modal, .co-menu { border-color: var(--border); box-shadow: var(--shadow-lg); }
.modal-head h2 { font-family: var(--font-display); }
.co-opt.on, .co-opt:hover, .co-opt:focus-visible { background: color-mix(in srgb, var(--gold-soft) 70%, transparent); }
.co-opt .ico-svg { color: var(--gold); }

/* document band, notices, permissions */
.doc-band { background: linear-gradient(90deg, var(--gold-soft), var(--surface) 65%); }
.ro-banner { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 35%, transparent); color: var(--gold-ink); }
.pc.edit { background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.pc.view { background: var(--gold-soft); color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold) 35%, transparent); }

/* sign-in: midnight story panel, ivory form panel, champagne details */
.lg-left::after { background: linear-gradient(180deg, rgba(4, 22, 44, .35), rgba(4, 22, 44, .05) 45%, rgba(4, 22, 44, .45)); }
.lg-eyebrow { color: #2fbf8a; letter-spacing: .3em; }
.lg-title { font-family: var(--font-display); letter-spacing: -.025em; }
.lg-card { border-color: rgba(47, 191, 138, .3); background: rgba(255, 255, 255, .05); }
.lg-card .ci { background: linear-gradient(135deg, #7fe3bd, #0e9f6e); color: #072a52; }
.lg-h h1 { font-family: var(--font-display); color: #0b3a6f; }
.lg-field { color: #0b3a6f; }
.lg-in input { background: #fbfdfe; border-color: #d3dfe9; }
.lg-in input:focus { border-color: #0e9f6e; box-shadow: 0 0 0 3px rgba(14, 159, 110, .22); background: #fff; }
.lg-btn { background: linear-gradient(180deg, #1559a6, #0b3a6f); letter-spacing: .02em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 22px -10px rgba(7, 34, 66, .7); }
.lg-btn:hover { background: linear-gradient(180deg, #0b3a6f, #072a52); }
.lg-link { color: #08694a; }
.lg-support { color: #0b3a6f; border-color: #d3dfe9; }
.lg-support .ico-svg { color: #0e9f6e; }
.lg-float .ok-dot { background: #e2f6ee; color: #08694a; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 35%, transparent) transparent; }
.side { scrollbar-color: rgba(47, 191, 138, .2) transparent; }
/* aging and money bars: navy (current) to champagne to bronze to deep red */
.a0 { background: var(--inc); } .a1 { background: var(--gold-2); } .a2 { background: var(--gold); }
.a3 { background: #0d6d7a; } .a4 { background: var(--danger); }
.mb-bar .soon { background: var(--gold-2); } .mb-bar .later { background: var(--inc); } .mb-bar .draft { background: var(--border-2); }
.mb-seg.soon .mb-v { color: var(--gold-ink); }

/* ------------ v8: darker, crisper text */
:root {
  --text: #0a1320; --muted: #4b505a; --side-fg: #dde2ea; --side-muted: #97a0b0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --text: #eef5fb; --muted: #b3b5bb; }
}
:root[data-theme="dark"] { --text: #eef5fb; --muted: #b3b5bb; }
body { font-weight: 450; }
label, .kpi-l, .tbl th { color: color-mix(in srgb, var(--text) 62%, var(--bg)); }
.tbl td { color: var(--text); }
.kpi2 .kpi-v, h1, h2, .big { color: var(--text); }

/* ------------ v8: light / dark switch */
.th-wrap { position: relative; }
#themeBtn .ico-svg { width: 18px; height: 18px; }
#themeBtn:hover { color: var(--gold-ink); }
.th-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 220px; padding: 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg); }
.th-h { padding: 6px 10px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.th-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.th-opt:hover, .th-opt:focus-visible { background: color-mix(in srgb, var(--gold-soft) 75%, transparent); outline: none; }
.th-opt.on { font-weight: 600; }
.th-opt .ico-svg { width: 17px; height: 17px; color: var(--gold); }
.th-opt .th-tick { margin-left: auto; color: var(--gold); }
@media (max-width: 860px) { #themeBtn { display: grid; } .th-menu { position: fixed; top: 60px; right: 12px; } }

/* ------------ v8: SVG icons inline with text */
.hdr-menu .ico-svg { width: 20px; height: 20px; }
.modal-head .icon-btn .ico-svg, .c-act .ico-svg, td > .icon-btn .ico-svg { width: 16px; height: 16px; }
.badge .ico-svg, p > .ico-svg, .kpi-s > .ico-svg, .btn > .ico-svg:first-child { width: 14px; height: 14px; vertical-align: -2px; stroke-width: 2.2; }
.badge .ico-svg { width: 12px; height: 12px; margin-right: 2px; }
.rules li > span .ico-svg { width: 16px; height: 16px; }
.lg-float .ok-dot .ico-svg { width: 12px; height: 12px; stroke-width: 2.6; }

/* =====================================================================
   v9 typography (titles and figures restyled again in v10 below),
   Plus Jakarta Sans for everything else (both self-hosted, see fonts/).
   ===================================================================== */
:root {
  --font: "Plus Jakarta Sans", "Segoe UI Variable Text", "Segoe UI", -apple-system, system-ui, Roboto, "Noto Sans Arabic", "Segoe UI Arabic", sans-serif;
  --font-display: var(--font);
}
body { font-family: var(--font); font-size: 14px; font-weight: 450; letter-spacing: -.005em; font-feature-settings: normal; }
input, select, textarea, button, .btn { font-family: var(--font); }

/* titles */
h1, .dash-head h1, .modal-head h2, .lg-title, .lg-h h1, .side .brand-name { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 26px; line-height: 1.2; }
.dash-head h1 { font-size: 30px; }
.modal-head h2 { font-size: 20px; }
.lg-title { font-size: clamp(28px, 2.9vw, 38px); font-weight: 600; }
.lg-h h1 { font-size: clamp(26px, 3.6vh, 32px); }
.side .brand-name { font-size: 16px; font-weight: 600; letter-spacing: .005em; }
h2, h3, .card-h h2 { font-family: var(--font); font-weight: 650; letter-spacing: -.012em; }

/* headline figures, lining and evenly spaced */
.kpi2 .kpi-v, .kpi .kpi-v, .big, .mb-v, #bandTotal, .doc-band b, .sh-total { font-family: var(--font-display); font-weight: 600; letter-spacing: -.005em; font-variant-numeric: lining-nums tabular-nums; }
.kpi2 .kpi-v { font-size: 24px; }
.big { font-size: 22px; }
.num, .tbl td, .tbl td.r, .totals td { font-variant-numeric: lining-nums tabular-nums; }

/* small labels: refined uppercase tracking */
.eyebrow { color: var(--gold-ink); font-weight: 700; font-size: 11px; letter-spacing: .16em; }
.kpi-l, .tbl th, .nav-h, .th-h, .co-m-h, .lbl { letter-spacing: .1em; }
.lbl { text-transform: uppercase; font-size: 10.5px; font-weight: 700; color: color-mix(in srgb, var(--text) 60%, var(--bg)); }

/* buttons and fields */
.btn { font-weight: 600; font-size: 13px; letter-spacing: .005em; padding: 8px 14px; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
input, select, textarea { font-size: 13.5px; }

/* icons: finer line, consistent optical sizes, gold where they decorate */
.ico-svg { stroke-width: 1.6; }
#nav .ico-svg, .nav-gh .ico-svg { stroke-width: 1.55; }
.btn .ico-svg { stroke-width: 1.9; }
.k-ico { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--gold-soft) 100%, #fff), color-mix(in srgb, var(--gold-soft) 70%, var(--gold-2))); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.k-ico .ico-svg { width: 19px; height: 19px; stroke-width: 1.6; }
.icon-btn .ico-svg { stroke-width: 1.7; }
.hdr-ico, .icon-btn { border-radius: 10px; color: color-mix(in srgb, var(--text) 75%, var(--bg)); }
.hdr-ico:hover, .icon-btn:hover { color: var(--gold-ink); background: color-mix(in srgb, var(--gold-soft) 60%, transparent); }
.card-h h2 .ico-svg, .role-card h2 .ico-svg { color: var(--gold); }
:root[data-theme="dark"] .k-ico { background: rgba(47, 191, 138, .1); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .k-ico { background: rgba(47, 191, 138, .1); box-shadow: none; } }

/* a little more air */
.page-head { margin-bottom: 22px; }
.card { padding: 20px; }
.kpi2 { padding: 18px; }
.kpi2 .kpi-s { white-space: normal; }

/* =====================================================================
   v10 typography: one strong, simple family. Plus Jakarta Sans everywhere,
   bold/extra-bold for titles and figures (Playfair removed).
   ===================================================================== */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/plus-jakarta-sans.woff2") format("woff2"); }
:root { --font-display: var(--font); }
h1, .dash-head h1, .modal-head h2, .lg-title, .lg-h h1, .side .brand-name { font-family: var(--font); font-weight: 800; letter-spacing: -.025em; }
h1 { font-size: 24px; }
.dash-head h1 { font-size: 28px; }
.modal-head h2 { font-size: 18px; font-weight: 750; }
.lg-title { font-size: clamp(26px, 2.6vw, 34px); }
.lg-h h1 { font-size: clamp(24px, 3.4vh, 30px); }
.side .brand-name { font-size: 15px; letter-spacing: -.01em; }
.kpi2 .kpi-v, .kpi .kpi-v, .big, .mb-v, #bandTotal, .doc-band b, .sh-total { font-family: var(--font); font-weight: 750; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.kpi2 .kpi-v { font-size: 23px; }
.big { font-size: 21px; }
.tbl td.r, .totals td, .num { font-weight: 550; }
.tbl tr.total td, .tbl tr.grand td, .tbl tfoot td { font-weight: 750; }

/* =====================================================================
   v11 everyday basics: help centre, profile, user menu, activity log,
   backup banner, recurring, CSV import, company logo
   ===================================================================== */
.um-wrap { position: relative; }
.um-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: 250px; padding: 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg); }
.um-h { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.um-h b { display: block; font-size: 14px; } .um-h small { color: var(--muted); font-size: 12px; }
.um-menu a, .um-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; text-decoration: none; }
.um-menu a:hover, .um-menu button:hover, .um-menu a:focus-visible, .um-menu button:focus-visible { background: color-mix(in srgb, var(--gold-soft) 75%, transparent); outline: none; }
.um-menu .ico-svg { width: 16px; height: 16px; color: var(--gold); }
.um-menu .um-out { border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; margin-top: 4px; color: var(--danger); }
.um-menu .um-out .ico-svg { color: var(--danger); }
.hdr-ico .ico-svg { width: 18px; height: 18px; }
#supportBtn { display: grid; place-items: center; color: inherit; }
#supportBtn:hover { color: var(--gold-ink); }

.help-hero { padding: 26px 28px; background: linear-gradient(120deg, color-mix(in srgb, var(--navy) 9%, var(--surface)), var(--gold-soft)); }
.help-hero h2 { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.help-hero input { width: 100%; max-width: 560px; margin-top: 12px; height: 44px; font-size: 15px; }
.help-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.help-side { display: grid; gap: 16px; }
.help-faq .card-h { flex-wrap: wrap; gap: 10px; }
.seg.wrap { flex-wrap: wrap; }
details.faq { border-top: 1px solid var(--border); }
details.faq:first-child { border-top: 0; }
details.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 2px; cursor: pointer; font-weight: 650; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--gold); font-weight: 800; font-size: 18px; margin-left: 8px; }
details.faq[open] summary::after { content: "–"; }
details.faq summary .tag { margin-left: auto; }
details.faq p { margin: 0 2px 14px; color: color-mix(in srgb, var(--text) 82%, var(--bg)); line-height: 1.6; }
.help-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; }
.help-dl dt { color: var(--muted); font-size: 12.5px; } .help-dl dd { margin: 0; font-weight: 600; }
.help-new { margin: 0; padding-left: 18px; line-height: 1.75; }
.help-new li::marker { color: var(--gold); }
kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2); font: 600 11.5px var(--font); text-align: center; }

.prof .card { min-width: 0; }
.prof-id { display: flex; align-items: center; gap: 14px; }
.avatar.lg { width: 56px; height: 56px; font-size: 19px; border-radius: 16px; display: grid; place-items: center; }

.bk-banner { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); }
.bk-banner > .ico-svg { width: 22px; height: 22px; color: var(--warn); flex: none; }
.bk-banner > div { flex: 1; min-width: 0; } .bk-banner b { display: block; } .bk-banner span { color: var(--muted); font-size: 13px; }
.bk-last { align-self: center; }

.logo-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.logo-prev { width: 180px; height: 84px; border: 1px dashed var(--border-2); border-radius: 10px; display: grid; place-items: center; background: #fff; overflow: hidden; }
.logo-prev img { max-width: 92%; max-height: 92%; object-fit: contain; }
.sh-logo { display: block; max-width: 180px; max-height: 70px; object-fit: contain; margin-bottom: 8px; }
.tbl.compact td, .tbl.compact th { padding: 6px 8px; }

@media (max-width: 900px) {
  .help-grid { grid-template-columns: 1fr; }
  .bk-banner { flex-wrap: wrap; }
  .um-menu { position: fixed; top: 60px; right: 12px; }
}
button.user-chip { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 999px; }
button.user-chip:hover .avatar { box-shadow: 0 0 0 2px var(--ring); }

/* v12 server mode: connection banner */
.offline-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 200; max-width: min(640px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 12px; background: var(--warn); color: #fff; font-weight: 600; font-size: 13.5px; box-shadow: var(--shadow-lg); }

/* ------------ v1.3.1: sign-in matches the CRM sign-in
   The same wave photo on the left (shaded so the white text reads), a 90% white wash of it behind the form,
   white icon tiles, a larger dashboard drawing, and a compact welcome strip on phones. */
.lg-left { background: #0a2d57 url("../img/signin-bg.jpg") center / cover no-repeat; isolation: isolate; }
.lg-left::after { z-index: -1; background: linear-gradient(180deg, rgba(6, 26, 58, .70) 0%, rgba(6, 26, 58, .40) 34%, rgba(6, 30, 52, .14) 62%, rgba(4, 34, 48, .36) 100%); }
.lg-left > * { z-index: auto; }
.lg-right { background: linear-gradient(rgba(255, 255, 255, .90), rgba(255, 255, 255, .90)), #fff url("../img/signin-bg.jpg") center / cover no-repeat; }
.lg-eyebrow { color: #fff; opacity: .92; font-size: clamp(12px, 1.7vh, 15px); font-weight: 600; letter-spacing: .16em; }
.lg-title { font-size: clamp(26px, 4.4vh, 38px); font-weight: 700; margin: 4px 0 clamp(6px, 1.4vh, 14px); text-shadow: 0 2px 12px rgba(4, 14, 40, .55); }
.lg-sub { font-size: clamp(13px, 1.75vh, 15.5px); line-height: 1.65; opacity: .95; text-shadow: 0 1px 6px rgba(4, 14, 40, .55); }
.lg-cards { gap: clamp(8px, 1.4vh, 14px); width: min(500px, 100%); }
.lg-card { padding: clamp(10px, 2vh, 18px) 10px; gap: clamp(6px, 1.1vh, 10px); background: rgba(8, 24, 64, .34); border-color: rgba(255, 255, 255, .30); backdrop-filter: none; -webkit-backdrop-filter: none; }
.lg-card .ci { width: clamp(34px, 5vh, 46px); height: clamp(34px, 5vh, 46px); border-radius: 12px; background: #fff; color: #0b3a6f; box-shadow: 0 6px 16px rgba(11, 31, 77, .25); }
.lg-card:nth-child(2) .ci { color: #0e9f6e; }
.lg-card:nth-child(3) .ci { color: #1559a6; }
.lg-card .ci .ico-svg { width: 22px; height: 22px; }
.lg-card b { font-size: clamp(10.5px, 1.3vh, 12px); font-weight: 700; }
.lg-card span { font-size: clamp(10.5px, 1.3vh, 12px); opacity: .85; }
.lg-left { gap: clamp(22px, 5vh, 52px); }
.lg-ill { width: min(440px, 92%, 54vh); }
.lg-win { filter: drop-shadow(0 18px 30px rgba(11, 31, 77, .35)); box-shadow: none; }
.lg-in input { background: #fff; }
.lg-h h1 { font-weight: 700; color: #0f1b2d; }
.lg-h p { color: #64748b; }
.lg-support { background: #fff; }
@media (max-height: 700px) { .lg-card > span:last-child { display: none; } }

/* Phones and narrow windows: a compact welcome strip above the form, like the CRM */
@media (max-width: 900px) {
  #login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .lg-left { display: flex; height: auto; gap: 0; padding: 14px 16px; }
  .lg-left .lg-sub, .lg-left .lg-cards, .lg-left .lg-ill { display: none; }
  .lg-eyebrow { font-size: 11px; }
  .lg-title { font-size: 20px; margin: 2px 0 0; }
  .lg-right { padding-top: clamp(48px, 7vh, 64px); }
}
@media (max-width: 900px) and (max-height: 420px) { .lg-left { display: none; } #login { grid-template-rows: minmax(0, 1fr); } }
.lg-in input::placeholder { color: #9aa6b6; font-weight: 400; }
/* Keep the dashboard picture on ordinary laptop screens, like the CRM (it is hidden only below 600px tall). */
@media (min-width: 901px) and (max-height: 690px) { .lg-ill { display: block; width: min(400px, 88%, 50vh); } .lg-left { gap: clamp(14px, 3.4vh, 28px); } }
@media (min-width: 901px) and (max-height: 599px) { .lg-ill { display: none; } }

/* ------------ v1.3.1: invoices, credit notes and quotations laid out on A4 (210 × 297 mm)
   On screen the sheet is shown at real A4 size so what you see is what prints. In print the page has 12 mm
   margins, column headings repeat on every page, rows and the totals block are never split across pages,
   and the footer sits at the bottom of the page. */
body.print-mode main { background: color-mix(in srgb, var(--bg) 70%, #8a97a8 30%); min-height: 100vh; padding-top: 18px; padding-bottom: 40px; }
body.print-mode .print-bar { max-width: 210mm; }
.sheet.page-a4 { width: 210mm; max-width: 100%; min-height: 297mm; padding: 14mm 14mm 12mm; margin: 0 auto; display: flex; flex-direction: column; border-radius: 2px; border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 12px 40px -12px rgba(0, 0, 0, .35); font-size: 12px; line-height: 1.45; }
.sheet.page-a4 .sh-lines { min-width: 0; table-layout: auto; }
.sheet.page-a4 .sh-lines th:first-child, .sheet.page-a4 .sh-lines td:first-child { width: 24px; }
.sheet.page-a4 .sh-lines td { vertical-align: top; }
.sheet.page-a4 .sh-lines td.r, .sheet.page-a4 .sh-lines th.r { white-space: nowrap; }
.sheet.page-a4 .sh-lines td:nth-child(2) { overflow-wrap: anywhere; }
.sheet.page-a4 .sh-bottom { flex-wrap: nowrap; }
.sheet.page-a4 .sh-tot { min-width: 270px; }
.sh-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 18mm; margin-top: 16mm; font-size: 11.5px; }
.sh-sign-line { border-top: 1px solid #1a1a1a; margin-bottom: 5px; }
.sheet.page-a4 .sh-foot { margin-top: auto; padding-top: 8px; }
@media screen and (max-width: 860px) {
  .sheet.page-a4 { width: auto; min-height: 0; padding: 22px 16px; }
  .sheet.page-a4 .sh-bottom { flex-wrap: wrap; }
  .sheet.page-a4 .sh-tot { min-width: 0; width: 100%; }
  .sheet.page-a4 { overflow-x: auto; }
}
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body.print-mode main { background: #fff; padding: 0; min-height: 0; }
  .sheet.page-a4 { width: auto; max-width: none; min-height: calc(297mm - 24mm - 2mm); padding: 0; margin: 0; box-shadow: none; border: 0; overflow: visible; font-size: 9.5pt; }
  .sheet.page-a4 .sh-lines thead { display: table-header-group; }
  .sheet.page-a4 .sh-lines tr, .sheet.page-a4 .sh-tot, .sheet.page-a4 .sh-sign, .sheet.page-a4 .sh-words > div { break-inside: avoid; page-break-inside: avoid; }
  .sheet.page-a4 .sh-bottom, .sheet.page-a4 .sh-sign { break-inside: avoid; page-break-inside: avoid; }
  .sheet.page-a4 .sh-top, .sheet.page-a4 .sh-lines th, .sheet.page-a4 .sh-title { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sheet.page-a4 .sh-lines th { font-size: 8pt; padding: 5px 6px; }
  .sheet.page-a4 .sh-lines td { padding: 6px; }
  .sheet.page-a4 .sh-tot tr.grand td { font-size: 11pt; }
  .sheet.page-a4 .void-mark { position: fixed; }
}

/* ------------ v1.3.1: report centre (Reports opens this; each report opens on its own page) */
.rc-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.rc-search { position: relative; flex: 1 1 360px; max-width: 560px; display: flex; align-items: center; margin: 0; }
.rc-search .ico-svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.rc-search input { margin: 0; width: 100%; height: 46px; padding-left: 42px; border-radius: 999px; font-size: 15px; background: var(--surface); box-shadow: var(--shadow); }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.rc-grid > .card, .rc-fav { margin: 0; }
.rc-fav { margin-bottom: 16px; border-color: color-mix(in srgb, var(--accent, #0e9f6e) 35%, var(--border)); }
.rc-fav.dim { opacity: .55; }
.rc-gh { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rc-gh h2 { margin: 0; font-size: 16px; }
.rc-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); flex: none; }
.rc-ico .ico-svg { width: 18px; height: 18px; }
.rc-fav > .rc-gh > .ico-svg { width: 20px; height: 20px; color: #e0a100; fill: #f5c542; }
.rc-list { list-style: none; margin: 0; padding: 0; }
.rc-fav .rc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 16px; }
.rc-item { display: flex; align-items: flex-start; gap: 6px; border-top: 1px solid var(--border); }
.rc-list > .rc-item:first-child { border-top: 0; }
.rc-fav .rc-item { border-top: 0; }
.rc-item a { flex: 1; min-width: 0; display: block; padding: 9px 8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.rc-item a:hover { background: var(--surface-2); text-decoration: none; }
.rc-item a:hover b { color: var(--primary); }
.rc-item b { display: block; font-size: 14.5px; font-weight: 650; }
.rc-item span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.rc-star { flex: none; margin-top: 8px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; opacity: .45; }
.rc-item:hover .rc-star, .rc-star:focus-visible { opacity: 1; }
.rc-star:hover { background: var(--surface-2); color: #e0a100; }
.rc-star.on { opacity: 1; color: #e0a100; }
.rc-star.on .ico-svg, .rc-favbtn.on .ico-svg { fill: #f5c542; color: #e0a100; }
.rc-star .ico-svg { width: 18px; height: 18px; }
.rc-none { text-align: center; padding: 30px 0; }
.rep-controls .row { align-items: flex-end; gap: 12px; }
.rep-controls label { min-width: 150px; }
.report .rep-foot { margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11.5px; text-align: right; }
.tbl.aging-d tr.grp td { background: color-mix(in srgb, var(--primary) 7%, transparent); font-weight: 700; }
.tbl.aging-d tr.grp a { color: var(--primary); }
.tbl.aging-d tr.sub td { font-weight: 700; border-bottom: 2px solid var(--border-2); }
@media (max-width: 860px) { .rc-grid { grid-template-columns: minmax(0, 1fr); } }

/* Reports print on A4: portrait, or landscape for wide reports (more than 7 columns). */
@page wide { size: A4 landscape; margin: 10mm; }
@media print {
  main:has(> .page-head + .rep-controls) > .page-head { display: none !important; }
  .report.rep-wide { page: wide; }
  .report { font-size: 10pt; }
  .report .stmt td, .report .tbl td { font-size: 9.5pt; padding: 4px 8px; }
  .report .tbl thead { display: table-header-group; }
  .report .tbl tr { break-inside: avoid; }
  .report .tbl-wrap { overflow: visible; }
  .report .rep-h { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rc-star, .rc-favbtn { display: none !important; }
}
.rc-grid { display: block; columns: 3 340px; column-gap: 16px; }
.rc-grid > .rc-grp { break-inside: avoid; margin-bottom: 16px; display: block; }
.rc-grid > .rc-grp[hidden] { display: none; }
@media print {
  .report.card { border: 0 !important; box-shadow: none !important; padding: 0 !important; background: none !important; }
  .report .tbl, .report .stmt { width: 100%; max-width: none; min-width: 0 !important; }
  .report .stmt td, .report .tbl td, .report .tbl th { font-size: 9pt; padding: 3px 6px; }
  .report .stmt tr.grand td { font-size: 10pt; }
  .report .stmt td:first-child { min-width: 40mm; }
  .report.rep-wide .stmt td, .report.rep-wide .tbl td, .report.rep-wide .tbl th { font-size: 7.5pt; padding: 3px 4px; }
  .report.rep-wide .stmt tr.grand td { font-size: 8.5pt; }
  .report .rep-h h2 { font-size: 15pt; }
}

/* ------------ v1.4: comparison options, management accounts pack */
.rep-controls [hidden] { display: none !important; }
.rep-controls .check { min-width: 0; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.rep-controls .cmp-more.row { gap: 14px; align-items: center; }
.kpi-t td:first-child { min-width: 260px; }
.ma-controls .hint { margin: 8px 0 0; }
.ma-notes { display: block; margin-top: 12px; }
.ma-notes textarea { width: 100%; margin-top: 4px; }
.ma-pick { position: relative; align-self: flex-end; margin-bottom: 9px; }
.ma-pick > summary { list-style: none; cursor: pointer; padding: 9px 34px 9px 12px; border: 1px solid var(--border-2); border-radius: 8px; background: var(--surface); position: relative; white-space: nowrap; }
.ma-pick > summary::-webkit-details-marker { display: none; }
.ma-pick > summary::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .6; }
.ma-pick > summary b { font-weight: 600; color: var(--muted); }
.ma-pick-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 300px; max-height: 360px; overflow: auto; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .35); }
.ma-pick-list label.check { display: flex; gap: 8px; align-items: center; padding: 5px 0; margin: 0; min-width: 0; font-weight: 500; }
.ma-pick-act { display: flex; gap: 8px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.ma-doc { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 8px 0 30px; }
.ma-page { width: 210mm; max-width: 100%; min-height: 297mm; padding: 14mm 14mm 12mm; background: #fff; color: #1a1a1a; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 12px 40px -12px rgba(0, 0, 0, .35); display: flex; flex-direction: column; overflow-x: auto; --text: #1a1a1a; --muted: #666; --border: #ddd; --border-2: #aaa; --surface: #fff; --surface-2: #f4f5f7; }
.ma-page.rep-wide { width: 297mm; min-height: 210mm; }
.ma-page.report { font-size: 12px; }
.ma-ph { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: #666; border-bottom: 1px solid #ddd; padding-bottom: 6px; margin-bottom: 14px; }
.ma-ph span:first-child { font-weight: 700; color: #14213d; }
.ma-h { margin: 0 0 2px; font-size: 19px; color: #14213d; }
.ma-sub { color: #666; font-size: 12px; margin-bottom: 12px; }
.ma-pf { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; font-size: 10.5px; color: #888; border-top: 1px solid #e3e3e3; }
.ma-page .tbl-wrap { margin-bottom: 10px; }
.ma-text { font-size: 13px; line-height: 1.6; white-space: normal; }
.ma-cover { padding: 18mm 18mm 14mm; }
.ma-cv-top { display: flex; align-items: center; gap: 16px; font-size: 13px; }
.ma-cv-top b { font-size: 16px; color: #14213d; }
.ma-logo { max-height: 64px; max-width: 180px; object-fit: contain; }
.ma-cv-mid { margin: 46mm 0 20mm; border-left: 6px solid #14213d; padding-left: 18px; }
.ma-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; color: #3a6ea5; }
.ma-cv-mid h1 { font-size: 38px; margin: 6px 0 8px; color: #14213d; letter-spacing: -.02em; }
.ma-per { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.ma-toc h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: #14213d; margin: 0 0 8px; }
.ma-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.ma-toc li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 13.5px; }
.ma-toc li i { flex: 1; border-bottom: 1px dotted #bbb; }
.ma-cv-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: #777; border-top: 1px solid #ddd; padding-top: 8px; }
@media screen and (max-width: 860px) { .ma-page, .ma-page.rep-wide { width: 100%; min-height: 0; padding: 18px 14px; } .ma-cv-mid { margin: 30px 0; } }
@media print {
  main:has(> .page-head + .ma-controls) > .page-head { display: none !important; }
  .ma-doc { display: block; padding: 0; }
  .ma-page { width: auto; max-width: none; min-height: calc(297mm - 24mm - 2mm); padding: 0; margin: 0; box-shadow: none; border-radius: 0; overflow: visible; break-after: page; page-break-after: always; }
  .ma-page:last-child { break-after: auto; page-break-after: auto; }
  .ma-page.rep-wide { width: auto; min-height: calc(210mm - 20mm - 2mm); }
  .ma-page.ma-cover { padding: 6mm 4mm 0; }
  .ma-cover, .ma-ph, .ma-h, .ma-cv-mid { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.role-prev { margin-top: -4px; }
.pw-gen { display: flex; gap: 6px; align-items: center; }
.pw-gen input { flex: 1; min-width: 0; margin: 0; }
.role-q { padding: 4px 8px; font-size: 13px; min-width: 150px; margin: 0; }
.acc-t th.c, .acc-t td.c { text-align: center; padding-left: 4px; padding-right: 4px; }
.acc-t th.c { font-size: 11.5px; }
.lv { display: inline-block; min-width: 34px; padding: 2px 6px; border-radius: 6px; font-size: 11.5px; font-weight: 650; text-align: center; }
.lv.edit { background: color-mix(in srgb, #0e9f6e 16%, transparent); color: #067a52; }
.lv.view { background: color-mix(in srgb, #3a6ea5 16%, transparent); color: #2d5b8c; }
.lv.none { color: var(--muted); }
.tpl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tpl { border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.tpl-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tpl p { margin: 6px 0 8px; }

/* ------------ book review */
.rv-top{display:grid;grid-template-columns:auto 1fr;gap:18px 22px;align-items:center}
.rv-score{--c:var(--ok);width:96px;height:96px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:conic-gradient(var(--c) calc(var(--p)*1%),var(--border) 0);position:relative}
.rv-score::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface)}
.rv-score>*{position:relative}.rv-score b{font-size:28px;line-height:1}.rv-score span{font-size:11px;color:var(--muted)}
.rv-score.warn{--c:var(--warn)}.rv-score.err{--c:var(--danger)}
.rv-score.sm{width:52px;height:52px}.rv-score.sm::before{inset:6px}.rv-score.sm b{font-size:16px}
.rv-sum h2{margin:0 0 2px}
.rv-pills{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.rv-pill{font-size:12px;font-weight:600;padding:2px 10px;border-radius:99px;background:var(--surface-2)}
.rv-pill.err,.rv-sev.error{background:#fee2e2;color:#991b1b}.rv-pill.warn,.rv-sev.warn{background:#fef3c7;color:#92400e}.rv-pill.tip,.rv-sev.tip{background:#e0f2fe;color:#075985}
.rv-cats{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.rv-cat{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:none;color:inherit;cursor:pointer;text-align:left;font:inherit;font-size:13px}
.rv-cat span{flex:1}.rv-cat .ico-svg{width:16px;height:16px;opacity:.7}.rv-cat b .ico-svg{opacity:1;color:#16a34a}
.rv-cat.err{border-color:#fca5a5}.rv-cat.warn{border-color:#fcd34d}.rv-cat.on{outline:2px solid var(--primary);outline-offset:-1px}
.rv-n{opacity:.65;font-size:11px}
.rv-f{padding:0;overflow:hidden;border-left:4px solid #93c5fd}.rv-f.error{border-left-color:#dc2626}.rv-f.warn{border-left-color:#d97706}.rv-f.ig{opacity:.6}
.rv-f>summary{display:flex;gap:12px;align-items:center;padding:12px 16px;cursor:pointer;list-style:none}
.rv-f>summary::-webkit-details-marker{display:none}
.rv-t{flex:1;display:flex;flex-direction:column;gap:2px}
.rv-sev{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:6px;white-space:nowrap}
.rv-why{margin:0 16px 10px;color:var(--muted)}
.rv-items{margin:0}.rv-items td{padding:6px 16px}
.rv-act{gap:8px;padding:10px 16px;border-top:1px solid var(--border)}
.rv-dash{display:flex;align-items:center;gap:14px;margin:14px 0;text-decoration:none;color:inherit;padding:12px 16px}
.rv-dt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.rv-dt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rv-pill.err,:root:not([data-theme="light"]) .rv-sev.error{background:#7f1d1d;color:#fecaca}:root:not([data-theme="light"]) .rv-pill.warn,:root:not([data-theme="light"]) .rv-sev.warn{background:#78350f;color:#fde68a}:root:not([data-theme="light"]) .rv-pill.tip,:root:not([data-theme="light"]) .rv-sev.tip{background:#0c4a6e;color:#bae6fd}}
:root[data-theme="dark"] .rv-pill.err,:root[data-theme="dark"] .rv-sev.error{background:#7f1d1d;color:#fecaca}:root[data-theme="dark"] .rv-pill.warn,:root[data-theme="dark"] .rv-sev.warn{background:#78350f;color:#fde68a}:root[data-theme="dark"] .rv-pill.tip,:root[data-theme="dark"] .rv-sev.tip{background:#0c4a6e;color:#bae6fd}
@media print{.rv-f{break-inside:avoid}.rv-f:not([open]) .rv-why{display:none}}
@media (max-width:600px){.rv-top{grid-template-columns:1fr}.rv-score{margin:auto}}

/* ------------ practice tools */
.pr-t td{vertical-align:top}.pr-score{display:inline-grid;place-items:center;min-width:34px;height:24px;border-radius:7px;font-weight:700;font-size:13px;background:var(--surface-2)}
.pr-score.ok{color:var(--ok)}.pr-score.warn{color:var(--warn)}.pr-score.err{color:var(--danger)}
.nowrap{white-space:nowrap}
.cl-sum{justify-content:space-between;align-items:center;gap:12px}.cl-prog{display:flex;align-items:center;gap:12px;min-width:260px}.cl-prog .meter{width:180px}
.cl-t td{vertical-align:middle}.cl-t tr.cl-done td:nth-child(2) a{color:var(--muted);text-decoration:line-through}
.cl-note{width:100%;min-width:160px}
.q-card{display:flex;flex-direction:column;gap:6px}.q-card.closed{opacity:.75}.q-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.q-text{margin:2px 0;font-size:15px;white-space:pre-wrap}.q-ans{background:var(--surface-2);border-radius:8px;padding:8px 12px}.q-ans p{margin:4px 0 0;white-space:pre-wrap}
.q-act{gap:8px;align-items:center}.q-act .grow{flex:1}
.tool-c{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}.tool-c:hover{border-color:var(--primary)}
.q-dash .k-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--surface-2)}
.pr-t td:first-child{min-width:210px}
/* import from other software */
.imp-pad{padding:16px 18px 0;margin:0}
p.imp-pad{padding-top:4px}
.imp-steps td{vertical-align:top}.imp-steps td.imp-n{width:28px;color:var(--muted);font-weight:600}
.imp-how{margin-top:4px;color:var(--text);opacity:.85}
.imp-note{max-width:520px;align-self:center}
.imp-list{margin:0;padding-left:20px;line-height:1.8}
.imp-map label{min-width:0}.imp-map select{width:100%}
.imp-opts{margin-top:14px}.imp-opts h3{margin:0 0 6px}
.imp-cb{display:flex;gap:10px;align-items:flex-start;margin:8px 0;font-weight:500;cursor:pointer}.imp-cb input{margin-top:3px;flex:none}.imp-cb .small{display:block;font-weight:400;margin-top:1px}
.imp-steps td{white-space:normal}.imp-steps td.nowrap,.imp-steps td.r{white-space:nowrap}
.imp-sum{gap:8px;margin-bottom:8px}
.imp-msgs{margin-top:10px;padding:10px 14px;border-radius:8px;border:1px solid var(--border)}.imp-msgs ul{margin:6px 0 0;padding-left:18px}.imp-msgs li{margin:2px 0}
.imp-msgs.err{border-color:color-mix(in srgb,var(--danger,#c0392b) 45%,transparent);background:color-mix(in srgb,var(--danger,#c0392b) 6%,transparent)}
.imp-msgs.warn{border-color:color-mix(in srgb,#d4a017 50%,transparent);background:color-mix(in srgb,#d4a017 7%,transparent)}
@media (max-width: 860px) {
  .co-chip .co-txt { display: none; } /* the later desktop rule for the company name otherwise shows it on phones */
  .imp-steps tr { display: grid; grid-template-columns: 28px minmax(0, 1fr); border-bottom: 1px solid var(--border); padding: 6px 0; }
  .imp-steps td { border: 0; padding: 4px 12px; }
  .imp-steps td:nth-child(n+3) { grid-column: 2; text-align: left; white-space: normal; }
}

/* ---------- 1.9: filed VAT returns, year end, banks */
.lock-note { display: flex; gap: 10px; align-items: flex-start; }
.lock-note > .ico-svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.lock-note .row { gap: 8px; }
.mt-s { margin-top: 8px; }
.badge.b-filed { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); }
.vat-filter { gap: 10px; align-items: flex-end; margin: 10px 0; }
.vat-filter .grow { flex: 1 1 200px; }
.yr-links { gap: 8px; }
.yr-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.yr-checks li { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.yr-checks li .ico-svg { width: 16px; height: 16px; flex: none; }
.yr-checks li.ok .ico-svg { color: var(--ok); }
.yr-checks li.warn .ico-svg { color: var(--warn); }
.yr-checks li.err .ico-svg { color: var(--danger); }
.bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.bank-card { display: flex; flex-direction: column; gap: 12px; color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.bank-card:hover { border-color: var(--border-2); transform: translateY(-1px); }
.bc-h { display: flex; gap: 10px; align-items: center; }
.bc-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); }
.bc-ico .ico-svg { width: 18px; height: 18px; }
.bc-bal { display: flex; flex-direction: column; gap: 2px; }
.bc-bal b { font-size: 20px; }
.bc-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.bc-meta .ico-svg { width: 13px; height: 13px; vertical-align: -2px; }
td.c-chk .ico-svg { width: 15px; height: 15px; color: var(--muted); }
.badge.b-cancelled { background: var(--surface-2); color: var(--muted); }

/* ------------ 1.9.2: compact reports on screen (print layout unchanged) */
@media screen {
  /* report centre */
  .rc-bar { margin-bottom: 10px; }
  .rc-search input { height: 36px; font-size: 13.5px; box-shadow: none; }
  .rc-grid { columns: 4 260px; column-gap: 12px; }
  .rc-grid > .rc-grp { margin-bottom: 12px; }
  .rc-grid > .card, .rc-fav { padding: 10px 12px; }
  .rc-fav { margin-bottom: 12px; }
  .rc-gh { gap: 8px; margin-bottom: 2px; }
  .rc-gh h2 { font-size: 13.5px; }
  .rc-ico { width: 24px; height: 24px; border-radius: 7px; }
  .rc-ico .ico-svg { width: 14px; height: 14px; }
  .rc-fav > .rc-gh > .ico-svg { width: 16px; height: 16px; }
  .rc-fav .rc-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .rc-item { align-items: center; gap: 2px; }
  .rc-item a { padding: 4px 6px; border-radius: 6px; }
  .rc-item b { font-size: 13px; font-weight: 600; }
  .rc-item span { font-size: 11.5px; line-height: 1.35; margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rc-star { margin-top: 0; width: 24px; height: 24px; border-radius: 6px; }
  .rc-star .ico-svg { width: 14px; height: 14px; }

  /* report pages: title bar, filters, heading, table */
  main:has(> .rep-controls) > .page-head { margin-bottom: 8px; align-items: center; }
  main:has(> .rep-controls) > .page-head h1 { font-size: 19px; margin: 0; }
  main:has(> .rep-controls) > .page-head .back { font-size: 11.5px; }
  main:has(> .rep-controls) > .page-head .actions { gap: 6px; }
  main:has(> .rep-controls) > .page-head .actions .btn { height: 30px; padding: 0 10px; font-size: 12.5px; }
  .rep-controls { padding: 8px 12px; margin-bottom: 10px; }
  .rep-controls .row { gap: 6px 10px; }
  .rep-controls label { min-width: 0; font-size: 11px; }
  .rep-controls select, .rep-controls input:not([type=checkbox]) { height: 30px; padding: 3px 7px; font-size: 13px; margin-top: 2px; }
  .rep-controls select { max-width: 190px; }
  .rep-controls input[type=date] { width: 132px; }
  .rep-controls input[type=search], .rep-controls input[type=text], .rep-controls input[type=number] { width: 130px; }
  .rep-controls label.check { padding-bottom: 6px; font-size: 12px; }
  .report { padding: 12px 16px; font-size: 13.5px; }
  .report .rep-h { padding-bottom: 6px; margin-bottom: 6px; border-bottom-width: 1px; }
  .report .rep-co { font-size: 11.5px; font-weight: 600; }
  .report .rep-h h2 { font-size: 16px; margin: 1px 0; }
  .report .rep-h .muted { font-size: 11.5px; }
  .report .tbl th { padding: 5px 8px; font-size: 10.5px; }
  .report .tbl td { padding: 4px 8px; font-size: 13px; }
  .report .stmt td { padding: 3px 10px; font-size: 13px; }
  .report .stmt thead th { font-size: 10.5px; padding: 5px 10px; }
  .report .stmt tr.h td { padding-top: 6px; font-size: 11px; }
  .report .stmt tr.line td:first-child { padding-left: 18px; }
  .report .stmt tr.grand td { font-size: 14px; }
  .report .stmt td.pct { font-size: 11.5px; }
  .report h3 { font-size: 13.5px; margin: 10px 0 4px; }
  .report .rep-foot { margin-top: 10px; padding-top: 4px; font-size: 10.5px; }
}
@media screen and (max-width: 860px) {
  .rep-controls .row.wrap > span.row { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px 10px; }
  .rep-controls .row.wrap > span.row:empty { display: none; }
  .rep-controls label:not(.check) { flex: 1 1 calc(50% - 10px); }
  .rep-controls select, .rep-controls input[type=date], .rep-controls input[type=search], .rep-controls input[type=text], .rep-controls input[type=number] { width: 100%; max-width: none; }
  main:has(> .rep-controls) > .page-head .actions .btn { height: 28px; padding: 0 8px; }
}

/* =====================================================================
   v11 (2.0): clean look in the brand colours. Inter, a light grey canvas, white cards with
   hairline borders, one clear blue for actions, a deep navy menu, quiet
   tables with tabular figures. Overrides every earlier theme layer above.
   ===================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter.woff2") format("woff2"); }
:root {
  --navy: #0b3a6f; --navy-2: #1559a6; --navy-deep: #072a52;
  --blue: #1b64b4; --blue-h: #154f8f; --blue-soft: #e8f0fa; --blue-ink: #164f8c;
  --gold: var(--blue); --gold-2: #3f84cf; --gold-soft: var(--blue-soft); --gold-ink: var(--blue-ink);
  --bg: #f2f4f7; --surface: #ffffff; --surface-2: #f7f8fa; --text: #1a2433; --muted: #5d6878;
  --border: #e1e5eb; --border-2: #cdd4dd; --primary: var(--blue); --primary-h: var(--blue-h); --on-primary: #ffffff;
  --danger: #c8312b; --warn: #b26a00; --ok: #0f8a5f; --info: #1b64b4;
  --inc: #1b64b4; --exp: #9cc0e6; --net: #0f8a5f; --ring: rgba(27, 100, 180, .28);
  --field: #ffffff;
  --side-bg: #0b2e57; --side-fg: #d5deea; --side-muted: #8fa1b8; --side-hover: rgba(255, 255, 255, .07);
  --side-active: rgba(255, 255, 255, .12); --side-accent: #5fb8f5; --side-line: rgba(255, 255, 255, .09);
  --glass: rgba(255, 255, 255, .92); --hdr-bg: #ffffff; --scrim: rgba(13, 42, 75, .45);
  --shadow: 0 1px 2px rgba(16, 30, 54, .06);
  --shadow-lg: 0 16px 40px -12px rgba(16, 30, 54, .28), 0 4px 10px rgba(16, 30, 54, .06);
  --radius: 8px;
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Noto Sans Arabic", "Segoe UI Arabic", sans-serif;
  --font-display: var(--font);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e141c; --surface: #161e29; --surface-2: #1b2532; --text: #e7edf4; --muted: #9aa6b5;
    --border: #263243; --border-2: #33425a; --primary: #3aa0e6; --primary-h: #62b5ee; --on-primary: #04192b;
    --blue: #3aa0e6; --blue-soft: rgba(58, 160, 230, .14); --blue-ink: #7cc3f2; --gold-2: #3aa0e6;
    --danger: #f07b72; --warn: #e9b45a; --ok: #4cc493; --info: #6bb8ef;
    --inc: #3aa0e6; --exp: #29506f; --net: #4cc493; --ring: rgba(58, 160, 230, .35);
    --field: #121a24; --side-bg: #0a1420; --glass: rgba(22, 30, 41, .92); --hdr-bg: #161e29; --scrim: rgba(0, 0, 0, .6);
    --shadow: none; --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  --bg: #0e141c; --surface: #161e29; --surface-2: #1b2532; --text: #e7edf4; --muted: #9aa6b5;
  --border: #263243; --border-2: #33425a; --primary: #3aa0e6; --primary-h: #62b5ee; --on-primary: #04192b;
  --blue: #3aa0e6; --blue-soft: rgba(58, 160, 230, .14); --blue-ink: #7cc3f2; --gold-2: #3aa0e6;
  --danger: #f07b72; --warn: #e9b45a; --ok: #4cc493; --info: #6bb8ef;
  --inc: #3aa0e6; --exp: #29506f; --net: #4cc493; --ring: rgba(58, 160, 230, .35);
  --field: #121a24; --side-bg: #0a1420; --glass: rgba(22, 30, 41, .92); --hdr-bg: #161e29; --scrim: rgba(0, 0, 0, .6);
  --shadow: none; --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, .7);
}

/* type: Inter, regular body, semibold titles, tabular figures */
body { font-family: var(--font); font-size: 14px; font-weight: 400; letter-spacing: -.006em; font-feature-settings: "cv11", "ss01"; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
input, select, textarea, button, .btn { font-family: var(--font); }
h1, .dash-head h1, .modal-head h2, .lg-title, .lg-h h1, .side .brand-name { font-family: var(--font); font-weight: 650; letter-spacing: -.02em; }
h1 { font-size: 22px; }
.dash-head h1 { font-size: 24px; }
h2, h3, .card-h h2 { font-weight: 600; letter-spacing: -.012em; }
.modal-head h2 { font-size: 17px; font-weight: 650; }
.kpi2 .kpi-v, .kpi .kpi-v, .big, .mb-v, #bandTotal, .doc-band b, .sh-total { font-family: var(--font); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.num, .tbl td, .tbl td.r, .totals td, .stmt td { font-variant-numeric: tabular-nums; }
.tbl td.r, .totals td, .num { font-weight: 500; }
.eyebrow { color: var(--blue-ink); letter-spacing: .08em; }
.kpi-l, .tbl th, .nav-h, .th-h, .co-m-h, .lbl { letter-spacing: .04em; }
::selection { background: color-mix(in srgb, var(--blue) 25%, transparent); }

/* header: plain white bar */
.hdr { background: var(--hdr-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--border); }
.search-trigger { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; }
.search-trigger:hover { border-color: var(--border-2); background: var(--surface); }
.co-chip { border-radius: 6px; }
.co-chip:hover { border-color: var(--border-2); }
.avatar { background: var(--navy); color: #fff; box-shadow: none; letter-spacing: .02em; }
.avatar.user { background: var(--blue-soft); color: var(--blue-ink); box-shadow: none; }
.hdr-ico, .icon-btn { border-radius: 6px; color: var(--muted); }
.hdr-ico:hover, .icon-btn:hover { color: var(--text); background: var(--surface-2); }

/* sidebar: flat deep navy, light active pill with a blue marker */
.side { background: var(--side-bg); color: var(--side-fg); scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.side .brand { border-bottom-color: var(--side-line); }
.side .brand-name { color: #fff; font-weight: 650; }
.side .brand-sub { color: var(--side-muted); opacity: 1; letter-spacing: .02em; }
.side .logo { box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
#nav a, .nav-gh { color: var(--side-fg); border-radius: 6px; font-weight: 450; }
#nav a:hover, .nav-gh:hover { color: #fff; background: var(--side-hover); }
#nav a.active { background: var(--side-active); color: #fff; font-weight: 600; }
#nav a.active .ico-svg { color: var(--side-accent); }
#nav a.active::before { background: var(--side-accent); box-shadow: none; width: 3px; top: 5px; bottom: 5px; }
.nav-grp.has-active > .nav-gh { color: #fff; }
.nav-grp.has-active > .nav-gh > .ico-svg:first-child { color: var(--side-accent); }
.nav-sub a { border-left-color: var(--side-line) !important; }
.nav-h { color: var(--side-muted); }

/* cards and panels: white, hairline border, barely-there shadow */
.card, .kpi2, .lg-card { border-radius: var(--radius); border-color: var(--border); box-shadow: var(--shadow); }
.kpi2::before, .kpi2::after { display: none; }
.k-ico { width: 36px; height: 36px; border-radius: 8px; background: var(--blue-soft); border: 0; box-shadow: none; color: var(--blue-ink); }
:root[data-theme="dark"] .k-ico { background: var(--blue-soft); }
.card-h h2 .ico-svg, .role-card h2 .ico-svg { color: var(--blue); }

/* buttons: solid blue primary, white secondary */
.btn { border-radius: 6px; font-weight: 550; font-size: 13px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); box-shadow: none; }
.btn:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--text) 25%, var(--border-2)); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: none; }
.btn.primary:hover { background: var(--primary-h); border-color: var(--primary-h); color: var(--on-primary); }
.btn:focus-visible, input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--ring); border-color: var(--blue); }

/* fields */
input, select, textarea { border-radius: 6px; border-color: var(--border-2); background: var(--field); }

/* tables: grey header text, hairline rows, soft blue hover */
.tbl th { background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.tbl td { border-bottom: 1px solid var(--border); }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--blue) 4%, var(--surface)); }
.tbl tr.total td, .tbl tr.grand td, .tbl tfoot td { font-weight: 650; }

/* tabs and status badges */
.seg { background: var(--surface-2); border-color: var(--border); border-radius: 6px; }
.seg > .on { background: var(--surface); box-shadow: 0 1px 2px rgba(16, 30, 54, .08), inset 0 -2px 0 var(--blue); }
.seg .on .cnt { background: var(--blue-soft); color: var(--blue-ink); }
.badge { border-radius: 4px; font-weight: 600; font-size: 11.5px; padding: 2px 8px; border: 0; }
.b-paid, .b-applied { background: color-mix(in srgb, var(--ok) 13%, var(--surface)); color: var(--ok); }
.b-overdue { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.b-partial, .b-open { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); }
.b-unpaid { background: var(--blue-soft); color: var(--blue-ink); }

/* dialogs and menus */
.modal, .qc-menu, .cmdk, .co-menu, .um-menu { border-radius: 10px; border-color: var(--border); box-shadow: var(--shadow-lg); }
.toast { border-radius: 8px; }

/* ---------------------------------------------------------------- 2.0: attachments, bank statements, assistant */
button.link { background: none; border: 0; padding: 0; color: var(--blue); font: inherit; cursor: pointer; text-align: left; }
button.link:hover { text-decoration: underline; }
.att-card { margin-top: 14px; }
.att-card .card-h h2 { display: flex; align-items: center; gap: 6px; }
.att-card .card-h h2 .ico-svg { width: 16px; height: 16px; }
.att-card.drag { outline: 2px dashed var(--blue); outline-offset: -6px; }
.att-drop { color: var(--muted); font-size: 13px; padding: 4px 0; }
.att-drop:empty { display: none; }
.att-list { list-style: none; margin: 0; padding: 0; }
.att-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.att-list li:first-child { border-top: 0; }
.att-acts { margin-left: auto; display: flex; gap: 2px; }
.att-add { cursor: pointer; }
.bf-tbl td { vertical-align: top; }
.bf-tbl td .btn.sm + .btn.sm { margin-left: 4px; }
label.inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
label.inline select { width: auto; }
.as-btn { position: relative; }
.as-btn .as-n { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.as-list { list-style: none; margin: 0; padding: 0; }
.as-list li { display: flex; align-items: flex-start; gap: 6px; border-top: 1px solid var(--border); }
.as-list li:first-child { border-top: 0; }
.as-list li > a { flex: 1; display: flex; gap: 10px; padding: 9px 2px; color: inherit; text-decoration: none; min-width: 0; }
.as-list li > a:hover b { color: var(--blue); }
.as-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-t small { color: var(--muted); font-size: 12.5px; }
.as-ico { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.as-ico .ico-svg { width: 16px; height: 16px; }
.as-high .as-ico { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.as-med .as-ico { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); }
.as-x { margin-top: 8px; opacity: .45; }
.as-list li:hover .as-x { opacity: 1; }
.as-dash { margin-bottom: 14px; }
.as-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: start; }
@media (max-width: 980px) { .as-grid { grid-template-columns: 1fr; } }
.as-chat { display: flex; flex-direction: column; min-height: 520px; }
.as-log { flex: 1; overflow-y: auto; max-height: 62vh; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 10px; }
.as-msg { max-width: 92%; padding: 9px 12px; border-radius: 10px; line-height: 1.5; font-size: 14px; }
.as-msg p { margin: 0 0 6px; } .as-msg p:last-child { margin-bottom: 0; }
.as-msg ul, .as-msg ol { margin: 4px 0 6px 18px; padding: 0; }
.as-msg h4 { margin: 6px 0 4px; font-size: 14px; }
.as-msg.me { align-self: flex-end; background: var(--blue); color: #fff; }
.as-msg.bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); }
.as-msg.as-wait { color: var(--muted); font-style: italic; }
.as-msg .as-tbl { margin: 6px 0; font-size: 13px; }
.as-msg .tbl-wrap { max-width: 100%; overflow-x: auto; }
.as-hello { color: var(--muted); }
.as-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 13px; cursor: pointer; }
.chip:hover { border-color: var(--blue); color: var(--blue); }
.as-in { display: flex; gap: 8px; margin: 8px 0 6px; }
.as-in input { flex: 1; }
.as-hits { margin: 4px 0 0 16px; padding: 0; }

/* =====================================================================
   v12 (2.1): light royal. One colour (royal blue) and its tints on white and soft grey.
   Light sidebar and header, no dark panels. Red and green only inside small status labels.
   Inter for text, Plus Jakarta Sans for titles and figures. Overrides every layer above.
   ===================================================================== */
:root, :root[data-theme="light"] {
  --brand: #2c40a0; --brand-h: #233486; --brand-ink: #24368c; --brand-50: #f4f6fd; --brand-100: #e8ecfa; --brand-200: #d3dbf5;
  --navy: var(--brand); --navy-2: var(--brand); --navy-deep: var(--brand-h);
  --blue: var(--brand); --blue-h: var(--brand-h); --blue-soft: var(--brand-100); --blue-ink: var(--brand-ink);
  --gold: var(--brand); --gold-2: var(--brand); --gold-soft: var(--brand-100); --gold-ink: var(--brand-ink);
  --bg: #f6f7fa; --surface: #ffffff; --surface-2: #f9fafc; --text: #1c2234; --muted: #646b7f;
  --border: #e6e8ef; --border-2: #d6dae4; --primary: var(--brand); --primary-h: var(--brand-h); --on-primary: #ffffff;
  --danger: #b8382f; --warn: #94640f; --ok: #2b7a57; --info: var(--brand);
  --inc: var(--brand); --exp: #c7cfee; --net: #16205a; --ring: rgba(44, 64, 160, .22);
  --field: #ffffff;
  --side-bg: #ffffff; --side-fg: #3b4257; --side-muted: #8a90a2; --side-hover: var(--brand-50);
  --side-active: var(--brand-100); --side-accent: var(--brand); --side-line: #eceef4;
  --glass: rgba(255, 255, 255, .96); --hdr-bg: #ffffff; --scrim: rgba(28, 34, 52, .32);
  --shadow: 0 1px 2px rgba(28, 34, 52, .04), 0 1px 3px rgba(28, 34, 52, .03);
  --shadow-lg: 0 18px 44px -14px rgba(28, 34, 52, .22), 0 4px 10px rgba(28, 34, 52, .05);
  --radius: 12px;
  --font-display: "Plus Jakarta Sans", var(--font);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #8a9bf0; --brand-h: #a3b1f4; --brand-ink: #b3bff6; --brand-50: rgba(138, 155, 240, .08); --brand-100: rgba(138, 155, 240, .15); --brand-200: rgba(138, 155, 240, .25);
    --bg: #111421; --surface: #181c2c; --surface-2: #1c2133; --text: #e8eaf3; --muted: #9aa0b5; --border: #272d43; --border-2: #343b55;
    --on-primary: #0e1230; --exp: #3a4472; --net: #e8eaf3; --ring: rgba(138, 155, 240, .3); --field: #141827;
    --danger: #ef8a80; --warn: #e2b866; --ok: #6cc59b;
    --side-bg: #151929; --side-fg: #c9cde0; --side-muted: #7d849c; --side-line: #252a3e; --hdr-bg: #151929; --glass: rgba(24, 28, 44, .96);
    --shadow: none; --shadow-lg: 0 18px 44px -14px rgba(0, 0, 0, .65);
  }
}
:root[data-theme="dark"] {
  --brand: #8a9bf0; --brand-h: #a3b1f4; --brand-ink: #b3bff6; --brand-50: rgba(138, 155, 240, .08); --brand-100: rgba(138, 155, 240, .15); --brand-200: rgba(138, 155, 240, .25);
  --bg: #111421; --surface: #181c2c; --surface-2: #1c2133; --text: #e8eaf3; --muted: #9aa0b5; --border: #272d43; --border-2: #343b55;
  --on-primary: #0e1230; --exp: #3a4472; --net: #e8eaf3; --ring: rgba(138, 155, 240, .3); --field: #141827;
  --danger: #ef8a80; --warn: #e2b866; --ok: #6cc59b;
  --side-bg: #151929; --side-fg: #c9cde0; --side-muted: #7d849c; --side-line: #252a3e; --hdr-bg: #151929; --glass: rgba(24, 28, 44, .96);
  --shadow: none; --shadow-lg: 0 18px 44px -14px rgba(0, 0, 0, .65);
}

/* ---- type scale: 14.5px text, 26px page titles, 16px card titles, 12px labels ---- */
body { font-size: 14.5px; line-height: 1.5; letter-spacing: -.005em; background: var(--bg); color: var(--text); }
h1, .dash-head h1, .page-head h1 { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.022em; line-height: 1.2; color: var(--text); }
.dash-head h1 { font-size: 28px; }
.card-h h2, .card > h2, section.card h2 { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.012em; }
h2 { font-size: 17px; } h3 { font-size: 15px; }
.modal-head h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.muted.small, .small { font-size: 12.5px; }
label { font-size: 13px; font-weight: 550; color: var(--muted); }
input, select, textarea { font-size: 14px; min-height: 38px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--field); color: var(--text); }
input[type="checkbox"], input[type="radio"] { min-height: 0; accent-color: var(--brand); }
.btn, button.btn, a.btn { min-height: 38px; padding: 0 16px; font-size: 13.5px; font-weight: 600; border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; }
.btn.sm { min-height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn { background: var(--surface); border: 1px solid var(--border-2); color: var(--text); }
.btn:hover { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-ink); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-primary); box-shadow: 0 1px 2px rgba(44, 64, 160, .18); }
.btn.primary:hover { background: var(--brand-h); border-color: var(--brand-h); color: var(--on-primary); }
.btn.danger, .btn.del { color: var(--danger); }
a { color: var(--brand); }
.btn:focus-visible, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }

/* ---- header: white, quiet ---- */
.hdr { height: 62px; background: var(--hdr-bg); border-bottom: 1px solid var(--border); box-shadow: none; }
.search-trigger { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; min-height: 38px; color: var(--muted); }
.search-trigger:hover { background: var(--surface); border-color: var(--brand-200); }
#newBtn { background: var(--brand); border-color: var(--brand); color: #fff; }
#newBtn:hover { background: var(--brand-h); }
.hdr-ico, .icon-btn { border-radius: 8px; color: var(--muted); }
.hdr-ico:hover, .icon-btn:hover { background: var(--brand-50); color: var(--brand); }
.avatar { background: var(--brand-100); color: var(--brand-ink); box-shadow: none; font-weight: 700; }
.avatar.user { background: var(--brand-100); color: var(--brand-ink); }
.co-chip { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.co-chip:hover { border-color: var(--brand-200); background: var(--brand-50); }
.as-btn .as-n { background: var(--brand); }

/* ---- sidebar: white, royal blue for the current page ---- */
.side { background: var(--side-bg); color: var(--side-fg); border-right: 1px solid var(--border); scrollbar-color: var(--border-2) transparent; }
.side .brand { border-bottom: 1px solid var(--side-line); }
.side .brand-name { font-family: var(--font-display); color: var(--text); font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.side .brand-sub { color: var(--side-muted); }
.side .logo { background: #fff; box-shadow: 0 0 0 1px var(--border); }
#nav a, .nav-gh { color: var(--side-fg); font-size: 14px; font-weight: 500; border-radius: 8px; }
#nav a .ico-svg, .nav-gh > .ico-svg:first-child { color: var(--side-muted); }
#nav a:hover, .nav-gh:hover { background: var(--side-hover); color: var(--brand-ink); }
#nav a:hover .ico-svg, .nav-gh:hover > .ico-svg:first-child { color: var(--brand); }
#nav a.active { background: var(--side-active); color: var(--brand-ink); font-weight: 650; }
#nav a.active .ico-svg { color: var(--brand); }
#nav a.active::before { background: var(--brand); width: 3px; top: 7px; bottom: 7px; border-radius: 3px; box-shadow: none; }
.nav-grp.has-active > .nav-gh { color: var(--brand-ink); font-weight: 650; }
.nav-grp.has-active > .nav-gh > .ico-svg:first-child { color: var(--brand); }
.nav-sub a { border-left-color: var(--side-line) !important; }
.nav-h { color: var(--side-muted); font-size: 11px; letter-spacing: .08em; }
.side-collapse { color: var(--side-muted); }
.side-collapse:hover, .side-collapse:focus-visible { background: var(--side-hover); color: var(--brand); }

/* ---- page ---- */
main { padding: 26px 32px 64px; }
.page-head { margin-bottom: 22px; align-items: center; }
.eyebrow { color: var(--brand); }
.card, .kpi2, .lg-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card { padding: 20px 22px; }
.card-h { margin-bottom: 12px; }
.card-h h2 .ico-svg, .role-card h2 .ico-svg { color: var(--brand); }

/* ---- figures tiles: big royal figures, nothing cut off ---- */
.kpi-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi2 { padding: 18px 18px 16px; gap: 14px; transition: border-color .15s, box-shadow .15s; }
.kpi2:hover { border-color: var(--brand-200); box-shadow: 0 6px 18px -10px rgba(44, 64, 160, .25); text-decoration: none; }
.kpi2 > div { min-width: 0; }
.k-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-50); color: var(--brand); border: 1px solid var(--brand-100); box-shadow: none; flex: none; }
.kpi-l { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.kpi2 .kpi-v, .kpi .kpi-v { font-family: var(--font-display); font-size: clamp(19px, 1.65vw, 25px); font-weight: 700; letter-spacing: -.02em; color: var(--text); overflow: visible; text-overflow: clip; white-space: nowrap; margin: 4px 0 2px; }
.kpi2.neg-k .kpi-v { color: var(--danger); }
.kpi-s { font-size: 12.5px; color: var(--muted); }
.big, .mb-v, #bandTotal, .doc-band b, .sh-total { font-family: var(--font-display); font-weight: 700; }

/* ---- tables ---- */
.tbl { font-size: 14px; }
.tbl th { background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); padding-top: 11px; padding-bottom: 11px; }
.tbl td { border-bottom: 1px solid var(--border); padding-top: 11px; padding-bottom: 11px; }
.tbl tbody tr:hover td { background: var(--brand-50); }
.tbl tfoot td, .tbl tr.total td, .tbl tr.grand td { font-weight: 700; background: var(--surface-2); }
.tbl-wrap { border-radius: 10px; }

/* ---- tabs, badges ---- */
.seg { background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.seg > button, .seg > a { border-radius: 7px; font-weight: 550; color: var(--muted); }
.seg > .on { background: var(--surface); color: var(--brand-ink); box-shadow: 0 1px 2px rgba(28, 34, 52, .08), inset 0 0 0 1px var(--brand-200); }
.seg .on .cnt { background: var(--brand-100); color: var(--brand-ink); }
.badge { border-radius: 999px; font-size: 11.5px; font-weight: 650; padding: 2px 9px; background: var(--brand-50); color: var(--brand-ink); border: 0; }
.b-draft, .b-void, .b-cancelled { background: var(--surface-2); color: var(--muted); }
.b-paid, .b-applied, .b-cleared { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); color: var(--ok); }
.b-overdue, .b-bounced { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); color: var(--danger); }
.b-partial, .b-open, .b-unpaid { background: var(--brand-50); color: var(--brand-ink); }

/* ---- one colour for lists of things to do ---- */
.td-ico, .td.err .td-ico, .td.warn .td-ico, .td.info .td-ico,
.as-ico, .as-high .as-ico, .as-med .as-ico { background: var(--brand-50); color: var(--brand); border: 1px solid var(--brand-100); }
.as-msg.me { background: var(--brand); color: #fff; }
.chip:hover { border-color: var(--brand); color: var(--brand); }

/* ---- dialogs ---- */
.modal, .qc-menu, .cmdk, .co-menu, .um-menu { border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.toast { border-radius: 10px; }

/* ---- sign-in: the same look as the CRM (the picture on the left, a white form over it on the right) ---- */
#login { background: #fff; color: #0f172a; font-family: "Plus Jakarta Sans", var(--font); }
.lg-left { background: #0b1f4d url("../img/signin-bg.jpg") center / cover no-repeat !important; color: #fff; border-right: 0; }
.lg-left::after { display: block; z-index: -1; background: linear-gradient(180deg, rgba(11, 31, 77, .22), rgba(11, 31, 77, 0) 42%, rgba(11, 31, 77, .25)); }
.lg-eyebrow { color: rgba(255, 255, 255, .88); opacity: 1; font-weight: 600; letter-spacing: .16em; }
.lg-title { font-family: "Plus Jakarta Sans", var(--font); color: #fff; font-weight: 700; letter-spacing: -.02em; }
.lg-sub { color: rgba(255, 255, 255, .92); }
.lg-card { background: rgba(255, 255, 255, .14) !important; border: 1px solid rgba(255, 255, 255, .28) !important; color: #fff; border-radius: 14px; box-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lg-card b { color: #fff; letter-spacing: .06em; }
.lg-card span:not(.ci) { color: rgba(255, 255, 255, .85); }
.lg-card .ci { background: #fff; color: #1e3a8a; border: 0; border-radius: 12px; box-shadow: 0 6px 16px rgba(11, 31, 77, .25); }
.lg-right { background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), #fff url("../img/signin-bg.jpg") center / cover no-repeat !important; }
.lg-btn { background: #1e3a8a !important; box-shadow: none !important; border-radius: 8px; }
.lg-btn:hover { background: #172554 !important; }
.lg-in input:focus { border-color: #1e3a8a; box-shadow: 0 0 0 3px rgba(30, 58, 138, .12); }
.lg-support { background: #fff; border-color: #d5dbe3; color: #1e3a8a; }
.lg-support:hover { border-color: #1e3a8a; background: #f5f8ff; }

/* ---- banners and messages in the same single colour ---- */
.bk-banner, .notice { background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--text); }
.bk-banner > .ico-svg, .notice .ico-svg { color: var(--brand); }
.toast, .toast.warn, .toast.ok { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--brand); box-shadow: var(--shadow-lg); }
.toast.err { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--danger); }
.rv-score, .rv-score.warn, .rv-score.err { --c: var(--brand); }
.rv-pill, .rv-pill.err, .rv-pill.warn, .rv-pill.tip, .rv-sev, .rv-sev.error, .rv-sev.warn, .rv-sev.tip { background: var(--brand-50) !important; color: var(--brand-ink) !important; }
.rv-pill.err, .rv-sev.error { color: var(--danger) !important; }
.mb-bar .od { background: var(--brand-h); } .mb-bar .soon { background: var(--brand); } .mb-bar .later { background: var(--brand-200); }
.mb-seg.soon .mb-v { color: var(--text); }
.notice.warn, .pc-warn, .rules li.warn { background: var(--brand-50); border-color: var(--brand-100); color: var(--text); }
.warn-btn { border-color: var(--border-2); color: var(--brand-ink); }
.a0 { background: var(--brand-200); } .a1 { background: color-mix(in srgb, var(--brand) 45%, var(--surface)); } .a2 { background: color-mix(in srgb, var(--brand) 70%, var(--surface)); } .a3 { background: var(--brand); } .a4 { background: var(--brand-h); }
#login .lg-card, #login .lg-card *, #login .lg-eyebrow { text-shadow: none !important; }
#login .lg-title { font-size: clamp(30px, 4.4vh, 38px); text-shadow: 0 2px 10px rgba(11, 31, 77, .35) !important; }
#login .lg-sub { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .92); max-width: 440px; text-shadow: 0 1px 4px rgba(11, 31, 77, .35) !important; }
#login .lg-card .ci, #login .lg-card:nth-child(n) .ci { color: #1e3a8a !important; background: #fff !important; }
#login .lg-card:nth-child(2) .ci { color: #2563eb !important; }
#login .lg-card:nth-child(3) .ci { color: #0284c7 !important; }
#login .lg-ill { filter: drop-shadow(0 18px 30px rgba(11, 31, 77, .35)); }
#login .lg-win { background: #fff; }
#login .lg-bar { background: #eef2fb; border-bottom: 0; }
#login .lg-bar span { background: #dbe3f4; }
#login .lg-side { background: #1e3a8a; }
#login .lg-kpi, #login .lg-panel { background: #f4f7fd; border-color: #e1e8f5; }
#login .lg-kpi b { color: #1e3a8a; } #login .lg-kpi:nth-child(2) b { color: #2563eb; } #login .lg-kpi:nth-child(3) b { color: #0ea5e9; }
#login .lg-float { border: 1px solid #e1e8f5; }
#login .lg-support .ico-svg { color: #1e3a8a; }
/* the logo as in the CRM: 64 px high, with room below it (56 px on small or short screens) */
#login .lg-logo { margin-bottom: 20px; }
#login .lg-logo img, #login .lg-logo svg { height: 64px; width: auto; max-width: 100%; }
@media (max-width: 900px), (max-height: 640px) { #login .lg-logo img, #login .lg-logo svg { height: 56px; } #login .lg-logo { margin-bottom: 14px; } }
#login a, #login .lg-link, #login .lg-forgot, #login button.link { color: #1e3a8a; }
:root[data-theme="dark"] { --inc: var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --inc: var(--brand); } }
@media (max-width: 600px) {
  main { padding: 16px 16px 56px; }
  .dash-head h1, h1, .page-head h1 { font-size: 22px; }
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi2 { flex-direction: column; gap: 8px; padding: 14px; }
  .k-ico { width: 32px; height: 32px; }
  .kpi-l { font-size: 11px; }
  .kpi2 .kpi-v { font-size: 18px; }
  .card { padding: 16px; }
}
@media (max-width: 600px) {
  .bk-banner { flex-wrap: wrap; }
  .bk-banner > div { flex: 1 1 calc(100% - 40px); }
  .bk-banner > .btn, .bk-banner > button { width: 100%; justify-content: center; }
}

/* ---------------- v13 (2.2): users pages */
.us-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
button.kpi2 { font: inherit; text-align: left; cursor: pointer; border: 1px solid var(--border); }
button.kpi2:hover, button.kpi2.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.us-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0; }
.us-bar input[type=search] { flex: 1 1 220px; max-width: 340px; }
.us-who { display: flex; align-items: center; gap: 12px; }
.us-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-100); color: var(--brand-ink); font-weight: 700; font-size: 13px; }
.us-custom { background: var(--brand-50); color: var(--brand-ink); border: 1px solid var(--brand-200); }
.us-go { color: var(--muted); width: 32px; }
.us-tbl tr.click:hover .us-go { color: var(--brand); }
.us-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.us-main, .us-side { display: grid; gap: 18px; min-width: 0; }
.us-side { position: sticky; top: 78px; }
.us-page .card-h h2 { display: flex; align-items: center; gap: 8px; }
.us-page .card-h h2 svg { width: 18px; height: 18px; color: var(--brand); }
.us-meta { display: flex; gap: 28px; align-items: end; padding-bottom: 6px; }
.us-meta span { display: block; font-size: 12px; color: var(--muted); }
.us-role { max-width: 420px; }
.us-role .hint { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; font-weight: 400; }
.us-acc td { vertical-align: middle; }
.us-acc tr.us-grp td { background: var(--brand-50); color: var(--brand-ink); font-weight: 650; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-top: 8px; padding-bottom: 8px; }
.us-acc tr.us-diff td:first-child { box-shadow: inset 3px 0 0 var(--brand); font-weight: 600; }
.seg.us-lv { display: inline-flex; flex-wrap: wrap; }
.seg.us-lv button { font-size: 12.5px; padding: 5px 10px; }
.seg.us-lv button:disabled { opacity: .55; cursor: not-allowed; }
.lv.own { outline: 1.5px solid var(--brand); outline-offset: 1px; }
.us-cos { display: grid; gap: 6px; margin-top: 8px; max-height: 260px; overflow: auto; }
.us-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.us-sum > div { background: var(--brand-50); border-radius: 10px; padding: 10px; text-align: center; }
.us-sum b { display: block; font-size: 20px; color: var(--brand-ink); }
.us-sum span { font-size: 12px; color: var(--muted); }
.us-save { grid-column: 1 / -1; position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 -4px 16px rgba(20, 30, 70, .06); z-index: 5; }
.us-save #uDirty { margin-right: auto; }
@media (max-width: 960px) { .us-page { grid-template-columns: 1fr; } .us-side { position: static; } }
@media (max-width: 600px) { .us-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .us-bar input[type=search] { max-width: none; } .us-meta { gap: 16px; } }
.us-main > .card, .us-side > .card { margin-bottom: 0; }
.toolbar.us-bar { display: flex; flex-wrap: wrap; } .us-bar > select, .us-bar > .seg { width: auto; flex: 0 0 auto; margin: 0; } .us-bar > input[type=search] { width: auto; margin: 0; }
.us-main, .us-side { grid-template-columns: minmax(0, 1fr); } .us-side .pc { white-space: normal; }
.seg.us-lv { flex-wrap: nowrap; } .seg.us-lv button { white-space: nowrap; padding: 4px 9px; } .us-acc td:first-child { min-width: 150px; } .us-acc td, .us-acc th { padding-top: 7px; padding-bottom: 7px; }
.role-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); } .role-grid > .card { min-width: 0; } .role-card .pc { white-space: normal; } .role-card .row { flex-wrap: wrap; }

/* ---------------- v14 (2.3): financial statements (audit draft) and fetch */
.imp-mode { flex-wrap: wrap; }
.fs-more { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.fs-more > summary { cursor: pointer; font-weight: 600; color: var(--brand-ink); }
.fs-doc { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 8px 0 30px; }
.fs-page { width: 210mm; max-width: 100%; min-height: 297mm; padding: 16mm 18mm 14mm; background: #fff; color: #1a1a1a; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 12px 40px -12px rgba(20,30,70,.3); position: relative; overflow: hidden; font-size: 12.5px; line-height: 1.5; --text: #1a1a1a; --muted: #666; --border: #ddd; --surface: #fff; }
.fs-page::before { content: 'DRAFT'; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) rotate(-40deg); font: 800 120px/1 var(--font-display, sans-serif); color: rgba(36, 54, 140, .05); pointer-events: none; }
.fs-ph { display: flex; justify-content: space-between; font-size: 10.5px; color: #7a7f8c; border-bottom: 1px solid #d7dbe6; padding-bottom: 5px; margin-bottom: 18px; }
.fs-ph span:first-child { color: #24368c; font-weight: 700; }
.fs-co { font-weight: 700; font-size: 14px; }
.fs-h { color: #24368c; font-size: 18px; margin: 2px 0 2px; }
.fs-sub { color: #6b7080; margin-bottom: 14px; }
.fs-sub::first-letter { text-transform: uppercase; }
.fs-page h3.fs-n { color: #24368c; font-size: 13.5px; margin: 18px 0 6px; }
.fs-page h4 { font-size: 12.5px; margin: 10px 0 2px; }
.fs-page p { margin: 0 0 8px; }
.fs-foot { font-style: italic; color: #6b7080; font-size: 11px; margin-top: 14px !important; }
.fs-todo { background: #fff4c2; color: inherit; padding: 0 2px; border-radius: 2px; }
.fs-box { border-top: 1.5px solid #24368c; border-bottom: 1.5px solid #24368c; padding: 14px 4px; font-style: italic; margin: 18px 0; }
.fs-sign { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 40px 50px; margin: 46px 0 16px; }
.fs-sign span { display: block; border-top: 1px solid #333; margin-bottom: 4px; }
.fs-t { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 12px; }
.fs-t th { font-weight: 700; color: #24368c; padding: 4px 4px 6px; vertical-align: bottom; font-size: 11px; }
.fs-t td { padding: 2.5px 4px; vertical-align: top; }
.fs-t .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-t .c { text-align: center; }
.fs-t .l { text-align: left; }
.fs-t tr.k-l td:first-child { padding-left: 14px; }
.fs-t tr.k-h td { font-weight: 700; padding-top: 9px; color: #24368c; }
.fs-t tr.k-h1 td { font-weight: 800; padding-top: 12px; color: #24368c; letter-spacing: .02em; }
.fs-t tr.k-i td { font-style: italic; color: #555; }
.fs-t tr.k-sp td { height: 10px; }
.fs-t tr.k-s td, .fs-t tr.k-t td, .fs-t tr.k-g td { font-weight: 700; }
.fs-t tr.k-s td.r, .fs-t tr.k-t td.r, .fs-t tr.k-g td.r { border-top: 1px solid #333; }
.fs-t tr.k-g td.r { border-bottom: 3px double #333; }
.fs-toc { width: 100%; font-size: 13.5px; } .fs-toc td { padding: 7px 0; border-bottom: 1px dotted #c9cdd8; }
.fs-cover { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.fs-cv-mid h1 { font-size: 30px; color: #24368c; margin: 0 0 6px; }
.fs-cv-mid h2 { font-size: 22px; margin: 46px 0 4px; padding-top: 30px; border-top: 2px solid #24368c; display: inline-block; }
.fs-cv-sub { color: #6b7080; font-size: 14px; }
.fs-logo { max-height: 70px; max-width: 220px; margin-bottom: 18px; }
.fs-stamp { position: absolute; top: 22mm; right: 18mm; border: 2px solid #24368c; color: #24368c; font-weight: 800; letter-spacing: .12em; padding: 4px 12px; text-transform: uppercase; font-size: 12px; }
.fs-cv-foot { position: absolute; bottom: 14mm; left: 0; right: 0; font-size: 11px; color: #7a7f8c; }
@media screen and (max-width: 860px) { .fs-page { width: 100%; min-height: 0; padding: 18px 14px; } .fs-cover { min-height: 420px; } .fs-t { font-size: 11px; } .fs-sign { grid-template-columns: 1fr; } }
@media print {
  .fs-doc { display: block; padding: 0; }
  .fs-page { width: auto; max-width: none; min-height: calc(297mm - 24mm - 2mm); padding: 0; margin: 0; box-shadow: none; border-radius: 0; overflow: visible; break-after: page; page-break-after: always; }
  .fs-page:last-child { break-after: auto; page-break-after: auto; }
  .fs-page, .fs-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .fs-todo { background: none; }
  main:has(.fs-doc) > .page-head { display: none !important; }
}

/* ---------------- v15 (2.4): online connections (Zoho Books, QuickBooks Online) */
.onl-box { border: 1px dashed var(--border-2); border-radius: 10px; padding: 12px; margin-bottom: 12px; background: var(--surface-2); }
.onl-box .onl-or { margin: 10px 0 0; }
.onl-link { margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.onl-link svg, .onl-box svg { width: 16px; height: 16px; }
.onl-grid { align-items: start; }
.onl-card h2, .onl-app h3 { margin-top: 0; }
.onl-steps { padding-left: 20px; margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
.onl-steps code, .onl-uri { word-break: break-all; white-space: normal; }
.onl-uri { display: block; padding: 6px 8px; border-radius: 6px; background: var(--surface-2); font-size: 12px; min-width: 0; }
.onl-app label { display: block; margin-top: 10px; }
.onl-app input:not([type=checkbox]) { width: 100%; }
@media (max-width: 760px) { .onl-grid { grid-template-columns: 1fr; } }
/* how-to guides (Help & support) */
.guide-b { padding: 0 2px 14px; line-height: 1.6; color: color-mix(in srgb, var(--text) 86%, var(--bg)); }
.guide-b ol { margin: 0 0 10px; padding-left: 22px; } .guide-b ol li { margin: 3px 0; } .guide-b ol li::marker { color: var(--gold); font-weight: 700; }
.guide-n { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--gold); background: var(--surface-2); border-radius: 0 8px 8px 0; font-size: 13px; }
.guide-n ul { margin: 4px 0 0; padding-left: 18px; }
details.guide { scroll-margin-top: 90px; }
.help-train { margin: 0; padding-left: 20px; line-height: 1.85; font-size: 13.5px; }
@media (max-width: 900px) { .help-grid { grid-template-columns: 1fr; } }
@media print {
  body.print-guides .side, body.print-guides .topbar, body.print-guides .hdr, body.print-guides .help-hero, body.print-guides .help-side, body.print-guides #helpTabs, body.print-guides .page-head .actions, body.print-guides #helpPage { display: none !important; }
  body.print-guides .app { grid-template-columns: minmax(0, 1fr); } body.print-guides .help-grid { display: block; } body.print-guides .help-faq { border: 0; box-shadow: none; }
  body.print-guides details.guide { break-inside: avoid; } body.print-guides details.faq summary::after { content: none; }
}

/* ---------------------------------------------------------------- sign-out card */
.so-bg { opacity: 0; transition: opacity .16s ease; z-index: 700; }
.so-bg.in { opacity: 1; }
.so-card { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg, 0 24px 60px -18px rgba(7, 34, 66, .35));
  transform: translateY(10px) scale(.97); transition: transform .2s cubic-bezier(.2, .9, .3, 1.2); }
.so-bg.in .so-card { transform: none; }
.so-top { position: relative; text-align: center; padding: 20px 24px 22px; color: #fff; border-radius: 19px 19px 0 0; overflow: hidden;
  background: radial-gradient(120% 90% at 85% -10%, rgba(47, 191, 138, .45), transparent 60%), linear-gradient(150deg, #072a52 0%, #0b3a6f 55%, #1559a6 100%); }
.so-top::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 180px; height: 180px; border-radius: 50%; border: 28px solid rgba(255, 255, 255, .05); pointer-events: none; }
.so-x { position: absolute; top: 10px; right: 10px; color: rgba(255, 255, 255, .8); }
.so-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.so-av { position: relative; width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, #2fbf8a, #7cc0ff, #2fbf8a); box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .45); }
.so-av > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #0b3a6f; font: 700 24px/1 var(--font-display, var(--font)); letter-spacing: .02em; }
.so-badge { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #b42318; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.so-badge .ico-svg, .so-badge svg { width: 14px; height: 14px; }
.so-top h2 { margin: 0; font: 750 21px/1.25 var(--font-display, var(--font)); letter-spacing: -.01em; color: #fff; }
.so-top p { margin: 4px 0 10px; color: rgba(255, 255, 255, .82); font-size: 13.5px; }
.so-top p b { color: #fff; font-weight: 650; }
.so-co { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 11px; border-radius: 99px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-co svg { width: 14px; height: 14px; flex: none; }
.so-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: -1px 18px 0; transform: translateY(-14px); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.so-stats > div { padding: 10px 8px; text-align: center; min-width: 0; }
.so-stats > div + div { border-left: 1px solid var(--border); }
.so-stats small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.so-stats b { display: block; margin-top: 2px; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.so-checks { list-style: none; margin: -4px 18px 0; padding: 0; display: grid; gap: 6px; }
.so-c { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.so-c > div { flex: 1; min-width: 0; }
.so-c b { display: block; font-size: 13.5px; font-weight: 650; }
.so-c small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.so-i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; }
.so-i svg { width: 16px; height: 16px; }
.so-c.ok .so-i { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.so-c.info .so-i { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.so-c.warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.so-c.warn .so-i { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.so-c.err { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.so-c.err .so-i { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.so-c.busy .so-i { background: color-mix(in srgb, var(--info) 12%, transparent); }
.so-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--info) 30%, transparent); border-top-color: var(--info); animation: so-spin .8s linear infinite; }
@keyframes so-spin { to { transform: rotate(360deg); } }
.so-c .btn { flex: none; }
.so-opts { margin: 8px 18px 0; display: grid; gap: 0; }
.so-un { opacity: .7; font-size: 12.5px; }
.so-opt { display: flex; gap: 10px; align-items: flex-start; padding: 6px 6px; border-radius: 10px; cursor: pointer; }
.so-opt:hover { background: var(--surface-2); }
.so-opt input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--primary); flex: none; }
.so-opt b { display: block; font-size: 13.5px; font-weight: 600; }
.so-opt small { display: block; color: var(--muted); font-size: 12px; }
.so-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 18px 0; padding-top: 12px; border-top: 1px solid var(--border); }
.so-btns { display: flex; gap: 8px; margin-left: auto; }
.so-sw { padding-left: 6px; }
.so-sw svg { width: 15px; height: 15px; }
.so-go { background: linear-gradient(135deg, #0b3a6f, #1559a6); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -6px rgba(11, 58, 111, .6); }
.so-go:hover:not(:disabled) { filter: brightness(1.1); color: #fff; }
.so-go.danger { background: linear-gradient(135deg, #b42318, #d92d20); color: #fff; box-shadow: 0 6px 16px -6px rgba(180, 35, 24, .6); }
.so-go:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.so-go svg { width: 16px; height: 16px; }
.so-keys { margin: 8px 18px 12px; text-align: center; color: var(--muted); font-size: 11.5px; }
@media (max-width: 520px) {
  .so-bg { place-items: end center; padding: 0; }
  .so-card { width: 100%; border-radius: 20px 20px 0 0; max-height: 92vh; transform: translateY(40px); }
  .so-top { border-radius: 19px 19px 0 0; }
  .so-acts { flex-direction: column-reverse; align-items: stretch; }
  .so-btns { margin: 0; } .so-btns .btn { flex: 1; justify-content: center; }
  .so-sw { justify-content: center; }
  .so-keys { display: none; }
  .so-stats b { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .so-bg, .so-card { transition: none; } .so-spin { animation-duration: 2s; } }

/* goodbye note on the sign-in page (the sign-in page is always light) */
.lg-bye { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 11px 14px; border-radius: 12px; background: #e9f7f0; border: 1px solid #b8e4cf; color: #0b3d2c; animation: lg-bye .35s ease both; text-align: left; }
.lg-bye.auto { background: #fff6e5; border-color: #f2d59a; color: #5a3d06; }
.lg-bye > svg, .lg-bye > .ico-svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.lg-bye b { display: block; font-size: 14px; }
.lg-bye small { display: block; font-size: 12.5px; opacity: .8; margin-top: 1px; }
@keyframes lg-bye { from { opacity: 0; transform: translateY(-6px); } }

/* 2.5.3: the product name sits on two lines in the menu */
.side .brand-name { font-size: 15px; line-height: 1.15; }

/* 2.6.0: Share on WhatsApp, cheque printing, licences & renewals */
.btn.wa-btn { border-color: #25d366; color: #128c4b; }
.btn.wa-btn:hover { background: rgba(37, 211, 102, .1); }
:root[data-theme="dark"] .btn.wa-btn { color: #5fe39a; }
.chq-prev-wrap { overflow: hidden; margin: 8px 0 12px; background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 8px, var(--surface) 8px, var(--surface) 16px); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.chq-prev { transform-origin: top left; }
.chq-prev .chq { background: #fdfcf7; border: 1px dashed #b8b2a0; border-radius: 4px; }
.chq { position: relative; color: #000; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; }
.chq-f { position: absolute; white-space: nowrap; line-height: 1.1; }
.chq-figs { font-weight: 700; }
.chq-boxes { display: inline-flex; } .chq-boxes i { font-style: normal; text-align: center; display: inline-block; }
.chq-cross span { display: inline-block; border-top: 1.2px solid #000; border-bottom: 1.2px solid #000; padding: 1px 6px; font-size: .78em; font-weight: 700; letter-spacing: .04em; transform: rotate(-12deg); transform-origin: left center; }
.chq-setup > summary { cursor: pointer; font-weight: 600; margin: 4px 0 8px; }
.chq-form .grid.g4 label { font-size: 12.5px; }
#chqPrint { display: none; }
@media print {
  body.print-cheque > *:not(#chqPrint) { display: none !important; }
  body.print-cheque #chqPrint { display: block; position: absolute; left: 0; top: 0; }
  body.print-cheque #chqPrint .chq { border: 0; background: none; }
  body.print-cheque, body.print-cheque html { background: #fff !important; }
}

/* 2.7.0: payslips (two per A4 page when printed) */
.slips { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px 0 30px; }
.slip { width: 190mm; max-width: 100%; background: #fff; color: #1a1a1a; border: 1px solid #d7dbe6; border-radius: 6px; padding: 9mm 10mm; font-size: 12.5px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.slip-h { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid #24368c; padding-bottom: 6px; margin-bottom: 8px; }
.slip-h b { color: #24368c; font-size: 14px; }
.slip-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 14px; margin-bottom: 8px; }
.slip-who span { display: block; color: #6b7080; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.slip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.slip-cols table { width: 100%; border-collapse: collapse; }
.slip-cols th { text-align: left; color: #24368c; border-bottom: 1px solid #d7dbe6; padding: 3px 2px; font-size: 11.5px; }
.slip-cols td { padding: 2.5px 2px; } .slip-cols .r { text-align: right; font-variant-numeric: tabular-nums; }
.slip-cols tr.t td { font-weight: 700; border-top: 1px solid #333; }
.slip-net { display: flex; justify-content: space-between; align-items: baseline; background: #eef1fb; border-radius: 4px; padding: 6px 10px; margin: 10px 0 4px; }
.slip-net b { font-size: 16px; color: #24368c; }
.slip-sign { display: flex; justify-content: space-between; margin-top: 26px; } .slip-sign div { border-top: 1px solid #333; padding-top: 3px; width: 40%; font-size: 11px; color: #555; }
@media screen and (max-width: 700px) { .slip-who { grid-template-columns: 1fr 1fr; } .slip-cols { grid-template-columns: 1fr; } }
@media print {
  .slips { display: block; padding: 0; }
  .slip { width: auto; border: 1px solid #bbb; box-shadow: none; margin: 0 0 8mm; break-inside: avoid; page-break-inside: avoid; }
  .slip:nth-child(2n) { break-after: page; page-break-after: always; }
  .slip, .slip * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==== Side menu in the CRM look (2.8.2) ====
   A soft lilac-blue wash over the sign-in picture, the selected item on a white pill, sub-items hanging
   from a thin line, and your name at the foot. Dark mode uses the CRM's deep navy version. */
.side {
  --cs-ink: #252d47; --cs-strong: #18203a; --cs-muted: #56607c; --cs-sub: #353e5c; --cs-ico: #5d6aa3;
  --cs-hover: rgba(255, 255, 255, .55); --cs-on: #ffffff; --cs-on-ink: #3446c4; --cs-bar: #5468e7;
  --cs-line: #c9d1f2; --cs-card: rgba(255, 255, 255, .75); --cs-av: #ffffff; --cs-av-ink: #3446c4; --cs-shadow: 0 1px 3px rgba(52, 70, 196, .12);
  --cs-bg: radial-gradient(120% 55% at 0% 0%, rgba(167, 139, 250, .45) 0%, rgba(167, 139, 250, 0) 60%),
    radial-gradient(90% 45% at 100% 55%, rgba(96, 165, 250, .34) 0%, rgba(96, 165, 250, 0) 65%),
    radial-gradient(120% 50% at 20% 100%, rgba(244, 114, 182, .30) 0%, rgba(244, 114, 182, 0) 60%),
    linear-gradient(180deg, rgba(244, 247, 255, .90) 0%, rgba(240, 243, 254, .92) 50%, rgba(236, 240, 252, .93) 100%),
    #e6eafb url("../img/signin-bg.jpg") center / cover no-repeat;
}
:root[data-theme="dark"] .side {
  --cs-ink: #e3e8f5; --cs-strong: #ffffff; --cs-muted: #a9b3cc; --cs-sub: #cdd4e6; --cs-ico: #9fabcb;
  --cs-hover: rgba(255, 255, 255, .08); --cs-on: rgba(140, 155, 255, .22); --cs-on-ink: #ffffff; --cs-bar: #9aa8ff;
  --cs-line: rgba(160, 175, 255, .14); --cs-card: rgba(255, 255, 255, .05); --cs-av: rgba(140, 155, 255, .22); --cs-av-ink: #ffffff; --cs-shadow: none;
  --cs-bg: radial-gradient(120% 55% at 0% 0%, rgba(139, 92, 246, .42) 0%, rgba(139, 92, 246, 0) 60%),
    radial-gradient(90% 45% at 100% 55%, rgba(56, 189, 248, .24) 0%, rgba(56, 189, 248, 0) 65%),
    radial-gradient(120% 50% at 20% 100%, rgba(236, 72, 153, .28) 0%, rgba(236, 72, 153, 0) 60%),
    linear-gradient(180deg, rgba(22, 29, 62, .90) 0%, rgba(18, 24, 52, .92) 50%, rgba(14, 18, 42, .94) 100%),
    #141a36 url("../img/signin-bg.jpg") center / cover no-repeat;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .side {
    --cs-ink: #e3e8f5; --cs-strong: #ffffff; --cs-muted: #a9b3cc; --cs-sub: #cdd4e6; --cs-ico: #9fabcb;
    --cs-hover: rgba(255, 255, 255, .08); --cs-on: rgba(140, 155, 255, .22); --cs-on-ink: #ffffff; --cs-bar: #9aa8ff;
    --cs-line: rgba(160, 175, 255, .14); --cs-card: rgba(255, 255, 255, .05); --cs-av: rgba(140, 155, 255, .22); --cs-av-ink: #ffffff; --cs-shadow: none;
    --cs-bg: radial-gradient(120% 55% at 0% 0%, rgba(139, 92, 246, .42) 0%, rgba(139, 92, 246, 0) 60%),
      radial-gradient(90% 45% at 100% 55%, rgba(56, 189, 248, .24) 0%, rgba(56, 189, 248, 0) 65%),
      radial-gradient(120% 50% at 20% 100%, rgba(236, 72, 153, .28) 0%, rgba(236, 72, 153, 0) 60%),
      linear-gradient(180deg, rgba(22, 29, 62, .90) 0%, rgba(18, 24, 52, .92) 50%, rgba(14, 18, 42, .94) 100%),
      #141a36 url("../img/signin-bg.jpg") center / cover no-repeat;
  }
}
.side { background: var(--cs-bg) !important; color: var(--cs-ink); border-right: 1px solid var(--cs-line) !important; padding: 0 0 6px !important; scrollbar-color: rgba(100, 116, 139, .3) transparent; }
.side .brand { min-height: 60px; padding: 10px 10px 10px 14px !important; margin: 0 0 8px !important; border-bottom: 1px solid var(--cs-line) !important; }
.side .brand-name { color: var(--cs-strong) !important; }
.side .brand-sub { color: var(--cs-muted) !important; }
.side .logo { background: #fff; box-shadow: 0 1px 3px rgba(31, 41, 79, .12) !important; }
.side-collapse { color: var(--cs-muted) !important; }
.side-collapse:hover, .side-collapse:focus-visible { background: var(--cs-hover) !important; color: var(--cs-strong) !important; }
#nav { padding: 0 8px; }
#nav a, .nav-gh { color: var(--cs-ink) !important; font-size: 14px !important; font-weight: 600 !important; border-radius: 10px !important; padding: 8px 10px !important; margin: 1px 0 !important; gap: 11px !important; }
#nav a .ico-svg, .nav-gh > .ico-svg:first-child { color: var(--cs-ico) !important; width: 18px; height: 18px; }
.nav-gh .nav-chev { color: var(--cs-ico) !important; }
#nav a:hover, .nav-gh:hover { background: var(--cs-hover) !important; color: var(--cs-strong) !important; }
#nav a:hover .ico-svg, .nav-gh:hover > .ico-svg:first-child { color: var(--cs-bar) !important; }
#nav a.active { background: var(--cs-on) !important; color: var(--cs-on-ink) !important; font-weight: 650 !important; box-shadow: var(--cs-shadow); }
#nav a.active .ico-svg { color: var(--cs-bar) !important; }
#nav a.active::before { display: none !important; }
.nav-grp.has-active > .nav-gh { color: var(--cs-strong) !important; }
.nav-grp.has-active > .nav-gh > .ico-svg:first-child { color: var(--cs-bar) !important; }
.nav-sub > div { margin: 0 0 0 17px; padding-left: 8px !important; border-left: 1px solid var(--cs-line); }
.nav-grp.open > .nav-sub > div { margin: 2px 0 6px 17px; }
.nav-sub a { margin-left: 0 !important; padding: 6px 9px !important; border-left: 0 !important; border-radius: 8px !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--cs-sub) !important; }
.nav-sub a .ico-svg { width: 15px !important; height: 15px !important; }
.nav-sub a.active { box-shadow: inset 2px 0 0 var(--cs-bar), var(--cs-shadow) !important; }
/* your name at the foot */
.side-me { display: flex; align-items: center; gap: 10px; margin: auto 8px 4px; padding: 8px 9px; border-radius: 12px; background: var(--cs-card); border: 1px solid var(--cs-line);
  color: var(--cs-strong); text-decoration: none !important; flex: none; box-shadow: 0 1px 2px rgba(31, 41, 79, .04); }
.side-me:hover { background: var(--cs-hover); }
.side-me[hidden] { display: none; }
.sm-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--cs-av); color: var(--cs-av-ink); font-size: 13px; font-weight: 700; box-shadow: 0 0 0 1px var(--cs-line); }
.sm-t { display: flex; flex-direction: column; min-width: 0; }
.sm-t b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cs-strong); }
.sm-t small { font-size: 11px; color: var(--cs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 901px) {
  body.side-mini:not(.side-peek) .side-me { justify-content: center; padding: 6px 0; margin-inline: 6px; }
  body.side-mini:not(.side-peek) .sm-t { display: none; }
  body.side-mini:not(.side-peek) #nav { padding: 0 6px; }
  body.side-mini:not(.side-peek) #nav a, body.side-mini:not(.side-peek) .nav-gh { justify-content: center; padding: 9px 0 !important; }
  body.side-mini:not(.side-peek) .side .brand { padding: 10px 0 !important; justify-content: center; }
}
@media print { .side-me { display: none; } }
@media (min-width: 901px) { body:not(.side-mini):not(.print-mode):not(.print-guides) .app { grid-template-columns: 232px minmax(0, 1fr); } } /* the CRM menu width */

/* ==== Admin › Backup & data (2.9.0) ==== */
/* owner looking at another client (js/clients.js) */
.tn-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 9px 14px; border-radius: 10px; font-size: 13px;
  background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.tn-bar span { flex: 1 1 260px; }
.tn-bar .ico-svg { flex: none; }
.tn-bar.sub-off { background: color-mix(in srgb, var(--danger, #dc2626) 10%, var(--surface)); border-color: color-mix(in srgb, var(--danger, #dc2626) 35%, transparent); }
#login .lg-brand img { height: auto; max-height: 96px; max-width: min(280px, 100%); object-fit: contain; }
.lg-brand-name { font-size: 26px; font-weight: 700; letter-spacing: -.01em; text-align: center; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 4px 0 8px; }
.bk-card { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.bk-card h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0; }
.bk-card h2 .ico-svg { width: 18px; height: 18px; color: var(--primary); }
.bk-card p { margin: 0; }
.bk-btns, .bk-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bk-row select { flex: 1 1 180px; min-width: 0; }
.bk-card > select { max-width: 220px; }
#bkPick { align-self: flex-start; cursor: pointer; color: var(--text); font-size: 13.5px; }
.bk-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.bk-cmp > div { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); }
.modal #bkOk { font-family: inherit; letter-spacing: .04em; }
@media (max-width: 640px) { .bk-cmp { grid-template-columns: 1fr; } }
.bk-srv { margin-bottom: 14px; }
.bk-srv-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.bk-srv-h .muted { flex: 1 1 240px; }
.bk-srv td.small { word-break: break-all; }

/* 2.11: no vendor branding. The default sign-in shows the app mark and "Accounting"; the client's own logo replaces it. */
#login .lg-brand { flex-direction: column; align-items: center; gap: 10px; }
#login .lg-brand img.lg-mark { height: 56px; width: 56px; }
.side .logo img { object-fit: contain; }

/* ==== 2.11 soft look: larger, calmer type and round corners everywhere ====
   One layer on top of everything above. Body text 15px, page titles 30px, card titles 17px, figures 23px.
   Corners: the side menu and the header float as rounded panels; cards 20px, controls 12px, badges are pills. */
:root { --radius: 18px; --r-card: 20px; --r-ctl: 12px; --r-pop: 16px; --gap-float: 12px; }

/* type */
body { font-size: 15px; line-height: 1.6; letter-spacing: -.004em; }
.small, .muted.small, small { font-size: 13px; }
h1, .dash-head h1, .page-head h1 { font-size: 30px; line-height: 1.18; letter-spacing: -.025em; }
.card-h h2, .card > h2, section.card h2 { font-size: 17px; letter-spacing: -.015em; }
h2 { font-size: 18px; } h3 { font-size: 15.5px; }
.btn { font-size: 14px; min-height: 40px; padding-inline: 16px; }
.btn.sm { font-size: 13px; min-height: 32px; padding-inline: 12px; }
input, select, textarea { font-size: 14.5px; }
label { font-size: 13.5px; }
.tbl { font-size: 14.5px; }
.tbl th { font-size: 12px; letter-spacing: .045em; }
.tbl td.r, .tbl th.r, .kpi-v, .num { font-variant-numeric: tabular-nums; }
.kpi-v { font-family: var(--font-display); font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.kpi-l { font-size: 12.5px; letter-spacing: .04em; }
#nav a, .nav-gh { font-size: 14.5px !important; }
.nav-sub a { font-size: 14px !important; }
.notice, .tn-bar { font-size: 14px; }

/* corners: content */
.card, .kpi, .report, .help-faq, .doc-form, .bk-srv, .lg-card { border-radius: var(--r-card); }
.card.flush, .card .tbl-wrap, .tbl-wrap { overflow: hidden; }
.card.flush > .tbl-wrap, .card.flush .tbl-wrap { border-radius: var(--r-card); }
.tbl-wrap:not(.card .tbl-wrap) { border-radius: var(--r-pop); }
.chart, .chart-wrap, .chart > svg { border-radius: 14px; }
.notice, .tn-bar, .bk-cmp > div, details, .doc-band { border-radius: 14px; }
.badge, .tag, .rv-pill, .so-badge { border-radius: 999px; padding-inline: 10px; }
/* corners: controls */
.btn, .icon-btn, .co-chip, .side-collapse { border-radius: var(--r-ctl); }
input:not([type=checkbox]):not([type=radio]), select, textarea, .pw-gen { border-radius: var(--r-ctl); }
.seg { border-radius: var(--r-ctl); } .seg button { border-radius: 9px; }
.um-menu, .qc-menu, .co-menu, .rep-menu, .th-menu, .toast { border-radius: var(--r-pop); }
.modal { border-radius: 22px; overflow: hidden; }
.side-me { border-radius: 16px; }
#nav a, .nav-gh { border-radius: 12px !important; }
.nav-sub a { border-radius: 10px !important; }

/* the side menu and the header float as rounded panels (desktop) */
@media (min-width: 861px) {
  body:not(.print-mode):not(.print-guides) .side {
    top: var(--gap-float); height: calc(100vh - 2 * var(--gap-float)); margin: var(--gap-float) 0 var(--gap-float) var(--gap-float);
    border-radius: 22px; border: 1px solid var(--cs-line) !important; overflow: hidden auto;
    box-shadow: 0 10px 30px -14px rgba(31, 41, 79, .28), 0 1px 3px rgba(31, 41, 79, .06);
  }
  body:not(.side-mini):not(.print-mode):not(.print-guides) .app { grid-template-columns: 244px minmax(0, 1fr); }
  body.side-mini:not(.print-mode) .app { grid-template-columns: 68px minmax(0, 1fr); }
  .hdr {
    top: var(--gap-float); margin: var(--gap-float) 24px 0 16px; border-radius: 18px; border: 1px solid var(--border) !important;
    box-shadow: 0 calc(-1 * var(--gap-float) - 2px) 0 0 var(--bg), 0 6px 20px -12px rgba(28, 34, 52, .18);
  }
  main { padding-top: 22px; }
}
/* phones and small tablets: the menu slides in as a rounded panel */
@media (max-width: 860px) {
  .side { inset: 10px auto 10px 10px !important; height: auto !important; border-radius: 22px; border: 1px solid var(--cs-line) !important; }
  body:not(.nav-open) .side { transform: translateX(calc(-100% - 24px)); box-shadow: none; }
  .hdr { margin: 8px 8px 0; border-radius: 16px; top: 8px; border: 1px solid var(--border) !important; box-shadow: 0 -10px 0 0 var(--bg); }
  h1, .dash-head h1, .page-head h1 { font-size: 24px; }
}
@media print { .side, .hdr { border-radius: 0; margin: 0; box-shadow: none; } .card, .report { border-radius: 0; } }
/* the + New menu hangs from the right of the header, so it is never pushed off the left edge */
@media (min-width: 861px) { .hdr .qc { position: static; } .hdr .qc-menu { right: 12px; left: auto; } }

/* ==== 2.11 Reports in the familiar online-accounting layout ====
   The list: tabs, a search box, full-width sections that fold, two columns of report names with a star.
   One report: filters with Run report, then the report as a centred sheet with its tools on the sheet. */
.rc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: -4px 0 16px; }
.rc-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 15px; font-weight: 600;
  border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; border-radius: 10px 10px 0 0; }
.rc-tabs button:hover { color: var(--text); background: var(--surface-2); }
.rc-tabs button.on { color: var(--primary); border-bottom-color: var(--primary); }
.rc-tabs .ico-svg { width: 16px; height: 16px; }
.rc-n { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.rc-bar .grow { flex: 1; }
.rc-secs { display: flex; flex-direction: column; gap: 12px; }
.rc-sec { padding: 0 !important; margin: 0 0 12px; overflow: hidden; }
.rc-secs .rc-sec { margin: 0; }
.rc-sh { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 20px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rc-sh:hover { background: var(--surface-2); }
.rc-sh h2 { margin: 0; font-size: 17px; flex: 1; }
.rc-sh > .ico-svg { width: 18px; height: 18px; color: #e0a100; fill: #f5c542; }
.rc-chev { display: grid; place-items: center; width: 22px; height: 22px; color: var(--muted); }
.rc-chev .ico-svg { width: 16px; height: 16px; transform: rotate(-90deg); transition: transform .18s ease; }
.rc-grp.shut .rc-chev .ico-svg { transform: rotate(180deg); }
.rc-grp.shut .rc-list { display: none; }
.rc-sec .rc-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; padding: 0 20px 14px 52px; border-top: 1px solid var(--border); }
.rc-sec .rc-item { border-top: 0 !important; border-bottom: 1px solid var(--border); align-items: center; gap: 4px; }
.rc-sec .rc-item a { padding: 10px 6px; display: flex; flex-direction: column; }
.rc-sec .rc-item b { font-weight: 600; color: var(--primary); }
.rc-sec .rc-desc { font-size: 12.5px; color: var(--muted); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .15s ease, opacity .15s ease; }
.rc-sec .rc-item:hover .rc-desc, .rc-sec .rc-item a:focus-visible .rc-desc { max-height: 3.2em; opacity: 1; }
.rc-sec .rc-star { order: -1; margin: 0; opacity: .55; }
.rc-empty { padding: 4px 20px 16px 52px; margin: 0; }
#rcFav { border-color: color-mix(in srgb, #e0a100 35%, var(--border)); }
@media (max-width: 860px) { .rc-sec .rc-list { grid-template-columns: minmax(0, 1fr); padding-left: 16px; } }

.rep-controls .row { align-items: flex-end; }
.rep-controls .grow { flex: 1; }
.qb-sheet { position: relative; max-width: 1080px; margin: 0 auto; }
.qb-tools { display: flex; justify-content: flex-end; gap: 6px; margin: 0 0 8px; }
.qb-tools .icon-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; height: 36px; padding: 0 12px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border); }
.qb-tools .icon-btn:hover { color: var(--primary); }
.qb-tools .ico-svg { width: 16px; height: 16px; }
#foldBtn .ico-svg { transform: rotate(-90deg); }
.qb-sheet .report { padding: 36px 44px 28px; box-shadow: 0 12px 34px -18px rgba(28, 34, 52, .22); }
.qb-sheet .rep-h { border-bottom: 0 !important; padding-bottom: 6px; margin-bottom: 18px; }
.qb-sheet .rep-co { font-size: 16px; color: var(--text); }
.qb-sheet .rep-h h2 { font-size: 21px; font-weight: 700; }
.qb-sheet .rep-foot { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--border); text-align: center; color: var(--muted); font-size: 12.5px; }
#rep table.stmt tr.h.fold { cursor: pointer; }
#rep table.stmt tr.h.fold:hover td { background: var(--brand-50, var(--surface-2)); }
.rf-chev { display: inline-grid; place-items: center; width: 18px; margin: 0 4px 0 -4px; vertical-align: -2px; color: var(--muted); }
.rf-chev .ico-svg { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .15s ease; }
tr.h.shut .rf-chev .ico-svg { transform: rotate(180deg); }
@media (max-width: 860px) { .qb-sheet .report { padding: 20px 14px; } .qb-tools span { display: none; } }
@media print { .qb-sheet { max-width: none; } .qb-sheet .report { padding: 0; box-shadow: none; } tr[hidden] { display: table-row !important; } }

/* ==== 2.11 Fetch / import: how-to steps, the log, and the overwrite question ==== */
.imp-howto { padding: 0 !important; }
.imp-howto > summary { display: flex; align-items: center; gap: 10px; padding: 14px 20px; cursor: pointer; list-style: none; }
.imp-howto > summary::-webkit-details-marker { display: none; }
.imp-howto > summary h2 { margin: 0; font-size: 17px; flex: 1; display: flex; align-items: center; gap: 8px; }
.imp-howto > summary h2 .ico-svg { width: 18px; height: 18px; color: var(--primary); }
.imp-howto > summary::after { content: 'Show'; font-size: 13px; color: var(--primary); font-weight: 600; }
.imp-howto[open] > summary::after { content: 'Hide'; }
.imp-steps-ol { counter-reset: st; list-style: none; margin: 0; padding: 4px 20px 18px; border-top: 1px solid var(--border); }
.imp-steps-ol li { counter-increment: st; position: relative; padding: 10px 0 10px 44px; line-height: 1.55; border-bottom: 1px dashed var(--border); }
.imp-steps-ol li:last-child { border-bottom: 0; }
.imp-steps-ol li::before { content: counter(st); position: absolute; left: 0; top: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-weight: 700; font-size: 13.5px; }
.imp-ask { margin: 14px 0; padding: 16px 18px; border-radius: var(--r-ctl, 12px); border: 1px solid color-mix(in srgb, #e0a100 45%, var(--border)); background: color-mix(in srgb, #f5c542 10%, var(--surface)); }
.imp-ask.need { box-shadow: 0 0 0 3px color-mix(in srgb, #f5c542 30%, transparent); }
.imp-ask h3 { margin: 0 0 6px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.imp-ask h3 .ico-svg { width: 18px; height: 18px; color: #c48a00; }
.imp-ask p { margin: 0 0 10px; }
.imp-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 6px 0 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; font-weight: 400; }
.imp-opt:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); }
.imp-opt input { margin-top: 3px; width: auto; }
.imp-opt > span { display: flex; flex-direction: column; gap: 2px; }
.imp-will { margin: 6px 0 12px; padding-left: 20px; line-height: 1.7; }
.imp-log .row { align-items: center; gap: 10px; }
.imp-log h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 17px; }
.imp-log h2 .ico-svg { width: 18px; height: 18px; color: var(--muted); }
.imp-logw { margin-top: 10px; max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.imp-logw.tall { max-height: 60vh; margin: 0 0 12px; }
.imp-logl { list-style: none; margin: 0; padding: 6px 0; font-size: 13.5px; }
.imp-logl li { display: flex; gap: 12px; padding: 5px 14px; border-left: 3px solid transparent; }
.imp-logl time { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; padding-top: 1px; }
.imp-logl .lg-ok { border-left-color: #1f9d55; }
.imp-logl .lg-warn { border-left-color: #e0a100; }
.imp-logl .lg-err { border-left-color: #d64545; color: #b42318; }


/* 2.11 The 7strokes suite top bar: the app's name at the top left, the company menu first on the right (with the suite's apps) */
.co-suite { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.co-suite .co-o-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.co-suite .co-o-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-suite small { color: var(--muted); }
.co-ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #16a34a; color: #fff; flex: none; }
.co-ok svg { width: 14px; height: 14px; }
.co-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 2px 4px 8px; }
.co-app { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: var(--text); font-size: 13.5px; font-weight: 600; border: 1px solid transparent; }
.co-app:hover { text-decoration: none; background: var(--surface-2, rgba(0, 0, 0, .04)); }
.co-app.on { border-color: color-mix(in srgb, #0b6fa4 45%, transparent); background: color-mix(in srgb, #0b6fa4 10%, transparent); }
.co-app-i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: #fff; flex: none; }
.co-app-i svg { width: 16px; height: 16px; }
.co-menu { width: 320px; }
/* below about 1700px the company button is a round initial, so the menu never runs into the icons */
@media (max-width: 1700px) {
  .hdr-r .co-chip { padding: 0; border-radius: 50%; border: 0; background: none; }
  .hdr-r .co-chip .co-txt, .hdr-r .co-chip .co-caret { display: none; }
  .hdr-r .co-chip .avatar { width: 30px; height: 30px; font-size: 12px; }
  .hdr-r .co-chip:hover .avatar { box-shadow: 0 0 0 2px var(--ring, rgba(11, 111, 164, .35)); }
}
@media (max-width: 1024px) { .co-menu { position: fixed; top: 58px; right: 12px; max-width: calc(100vw - 24px); } }
.co-menu a.co-opt { text-decoration: none; color: var(--text); }
.co-menu a.co-opt.off { opacity: .6; }

/* Demo copy (demo_mode on the server, js/demo.js): a bar on every screen and the "Try the demo" button. Unused elsewhere. */
.demo-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px;
  min-height: 38px; padding: 7px 16px; background: #0e7a55; color: #fff; font: 600 13px/1.35 system-ui, "Segoe UI", Arial, sans-serif; text-align: center; box-shadow: 0 -4px 14px rgba(0, 0, 0, .18); }
.demo-bar a { color: #fff; text-decoration: underline; word-break: break-all; }
.demo-bar .demo-reset { font: inherit; padding: 3px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .7); background: transparent; color: #fff; cursor: pointer; }
.demo-bar .demo-reset:hover { background: rgba(255, 255, 255, .15); }
.demo-bar .demo-reset:disabled { opacity: .6; cursor: progress; }
body.demo-mode { padding-bottom: 40px; }
body.demo-mode #login { bottom: 38px; }
body.demo-mode #toasts { bottom: 56px; }
.lg-btn.lg-demo { display: flex; align-items: center; justify-content: center; text-decoration: none; background: #0e7a55 !important; }
.lg-btn.lg-demo:hover { background: #0a5c40 !important; }
.lg-demo-note { margin: 0; }
@media print { .demo-bar { display: none; } body.demo-mode { padding-bottom: 0; } }