/* Eshaq Family Properties — navy & gold house style.
   Colour/type/spacing values alias onto assets/tokens.css (PLAN-E.md §E1) so
   every rule below inherits the new palette without being rewritten one by
   one. --rented/--construction/--forsale/--fixing/--sold stay their own
   literals deliberately — they distinguish 6 property types, which the
   plan's 4-value semantic set (ok/warn/danger/neutral) can't represent
   without losing a real distinction. See PHASE-E-NOTES.md. */
:root{
  /* --navy/--gold/--danger/--radius are DELIBERATELY not redeclared here —
     tokens.css's :root already defines each of them directly (literal
     values). Redeclaring them via the --brand-navy/--brand-gold/
     --status-danger/--radius-md bridge names (as this block used to)
     creates a var() cycle: e.g. --navy here = var(--brand-navy), while
     tokens.css's --brand-navy = var(--navy) — two :root declarations for
     the same custom property, equal specificity, this file loading last,
     so this file's circular definition would win the cascade and both
     --navy and --brand-navy would compute to CSS's guaranteed-invalid
     value (spec: cyclic custom properties are invalid at computed-value
     time). That silently made every var(--navy)/var(--gold) consumer
     render as if unset (transparent/inherited) — the actual cause of the
     "sidebar/page still white, gold nowhere" report, not a deferred-work
     gap. Fixed by simply not shadowing these four names; they inherit
     tokens.css's real values with no bridge indirection needed. */
  --navy-deep:#12213F; --gold-soft:#E6D9A8;
  --paper:var(--bg-page); --card:var(--bg-surface); --ink:var(--text-primary); --muted:var(--text-secondary); --line:var(--border-subtle);
  --rented:#2E7D5B; --construction:#C77B1E; --empty:var(--status-neutral); --forsale:#3B6FB5;
  --fixing:#7C5CBF; --pill-bg:var(--bg-inset); --sold:#8f7408;
  --shadow:var(--shadow-card);
}
*{box-sizing:border-box}
/* DESIGN.md §4: the page canvas is warm --page, not white — content blocks
   (the .shell-container below, .card, .ledger, etc.) sit on white --surface
   against it. Was var(--paper) (=--surface, white-on-white) until the
   §4/§5.11 rollout pass — see DESIGN-NOTES.md. */
body{margin:0;background:var(--page);color:var(--ink);
  font-family:var(--font-ui);font-size:15px;line-height:1.55}
a{color:var(--navy);text-decoration:none}

/* Topbar */
.topbar{background:var(--navy);color:#fff;display:flex;align-items:center;gap:24px;
  padding:0 24px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;padding:10px 0}
