/* Reset --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-sm); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg-sunken);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: var(--lh-tight); }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
p { margin: 0 0 var(--sp-3); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
strong { font-weight: 600; }
small, .small { font-size: var(--fs-xs); }
code, .mono { font-family: var(--font-mono); font-size: 12px; }
hr { border: 0; border-top: var(--bw) solid var(--border); margin: var(--sp-4) 0; }
dl { margin: 0; }
ul, ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-6); }

/* Skip link and screen-reader-only ------------------------------------------------ */
.skip-link { position: absolute; left: -9999px; top: var(--sp-2); background: var(--n0); padding: var(--sp-2) var(--sp-3); z-index: 100; border: var(--bw) solid var(--border-strong); }
.skip-link:focus { left: var(--sp-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Layout -------------------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; }
.sidebar { background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; padding: var(--sp-4) 0; position: sticky; top: 0; height: 100vh; }
.brand { padding: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-sm); font-weight: 600; color: var(--sidebar-text); line-height: var(--lh-tight); border-bottom: var(--bw) solid var(--n8); margin-bottom: var(--sp-2); }
.brand a { color: inherit; }
.nav { list-style: none; margin: 0; padding: 0; flex: 1; }
.nav a { display: block; padding: var(--sp-2) var(--sp-4); color: var(--sidebar-text); min-height: var(--target-min); border-left: 3px solid transparent; }
.nav a:hover { background: var(--sidebar-hover); text-decoration: none; }
.nav a[aria-current="page"] { border-left-color: var(--n0); background: var(--sidebar-hover); font-weight: 600; }
.nav a:focus-visible { outline-color: var(--n0); outline-offset: -3px; }
.sidebar-foot { padding: var(--sp-3) var(--sp-4) 0; border-top: var(--bw) solid var(--n8); color: var(--sidebar-text-secondary); font-size: var(--fs-xs); }
.sidebar-foot a { color: var(--sidebar-text); }
.sidebar-foot details summary { cursor: pointer; list-style: none; padding: var(--sp-1) 0; color: var(--sidebar-text); min-height: var(--target-min); display: flex; align-items: center; }
.sidebar-foot details summary::-webkit-details-marker { display: none; }
.sidebar-foot details[open] summary { font-weight: 600; }
.user-menu { list-style: none; padding: var(--sp-1) 0 0; margin: 0; }
.user-menu li a, .user-menu li button { display: block; width: 100%; text-align: left; padding: var(--sp-1) 0; background: none; border: 0; color: var(--sidebar-text); font: inherit; cursor: pointer; min-height: var(--target-min); }
.user-menu li a:hover, .user-menu li button:hover { text-decoration: underline; }
.main { padding: var(--sp-4) var(--sp-6) var(--sp-12); min-width: 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.page-head .lede { color: var(--text-secondary); margin: var(--sp-1) 0 0; max-width: 72ch; }
.actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.crumbs { font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: var(--sp-2); }
.crumbs a { color: var(--text-secondary); }
.crumbs span { margin: 0 var(--sp-1); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-4); align-items: start; }
.stack > * + * { margin-top: var(--sp-4); }
.cluster { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: baseline; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .grid-2, .grid-3, .grid-side { grid-template-columns: 1fr; }
}

/* Panels -------------------------------------------------------------------------- */
.panel { background: var(--bg-raised); border: var(--bw) solid var(--border); border-radius: var(--radius); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: var(--bw) solid var(--border); }
.panel-head h2, .panel-head h3 { font-size: var(--fs-sm); font-weight: 600; }
.panel-body { padding: var(--sp-3); }
.panel-body.tight { padding: 0; }
.panel-foot { padding: var(--sp-2) var(--sp-3); border-top: var(--bw) solid var(--border); color: var(--text-secondary); font-size: var(--fs-xs); }

/* Definition lists ---------------------------------------------------------------- */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); }
.facts dt { color: var(--text-secondary); }
.facts dd { margin: 0; }

/* Figures: a number with a label, used in place of stat cards ---------------------- */
.figure-row { display: flex; gap: var(--sp-6); flex-wrap: wrap; padding: var(--sp-2) 0; }
.figure { min-width: 120px; }
.figure .label { display: block; color: var(--text-secondary); font-size: var(--fs-xs); }
.figure .value { display: block; font-size: var(--fs-md); font-weight: 600; }

