/*
 * shared.css — CLFN Housing Suite
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * TABLE OF CONTENTS
 * ──────────────────────────────────────────────────────────────────────────
 *  1.  DESIGN TOKENS       — CSS variables, single source of truth
 *  2.  BASE RESET          — box-sizing, margins, body
 *  3.  ROLE VISIBILITY     — .ed-only .hm-ed-only etc (toggled by JS)
 *  4.  HEADER              — .app-header, brand, avatar, nav buttons
 *  5.  LAYOUT              — .app-wrapper, .sidebar, .main, .content-area
 *  6.  PAGE CHROME         — .back-btn-yellow, .page-header-bar
 *  7.  CARDS               — .card variants
 *  8.  GRID SYSTEM         — .fg .c2 .c3, .dash-stats
 *  9.  FORM FIELDS         — inputs, selects, textareas, toggles
 * 10.  BUTTONS             — .btn and all variants
 * 11.  BADGES + PILLS      — status indicators
 * 12.  MODALS              — .modal-ov, .modal, .edit-modal
 * 13.  NAVIGATION          — sidebar nav, tabs
 * 14.  DASHBOARD           — stats, filters, worklist chips
 * 15.  SETTINGS            — settings view, user table
 * 16.  APPLICATION FORM    — scorecard, rubric, sig, preview panel
 * 17.  TABLES              — inventory, scores, tbl-wrap
 * 18.  RENOVATIONS         — SOW, progress, budget, upload zones
 * 19.  PRINT               — @media print + print panel
 * 20.  ANIMATIONS          — @keyframes
 * 21.  RESPONSIVE          — 4 breakpoints, no duplication
 * 22.  FINANCE MODULE      — finance.html components (shared tokens)
 *
 * ──────────────────────────────────────────────────────────────────────────
 * NAMING CONVENTION
 * ──────────────────────────────────────────────────────────────────────────
 *  Layout    : .app-* .content-* .main .dash-view
 *  Component : .card .modal .btn .badge .pill .tab*
 *  Page scope: .dash-* .wl-* .sc-* .inv-* .reno-* .fin-*
 *  State     : .on .active .nav-active .is-signed .is-drag
 *  Utility   : .ed-only .hm-ed-only .hm-only .field-hm-only
 *
 * ──────────────────────────────────────────────────────────────────────────
 * ADDING A NEW MODULE
 * ──────────────────────────────────────────────────────────────────────────
 *  1. Add a new section here (copy an existing section as template)
 *  2. Register in shared-config.js OPTIONAL registry
 *  3. Gate all UI with: if (!CLFN_MODULES.isEnabled('your_module')) return;
 *  4. Add sb* data functions to shared-data.js
 *  5. Register page hooks (_onSwitchRole, _onLogout, _navMap) in your HTML
 * ═══════════════════════════════════════════════════════════════════════════
 */


/* ── 1. DESIGN TOKENS ───────────────────────────────────────────────────── */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Colour palette */
  --bg:           #fafaf8;
  --surface:      #fff;
  --border:       #e8e6df;
  --text:         #111110;
  --muted:        #696960;
  --yellow:       #F8E41A;
  --yellow-light: #fffce8;
  --yellow-mid:   #fef08a;
  --dark:         #111110;
  --dark2:        #1c1c1a;
  --dark3:        #2a2a28;
  --gray:         #888;
  --danger:       #b91c1c;
  --success:      #15803d;
  /* Dark-modal accents (used inside .modal-hdr-style headers) */
  --dark-border:  #444;
  --txt-on-dark:  #ccc;
  /* Status accents — used by info / warn pills and matching text */
  --info-blue:     #1d4ed8;
  --info-blue-bg:  #eff6ff;
  --warn-amber:      #7a5c00;
  --warn-amber-text: #92400e;
  --warn-amber-bg:   #fffbeb;
  --warn-amber-border: #fde68a;
  --success-bg:    #f0fdf4;
  --success-border:#bbf7d0;
  --danger-bg:     #fef2f2;
  --danger-border: #fecaca;
  /* Login screen palette — dark overlay + error accents */
  --login-bg:      #0f0f0e;
  --err-bg:        #3b0a0a;
  --err-border:    #7f1d1d;
  --err-text:      #fca5a5;
  /* Dashboard tile accent palette — one color per module tile */
  --tile-applications: #3b82f6;
  --tile-inventory:    #7c3aed;
  --tile-tenants:      #0ea5e9;
  --tile-renos:        #d97706;
  --tile-contractors:  #6b7280;
  /* Type-color palette — used by the landing-page Quick Lookup icons /
     badges / chips so tenant / unit / SOW results are visually distinct.
     Pair: -bg (light tint) + -fg (deeper text). */
  --type-tenant-bg:    #dbeafe;
  --type-tenant-fg:    #1d4ed8;
  --type-unit-bg:      #ede9fe;
  --type-unit-fg:      #6d28d9;
  --type-sow-bg:       #fed7aa;
  --type-sow-fg:       #9a3412;
  --type-ct-bg:        #dcfce7;
  --type-ct-fg:        #15803d;
  /* Typography */
  --serif: 'DM Serif Display', serif;
  --sans:  'DM Sans', sans-serif;
  /* Shape + motion */
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.07);
  --tr:     all 0.18s ease;
}


/* ── 2. BASE RESET ──────────────────────────────────────────────────────── */

/* iOS Safari's "text autosizer" silently inflates the font-size of short
   text in a wide column (e.g. a field <label> next to a narrow sibling
   field) well past the CSS value, and does it inconsistently between
   portrait/landscape — the giant, clipped "Street" label bug in the Edit
   Unit / TIC / Maintenance Request field grids. Disabling the adjuster
   makes every element render at exactly its authored font-size. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  background:  #fafaf8; /* fallback before --bg resolves, prevents white flash */
  background:  var(--bg);
  color:       var(--text);
  font-size:   14px;
  line-height: 1.6;
  min-height:  100vh;
}


/* ── 3. ROLE VISIBILITY ─────────────────────────────────────────────────── */
/* Default hidden. JS (shared-ui.js → switchRole) sets display per role.    */

.hm-ed-only   { display: none; }
.ed-only      { display: none; }
.hm-only      { display: none; }
/* .field-hm-only is NOT hidden by default — applyTenancyFieldRoles() locks it
   visually via opacity + disabled so employees see it greyed-out, not gone. */


/* ── 4. HEADER ──────────────────────────────────────────────────────────── */

.app-header {
  background:    var(--dark);
  border-bottom: 3px solid var(--yellow);
  height:        64px;
  padding:       0 16px;
  display:       flex;
  align-items:   center;
  gap:           12px;
  position:      sticky;
  top:           0;
  z-index:       100;
}
.hbrand { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.hlogo  { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; }
.htitles strong {
  font-family: var(--serif); font-size: 16px;
  color: #fff; display: block; line-height: 1.2;
}
.htitles small { font-size: 11px; color: var(--gray); display: block; }
.hright { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Brand block — yellow logo + title/subtitle stack */
.hbrand-title { display: block; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -.2px; }
.hbrand-sub   { font-size: 11px; color: var(--gray); }

/* Right-side user bar — flex container for pill + action buttons */
.header-user-bar { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* User pill (avatar + name + role badge + sign-out) */
.header-user-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--dark2); border: 1px solid #333;
  border-radius: 20px; padding: 5px 12px 5px 6px;
}
.header-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--yellow); color: #111;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.header-user-name {
  font-size: 12px; font-weight: 600; color: #fff;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.header-role-badge {
  font-size: 10px; background: #333; color: #aaa;
  font-weight: 700; padding: 2px 7px; border-radius: 8px;
}
.header-signout-btn {
  background: none; border: none; color: #666;
  font-size: 11px; font-weight: 600; cursor: pointer;
  font-family: var(--sans); padding: 0 0 0 4px; transition: var(--tr);
}
.header-signout-btn:hover { color: #ccc; }

/* Header badges (role status indicator next to name) */
.badge-name {
  background: var(--yellow); color: #111;
  font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 20px;
}
.sbadge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 20px; background: rgba(255,255,255,.08); color: #bbb;
}

/* Header buttons */
.hnav-btn {
  background: none; border: none; color: #aaa;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: var(--sans);
  transition: var(--tr); display: flex; align-items: center; gap: 6px;
}
.hnav-btn:hover  { background: rgba(255,255,255,0.08); color: #fff; }
.hnav-btn.active { color: var(--yellow); }

/* Ghost-style header button (Export, +Staff, Settings).
   `display:none` on the JS-toggled ones is set inline in the markup. */
.btn-header-ghost {
  background: none; border: 1px solid #444; color: #ccc;
  border-radius: 8px; padding: 6px 14px; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; gap: 6px; transition: var(--tr);
}
.btn-header-ghost:hover { border-color: var(--yellow); color: var(--yellow); }

/* Export dropdown menu — shared between the v2 header export and the inline
   .export-dropdown pattern (audit log, scorecards). The v2 header has its
   own .export-wrap container; inline cards use .export-dropdown. */
.header-export-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 9999; min-width: 160px; overflow: hidden;
}
.header-export-item {
  width: 100%; background: none; border: none;
  padding: 10px 16px; text-align: left;
  font-size: 13px; font-weight: 600; font-family: var(--sans);
  color: var(--text); cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
}
.header-export-item:last-child { border-bottom: none; }
.header-export-item:hover { background: var(--bg); }
.header-export-icon { font-size: 16px; }
/* Grouped variant — used by the TIC "Generate Forms" menu to bucket the
   available letters/agreements under category headers. Wider than the plain
   CSV/Excel export menus so the longer document labels fit on one line. */
.header-export-menu--wide { min-width: 288px; max-width: 340px; }
.header-export-group {
  padding: 9px 16px 5px; font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .7px; color: var(--muted);
  background: var(--bg); border-bottom: 1px solid var(--border);
  cursor: default; user-select: none;
}
.header-export-group:first-child { border-top: none; }

/* Inline export dropdown — same look as the page-header export, but always
   visible (no setExportView gating). Use anywhere a card needs an Export
   button next to its other actions (audit log, scorecards, etc).
   Markup:
     <div class="export-dropdown">
       <button onclick="toggleExportMenu(this)" class="btn btn-ghost">Export</button>
       <div class="header-export-menu">
         <button onclick="exportFoo('csv')"   class="header-export-item">CSV</button>
         <button onclick="exportFoo('excel')" class="header-export-item">Excel</button>
       </div>
     </div>
   Toggle helper lives in shared-data.js next to _doExport. */
.export-dropdown                          { position: relative; display: inline-block; }
.export-dropdown.open .header-export-menu { display: block; }


/* ── 5. LAYOUT ──────────────────────────────────────────────────────────── */

.layout       { display: flex; min-height: calc(100vh - 64px); flex-direction: column; }
.app-wrapper  { display: flex; min-height: calc(100vh - 64px); background: var(--bg); }
.content-area { flex: 1; display: flex; flex-direction: column; min-width: 0; align-items: stretch; overflow-y: scroll; scrollbar-gutter: stable; }

/* Page-level view wrappers — direct children of .content-area.
   .page-view caps width at 1200px and centres with auto margins.
   .page-view-wide fills full width (data-dense pages like contractors).
   Both handle responsive inset padding via clamp().
   `display:none` is the hidden default; _showView() flips to flex when active. */
.page-view      { display:none;flex-direction:column;width:100%;box-sizing:border-box;padding:clamp(16px,3vw,36px) clamp(14px,3vw,36px);max-width:1200px;margin:0 auto; }
.page-view-wide { display:none;flex-direction:column;width:100%;box-sizing:border-box;padding:clamp(16px,3vw,36px) clamp(14px,3vw,36px); }

#appLayout    { flex: 1; display: flex; flex-direction: column; min-width: 0; align-items: center; }

