*{margin:0;padding:0;box-sizing:border-box}
/* Disable browser scroll-anchoring app-wide — this is a single-page app that
   swaps huge chunks of DOM height in and out (e.g. Settings → a renter portal
   view); the browser's automatic "keep the same content under the viewport"
   scroll adjustment fights our own explicit scrollTo(0,0) resets after tab
   switches, landing users at the bottom of the new (much shorter) view instead. */
html{overflow-anchor:none}
:root{
  --primary:#1a3a5c;--primary-light:#2563a8;--primary-dark:#0f2238;
  --gold:#c9a84c;--gold-light:#f0d890;
  --bg:#e2e8f0;--card:#eef7f8;--text:#1a1a2e;--text-muted:#6b7280;
  --border:#e2e8f0;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;
  --shadow:0 2px 8px rgba(0,0,0,.08);--shadow-lg:0 8px 24px rgba(0,0,0,.12)
}
body{font-family:'Segoe UI',-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}

/* LOGIN */
#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 60%,var(--primary-light) 100%)}
.login-card{background:var(--card);border-radius:16px;padding:48px 40px;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo h1{color:var(--primary);font-size:1.8rem;font-weight:700}
.login-logo p{color:var(--text-muted);font-size:.9rem;margin-top:4px}
.login-tabs{display:flex;gap:4px;margin-bottom:24px;background:var(--bg);border-radius:8px;padding:3px}
.login-tab{flex:1;padding:6px 4px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-size:.75rem;font-weight:500;color:var(--text-muted);transition:.2s;white-space:nowrap}
.login-tab.active{background:var(--primary);color:#fff}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:.95rem;color:var(--text);background:var(--card);transition:.2s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,58,92,.1)}

/* Date inputs default to the same var(--card) tint as the modal body, so
   they visually disappear against it. Safari paints type="date"/"time"
   controls with native OS chrome that ignores plain background-color, so
   -webkit-appearance must be stripped first before white actually shows. */
input[type="date"],input[type="datetime-local"],input[type="time"]{-webkit-appearance:none;appearance:none;background:#fff!important;color-scheme:light}

/* Utilities tab filter row — matched to the white of the date filter above
   (.form-group input/select otherwise default to the var(--card) tint,
   which is what made the date field need the override just above this). */
#util-search,#util-company-filter,#util-status-filter{background:#fff}
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:.2s;text-decoration:none}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}
.btn-gold{background:var(--gold);color:#fff}.btn-gold:hover{background:#b8923c}
.btn-success{background:var(--success);color:#fff}.btn-success:hover{background:#059669}
.btn-danger{background:var(--danger);color:#fff}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text)}.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-cancel{background:#fff;border:1.5px solid var(--primary);color:var(--primary)}.btn-cancel:hover{background:var(--bg)}
.btn-sm{padding:6px 12px;font-size:.8rem}
.btn-full{width:100%;justify-content:center}
.error-msg{color:var(--danger);font-size:.85rem;margin-top:8px;text-align:center}

/* APP SHELL */
#app{display:none;flex-direction:column;min-height:100vh}
header{background:var(--primary);color:#fff;padding:0 24px;display:flex;align-items:center;height:60px;box-shadow:0 2px 8px rgba(0,0,0,.2);position:sticky;top:0;z-index:950}
.header-left{display:flex;align-items:center;gap:14px;flex:1}
.header-user-info{display:flex;align-items:center;gap:8px;white-space:nowrap}
.header-username{font-size:.92rem;font-weight:600}
.header-badge{background:var(--gold);color:var(--primary-dark);padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700}
.header-sep{width:1px;height:22px;background:rgba(255,255,255,.2)}
.hdr-nav-btn{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.22);color:#fff;padding:5px 13px;border-radius:6px;cursor:pointer;font-size:.82rem;font-weight:500;transition:.2s}
.hdr-nav-btn:hover{background:rgba(255,255,255,.22)}
.hdr-nav-btn.hdr-active{background:rgba(255,255,255,.2);border-color:var(--gold);color:var(--gold)}
.hdr-dd-item{display:block;width:100%;padding:10px 16px;background:transparent;border:none;color:rgba(255,255,255,.88);font-size:.85rem;font-weight:500;text-align:left;cursor:pointer;transition:.15s}
.hdr-dd-item:hover{background:rgba(255,255,255,.12);color:#fff}
.header-logo{font-size:1.2rem;font-weight:700;position:absolute;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;pointer-events:none}
.header-logo span{color:var(--gold)}
.header-user{display:flex;align-items:center;gap:12px;font-size:.9rem;flex-shrink:0}
/* Investor-mode header */
header.investor-mode .header-logo{display:none}
header.investor-mode .header-sep{display:none}
header.investor-mode .hdr-nav-btn{display:none}
header.investor-mode #tasks-hdr-wrap{display:none!important}
header.investor-mode .header-user-info{flex-direction:column;align-items:flex-start;gap:1px}
header.investor-mode .header-username{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
header.investor-mode .header-badge{display:none}
#investor-portal-title{display:none;font-size:.72rem;font-weight:700;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.1em}
header.investor-mode #investor-portal-title{display:block}

/* ── Investor portal layout ── */
.inv-portal{background:#C4B49A;min-height:calc(100vh - 60px);font-family:'Public Sans',sans-serif;-webkit-font-smoothing:antialiased}
.inv-portal .inv-eyebrow{font:600 13px/1 'Public Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase}
.inv-hero{display:flex;justify-content:space-between;align-items:flex-end;padding:48px 56px 36px;gap:24px;flex-wrap:wrap}
.inv-hero-title{flex:1;text-align:center}
.inv-hero .inv-eyebrow{color:#5B431B;display:block;margin-bottom:8px}
.inv-hero h1{font-family:'Public Sans',sans-serif;font-weight:800;font-size:clamp(34px,4.5vw,52px);line-height:1.02;margin:0 0 12px;color:#132544;letter-spacing:-.03em}
.inv-hero .inv-welcome{font:400 15px/1.5 'Public Sans',sans-serif;color:rgba(19,37,68,.65);margin:0}
.inv-hero .inv-welcome strong{color:#132544;font-weight:700}
/* Admin-configured link to the firm's own site (Settings > Portal
   Customization). Deliberately the last child in the hero's left column
   — .inv-hero's align-items:flex-end bottom-aligns that column against
   .inv-as-of on the right, so this naturally lines up with the "As Of"
   date without any extra positioning. */
.inv-website-link{display:block;margin-top:10px;font:700 15px/1 'Public Sans',sans-serif;color:#132544;text-decoration:underline;text-underline-offset:3px}
.inv-website-link:hover{color:#1e3a5f}
.inv-as-of{text-align:right;flex-shrink:0}
.inv-as-of .inv-eyebrow{color:#5B431B}
.inv-as-of .inv-date{font-family:'Public Sans',sans-serif;font-weight:700;font-size:18px;color:#132544;margin-top:6px;letter-spacing:-.01em}
.inv-stats{margin:0 56px 20px;background:#132544;border-radius:4px;display:flex;flex-wrap:wrap;box-shadow:0 8px 28px rgba(19,37,68,.25)}
/* overflow:hidden + min-width:0 stop a too-narrow cell's value/eyebrow text
   from visually bleeding into the next cell (flex children default to a min
   width equal to their content, which defeats wrapping/shrinking) — this
   became load-bearing once the stat row grew past its original fixed 6-8
   items and started auto-fitting narrower columns. flex:1 1 200px lets the
   dollar-amount boxes (Total Deployed, Estimated Return, Realized Return)
   grow to use the room freed up by the narrow ones below. */
.inv-stat{flex:1 1 200px;padding:28px 22px;border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);overflow:hidden;min-width:0;text-align:center}
.inv-stat:last-child{border-right:none}
.inv-stat .inv-eyebrow{color:rgba(255,255,255,.5);display:block;margin-bottom:12px;white-space:normal;overflow-wrap:break-word}
.inv-stat .inv-val{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:clamp(15px,1.6vw,22px);color:#fff;font-variant-numeric:tabular-nums;display:block;line-height:1.15;overflow-wrap:break-word}
.inv-stat .inv-val.accent{color:#5B431B}
.inv-stat .inv-val.positive{color:#6FCBA0}
.inv-stat .inv-delta{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;color:#6FCBA0;margin-top:4px;display:block}
/* Portfolio Composition row — same bubble look, denser (simple counts don't
   need the financial row's generous padding/font). */
.inv-stats-compact{margin:0 56px 48px}
.inv-stats-compact .inv-stat{padding:18px 16px;text-align:center}
.inv-stats-compact .inv-stat .inv-eyebrow{margin-bottom:8px;font-size:10px}
.inv-stats-compact .inv-stat .inv-val{font-size:clamp(14px,1.3vw,19px)}
/* Three-tier stat layout: Tier 1 (.inv-stats, plain) is the full page-width
   row above; Tier 2 and Tier 3 are each nested inside a width-constrained
   wrapper below, so .inv-stats-nested drops the standard 56px page-gutter
   margin that .inv-stats/.inv-stats-compact normally carry — the wrapper
   owns the width and centering instead. Must come after the .inv-stats/
   .inv-stats-compact margin rules above (same specificity — source order
   decides) so it actually wins. */
.inv-stats-nested{margin:0}
/* Tier 2 — 80% of Tier 1's content width (page width minus its 56px+56px
   gutters), centered on the same centerline via margin:auto. All items in
   this row are peers (yields/counts), so they split the row evenly and
   center their text instead of the wide-vs-narrow split Tier 1 used when
   these lived in the same row as the dollar figures. */
.inv-stats-tier2-wrap{width:calc((100% - 112px)*.8);margin:0 auto 20px}
.inv-stats-tier2 .inv-stat{text-align:center}
/* Tier 3 — 80% of Tier 2's width (.8*.8 = 64% of Tier 1's content width),
   same centerline. */
.inv-stats-tier3-wrap{width:calc((100% - 112px)*.64);margin:0 auto 48px}
/* Groups the whole page by Portfolio — sits above each portfolio's own
   subtotal blocks and status sections. Larger serif h2 (matches the hero
   title's font) than .inv-section-head's h2 so it visually outranks the
   status-section headers nested underneath it. */
.inv-portfolio-group-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(19,37,68,.2);padding:0 56px 14px;margin:44px 0 26px;gap:24px}
.inv-portfolio-group-head .inv-eyebrow{color:#5B431B;display:block;margin-bottom:6px}
.inv-portfolio-group-head h2{font-family:'Fraunces',serif;font-weight:600;font-size:28px;color:#132544;margin:0}
.inv-portfolio-group-head .inv-count{font-family:'IBM Plex Mono',monospace;font-size:13px;color:rgba(19,37,68,.65);white-space:nowrap}
.inv-section{padding:0 56px 72px}
.inv-section-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(19,37,68,.2);padding-bottom:14px;margin-bottom:26px;gap:24px}
.inv-section-head .inv-eyebrow{color:#5B431B;display:block;margin-bottom:6px}
.inv-section-head h2{font-family:'Public Sans',sans-serif;font-weight:800;font-size:24px;color:#132544;margin:0;letter-spacing:-.02em}
.inv-section-head .inv-count{font-family:'IBM Plex Mono',monospace;font-size:13px;color:rgba(19,37,68,.65);white-space:nowrap}
.inv-cards{display:flex;flex-direction:column;gap:16px}
.inv-card{position:relative;background:#FFFEFA;border:1px solid #DED2B0;border-left:3px solid #1E6E4F;border-radius:3px;padding:26px 32px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:18px;align-items:center;box-shadow:0 1px 2px rgba(19,37,68,.05);transition:box-shadow .25s,transform .25s}
.inv-card:hover{box-shadow:0 12px 28px rgba(19,37,68,.1);transform:translateY(-2px)}
.inv-card .inv-tag{color:#5B431B;display:block}
.inv-card .inv-addr{font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:#132544;margin:4px 0 0;line-height:1.2}
.inv-field .inv-flabel{font:600 10px/1 'Public Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(27,27,22,.4);display:block;margin-bottom:6px}
.inv-field .inv-fval{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:#132544;font-variant-numeric:tabular-nums}
.inv-field .inv-fval.gain{color:#1E6E4F}
.inv-field .inv-fval.loss{color:#dc2626}
.inv-field .inv-fsub{font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(27,27,22,.4);display:block;margin-top:2px}
.inv-stamp{position:absolute;top:-14px;right:28px;width:72px;height:72px;border-radius:50%;border:1.5px dashed #5B431B;background:#FFFEFA;display:flex;align-items:center;justify-content:center;flex-direction:column;transform:rotate(-9deg);box-shadow:0 3px 6px rgba(0,0,0,.07)}
.inv-stamp::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(169,130,76,.38)}
.inv-stamp .inv-stop{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:10px;letter-spacing:.06em;color:#5B431B}
.inv-stamp .inv-sdate{font-family:'IBM Plex Mono',monospace;font-size:7.5px;color:#5B431B;margin-top:2px;text-align:center;line-height:1.3}
/* display:flex/flex-direction:column so extra height from the grid's
   row-stretch (a taller sibling card, e.g. one with several "Linked:"
   package-sibling chips) is absorbed by the navy .inv-active-hdr
   (flex:1) rather than left as blank white space below
   .inv-active-metrics (flex:0 0 auto) — keeps the value row pinned to
   the card's bottom edge instead of floating mid-card. */
.inv-active-card{position:relative;background:#FFFEFA;border:1px solid #DED2B0;border-left:3px solid #2563a8;border-radius:3px;overflow:hidden;box-shadow:0 1px 2px rgba(19,37,68,.05);transition:box-shadow .25s,transform .25s;display:flex;flex-direction:column}
.inv-active-card:hover{box-shadow:0 12px 28px rgba(19,37,68,.1);transform:translateY(-2px)}
.inv-active-hdr{background:linear-gradient(135deg,#132544 0%,#1e3a5f 100%);padding:16px 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex:1 1 auto}
.inv-active-metrics{display:flex;flex-wrap:wrap;border-top:1px solid #DED2B0;flex:0 0 auto}
.inv-active-metric{flex:1 1 25%;min-width:78px;padding:11px 8px;text-align:center;border-right:1px solid #DED2B0}
.inv-active-metric:last-child{border-right:none}
.inv-active-metric:nth-child(4n){border-right:none}
.inv-active-metric:nth-child(n+5){border-top:1px solid #DED2B0}
.inv-active-metric .inv-mval{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:#132544;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-active-metric .inv-mlabel{font:600 9.5px/1 'Public Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(27,27,22,.4);display:block;margin-top:3px}
/* 3 tiles per row instead of .inv-active-metric's usual 4, so labels aren't
   squeezed/truncated. Originally built for the "Build Your Own Card"
   preview (Settings > Investors > Portal Customization, js/settings/
   card-builder.js) and now shared by the real investor-tab cards
   (js/listing/investor-tab.js _renderMetricsRow3) for a true 1:1 visual
   match between what an admin builds and what investors actually see. */
.cbb-dropzone .inv-active-metric{flex:1 1 33.333%}
.cbb-dropzone .inv-active-metric:nth-child(4n){border-right:1px solid #DED2B0}
.cbb-dropzone .inv-active-metric:nth-child(3n){border-right:none}
.cbb-dropzone .inv-active-metric:nth-child(n+4){border-top:1px solid #DED2B0}
/* Sold card address+fields grid — address spans both field rows via
   .inv-sold-addr-span, up to 4 fields per row before wrapping to a 2nd row.
   .inv-card is itself a 5-col grid (1.6fr+4x1fr), so this needs its own
   grid-column:1/-1 to span the whole card instead of landing in just the
   first (1.6fr) track. Shared by the real investor-tab Sold card
   (js/listing/investor-tab.js _buildSoldCard) and the "Build Your Own Card"
   preview (js/settings/card-builder.js) — kept as one class so the two
   can't visually drift apart. */
.inv-sold-fields-grid{grid-column:1/-1;display:grid;grid-template-columns:auto repeat(4,minmax(110px,1fr));column-gap:24px;row-gap:12px;align-items:start}
.inv-sold-addr-span{grid-row:1/span 2;align-self:center;min-width:140px}
.inv-sold-fields-grid .inv-field{min-width:0}
.inv-sold-fields-grid .inv-field .inv-flabel{white-space:nowrap}
.inv-footer{padding:24px 56px;border-top:1px solid rgba(19,37,68,.2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:rgba(19,37,68,.65)}
.inv-footer .inv-firm{color:rgba(19,37,68,.65);font-weight:600}
.inv-empty{text-align:center;padding:60px 20px;background:rgba(255,255,255,.3);border-radius:3px;border:1px solid rgba(19,37,68,.15)}
.inv-empty p{font-size:1rem;font-weight:600;color:rgba(19,37,68,.6)}
@media(max-width:980px){
  .inv-card{grid-template-columns:1fr 1fr;row-gap:16px}
  .inv-card .inv-addr-block{grid-column:1 / -1}
}
@media(max-width:720px){
  .inv-hero,.inv-stats,.inv-section,.inv-portfolio-group-head{padding-left:20px;padding-right:20px}
  .inv-hero{padding-top:32px;padding-bottom:24px}
  .inv-stats{margin-left:20px;margin-right:20px}
  /* One stat per row at this width — simpler and more legible than trying to
     keep a 2-column border grid aligned when the row mixes wide dollar boxes
     with narrow percentage/count ones. */
  .inv-stat{flex-basis:100%;border-right:none}
  .inv-stats-tier2 .inv-stat{text-align:left}
  /* Tier 2/3 lose their 80%/64% narrowing on small screens — a 64%-wide
     column would be uncomfortably cramped once each stat is already
     stacking full-width inside it. */
  .inv-stats-tier2-wrap,.inv-stats-tier3-wrap{width:auto;margin-left:20px;margin-right:20px}
  .inv-card{grid-template-columns:1fr;padding:20px}
  .inv-stamp{top:-12px;right:16px}
  .inv-footer{padding-left:20px;padding-right:20px}
}

/* ── Low vision mode ── */
/* Tabs that get zoomed (property-facing only; ledger/utilities excluded) */
.lv-large  #active-tab,.lv-large  #passive-tab,.lv-large  #listing-tab,
.lv-large  #total-cost-tab,.lv-large  #sold-tab,.lv-large  #reports-tab,
.lv-large  #dashboard-tab,.lv-large  #payment-info-tab,.lv-large  #investor-tab,
.lv-large  #agents-tab,.lv-large  #renters-tab,.lv-large  #evictions-tab,
.lv-large  #contractors-tab,.lv-large  #settings-tab{zoom:1.25}
.lv-larger #active-tab,.lv-larger #passive-tab,.lv-larger #listing-tab,
.lv-larger #total-cost-tab,.lv-larger #sold-tab,.lv-larger #reports-tab,
.lv-larger #dashboard-tab,.lv-larger #payment-info-tab,.lv-larger #investor-tab,
.lv-larger #agents-tab,.lv-larger #renters-tab,.lv-larger #evictions-tab,
.lv-larger #contractors-tab,.lv-larger #settings-tab{zoom:1.40}
/* Force 2-column card grid in low vision modes */
.lv-large  .properties-grid,.lv-larger .properties-grid{grid-template-columns:repeat(2,1fr)!important}
/* Vision toggle button — active state */
#hdr-vision-btn.lv-on{border-color:var(--gold);color:var(--gold);background:rgba(255,255,255,.18)}
#btn-logout{background:transparent;border:1.5px solid rgba(255,255,255,.3);color:#fff;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:.85rem;transition:.2s}
#btn-logout:hover{background:rgba(255,255,255,.1)}

/* NAV TABS */
.nav-tabs{background:var(--card);border-bottom:2px solid var(--border);display:flex;gap:0;padding:0 8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;justify-content:center;position:sticky;top:60px;z-index:940}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-tab{padding:14px 11px;border:none;background:transparent;cursor:pointer;font-size:.8rem;font-weight:500;color:var(--text-muted);border-bottom:3px solid transparent;margin-bottom:-2px;transition:.2s;white-space:nowrap}
.nav-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.nav-tab:hover{color:var(--primary)}
.nav-tab.admin-only{/* shown only to admin */}

/* MAIN CONTENT */
main{flex:1;padding:24px;max-width:1400px;width:100%;margin:0 auto}
.tab-content{display:none}.tab-content.active{display:block}

/* CARDS */
.card{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:20px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
/* Settings section labels */
.settings-section-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);padding:18px 0 6px;border-bottom:2px solid var(--border);margin-bottom:4px}
/* Profit formula token chips */
.pf-chip{background:var(--primary);color:#fff;border:none;border-radius:20px;padding:4px 12px;font-size:.78rem;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.pf-chip:hover{background:var(--primary-dark)}
.card-title{font-size:1.1rem;font-weight:700;color:var(--primary)}

/* SETTINGS TAB — compact collapsed bars, not full padded/shadowed cards.
   The .collapsible-hdr bar (bg/border/radius/padding) already reads as a
   flat row on its own; nesting it inside a full .card just doubles the
   box (shadow + 20px padding around a bar that already has its own),
   which is what made every collapsed section still feel like "a real
   block." Here the header's own bg/border are neutralized to transparent
   so it becomes the settings-card's flat top row instead, and the card
   just supplies a thin outline. See code-fixes/settings-tab-compact-bars.md */
.settings-card{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.settings-card>.collapsible-hdr{background:transparent;border:none;border-radius:0;padding:9px 14px;margin-bottom:0}
.settings-card>.collapsible-hdr:hover{background:rgba(26,58,92,.06)}
.settings-card .card-title{font-size:.92rem}
/* Plain .form-group inputs default to background:var(--card) — identical
   to .settings-card's own background, so a field like Payment Accounts'
   Venmo link had no visible box, just a border blending into the bar
   behind it. White fixes it without touching the shared .form-group rule
   (used all over the app outside Settings too). */
.settings-card-body .form-group input,
.settings-card-body .form-group select,
.settings-card-body .form-group textarea,
.modal-body .form-group input,
.modal-body .form-group select,
.modal-body .form-group textarea{background:#fff}
/* Nested bars — a group of sub-bars collapsed inside a parent bar's own
   body (e.g. the formula/portal-display bars living inside Investors).
   Left border + indent signals "these belong to the section above,"
   and the slightly different bg keeps them visually distinct from a
   top-level bar at a glance. */
.settings-subgroup{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-left:14px;border-left:2px solid var(--border)}
.settings-subgroup .settings-card{background:var(--bg)}
.settings-card-body{padding:2px 16px 16px}
.settings-badge{font-size:.71rem;font-weight:600;color:var(--text-muted);background:var(--bg);border-radius:20px;padding:2px 9px;white-space:nowrap}

/* PROPERTY CARDS */
.properties-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.property-card{background:var(--card);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);overflow:visible;border:1.5px solid var(--border);transition:.2s;display:flex;flex-direction:column;min-width:0}
.property-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.1);border-color:var(--primary)}
.property-card-header{background:var(--primary);color:#fff;padding:14px 16px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;border-radius:10px 10px 0 0}
.property-card-header>div:first-child{min-width:0;flex:1 1 0}
.property-card-header>div:last-child,.property-card-header>span:last-child{flex-shrink:0}
.property-address{font-size:1rem;font-weight:600;line-height:1.3;white-space:normal;word-break:break-word}
.property-parcel{font-size:.75rem;opacity:.8;margin-top:2px;word-break:break-word;overflow-wrap:anywhere}
.property-status{padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;white-space:nowrap;-webkit-user-select:none;user-select:none}

/* Custom instant tooltip for company/property-type badges — appears to the
   left of the badge on hover, no native-tooltip render delay or positioning
   quirks (see badge-tooltips code-fix note). */
.badge-tt{position:relative}
.badge-tt::after{
  content:attr(data-tooltip);
  position:absolute;
  right:100%;
  top:50%;
  transform:translateY(-50%);
  margin-right:8px;
  background:#fff;
  color:#1a1a2e;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  padding:4px 9px;
  border-radius:6px;
  font-size:.72rem;
  font-weight:600;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transition:opacity .1s ease;
  pointer-events:none;
  z-index:50;
}
.badge-tt:hover::after{opacity:1;visibility:visible}
.status-active{background:var(--gold);color:var(--primary-dark)}
.status-passive{background:var(--success);color:#fff}
.status-sold{background:#6b7280;color:#fff}
.status-renter{background:#8b5cf6;color:#fff}
.property-card-body{padding:14px 16px;flex:1}
.prop-row{display:flex;justify-content:space-between;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--bg);font-size:.85rem;gap:12px}
.prop-row:last-child{border:none}
.prop-label{color:var(--text-muted);font-weight:500;flex-shrink:0;min-width:110px}
.prop-value{font-weight:600;color:var(--text);text-align:right;word-break:break-word}
.property-links{display:flex;gap:8px;margin-top:10px;padding:0 16px}
.property-links a{flex:1;text-align:center;padding:6px;border-radius:6px;font-size:.78rem;font-weight:600;text-decoration:none;border:1.5px solid var(--border);color:var(--text-muted);transition:.2s}
.property-links a:hover{border-color:var(--primary);color:var(--primary)}
.property-card-actions{padding:0;margin-top:auto}

/* ESTIMATES TABLE */
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{background:#fff;color:#111827;padding:10px 12px;text-align:left;font-weight:700;font-size:.82rem;border-bottom:2px solid #111827;text-decoration:underline}
th:first-child{border-radius:8px 0 0 0}th:last-child{border-radius:0 8px 0 0}
td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
#ledger-content td{vertical-align:top}
tr:hover td{background:var(--bg)}
tr:last-child td{border:none}

/* MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
@keyframes _modal-shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-8px)}35%{transform:translateX(8px)}55%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.modal-shake{animation:_modal-shake .35s ease;}
.modal{background:var(--card);border-radius:16px;width:100%;max-width:680px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal-lg{max-width:900px}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--card);z-index:1}
.modal-title{font-size:1.1rem;font-weight:700;color:var(--primary)}
.modal-close{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--text-muted);line-height:1;padding:4px}
.modal-body{padding:24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}

#cost-edit-modal input[type="text"],
#cost-edit-modal input[type="number"],
#cost-edit-modal input[type="date"]{background:#fff}

#property-modal input[type="text"],
#property-modal input[type="number"],
#property-modal input[type="date"],
#property-modal input[type="email"],
#property-modal input[type="tel"],
#property-modal select,
#property-modal textarea{background:#fff;color:#000}

#property-modal button[onclick="addEstimateRow()"],
#property-modal button[onclick="addPaymentRow()"]{background:#fff}

/* FORM LAYOUT */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row.three{grid-template-columns:1fr 1fr 1fr}
.form-full{grid-column:1/-1}
.section-divider{margin:20px 0;border:none;border-top:1px solid var(--border)}
.section-label{font-size:.8rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}

/* ── Collapsible section headers (shared module) ────────────────────────
   Every expandable/collapsible section header in the app should use one of
   these two classes so the "this is clickable and expands" affordance is
   consistent everywhere, instead of each header re-inventing its own inline
   styles. Covers two different underlying mechanisms already used across the
   app — both get the same bar/chevron look:

   1. Native <details>/<summary> (Edit Property, Listing modals, etc.) — no
      JS needed at all, the browser's own [open] attribute drives the CSS:
        <details>
          <summary class="collapsible-summary">Section Label<span class="chevron-icon"></span></summary>
          ...body...
        </details>

   2. Custom div + JS toggle (Settings tab, Super Admin panel) — CSS only
      styles the bar/chevron shape; the existing toggle function (e.g.
      toggleSettingsSection()) keeps controlling open/close and keeps setting
      the chevron's rotation inline exactly as it already does:
        <div class="collapsible-hdr" data-action="..." ...>
          <span class="card-title">Section Label</span>
          <span class="chevron-icon" id="my-chevron" style="transform:rotate(-90deg)"></span>
        </div>

   Chevron convention (matches what the pre-existing but glyph-less Settings
   JS already assumed): unrotated = pointing down (expanded), rotate(-90deg)
   = pointing right (collapsed).
*/
.collapsible-summary{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  cursor:pointer;user-select:none;list-style:none;
  background:var(--bg);border:1.5px solid var(--border);border-radius:8px;
  padding:10px 14px;font-weight:700;font-size:.85rem;color:var(--primary);
  text-transform:none;letter-spacing:normal;
  transition:background .15s,border-color .15s;
}
.collapsible-summary::-webkit-details-marker{display:none}
.collapsible-summary:hover{background:rgba(26,58,92,.08);border-color:var(--primary)}
.collapsible-hdr{
  background:var(--bg);border:1.5px solid var(--border);border-radius:8px;
  padding:10px 14px;transition:background .15s,border-color .15s;
}
.collapsible-hdr:hover{background:rgba(26,58,92,.08);border-color:var(--primary)}
.chevron-icon{
  width:0;height:0;flex-shrink:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--primary);
  transition:transform .2s;
  transform:rotate(-90deg);
}
/* Native <details> needs no JS at all — the browser's own [open] attribute
   drives this rule directly. Every other usage (Settings, Super Admin,
   Contact Log) sets `transform` inline via JS, which always wins over this
   class-level default regardless — no conflict. */
details[open]>summary.collapsible-summary .chevron-icon{transform:rotate(0deg)}

/* Compact field density — mirrors the quick-filters row styling (34px
   inputs, tight labels) so many fields pack into far fewer rows. Scoped to
   .compact-field-row only, so it doesn't affect .form-row/.form-group
   anywhere else in the app. */
.compact-field-row{display:flex;flex-wrap:wrap;gap:10px 12px}
.compact-field-row .form-group{margin:0;flex:1 1 150px;min-width:0}
.compact-field-row .form-group.form-full{flex-basis:100%}
.compact-field-row .form-group label{font-size:.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.compact-field-row .form-group input,.compact-field-row .form-group select{height:34px;padding:0 10px;font-size:.85rem;background:#fff}

/* Edit Listing modal — white field backgrounds throughout, matching the
   compact row above, so fields stand out against the modal's card bg. */
#listing-modal .form-group input,#listing-modal .form-group select,#listing-modal .form-group textarea,#listing-modal .listing-contract-upload-label{background:#fff}

/* Eviction Details modal — same white field-background treatment. */
#eviction-modal .form-group input,#eviction-modal .form-group select,#eviction-modal .form-group textarea{background:#fff}

/* BADGES & TAGS */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:600}
.badge-warning{background:#fef3c7;color:#92400e}
.badge-success{background:#d1fae5;color:#065f46}
.badge-danger{background:#fee2e2;color:#991b1b}
.badge-info{background:#dbeafe;color:#1e40af}

/* STATS ROW */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--card);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow);border-left:4px solid var(--primary)}
.stat-card.gold{border-left-color:var(--gold)}
.stat-card.success{border-left-color:var(--success)}
.stat-card.danger{border-left-color:var(--danger)}
.stat-value{font-size:1.6rem;font-weight:700;color:var(--primary)}
.stat-label{font-size:.78rem;color:var(--text-muted);margin-top:2px}

/* Dashboard visual pass: stat tiles white against the page's grey background,
   scoped to this tab only -- other tabs' stat-card bubbles are unchanged until
   reviewed in their own pass. */
#dashboard-tab .stat-card{background:#fff}

/* Portfolio visual pass: same treatment, scoped to this tab only. */
#total-cost-tab .stat-card{background:#fff}

/* Active Assets visual pass: stat bubbles + property card bodies white,
   scoped to this tab only -- other tabs sharing .property-card/.stat-card
   are unchanged until reviewed in their own pass. */
#active-tab .stat-card,
#active-tab .property-card{background:#fff}

/* Ready to Deploy visual pass: same treatment, scoped to this tab only. */
#passive-tab .stat-card,
#passive-tab .property-card{background:#fff}

/* Active Listings visual pass: same treatment, scoped to this tab only. */
#listing-tab .stat-card,
#listing-tab .property-card{background:#fff}

/* Sold Assets visual pass: same treatment, scoped to this tab only. */
#sold-tab .stat-card,
#sold-tab .property-card{background:#fff}

/* Evictions visual pass: same treatment, scoped to this tab only. */
#evictions-tab .stat-card,
#evictions-tab .property-card{background:#fff}

/* Reports visual pass: same treatment, scoped to this tab only. Covers every
   report type's stat bubbles since they all share the .stat-card class. */
#reports-tab .stat-card{background:#fff}

/* Agents visual pass: stat bubbles and the Find a Realtor address/specialty
   inputs -- scoped to this tab only. The Agent Contact Log outer card keeps
   the standard .card background (matching Real Estate Agents below it);
   only its inner table wrapper goes white -- see js/outreach.js renderAgentLog(). */
#agents-tab .stat-card,
#fr-address-input,
#fr-specialty{background:#fff}

/* Contractors visual pass: the Find a Contractor address input and the
   Contractor Breakdown filter bar -- scoped to this tab only. The
   Contractor Contact Log outer card keeps the standard .card background;
   only its inner table wrapper goes white -- see js/outreach.js renderContractorLog(). */
#fc-address-input,
#con-name-filter,
#con-city-filter,
#con-month-filter,
#con-county-filter,
#con-property-search{background:#fff}

/* LEDGER */
.ledger-filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;align-items:flex-end}
.ledger-filters .form-group{margin:0;min-width:160px}
.ledger-filter-row{display:grid;gap:8px;margin-bottom:12px;align-items:end}
.ledger-filter-row .form-group{margin:0}
.ledger-filter-row label{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:3px;display:block}
.ledger-filter-row select,.ledger-filter-row input[type=text]{padding:6px 10px;font-size:.83rem;height:34px;box-sizing:border-box;width:100%}
.ledger-month{background:var(--primary);color:#fff;padding:10px 16px;border-radius:0;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.ledger-month-wrap{margin-bottom:12px;border:1.5px solid var(--border);border-radius:10px;overflow:hidden}
.ledger-month-wrap .ledger-month:first-child{border-radius:0}
.ledger-year{background:var(--primary-dark);color:#fff;padding:12px 16px;border-radius:0;font-weight:700;font-size:1.02rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.ledger-year-wrap{margin-bottom:12px;border:1.5px solid var(--border);border-radius:10px;overflow:hidden}
.ledger-year-wrap .ledger-year:first-child{border-radius:0}
.ledger-year-wrap .ledger-month-wrap{margin:0;border:none;border-radius:0;border-top:1px solid rgba(255,255,255,.12)}
.ledger-year-wrap .ledger-month-wrap:first-child{border-top:none}
.ledger-week-hdr{background:var(--bg);border-top:1px solid var(--border);padding:7px 16px 7px 28px;font-size:.84rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;color:var(--text);transition:background .15s;user-select:none}
.ledger-week-hdr:hover{background:rgba(37,99,168,.06)}
.ledger-month-entries{padding:8px 0}

/* PROGRESS BAR */
.progress-bar{background:var(--bg);border-radius:20px;height:8px;overflow:hidden;margin-top:6px}
.progress-fill{height:100%;border-radius:20px;transition:.3s}
.progress-fill.good{background:var(--success)}
.progress-fill.warn{background:var(--warning)}
.progress-fill.over{background:var(--danger)}

/* PAYMENT HISTORY */
.payment-list{list-style:none}
.payment-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--bg);font-size:.85rem}
.payment-item:last-child{border:none}
.payment-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex-shrink:0}
.payment-dot.late{background:var(--danger)}

/* ALERTS
   No markup here actually splits an alert into an icon child + text child —
   every .alert is one block of plain text with inline <strong> tags mixed
   in (e.g. the Edit Investor modal's info banner). display:flex used to
   make each text run AND each <strong> its own flex item sitting side by
   side in a row (each wrapping independently in its own cramped column)
   instead of one normal wrapped paragraph — hence the "squished columns"
   look. Plain block flow fixes it; nothing relies on the flex layout. */
.alert{padding:12px 16px;border-radius:8px;font-size:.88rem;margin-bottom:12px;line-height:1.5}
.alert-warning{background:#fef3c7;border:1px solid #fcd34d;color:#78350f}
.alert-danger{background:#fee2e2;border:1px solid #fca5a5;color:#7f1d1d}
.alert-success{background:#d1fae5;border:1px solid #6ee7b7;color:#065f46}
.alert-info{background:#dbeafe;border:1px solid #93c5fd;color:#1e3a8a}

/* PDF UPLOAD ZONE */
.upload-zone{border:2px dashed var(--border);border-radius:12px;padding:32px;text-align:center;cursor:pointer;transition:.2s}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--primary);background:rgba(26,58,92,.03)}
.upload-zone-icon{font-size:2.5rem;margin-bottom:8px}
.upload-zone p{color:var(--text-muted);font-size:.9rem}

/* PHOTO GRID */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:10px}
.photo-thumb{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:1;cursor:pointer}
.photo-thumb img{width:100%;height:100%;object-fit:cover}
.photo-thumb-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:.2s;display:flex;align-items:center;justify-content:center}
.photo-thumb:hover .photo-thumb-overlay{opacity:1}

/* RENTER VIEW */
.renter-hero{background:var(--primary);color:#fff;border-radius:12px;padding:24px;margin-bottom:20px}
.renter-address{font-size:1.3rem;font-weight:700}
.renter-rent{font-size:2rem;font-weight:700;color:var(--gold)}

/* NOTIFICATION TOAST */
#toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--card);border-radius:10px;padding:14px 18px;box-shadow:var(--shadow-lg);font-size:.88rem;min-width:280px;max-width:380px;border-left:4px solid var(--primary);animation:slideIn .3s ease}
.toast.success{border-left-color:var(--success)}
.toast.warning{border-left-color:var(--warning)}
.toast.danger{border-left-color:var(--danger)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes popIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* UTILITY */
.text-center{text-align:center}.text-right{text-align:right}
.text-muted{color:var(--text-muted)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-gold{color:var(--gold)}
.font-bold{font-weight:700}.font-600{font-weight:600}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}
.flex{display:flex}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-8{gap:8px}.gap-12{gap:12px}
.hidden{display:none!important}
.empty-state{text-align:center;padding:48px 20px;color:var(--text-muted)}
.empty-state .empty-icon{font-size:3rem;margin-bottom:12px}
.empty-state p{font-size:.95rem}
.chip{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:600;background:var(--bg);color:var(--text-muted);border:1px solid var(--border)}
.search-bar{display:flex;gap:10px;margin-bottom:16px}
/* Explicit height + box-sizing:border-box, not just matching padding --
   Safari gives <select> its own intrinsic minimum height for the native
   dropdown chrome that padding alone doesn't override, so it still rendered
   taller/shorter than sibling <input> fields with identical padding. */
.search-bar input,.search-bar select{flex:1;height:38px;padding:0 14px;border:1.5px solid var(--border);border-radius:8px;font-size:.9rem;outline:none;box-sizing:border-box}
.search-bar input:focus,.search-bar select:focus{border-color:var(--primary)}
@media(max-width:640px){
  /* ── Photo upload: swap drop zone for camera/library buttons on phones ── */
  .photo-drop-desktop{display:none!important}
  .photo-drop-mobile{display:flex!important}

  /* ── Layout ── */
  .form-row{grid-template-columns:1fr}
  .form-row.three{grid-template-columns:1fr}
  .properties-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}
  .prop-label{min-width:80px;font-size:.8rem}

  /* ── Header ── */
  header{padding:0 10px;height:52px;gap:6px}
  .header-logo{font-size:.88rem;text-align:center}
  .header-logo span:first-child{display:none} /* hide "Aterrex Software" on mobile */
  .header-username{font-size:.78rem;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header-badge{font-size:.6rem;padding:1px 5px}
  #header-plan-badge{display:none!important}
  #hdr-manage-wrap button{font-size:.72rem;padding:4px 8px}
  .header-sep{display:none}
  #tasks-hdr-wrap{display:none!important}
  #avail-hdr-wrap{display:none!important}
  .header-user{gap:6px}
  #hdr-signout-btn,button[onclick="logout()"]{font-size:.75rem;padding:5px 10px}

  /* ── Nav tabs ── */
  .nav-tabs{padding:0 4px;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;justify-content:flex-start}
  .nav-tab{padding:10px 8px;font-size:.72rem;white-space:nowrap;flex-shrink:0}

  /* ── Main content ── */
  main{padding:10px 8px}
  .card{padding:12px 10px}
  .card-header{flex-wrap:wrap;gap:8px}
  .card-header .flex{flex-wrap:wrap;gap:6px}

  /* ── Stats row ── */
  .stat-value{font-size:1.3rem}
  .stat-label{font-size:.72rem}

  /* ── Login / workspace ── */
  .login-card{padding:22px 14px;margin:10px;border-radius:12px;width:calc(100% - 20px);box-sizing:border-box}
  #login-screen{padding:0;align-items:center}
  #login-selector-view .login-logo h1{font-size:1.3rem}
  #workspace-screen .login-card{margin:12px auto}

  /* ── Property cards ── */
  .property-card{padding:12px 10px}
  .prop-actions{flex-wrap:wrap;gap:5px}
  .prop-actions button{flex:1 1 calc(33% - 4px);font-size:.73rem;padding:5px 4px;text-align:center}

  /* ── Modals — slide up from bottom ── */
  .modal-overlay{align-items:flex-end}
  .modal{width:100%!important;max-width:100%!important;max-height:92vh;border-radius:16px 16px 0 0;margin:0;overflow-y:auto}
  .modal-header{padding:12px 14px}
  .modal-body{padding:12px 14px}

  /* ── Tables ── */
  .table-wrap,.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:480px;font-size:.8rem}
  th,td{padding:8px 8px}

  /* ── Search / filter bars ── */
  .search-bar{flex-wrap:wrap;gap:6px}
  .search-bar input{min-width:0;width:100%}

  /* ── Buttons ── */
  .btn{font-size:.8rem;padding:7px 11px}
  .btn-sm{font-size:.73rem;padding:5px 9px}

  /* ── Ledger filter rows ── */
  .ledger-filter-row{grid-template-columns:1fr 1fr!important}
  .ledger-filter-row>div:first-child{grid-column:1/-1} /* property spans full width */

  /* ── Pricing page ── */
  .pricing-cards-grid{grid-template-columns:1fr!important}
  #pricing-screen>div{padding:24px 14px 48px}
  #pricing-screen h1{font-size:1.4rem}

  /* ── Super admin grid ── */
  #sa-dashboard>div:nth-child(2)>div>div{grid-template-columns:1fr!important}

  /* ── Card action buttons (Maps, GIS etc.) ── */
  .prop-top-actions{flex-wrap:wrap;gap:4px}
  .prop-top-actions a,.prop-top-actions button{flex:1 1 calc(33% - 3px);font-size:.72rem;text-align:center}

  /* ── Tasks dropdown full width ── */
  #tasks-dropdown{width:calc(100vw - 16px);right:-8px}
  #avail-dropdown{width:calc(100vw - 16px);right:-8px}

  /* ── Utilities / agent / renter contact log tables ── */
  .ledger-filters{gap:8px}
  .ledger-filters .form-group{min-width:calc(50% - 4px);flex:1 1 calc(50% - 4px)}

  /* ── Inline grids inside cards ── */
  div[style*="grid-template-columns:1fr 1fr"]{display:block!important}
  div[style*="grid-template-columns:1fr 1fr 1fr"]{display:block!important}
  div[style*="grid-template-columns:repeat(3"]{display:block!important}
  div[style*="grid-template-columns:2fr 1fr"]{display:block!important}

  /* ── Form groups inside inline grids ── */
  div[style*="grid-template-columns"] .form-group{margin-bottom:12px}

  /* ── Prevent zoom-on-focus (Android Chrome + iOS Safari both zoom when font-size < 16px) ── */
  input,select,textarea{font-size:16px!important}

  /* ── Minimum touch targets (44px per Apple HIG / Material guidelines) ── */
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .btn-sm{min-height:40px}
  .prop-actions button{min-height:44px!important;padding:10px 4px!important}
  .modal-footer .btn{min-height:44px}
  .mpc-actions button{min-height:48px!important}
}

/* ── TASKS DROPDOWN ── */
#tasks-hdr-wrap{position:relative;display:none}
#tasks-hdr-btn{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);color:#fff;border-radius:8px;cursor:pointer;padding:6px 12px;font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:6px;transition:.15s;white-space:nowrap}
#tasks-hdr-btn:hover{background:rgba(255,255,255,.22)}
#tasks-hdr-btn.td-open{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.5)}
#tasks-hdr-count{background:var(--danger);color:#fff;border-radius:10px;min-width:18px;height:18px;font-size:.65rem;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 4px}
#tasks-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:480px;max-height:min(480px,calc(100vh - 80px));background:var(--card);border-radius:12px;box-shadow:0 8px 36px rgba(0,0,0,.22);display:flex;flex-direction:column;overflow:hidden;z-index:8500;transform-origin:top right;transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .15s}
#tasks-dropdown.td-hidden{transform:scale(.85) translateY(-8px);opacity:0;pointer-events:none}
.td-header{background:var(--primary);color:#fff;padding:10px 14px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.td-header-title{flex:1;font-weight:700;font-size:.92rem}
.td-header-btn{background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:6px;cursor:pointer;padding:4px 8px;font-size:.78rem;transition:.15s}
.td-header-btn:hover{background:rgba(255,255,255,.28)}
.tb-filter-row{padding:8px 12px;border-bottom:1px solid var(--border);display:flex;gap:6px;flex-shrink:0;background:var(--bg)}
.tb-filter-row select{flex:1;padding:5px 8px;border:1.5px solid var(--border);border-radius:6px;font-size:.78rem;background:var(--card);color:var(--text);cursor:pointer}

/* ── AVAILABILITY DROPDOWN (staff: My Availability / contractors: Contacts) ── */
#avail-hdr-wrap{position:relative;display:none}
#avail-hdr-btn{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);color:#fff;border-radius:8px;cursor:pointer;padding:6px 12px;font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:6px;transition:.15s;white-space:nowrap}
#avail-hdr-btn:hover{background:rgba(255,255,255,.22)}
#avail-hdr-btn.td-open{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.5)}
#avail-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:440px;max-height:min(520px,calc(100vh - 80px));background:var(--card);border-radius:12px;box-shadow:0 8px 36px rgba(0,0,0,.22);display:flex;flex-direction:column;overflow:hidden;z-index:8500;transform-origin:top right;transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .15s}
#avail-dropdown.td-hidden{transform:scale(.85) translateY(-8px);opacity:0;pointer-events:none}
/* .td-header (dark blue title bar) sets its own color:#fff and is a
   sibling of this, not a descendant — safe to reset color here without
   affecting it. Without this, plain text here inherits color:#fff from
   the page's <header>, unreadable against this dropdown's light background. */
#avail-dropdown-body{color:var(--text);overscroll-behavior:contain}
.avail-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.avail-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}
.avail-switch input{opacity:0;width:0;height:0}
.avail-switch-track{position:absolute;inset:0;background:var(--border);border-radius:22px;cursor:pointer;transition:.15s}
.avail-switch input:checked+.avail-switch-track{background:#f59e0b}
.avail-switch-track::before{content:'';position:absolute;left:2px;top:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.15s}
.avail-switch input:checked+.avail-switch-track::before{transform:translateX(16px)}
.avail-timeoff-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;margin-bottom:8px;background:#fff;border:1.5px solid var(--border);border-radius:8px;font-size:.8rem}
.avail-hours-row{display:grid;grid-template-columns:34px 1fr 1fr 40px;gap:6px;align-items:center;padding:4px 0;font-size:.78rem}
.avail-status-card{padding:8px 10px;border-radius:8px;margin-bottom:8px;background:var(--bg);border:1px solid var(--border);font-size:.8rem}
.tb-list{overflow-y:auto;flex:1;padding:8px}
.tb-task{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:8px;border:1px solid var(--border);margin-bottom:6px;background:var(--card);cursor:default;transition:opacity .4s,transform .4s}
.tb-task.tb-fading{opacity:0;transform:translateX(30px)}
.tb-task-done .tb-task-title{text-decoration:line-through;color:var(--text-muted)}
.tb-task-title{font-size:.85rem;font-weight:600;line-height:1.3;color:var(--text)}
.tb-task-meta{font-size:.73rem;color:var(--text-muted);margin-top:2px}
.tb-task-notes{font-size:.78rem;color:var(--text-muted);margin-top:4px;line-height:1.4;display:none}
.tb-task.expanded .tb-task-notes{display:block}
.tb-prio-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
/* OTP screen */
#otp-screen{display:none;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:#0f2238;background:linear-gradient(135deg,#0f2238 0%,#1a3a5c 60%,#2563a8 100%);z-index:9995;align-items:center;justify-content:center}
.otp-code-input{display:flex;gap:10px;justify-content:center;margin:20px 0}
.otp-digit{width:48px;height:56px;border:2px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:1.5rem;font-weight:700;text-align:center;outline:none;transition:border .15s}
.otp-digit:focus{border-color:var(--primary);background:var(--card);box-shadow:0 0 0 3px rgba(26,58,92,.1)}
#sa-tenant-table tr:hover { background: rgba(255,255,255,.85) !important; }
#sa-tenant-table tr:hover td, #sa-tenant-table tr:hover td * { color: #000 !important; }
#sa-tenant-table tr:hover td span[style*="background"] { opacity: .85; }

/* ===================== MOBILE FIELD MODE ===================== */
/* Bottom nav — hidden on desktop, shown on mobile via JS after login */
#field-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:64px;
  background:var(--card);border-top:2px solid var(--border);z-index:800;
  justify-content:space-around;align-items:center;
  padding-bottom:env(safe-area-inset-bottom,0px)} /* iPhone notch */
.fnb-btn{display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;color:var(--text-muted);cursor:pointer;
  padding:6px 16px;border-radius:10px;font-size:.65rem;font-weight:600;
  transition:color .15s,background .15s;min-width:60px;text-transform:uppercase;letter-spacing:.03em}
.fnb-btn span:first-child{font-size:1.4rem;line-height:1}
.fnb-btn.fnb-active{color:var(--primary)}
.fnb-btn.fnb-active span:first-child{filter:drop-shadow(0 0 4px var(--primary))}

/* FAB — hidden by default, shown on mobile */
#field-fab{display:none;position:fixed;bottom:76px;right:16px;width:52px;height:52px;
  border-radius:50%;background:var(--gold);color:#1a1a1a;font-size:1.6rem;font-weight:700;
  border:none;box-shadow:0 4px 18px rgba(0,0,0,.35);cursor:pointer;z-index:801;
  align-items:center;justify-content:center;line-height:1;transition:transform .15s}
#field-fab:active{transform:scale(.92)}

/* Field banner */
#field-mode-banner{display:none;background:var(--primary);color:#fff;
  padding:7px 14px;font-size:.8rem;align-items:center;justify-content:center;gap:10px;
  position:sticky;top:0;z-index:700}
#field-mode-banner button{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);
  color:#fff;padding:3px 10px;border-radius:12px;font-size:.74rem;cursor:pointer;white-space:nowrap}

/* Admin impersonation ("View As") banner — hidden unless body.impersonating is set */
#impersonation-banner{display:none;background:#dc2626;color:#fff;
  padding:9px 16px;font-size:.86rem;font-weight:700;align-items:center;justify-content:center;gap:14px;
  position:sticky;top:0;z-index:900}
#impersonation-banner button{background:#fff;color:#dc2626;border:none;border-radius:6px;
  padding:5px 14px;font-size:.82rem;font-weight:800;cursor:pointer;white-space:nowrap}
body.impersonating #impersonation-banner{display:flex}
body.impersonating #main-nav{display:none!important}

/* Mobile property cards */
.mobile-prop-grid{display:flex;flex-direction:column;gap:10px;padding:10px}
.mobile-prop-card{background:var(--card);border:1.5px solid var(--border);border-radius:12px;
  overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.07)}
.mpc-header{display:flex;align-items:flex-start;justify-content:space-between;
  gap:8px;padding:12px 14px 6px}
.mpc-address{font-weight:700;font-size:.95rem;color:var(--text);line-height:1.3}
.mpc-sub{font-size:.78rem;color:var(--text-muted);padding:0 14px 4px}
.mpc-tasks{font-size:.78rem;color:var(--primary);padding:0 14px 6px;font-weight:600}
.mpc-note-preview{font-size:.78rem;color:var(--text-muted);padding:0 14px 8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  border-top:1px solid var(--border);padding-top:8px;margin-top:4px}
.mpc-actions{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--border)}
.mpc-actions button{background:none;border:none;border-right:1px solid var(--border);
  padding:11px 4px;font-size:.78rem;font-weight:600;color:var(--primary);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;transition:background .12s}
.mpc-actions button:last-child{border-right:none}
.mpc-actions button:active{background:rgba(37,99,168,.07)}
.mpc-actions button span:first-child{font-size:1.2rem}

/* When field full-view is toggled: restore desktop layout */
body.field-full-view #field-bottom-nav{display:none!important}
body.field-full-view #field-fab{display:none!important}
body.field-full-view #field-mode-banner{display:none!important}

@media (max-width:768px){
  /* Compact header */
  header{padding:8px 10px!important;min-height:unset}
  .header-logo{font-size:.8rem!important}
  .header-logo span{font-size:.8rem!important}
  .header-sep{display:none!important}
  #hdr-manage-wrap{display:none!important}
  /* Hide desktop tabs on mobile — bottom nav takes over */
  #main-nav{display:none!important}
  /* Bottom nav + FAB visible */
  #field-bottom-nav{display:flex}
  #field-fab{display:flex}
  /* Main content gets bottom padding to clear nav */
  main{padding-bottom:72px!important}
  /* Stats row scrolls horizontally on small screens */
  #active-stats{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:4px}
  #active-stats .stat-card{min-width:110px;flex-shrink:0}
  /* Toast above bottom nav so it's never hidden behind it */
  #toast-container{bottom:calc(84px + env(safe-area-inset-bottom,0px));right:10px;left:10px;align-items:flex-end}
  .toast{min-width:0;width:100%;max-width:100%}
}

/* Docs button hover (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.card-docs-btn:hover{background:#3a8a65!important}

/* Contact-dropdown item hover (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.ct-drop-item:hover{background:rgba(255,255,255,.1)}

/* Utilities tab: Assessor/Maps/GIS link + Request-utility-on button hover
   (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.util-green-link:hover{background:#3a8a65!important}
.util-gold-btn:hover{background:#dfa620!important}

/* Utilities tab: bill note input focus ring (was inline onfocus/onblur — CSP unsafe-inline cleanup) */
.util-note-input{border-bottom-color:var(--border)}
.util-note-input:focus{border-bottom-color:var(--primary)}

/* Find Contractors/Realtors: address suggestion row hover (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.outreach-addr-suggestion:hover{background:var(--bg)}

/* Reports export menu item hover (was inline onmouseenter/onmouseleave — CSP unsafe-inline cleanup) */
.report-export-item:hover{background:var(--bg)}

/* Bulk import row delete button hover (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.bulk-row-delete-btn:hover{background:rgba(220,38,38,.1)}

/* Workspace-selector "View Plans" button hover (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.workspace-pricing-btn:hover{border-color:rgba(255,255,255,.5);color:#fff}

/* Login-selector Team/Portal card hover lift (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.login-sel-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}

/* Header Preferences menu item hover (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.hdr-menu-item:hover{background:var(--bg)}

/* Pricing screen Stripe "Get Started" button hovers (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.stripe-btn-basic:hover{background:rgba(255,255,255,.18)}
.stripe-btn-pro:hover{background:#1d4ed8}
.stripe-btn-enterprise:hover{background:rgba(124,58,237,.45)}

/* Password show/hide eye-icon button hover (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.pw-vis-toggle:hover{opacity:1}

/* _abtn() "alert" variant hover (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.abtn-alert:hover{background:#0f766e!important}

/* Cost tab: Assessor/Maps/GIS link hover (darker green variant) (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.abtn-costtab-green:hover{background:#2d6a4f!important}

/* Cost tab: tax receipt upload label hover (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.tax-receipt-upload-label:hover{border-color:#2563eb;color:#2563eb}

/* Lawn service contractor suggestion dropdown row hover (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.lawn-suggest-row:hover{background:#f0fdf4}

/* Property Package modal address suggestion dropdown row hover (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.pkg-suggest-row:hover{background:var(--bg)}

/* Generic address/county/state suggestion dropdown row hover (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.suggest-drop-row:hover{background:var(--bg)}

/* Shared property-card gold action button + green external link hover, used by _abtn()/_alink() (js/utils/dom.js) and duplicated card markup in js/cost.js (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
/* !important required: these elements also carry an inline background style, which otherwise always wins over a stylesheet :hover rule regardless of specificity */
.abtn-gold:hover{background:#dfa620!important}
.alink-green:hover{background:#3a8a65!important}

/* Cost tab: Assessor/Maps/GIS link hover, distinct darker-green variant from .alink-green (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.cost-tab-alink:hover{background:#2d6a4f!important}

/* Cost tab: Add-Year dropdown menu item hover (was inline onmouseenter/onmouseleave — CSP unsafe-inline cleanup) */
.tax-year-menu-item:hover{background:var(--bg)!important}

/* Ready to Deploy (passive) tab: card action button + Assessor/Maps/GIS link hover (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.passive-btn:hover{background:#065f46!important}
.passive-link:hover{background:#047857!important}

/* Listing modal: "Upload Listing Contract" label hover (was inline onmouseover/onmouseout — CSP unsafe-inline cleanup) */
.listing-contract-upload-label:hover{border-color:var(--primary)!important;color:var(--primary)!important}