.brand-mark{width:34px;height:34px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,var(--gold) 0%,#8f7408 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.brand-title{font-weight:700;font-size:16px;letter-spacing:.2px}
.brand-sub{font-size:11.5px;color:var(--gold-soft);opacity:.9}
.nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.nav a{color:#CBD5E6;padding:8px 14px;border-radius:8px;font-weight:500;font-size:14px}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.active{background:rgba(183,149,11,.22);color:var(--gold-soft)}
.nav-ico{margin-inline-end:6px;opacity:.8}
.topbar-end{display:flex;align-items:center;gap:12px;font-size:13px}
.lang-switch{color:var(--gold-soft);border:1px solid rgba(230,217,168,.4);
  padding:4px 12px;border-radius:20px;font-weight:600}
.lang-switch:hover{background:rgba(230,217,168,.12)}
.user-chip{color:#CBD5E6}
.logout{color:#9FB0CC}
.logout:hover{color:#fff}

/* Layout */
.container{max-width:1180px;margin:0 auto;padding:28px 20px 60px}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:20px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:22px;flex-wrap:wrap}
h1{font-size:22px;font-weight:700;color:var(--navy);margin:0}
/* DESIGN.md §5.11.3: every section heading is --serif. This generic h2 is
   what Dashboard's "Properties by status"/"Income vs. expenses" and every
   .card/.section-head heading on Finance, Expenses, Contracts review, etc.
   render through — fixing it here covers all of them in one place instead
   of per-screen rules. The gold rule beneath lives on .section-head (below)
   so it spans the full heading row, not just the .card ones without a
   wrapper — those get the plain h2 serif but no gold rule yet since a bare
   .card h2 has no dedicated wrapper to hang a full-width rule on. */
h2{font-size:17px;font-weight:700;color:var(--navy);margin:0 0 14px;font-family:var(--serif)}
.hint{color:var(--muted);font-size:12.5px}

/* Cards & stats */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;margin-bottom:20px}
/* §5.11.3: a bare .card whose h2 has no .section-head wrapper (e.g. Finance
   Overview's "By status"/"By type"/"By owner"/"Portfolio value by country"
   chart cards) still needs the gold rule beneath its heading — h2 is a
   block element so the border already spans the full card width without
   needing a flex wrapper. Only :first-child so a .card with a link/badge
   next to its h2 (handled instead by .section-head) doesn't get doubled. */
.card > h2:first-child{padding-bottom:8px;border-bottom:1px solid var(--gold)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 18px;border-inline-start:4px solid var(--gold)}
.stat .stat-label{font-size:12.5px;color:var(--muted);font-weight:500}
.stat .stat-value{font-size:var(--text-kpi);font-weight:700;color:var(--navy);margin-top:2px;font-family:var(--font-mono)}
.stat .stat-note{font-size:12px;color:var(--muted)}
.stat.warn{border-inline-start-color:var(--danger)}
.stat.warn .stat-value{color:var(--danger)}

/* Badges */
.badge{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:600;color:#fff}
.badge-rented{background:var(--rented)}
.badge-construction{background:var(--construction)}
.badge-empty{background:var(--empty)}
.badge-forsale{background:var(--forsale)}
.badge-fixing{background:var(--fixing)}
.badge-sold{background:var(--sold)}
.badge-expired{background:var(--danger)}
.badge-paid{background:var(--rented)}
.badge-unpaid{background:var(--danger)}
.badge-outline{background:transparent;border:1px solid var(--line);color:var(--muted)}

/* Property cards */
.prop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.prop-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:8px;
  transition:transform .12s ease, box-shadow .12s ease}
.prop-card:hover{transform:translateY(-2px);box-shadow:0 4px 18px rgba(26,47,90,.14)}
.prop-card .prop-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.prop-card .prop-name{font-weight:700;font-size:15.5px;color:var(--navy)}
.prop-card .prop-loc{font-size:13px;color:var(--muted)}
.prop-card .prop-meta{font-size:13px;color:var(--ink);display:flex;gap:14px;flex-wrap:wrap}
.prop-card .prop-actions{margin-top:auto;padding-top:8px;display:flex;gap:10px}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:start;color:var(--muted);font-weight:600;font-size:12.5px;
  padding:8px 10px;border-bottom:2px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
/* DESIGN.md §6: "Money keeps LTR direction within RTL text" — unicode-bidi:
   isolate keeps a "1,234.56 AED"-style run reading in its own left-to-right
   order no matter what RTL content surrounds it, without affecting where the
   whole block sits (text-align below still controls that). No visible effect
   in LTR contexts, so this is safe everywhere .num is already used. */
.num{font-variant-numeric:tabular-nums;font-family:var(--font-mono);direction:ltr;unicode-bidi:isolate}
/* E1.2: money/dates right-aligned in TABLES specifically — scoped to td/th so
   the handful of non-table .num usages (kv grid values, country-row counts,
   already positioned by flex/grid) don't get an unwanted right-align. */
td.num,th.num{text-align:end}

/* Forms */
form.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
/* CLOSEOUT.md §1.4/§5.4: the shared global filter bar (render_filter_bar(),
   layout.php) was a `.card` — the one boxed/shadowed strip left on every
   Dashboard/Finance/Expenses/report page. Same inset-strip treatment as
   properties.php's own .ledger-filter (§5.4: "inset strip, not a card"). */
.gfilter-bar{background:var(--inset);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:14px 4px;margin-bottom:16px}

/* A view narrowed by the filter bar above must read as a warning, not a
   subtitle — a bare bolded owner/property name blended in as page context
   and was mistaken for the whole portfolio's totals. --warn (not --danger:
   this is a normal, reversible state, not an error) plus a Reset link right
   on the line, so "why are the numbers smaller" is answered without leaving
   the page. */
.filter-active-note{margin:0;font-size:14px;color:var(--warn)}
.filter-active-note strong{color:var(--navy)}
.filter-active-note a{color:var(--warn);text-decoration:underline}

/* CLOSEOUT.md §1.6 Forms — opt-in via .pf on a <form> (or an ancestor),
   rather than redefining the shared label/input/.card rules directly:
   Settings, Expenses, and Contracts review still rely on the old look and
   haven't had their own rebuild pass yet. §5.6: 34px inputs, 1px --rule
   border, 2px radius, --t-micro uppercase labels above. §5.7/§3 principle
   1: no card wrappers — .card sections inside a .pf become rule-divided
   instead (a top hairline between them, none on the first). */
.pf label{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.06em;color:var(--grey);font-weight:600;margin-bottom:4px}
.pf input,.pf select,.pf textarea{height:34px;padding:0 10px;border:1px solid var(--rule);border-radius:var(--radius);
  font:var(--t-small) var(--sans);background:var(--surface);color:var(--navy)}
.pf textarea{height:auto;min-height:70px;padding:8px 10px}
.pf input:focus,.pf select:focus,.pf textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.pf .card{background:none;border:none;box-shadow:none;border-radius:0;padding:var(--s6) 0 0;margin-bottom:var(--s6);border-top:1px solid var(--rule)}
.pf .card:first-of-type{border-top:none;padding-top:0}
.pf .card h2{font-family:var(--serif);padding-bottom:8px;border-bottom:1px solid var(--gold)}
.pf .btn-primary{border-radius:var(--radius)}
/* property.php's inline-form popouts put .pf on the same element as .card
   (a standalone panel under a <summary> toggle, not a stack of sections
   needing dividers between them) rather than nesting a form inside it —
   neutralise the box on itself instead of via the descendant rule above. */
.card.pf{background:none;border:none;box-shadow:none;border-radius:0;padding:0}
/* `details.inline-form .card{background:#FBFAF7}` (below) still applies to
   the pages that haven't been rebuilt yet (Expenses, Settings, Owner
   statement) — this wins only where .pf opts a form into the new look. */
details.inline-form .card.pf{background:none}
label{display:block;font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:4px}
input,select,textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;
  font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
textarea{min-height:70px;resize:vertical}
.form-full{grid-column:1/-1}
.form-actions{grid-column:1/-1;display:flex;gap:10px;align-items:center}

/* Buttons */
.btn{display:inline-block;padding:9px 18px;border-radius:8px;border:none;cursor:pointer;
  font:inherit;font-weight:600;font-size:14px}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#9a7d09}
.btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--navy)}
.btn-sm{padding:5px 12px;font-size:13px}
.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--line)}
.btn-danger:hover{border-color:var(--danger)}
/* DESIGN.md §5.7 "Text" button — no border, --navy-soft, underline on hover —
   for Reset/Cancel/inline links specifically. .btn-ghost (above) is actually
   the spec's "Secondary" style (bordered) and stays that way since it's used
   app-wide for row-action icons; Cancel needed its own, unbordered class to
   match §5.7's own table instead of borrowing Secondary's look. */