/* Sidebar */
.sidebar {
  width: 220px; min-width: 220px;
  background: var(--dark); border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column;
  padding: 16px 0; gap: 4px;
  height: calc(100vh - 64px); position: sticky; top: 64px; overflow-y: auto;
}
.snav-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: none; border: none;
  color: var(--gray); font-size: 13px; font-weight: 500;
  font-family: var(--sans); cursor: pointer;
  border-radius: 8px; margin: 0 8px; transition: var(--tr);
}
.snav-btn:hover    { background: rgba(255,255,255,.05); color: #ddd; }
.snav-btn.nav-active,
.snav-btn.active   { background: var(--yellow); color: #111; font-weight: 700; }
.snav-icon         { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.snav-divider      { height: 1px; background: rgba(255,255,255,0.06); margin: 8px 12px; }
.sbar-label        {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: #555; padding: 8px 16px 4px;
}

/* Main */
.main {
  flex: 1; padding: 36px 44px;
  max-width: 880px; width: 100%; margin: 0 auto; box-sizing: border-box;
}
.dash-view {
  display: flex; padding: 20px 16px; flex-direction: column;
  gap: 16px; width: 100%; box-sizing: border-box;
  max-width: 1200px; margin: 0 auto;
}


/* ── 6. PAGE CHROME ─────────────────────────────────────────────────────── */
/* Back button row + sub-header band used on every non-home view            */

.page-back-row {
  padding: 16px 0 0;
  display: flex; align-items: center; gap: 8px;
  width: 100%; box-sizing: border-box;
}
.back-btn-yellow {
  background: var(--yellow); border: 1.5px solid var(--yellow); color: #111;
  padding: 7px 16px; border-radius: 7px;
  font-size: 13px; font-weight: 700; font-family: var(--sans);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.back-btn-yellow:hover { background: #fff0a6; box-shadow: 0 2px 6px rgba(248,228,26,0.35); }
.back-btn-yellow svg   { flex-shrink: 0; }

/* View containers — zero out top padding so page-back-row sits flush.
   The view's inline padding handles left/right/bottom.
   page-header-bar provides vertical breathing room below the back button. */
#worklistView, #dashView, .dash-view, #settingsView, .settings-view,
#inventoryView, #matchView, #tenantsView, #renoApprovalsView,
#renosView, #contractorsView, #scorecardView, #leadershipDashView,
#landingView,
#page-home, #page-entryforms, #page-tenants, #page-rent,
#page-arrangements, #page-loans, #page-journal,
#page-collections, #page-hydro { padding-top: 0 !important; }
.back-link {
  color: var(--yellow); font-size: 12px; font-weight: 600;
  text-decoration: none; border: 1px solid rgba(248,228,26,.3);
  padding: 5px 12px; border-radius: 6px; transition: var(--tr);
}
.back-link:hover { background: rgba(248,228,26,.1); }

.page-header-bar {
  position: relative;
  padding: clamp(16px,2.5vw,28px) 0 clamp(12px,2vw,20px) 20px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
  width: 100%; box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(16px,2.5vw,24px);
}
/* Yellow left accent bar — same as landing page greeting */
.page-header-bar::before {
  content: '';
  position: absolute; left: 0; top: clamp(16px,2.5vw,28px);
  bottom: clamp(12px,2vw,20px);
  width: 4px; background: var(--yellow); border-radius: 2px;
}
.page-header-bar h1 {
  font-family: var(--serif); font-size: clamp(22px,3vw,32px);
  font-weight: 400; color: var(--text); line-height: 1.15;
}
.page-header-bar p     { font-size: 13px; color: var(--muted); margin-top: 2px; }
.page-header-actions   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* phb-title / phb-actions — inner children of .page-header-bar */
.phb-title             { flex: 1; min-width: 0; }
.phb-title h1          { font-family: var(--serif); font-size: clamp(22px,3vw,32px); font-weight: 400; color: var(--text); line-height: 1.15; margin: 0; }
.phb-title p           { font-size: 13px; color: var(--muted); margin: 4px 0 0; }

/* phb-actions with only buttons: right-aligned alongside the title */
.phb-actions           { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.phb-actions select,
.phb-actions input     { width: auto; min-width: 0; box-sizing: border-box; }

/* Scroll-collapse (tablet/mobile space-saver, mirrors the MyChart hero/tile
   -> icon-row pattern used on .tic-strip/.kpi-strip): once _initScrollCollapse
   (shared-ui.js) adds .is-scrolled to the header bar, the subtitle hides and
   the title shrinks, freeing vertical space while the user reads the list
   below. Scoped to Inventory/Match/Tenants only — those are list pages where
   the header competes with the list for space; other .page-header-bar users
   (renos, rfq, contractors, inspections, finance) are unaffected. .phb-actions
   stays visible/untouched so action buttons remain reachable while scrolled. */
#inventoryView .page-header-bar,
#matchView .page-header-bar,
#tenantsView .page-header-bar { transition: padding .15s ease; }
#inventoryView .page-header-bar.is-scrolled,
#matchView .page-header-bar.is-scrolled,
#tenantsView .page-header-bar.is-scrolled {
  padding-top: 10px; padding-bottom: 10px;
}
#inventoryView .page-header-bar.is-scrolled .phb-title p,
#matchView .page-header-bar.is-scrolled .phb-title p,
#tenantsView .page-header-bar.is-scrolled .phb-title p { display: none; }
#inventoryView .page-header-bar.is-scrolled .phb-title h1,
#matchView .page-header-bar.is-scrolled .phb-title h1,
#tenantsView .page-header-bar.is-scrolled .phb-title h1 { font-size: 18px; }

/* inventoryView filters below the header */
#inventoryView .phb-actions {
  flex-basis: 100%;
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
  gap: 10px;
}

/* ── Universal filter row ────────────────────────────────────────────────────
   Applies to: .dash-filters, .filter-bar, and any bare flex div containing
   filter inputs. The global select { width:100% } is scoped to .f form
   containers only — filter selects must always be width:auto.               */
.dash-filters,
.filter-bar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.dash-filters select, .dash-filters input,
.filter-bar select,   .filter-bar input {
  width: auto; box-sizing: border-box;
  border: 1.5px solid var(--border); border-radius: 7px;
  padding: 6px 10px; font-size: 13px;
  font-family: var(--sans); background: var(--bg); color: var(--text);
}
.dash-filters input,  .filter-bar input  { min-width: 160px; max-width: 260px; flex: 1; }
.dash-filters select, .filter-bar select { min-width: 120px; cursor: pointer; }
.dash-filters select:focus, .dash-filters input:focus,
.filter-bar select:focus,   .filter-bar input:focus { border-color: var(--yellow); outline: none; }

/* Single-input search row — full-width input with horizontal padding,
   used inside a card-flush above a JS-rendered list (e.g. assign-unit modal). */
.search-row { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.search-row input {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--border); border-radius: 7px;
  padding: 8px 12px; font-size: 13px;
  font-family: var(--sans); background: var(--bg); color: var(--text);
}
.search-row input:focus { border-color: var(--yellow); outline: none; }

/* matchView bare filter div — selects and inputs inside any flex filter row */
#matchView > div > select:not(.std-search),
#matchView > div > input:not(.std-search)  { width: auto; min-width: 0; box-sizing: border-box; }

/* Application type card text */
.appty-title           { font-weight: 700; font-size: 13px; }
.appty-desc            { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* Divider */
.divider               { height: 1px; background: var(--border); margin: 16px 0; }

/* Filter toggle row */
.ftog                  { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

/* Signature step action bar */
.sig-actions           { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Dashboard table — matches std-table pattern from finance module */
.dash-table            { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th         { padding: 9px 14px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--yellow); vertical-align: top; background: var(--dark2); }
.dash-table td         { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dash-table tbody tr:last-child td { border-bottom: none; }
.dash-table tbody tr:hover td { background: var(--surface); }

/* Table column width hints */
.col-score             { width: 130px; white-space: nowrap; }
.col-date              { width: 90px;  white-space: nowrap; }
.col-res, .col-arr     { width: auto;  white-space: nowrap; }
.col-cls               { width: auto; }

/* Empty state */
.empty-state           { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty-icon            { font-size: 32px; margin-bottom: 10px; }

/* Section headers within a view */
.sec-hdr   { margin-bottom: 16px; }
.sec-hdr h1 {
  font-family: var(--serif); font-size: 25px; font-weight: 400; margin-bottom: 5px;
}
.sec-hdr p { font-size: 13px; color: var(--muted); }


/* ── 7. CARDS ───────────────────────────────────────────────────────────── */

.card {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow); padding: 24px;
}
.card-dark { background: var(--dark2); border-color: var(--dark3); color: #ddd; }
.card + .card { margin-top: 16px; }


/* ── 8. GRID SYSTEM ─────────────────────────────────────────────────────── */

.fg     { display: flex; flex-direction: column; gap: 12px; }
.fg.c2  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fg.c3  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.c2     { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.c3     { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
/* Span helpers for .fg/.c2/.c3 grid items — .s2 spans 2 columns, .s3 spans
   the full row regardless of column count. */
.s2     { grid-column: span 2; }
.s3     { grid-column: 1 / -1; }

.dash-stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 14px; margin-bottom: 20px;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-num   { font-size: 28px; font-weight: 800; line-height: 1; }
.stat-label,
.stat-lbl   {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--muted);
}
.stat-sub   { font-size: 11px; color: var(--muted); }
.stat-bar   { height: 4px; background: var(--border); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.stat-fill  { height: 100%; border-radius: 2px; transition: width .4s ease; }


/* ── 9. FORM FIELDS ─────────────────────────────────────────────────────── */

.f         { display: flex; flex-direction: column; gap: 5px; margin-bottom: 0; min-width: 0; }
.f.s2      { grid-column: span 2; }
.f label   { font-size: 12px; font-weight: 600; color: var(--text); }
.r         { color: var(--danger); }
.sublbl    { font-size: 11px; color: var(--muted); margin-top: 2px; }

.f input, .f select, .f textarea,
input[type="text"], input[type="email"], input[type="date"],
input[type="number"], input[type="tel"], textarea {
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 9px 12px; font-size: 13px;
  background: var(--surface); color: var(--text);
  font-family: var(--sans); width: 100%; box-sizing: border-box;
  transition: border-color 0.15s;
}
/* Selects outside .f (filters, header dropdowns) must NOT be full-width */
select {
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 9px 12px; font-size: 13px;
  background: var(--surface); color: var(--text);
  font-family: var(--sans); width: auto; box-sizing: border-box;
  transition: border-color 0.15s;
}
/* But selects inside .f DO get full width */
.f select { width: 100%; }
.f input:focus, .f select:focus, .f textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(248,228,26,0.15);
}
.f textarea { resize: vertical; min-height: 80px; }
.f input:disabled, .f select:disabled, .f textarea:disabled,
input:disabled, select:disabled, textarea:disabled {
  background: var(--bg); color: var(--muted); cursor: not-allowed;
}
.field-error { border-color: var(--danger) !important; }

/* Date inputs, app-wide — iOS Safari renders an empty input[type=date] as a
   totally blank box (no calendar icon, no mm/dd/yyyy placeholder like the
   selects beside it), AND gives a filled date input a taller native height
   than an empty one, so the field looks broken and jumps in height once a
   date is picked. -webkit-appearance:none hands sizing fully to our own
   padding-driven box model (identical for empty/filled) and a background
   icon replaces the missing native affordance; the stretched, invisible
   ::-webkit-calendar-picker-indicator keeps the whole field clickable to
   open Chrome's native picker (Safari has no such pseudo-element — the
   field opens its picker on tap regardless).
   -webkit-appearance:none also strips iOS's own comfortable minimum touch
   height for the control — a bonus of the native chrome we just removed,
   not something our padding alone replaces — so the field renders visibly
   shorter than the untouched text/select inputs beside it. line-height and
   min-height pin it back to the same computed box height as
   `.f input, .f select` (1.5px border + 9px padding + 13px × 1.6 line +
   9px padding ≈ 43px) so every field in a form reads the same height. */
input[type="date"] {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.6;
  min-height: 43px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23696960' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 34px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0; top: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: pointer;
}

/* Toggle switch */
.toggle-row { display: flex; align-items: center; justify-content: space-between; }
.tsw  {
  position: relative; width: 44px; height: 24px;
  flex-shrink: 0; display: inline-block; cursor: pointer;
}
.tsw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tsl  {
  position: absolute; inset: 0; background: var(--border);
  border-radius: 12px; transition: var(--tr); cursor: pointer; pointer-events: none;
}
.tsw input:checked + .tsl { background: var(--yellow); }
.tsl::before {
  content: ''; position: absolute; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: var(--tr);
}
.tsw input:checked + .tsl::before { transform: translateX(20px); }

/* Step validation error banner */
.step-error-banner {
  display: none; background: #fef2f2; border: 1.5px solid #fecaca;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
  font-size: 13px; color: var(--danger);
}
.step-error-banner.on { display: block; }

/* Form nav (step wizard) */
.fnav       { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.fnav .btn  { flex: 0 0 auto; }


/* ── 10. BUTTONS ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  font-family: var(--sans); cursor: pointer; border: 1.5px solid transparent;
  transition: var(--tr); text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--yellow);   color: var(--dark);  border-color: var(--yellow); }
.btn-primary:hover { background: #e8d418; }
.btn-ghost   { background: transparent;     color: var(--text); border-color: var(--border); }
.btn-ghost:hover   { background: var(--bg); border-color: var(--muted); }
.btn-ghost-dark { background: transparent; color: var(--txt-on-dark); border-color: var(--muted); }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.08); border-color: var(--txt-on-dark); color: #fff; }

.btn-sm            { padding: 5px 12px; font-size: 11px; }
.btn-full          { flex: 1; justify-content: center; }
.btn-dark    { background: var(--dark);     color: #fff;  border-color: var(--dark); }
.btn-dark:hover    { background: var(--dark2); }
.btn-danger  { background: var(--danger);   color: #fff;  border-color: var(--danger); }
.btn-danger:hover  { background: #991b1b; }
.btn-danger-ghost  { background: none; color: #b91c1c; border-color: #b91c1c; }
.btn-danger-ghost:hover { background: rgba(185,28,28,0.06); }

/* Horizontal pill row for action buttons (e.g. contractor approve / decline) */
.action-pills          { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
/* Full-width variant — buttons share the row equally, left-to-right.
   Used at the top of the contractor approval panel under the dark header. */
.action-pills-center   { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px;
                         background: var(--surface); border-bottom: 1px solid var(--border); }
.action-pills-center .btn { flex: 1; justify-content: center; }
.btn-green   { background: var(--success);  color: #fff;  border-color: var(--success); }
.btn-sec     { background: rgba(248,228,26,0.1); color: var(--yellow); border-color: rgba(248,228,26,0.35); }
.btn-sec:hover { background: rgba(248,228,26,0.18); }
.btn-sm      { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.btn-xs      { padding: 3px 8px;  font-size: 11px; border-radius: 5px; }
.btn-rm      { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 12px; font-family: var(--sans); padding: 4px 8px; }
.btn-add     { background: var(--yellow-light); border: 1.5px dashed var(--yellow-mid); color: #7a6000; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--sans); width: 100%; }
.btn:disabled, button:disabled { opacity: 0.45; cursor: not-allowed; }


/* ── 11. BADGES + PILLS ─────────────────────────────────────────────────── */

.badge, .pill {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.badge-yellow, .pill-yellow { background: var(--yellow-light); color: #7a6000; border-color: var(--yellow-mid); }
.badge-green,  .pill-green  { background: #f0fdf4; color: var(--success); border-color: #bbf7d0; }
.badge-red,    .pill-red    { background: #fef2f2; color: var(--danger);  border-color: #fecaca; }
.badge-blue,   .pill-blue   { background: #eff6ff; color: #1d4ed8;        border-color: #bfdbfe; }
.badge-purple, .pill-purple { background: #faf5ff; color: #7e22ce;        border-color: #e9d5ff; }
.badge-gray,   .pill-gray   { background: var(--bg); color: var(--muted); border-color: var(--border); }
.badge-dark                 { background: var(--dark2); color: #ccc; border-color: var(--dark3); }

/* Dot status indicator */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }



.pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: 20px; white-space: nowrap; gap: 4px;
}
.pill-dot   { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 4px; flex-shrink: 0; }
.pill-draft     { background: #f4f4f0; color: #666; }
.pill-draft .pill-dot     { background: #aaa; }
.pill-submitted { background: #eff6ff; color: #1d4ed8; }
.pill-submitted .pill-dot { background: #3b82f6; }
.pill-mgr       { background: #faf5ff; color: #7c3aed; }
.pill-mgr .pill-dot       { background: #7c3aed; }
.pill-approved  { background: #f0fdf4; color: #15803d; }
.pill-approved .pill-dot  { background: #22c55e; }
.pill-declined  { background: #fef2f2; color: #b91c1c; }
.pill-declined .pill-dot  { background: #ef4444; }
.pill-returned  { background: #fff7ed; color: #c2410c; }
.pill-returned .pill-dot  { background: #f97316; }
.pill-assigned  { background: #f0fdf4; color: #15803d; }
.pill-assigned .pill-dot  { background: #15803d; }
/* ── 12. MODALS ─────────────────────────────────────────────────────────── */

.modal-ov {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-ov.on { display: flex; }
.modal {
  background: var(--surface); border-radius: 14px;
  max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  padding: 24px;
}
/* Structured modals with .modal-hdr reset the padding via child elements */
.modal:has(.modal-hdr) { padding: 0; }
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 920px; }

/* ── Modal header — CLFN brand pattern ─────────────────────────────────────
   Base class covers all modal headers: dark bg, yellow bottom border, flex row.
   Modifier classes handle sticky positioning and size variants.            */
.modal-hdr {
  background: var(--dark);
  border-bottom: 2px solid var(--yellow);
  border-radius: 14px 14px 0 0;
  padding: 14px 20px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  flex-shrink: 0;
}
.modal-hdr.sticky   { position: sticky; top: 0; z-index: 1; }
.modal-hdr.compact  { padding: 10px 16px; }
.modal-hdr.spacious { padding: 16px 24px; }
.modal-hdr.icon-row { justify-content: flex-start; border-radius: 14px 14px 0 0; border-bottom-width: 3px; }
/* Phones: stack the title above a single right-aligned action cluster (Print /
   Export / close) so the buttons don't wrap awkwardly next to a long title. */
@media (max-width: 640px) {
  .modal-hdr.modal-hdr-stack { flex-wrap: wrap; row-gap: 10px; }
  .modal-hdr.modal-hdr-stack > div:first-child { flex: 1 1 100%; }
  .modal-hdr.modal-hdr-stack .flex-gap8 { margin-left: auto; flex-wrap: nowrap; }
}
.modal-hdr h2, .modal-hdr .modal-hdr-title {
  font-family: var(--serif); font-size: 17px; color: #fff;
  font-weight: 400; margin: 0 0 2px; line-height: 1.2;
}
.modal-hdr p, .modal-hdr .modal-hdr-sub {
  font-size: 11px; color: var(--gray); margin: 0;
}
.modal-hdr-icon  { font-size: 20px; flex-shrink: 0; }
.modal-close  { background: none; border: none; color: #666; font-size: 18px; cursor: pointer; transition: var(--tr); flex-shrink: 0; }
.modal-close:hover { color: #fff; }
.modal-body   { padding: 20px; }
.modal-footer {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--bg); border-radius: 0 0 14px 14px;
}
.modal-icon { font-size: 32px; margin-bottom: 8px; display: block; }
.modal-inner-scroll { max-height: 50vh; overflow-y: auto; }

/* Edit modal (wide panel) */
.edit-modal-ov {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 300;
  display: none; align-items: flex-start; justify-content: center; padding: 40px 20px;
}
.edit-modal-ov.on { display: flex; }
.edit-modal {
  background: var(--surface); border-radius: 14px; width: 100%;
  max-width: 680px; max-height: 85vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.edit-modal-header { background: var(--dark); padding: 16px 20px; border-radius: 14px 14px 0 0; display: flex; justify-content: space-between; align-items: center; }
.edit-modal-header h2 { font-size: 16px; color: #fff; }
.edit-modal-body   { padding: 20px; }
.edit-modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.edit-modal-close  { background: none; border: none; color: var(--gray); font-size: 18px; cursor: pointer; }
.edit-modal-tabs   { display: flex; border-bottom: 2px solid var(--border); padding: 0 20px; }
.edit-tab { padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; border: none; background: none; font-family: var(--sans); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.edit-tab.active { color: var(--text); border-bottom-color: var(--yellow); }

/* Email preview */
.email-preview-box {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; max-height: 300px; overflow-y: auto;
}


/* ── 13. NAVIGATION ─────────────────────────────────────────────────────── */

/* Tab strip */
.tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 16px; gap: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-btn { background: none; border: none; padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; font-family: var(--sans); border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: var(--tr); }
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--yellow); }
.tab-panel      { display: none; }
.tab-panel.on   { display: block; }

/* Pill tabs — segmented-control style (Admin / App Settings, etc.).
   Reusable on any page that needs a small grouping control. */
.pill-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  width: fit-content; max-width: 100%; margin-bottom: 16px;
  /* Scroll horizontally when the tabs exceed the viewport instead of squishing
     / wrapping (matches .tabs / .tic-tabs). */
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pill-tabs::-webkit-scrollbar { display: none; }
.pill-tab {
  background: none; border: none; padding: 8px 18px;
  font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
  font-family: var(--sans); border-radius: 7px; transition: var(--tr);
  flex-shrink: 0; white-space: nowrap;
}
.pill-tab:hover  { color: var(--text); }
.pill-tab.active {
  background: var(--surface); color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Sidebar nav */
.nav-tabs { display: flex; flex-direction: column; gap: 4px; }
.nav-tab  {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--gray);
  background: none; border: none; cursor: pointer; font-family: var(--sans); transition: var(--tr);
}
.nav-tab:hover    { background: rgba(255,255,255,.05); color: #ddd; }
.nav-tab.active   { background: var(--yellow); color: #111; font-weight: 700; }
.nav-label        { flex: 1; }

/* Mobile hamburger */
.hamburger-btn {
  display: none; background: none; border: 1px solid rgba(255,255,255,0.15);
  color: #ccc; padding: 6px 10px; border-radius: 6px; cursor: pointer;
  font-size: 18px; align-items: center;
}
.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 149; display: none; }
.sidebar-overlay.open { display: block; }
.sidebar-close-row { display: none; justify-content: flex-end; padding: 8px 12px; }


/* Single block per breakpoint — no scattered @media rules anywhere above.  */
/* ──────────────────────────────────────────────────────────────────────── */

/* ≥1024px — Desktop enhancements */
/* ══════════════════════════════════════════════════════════════════════════
 * RESPONSIVE DESIGN — Single source of truth for ALL pages
 * Breakpoints: 1024px (large), 960px (tablet), 700px (mobile), 480px (small)
 * Finance-specific grid rules included here so finance.css stays clean.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── ≥1024px Large desktop ── */
@media (min-width: 1024px) {
  .app-header    { padding: 0 32px; }
  .hbrand .hlogo { width: 44px; height: 44px; }
}

/* ── ≤960px Tablet ── */
@media (max-width: 960px) {
  .main                { padding: 24px 20px; }
  .sidebar             { width: 180px; min-width: 180px; }
  .dash-stats          { grid-template-columns: 1fr 1fr; }
  .fg.c3, .c3          { grid-template-columns: 1fr 1fr; }
  .settings-form       { grid-template-columns: 1fr; }
  .settings-form-row   { grid-column: span 1; }
  /* Finance grids */
  .action-panel, .action-grid { grid-template-columns: repeat(3,1fr); }
  .stats-grid, .aging-grid    { grid-template-columns: repeat(2,1fr); }
  /* Table columns marked low-priority hide at tablet width */
  .col-hide-tablet            { display: none; }
}

/* ── ≤700px Mobile ── */
@media (max-width: 700px) {
  /* Layout */
  .app-wrapper         { flex-direction: column; height: auto; min-height: calc(100vh - 56px); }
  .content-area        { width: 100%; overflow-x: hidden; }
  .sidebar             { position: fixed !important; top: 0; left: 0; height: 100vh !important;
                          width: 260px !important; z-index: 150;
                          transform: translateX(-100%); transition: transform .25s; }
  .sidebar.open        { transform: translateX(0); box-shadow: 8px 0 32px rgba(0,0,0,.5); }
  .sidebar-close-row   { display: flex; }
  .hamburger-btn       { display: flex !important; }
  /* Header */
  .app-header          { padding: 0 14px; height: 56px; }
  .hbrand              { gap: 8px; }
  .hlogo               { width: 32px; height: 32px; }
  .htitles small       { display: none; }
  .header-user-name    { display: none; }
  /* Main content */
  .main                { padding: 16px 12px; }
  .dash-view           { padding: 12px 10px; }
  .card                { padding: 16px 14px; }
  /* View containers — sides only, top stays 0 */
  #worklistView, #dashView, #settingsView, #employeeHomeView,
  #inventoryView, #matchView, #tenantsView, #renoApprovalsView,
  #renosView, #contractorsView, #scorecardView, #leadershipDashView,
  #page-home, #page-entryforms, #page-tenants, #page-rent,
  #page-arrangements, #page-loans, #page-journal,
  #page-collections, #page-hydro {
    padding-left:   14px !important;
    padding-right:  14px !important;
    padding-bottom: 16px !important;
  }
  /* Home greeting — prevent overflow into header */
  .home-greeting       { margin-bottom: 16px; }
  .home-welcome        { font-size: 22px !important; }
  .home-date-line      { font-size: 10px; }
  /* Grids collapse */
  .fg.c2, .fg.c3, .c2, .c3 { grid-template-columns: 1fr !important; }
  .sig-row-2           { grid-template-columns: 1fr; }
  .dash-stats          { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  /* Tables */
  .col-hide-mobile     { display: none; }
  #inv_table th:nth-child(7), #inv_table td:nth-child(7) { display: none; }
  /* Modals */
  .modal               { width: calc(100vw - 24px) !important; max-width: 100% !important; }
  .modal-footer        { flex-wrap: wrap; gap: 8px; }
  .edit-modal          { width: calc(100vw - 24px) !important; }
  /* Nav */
  .fnav                { flex-wrap: wrap; gap: 8px; }
  .fnav .btn           { flex: 1; min-width: 120px; justify-content: center; }
  /* Settings */
  .settings-view       { padding: 14px 12px !important; max-width: 100%; }
  .settings-form       { grid-template-columns: 1fr !important; }
  .settings-form-row   { grid-column: span 1 !important; }
  /* Scorecard */
  #scorecardView > div:first-child  { padding: 10px 12px; }
  #scorecardView > div:nth-child(2) { padding: 14px 14px 40px !important; }
  /* Finance grids */
  .action-panel, .action-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid, .aging-grid,
  .balance-tiles              { grid-template-columns: 1fr 1fr !important; }
  .tic-contact-grid           { grid-template-columns: 1fr !important; }
  .tic-4col                   { grid-template-columns: 1fr 1fr !important; }
  .action-sub                 { display: none; }
  /* Filters — stack on mobile */
  .dash-filters, .filter-bar  { gap: 6px; }
  .dash-filters input, .filter-bar input { min-width: 100%; }
  /* Back button — bigger tap target on mobile */
  .page-back-row   { padding-top: 12px; }
  .back-btn-yellow { padding: 9px 18px; font-size: 13px; }
}

/* ── ≤480px Small mobile ── */
@media (max-width: 480px) {
  .app-header          { padding: 0 10px; height: 52px; }
  .hlogo               { width: 28px; height: 28px; }
  .main                { padding: 10px 10px; }
  .card                { padding: 12px 10px; }
  .dash-stats          { grid-template-columns: 1fr !important; }
  .modal-footer        { flex-direction: column; }
  .modal-footer .btn   { width: 100%; justify-content: center; }
  .home-welcome        { font-size: 19px !important; }
  .page-header-bar h1,
  .phb-title h1        { font-size: 20px !important; }
  /* View containers tighter */
  #worklistView, #dashView, #settingsView, #employeeHomeView,
  #inventoryView, #matchView, #tenantsView, #renoApprovalsView,
  #renosView, #contractorsView, #scorecardView, #leadershipDashView,
  #page-home, #page-entryforms, #page-tenants, #page-rent,
  #page-arrangements, #page-loans, #page-journal,
  #page-collections, #page-hydro {
    padding-left:   10px !important;
    padding-right:  10px !important;
  }
}

/* ── Print ── */
@media print {
  .app-header, .sidebar, .sidebar-overlay, .page-header-actions,
  .modal-ov, .hamburger-btn, .sidebar-close-row, nav { display: none !important; }
  .main   { padding: 0 !important; }
  .card   { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  body    { background: #fff; color: #000; }
}

/* ── Standard table card + cell + pill (used by DocLibrary + finance) ── */
.std-table-card       { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.std-table-hdr        { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); gap: 8px; flex-wrap: wrap; }
.std-table-count      { font-size: 11px; font-weight: 700; color: var(--muted); }
.std-table            { width: 100%; border-collapse: collapse; font-size: 13px; }
.std-table th         { padding: 9px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--yellow); text-align: left; vertical-align: top; background: var(--dark2); }
.std-table td         { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.std-table tr:last-child td { border-bottom: none; }
.std-table tr.clickable { cursor: pointer; }
.std-table tr.clickable:hover td { background: var(--surface); }
.empty-row { }
.std-table tr.empty-row td,
tr.empty-row td { text-align: center; padding: 40px; color: var(--muted); }
.std-row-avatar-cell  { width: 40px; padding-right: 0; }
.std-row-avatar       { width: 32px; height: 32px; border-radius: 50%; background: var(--dark2); color: var(--yellow); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.std-cell-primary     { font-weight: 600; }
.std-cell-right       { text-align: right; }
.std-cell-dash        { color: var(--muted); }
.std-cell-tail        { text-align: right; font-size: 11px; color: var(--muted); white-space: nowrap; }
.std-pill             { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.std-pill-paid        { background: #f0fdf4; color: #15803d; }
.std-pill-pending     { background: var(--warn-amber-bg); color: var(--warn-amber-text); }
.std-pill-overdue     { background: #fef2f2; color: #b91c1c; }
.std-pill-info        { background: #eff6ff; color: #1d4ed8; }
.std-pill-voided      { background: #f4f4f0; color: var(--gray); }

/* ── File upload / DocLibrary widget ────────────────────────────────────────
   Used by DocLibrary (shared.js) across housing, renos and finance.
   All pages load shared.css so these belong here.                          */
.doclib          { display: flex; flex-direction: column; width: 100%; overflow: hidden; }
.doclib-status        { font-size: 11px; padding: 4px 12px; border-radius: 4px; font-weight: 700; margin: 0 16px 8px; }
.doclib-status-info   { background: #eff6ff; color: #1d4ed8; }
.doclib-status-error  { background: #fef2f2; color: var(--danger); }

/* Upload area — drop zone + category selector side by side */
.doclib-upload-area {
  display: flex; align-items: stretch; gap: 0;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.doclib-upload-drop {
  flex: 1; border: 2px dashed var(--border); border-radius: 8px;
  padding: 14px 16px; cursor: pointer; transition: var(--tr);
  display: flex; align-items: center; gap: 12px;
}
.doclib-upload-drop:hover,
.doclib-upload-drop.is-drag { border-color: var(--yellow); background: var(--yellow-light); }
.doclib-upload-icon   { font-size: 28px; flex-shrink: 0; }
.doclib-upload-text   { display: flex; flex-direction: column; gap: 2px; }
.doclib-upload-text strong { font-size: 13px; font-weight: 600; color: var(--text); }
.doclib-upload-text span   { font-size: 11px; color: var(--muted); }
.doclib-upload-cat    {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding-left: 16px; min-width: 160px; flex-shrink: 0;
}
.doclib-upload-cat-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

/* Filter row */
.doclib-filter-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.doclib-filter-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; }
.doclib-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* DocLibrary table section — flush to card edges */
.doclib .std-table td:first-child { padding-left: 16px; }
.doclib .std-table td:last-child  { padding-right: 16px; }
.doclib .std-table th:first-child { padding-left: 16px; }
.doclib .std-table th:last-child  { padding-right: 16px; }
.doclib .std-table tr.empty-row td { padding: 32px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.doclib-table-wrap { overflow-x: auto; width: 100%; }
.doclib-table      { width: 100% !important; min-width: 520px; }
/* First column (file icon) narrow, file name column takes remaining space */
.doclib-table td:first-child,
.doclib-table th:first-child { width: 32px; }
.doclib-table td:nth-child(2),
.doclib-table th:nth-child(2) { width: auto; max-width: none; }
/* Filename cell — allow wrapping for long names */
.doclib-table .std-cell-primary { white-space: normal; word-break: break-word; max-width: none; }
.upload-zone  { border: 2px dashed var(--border); border-radius: 10px; padding: 28px 20px; text-align: center; cursor: pointer; transition: var(--tr); }
.upload-zone:hover,
.upload-zone.is-drag  { border-color: var(--yellow); background: var(--yellow-light); }
/* Hide the native file input — drop-zone onclick triggers it programmatically */
.upload-zone input[type="file"] { display: none; }
.upload-zone-icon  { color: var(--muted); margin-bottom: 6px; }
.upload-zone-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.link-yellow       { color: var(--yellow); text-decoration: underline; }

/* Generic file list (used under upload widgets — SOW attachments etc.) */
.file-list         { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.file-list-empty   { font-size: 12px; color: var(--muted); font-style: italic; padding: 8px 0; text-align: center; }
.file-row          { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
                     background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
                     font-size: 12px; }
.file-icon         { font-size: 18px; flex-shrink: 0; }
.file-name         { flex: 1; min-width: 0; font-weight: 600; color: var(--text);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta         { font-size: 11px; color: var(--muted); white-space: nowrap; }
.file-actions      { display: flex; gap: 4px; flex-shrink: 0; }
.file-actions a, .file-actions button {
  background: none; border: 1px solid var(--border); border-radius: 5px;
  padding: 3px 8px; font-size: 11px; color: var(--muted); cursor: pointer;
  text-decoration: none; font-family: var(--sans);
}
.file-actions a:hover, .file-actions button:hover { border-color: var(--yellow); color: var(--text); }
.file-actions .file-delete:hover { border-color: #b91c1c; color: #b91c1c; }
.file-list-meta    { font-size: 11px; color: var(--muted); }
.file-list-meta.is-warn { color: #b91c1c; font-weight: 600; }

/* ── Filter rows + filter chips (DocLibrary + finance views) ─────────────────
   Used by DocLibrary widget and finance module filter bars.                */
.std-filter-row       { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg); }
.std-filter-label     { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.std-filter-control   { border: 1.5px solid var(--border); border-radius: 7px; padding: 6px 10px; font-size: 12px; font-family: var(--sans); background: var(--surface); color: var(--text); width: auto; }
.std-filter-control.narrow { min-width: 0; }

/* Standalone primary search bar — one consistent style across every list
   view (Inventory, Match, Tenants, Contractors, Renovations, Worklist).
   Sits in its own row directly below the page header. */
.std-search-row     { margin: 0 0 12px 0; width: 100%; }
.std-search-row .std-search { width: 100%; max-width: 520px; }
/* Full-width variant — drops the 520px cap so the search bar spans the
   entire content area. Use on pages where there's no adjacent filter
   row (Inventory / Match after Phase 2 cleanup, etc). */
.std-search-row.std-search-row-wide              { width: 100%; }
.std-search-row.std-search-row-wide .std-search  { width: 100%; max-width: none; display: block; }
.std-search         {
  box-sizing: border-box;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--sans);
  background: var(--surface);
  color: var(--text);
}
.std-search:focus   { outline: none; border-color: var(--yellow); }

/* ── Sortable + groupable table headers (Phase 2) ────────────────────────
   Headers with data-sort-key get a hover state and a ▲/▼ arrow when
   active. Group header rows are clickable to collapse/expand the rows
   beneath them. Applied opt-in per table — non-sortable th tags are
   unaffected.                                                             */
.std-th-sortable          { cursor: pointer; user-select: none; transition: background-color 0.12s ease, color 0.12s ease; position: relative; }
.std-th-sortable:hover    { background: rgba(248,228,26,0.18) !important; color: var(--text) !important; }
/* Default sortable indicator — faded ⇅ on every sortable header so users
   see at-a-glance which columns can be sorted. Replaced by the bright
   yellow ▲/▼ when the column is actively sorted. */
.std-th-sortable::after   { content: ' ⇅'; color: var(--border); font-size: 10px; font-weight: 400; opacity: 0.7; margin-left: 4px; vertical-align: middle; }
.std-th-sortable.is-sorted::after { content: ''; }
/* Active-sort column: yellow background + dark text so it stands out from
   the other headers regardless of theme. */
.std-th-sortable.is-sorted          { background: var(--yellow) !important; color: #111 !important; }
.std-th-sortable.is-sorted:hover    { background: var(--yellow) !important; color: #111 !important; }
.std-th-sortable.is-sorted .std-sort-arrow { color: #111; }
.std-sort-arrow           { color: #111; font-weight: 800; margin-left: 4px; font-size: 11px; }

/* Filtered-column indicator — small badge after the header label. */
.std-th-sortable.is-filtered::before { content: '⏷ '; color: var(--yellow); font-size: 10px; font-weight: 800; }

/* ── Column menu popover ──────────────────────────────────────────────── */
.std-col-menu {
  position: absolute;
  min-width: 240px; max-width: 320px;
  max-height: 70vh; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.20), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 1000;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
}
.std-col-menu-header {
  padding: 10px 14px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  border-radius: 10px 10px 0 0;
}
.std-col-menu-section { padding: 6px 0; }
.std-col-menu-action {
  display: block; width: 100%; text-align: left;
  padding: 7px 14px;
  background: none; border: none;
  font: inherit; color: var(--text);
  cursor: pointer;
}
.std-col-menu-action:hover:not(:disabled) { background: rgba(248,228,26,0.18); }
.std-col-menu-action.is-active            { background: var(--yellow); color: #111; font-weight: 700; }
.std-col-menu-action:disabled             { color: var(--muted); cursor: default; }
.std-col-menu-divider { border-top: 1px solid var(--border); margin: 4px 0; }
.std-col-menu-section-values { padding: 6px 10px; }
.std-col-menu-search {
  width: 100%; box-sizing: border-box;
  padding: 6px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; background: var(--bg); color: var(--text);
}
.std-col-menu-values { max-height: 240px; overflow-y: auto; margin: 0 -4px; }
.std-col-menu-value {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  cursor: pointer; user-select: none;
  border-radius: 6px;
}
.std-col-menu-value:hover { background: rgba(248,228,26,0.12); }
.std-col-menu-value input[type="checkbox"] { accent-color: var(--yellow); cursor: pointer; }
.std-col-menu-value-label { flex: 1; }
.std-col-menu-value-count { color: var(--muted); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: var(--bg); }
.std-col-menu-footer {
  display: flex; gap: 12px; justify-content: flex-end;
  padding: 6px 14px 10px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}
.std-col-menu-link {
  background: none; border: none;
  font: inherit; color: var(--info-blue, #1d4ed8);
  cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.std-col-menu-link:hover { color: var(--yellow); }
.tic-hist-chip        { font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 20px; border: 1.5px solid var(--border); background: none; color: var(--muted); cursor: pointer; font-family: var(--sans); }
.tic-hist-chip:hover  { border-color: var(--yellow); color: var(--text); }
.tic-hist-chip.is-active { background: var(--yellow); border-color: var(--yellow); color: #111; font-weight: 700; }
.is-active            { background: var(--yellow); border-color: var(--yellow) !important; color: #111 !important; }
/* ── Shared utility classes (used across housing + finance) ── */
.ctitle    { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin-bottom: 12px; }

/* ── Finance std-page-header — same yellow accent pattern as page-header-bar ── */
.std-page-header {
  position: relative;
  padding: clamp(16px,2.5vw,28px) 0 clamp(12px,2vw,20px) 20px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
  width: 100%; box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(16px,2.5vw,24px);
}
.std-page-header::before {
  content: '';
  position: absolute; left: 0; top: clamp(16px,2.5vw,28px);
  bottom: clamp(12px,2vw,20px);
  width: 4px; background: var(--yellow); border-radius: 2px;
}
.std-page-header-main { flex: 1; min-width: 0; }
.std-page-title    { font-family: var(--serif); font-size: clamp(22px,3vw,32px); font-weight: 400; color: var(--text); line-height: 1.15; margin: 0 0 4px; }
.std-page-subtitle { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.std-page-meta     { font-size: 11px; color: var(--muted); margin-top: 4px; }
.std-page-actions  { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }

/* Home/landing page greeting pattern */
.home-accent-bar { position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; background: var(--yellow); border-radius: 2px; }
.home-subtitle   { color: var(--muted); font-size: 14px; margin: 0; }
.home-tiles-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 14px; margin-bottom: 32px; }

/* ── Contractor card ─────────────────────────────────────────────────────── */

.ct-card                 { cursor: pointer; position: relative;
                           border-top: 3px solid var(--yellow) !important;
                           transition: box-shadow .15s, border-color .15s; }
.ct-card:hover           { box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
.ct-card-head            { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ct-card-icon            { width: 42px; height: 42px; border-radius: 50%;
                           background: var(--dark); border: 1.5px solid var(--yellow);
                           color: var(--yellow); font-size: 13px; font-weight: 800;
                           letter-spacing: .5px;
                           display: flex; align-items: center; justify-content: center;
                           flex-shrink: 0; font-family: var(--sans); }
.ct-card-body            { flex: 1; min-width: 0; }
.ct-card-name            { font-weight: 700; font-size: 14px;
                           overflow: hidden; text-overflow: ellipsis;
                           white-space: nowrap; }
.ct-card-trade           { font-size: 12px; color: var(--muted); margin-top: 2px;
                           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-card-status          { margin-top: 6px; }
.ct-card-info            { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.ct-card-tags            { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ct-card-tag             { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px; }
.ct-card-actions         { display: flex; gap: 6px; margin-top: 10px;
                           padding-top: 10px; border-top: 1px solid var(--border); }
.ct-card-btn             { flex: 1; background: none; border: 1px solid var(--border);
                           color: var(--text); padding: 5px 0; border-radius: 6px;
                           cursor: pointer; font-size: 11px; font-weight: 700;
                           font-family: var(--sans); transition: border-color .15s, color .15s; }
.ct-card-btn:hover       { border-color: var(--yellow); color: var(--yellow); }
.ct-card-btn.muted       { color: var(--muted); font-weight: 400; }

/* ── Utility classes used by contractor modal ───────────────────────────── */
.flex-end   { display: flex; align-items: center; justify-content: flex-end; }
.flex-col   { display: flex; flex-direction: column; }
.flex-wrap  { display: flex; flex-wrap: wrap; }
.gap-6      { gap: 6px; }
.gap-8      { gap: 8px; }
.gap-12     { gap: 12px; }
.lbl-yellow { font-size: 10px; font-weight: 700; text-transform: uppercase;
              letter-spacing: 1px; color: var(--yellow); }
.lbl-sm     { font-size: 12px; font-weight: 600; color: var(--text); }

/* High-frequency utilities pulled from inline-style refactor */
.txt-hdr-white     { font-size: 16px; font-weight: 700; color: #fff; }
.txt-required      { color: #b91c1c; }
.box-bg-card       { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.lbl-uppercase-sm  { font-size: 10px; font-weight: 700; text-transform: uppercase;
                     letter-spacing: .8px; color: var(--gray); margin-bottom: 2px; }
.txt-help          { font-size: 11px; color: var(--muted); line-height: 1.6; margin-bottom: 8px; }
.txt-fineprint     { font-size: 10px; color: var(--muted); margin-top: 6px; }
.fw-bold-sm        { font-size: 12px; font-weight: 700; }

/* Common form grids — variants by gap and bottom margin */
.grid-c2-pad       { display: grid; grid-template-columns: 1fr 1fr;     gap: 12px; padding: 16px; }
.grid-c2-10        { display: grid; grid-template-columns: 1fr 1fr;     gap: 10px; }
.grid-c3-tight     { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.grid-c2-tight-mb  { display: grid; grid-template-columns: 1fr 1fr;     gap: 8px;  margin-bottom: 8px; }
.grid-c3-tight-mb  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;  margin-bottom: 8px; }

/* Padding utilities */
.p-24              { padding: 24px; }

/* Small bold label with bottom margin (used inside info cards) */
.lbl-bold-xs       { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 4px; }

/* Small inline icon (typical for inline SVG buttons) */
.icon-sm-15        { width: 15px; height: 15px; }

/* Clickable flex row (used in dropdown items, search-result rows, etc.) */
.flex-row-pointer  { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* Right-aligned button row (e.g. modal footer with Cancel/Confirm) */
.flex-end-10       { display: flex; gap: 10px; justify-content: flex-end; }

/* Modal body container that stacks cards vertically with no gap */
.modal-body-stack  { padding: 24px; display: flex; flex-direction: column; gap: 0; }

/* Serif heading inside modal-hdr (serves as primary modal title) */
.modal-hdr-title   { font-family: var(--serif); font-size: 18px; color: #fff; }

/* Small meta text (slightly darker than --muted, used in subtitle rows) */
.txt-sm-666        { font-size: 12px; color: #666; margin-top: 2px; }

/* Generic font-weight utility (used as add-on to existing classes) */
.fw-600            { font-weight: 600; }

/* Block-style label spacer (used on <label> with .lbl-muted) */
.lbl-block-mb      { display: block; margin-bottom: 6px; }

/* Pill-style filter chip — applied to .btn .btn-ghost as a size variant */
.btn-chip          { font-size: 11px; padding: 4px 12px; border-radius: 20px; }

/* Dark-modal close button (✕). Sits inside .modal-hdr against a dark bg. */
.btn-close-dark-30 { background: none; border: 1px solid var(--dark-border);
                     color: var(--txt-on-dark); width: 30px; height: 30px;
                     border-radius: 7px; cursor: pointer; font-size: 16px; }

/* 24px circular avatars — used as role/status badges next to text labels.
   Yellow = ED / primary action, Blue = HM / informational. */
.avatar-circle-24-yellow {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--yellow); color: #111;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.avatar-circle-24-blue {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--info-blue); color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Status pills — semantic shorthand for info (blue) and warn (amber). */
.pill-info {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  background: var(--info-blue-bg); color: var(--info-blue);
}
.pill-warn {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  background: var(--warn-amber-bg); color: var(--warn-amber);
}

/* Inline color-only utilities — used in JS-built table cells */
.txt-info-bold     { color: var(--info-blue); font-weight: 700; }
.txt-success-bold  { color: var(--success);   font-weight: 700; }
.txt-danger-bold   { color: var(--danger);    font-weight: 700; }

/* Banner cards — block-level callouts inside modal forms.
   Use .banner-card-eyebrow for the small uppercase header inside them. */
.banner-card-warn {
  background: var(--warn-amber-bg);
  border: 1px solid var(--warn-amber-border);
  border-radius: 10px; padding: 14px 18px;
}
.banner-card-warn .banner-card-eyebrow,
.banner-card-warn .banner-card-body { color: var(--warn-amber); }
.banner-card-danger {
  background: var(--danger-bg);
  border: 1.5px solid var(--danger);
  border-radius: 10px; padding: 14px 18px;
}
.banner-card-danger .banner-card-eyebrow,
.banner-card-danger .banner-card-body { color: var(--danger); }
.banner-card-eyebrow {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  margin-bottom: 8px;
}
.banner-card-body { font-size: 12px; margin-bottom: 10px; }

/* Required-fields panel — sub-tabs per form step + checkbox list */
.rf-tabs  { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border);
            margin-bottom: 16px; padding-bottom: 0; }
.rf-tab   { background: none; border: none; border-bottom: 2px solid transparent;
            padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--muted);
            cursor: pointer; font-family: var(--sans);
            margin-bottom: -1px; transition: var(--tr); }
.rf-tab:hover     { color: var(--text); }
.rf-tab.active    { color: var(--text); border-bottom-color: var(--yellow); }
.rf-stage         { padding: 4px 0 8px; }
.rf-section-row   { margin-bottom: 18px; padding: 12px 14px; border-radius: 10px;
                    background: var(--bg); border: 1px solid var(--border); }
.rf-row.rf-section { background: transparent; border: none; padding: 0; }
.rf-row.rf-section:hover { border-color: transparent; }
.rf-rows  { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; }
.rf-row   { display: flex; align-items: center; gap: 8px;
            padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
            background: var(--surface); cursor: pointer; }
.rf-row:hover { border-color: var(--yellow); }
.rf-row input[type="checkbox"] { accent-color: var(--yellow); flex-shrink: 0; }
.rf-row .rf-label { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.rf-row .rf-id    { font-family: ui-monospace, Menlo, Monaco, 'Courier New', monospace;
                    font-size: 10px; color: var(--muted); }

/* Themes panel — color picker rows + logo preview */
.theme-row {
  display: grid; grid-template-columns: 140px 60px 110px 1fr;
  align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.theme-row:last-of-type { border-bottom: none; }
.theme-row label { font-size: 13px; font-weight: 600; color: var(--text); }
.theme-row input[type="color"] {
  width: 50px; height: 32px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  background: var(--surface);
}
.theme-row .theme-hex {
  font-family: ui-monospace, Menlo, Monaco, 'Courier New', monospace;
  font-size: 12px; color: var(--muted);
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); width: 100%; box-sizing: border-box;
}
.theme-row .theme-desc { font-size: 11px; color: var(--muted); }
.theme-row .theme-select {
  grid-column: span 2;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 13px;
  width: 100%; box-sizing: border-box; cursor: pointer;
}
.theme-row .theme-range {
  grid-column: span 2;
  display: flex; align-items: center; gap: 10px;
}
.theme-row .theme-range input[type="range"] {
  flex: 1; cursor: pointer; accent-color: var(--yellow);
}
.theme-row .theme-range-val {
  font-size: 12px; color: var(--muted); min-width: 34px; text-align: right;
  font-family: ui-monospace, Menlo, Monaco, 'Courier New', monospace;
}
.theme-logo-zone { margin-top: 14px; }
.theme-logo-preview-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.theme-logo-preview {
  width: 96px; height: 96px; border-radius: 12px;
  background: var(--dark); display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); flex-shrink: 0;
}
.theme-logo-preview img { max-width: 76px; max-height: 76px; object-fit: contain; }

/* Drop a logo's white background against dark surfaces (header, print banners).
   Toggled by Settings → Admin → Themes → "Drop white background". */
.logo-transparent { mix-blend-mode: screen; }

/* Generic hide utility — used by applyRequiredFields() to toggle .r markers
   and any future show/hide work that doesn't need its own named class. */
.hidden { display: none !important; }

/* Full-screen print/PDF preview panel — injected on first use by shared-data.js.
   See _ensurePrintPanel() / showPrintPanel(). Header reuses .modal-hdr.sticky. */
.print-panel         { display: none; position: fixed; inset: 0; z-index: 1100; overflow: auto; background: var(--bg); }
.print-panel.is-open { display: block; }
.print-panel-title   { color: #fff; font-weight: 700; font-size: 14px; }
.print-panel-actions { display: flex; gap: 8px; }
.print-panel-doc {
  background: var(--surface); border-radius: 8px;
  padding: 32px 36px; box-shadow: 0 2px 20px rgba(0,0,0,0.08);
  margin: 16px;
}

/* Floating circular X button overlay on photo thumbnails */
.btn-photo-remove {
  background: rgba(0,0,0,0.6); border: none; color: #fff;
  border-radius: 50%; width: 18px; height: 18px;
  font-size: 11px; cursor: pointer; line-height: 1;
}

/* Full-width status strip (used as in-modal status banner) */
.banner-strip-success {
  background: var(--success-bg);
  border-bottom: 2px solid var(--success);
  padding: 10px 24px;
  font-size: 12px; color: var(--success); font-weight: 600;
}

/* Common flex rows / columns — no align override unless named otherwise */
.flex-row-10       { display: flex; gap: 10px; }
.flex-row-mb       { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.flex-sb-mb        { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.flex-col-12       { display: flex; flex-direction: column; gap: 12px; }

/* Yellow-accent info box (left-bar treatment for callout text) */
.box-yellow-accent { padding: 10px 14px; background: var(--bg);
                     border-left: 3px solid var(--yellow); border-radius: 0 6px 6px 0; }

/* Table-cell padding utility */
.th-left-pad       { padding: 8px 14px; text-align: left; }

/* Signature widget — Draw/Type/Wet tabs and their associated input atoms.
   setSigMethod() swaps which sub-panel is visible.                                  */
.ct-sig-tab        { flex: 1; padding: 6px 4px; background: none; border: none;
                     border-bottom: 2px solid transparent;
                     font-size: 10px; font-weight: 600; color: var(--muted);
                     cursor: pointer; font-family: var(--sans); }
.ct-sig-tab.active { border-bottom-color: var(--yellow); font-weight: 700; color: var(--text); }
.sig-canvas        { width: 100%; height: 90px; display: block; touch-action: none; cursor: crosshair; }
.sig-typed-input   { width: 100%; border: none; border-bottom: 2px solid var(--dark);
                     background: transparent;
                     font-size: 16px; font-family: Georgia, serif; font-style: italic;
                     color: var(--text); outline: none;
                     padding: 4px 0; box-sizing: border-box; }
.sig-footer-row    { display: flex; align-items: center; justify-content: space-between;
                     padding: 4px 10px; border-top: 1px solid var(--border); }
.sig-clear-btn     { background: none; border: 1px solid var(--border); border-radius: 4px;
                     padding: 2px 8px; font-size: 10px; color: var(--muted);
                     cursor: pointer; font-family: var(--sans); }
.sig-wet-input     { width: 100%; padding: 6px 10px;
                     border: 1px solid var(--border); border-radius: 6px;
                     font-size: 11px; font-family: var(--sans);
                     background: var(--surface); color: var(--text); box-sizing: border-box; }


/* Contractor status pills on card */
.ct-status-pill                { align-self: flex-start; flex-shrink: 0; }
.ct-status-pill.pending-review { background: var(--warn-amber-bg); color: var(--warn-amber-text); }
.ct-status-pill.hm-recommended { background: #eff6ff; color: #1d4ed8; }
.ct-status-pill.approved       { background: #f0fdf4; color: #15803d; }
.ct-status-pill.declined       { background: #fef2f2; color: #b91c1c; }
.ct-status-pill.returned       { background: #faf5ff; color: #7c3aed; }

/* Contractor expiry tags */
.ct-tag-valid    { background: #f0fdf422; color: #15803d; }
.ct-tag-expiring { background: #fef9ec22; color: #d97706; }
.ct-tag-expired  { background: #fef2f222; color: #b91c1c; }



/* Info boxes */
.ibox      { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.ibox.dark { background: var(--dark2); border-color: var(--dark2); color: #fff; }

/* Generic table + wrapper (used by finance stmt-table) */
.tbl-wrap  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl       { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th    { background: var(--dark2); color: #fff; padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.tbl td    { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:hover td { background: var(--surface); }
.tbl-name  { font-weight: 600; }
.tbl-sub   { font-size: 11px; color: var(--muted); }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px);  } to { opacity:1; transform:translateY(0); } }

/* ── Signature widget (SigWidget in shared.js) — used by housing + finance ── */
.sigw           { display: flex; flex-direction: column; gap: 12px; }
.sigw-tabs      { display: flex; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sigw-tab       { padding: 5px 10px; font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer; border: 1.5px solid var(--border); border-radius: 7px; background: var(--bg); font-family: var(--sans); transition: var(--tr); white-space: nowrap; }
.sigw-tab:hover { border-color: var(--yellow); color: var(--text); }
.sigw-tab.active{ color: #111; background: var(--yellow); border-color: var(--yellow); }
.sigw-panel     { padding: 12px 0; }
.sigw-canvas    { border: 1.5px solid var(--border); border-radius: 8px; touch-action: none; display: block; }
.sigw-canvas-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.sigw-clear     { font-size: 11px; color: var(--danger); cursor: pointer; background: none; border: none; font-family: var(--sans); }
.sigw-hint      { font-size: 11px; color: var(--muted); }
.sigw-type-pad  { display: flex; flex-direction: column; gap: 8px; }
.sigw-type-input{ border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 22px; font-family: var(--serif); width: 100%; box-sizing: border-box; }
.sigw-type-note { font-size: 11px; color: var(--muted); }
.sigw-wet-pad, .sigw-wet-input, .sigw-wet-note { /* same as type- variants */ }
.sigw-presence  { display: flex; flex-direction: column; gap: 8px; }
.sigw-presence-label{ font-size: 12px; font-weight: 600; }
.sigw-presence-desc { font-size: 11px; color: var(--muted); }
.sigw-presence-btns { display: flex; gap: 8px; }
.sigw-presence-btn  { padding: 7px 20px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg); cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 600; transition: var(--tr); min-width: 80px; }
.sigw-presence-btn.active { background: var(--yellow); border-color: var(--yellow); color: #111; }

.ct-modal-form { display: flex; flex-direction: column; gap: 16px; }

/* ── Help tooltip / popover (shared) ───────────────────────────────────────
   Click-toggled `?` button reveals a positioned panel. Used on form fields
   (Housing Needs NOS, Health Risk levels) and table headers (Worklist).
   Open state is driven by the `is-open` class — toggleTip()/closeTip() in
   shared-ui.js manage it. */
.tip-host        { position: relative; display: inline-block; }
.js-th .tip-host { margin-left: 6px; }
.std-th-sortable .tip-host { margin: 0 8px 0 10px; }
.tip-btn         { width: 18px; height: 18px; border-radius: 50%; background: var(--border); border: none; color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-family: var(--sans); line-height: 1; vertical-align: middle; }
.tip-btn:hover   { background: var(--yellow); color: var(--dark); }
.tip-panel       { display: none; position: absolute; left: 0; top: 24px; width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px; z-index: 200; box-shadow: 0 4px 20px rgba(0,0,0,0.3); text-align: left; text-transform: none; letter-spacing: 0; font-weight: 400; }
.tip-panel.tip-panel-wide { width: 320px; }
.tip-panel.is-open { display: block; }
.tip-panel-title { font-size: 11px; font-weight: 700; color: var(--yellow); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .6px; }
.tip-panel-body  { font-size: 11px; color: var(--text); line-height: 1.6; margin-bottom: 10px; }
.tip-panel-body:last-of-type { margin-bottom: 0; }
.tip-panel-section { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.tip-panel-table { width: 100%; font-size: 11px; border-collapse: collapse; }
.tip-panel-meta  { font-size: 10px; color: var(--muted); margin-top: 10px; line-height: 1.5; font-style: italic; }
.tip-panel-close { margin-top: 10px; font-size: 11px; color: var(--muted); background: none; border: none; cursor: pointer; font-family: var(--sans); padding: 0; }
.tip-panel-close:hover { color: var(--text); }
.tip-risk-severe   { color: var(--danger);     font-weight: 700; }
.tip-risk-moderate { color: var(--warn-amber); font-weight: 700; }
.tip-risk-minor    { color: var(--info-blue);  font-weight: 700; }
.tip-risk-none     { color: var(--muted);      font-weight: 700; }

/* ── Field summary box (auto-calculated multi-line displays) ──────────────
   Composite display for read-only auto-calculated values (e.g. Persons Over
   Occupancy Standard). Replaces standalone <input readonly> fields where
   we need to show multiple derived values at once. */
.field-summary       { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 1.7; color: var(--text); }
.field-summary-label { color: var(--muted); }
.field-summary-meta  { color: var(--muted); font-size: 11px; }
.field-summary-empty { color: var(--muted); font-size: 11px; font-style: italic; margin-top: 2px; }

/* ── Collapsible card ──────────────────────────────────────────────────────
   Generic toggle for any .card whose header acts as the click target.
   Add `collapsible-card` to the .card and `collapsible-head` to the header
   row; mark the body wrapper with `collapsible-body`. Toggle by adding /
   removing `is-collapsed` on the card (the markup uses an inline classList
   toggle on the header — no JS helper needed). The chevron rotates 90°
   when collapsed so the affordance is visible regardless of state. */
.collapsible-card .collapsible-head     { cursor: pointer; user-select: none; }
.collapsible-card .collapsible-chevron  { transition: transform .2s ease; flex-shrink: 0; }
.collapsible-card.is-collapsed .collapsible-chevron { transform: rotate(-90deg); }
.collapsible-card.is-collapsed .collapsible-body    { display: none !important; }
/* "Required" pill — small inline marker beside a section title indicating
   the section must be completed before submit. Lives next to lbl-yellow. */
.lbl-required { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--danger-bg); color: var(--danger); text-transform: uppercase; letter-spacing: .5px; margin-left: 8px; }

/* ── Login screen (index.html) ────────────────────────────────────────────
   Class-based replacement for the inline-style login markup so index.html
   can stay minimal. Padding / gap values were tuned to match the rest of
   the app: 12px vertical input padding, 6px label-to-input gap, 16px
   field-to-field gap. */
.login-screen        { display: none; position: fixed; inset: 0; z-index: 9999; background: var(--login-bg); align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.login-card          { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 20px; }
.login-logo-wrap     { text-align: center; padding-top: 8px; }
.login-logo-bg       { display: inline-block; background: var(--dark); border-radius: 8px; padding: 10px 16px; }
.login-logo          { width: 56px; height: 56px; display: block; }
.login-panel         { background: var(--dark2); border: 1px solid var(--dark3); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.login-panel--center { text-align: center; }
.login-title         { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.login-icon-large    { font-size: 2rem; margin-bottom: 12px; }
.login-help          { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 16px; }
.login-help--tight   { line-height: 1.6; margin-bottom: 14px; }
.login-help strong   { color: #fff; }
.login-field         { display: flex; flex-direction: column; gap: 6px; }
.login-label         { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); }
.login-input         { background: var(--dark); border: 1px solid var(--dark-border); border-radius: 8px; padding: 12px 14px; font-size: 14px; color: #fff; font-family: var(--sans); outline: none; width: 100%; box-sizing: border-box; }
.login-input:focus   { border-color: var(--yellow); }
.login-row           { display: flex; align-items: center; justify-content: space-between; }
.login-check         { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--muted); }
.login-checkbox      { width: 16px; height: 16px; cursor: pointer; accent-color: var(--yellow); margin: 0; }
.login-link          { background: none; border: none; font-size: 12px; color: var(--yellow); cursor: pointer; padding: 0; font-family: var(--sans); }
.login-link--block   { width: 100%; }
.login-btn           { background: var(--yellow); border: none; color: var(--dark); padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 700; font-family: var(--sans); cursor: pointer; width: 100%; }
.login-btn:disabled  { opacity: .65; cursor: wait; }
.login-btn--sm       { font-size: 13px; padding: 10px; margin-bottom: 10px; }
.login-error         { display: none; background: var(--err-bg); border: 1px solid var(--err-border); border-radius: 8px; padding: 10px 14px; font-size: 12px; color: var(--err-text); text-align: left; }
.login-msg           { display: none; margin-top: 10px; font-size: 12px; padding: 8px 12px; border-radius: 6px; }

/* ════════════════════════════════════════════════════════════════════════
 * SHARED HEADER (app-header-v2)
 * Styles for renderAppHeader() — used on every page that loads
 * housing-init.js (housing.html, rfq.html, finance.html, tenants.html,
 * inventory.html, match.html, renos.html, contractors.html).
 * Moved from housing.css so no page needs housing.css just for the header.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Greeting base classes ─────────────────────────────────────────────── */
.home-greeting      { margin-bottom: 28px; position: relative; padding-left: 16px; }
.home-greeting-bar  { position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; background: var(--yellow); border-radius: 2px; }
.home-greeting-date { margin-bottom: 4px; }
.home-welcome       { font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.15; margin: 0 0 6px 0; }
.home-name-accent   { color: var(--yellow); }

/* ── Header ──────────────────────────────────────────────────────────── */
.app-header-v2 {
  background: var(--dark); border-bottom: 2px solid var(--yellow);
  display: flex; align-items: center; gap: 24px; padding: 0 24px; height: 64px;
  position: sticky; top: 0; z-index: 50;
}
.app-header-v2 .hbrand {
  display: flex; align-items: center; gap: 12px; cursor: pointer; flex-shrink: 0;
}
.app-header-v2 .hlogo-v2 {
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--yellow); object-fit: contain;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 20px; color: var(--dark);
  flex-shrink: 0;
}
.app-header-v2 img.hlogo-v2 { padding: 2px; }
.app-header-v2 .hbrand-title { color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .2px; white-space: nowrap; }
.app-header-v2 .hbrand-sub   { color: var(--txt-on-dark); font-size: 11px; display: block; margin-top: 1px; white-space: nowrap; }
.app-header-v2 .app-nav {
  display: flex; gap: 2px; flex: 1; margin-left: 8px;
  overflow: visible; min-width: 0;
}
.app-header-v2 .app-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  color: var(--txt-on-dark); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .15s ease; border: none; background: transparent;
  white-space: nowrap; flex-shrink: 0; font-family: inherit;
}
.app-header-v2 .app-nav-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.app-header-v2 .app-nav-item:hover { background: var(--dark2); color: #fff; }
.app-header-v2 .app-nav-item.active { background: var(--yellow); color: var(--dark); }

/* ── clfnSearchSelect shared combobox ──────────────────────────────────────── */
.clfn-ss-wrap { position: relative; }
.clfn-ss-input { width: 100%; padding-right: 28px !important; box-sizing: border-box; cursor: default; }
.clfn-ss-caret {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--muted); display: flex; align-items: center;
}
.clfn-ss-wrap .clfn-ss-caret { pointer-events: auto; cursor: pointer; }
#clfn-ss-portal { position: fixed; z-index: 9900; top: 0; left: 0; pointer-events: none; }
.clfn-ss-drop {
  display: none; position: absolute; pointer-events: auto;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.14);
  max-height: 240px; overflow-y: auto; padding: 4px;
}
.clfn-ss-item {
  padding: 9px 12px; border-radius: 7px; font-size: 13px; cursor: pointer;
  color: var(--text); transition: background .1s;
}
.clfn-ss-item:hover, .clfn-ss-item.clfn-ss-active { background: var(--yellow); color: var(--dark); }
.clfn-ss-item.clfn-ss-selected { font-weight: 600; }
.clfn-ss-empty { padding: 10px 12px; font-size: 13px; color: var(--muted); }

/* Nav group dropdown */
.app-header-v2 .nav-group { position: relative; }
.app-header-v2 .nav-group-toggle .nav-caret { transition: transform .2s ease; margin-left: 2px; }
.app-header-v2 .nav-group.group-open .nav-caret { transform: rotate(180deg); }
.app-header-v2 .nav-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--dark); border: 1px solid var(--dark3);
  border-radius: 10px; padding: 6px; min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 500; flex-direction: column; gap: 2px;
}
.app-header-v2 .nav-dropdown.open { display: flex; }
.app-header-v2 .nav-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 7px;
  color: var(--txt-on-dark); font-size: 13px; font-weight: 600;
  cursor: pointer; border: none; background: transparent;
  text-align: left; white-space: nowrap; font-family: inherit; width: 100%;
  transition: background .12s ease;
}
.app-header-v2 .nav-dropdown-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.app-header-v2 .nav-dropdown-item:hover { background: var(--dark2); color: #fff; }

.app-header-v2 .nav-toggle {
  display: none; background: transparent; border: none; cursor: pointer;
  color: #fff; padding: 8px; border-radius: 6px;
}
.app-header-v2 .nav-toggle:hover { background: var(--dark2); }
.app-header-v2 .nav-toggle svg { width: 22px; height: 22px; }
.app-header-v2 .header-actions {
  display: flex; align-items: center; gap: 12px;
  padding-left: 16px; margin-left: auto;
  border-left: 1px solid var(--dark3); height: 40px;
}
.app-header-v2 .header-settings {
  background: transparent; border: none; cursor: pointer;
  color: var(--txt-on-dark); font-size: 13px; font-weight: 600;
  display: flex !important; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 6px; font-family: inherit;
}
.app-header-v2 .header-settings:hover { background: var(--dark2); color: #fff; }
.app-header-v2 .header-settings svg { width: 14px; height: 14px; }
/* The AI button's icon is a text glyph (.ai-ico span), not an <svg>, so it would
   be hidden by the mobile ".header-settings span { display:none }" label-collapse
   rule. Keep it visible so the AI button shows its icon on phones (like the
   Settings gear svg does). */
.app-header-v2 .header-settings .ai-ico { display: inline-flex !important; align-items: center; }
.app-header-v2 .create-wrap { position: relative; }
.app-header-v2 .btn-create {
  display: flex; align-items: center; gap: 8px;
  background: var(--yellow); color: var(--dark);
  border: none; border-radius: 999px; padding: 9px 16px;
  font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(248,228,26,.25); font-family: inherit;
}
.app-header-v2 .btn-create:hover { background: var(--yellow-mid); }
.app-header-v2 .btn-create svg { width: 14px; height: 14px; }
.app-header-v2 .create-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--dark2); border: 1px solid var(--dark3);
  border-radius: 10px; padding: 6px; min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  display: none; z-index: 60;
}
.app-header-v2 .create-menu.open { display: block; }
.app-header-v2 .create-menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 6px;
  color: var(--border); font-size: 13px; font-weight: 600;
  cursor: pointer; background: transparent; border: none;
  width: 100%; text-align: left; font-family: inherit;
}
.app-header-v2 .create-menu-item:hover { background: var(--dark3); color: #fff; }
.app-header-v2 .create-menu-item svg { width: 16px; height: 16px; color: var(--yellow); flex-shrink: 0; }
.app-header-v2 .avatar-wrap { position: relative; cursor: pointer; }
.app-header-v2 .header-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--yellow); color: var(--dark);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  border: 2px solid var(--dark2); flex-shrink: 0;
}
.app-header-v2 .avatar-role-pill {
  /* Sized/positioned to sit in the avatar's corner without covering the
     initials -- at the old 9px/2px-6px size this badge was ~30px wide (82%
     of the 36px avatar), so it inevitably overlapped the second initial. */
  position: absolute; bottom: -6px; right: -8px;
  background: var(--dark); color: var(--yellow);
  font-size: 7.5px; font-weight: 700; letter-spacing: .3px;
  padding: 1px 4px; border-radius: 999px;
  border: 1.5px solid var(--dark); text-transform: uppercase;
}
.app-header-v2 .app-nav-item.in-drawer-only { display: none; }
.app-header-v2 .nav-divider { display: none; }

/* Role badge inside the Create dropdown */
.role-gate {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--dark3); border: 1px solid var(--dark3);
  margin-left: auto;
}

/* Generic visually-hidden utility */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Header export dropdown ────────────────────────────────────────── */
.app-header-v2 .export-wrap { position: relative; display: none; align-items: center; }
.app-header-v2 .btn-export-v2 {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1px solid #444;
  background: transparent; color: #ccc; border-radius: 8px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: border-color .12s, color .12s;
}
.app-header-v2 .btn-export-v2:hover { border-color: var(--yellow); color: var(--yellow); }
.app-header-v2 .btn-export-v2 svg { width: 12px; height: 12px; }
.app-header-v2 .export-menu-v2 {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 160px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  padding: 6px; display: none; z-index: 1000;
}
.app-header-v2 .export-menu-v2.open { display: block; }
.app-header-v2 .export-menu-item-v2 {
  display: block; width: 100%; text-align: left;
  background: none; border: none; padding: 8px 12px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--dark); border-radius: 6px; cursor: pointer;
}
.app-header-v2 .export-menu-item-v2:hover { background: var(--yellow-light); color: var(--dark); }

/* ── Avatar popover ────────────────────────────────────────────────── */
.header-avatar-pop {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  min-width: 220px; padding: 14px; z-index: 1000;
  font-family: 'DM Sans', sans-serif;
}
.header-avatar-pop .hap-head { margin-bottom: 10px; }
.header-avatar-pop .hap-name { font-weight: 700; color: var(--dark); font-size: 14px; }
.header-avatar-pop .hap-role { font-size: 11px; color: var(--muted); margin-top: 2px; }
.header-avatar-pop .hap-section { margin: 10px 0; padding-top: 10px; border-top: 1px solid var(--border); }
.header-avatar-pop .hap-section-label {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .6px; font-weight: 600; margin-bottom: 6px;
}
.header-avatar-pop select {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 12px; font-family: inherit; background: var(--bg);
}
.header-avatar-pop .hap-action {
  width: 100%; padding: 8px 12px; margin-top: 10px;
  border: 1px solid var(--border); background: var(--bg);
  border-radius: 6px; font-size: 12px; font-weight: 600;
  color: var(--dark); cursor: pointer; font-family: inherit;
}
.header-avatar-pop .hap-action:hover { background: var(--yellow-light); border-color: var(--yellow-mid); }

/* ── Header responsive ───────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .app-header-v2 { gap: 16px; padding: 0 16px; }
  .app-header-v2 .app-nav { gap: 0; }
  .app-header-v2 .app-nav-item { padding: 8px 10px; font-size: 12.5px; }
  .app-header-v2 .app-nav-item svg { display: none; }
}
@media (max-width: 1024px) {
  .app-header-v2 .hbrand-sub { display: none; }
  .app-header-v2 .header-settings span { display: none; }
  .app-header-v2 .header-settings { padding: 8px; }
}
@media (max-width: 1200px) {
  .app-header-v2 .nav-toggle { display: grid; place-items: center; }
  .app-header-v2 .app-nav {
    position: absolute; top: 64px; left: 0; right: 0;
    background: var(--dark);
    flex-direction: column; gap: 0;
    max-height: 0; padding: 0; border-bottom: 0;
    overflow: hidden;
    transition: max-height .25s ease, padding .25s ease, border-width .25s ease;
  }
  .app-header-v2 .app-nav.open {
    max-height: 600px; padding: 8px;
    border-bottom: 2px solid var(--yellow);
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
  }
  .app-header-v2 .app-nav-item {
    width: 100%; justify-content: flex-start;
    padding: 12px 16px; border-radius: 8px; font-size: 14px;
  }
  .app-header-v2 .app-nav-item svg { display: inline-block; width: 16px; height: 16px; }
  .app-header-v2 .app-nav-item.in-drawer-only { display: flex; }
  .app-header-v2 .nav-divider { display: block; height: 1px; background: var(--dark3); margin: 8px 4px; }
  .app-header-v2 .nav-group { width: 100%; }
  .app-header-v2 .nav-dropdown {
    position: static; box-shadow: none; border: none;
    background: rgba(255,255,255,.05); border-radius: 8px;
    margin: 2px 0 4px 0; padding: 4px;
  }
  .app-header-v2 .nav-dropdown-item { padding: 10px 16px; }
  .app-header-v2 #header_settings_btn { display: none !important; }
  .app-header-v2 .header-actions { padding-left: 12px; gap: 8px; }
}
@media (max-width: 600px) {
  .app-header-v2 { padding: 0 12px; gap: 8px; }
  .app-header-v2 .hbrand-title { font-size: 14px; }
  .app-header-v2 .hlogo-v2 { width: 34px; height: 34px; font-size: 18px; }
  .app-header-v2 .btn-create { padding: 8px 12px; font-size: 12px; }
  .app-header-v2 .btn-create-label { display: none; }
  /* Collapse the Export button to icon-only so the right-side actions fit. */
  .app-header-v2 .btn-export-v2 span { display: none; }
  .app-header-v2 .btn-export-v2 { padding: 7px 9px; }
  /* Let the brand shrink/truncate so the actions cluster -- and especially the
     account avatar -- is never pushed off the right edge of the screen. The
     actions stay at full size; the brand title ellipsizes instead. */
  .app-header-v2 .hbrand { min-width: 0; flex-shrink: 1; }
  .app-header-v2 .hbrand > div { min-width: 0; overflow: hidden; }
  .app-header-v2 .hbrand-title { overflow: hidden; text-overflow: ellipsis; }
  .app-header-v2 .header-actions { gap: 6px; padding-left: 8px; flex-shrink: 0; }
}

/* ── LANDING PAGE COMPONENTS (shared: housing + finance) ────────────────────
   KPI strip, quick row, lookup panel, quick actions, collapsible sections,
   and recent-card rows. Used on housing.html #landingView and finance.html
   #page-home. No page-level scope prefix — apply wherever needed.
   ─────────────────────────────────────────────────────────────────────────── */

/* KPI strip */
.kpi-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 24px;
}
.kpi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  position: relative; overflow: hidden;
}
.kpi-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--yellow); border-radius: var(--radius) 0 0 var(--radius);
}
.kpi-card.kpi-accent-danger::before  { background: var(--danger); }
.kpi-card.kpi-accent-success::before { background: var(--success); }
.kpi-card.kpi-accent-info::before    { background: var(--info-blue); }
.kpi-label {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  color: var(--muted); text-transform: uppercase; margin-bottom: 4px;
}
.kpi-value {
  font-family: var(--serif); font-size: 28px; font-weight: 400;
  color: var(--text); line-height: 1.05;
}
.kpi-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.kpi-card.kpi-clickable { cursor: pointer; transition: var(--tr); }
.kpi-card.kpi-clickable:hover { border-color: var(--yellow); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }

/* Scroll-collapse (tablet/mobile space-saver, mirrors the MyChart hero/tile
   -> icon-row pattern, see .tic-strip.is-scrolled in housing.css): each card
   carries a hidden .kpi-icon glyph. Once _initScrollCollapse (shared-ui.js)
   adds .is-scrolled to #landing_kpi_strip, the label/value/meta/breakdown
   text hides and the icon shows, shrinking the strip to a glance-only row. */
.kpi-icon { display: none; font-size: 20px; line-height: 1; }
.kpi-card  { transition: padding .15s ease; }
.kpi-strip.is-scrolled .kpi-card { padding: 8px 10px; text-align: center; }
.kpi-strip.is-scrolled .kpi-label,
.kpi-strip.is-scrolled .kpi-value,
.kpi-strip.is-scrolled .kpi-meta,
.kpi-strip.is-scrolled .kpi-breakdown { display: none; }
.kpi-strip.is-scrolled .kpi-icon { display: block; }
/* Collapsed: pack the icon-only cards into ONE compact row instead of the
   stacked full-width columns the strip uses on phones — so scrolling actually
   reclaims vertical space on small devices (the whole point of the collapse). */
.kpi-strip.is-scrolled {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px; margin-bottom: 14px;
}
.kpi-strip.is-scrolled .kpi-card { display: flex; align-items: center; justify-content: center; min-height: 40px; }
.kpi-strip.is-scrolled .kpi-icon { font-size: 22px; }

/* Quick row */
.quick-row {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 28px;
}
/* Grid items default to min-width:auto, so a wide child (long address chip,
   tab bar, worklist row) can stretch the column past the viewport and overflow
   the page on mobile. Let them shrink instead. */
.quick-row > * { min-width: 0; }

/* Lookup panel */
/* Spotlight lookup — the search is the primary focal point of the landing
   page. Uses the theme --yellow so it adapts per nation; color-mix drives the
   soft outer glow (with a plain-shadow fallback for older engines). */
.lookup-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px 26px;
  position: relative;
}
.lookup-panel.is-spotlight { box-shadow: 0 6px 30px rgba(0,0,0,0.06); }
.lookup-panel h3 {
  font-family: var(--serif); font-size: 24px; margin-bottom: 4px; font-weight: 400;
  letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px;
}
.lookup-h-ico { font-size: 20px; line-height: 1; }
.lookup-sub      { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }

/* Focal search bar */
.lookup-search {
  display: flex; align-items: center; gap: 13px;
  margin-bottom: 18px; position: relative;
  background: #fff;
  border: 2px solid var(--yellow);
  border-radius: 16px;
  padding: 9px 18px 9px 11px;
  min-height: 66px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.07);
  box-shadow: 0 5px 20px rgba(0,0,0,0.06), 0 0 0 6px color-mix(in srgb, var(--yellow) 20%, transparent);
  transition: box-shadow .18s ease, border-color .18s ease;
  animation: lookupGlowIn 1100ms ease-out 1;
}
.lookup-search:focus-within {
  box-shadow: 0 8px 26px rgba(0,0,0,0.10);
  box-shadow: 0 8px 26px rgba(0,0,0,0.10), 0 0 0 8px color-mix(in srgb, var(--yellow) 32%, transparent);
}
.lookup-search input {
  flex: 1; min-width: 0; padding: 0;
  border: none; border-radius: 0; background: transparent;
  font-size: 19px; font-family: inherit; color: var(--text);
}
.lookup-search input::placeholder { color: var(--muted); font-size: 18px; }
.lookup-search input:focus { outline: none; }
.lookup-search-icon {
  position: static; transform: none;
  width: 46px; height: 46px; min-width: 46px;
  padding: 11px; box-sizing: border-box;
  background: var(--yellow); color: #111;
  border-radius: 50%; pointer-events: none;
}
@keyframes lookupGlowIn {
  0%   { box-shadow: 0 5px 20px rgba(0,0,0,0.06), 0 0 0 0  color-mix(in srgb, var(--yellow) 55%, transparent); }
  55%  { box-shadow: 0 5px 20px rgba(0,0,0,0.06), 0 0 0 13px color-mix(in srgb, var(--yellow) 28%, transparent); }
  100% { box-shadow: 0 5px 20px rgba(0,0,0,0.06), 0 0 0 6px color-mix(in srgb, var(--yellow) 20%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .lookup-search { animation: none; } }

/* Filter pills */
.lookup-tabs {
  display: flex; gap: 9px; margin-bottom: 12px; flex-wrap: wrap;
  background: transparent; padding: 0; border: none; width: auto;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.lookup-tabs::-webkit-scrollbar { display: none; }
.lookup-tab {
  padding: 8px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--dark);
  background: #fff; border: 1px solid var(--border); cursor: pointer;
  display: flex; align-items: center; gap: 6px; font-family: inherit;
  flex-shrink: 0; white-space: nowrap; transition: all .15s ease;
}
.lookup-tab:hover { border-color: var(--dark); }
.lookup-tab.active { background: var(--dark); color: #fff; border-color: var(--dark); }
.lookup-tab-count {
  background: rgba(255,255,255,0.22); color: inherit;
  font-size: 10px; padding: 1px 6px; border-radius: 999px; font-weight: 700;
}
.lookup-tab:not(.active) .lookup-tab-count { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.lookup-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  max-height: 340px; overflow-y: auto; z-index: 20;
  display: none;
}
.lookup-results.open { display: block; }
.lookup-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; font-size: 13px;
}
.lookup-result:last-child { border-bottom: none; }
.lookup-result:hover { background: var(--yellow-light); }
.lookup-result-icon {
  width: 32px; height: 32px; border-radius: 6px;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 14px; font-weight: 700;
}
.lookup-result-icon.type-tenant { background: var(--type-tenant-bg); color: var(--type-tenant-fg); }
.lookup-result-icon.type-unit   { background: var(--type-unit-bg);   color: var(--type-unit-fg); }
.lookup-result-icon.type-sow    { background: var(--type-sow-bg);    color: var(--type-sow-fg); }
.lookup-result-icon.type-contractor { background: var(--type-ct-bg); color: var(--type-ct-fg); }
.lookup-result-main { flex: 1; min-width: 0; }
.lookup-result-title { font-weight: 600; color: var(--dark); }
.lookup-result-sub { color: var(--muted); font-size: 11px; margin-top: 2px; }
.lookup-result-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; flex-shrink: 0;
}
.lookup-result-badge.badge-tenant { background: var(--type-tenant-bg); color: var(--type-tenant-fg); }
.lookup-result-badge.badge-unit   { background: var(--type-unit-bg);   color: var(--type-unit-fg); }
.lookup-result-badge.badge-sow    { background: var(--type-sow-bg);    color: var(--type-sow-fg); }
.lookup-result-badge.badge-contractor { background: var(--type-ct-bg); color: var(--type-ct-fg); }
.lookup-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 12px; }

.lookup-recent-label {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .6px; font-weight: 600; margin-bottom: 8px; margin-top: 22px;
  opacity: .75;
}
.lookup-recent { display: flex; gap: 8px; flex-wrap: wrap; }
.lookup-recent:empty::before {
  content: 'No recent items yet.';
  color: var(--muted); font-size: 12px; font-style: italic;
}
.lookup-chip {
  display: inline-flex; align-items: center;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--dark); border-radius: 999px;
  padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.lookup-chip:hover { background: var(--yellow-light); border-color: var(--yellow-mid); }
.lookup-chip--tenant { border-left: 3px solid var(--type-tenant-fg); }
.lookup-chip--unit   { border-left: 3px solid var(--type-unit-fg); }
.lookup-chip--sow    { border-left: 3px solid var(--type-sow-fg); }
.lookup-chip-meta { color: var(--muted); font-weight: 500; }

/* Quick actions */
.quick-actions {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.quick-actions h3 { font-family: var(--serif); font-size: 18px; margin-bottom: 4px; font-weight: 400; }
.qa-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); cursor: pointer;
  font-weight: 600; font-size: 13px; color: var(--dark);
  transition: all .15s ease; font-family: inherit;
}
.qa-btn:hover { background: var(--yellow-light); border-color: var(--yellow-mid); }
.qa-btn:disabled { cursor: not-allowed; opacity: .7; }
.qa-btn:disabled:hover { background: var(--bg); border-color: var(--border); }
.qa-btn svg { width: 14px; height: 14px; }
.qa-btn .qa-meta { margin-left: auto; font-weight: 500; font-size: 11px; color: var(--muted); }
.qa-soon {
  background: var(--dark2); color: var(--yellow);
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 6px; border-radius: 3px; margin-left: auto;
  text-transform: uppercase;
}

/* Collapsible sections */
.section { margin-bottom: 24px; }
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; cursor: pointer; user-select: none;
}
.section-header-left { display: flex; align-items: center; gap: 10px; }
.section-toggle {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--yellow-light); border: 1px solid var(--yellow-mid);
  display: grid; place-items: center; flex-shrink: 0;
  transition: transform .2s ease;
  padding: 0; font: inherit; color: inherit; cursor: pointer;
}
.section-toggle:hover { background: var(--yellow); }
.section-toggle svg { width: 12px; height: 12px; color: var(--dark); }
.section.collapsed .section-toggle { transform: rotate(-90deg); }
.section-title { font-family: var(--serif); font-size: 22px; font-weight: 400; }
.section-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }
.section-link  {
  font-size: 13px; font-weight: 600; color: var(--dark);
  text-decoration: none; border-bottom: 2px solid var(--yellow);
  padding-bottom: 1px;
}
.section-body { transition: all .2s ease; overflow: hidden; }
.section.collapsed .section-body { max-height: 0; opacity: 0; margin: 0; padding: 0; }
.section-count-pill {
  background: var(--dark); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}

/* Recent cards */
.recent-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.recent-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.recent-item:last-child { border-bottom: none; }
.recent-icon {
  width: 32px; height: 32px; border-radius: 8px; background: var(--yellow-light);
  display: grid; place-items: center; font-size: 14px;
}
.recent-text { flex: 1; }
.recent-meta, .recent-time { color: var(--muted); font-size: 11px; }

/* Responsive */
@media (max-width: 1200px) {
  .quick-row  { grid-template-columns: 1fr; }
  .kpi-strip  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .kpi-strip  { grid-template-columns: 1fr; }
}

/* ── Message box (persistent, dismissible notifications) ──────────────────────
   Replaces transient stacked toasts. One box in the top-right; messages stay
   until the user closes them (individually or via "Clear all"). */
#clfn_msgbox {
  /* Below the modal stack (overlays are 1100+, top-most 9999): a persistent,
     un-dismissed message must never sit ON TOP of a modal and block its
     header/close button (worst on mobile where the box is full-width).
     Messages fired mid-modal simply surface once the modal closes — they
     persist, so nothing is lost. */
  position: fixed; top: 88px; right: 16px; z-index: 1095;
  width: 340px; max-width: calc(100vw - 24px);
  background: #111; color: #f4f4f0; border: 1px solid #333;
  border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
  font-family: 'DM Sans', sans-serif; overflow: hidden;
}
#clfn_msgbox_hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: #000; border-bottom: 1px solid #333;
}
#clfn_msgbox_title {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: #F8E41A;
}
#clfn_msgbox_clear {
  background: none; border: none; color: #999; font-size: 11px;
  font-weight: 600; cursor: pointer; font-family: inherit;
}
#clfn_msgbox_clear:hover { color: #fff; }
#clfn_msgbox_body { max-height: 60vh; overflow-y: auto; }
.clfn-msg-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid #222;
  border-left: 3px solid #F8E41A;
  font-size: 13px; font-weight: 500; line-height: 1.4;
}
.clfn-msg-item:last-child { border-bottom: none; }
.clfn-msg-default { border-left-color: #F8E41A; color: #f4f4f0; }
.clfn-msg-error   { border-left-color: #ef4444; color: #fca5a5; background: #1a0a0a; }
.clfn-msg-info    { border-left-color: #3b82f6; color: #bfdbfe; background: #0a1020; }
.clfn-msg-text    { flex: 1 1 auto; white-space: pre-wrap; word-break: break-word; }
.clfn-msg-count {
  flex: 0 0 auto; align-self: center;
  background: rgba(255,255,255,.15); color: #fff;
  border-radius: 10px; font-size: 10px; font-weight: 700; padding: 1px 7px;
}
.clfn-msg-x {
  flex: 0 0 auto; background: none; border: none; color: inherit;
  opacity: .55; font-size: 18px; line-height: 1; cursor: pointer;
  padding: 0 2px; font-family: inherit;
}
.clfn-msg-x:hover { opacity: 1; }
@media (max-width: 640px) {
  #clfn_msgbox { top: 88px; right: 8px; left: 8px; width: auto; }
}