/* Tables -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { padding: var(--sp-1) var(--sp-2); text-align: left; vertical-align: top; border-bottom: var(--bw) solid var(--border); }
th { font-weight: 600; color: var(--text-secondary); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; background: var(--bg-sunken); position: sticky; top: 0; z-index: 1; }
th a { color: inherit; }
th[aria-sort] a::after { content: " \2195"; color: var(--text-muted); }
th[aria-sort="ascending"] a::after { content: " \2191"; color: var(--text); }
th[aria-sort="descending"] a::after { content: " \2193"; color: var(--text); }
tbody tr:hover { background: var(--bg-hover); }
tbody tr:focus-within { background: var(--bg-hover); }
tr.selected { background: var(--bg-selected); }
tr.reversed td { color: var(--text-muted); text-decoration: line-through; }
tr.reversed td.no-strike { text-decoration: none; }
tr.total td { font-weight: 600; border-top: var(--bw) solid var(--border-strong); border-bottom: 0; }
tr.sub td { color: var(--text-secondary); font-size: var(--fs-xs); border-bottom: 0; padding-top: 0; }
td.num, th.num, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num.neg { color: var(--text); }
.num.zero { color: var(--text-muted); }
td.ref { white-space: nowrap; }
td.date { white-space: nowrap; }
td.truncate { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dense th, .dense td { padding: var(--sp-1) var(--sp-2); }
tfoot td { font-weight: 600; border-top: var(--bw) solid var(--border-strong); background: var(--bg-sunken); }
.row-link { color: inherit; }
.row-link:hover { text-decoration: underline; }
.table-count { color: var(--text-secondary); font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-3); }

/* Status tags: colour plus a word, never colour alone ------------------------------ */
.tag { display: inline-block; padding: 0 var(--sp-2); border-radius: var(--radius); font-size: var(--fs-xs); line-height: 18px; border: var(--bw) solid transparent; white-space: nowrap; }
.tag-settled { background: var(--settled-bg); color: var(--settled-fg); border-color: rgba(30,107,58,0.25); }
.tag-due { background: var(--due-bg); color: var(--due-fg); border-color: rgba(138,90,0,0.25); }
.tag-overdue { background: var(--overdue-bg); color: var(--overdue-fg); border-color: rgba(163,39,31,0.25); }
.tag-neutral { background: var(--n2); color: var(--text-secondary); border-color: var(--border); }
.tag-inverse { background: var(--n8); color: var(--n0); }
.text-overdue { color: var(--overdue-fg); }
.text-due { color: var(--due-fg); }
.text-settled { color: var(--settled-fg); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* Buttons ------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-height: var(--control-h); padding: 0 var(--sp-3); font: inherit; font-weight: 500; color: var(--text); background: var(--n0); border: var(--bw) solid var(--border-strong); border-radius: var(--radius); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--bg-hover); text-decoration: none; }
.btn:active { background: var(--n3); }
.btn:disabled, .btn[aria-disabled="true"] { color: var(--text-muted); background: var(--n1); border-color: var(--border); cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
.btn-primary:disabled { background: var(--n5); border-color: var(--n5); color: var(--n0); }
.btn-danger { color: var(--overdue-fg); border-color: rgba(163,39,31,0.4); }
.btn-danger:hover { background: var(--overdue-bg); }
.btn-sm { min-height: var(--target-min); padding: 0 var(--sp-2); font-size: var(--fs-xs); }
.btn-link { border-color: transparent; background: none; color: var(--accent); padding: 0 var(--sp-1); }
.btn-link:hover { background: none; text-decoration: underline; }
.htmx-request .btn, .btn.htmx-request { opacity: 0.6; cursor: progress; }
.htmx-indicator { display: none; color: var(--text-secondary); font-size: var(--fs-xs); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* Forms --------------------------------------------------------------------------- */
form { margin: 0; }
.form { max-width: 640px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
.form-grid .span-2 { grid-column: span 2; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: auto; } }
.field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.field label, .field .label { font-weight: 500; }
.field .help { color: var(--text-secondary); font-size: var(--fs-xs); }
.field .error { color: var(--overdue-fg); font-size: var(--fs-xs); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--overdue-fg); }
.field-check { flex-direction: row; align-items: center; gap: var(--sp-2); }
.field-check input { width: 16px; height: 16px; margin: 0; }
input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="file"], select, textarea {
  font: inherit; color: var(--text); background: var(--n0); border: var(--bw) solid var(--border-strong); border-radius: var(--radius); min-height: var(--control-h); padding: var(--sp-1) var(--sp-2); width: 100%;
}
input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
input:disabled, select:disabled, textarea:disabled { background: var(--n1); color: var(--text-muted); cursor: not-allowed; }
input[readonly] { background: var(--n1); }
textarea { min-height: 72px; resize: vertical; }
.form-actions { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: var(--bw) solid var(--border); }
.errorlist { list-style: none; padding: 0; margin: 0 0 var(--sp-3); color: var(--overdue-fg); }
.nonfield { padding: var(--sp-2) var(--sp-3); border: var(--bw) solid var(--overdue-fg); background: var(--overdue-bg); border-radius: var(--radius); margin-bottom: var(--sp-3); color: var(--overdue-fg); }
.inline-form { display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { margin-bottom: 0; }
.filters { display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; padding: var(--sp-2) 0 var(--sp-3); }
.filters .field { margin: 0; min-width: 140px; }
.filters label { font-size: var(--fs-xs); color: var(--text-secondary); }

/* Messages, notices ---------------------------------------------------------------- */
.notice { padding: var(--sp-2) var(--sp-3); border: var(--bw) solid var(--border-strong); border-radius: var(--radius); background: var(--n0); margin-bottom: var(--sp-3); display: flex; justify-content: space-between; gap: var(--sp-3); align-items: baseline; }
.notice-overdue { border-color: var(--overdue-fg); background: var(--overdue-bg); color: var(--overdue-fg); }
.notice-due { border-color: var(--due-fg); background: var(--due-bg); color: var(--due-fg); }
.notice-settled { border-color: var(--settled-fg); background: var(--settled-bg); color: var(--settled-fg); }
.notice a { color: inherit; text-decoration: underline; }
.messages { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.messages li { padding: var(--sp-2) var(--sp-3); border: var(--bw) solid var(--border-strong); border-radius: var(--radius); background: var(--n0); margin-bottom: var(--sp-2); }
.messages li.success { border-color: var(--settled-fg); background: var(--settled-bg); color: var(--settled-fg); }
.messages li.error { border-color: var(--overdue-fg); background: var(--overdue-bg); color: var(--overdue-fg); }
.messages li.warning { border-color: var(--due-fg); background: var(--due-bg); color: var(--due-fg); }

/* Empty state: the next action, nothing else -------------------------------------- */
.empty { padding: var(--sp-6) var(--sp-3); color: var(--text-secondary); }
.empty p { margin-bottom: var(--sp-2); }

/* Overlays: the only elevated surfaces --------------------------------------------- */
.popover { position: absolute; background: var(--n0); border: var(--bw) solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-overlay); z-index: 20; min-width: 240px; max-height: 320px; overflow-y: auto; }
.popover a, .popover button { display: block; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3); border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; min-height: var(--target-min); }
.popover a:hover, .popover button:hover, .popover a:focus-visible, .popover button:focus-visible { background: var(--bg-hover); text-decoration: none; }
.combo { position: relative; }

/* Ledger specifics ------------------------------------------------------------------ */
.ledger td.desc { min-width: 24ch; }
.alloc-list { margin: 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: var(--fs-xs); }
.alloc-list li { white-space: nowrap; }
.running { font-weight: 500; }

/* Unit stack in the building dossier ------------------------------------------------- */
.unit-stack tbody tr td:first-child { font-weight: 600; }

/* Print --------------------------------------------------------------------------------- */
.doc { max-width: 720px; margin: 0 auto; background: var(--n0); padding: var(--sp-8); border: var(--bw) solid var(--border); }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); border-bottom: 2px solid var(--n9); padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); }
.doc-head h1 { font-size: var(--fs-lg); }
.doc-title { font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--sp-3); }
.doc table th { position: static; }
.doc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); margin-top: var(--sp-8); }
.doc-sign div { border-top: var(--bw) solid var(--n9); padding-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-secondary); }
@media print {
  .sidebar, .no-print, .messages, .page-head .actions { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
  body { background: #fff; }
  .doc { border: 0; padding: 0; max-width: none; }
  a { color: inherit; text-decoration: none; }
  th { background: none; }
}