.btn-text{display:inline-block;padding:9px 18px;background:transparent;border:none;
  color:var(--navy-soft);font:inherit;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none}
.btn-text:hover{text-decoration:underline;color:var(--navy)}

/* Filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.filters input,.filters select{width:auto;min-width:150px}

/* Alerts */
.alert-list{display:flex;flex-direction:column;gap:8px}
.alert-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;
  background:#FBF3E4;border:1px solid #EBD9AE;font-size:13.5px}
.alert-item.red{background:#F9ECEC;border-color:#E5C1C1}
.alert-item .alert-dot{width:8px;height:8px;border-radius:50%;background:var(--construction);flex:none}
.alert-item.red .alert-dot{background:var(--danger)}
.flash{background:#E8F3ED;border:1px solid #BFDCCB;color:var(--rented);
  padding:10px 16px;border-radius:8px;margin-bottom:16px;font-weight:600;font-size:13.5px}

/* Country strip */
.country-row{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;
  border-bottom:1px solid var(--line);font-size:14px}
.country-row:last-child{border-bottom:none}
.country-name{font-weight:600;color:var(--navy)}
.country-counts{display:flex;gap:6px;flex-wrap:wrap}

/* Detail page */
.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.detail-title{font-size:24px;font-weight:700;color:var(--navy)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
.kv .k{font-size:12px;color:var(--muted)}
.kv .v{font-weight:600}
/* DESIGN.md §5.11.2: "a 1px gold rule beneath every section heading" — on
   the full row (heading + its "view all" link) so the rule spans the whole
   header, not just the heading text width. */
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--gold)}
details.inline-form{margin-top:10px}
details.inline-form summary{cursor:pointer;color:var(--navy);font-weight:600;font-size:14px;
  list-style:none;display:inline-block;padding:6px 0}
details.inline-form summary::before{content:'+ '}
details.inline-form[open] summary::before{content:'− '}
details.inline-form .card{margin-top:10px;background:#FBFAF7}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 70%);padding:20px}
.login-card{background:var(--card);border-radius:16px;padding:38px 34px;width:100%;max-width:400px;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-card .brand{justify-content:center;margin-bottom:8px}
.login-card h1{text-align:center;font-size:20px;margin-bottom:4px}
.login-card .hint{text-align:center;display:block;margin-bottom:22px}
.login-card .btn{width:100%;margin-top:16px}
.login-lang{text-align:center;margin-top:18px}
.err{background:#F9ECEC;border:1px solid #E5C1C1;color:var(--danger);
  padding:9px 14px;border-radius:8px;font-size:13.5px;margin-bottom:14px}

/* Bars for finance */
.bar-wrap{background:#EFEDE6;border-radius:6px;height:10px;overflow:hidden}
.bar{height:100%;background:var(--navy);border-radius:6px}
.bar.gold{background:var(--gold)}

@media (max-width:720px){
  .topbar{padding:10px 16px}
  .nav{order:3;width:100%;padding-bottom:8px}
  .container{padding:20px 14px 50px}
}

/* ============================================================
   Sidebar shell layout (Dashboard/Statistics/Properties/etc.)
   Replaces the old flat .topbar/.nav layout for the app shell.
   ============================================================ */
.shell{display:flex;align-items:stretch;min-height:100vh}

/* DESIGN.md §5.11 "the navy rail" (final-edit revision): saturated --navy
   background, white wordmark + 1px --gold rule beneath, active item =
   3px --gold left indicator + --navy-raised background + white text,
   hover = --navy-raised background only. §5.11.1: collapses to a 56px
   icon-only strip, state in localStorage, auto-collapses under 1100px.
   The `html.sc` class (set as early as possible by the inline script in
   layout.php's <head>, before paint) drives the collapsed state so there
   is no flash of the wrong width on load. */
.sidebar{width:220px;flex:none;background:var(--navy);padding:18px 0 8px;
  display:flex;flex-direction:column;transition:width .15s ease;overflow:hidden}
.sidebar-brand{padding:0 20px 14px;margin-bottom:8px;border-bottom:1px solid var(--gold)}
.brand-wordmark{font-family:var(--serif);font-size:19px;letter-spacing:.08em;
  color:var(--on-navy);white-space:nowrap}
.sidebar-group{margin-bottom:20px}
.sidebar-label{font-size:var(--t-micro);font-weight:700;color:var(--gold);opacity:.4;letter-spacing:.6px;
  text-transform:uppercase;padding:0 20px;margin-bottom:6px;white-space:nowrap}
.sidebar a{display:flex;align-items:center;gap:10px;padding:0 20px;height:34px;color:var(--on-navy-muted);
  font-size:var(--t-small);font-weight:400;border-inline-start:3px solid transparent;white-space:nowrap}
.sidebar a:hover{background:var(--navy-raised)}
.sidebar a.active{background:var(--navy-raised);color:var(--on-navy);font-weight:500;
  border-inline-start-color:var(--gold)}
.sidebar .ico{width:16px;display:flex;align-items:center;justify-content:center;opacity:.85;flex:none;color:inherit}
.sidebar-toggle{margin-top:auto;align-self:center;width:32px;height:32px;flex:none;display:flex;
  align-items:center;justify-content:center;color:var(--on-navy-muted);background:none;border:none;
  font-size:16px;cursor:pointer}
.sidebar-toggle:hover{color:var(--on-navy)}

html.sc .sidebar{width:56px}
html.sc .sidebar-brand{padding:0 0 14px;text-align:center}
html.sc .brand-wordmark{font-size:0}
html.sc .brand-wordmark::after{content:'A';font-size:19px}
html.sc .sidebar-label{font-size:0;padding:0}
/* Collapsed rail: the REPORTS label text disappears (font-size:0 above),
   which removed the only visual break between it and the main nav group.
   Replace it with a plain hairline so the section break survives collapse. */
html.sc .sidebar-group.has-label{border-top:1px solid rgba(255,255,255,.15);padding-top:12px;margin-top:4px}
html.sc .sidebar a{justify-content:center;padding:0}
html.sc .sidebar a span.label{display:none}

/* E2.1: self-hosted Lucide icons, inline SVG. Actual pixel size comes from the
   width/height icon() sets per call site (16 tables / 18 nav / 20 headers);
   stroke-width and colour are the only things standardised here — inherits
   currentColor so it recolours with its surrounding text/link automatically. */
.ico-svg{stroke-width:1.5;vertical-align:-3px;flex:none}

/* Slim top bar for shell pages */
.shell-topbar{background:var(--navy);color:#fff;display:flex;align-items:center;
  justify-content:flex-end;gap:14px;padding:0 24px;min-height:58px;font-size:13px}
.shell-topbar .lang-switch{color:var(--gold-soft);border:1px solid rgba(230,217,168,.4);
  padding:4px 12px;border-radius:20px;font-weight:600}
.shell-topbar .lang-switch:hover{background:rgba(230,217,168,.12)}
.shell-topbar .user-chip{color:#CBD5E6}
.shell-topbar .logout{color:#9FB0CC}
.shell-topbar .logout:hover{color:#fff}
.shell-main{flex:1;min-width:0}
/* DESIGN.md §4: content sits on white --surface against the warm --page
   canvas, with a 1px --rule border — same precedent as properties.php's own
   .ledger wrapper. Only 2 of ~10 rebuilt screens (Properties, owner
   statement) had their own explicit white wrapper; giving it to the ONE
   shared container here covers Dashboard/Finance/Reports/Property detail
   in one edit instead of adding a bespoke wrapper <div> to each file. */
.shell-container{max-width:1180px;margin:0 auto;padding:26px 24px 60px;background:var(--surface);border:1px solid var(--rule)}

/* Status pills */
.status-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.pill{background:var(--pill-bg);border:1px solid var(--line);color:var(--ink);
  padding:7px 16px;border-radius:20px;font-size:13.5px;font-weight:600;cursor:pointer}
.pill .count{opacity:.65;font-weight:500}
.pill.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.pill.active.rental{background:var(--rented);border-color:var(--rented)}
.pill.active.forsale{background:var(--forsale);border-color:var(--forsale)}
.pill.active.construction{background:var(--construction);border-color:var(--construction)}
.pill.active.fixing{background:var(--fixing);border-color:var(--fixing)}
.pill.active.empty{background:var(--empty);border-color:var(--empty)}
.pill.active.sold{background:var(--sold);border-color:var(--sold)}

/* Table with thumbnail + ref */
.thumb{width:40px;height:40px;border-radius:8px;background:var(--pill-bg);
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px;flex:none;
  object-fit:cover}
/* E2.2: no photo on file -> a plain monogram tile (ref code, mono type, thin
   border, neutral background) instead of an emoji house icon. */
.thumb-mono{background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:6px;
  font-family:var(--font-mono);font-size:9px;font-weight:600;color:var(--text-secondary);
  letter-spacing:.2px;line-height:1.2;text-align:center;padding:2px}
.ref-code{font-family:var(--font-mono);font-size:12.5px;
  background:var(--pill-bg);padding:2px 8px;border-radius:6px;color:var(--navy)}
td.prop-cell{display:flex;align-items:center;gap:10px}

/* Upload boxes */
.upload-box{border:1.5px dashed var(--line);border-radius:10px;padding:18px;
  text-align:center;color:var(--muted);font-size:13px;cursor:pointer;background:#FBFAF7;position:relative}
.upload-box:hover{border-color:var(--gold)}
.upload-box .up-ico{font-size:22px;display:block;margin-bottom:6px}
.upload-box input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;padding:0}
.file-chip{display:inline-flex;align-items:center;gap:8px;background:var(--pill-bg);
  border-radius:8px;padding:6px 12px;font-size:13px;margin-top:8px}
.file-chip a{font-weight:600}

/* Installment plan block */
.plan-toggle{display:flex;gap:10px;margin-bottom:14px}
.plan-toggle label{display:flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:8px;padding:8px 14px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink)}
.plan-toggle input{width:auto}

.section-divider{border:none;border-top:1px solid var(--line);margin:22px 0}
.field-note{font-size:11.5px;color:var(--muted);margin-top:4px}
.disabled-field{background:#F3F2ED;color:var(--muted)}

/* Professional KPI cards (icon + trend) */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:18px 20px;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--gold)}
.kpi.blue::before{background:var(--forsale)} .kpi.green::before{background:var(--rented)}
.kpi.warn::before{background:var(--danger)} .kpi.purple::before{background:var(--fixing)}
.kpi-top{display:flex;align-items:center;justify-content:space-between}
.kpi-ico{width:34px;height:34px;border-radius:9px;background:var(--paper);display:flex;
  align-items:center;justify-content:center;font-size:16px}
.kpi-trend{font-size:12px;font-weight:700;padding:2px 8px;border-radius:20px}
.kpi-trend.up{color:var(--rented);background:#E8F3ED}
.kpi-trend.down{color:var(--danger);background:#F9ECEC}
.kpi-label{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:12px}
.kpi-value{font-size:var(--text-kpi);font-weight:700;color:var(--navy);margin-top:2px;letter-spacing:-.2px;font-family:var(--font-mono)}
.kpi-sub{font-size:11.5px;color:var(--muted);margin-top:3px}

/* Chart card wrapper */
.chart-card canvas{max-height:280px}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}

.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.roi-good{color:var(--ok);font-weight:700}
.roi-mid{color:var(--warn);font-weight:700}
.roi-slow{color:var(--danger);font-weight:700}

/* Status-aware property module */
.status-module{border-radius:12px;padding:18px 20px;margin-bottom:20px;color:#fff}
.status-module.rental{background:linear-gradient(135deg,var(--rented),#1f5940)}
.status-module.sale{background:linear-gradient(135deg,var(--forsale),#254a7a)}
.status-module.construction{background:linear-gradient(135deg,var(--construction),#8a5514)}
.status-module.fixing{background:linear-gradient(135deg,var(--fixing),#4f3a80)}
.status-module.vacant{background:linear-gradient(135deg,#8a94a3,#4d5560)}
.status-module.sold{background:linear-gradient(135deg,var(--sold),#5c4a05)}
.decision-box{background:#FBEAEA;border:1px solid #E3AFAF;border-radius:var(--radius);padding:16px 18px;margin-bottom:20px}
.decision-box h3{margin:0 0 10px;font-size:14px;color:var(--danger)}
.decision-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid #EEDADA;font-size:13.5px}
.decision-item:first-of-type{border-top:none}
.decision-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);flex:none}
.status-module h3{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.4px;opacity:.85}
.status-module .sm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.status-module .sm-k{font-size:11.5px;opacity:.8}
.status-module .sm-v{font-size:19px;font-weight:800;margin-top:2px}
.progress-wrap{background:rgba(255,255,255,.25);border-radius:6px;height:8px;overflow:hidden;margin-top:10px}
.progress-bar{height:100%;background:#fff;border-radius:6px}

/* Account type choice */
.account-type{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.account-type label{flex:1;min-width:220px;border:1.5px solid var(--line);border-radius:10px;
  padding:12px 14px;cursor:pointer;display:block}
.account-type label strong{display:block;font-size:14px;color:var(--navy)}
.account-type label span{font-size:12px;color:var(--muted)}
.account-type input{width:auto;display:inline;margin-inline-end:6px}

@media (max-width:860px){
  .shell{flex-direction:column}
  .sidebar{width:100%;display:flex;flex-wrap:wrap;padding:10px 0}
  .sidebar-group{margin:0;padding:0 6px}
  .sidebar-label{display:none}
}

@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* Screen: invisible — this only exists for the printed page (see @media
   print below, which switches it to display:flex and pins it to the page
   bottom via position:fixed). */
.print-footer { display: none; }

/* DESIGN.md §5.14 — print (Owner statement, Rent roll, P&L: handed to family
   members, so they need to actually work on paper). A4 portrait / 20mm is a
   real @page rule, not a suggestion — browsers honour it for Print/Save-as-PDF.
   The nav/filter/button hiding is safe on every page (nobody wants the navy
   sidebar wasted on any printout), but is really only exercised on those three
   report pages today. Redefining the palette's own custom properties (rather
   than overriding every component's colors one by one) means every existing
   --navy/--gold/--rule reference throughout the whole stylesheet automatically
   resolves to a print-safe black/white value with no per-component changes. */
@page { size: A4 portrait; margin: 20mm; }
@media print {
  :root {
    --navy: #000; --navy-soft: #000; --navy-raised: #000;
    --grey: #333; --grey-light: #666; --gold: #000;
    --page: #fff; --surface: #fff; --inset: #fff;
    --rule: #000; --rule-heavy: #000;
    --ok: #000; --warn: #000; --danger: #000;
  }
  .sidebar, .shell-topbar, .gfilter-bar, .filter-bar, .doc-filter,
  .rpt-btn, .doc-actions, .no-print, form button, form .btn { display: none !important; }
  html, body, .shell, .shell-main, .shell-container { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  * { box-shadow: none !important; text-shadow: none !important; }
  a { text-decoration: none !important; color: #000 !important; }
  /* §5.14 "table headers repeat across pages" — needs an actual <thead> to
     work at all; report-rentroll.php/report-pnl.php/report-owner-statement.php
     were restructured with <thead>/<tbody> for exactly this. */
  thead { display: table-header-group; }
  tr, .pd-section, .doc-section, .rpt-section-head { break-inside: avoid; }
  .print-footer {
    position: fixed; bottom: 0; inset-inline: 0; font-size: 10px; color: #333;
    border-top: 1px solid #000; padding-top: 4px; display: flex; justify-content: space-between;
  }
  /* True "page X of Y" content needs CSS Paged Media's @page margin boxes,
     which Chrome doesn't render (Firefox does) — a real, documented cross-
     browser gap, not something fixable from the page's own CSS. Attempted
     here for browsers that do support it; degrades to no page number in
     Chrome rather than showing something wrong. See DESIGN-NOTES.md. */
  @page { @bottom-right { content: counter(page) " / " counter(pages); font-size: 10px; color: #333; } }
}