/* ==========================================================================
   compat.css — the bridge layer.
   ==========================================================================

   WHAT THIS IS FOR
   Your pages are already marked up with two vocabularies:
     1. Tailwind utilities (text-gray-500, rounded-lg, p-6 …) — 187 of them,
        served by cdn.tailwindcss.com, which compiles in the browser on every
        page load.
     2. Your own component classes (.card, .metric-card, .rating-gauge,
        .service-card, .wv-* …) — styled by the 1,125-line inline <style> block.

   Rather than rewrite thousands of class attributes and risk losing features,
   this file re-implements BOTH vocabularies on top of the app.css design
   tokens. Your markup stays byte-for-byte identical; only the appearance
   changes. That means a feature cannot disappear in a restyle — there is
   nothing to accidentally leave out.

   It also lets the Tailwind CDN be removed entirely, and works for all 15
   pages that use it, not just the dashboard.

   LOAD ORDER:  app.css  →  compat.css
   ========================================================================== */

/* ==========================================================================
   PART 1 — TAILWIND UTILITIES, REMAPPED TO THE DESIGN TOKENS
   Only the utilities actually used are defined. Colours resolve to tokens, so
   both light and dark themes work with no markup changes.
   ========================================================================== */

/* --- layout ------------------------------------------------------------- */
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.block{display:block}
.hidden{display:none}
.flex-col{flex-direction:column}
.flex-1{flex:1 1 0%;min-width:0}
.flex-shrink-0{flex-shrink:0}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.text-center{text-align:center}
.text-right{text-align:right}
.mx-auto{margin-left:auto;margin-right:auto}
.relative{position:relative}
.absolute{position:absolute}
.overflow-hidden{overflow:hidden}
.overflow-y-auto{overflow-y:auto}
.w-full{width:100%}
.h-full{height:100%}
.cursor-pointer{cursor:pointer}
.transition,.transition-all{transition:all var(--med)}
.duration-500{transition-duration:.5s}
.top-1\/2{top:50%}
.right-2{right:8px}
.-translate-y-1\/2{transform:translateY(-50%)}

.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.gap-1{gap:4px} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-6{gap:24px}

.p-1{padding:4px} .p-2{padding:8px} .p-3{padding:12px}
.p-4{padding:16px} .p-5{padding:20px} .p-6{padding:24px}
.px-4{padding-left:16px;padding-right:16px}
.px-6{padding-left:24px;padding-right:24px}
.py-2{padding-top:8px;padding-bottom:8px}
.py-3{padding-top:12px;padding-bottom:12px}
.py-4{padding-top:16px;padding-bottom:16px}
.py-6{padding-top:24px;padding-bottom:24px}
.py-8{padding-top:32px;padding-bottom:32px}
.py-12{padding-top:48px;padding-bottom:48px}
.pt-2{padding-top:8px} .pb-2{padding-bottom:8px}
.pb-4{padding-bottom:16px} .pr-2{padding-right:8px}

.mb-0{margin-bottom:0} .mb-1{margin-bottom:4px} .mb-2{margin-bottom:8px}
.mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px} .mb-6{margin-bottom:24px}
.mt-0\.5{margin-top:2px} .mt-1{margin-top:4px} .mt-2{margin-top:8px}
.mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-6{margin-top:24px}
.mr-2{margin-right:8px}

.space-y-1 > * + *{margin-top:4px}
.space-y-2 > * + *{margin-top:8px}
.space-y-3 > * + *{margin-top:12px}
.space-y-4 > * + *{margin-top:16px}

.w-6{width:24px} .w-10{width:40px} .w-12{width:48px} .w-14{width:56px} .w-16{width:64px}
.h-2{height:8px} .h-3{height:12px} .h-6{height:24px} .h-10{height:40px}
.h-12{height:48px} .h-14{height:56px} .h-16{height:64px} .h-20{height:80px}
.max-h-32{max-height:128px} .max-h-56{max-height:224px} .max-h-64{max-height:256px}

/* --- type -------------------------------------------------------------- */
.text-xs{font-size:11.5px;line-height:1.45}
.text-sm{font-size:13px;line-height:1.5}
.text-lg{font-size:16.5px;line-height:1.35;letter-spacing:-.02em}
.text-xl{font-size:19px;line-height:1.3;letter-spacing:-.028em}
.text-2xl{font-size:24px;line-height:1.2;letter-spacing:-.035em}
.text-6xl{font-size:52px;line-height:1.02;letter-spacing:-.045em}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.uppercase{text-transform:uppercase}

/* --- colour: greys map onto the text scale ------------------------------ */
.text-gray-400{color:var(--text-3)}
.text-gray-500{color:var(--text-3)}
.text-gray-600{color:var(--text-2)}
.text-gray-700{color:var(--text-2)}
.text-gray-800{color:var(--text)}
.text-gray-900{color:var(--text)}
.text-white{color:#FAFAFA}
.text-white\/60{color:rgba(250,250,250,.6)}
.text-white\/70{color:rgba(250,250,250,.7)}
.text-white\/80{color:rgba(250,250,250,.8)}

/* Money and status keep their meaning: green up, red down, amber attention. */
.text-green-600,.text-green-700,.text-emerald-600{color:var(--gain)}
.text-green-300{color:var(--gain)}
.text-red-500,.text-red-600,.text-red-700,.text-rose-600{color:var(--loss)}
.text-red-300{color:var(--loss)}
.text-amber-500,.text-amber-600,.text-amber-700,.text-orange-500{color:var(--flag)}
.text-blue-200,.text-blue-300{color:var(--info)}
.text-blue-600,.text-blue-700,.text-blue-900{color:var(--info)}

.bg-white{background:var(--surface)}
.bg-gray-50,.bg-gray-100{background:var(--surface-2)}
.bg-gray-200{background:var(--surface-3)}
.bg-white\/10{background:rgba(255,255,255,.1)}
.bg-white\/20{background:rgba(255,255,255,.2)}
.bg-blue-50,.bg-blue-100{background:var(--info-soft)}
.bg-green-100,.bg-emerald-50{background:var(--gain-soft)}
.bg-red-100{background:var(--loss-soft)}
.bg-amber-50,.bg-amber-100{background:var(--flag-soft)}
.bg-blue-500{background:var(--info)}
.bg-green-500{background:var(--gain)}
.bg-red-500{background:var(--loss)}
.bg-amber-500{background:var(--flag)}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--surface-2),var(--surface-3))}
.from-rose-500,.to-rose-600{--x:0}   /* gradient stops are neutralised on purpose */

.border{border:1px solid var(--hair)}
.border-0{border:0}
.border-2{border-width:2px;border-style:solid;border-color:var(--hair-2)}
.border-gray-200{border-color:var(--hair)}
.border-dashed{border-style:dashed}
.border-l-4{border-left:3px solid var(--hair-2)}
.border-blue-500{border-color:var(--info)}

.rounded-lg{border-radius:var(--r-md)}
.rounded-xl{border-radius:var(--r-lg)}
.rounded-2xl{border-radius:var(--r-xl)}
.rounded-full{border-radius:var(--r-pill)}
.shadow-lg{box-shadow:var(--shadow-sm)}

/* --- interaction ------------------------------------------------------- */
.hover\:bg-gray-100:hover{background:var(--surface-2)}
.hover\:bg-blue-50:hover{background:var(--info-soft)}
.hover\:bg-white\/30:hover{background:rgba(255,255,255,.3)}
.hover\:bg-white\/90:hover{background:var(--surface)}
.hover\:border-blue-300:hover{border-color:var(--info)}
.hover\:text-blue-600:hover,.hover\:text-blue-700:hover{color:var(--info)}
.hover\:text-gray-600:hover{color:var(--text-2)}
.hover\:text-white:hover{color:var(--text)}
.hover\:underline:hover{text-decoration:underline}
.hover\:scale-105:hover{transform:translateY(-2px)}
.hover\:shadow-xl:hover{box-shadow:var(--shadow)}
.focus\:ring-2:focus,.focus\:ring-blue-500:focus{outline:2px solid var(--info);outline-offset:1px}
.focus\:border-transparent:focus{border-color:transparent}

/* --- responsive variants actually used -------------------------------- */
@media(min-width:640px){ .sm\:flex{display:flex} }
@media(min-width:768px){
  .md\:flex-row{flex-direction:row}
  .md\:items-center{align-items:center}
  .md\:justify-between{justify-content:space-between}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:1024px){
  .lg\:flex-row{flex-direction:row}
  .lg\:items-center{align-items:center}
  .lg\:justify-between{justify-content:space-between}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:col-span-2{grid-column:span 2/span 2}
  .lg\:text-3xl{font-size:29px;letter-spacing:-.045em}
  .lg\:w-48{width:192px}
  .lg\:w-64{width:256px}
}

/* Below tablet, force every multi-column grid to a single column. Your pages
   used lg:/md: prefixes inconsistently, which left some grids stuck at 3 or 4
   columns on a phone. */
@media(max-width:860px){
  .grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}
  .p-6{padding:16px} .p-5{padding:16px}
  .px-6{padding-left:16px;padding-right:16px}
  .text-6xl{font-size:38px}
  .text-2xl{font-size:21px}
}

/* ==========================================================================
   PART 2 — YOUR COMPONENT CLASSES, REDESIGNED
   Same class names, same markup, new appearance.
   ========================================================================== */

/* --- page frame -------------------------------------------------------- */
.dashboard-container{display:block;width:100%}
.dashboard-header{
  background:var(--surface);border-radius:var(--r-lg);padding:var(--s5);
  margin-bottom:var(--s4);box-shadow:var(--shadow-sm);color:var(--text);
}
.dashboard-header h1{font-size:26px;font-weight:800;letter-spacing:-.045em}
.dashboard-header .text-white,.dashboard-header .text-white\/70,
.dashboard-header .text-white\/80,.dashboard-header .text-white\/60{color:var(--text-2)}
.dashboard-header .text-white{color:var(--text)}

.section-title{
  display:flex;align-items:center;gap:8px;
  font-size:16.5px;font-weight:700;letter-spacing:-.03em;color:var(--text);
  margin:0 0 var(--s4);
}
.section-title i{color:var(--text-3);font-size:17px}

/* --- generic card ------------------------------------------------------ */
.card{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);color:var(--text);
  border:0;overflow:hidden;
}

/* --- metric tiles ------------------------------------------------------ */
.metric-card{
  background:var(--surface-2);border-radius:var(--r-md);padding:var(--s4);
  border:0;transition:background var(--fast);
}
.metric-card:hover{background:var(--surface-3)}
.metric-value{
  font-size:22px;font-weight:700;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.stat-card-hero{
  background:var(--surface-2);border-radius:var(--r-md);padding:var(--s5);
}

/* --- portfolio rating -------------------------------------------------- */
.portfolio-rating-card{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);color:var(--text);overflow:hidden;
}
.portfolio-rating-card .text-white,
.portfolio-rating-card h2,.portfolio-rating-card h3{color:var(--text)}
.rating-gauge{position:relative;display:grid;place-items:center}
.rating-gauge-bg{stroke:var(--surface-3)}
.rating-gauge-fill{stroke:var(--gain);transition:stroke-dashoffset .8s ease}
.rating-grade{display:grid;place-items:center;text-align:center}
.rating-grade-letter{
  font-size:40px;font-weight:800;letter-spacing:-.05em;color:var(--text);line-height:1;
}
.rating-grade-score{
  font-size:12.5px;font-weight:600;color:var(--text-3);
  font-variant-numeric:tabular-nums;margin-top:2px;
}
.rating-breakdown-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--hair);
}
.rating-breakdown-item:last-child{border-bottom:0}
.rating-breakdown-label{font-size:13px;color:var(--text-2);font-weight:500}
.rating-breakdown-value{
  margin-left:auto;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.rating-status-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:var(--text-3)}
.rating-status-dot.excellent{background:var(--gain)}
.rating-status-dot.good{background:var(--gain);opacity:.65}
.rating-status-dot.fair{background:var(--flag)}
.rating-status-dot.poor{background:var(--loss)}

/* Strategy selector behaves as a segmented control. */
.strategy-btn{
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.01em;
  padding:7px 13px;border-radius:8px;border:1px solid var(--hair-2);
  background:var(--surface-2);color:var(--text-2);cursor:pointer;
  transition:background var(--fast),color var(--fast),border-color var(--fast);
}
.strategy-btn:hover{background:var(--surface-3);color:var(--text)}
.strategy-btn.active,.strategy-btn.selected{
  background:var(--inv-bg);color:var(--inv-fg);border-color:transparent;
}

/* --- tabs -------------------------------------------------------------- */
.tab-pills,.chart-tabs{
  display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap;
}
.tab-pill,.chart-tab,.sort-btn{
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.01em;
  padding:6px 13px;border:0;border-radius:7px;background:none;color:var(--text-2);
  cursor:pointer;transition:background var(--fast),color var(--fast);
}
.tab-pill:hover,.chart-tab:hover,.sort-btn:hover{color:var(--text)}
.tab-pill.active,.chart-tab.active,.sort-btn.active{
  background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);
}
/* .tab-content is a tab PANEL: hidden unless marked .active. That is the
   convention the properties modals use ($('.tab-content').removeClass('active')
   then addClass on the target). I briefly flipped this to display:block while
   chasing a dashboard issue — but the dashboard does not use this class at all,
   and the flip silently broke the add/edit property tabs. */
.tab-content{display:none}
.tab-content.active{display:block}
.tab-content.hidden{display:none!important}

/* --- lists: tasks, activity, insights ---------------------------------- */
.task-item,.activity-item,.insight-card{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 0;border-bottom:1px solid var(--hair);
}
.task-item:last-child,.activity-item:last-child,.insight-card:last-child{border-bottom:0}
.task-item.completed{opacity:.5}
.task-item.completed .text-gray-800{text-decoration:line-through}
.activity-icon,.insight-icon,.icon-wrap,.empty-icon{
  width:30px;height:30px;flex:0 0 30px;border-radius:9px;
  display:grid;place-items:center;background:var(--surface-3);color:var(--text-2);
}
.empty-icon{width:44px;height:44px;flex:0 0 44px;border-radius:13px;margin:0 auto var(--s4)}
.task-checkbox{
  width:17px;height:17px;flex:0 0 17px;margin-top:2px;
  accent-color:var(--gain);cursor:pointer;
}
.empty-state{padding:var(--s7) var(--s5);text-align:center;color:var(--text-2)}
.empty-state h3{color:var(--text);margin-bottom:5px}

/* --- occupancy bars ---------------------------------------------------- */
.occupancy-item{margin-bottom:var(--s4)}
.occupancy-item:last-child{margin-bottom:0}
.occupancy-label{
  display:flex;align-items:baseline;gap:8px;
  font-size:13px;font-weight:500;color:var(--text-2);margin-bottom:6px;
}
.occupancy-bar,.occupancy-progress{
  height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;
}
.occupancy-fill{height:100%;border-radius:var(--r-pill);background:var(--text-2);transition:width .6s ease}
.occupancy-fill.occupied,.occupancy-item.occupied .occupancy-fill{background:var(--gain)}
.occupancy-fill.vacant,.occupancy-item.vacant .occupancy-fill{background:var(--loss)}
.occupancy-fill.construction,.occupancy-item.construction .occupancy-fill{background:var(--flag)}

/* --- badges ------------------------------------------------------------ */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;letter-spacing:-.005em;
  padding:2px 8px;border-radius:6px;background:var(--surface-3);color:var(--text-2);
}
.badge-success{background:var(--gain-soft);color:var(--gain)}
.badge-danger{background:var(--loss-soft);color:var(--loss)}
.badge-warning{background:var(--flag-soft);color:var(--flag)}
.badge-info,.badge-new{background:var(--info-soft);color:var(--info)}
.badge-free{background:var(--gain-soft);color:var(--gain)}
.badge-popular{background:var(--inv-bg);color:var(--inv-fg)}
.badge-video{background:var(--flag-soft);color:var(--flag)}

/* --- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:-.015em;
  padding:9px 15px;border-radius:10px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--hair-2);background:transparent;color:var(--text);
  text-decoration:none;transition:background var(--fast),opacity var(--fast);
}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--inv-bg);color:var(--inv-fg);border-color:transparent}
.btn-primary:hover{opacity:.88;background:var(--inv-bg)}
.btn-outline{background:transparent;border-color:var(--hair-2);color:var(--text)}

/* --- services ("Grow Your Wealth") ------------------------------------- */
.grow-wealth-section{
  background:var(--surface);border-radius:var(--r-lg);
  padding:var(--s5);margin-bottom:var(--s4);box-shadow:var(--shadow-sm);
}
.grow-wealth-header{margin-bottom:var(--s5)}
.grow-wealth-title{font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--text);margin:0}
.grow-wealth-subtitle{font-size:13.5px;color:var(--text-2);margin-top:4px}
.service-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:var(--s3)}
.service-card{
  background:var(--surface-2);border-radius:var(--r-md);padding:var(--s4);
  border:0;position:relative;transition:background var(--fast),transform var(--fast);
  display:flex;flex-direction:column;gap:8px;
}
.service-card:hover{background:var(--surface-3);transform:translateY(-2px)}
.service-icon{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface);color:var(--text-2);font-size:17px;
}
.service-title{font-size:14.5px;font-weight:700;letter-spacing:-.025em;color:var(--text);margin:0}
.service-description{font-size:12.5px;color:var(--text-2);line-height:1.45;margin:0}
.service-meta{font-size:11.5px;color:var(--text-3)}
.service-badge{
  position:absolute;top:12px;right:12px;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;background:var(--surface);color:var(--text-2);
}
.service-footer{margin-top:auto;padding-top:var(--s3)}
.service-cta{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:600;color:var(--text);text-decoration:none;
}
.service-cta:hover{text-decoration:underline}
/* Per-service accents, kept subtle. */
.card-llc .service-icon{background:var(--gain-soft);color:var(--gain)}
.card-credit .service-icon{background:var(--info-soft);color:var(--info)}
.card-funding .service-icon{background:var(--flag-soft);color:var(--flag)}
.card-loans .service-icon{background:var(--info-soft);color:var(--info)}
.card-partnership .service-icon{background:var(--surface-3);color:var(--text-2)}

/* --- modals ------------------------------------------------------------ */
/* Hidden by default; your JS reveals a modal by adding .active and closes it
   by removing .active (21 removes / 14 adds across this page). Getting this
   backwards made every modal open on load with no way to dismiss it. */
.modal-overlay{
  position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(3px);
  z-index:999999;display:none;place-items:center;padding:var(--s4);
}
.modal-overlay.active{display:grid}
.modal-overlay.hidden,.modal-overlay[hidden]{display:none!important}
.modal-content{
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow);
  width:min(680px,100%);max-height:calc(100vh - 64px);
  display:flex;flex-direction:column;overflow:hidden;
}
.modal-header{
  padding:var(--s5) var(--s5) var(--s4);border-bottom:1px solid var(--hair);
  display:flex;align-items:center;gap:var(--s3);
}
.modal-header h3{font-size:17px;font-weight:700;letter-spacing:-.03em;color:var(--text);margin:0}
.modal-body{padding:var(--s5);overflow-y:auto}
.modal-footer{
  padding:var(--s4) var(--s5);border-top:1px solid var(--hair);
  display:flex;gap:var(--s2);justify-content:flex-end;
}
@media(max-width:860px){
  .modal-overlay{place-items:end;padding:0}
  .modal-content{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .modal-footer{position:sticky;bottom:0;background:var(--surface)}
  .modal-footer .btn{flex:1}
}

/* --- welcome video overlay -------------------------------------------- */
/* --------------------------------------------------------------------------
   Welcome / tour video                                    (rebuilt Aug 2026)
   The old version put the brand NAME inside a 44px square logo box, so the
   text spilled out of it; styled .wv-message as if it were the paragraph when
   it actually wraps a heading and a paragraph, so both sat unpadded against
   the edge; and left the progress bar outside the controls overlay, where it
   rendered as a stray line under the video.
   -------------------------------------------------------------------------- */
.welcome-video-overlay{
  position:fixed;inset:0;z-index:999999;background:rgba(6,6,8,.92);
  backdrop-filter:blur(6px);display:grid;place-items:center;padding:var(--s4);
}
.welcome-video-overlay.hidden,.welcome-video-overlay[hidden]{display:none!important}

.wv-container{
  background:var(--surface);border:1px solid var(--hair-2);
  border-radius:var(--r-lg,14px);box-shadow:0 30px 80px rgba(0,0,0,.55);
  width:min(720px,100%);max-height:calc(100dvh - 48px);overflow:hidden;
  display:flex;flex-direction:column;
}

/* header: brand on the left, time remaining, close on the right */
.wv-header{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--hair);
}
.wv-brand{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 auto}
.wv-logo{
  flex:0 0 auto;width:28px;height:28px;border-radius:8px;overflow:hidden;
  background:var(--surface-2);display:grid;place-items:center;
}
.wv-logo img{width:100%;height:100%;object-fit:cover;display:block}
.wv-brand-name{font-size:14px;font-weight:650;letter-spacing:-.02em;color:var(--text)}
.wv-timer{
  flex:0 0 auto;font-size:12.5px;color:var(--text-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.wv-x{
  flex:0 0 auto;width:30px;height:30px;border:1px solid var(--hair);
  border-radius:8px;background:transparent;color:var(--text-2);
  font-size:19px;line-height:1;cursor:pointer;
}
.wv-x:hover{background:var(--surface-2);color:var(--text)}

.wv-message{flex:0 0 auto;padding:18px 18px 14px}
.wv-message h1{
  margin:0 0 6px;font-size:20px;font-weight:680;letter-spacing:-.025em;color:var(--text);
}
.wv-message p{margin:0;max-width:56ch;font-size:13.5px;line-height:1.6;color:var(--text-2)}

.wv-video-wrap{
  flex:0 1 auto;position:relative;background:#000;aspect-ratio:16/9;
  min-height:0;overflow:hidden;
}
.wv-video{width:100%;height:100%;object-fit:contain;display:block}

/* the progress bar belongs INSIDE the overlay, beside the play button */
.wv-controls{
  position:absolute;inset:auto 0 0 0;padding:12px 14px;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
  display:flex;align-items:center;gap:12px;
}
.wv-play-btn{
  flex:0 0 auto;width:40px;height:40px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:#FAFAFA;color:#0B0B0D;font-size:20px;
}
.wv-progress-wrap{
  flex:1 1 auto;height:5px;border-radius:999px;
  background:rgba(255,255,255,.25);overflow:hidden;
}
.wv-progress-bar{height:100%;background:#FAFAFA;width:0;transition:width .2s linear}

.wv-foot{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-top:1px solid var(--hair);
}
.wv-foot-note{flex:1 1 auto;margin:0;font-size:12.5px;color:var(--text-3)}
.wv-btn{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:inherit;font-size:13.5px;font-weight:650;
  padding:9px 18px;border-radius:10px;cursor:pointer;border:0;
  background:var(--inv-bg);color:var(--inv-fg);
}
.wv-container .wv-btn[disabled]{opacity:.4;cursor:not-allowed}

@media (max-width:560px){
  .welcome-video-overlay{padding:0}
  .wv-container{width:100%;height:100dvh;max-height:none;border-radius:0;border:0}
  .wv-message{padding:14px 14px 12px}
  .wv-message h1{font-size:18px}
}

/* --- map info window (also used by other pages) ----------------------- */
.enhanced-map-info-window{font-family:var(--font);width:232px}
.info-window-content{padding:12px 13px 13px}
.info-window-address{font-size:14px;font-weight:700;letter-spacing:-.02em;color:#14162B;line-height:1.25}
.info-window-btn{
  display:block;width:100%;text-align:center;margin-top:11px;padding:9px;
  border:0;border-radius:9px;background:#0B0B0D;color:#fff;
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
}
.property-features{display:flex;gap:12px;margin-top:7px;font-size:12px;color:#5C5C66}
.property-financials{display:flex;gap:16px;margin-top:9px;font-variant-numeric:tabular-nums}
.property-value{font-weight:700;color:#14162B;font-size:14px}
.property-cashflow{font-weight:700;font-size:14px}
.property-cashflow.positive{color:#12A06A}
.property-cashflow.negative{color:#DE3C42}

/* --- bug report form -------------------------------------------------- */
.severity-option{
  padding:7px 12px;border-radius:8px;border:1px solid var(--hair-2);
  background:var(--surface-2);color:var(--text-2);cursor:pointer;
  font-size:13px;font-weight:600;transition:background var(--fast),color var(--fast);
}
.severity-option:hover{background:var(--surface-3);color:var(--text)}
.severity-option.selected,.severity-option.active{
  background:var(--inv-bg);color:var(--inv-fg);border-color:transparent;
}

/* --- charts: keep ApexCharts legible in both themes ------------------- */
.apexcharts-canvas{color:var(--text)}
.apexcharts-text,.apexcharts-legend-text{fill:var(--text-2)!important;color:var(--text-2)!important}
.apexcharts-gridline{stroke:var(--hair)!important}
.apexcharts-tooltip{
  background:var(--surface)!important;border:1px solid var(--hair-2)!important;
  box-shadow:var(--shadow)!important;color:var(--text)!important;
}
.apexcharts-tooltip-title{background:var(--surface-2)!important;border-bottom:1px solid var(--hair)!important}
.apexcharts-xaxistooltip,.apexcharts-yaxistooltip{
  background:var(--surface)!important;border-color:var(--hair-2)!important;color:var(--text)!important;
}

/* --- boxicons sizing (used throughout your markup) -------------------- */
.bx{vertical-align:middle;line-height:1}

/* --- inputs inside legacy markup -------------------------------------- */
input[type="text"],input[type="email"],input[type="number"],input[type="date"],
input[type="file"],select,textarea{
  font-family:inherit;
}
input[type="text"],input[type="email"],input[type="number"],
input[type="date"],select,textarea{
  background:var(--surface-2);border:1px solid var(--hair-2);color:var(--text);
  border-radius:10px;padding:10px 13px;font-size:14.5px;width:100%;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--text-3);background:var(--surface)}

/* --- status classes used on rows and cards ----------------------------- */
.occupied{color:var(--gain)}
.vacant{color:var(--loss)}
.construction{color:var(--flag)}
.tenant{color:var(--text-2)}
.property{color:inherit}
.has-video{position:relative}
/* Generic .active is used on tabs, buttons and rows. Keep it neutral here so
   the component-specific rules above win; only add a subtle emphasis. */
.active{}

/* ==========================================================================
   PART 3 — NEW DASHBOARD SECTIONS
   Header, headline figures and property cards. These are additions, not
   replacements: nothing that existed was removed to make room.
   ========================================================================== */

/* --- page header (replaces the old gradient hero bar) ------------------- */
.dash-top{
  display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s6) 0 var(--s5);
}
.dash-top-actions{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap}

/* --- headline figures -------------------------------------------------- */
.figstrip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hair);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);margin-bottom:var(--s4);
}
.figstrip-cell{background:var(--surface);padding:var(--s5)}
.figstrip-l{display:block;font-size:12.5px;color:var(--text-3);font-weight:500}
.figstrip-v{
  display:block;margin-top:5px;font-size:27px;font-weight:700;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text);
}

/* --- property cards ---------------------------------------------------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.pcard{
  display:block;text-decoration:none;color:inherit;
  background:var(--surface-2);border-radius:var(--r-md);overflow:hidden;
  transition:transform var(--med),box-shadow var(--med);
}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.pcard-media{position:relative;aspect-ratio:3/2;background:var(--surface-3);overflow:hidden}
.pcard-media > img{width:100%;height:100%;object-fit:cover;display:block}
.pcard-noimg{display:grid;place-items:center;width:100%;height:100%;color:var(--text-3)}
.pcard-tag,.pcard-count{
  position:absolute;font-size:10.5px;font-weight:700;padding:3px 8px;
  border-radius:var(--r-pill);backdrop-filter:blur(10px);
  background:rgba(10,10,12,.62);color:#FAFAFA;border:1px solid rgba(255,255,255,.14);
}
.pcard-tag{top:9px;left:9px}
.pcard-tag.is-occ{background:rgba(15,107,69,.82);border-color:rgba(255,255,255,.18)}
.pcard-tag.is-vac{background:rgba(158,43,43,.82);border-color:rgba(255,255,255,.18)}
.pcard-count{bottom:9px;right:9px}
.pcard-body{padding:var(--s4)}
.pcard-addr{font-size:14.5px;font-weight:700;letter-spacing:-.025em;line-height:1.3}
.pcard-meta{font-size:12px;color:var(--text-3);margin-top:3px}
.pcard-foot{
  display:flex;align-items:baseline;gap:var(--s2);margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--hair);
}
.pcard-val{font-size:17px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pcard-cf{margin-left:auto;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}

.dash-section{margin-bottom:var(--s4)}

/* --- the old gradient hero bar is gone; neutralise its leftovers -------- */
.dashboard-header{display:none}

/* --- rating gauge: the SVG circles were rendering as a filled black disc,
       because no fill was declared and the browser defaults to black. ----- */
.rating-gauge svg circle{fill:none}
.rating-gauge-bg{fill:none;stroke:var(--surface-3)}
.rating-gauge-fill{fill:none;stroke:var(--gain)}

/* --- charts must not inherit a fixed light background ------------------ */
.apexcharts-canvas,.apexcharts-svg{background:transparent!important}

@media(max-width:1180px){
  .figstrip{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .dash-top{padding:var(--s5) 0 var(--s4)}
  .dash-top-actions{margin-left:0;width:100%}
  .dash-top-actions .btn{flex:1}
  .figstrip{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:1fr}
  .figstrip-v{font-size:22px}
}

/* ==========================================================================
   PART 4 — REWRITTEN DASHBOARD SECTIONS
   These replace the old markup entirely, so nothing here has to fight
   assumptions from the previous design (dark-card text, fixed-height scroll
   boxes, underlined links).
   ========================================================================== */

/* Links inside app panels are never underlined by default. */
.panel a,.pcard,.svc,.act,.more{text-decoration:none}
.panel a:hover{text-decoration:none}

/* --- grids -------------------------------------------------------------- */
.dash-3{grid-template-columns:repeat(3,1fr)}
.dash-2{grid-template-columns:repeat(2,1fr)}
.dash-side{grid-template-columns:1.55fr 1fr}

/* --- charts: fixed height, never a scrollbar --------------------------- */
.chart-box{width:100%;height:270px}
.chart-box-sm{height:190px}

/* --- segmented controls span the panel where needed ------------------- */
.seg-full{display:flex;width:100%}
.seg-full button{flex:1}
.strategy-btn{
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.01em;
  padding:7px 12px;border:0;border-radius:7px;background:none;
  color:var(--text-2);cursor:pointer;transition:background var(--fast),color var(--fast);
}
.strategy-btn:hover{color:var(--text)}
.strategy-btn[aria-selected="true"],
.strategy-btn.active,
.strategy-btn.selected{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}

/* --- grade ring -------------------------------------------------------- */
.grade{text-align:center;padding:var(--s5) 0 var(--s4)}
.grade-ring{
  --pct:0;
  width:132px;height:132px;margin:0 auto;border-radius:50%;
  display:grid;place-content:center;position:relative;
  background:
    conic-gradient(var(--gain) calc(var(--pct) * 1%), var(--surface-3) 0);
}
.grade-ring::after{
  content:"";position:absolute;inset:11px;border-radius:50%;background:var(--surface);
}
.grade-letter{position:relative;font-size:38px;font-weight:800;letter-spacing:-.05em;line-height:1}
.grade-score{position:relative;font-size:12.5px;font-weight:600;color:var(--text-3);
  font-variant-numeric:tabular-nums;margin-top:3px}
.grade-desc{font-size:13px;color:var(--text-2);margin:var(--s3) 0 0}

/* --- rating breakdown -------------------------------------------------- */
.bd-list{list-style:none;margin:0;padding:0}
.bd-row{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--hair)}
.bd-row:last-child{border-bottom:0}
.bd-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:var(--text-3)}
.bd-excellent{background:var(--gain)}
.bd-good{background:var(--gain);opacity:.6}
.bd-fair{background:var(--flag)}
.bd-poor{background:var(--loss)}
.bd-name{font-size:13px;color:var(--text-2);font-weight:500}
.bd-val{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums}

/* --- insights: a list, not a scroll box -------------------------------- */
.ins-list{list-style:none;margin:0;padding:0}
.ins{display:flex;gap:10px;padding:13px var(--s5);border-bottom:1px solid var(--hair);align-items:flex-start}
.ins:last-child{border-bottom:0}
.ins-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;margin-top:6px}
.ins-gain{background:var(--gain)} .ins-loss{background:var(--loss)} .ins-flag{background:var(--flag)}
.ins-body{min-width:0}
.ins-t{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.02em}
.ins-d{display:block;font-size:12.5px;color:var(--text-2);margin-top:2px;line-height:1.45}

/* --- occupancy bars ---------------------------------------------------- */
.occ-list{list-style:none;margin:var(--s4) 0 0;padding:0}
.occ{display:block;margin-bottom:var(--s4)}
.occ:last-child{margin-bottom:0}
.occ-top{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:6px}
.occ-l{font-size:13px;font-weight:500;color:var(--text-2)}
.occ-n{margin-left:auto;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.occ-bar{display:block;height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.occ-fill{display:block;height:100%;border-radius:var(--r-pill)}
.occ-gain{background:var(--gain)} .occ-loss{background:var(--loss)} .occ-flag{background:var(--flag)}

/* --- projection rates -------------------------------------------------- */
.proj-rates{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)}
.proj{background:var(--surface-2);border-radius:var(--r-md);padding:var(--s3);text-align:center}
.proj-l{display:block;font-size:11.5px;color:var(--text-3);font-weight:600}
.proj-v{display:block;font-size:15px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}

/* --- task / lease / invoice lists (JS injects rows) -------------------- */
.tk-list{display:flex;flex-direction:column}
.tk-list > *{padding:11px var(--s5);border-bottom:1px solid var(--hair)}
.tk-list > *:last-child{border-bottom:0}
/* Checkboxes must read as checkboxes. */
.task-checkbox,.tk-list input[type="checkbox"]{
  width:17px;height:17px;flex:0 0 17px;border-radius:5px;
  border:1.5px solid var(--hair-2);background:var(--surface-2);
  appearance:none;-webkit-appearance:none;cursor:pointer;position:relative;
  transition:background var(--fast),border-color var(--fast);
}
.task-checkbox:hover,.tk-list input[type="checkbox"]:hover{border-color:var(--text-3)}
.task-checkbox:checked,.tk-list input[type="checkbox"]:checked{background:var(--gain);border-color:var(--gain)}
.task-checkbox:checked::after,.tk-list input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:4px;top:1px;width:7px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}

/* --- recent activity --------------------------------------------------- */
.act-list{list-style:none;margin:0;padding:0}
.act{display:flex;gap:11px;align-items:center;padding:12px var(--s5);border-bottom:1px solid var(--hair)}
.act:last-child{border-bottom:0}
.act-ico{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center}
.act-prop{background:var(--info-soft);color:var(--info)}
.act-tenant{background:var(--gain-soft);color:var(--gain)}
.act-body{min-width:0;flex:1}
.act-t{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.02em}
.act-d{display:block;font-size:12px;color:var(--text-3);margin-top:1px}
.act-right{text-align:right;white-space:nowrap}
.act-v{display:block;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.act-when{display:block;font-size:11.5px;color:var(--text-3);margin-top:1px}

/* --- partner services -------------------------------------------------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.svc{
  display:flex;flex-direction:column;gap:7px;
  background:var(--surface-2);border-radius:var(--r-md);padding:var(--s4);
  color:inherit;transition:background var(--fast),transform var(--fast);
}
.svc:hover{background:var(--surface-3);transform:translateY(-2px)}
.svc-top{display:flex;align-items:center;gap:var(--s2)}
.svc-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface);color:var(--text-2)}
.svc-tag{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 7px;border-radius:5px}
.svc-free{background:var(--gain-soft);color:var(--gain)}
.svc-pop{background:var(--flag-soft);color:var(--flag)}
.svc-new{background:var(--info-soft);color:var(--info)}
.svc-t{font-size:14.5px;font-weight:700;letter-spacing:-.025em}
.svc-d{font-size:12.5px;color:var(--text-2);line-height:1.45}
.svc-go{margin-top:auto;padding-top:var(--s2);font-size:12.5px;font-weight:600;color:var(--text)}
.svc-go::after{content:" \2192"}

/* --- bug report form --------------------------------------------------- */
.sev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.sev{cursor:pointer;display:block}
.sev input{position:absolute;opacity:0;width:0;height:0}
.sev-b{
  display:block;padding:var(--s3) var(--s4);border-radius:var(--r-md);
  background:var(--surface-2);border:1.5px solid transparent;transition:border-color var(--fast),background var(--fast);
}
.sev:hover .sev-b{background:var(--surface-3)}
.sev.selected .sev-b{border-color:var(--text);background:var(--surface-2)}
.sev-t{display:block;font-size:13.5px;font-weight:600}
.sev-d{display:block;font-size:12px;color:var(--text-3);margin-top:1px}

.drop{
  display:grid;place-items:center;gap:5px;padding:var(--s6) var(--s4);
  border:1.5px dashed var(--hair-2);border-radius:var(--r-md);
  background:var(--surface-2);color:var(--text-3);cursor:pointer;
  transition:border-color var(--fast),background var(--fast);
}
.drop:hover{border-color:var(--text-3);background:var(--surface-3)}
.drop-t{font-size:13.5px;font-weight:600;color:var(--text)}
.drop-d{font-size:11.5px}
.drop-prev{margin-top:var(--s3);display:flex;align-items:center;gap:var(--s3)}
.drop-prev img{width:120px;height:80px;object-fit:cover;border-radius:var(--r-sm)}

/* --- responsive -------------------------------------------------------- */
@media(max-width:1180px){
  .dash-3,.dash-side,.dash-2{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .svc-grid,.sev-grid,.proj-rates{grid-template-columns:1fr}
  .chart-box{height:230px}
  .ins,.act,.bd-row{padding-left:var(--s4);padding-right:var(--s4)}
  .tk-list > *{padding-left:var(--s4);padding-right:var(--s4)}
}

/* ==========================================================================
   PART 5 — CORRECTIONS
   ========================================================================== */

/* .hidden must beat any layout rule that follows it. This is why the empty
   screenshot preview was visible: .drop-prev{display:flex} came later in the
   file and won on cascade order. */
.hidden{display:none!important}

/* --- property cards: spans inside <a> are inline by default, so
       aspect-ratio and the whole card layout collapsed. --------------------- */
.pcard{display:flex;flex-direction:column}
.pcard-media{display:block;width:100%;aspect-ratio:3/2;flex:0 0 auto}
.pcard-body{display:block;padding:var(--s4)}
.pcard-addr{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.025em;line-height:1.3}
.pcard-meta{display:block;font-size:12px;color:var(--text-3);margin-top:3px}
.pcard-foot{
  display:flex;align-items:baseline;gap:var(--s2);
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--hair);
}
.pcard-noimg{display:grid;place-items:center;width:100%;height:100%;color:var(--text-3)}
.pcard-tag.is-ref{background:rgba(200,150,20,.86);border-color:rgba(255,255,255,.18)}

/* --- equal-height cards left dead space under the short ones ------------ */
.dash-3,.dash-2,.dash-side{align-items:start}

/* --- severity: my .sev rules were being beaten by the older
       .severity-option rule, which painted the whole tile black and hid the
       label. Scope the old rule away and restate the new one. -------------- */
.severity-option.selected,.severity-option.active{background:none;color:inherit;border-color:transparent}
.sev.selected .sev-b,.sev.severity-option.selected .sev-b{
  background:var(--surface-2);border-color:var(--text);
}
.sev.selected .sev-t{color:var(--text)}
.sev.selected .sev-d{color:var(--text-2)}
.sev-b{padding:var(--s3) var(--s4)}

/* --- upload dropzone: stack icon above the text ------------------------- */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.drop .i{margin-bottom:6px}
.drop-prev{align-items:center}
.drop-prev img{width:120px;height:80px;object-fit:cover;border-radius:var(--r-sm);background:var(--surface-3)}

/* --- modals: wide enough for a 4-column metric grid, close button top-right */
.modal-content{width:min(1100px,100%)}
.modal-header{position:relative;padding-right:56px}
.modal-header > button,
.modal-header .btn,
#closeMetricsModal,#closeRatingModal,#closePropertyModal{
  position:absolute;top:50%;right:var(--s5);transform:translateY(-50%);
  width:32px;height:32px;padding:0;display:grid;place-items:center;
  border-radius:9px;border:1px solid var(--hair-2);background:var(--surface-2);
  color:var(--text-2);cursor:pointer;
}
#closeMetricsModal:hover,#closeRatingModal:hover,#closePropertyModal:hover{
  background:var(--surface-3);color:var(--text);
}
.modal-body .grid,.modal-body [class*="grid-cols"]{gap:var(--s3)}

/* --- map info window ---------------------------------------------------- */
.enhanced-map-info-window{width:236px;font-family:var(--font)}
.miw-img{width:100%;height:120px;object-fit:cover;display:block;background:#EDEDF1}
.miw-ph{
  width:100%;height:120px;display:grid;place-items:center;
  background:#EDEDF1;color:#8E8E99;
}
.info-window-content{padding:11px 12px 12px}
.info-window-address{font-size:13.5px;font-weight:700;letter-spacing:-.02em;color:#14162B;line-height:1.3}
.property-features{display:flex;gap:10px;margin-top:5px;font-size:11.5px;color:#5C5C66}
.property-financials{display:flex;gap:14px;margin-top:8px;font-variant-numeric:tabular-nums}
.property-value{font-weight:700;color:#14162B;font-size:13.5px}
.property-cashflow{font-weight:700;font-size:13.5px}
.property-cashflow.positive{color:#12A06A}
.property-cashflow.negative{color:#DE3C42}
.info-window-btn{
  display:block;width:100%;margin-top:10px;padding:8px;border:0;border-radius:8px;
  background:#0B0B0D;color:#fff;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
}

/* ==========================================================================
   PART 6 — CORRECTIONS ROUND 2
   ========================================================================== */

/* --- THE MISSING SCORE ---------------------------------------------------
   .grade-ring::after paints the inner disc, and generated content is painted
   AFTER the element's children — so the letter grade and score were sitting
   underneath it. They were rendered the whole time, just covered. --------- */
.grade-ring::after{z-index:0}
.grade-letter,.grade-score{position:relative;z-index:1}
.grade-ring{isolation:isolate}

/* --- MAP POPUP -----------------------------------------------------------
   Google gives .gm-style-iw-d an inline max-height and its own padding, which
   clipped everything under the photo and left a gap above it. ------------- */
.gm-style .gm-style-iw-c{
  padding:0!important;max-width:none!important;max-height:none!important;
  border-radius:14px!important;overflow:hidden!important;
  box-shadow:0 8px 28px rgba(0,0,0,.28)!important;
}
.gm-style .gm-style-iw-d{
  overflow:hidden!important;max-height:none!important;max-width:none!important;padding:0!important;
}
.gm-style .gm-style-iw-c > button.gm-ui-hover-effect{
  top:6px!important;right:6px!important;opacity:1!important;
  background:rgba(255,255,255,.9)!important;border-radius:50%!important;
  width:24px!important;height:24px!important;
}
.gm-style .gm-style-iw-c > button.gm-ui-hover-effect > span{margin:5px!important}
.enhanced-map-info-window{display:block;width:236px}

/* --- EQUAL CARD HEIGHTS, WITH SCROLL WHERE LISTS CAN GROW ---------------
   Rows stretch again so cards line up; anything that can grow without limit
   scrolls inside its card instead of stretching the whole row. ----------- */
.dash-3,.dash-2,.dash-side{align-items:stretch}
.dash-3 > .panel,.dash-2 > .panel,.dash-side > .panel{display:flex;flex-direction:column}
.dash-3 > .panel > .panel-pad,.dash-2 > .panel > .panel-pad{flex:1}

.ins-list,.tk-list,.act-list{overflow-y:auto;max-height:420px}
.tk-list{min-height:120px}

/* A quiet scrollbar rather than the browser default. */
.ins-list::-webkit-scrollbar,.tk-list::-webkit-scrollbar,
.act-list::-webkit-scrollbar,.modal-body::-webkit-scrollbar{width:8px}
.ins-list::-webkit-scrollbar-thumb,.tk-list::-webkit-scrollbar-thumb,
.act-list::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb{
  background:var(--hair-2);border-radius:99px;border:2px solid transparent;background-clip:padding-box;
}
.ins-list::-webkit-scrollbar-thumb:hover,.tk-list::-webkit-scrollbar-thumb:hover,
.act-list::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:padding-box}
.ins-list,.tk-list,.act-list,.modal-body{scrollbar-width:thin;scrollbar-color:var(--hair-2) transparent}

/* --- charts need room --------------------------------------------------- */
.chart-box{height:330px}
.chart-box-sm{height:200px}

/* --- app footer --------------------------------------------------------- */
.app-foot{
  margin-top:var(--s7);padding:var(--s5) 0 var(--s6);
  border-top:1px solid var(--hair);
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  font-size:12.5px;color:var(--text-3);
}
.app-foot nav{display:flex;gap:var(--s4);flex-wrap:wrap;margin-left:auto}
.app-foot a{color:var(--text-2);text-decoration:none}
.app-foot a:hover{color:var(--text);text-decoration:underline}
@media(max-width:860px){
  .app-foot{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .app-foot nav{margin-left:0}
  .ins-list,.tk-list,.act-list{max-height:340px}
}

/* ==========================================================================
   PART 7 — CORRECTIONS ROUND 3
   ========================================================================== */

/* --- Map popup: the remaining white band ---------------------------------
   Recent Maps builds insert .gm-style-iw-ch (a header/title row) above the
   content. It is empty here, so it rendered as a blank strip above the photo. */
.gm-style .gm-style-iw-ch{display:none!important;padding:0!important;height:0!important}
.gm-style .gm-style-iw-c{padding-top:0!important}
.gm-style .gm-style-iw{padding:0!important}
.gm-style .gm-style-iw-d > div:empty{display:none}

/* Beds/baths chips were inheriting a dark pill background inside the popup. */
.enhanced-map-info-window .property-features span{
  background:none!important;color:#5C5C66!important;padding:0!important;border-radius:0!important;
  font-weight:500;
}

/* --- Footer sat flush against the window edges -------------------------- */
.app-foot{
  max-width:var(--wrap);width:100%;margin:var(--s7) auto 0;
  padding:var(--s5) var(--s7) var(--s6);
}
@media(max-width:1180px){ .app-foot{padding-left:var(--s6);padding-right:var(--s6)} }
@media(max-width:860px){ .app-foot{padding-left:var(--s4);padding-right:var(--s4);padding-bottom:104px} }

/* --- Rail: many more items now, so it needs to scroll cleanly ----------- */
.nav{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rail-hover) transparent}
.nav::-webkit-scrollbar{width:8px}
.nav::-webkit-scrollbar-thumb{
  background:var(--rail-hover);border-radius:99px;border:2px solid transparent;background-clip:padding-box;
}
.rail-foot .avatar{text-decoration:none;color:var(--rail-text-2);overflow:hidden;flex:0 0 29px}
.rail-foot .avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.rail-foot a:hover{color:var(--rail-text)}

/* --- notifications bell in the rail ------------------------------------- */
.brand-row{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3) var(--s6)}
.brand-row .brand{padding:0;flex:1;min-width:0}
.bell{
  position:relative;display:grid;place-items:center;
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;
  color:var(--rail-text-2);text-decoration:none;transition:background var(--fast),color var(--fast);
}
.bell:hover{background:var(--rail-hover);color:var(--rail-text)}
.bell-dot{
  position:absolute;top:1px;right:0;min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--loss);color:#fff;
  font-size:10px;font-weight:700;line-height:16px;text-align:center;
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   PART 8 — PROPERTIES PAGE VOCABULARY
   compat.css was built from the dashboard's class inventory. The properties
   page uses a different ~258-class vocabulary of its own, so removing its
   inline stylesheet left it unstyled. These re-implement it on the tokens.
   ========================================================================== */

/* --- page frame --------------------------------------------------------- */
.dashboard,.dashboard-content,.main-content{display:block;width:100%}
.page-header{padding:var(--s6) 0 var(--s5)}
.page-header-content{display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap}
.page-title-section{min-width:0}
.page-title{font-size:29px;font-weight:800;letter-spacing:-.045em;margin:0;display:flex;align-items:center;gap:10px}
.page-icon{color:var(--text-3);font-size:20px}
.page-subtitle{font-size:14px;color:var(--text-2);margin:5px 0 0}
.page-actions{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap}

/* --- stat cards --------------------------------------------------------- */
.dashboard-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hair);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);margin-bottom:var(--s4);
}
.stat-card{background:var(--surface);padding:var(--s5);position:relative}
.stat-header{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-3);font-weight:500}
.stat-icon{color:var(--text-3);font-size:15px}
.stat-value{font-size:27px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:5px}
.stat-details{font-size:12px;color:var(--text-3);margin-top:4px}
.stat-trend{font-size:12px;font-weight:600}
.stat-trend.positive,.positive{color:var(--gain)}
.stat-trend.negative,.negative{color:var(--loss)}
.stat-trend.neutral,.neutral{color:var(--text-3)}

/* --- filter bar --------------------------------------------------------- */
.property-filter-bar{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  background:var(--surface);border-radius:var(--r-lg);padding:var(--s4);
  box-shadow:var(--shadow-sm);margin-bottom:var(--s4);
}
.filter-group{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.filter-label{font-size:12.5px;color:var(--text-3);font-weight:600}
.filter-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.01em;
  padding:7px 12px;border-radius:8px;cursor:pointer;
  border:1px solid var(--hair-2);background:var(--surface-2);color:var(--text-2);
  transition:background var(--fast),color var(--fast),border-color var(--fast);
}
.filter-btn:hover{background:var(--surface-3);color:var(--text)}
.filter-btn.active{background:var(--inv-bg);color:var(--inv-fg);border-color:transparent}
.search-box{position:relative;flex:1;min-width:220px;display:flex;align-items:center}
.search-box i,.search-box .fa,.search-box svg{position:absolute;left:12px;color:var(--text-3);font-size:14px;pointer-events:none}
.search-box input{padding-left:34px}

/* --- property grid + cards ---------------------------------------------- */
.property-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4)}
.property-card{
  background:var(--surface);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);cursor:pointer;display:flex;flex-direction:column;
  transition:transform var(--med),box-shadow var(--med);
}
.property-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.property-card-image{position:relative;aspect-ratio:3/2;background:var(--surface-3);overflow:hidden}
.property-card-image img{width:100%;height:100%;object-fit:cover;display:block}
.property-card-content{padding:var(--s4);display:flex;flex-direction:column;gap:6px;flex:1}
.property-heading,.property-address{font-size:15px;font-weight:700;letter-spacing:-.025em;line-height:1.3}
.property-type,.property-meta,.property-meta-info{font-size:12.5px;color:var(--text-3)}
.property-meta-info{display:flex;gap:var(--s3);flex-wrap:wrap}
.property-meta-item,.property-feature{display:flex;align-items:center;gap:5px}
.property-price,.price-value,.property-value-display{
  font-size:19px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.property-actions{
  display:flex;gap:var(--s2);margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--hair);
}
.action-btn,.view-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-family:inherit;font-size:12.5px;font-weight:600;padding:7px 11px;
  border-radius:8px;border:1px solid var(--hair-2);background:var(--surface-2);
  color:var(--text);cursor:pointer;text-decoration:none;transition:background var(--fast);
}
.action-btn:hover,.view-btn:hover{background:var(--surface-3)}

/* --- status badges ------------------------------------------------------ */
.status-badge,.property-status-badge,.status-active-badge,.property-status,.unit-status{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;letter-spacing:-.005em;
  padding:3px 9px;border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--text-2);white-space:nowrap;
}
.property-card-image .property-status-badge,
.property-card-image .status-badge{
  position:absolute;top:10px;left:10px;
  background:rgba(10,10,12,.66);color:#FAFAFA;
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);
}
.status-badge.active,.property-status-badge.active,.status-active-badge,.open{background:var(--gain-soft);color:var(--gain)}
.status-badge.vacant,.property-status-badge.vacant{background:var(--loss-soft);color:var(--loss)}
.status-badge.construction,.property-status-badge.construction,.in-progress,.pending{background:var(--flag-soft);color:var(--flag)}
.status-badge.sold,.property-status-badge.sold,.completed{background:var(--info-soft);color:var(--info)}

/* --- modals ------------------------------------------------------------- */
.property-view-modal .modal-content{width:min(1100px,100%)}
.modal-title{font-size:17px;font-weight:700;letter-spacing:-.03em;margin:0;display:flex;align-items:center;gap:8px}
.modal-close{
  margin-left:auto;width:32px;height:32px;display:grid;place-items:center;
  border-radius:9px;border:1px solid var(--hair-2);background:var(--surface-2);
  color:var(--text-2);cursor:pointer;font-size:15px;
}
.modal-close:hover{background:var(--surface-3);color:var(--text)}

/* --- forms -------------------------------------------------------------- */
.form-tabs,.tab-nav{display:flex;gap:2px;background:var(--surface-2);border-radius:10px;padding:3px;flex-wrap:wrap}
.tab-button{
  font-family:inherit;font-size:13px;font-weight:600;padding:7px 13px;border:0;
  border-radius:7px;background:none;color:var(--text-2);cursor:pointer;
}
.tab-button:hover{color:var(--text)}
.tab-button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.form-section{padding:var(--s5) 0;border-bottom:1px solid var(--hair)}
.form-section:last-child{border-bottom:0}
.form-section-title,.financial-title,.chart-title,.table-title,.detail-section-title{
  font-size:15px;font-weight:700;letter-spacing:-.025em;margin:0 0 var(--s4);
}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.form-grid .full-width,.full-width{grid-column:1/-1}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:12.5px;font-weight:600;color:var(--text-2)}
.form-control{
  width:100%;padding:10px 13px;border-radius:10px;font-size:14.5px;
  background:var(--surface-2);border:1px solid var(--hair-2);color:var(--text);
  transition:border-color var(--fast),background var(--fast);
}
.form-control:focus{outline:none;border-color:var(--text-3);background:var(--surface)}
.required{color:var(--loss)}
.validation-error{font-size:12px;color:var(--loss);font-weight:500}
.form-control[aria-invalid="true"],.form-control.error{border-color:var(--loss)}
.form-navigation{display:flex;gap:var(--s2);align-items:center;padding-top:var(--s4)}
.form-navigation .next-tab-btn{margin-left:auto}
.counter-btn{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--hair-2);
  background:var(--surface-2);color:var(--text);cursor:pointer;font-size:15px;
}
.counter-btn:hover{background:var(--surface-3)}
.counter-input{width:56px;text-align:center}

/* --- detail sections (view modal) --------------------------------------- */
.detail-section-header{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.detail-section-content{padding-bottom:var(--s4)}
.detail-grid,.property-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s3)}
.detail-item{background:var(--surface-2);border-radius:var(--r-md);padding:var(--s3) var(--s4)}
.detail-label{display:block;font-size:11.5px;color:var(--text-3);font-weight:600}
.detail-value,.value{display:block;font-size:14.5px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.financial-row{display:flex;align-items:baseline;gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--hair)}
.financial-row:last-child{border-bottom:0}
.financial-label{font-size:13px;color:var(--text-2)}
.financial-value{margin-left:auto;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.notes-content,.property-notes-container{
  background:var(--surface-2);border-radius:var(--r-md);padding:var(--s4);
  font-size:13.5px;color:var(--text-2);line-height:1.55;white-space:pre-wrap;
}
.property-main-details,.property-details-section,.property-financial-overview{margin-bottom:var(--s5)}

/* --- gallery ------------------------------------------------------------ */
.gallery-container{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-3)}
.gallery-slides{position:relative;aspect-ratio:16/10;overflow:hidden}
.gallery-slide{position:absolute;inset:0;opacity:0;transition:opacity .28s ease}
.gallery-slide.active{opacity:1}
.gallery-slide img{width:100%;height:100%;object-fit:cover;display:block}
.placeholder-slide{display:grid;place-items:center;width:100%;height:100%;color:var(--text-3);background:var(--surface-3)}
.gallery-controls{position:absolute;inset:0;pointer-events:none}
.gallery-arrow,.fullscreen-arrow{
  position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;
  width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(10,10,12,.62);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(8px);
}
.gallery-arrow.prev,.fullscreen-prev{left:10px}
.gallery-arrow.next,.fullscreen-next{right:10px}
.gallery-dots{
  position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;
  gap:6px;pointer-events:auto;
}
.gallery-dot{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.5)}
.gallery-dot.active{background:#fff;width:18px;border-radius:99px}
.gallery-thumbnails{display:flex;gap:6px;margin-top:var(--s2);overflow-x:auto;padding-bottom:4px}
.gallery-thumbnail{
  width:64px;height:46px;flex:0 0 64px;border-radius:8px;overflow:hidden;
  border:2px solid transparent;cursor:pointer;background:var(--surface-3);
}
.gallery-thumbnail.active{border-color:var(--text)}
.gallery-thumbnail img{width:100%;height:100%;object-fit:cover}

.fullscreen-gallery-modal{position:fixed;inset:0;z-index:1000000;background:rgba(6,6,8,.94);display:none}
.fullscreen-gallery-modal.active{display:grid;place-items:center}
.fullscreen-gallery-container{position:relative;width:min(1200px,94vw)}
.fullscreen-image-container{display:grid;place-items:center}
.fullscreen-image{max-width:100%;max-height:82vh;object-fit:contain;border-radius:var(--r-md)}
.fullscreen-close{
  position:absolute;top:-44px;right:0;width:34px;height:34px;border-radius:50%;
  border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
}
.fullscreen-counter{
  position:absolute;bottom:-34px;left:0;right:0;text-align:center;
  color:rgba(250,250,250,.7);font-size:12.5px;font-variant-numeric:tabular-nums;
}

/* --- file upload -------------------------------------------------------- */
.file-upload-container{display:block}
.file-upload-box{
  display:grid;place-items:center;gap:5px;padding:var(--s6) var(--s4);
  border:1.5px dashed var(--hair-2);border-radius:var(--r-md);
  background:var(--surface-2);color:var(--text-3);cursor:pointer;text-align:center;
  transition:border-color var(--fast),background var(--fast);
}
.file-upload-box:hover,.file-upload-box.dragover{border-color:var(--text-3);background:var(--surface-3)}
.file-input{display:none}
.file-preview-container,#photo-previews{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.file-preview{
  position:relative;width:104px;height:104px;border-radius:var(--r-md);
  overflow:hidden;background:var(--surface-3);cursor:grab;
}
.file-preview img{width:100%;height:100%;object-fit:cover;display:block}
.file-preview.drag-over{outline:2px solid var(--text);outline-offset:2px}
.remove-file,.remove-existing-image,.remove-unit-photo{
  position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;
  background:rgba(10,10,12,.72);color:#fff;display:grid;place-items:center;
  cursor:pointer;font-size:14px;line-height:1;border:0;
}
.drag-handle{position:absolute;bottom:5px;right:5px;color:rgba(255,255,255,.8);font-size:12px;cursor:grab}
.image-order{
  position:absolute;top:5px;left:5px;min-width:20px;height:20px;padding:0 5px;
  border-radius:99px;background:rgba(10,10,12,.72);color:#fff;
  font-size:11px;font-weight:700;display:grid;place-items:center;
}
.photo-count-display{font-size:12.5px;color:var(--text-3);margin-bottom:var(--s2)}
.photo-count-display.at-limit{color:var(--loss);font-weight:600}
.file-list{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.file-item,.document-item,.existing-document{
  display:flex;align-items:center;gap:var(--s3);
  background:var(--surface-2);border-radius:var(--r-md);padding:10px var(--s3);
}
.file-item-left,.document-info{display:flex;align-items:center;gap:var(--s3);min-width:0}
.file-icon,.document-icon{
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:grid;place-items:center;
  background:var(--surface);color:var(--text-2);
}
.file-name,.document-name{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-size{font-size:11.5px;color:var(--text-3)}
.file-actions,.document-actions{margin-left:auto;display:flex;gap:6px}
.remove-file-btn,.document-btn,.document-download-btn,.document-download{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--hair-2);
  background:var(--surface);color:var(--text-2);cursor:pointer;display:grid;place-items:center;
  text-decoration:none;
}
.remove-file-btn:hover,.document-btn:hover,.document-download-btn:hover{background:var(--surface-3);color:var(--text)}
.document-grid,.documents-container{display:flex;flex-direction:column;gap:var(--s2)}
.empty-documents-message{font-size:13px;color:var(--text-3);padding:var(--s4);text-align:center}

/* --- units -------------------------------------------------------------- */
.units-section,.units-display-section,.unit-photos-section{margin-top:var(--s5)}
.units-container,.units-display-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s3)}
.unit-card,.unit-display-card{
  background:var(--surface-2);border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--hair);
}
.unit-card-header,.unit-display-header{
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--hair);
}
.unit-card-body,.unit-display-body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.unit-number-badge,.unit-identifier{
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--text-2);
}
.unit-name{font-size:14px;font-weight:700;letter-spacing:-.02em}
.unit-form-row,.unit-rent-group{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.unit-display-details{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.unit-display-detail{font-size:12.5px;color:var(--text-2)}
.unit-tenant-value,.unit-rent{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.units-total-rent{
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--hair);
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
}
.unit-photo-dropzone,.unit-photo-upload{
  border:1.5px dashed var(--hair-2);border-radius:var(--r-md);padding:var(--s4);
  text-align:center;color:var(--text-3);cursor:pointer;font-size:12.5px;
}
.unit-photo-dropzone.dragover{border-color:var(--text-3);background:var(--surface-3)}
.unit-photo-input{display:none}
.unit-photo-previews,.unit-display-photos,.unit-display-photos-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
.unit-photo-preview,.unit-display-photo{
  position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;background:var(--surface-3);
}
.unit-photo-preview img,.unit-display-photo img{width:100%;height:100%;object-fit:cover}
.unit-display-photos-label{font-size:11.5px;color:var(--text-3);font-weight:600;width:100%}
.unit-no-photos{font-size:12px;color:var(--text-3)}
.unit-status-select,.unit-status-dropdown{padding:7px 10px;border-radius:8px;font-size:13px}

/* --- maintenance / equipment cards -------------------------------------- */
.maintenance-equipment-section{margin-top:var(--s5)}
.maintenance-equipment-grid,.me-card-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.me-card,.maintenance-card,.equipment-card{
  background:var(--surface-2);border-radius:var(--r-md);padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s3);
}
.me-card-content{display:flex;flex-direction:column;gap:var(--s2)}
.me-card-icon,.equipment-icon{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--surface);color:var(--text-2);
}
.me-card-title{font-size:14px;font-weight:700;letter-spacing:-.02em}
.me-stat{display:flex;flex-direction:column}
.me-stat-label{font-size:11.5px;color:var(--text-3);font-weight:600}
.me-stat-value{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.me-card-link{font-size:12.5px;font-weight:600;color:var(--text);text-decoration:none;margin-top:auto}
.me-card-link:hover{text-decoration:underline}
.warranty,.expiring{color:var(--flag);font-weight:600}

/* --- zestimate ---------------------------------------------------------- */
.zestimate-main{
  background:var(--surface-2);border-radius:var(--r-md);padding:var(--s4);
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
}
.zestimate-label-main{font-size:11.5px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.zestimate-value-large{font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.zestimate-badge{
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--info-soft);color:var(--info);
}
.zestimate-change{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.zestimate-detail-display{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s3)}

/* --- maps --------------------------------------------------------------- */
.map-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.property-map-container,#map-container,#street-view-container{
  min-height:260px;border-radius:var(--r-md);overflow:hidden;background:var(--surface-3);
}
.map-loading-container,.map-error-container{display:grid;place-items:center;min-height:260px;background:var(--surface-2)}
.map-loading-content,.map-error-content{text-align:center;color:var(--text-3);font-size:13px}
.map-loading-icon,.map-error-icon{font-size:22px;margin-bottom:6px}
.map-info-window{font-family:var(--font);width:220px}
.map-info-header{font-weight:700;font-size:13.5px;color:#14162B}
.map-info-address{font-size:12px;color:#5C5C66;margin-top:2px}

/* --- reports ------------------------------------------------------------ */
.report-controls{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-bottom:var(--s4)}
.report-content,.report-tab-content{display:none}
.report-tab-content.active,.report-content.active{display:block}
.report-summary,.summary-card{
  background:var(--surface-2);border-radius:var(--r-md);padding:var(--s4);
}
.report-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s3);background:none;padding:0}
.summary-title{font-size:11.5px;color:var(--text-3);font-weight:600}
.summary-value{font-size:20px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:3px}
.summary-change{font-size:12px;font-weight:600;margin-top:2px}
.report-charts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);margin-top:var(--s4)}
.report-chart-container{background:var(--surface-2);border-radius:var(--r-md);padding:var(--s4);min-height:260px}
.report-table-container{margin-top:var(--s4);overflow-x:auto}
.report-table{width:100%;border-collapse:collapse;font-size:13px}
.report-table th{
  text-align:left;padding:10px var(--s3);border-bottom:1px solid var(--hair);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);
}
.report-table td{padding:11px var(--s3);border-bottom:1px solid var(--hair)}
.report-table tbody tr:last-child td{border-bottom:0}

/* --- pagination --------------------------------------------------------- */
.pagination{display:flex;align-items:center;gap:5px;justify-content:center;margin-top:var(--s5);flex-wrap:wrap}
.page-btn,.prev-page,.next-page{
  min-width:34px;height:34px;padding:0 10px;border-radius:8px;
  border:1px solid var(--hair-2);background:var(--surface);color:var(--text-2);
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  display:grid;place-items:center;
}
.page-btn:hover,.prev-page:hover,.next-page:hover{background:var(--surface-2);color:var(--text)}
.page-btn.active{background:var(--inv-bg);color:var(--inv-fg);border-color:transparent}
.page-btn:disabled,.prev-page:disabled,.next-page:disabled{opacity:.4;cursor:not-allowed}
.page-ellipsis{color:var(--text-3);padding:0 4px}

/* --- delete confirmation ------------------------------------------------ */
.delete-confirmation-modal .modal-content{width:min(440px,100%)}
.delete-icon{
  width:46px;height:46px;border-radius:14px;margin:0 auto var(--s4);
  display:grid;place-items:center;background:var(--loss-soft);color:var(--loss);font-size:20px;
}
.delete-confirmation-title{font-size:17px;font-weight:700;text-align:center;letter-spacing:-.03em}
.delete-confirmation-text{font-size:13.5px;color:var(--text-2);text-align:center;margin-top:6px}

/* --- misc --------------------------------------------------------------- */
.btn-secondary{background:var(--surface-2);border-color:var(--hair-2);color:var(--text)}
.btn-white{background:var(--surface);border-color:var(--hair-2);color:var(--text)}
.primary{color:var(--text)}
.llc-link,.tenant-link{color:var(--info);text-decoration:none;font-weight:600}
.llc-link:hover,.tenant-link:hover{text-decoration:underline}
.no-results{text-align:center;padding:var(--s7);color:var(--text-2)}
.loading,.loading-indicator{display:grid;place-items:center;padding:var(--s7);color:var(--text-3);font-size:13px}
.cashflow{font-variant-numeric:tabular-nums;font-weight:600}

@media(max-width:1180px){
  .dashboard-stats{grid-template-columns:repeat(2,1fr)}
  .form-grid,.map-grid,.report-charts,.maintenance-equipment-grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .dashboard-stats{grid-template-columns:repeat(2,1fr)}
  .page-actions{margin-left:0;width:100%}
  .page-actions .btn{flex:1}
  .property-grid{grid-template-columns:1fr}
  .units-container,.units-display-grid{grid-template-columns:1fr}
  .detail-grid,.property-detail-grid,.report-summary{grid-template-columns:1fr 1fr}
  .search-box{min-width:100%}
}
@media(max-width:430px){
  .dashboard-stats,.detail-grid,.property-detail-grid,.report-summary,.unit-form-row{grid-template-columns:1fr}
}

/* --- properties: remaining odds and ends -------------------------------- */
.count-current{font-weight:700;color:var(--text)}
.existing-image,.existing-photo{position:relative}
.file-info{min-width:0;display:flex;flex-direction:column}
.map-error-text,.map-loading-text{font-size:13px;color:var(--text-3)}
.property-address-display{font-size:16px;font-weight:700;letter-spacing:-.03em}
.property-detail-images{display:flex;gap:6px;flex-wrap:wrap}
.remove-existing-doc{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--hair-2);
  background:var(--surface);color:var(--text-2);cursor:pointer;display:grid;place-items:center;
}
.remove-existing-doc:hover{background:var(--loss-soft);color:var(--loss)}
.report-date-range,.report-property-filter{min-width:170px}
.unit-bedrooms,.unit-bathrooms{font-variant-numeric:tabular-nums}
.prev-tab-btn{margin-right:auto}
.counter-btn.plus,.counter-btn.minus{font-weight:700}
.gallery-arrow.prev,.gallery-arrow.next,.fullscreen-arrow.prev,.fullscreen-arrow.next{pointer-events:auto}

/* ==========================================================================
   PART 9 — PROPERTIES CORRECTIONS
   These fix rules that were written against assumed markup rather than the
   real structure. Verified against the actual DOM this time.
   ========================================================================== */

/* --- page header: .page-icon is a SIBLING of the title block, not inside
       the h1, so both stacked. --------------------------------------------- */
.page-title-section{display:flex;align-items:center;gap:12px}
.page-icon{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  display:grid;place-items:center;background:var(--surface-2);color:var(--text-2);font-size:16px;
}
.page-title{display:block;font-size:27px}

/* --- stat cards: order is .stat-details then .stat-icon inside .stat-header,
       so the header is the row and the label lives on the h3. ------------- */
.stat-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);
  font-size:inherit;color:inherit;font-weight:inherit;
}
.stat-details{min-width:0}
.stat-details h3{
  font-size:12.5px;font-weight:600;color:var(--text-3);margin:0;letter-spacing:0;
}
.stat-icon{
  width:30px;height:30px;flex:0 0 30px;border-radius:9px;
  display:grid;place-items:center;background:var(--surface-2);color:var(--text-3);font-size:13px;
}
.stat-value{margin-top:6px}
.stat-trend{margin-top:6px;font-size:12px;color:var(--text-3);font-weight:500}

/* --- counters: .counter-input is the WRAPPER around minus/input/plus.
       Styling it as a field made the three children stack. ---------------- */
.counter-input{
  display:flex;align-items:center;gap:8px;width:auto;
  background:none;border:0;padding:0;
}
.counter-input input{
  width:72px;text-align:center;padding:10px 8px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--hair-2);color:var(--text);
  font-size:14.5px;font-variant-numeric:tabular-nums;
}
.counter-input input:focus{outline:none;border-color:var(--text-3);background:var(--surface)}
.counter-btn{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;font-size:13px}

/* --- view modal: .property-detail-grid holds gallery + 4 detail columns.
       auto-fill made five narrow columns and a horizontal scrollbar. ------ */
.property-detail-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5);align-items:start;
}
.property-detail-grid > :first-child{grid-column:1/-1}   /* gallery spans */
.modal-body{overflow-x:hidden}
.detail-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.property-view-modal .gallery-slides{aspect-ratio:16/7}

/* --- property cards: value and cashflow read better side by side, and the
       action button should sit on a common baseline across the row. ------- */
.property-card-content{gap:8px}
.property-meta{margin-top:auto}
.property-price{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--hair);
}
.price-value{font-size:19px;font-weight:700;letter-spacing:-.03em}
.property-price .cashflow{font-size:13.5px;font-weight:700}
.property-price .cashflow.positive{color:var(--gain)}
.property-price .cashflow.negative{color:var(--loss)}
.property-features{display:flex;gap:var(--s3);flex-wrap:wrap;font-size:12.5px;color:var(--text-3)}
.property-actions{margin-top:var(--s3)}
.property-actions .action-btn,.property-actions .view-btn{flex:1}

/* Softer swap when the grid re-renders after a filter click. */
.property-card-image{background:var(--surface-3)}
.property-card-image img{transition:opacity .18s ease}

/* --- form tabs: icons inline with their labels -------------------------- */
.tab-button,.filter-btn,.modal-title,.detail-section-header,.form-section-title{
  display:inline-flex;align-items:center;gap:7px;
}
.detail-section-header,.form-section-title{display:flex}

@media(max-width:900px){
  .property-detail-grid{grid-template-columns:1fr}
}

/* --- .form-tabs is an outer wrapper around .tab-nav, so styling both as the
       pill container produced a pill inside a pill. ------------------------ */
.form-tabs{background:none;padding:0;display:block;margin-bottom:var(--s4)}
.form-tabs .tab-nav{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}

/* Section titles sit inside a flex header, so their bottom margin misaligned it. */
.detail-section-header .detail-section-title,
.detail-section-header .financial-title{margin:0}

/* ==========================================================================
   PART 10 — MODAL CENTRING, TAB PANELS, MOBILE
   ========================================================================== */

/* --- Modals open via jQuery .css('display','flex'), which is an INLINE style
       and therefore beats my display:grid. place-items only centres a grid, so
       under flex the dialog pinned to the left. Centre it for both. -------- */
.modal-overlay{
  align-items:center;justify-content:center;
  padding:var(--s5);
}
.modal-overlay.active{display:flex}

/* --- Tab panels.
       The dashboard has .tab-content elements that must stay visible, so
       PART 4 sets .tab-content{display:block}. The properties modals use the
       SAME class name but need the opposite behaviour — only .active shows.
       Scope by context so both pages work. ------------------------------- */
.modal-overlay .tab-content{display:none}
.modal-overlay .tab-content.active{display:block}
#property-form .tab-content{display:none}
#property-form .tab-content.active{display:block}

/* --- Modal shell: header and footer fixed, body scrolls. --------------- */
.modal-content{
  display:flex;flex-direction:column;
  max-height:min(880px, calc(100vh - 48px));
}
.modal-header{flex:0 0 auto}
.modal-body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.modal-footer{flex:0 0 auto}

/* --- MOBILE: modals become full-height sheets ------------------------- */
@media(max-width:860px){
  .modal-overlay{padding:0;align-items:flex-end}
  .modal-content,
  .property-view-modal .modal-content,
  .delete-confirmation-modal .modal-content{
    width:100%;max-width:none;max-height:94vh;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
  }
  .modal-header{padding:var(--s4);position:sticky;top:0;background:var(--surface);z-index:2}
  .modal-body{padding:var(--s4)}
  .modal-footer{
    padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
    position:sticky;bottom:0;background:var(--surface);z-index:2;
  }
  .modal-footer .btn{flex:1}

  /* Everything inside a modal collapses to one column on a phone. */
  .property-detail-grid,
  .form-grid,
  .detail-grid,
  .map-grid,
  .unit-form-row,
  .unit-rent-group,
  .unit-display-details,
  .report-charts,
  .maintenance-equipment-grid,
  .me-card-stats{grid-template-columns:1fr}

  .form-tabs .tab-nav,.tab-nav{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .form-tabs .tab-nav::-webkit-scrollbar{display:none}
  .tab-button{white-space:nowrap;flex:0 0 auto}

  .form-navigation{position:sticky;bottom:0;background:var(--surface);padding:var(--s3) 0;z-index:1}
  .property-view-modal .gallery-slides{aspect-ratio:4/3}
  .gallery-thumbnail{width:54px;height:40px;flex:0 0 54px}
  .file-preview{width:88px;height:88px}
  .counter-input input{width:60px}
  .dashboard-stats{grid-template-columns:1fr 1fr}
  .page-title{font-size:23px}
  .page-icon{width:34px;height:34px;flex:0 0 34px}
}

@media(max-width:430px){
  .dashboard-stats{grid-template-columns:1fr}
  .property-price{flex-direction:column;align-items:flex-start;gap:2px}
}

/* ==========================================================================
   PART 11 — VIEW MODAL, GALLERY, DOCUMENTS, CARD CAROUSEL
   ========================================================================== */

/* --- .property-detail-images is the GALLERY WRAPPER, not a thumbnail strip.
       Styling it as a flex row is why only small thumbnails appeared and the
       main image never showed. ---------------------------------------------- */
.property-detail-images{display:block;width:100%}

/* --- The view modal holds sections of wildly different heights. Forcing two
       columns left large ragged gaps, so it flows in one column and each
       section manages its own internal grid. ------------------------------- */
.property-detail-grid{display:block}
.property-detail-grid > *{margin-bottom:var(--s5)}
.property-detail-grid > *:last-child{margin-bottom:0}
.property-main-details,.property-financial-overview,
.property-details-section{display:block;width:100%}
.detail-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}

/* Sections that pair naturally sit side by side on a wide screen. */
@media(min-width:1000px){
  .property-detail-grid{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--s5);align-items:start;
  }
  .property-detail-grid > *{margin-bottom:0}
  .property-detail-grid > .property-detail-images{grid-column:1/-1}
}

/* --- Gallery: a real main image, not just thumbnails -------------------- */
.property-view-modal .gallery-container{margin-bottom:var(--s3)}
.property-view-modal .gallery-slides{aspect-ratio:16/9;min-height:260px}
.gallery-slides img{width:100%;height:100%;object-fit:cover}
.placeholder-slide{flex-direction:column;gap:6px;font-size:13px}
.placeholder-slide i{font-size:26px}

/* --- Documents: .document-actions is nested INSIDE .document-info, so the
       name and the button were overlapping. -------------------------------- */
.document-info{
  flex:1;min-width:0;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s3);
}
.document-name{flex:1;min-width:0}
.document-actions{flex:0 0 auto;margin-left:0}
.document-download,.document-btn{
  display:inline-flex;align-items:center;gap:6px;width:auto;height:auto;
  padding:7px 12px;border-radius:8px;font-size:12.5px;font-weight:600;white-space:nowrap;
}

/* --- Search: sized rather than stretched across the bar ---------------- */
.property-filter-bar{justify-content:flex-start}
.search-box{flex:0 1 320px;min-width:200px;margin-left:auto}

/* --- Card photo strip --------------------------------------------------- */
.property-card{cursor:pointer}
.card-gallery{position:absolute;inset:0;pointer-events:none}
.cg-arrow{
  position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;
  width:28px;height:28px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(10,10,12,.55);color:#fff;font-size:16px;line-height:1;
  display:grid;place-items:center;opacity:0;transition:opacity .15s ease;
  backdrop-filter:blur(6px);
}
.cg-prev{left:8px} .cg-next{right:8px}
.property-card:hover .cg-arrow{opacity:1}
.cg-arrow:hover{background:rgba(10,10,12,.8)}
.cg-dots{
  position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:5px;
  pointer-events:none;
}
.cg-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55)}
.cg-dot.on{background:#fff;width:14px;border-radius:99px}
.cg-count{
  position:absolute;top:8px;right:8px;pointer-events:none;
  background:rgba(10,10,12,.6);color:#fff;border:1px solid rgba(255,255,255,.14);
  font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);
  backdrop-filter:blur(6px);
}
@media(hover:none){ .cg-arrow{opacity:1} }

@media(max-width:860px){
  .search-box{flex:1 1 100%;margin-left:0}
  .property-filter-bar{gap:var(--s2)}
}

/* ==========================================================================
   PART 12 — VIEW MODAL DENSITY, EMPTY STATE, STICKY FOOTER, AI CHAT
   ========================================================================== */

/* --- Sticky footer: the shell must fill the viewport so the footer sits at
       the bottom on short pages instead of floating up. -------------------- */
.app{min-height:100vh}
.main{display:flex;flex-direction:column;min-height:100vh}
.main > .content{flex:1 0 auto}
.app-foot{flex:0 0 auto}

/* --- Empty state was left-aligned in the grid ---------------------------- */
.no-results,.empty-state,#empty-state{
  grid-column:1/-1;width:100%;text-align:center;
  padding:var(--s8) var(--s5);color:var(--text-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
}
.no-results i,.empty-state i{font-size:30px;color:var(--text-3)}
.no-results p,.empty-state p{margin:0;max-width:44ch}

/* ==========================================================================
   VIEW MODAL — density pass.
   The problem was not the data, it was that every field rendered as an
   identical grey box, so 30 fields read as noise. Fields now read as ruled
   label/value rows, which is far denser and scannable. Boxes are kept only
   for the few genuinely headline numbers.
   ========================================================================== */

/* Main image: was 16:9 of an 1100px modal, i.e. ~620px tall. Capped. */
.property-view-modal .gallery-slides{
  aspect-ratio:auto;height:340px;min-height:0;border-radius:var(--r-md);
}
.property-view-modal .gallery-container{border-radius:var(--r-md)}
.property-view-modal .gallery-thumbnails{gap:8px;margin-top:10px}
.property-view-modal .gallery-thumbnail{
  width:88px;height:62px;flex:0 0 88px;border-radius:8px;
}

/* Detail fields as ruled rows rather than a wall of grey tiles. */
.detail-grid,.property-detail-grid .detail-grid{
  display:block;background:var(--surface);border-radius:var(--r-md);
  border:1px solid var(--hair);overflow:hidden;
}
.detail-item{
  display:flex;align-items:baseline;gap:var(--s4);
  background:none;border-radius:0;padding:11px var(--s4);
  border-bottom:1px solid var(--hair);
}
.detail-item:last-child{border-bottom:0}
.detail-label{
  flex:0 0 44%;font-size:12.5px;color:var(--text-3);font-weight:500;margin:0;
}
.detail-value,.detail-item .value{
  flex:1;margin:0;text-align:right;font-size:13.5px;font-weight:600;
  overflow-wrap:anywhere;
}

/* Section headings get real separation. */
.property-detail-grid > * > h3,
.detail-section-header{
  margin:0 0 var(--s3);padding-bottom:var(--s3);
  border-bottom:1px solid var(--hair);
}
.detail-section-title,.financial-title{font-size:14.5px;letter-spacing:-.02em}
.property-main-details,.property-financial-overview,.property-details-section{
  margin-bottom:var(--s6);
}

/* Address block */
.property-address-display{font-size:19px;line-height:1.25;margin-bottom:6px}
.property-view-modal .property-features{
  gap:var(--s4);margin:var(--s2) 0 var(--s4);font-size:12.5px;
}

/* Headline numbers keep a card. */
.zestimate-main{
  background:var(--surface-2);border-radius:var(--r-md);padding:var(--s4);
  display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3);
}
.zestimate-value-large{font-size:26px}

/* Financial summary rows */
.financial-row{padding:11px var(--s4);border-bottom:1px solid var(--hair)}
.property-financial-overview .financial-row:first-of-type{border-top:1px solid var(--hair)}

/* Maintenance / equipment tiles: stop the coloured blocks bleeding. */
.me-card-stats{gap:var(--s2)}
.me-stat{background:var(--surface);border-radius:8px;padding:var(--s3)}

/* Location: two equal panes that actually fit. */
.map-grid{grid-template-columns:1fr 1fr;gap:var(--s3)}
.property-map-container,#map-container,#street-view-container{min-height:230px;height:230px}

@media(max-width:1000px){
  .property-view-modal .gallery-slides{height:250px}
  .detail-label{flex:0 0 46%}
}
@media(max-width:860px){
  .property-view-modal .gallery-slides{height:200px}
  .property-view-modal .gallery-thumbnail{width:68px;height:50px;flex:0 0 68px}
  .map-grid{grid-template-columns:1fr}
  .detail-item{flex-direction:column;gap:2px;align-items:flex-start}
  .detail-label{flex:none}
  .detail-value,.detail-item .value{text-align:left}
}      the widget's own CSS says 24px

   compat.css is loaded by the dashboard and by nothing else, so the panel
   opened 84px up from the bottom THERE and 30px everywhere else. That is the
   'big gap at the bottom' — a competing stylesheet, not a positioning bug.

   I spent three rounds looking at transforms and containing blocks because the
   symptom matched. What I did not do until now was ask the obvious question:
   what does this page load that the others do not.

   Removed. components/aichat.php carries its own styling and is the single
   source for it. */

/* ==========================================================================
   PART 13 — PROPERTY VIEW MODAL (rewritten markup)
   Single column of full-width sections, each with its own internal grid.
   Sections of different heights can no longer leave gaps beside each other.
   ========================================================================== */
.pv{display:flex;flex-direction:column;gap:var(--s5)}

/* --- gallery + headline side by side ------------------------------------ */
.pv-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.pv-gallery{min-width:0}
.property-view-modal .gallery-slides{height:300px;aspect-ratio:auto;min-height:0}
.property-view-modal .gallery-thumbnails{gap:7px;margin-top:8px}
.property-view-modal .gallery-thumbnail{width:76px;height:54px;flex:0 0 76px}
/* Clicking the main image opens the fullscreen viewer. */
.property-view-modal .gallery-slides img{cursor:zoom-in}

.pv-headline{min-width:0}
.pv-headline .property-address-display{font-size:21px;line-height:1.25;margin:0}
.pv-status{margin-top:8px}
.pv-facts{
  list-style:none;margin:var(--s4) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--s4);
  font-size:12.5px;color:var(--text-2);
}
.pv-facts li{display:flex;align-items:center;gap:6px}
.pv-facts i{color:var(--text-3)}
.pv-figures{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-md);
  overflow:hidden;margin-top:var(--s5);
}
.pv-fig{background:var(--surface);padding:var(--s4)}
.pv-fig-l{display:block;font-size:11.5px;color:var(--text-3);font-weight:600}
.pv-fig-v{
  display:block;margin-top:4px;font-size:19px;font-weight:700;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}

/* --- section cards ------------------------------------------------------ */
.pv-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);align-items:start}
.pv-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pv-card{
  background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-lg);padding:var(--s5);min-width:0;
}
.pv-h{
  font-size:14px;font-weight:700;letter-spacing:-.02em;margin:0 0 var(--s3);
  padding-bottom:var(--s3);border-bottom:1px solid var(--hair);
}
.pv-h-sub{margin-top:var(--s5)}

/* ruled label/value rows */
.pv-card .detail-grid{display:block;background:none;border:0;border-radius:0}
.pv-card .detail-item{
  display:flex;align-items:baseline;gap:var(--s3);
  padding:9px 0;border-bottom:1px solid var(--hair);background:none;border-radius:0;
}
.pv-card .detail-item:last-child{border-bottom:0}
.pv-card .detail-label{flex:0 0 46%;font-size:12.5px;color:var(--text-3);font-weight:500;margin:0}
.pv-card .detail-value{
  flex:1;text-align:right;font-size:13.5px;font-weight:600;margin:0;overflow-wrap:anywhere;
}
.pv-strong .detail-label,.pv-strong .detail-value{font-weight:700;color:var(--text)}
.pv-strong{border-top:1px solid var(--hair-2)}

/* stat trio for maintenance / equipment */
.pv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.pv-stat{background:var(--surface-2);border-radius:var(--r-md);padding:var(--s3);text-align:center}
.pv-stat-v{display:block;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.pv-stat-v.up{color:var(--gain)} .pv-stat-v.flag{color:var(--flag)}
.pv-stat-l{display:block;font-size:11px;color:var(--text-3);font-weight:600;margin-top:2px}
.pv-link{
  display:inline-block;margin-top:var(--s3);font-size:12.5px;font-weight:600;
  color:var(--text);text-decoration:none;
}
.pv-link:hover{text-decoration:underline}

/* location + notes + documents */
.pv-card .map-grid{grid-template-columns:1fr 1fr;gap:var(--s3)}
.pv-card #map-container,.pv-card #street-view-container{height:240px;min-height:240px;border-radius:var(--r-md)}
.pv-card .notes-content{background:var(--surface-2);min-height:120px;max-height:260px;overflow-y:auto}
.pv-card .documents-container{gap:var(--s2)}

@media(max-width:1000px){
  .pv-top{grid-template-columns:1fr}
  .pv-row,.pv-row-3{grid-template-columns:1fr}
  .property-view-modal .gallery-slides{height:240px}
}
@media(max-width:860px){
  .pv-card{padding:var(--s4)}
  .pv-card .map-grid{grid-template-columns:1fr}
  .pv-figures{grid-template-columns:1fr}
  .property-view-modal .gallery-slides{height:200px}
  .pv-card .detail-item{flex-direction:column;gap:2px;align-items:flex-start}
  .pv-card .detail-label{flex:none}
  .pv-card .detail-value{text-align:left}
}

/* ==========================================================================
   PART 14 — AI CHAT CORRECTIONS
   ========================================================================== */
/* The window must be hidden until opened;

/* ==========================================================================
   PART 15 — FMR / CRIME / INVOICE GENERATOR
   Class inventory taken from each page BEFORE its stylesheet was removed, so
   nothing is left unstyled. 164 classes across the three pages.
   ========================================================================== */

/* --- shared shells ------------------------------------------------------ */
.container,.container-narrow,.form-wrapper,.main-wrapper{width:100%;margin:0 auto}
.container-narrow{max-width:840px}
.search-section,.results-section,.crime-section,.fmr-section{margin-bottom:var(--s5)}

.hero-badge,.location-badge,.zip-badge,.crime-importance-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--info-soft);color:var(--info);
}
.hero-content{max-width:60ch}
.hero-description,.search-description{font-size:14px;color:var(--text-2);margin:6px 0 0}

/* --- search cards ------------------------------------------------------- */
.search-card,.data-card,.chart-card,.loading-card,.crime-map-card,.control-panel{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.search-card{padding:var(--s5)}
.search-title,.results-title,.data-card-title,.chart-card-title,.crime-map-title,.fmr-title{
  display:flex;align-items:center;gap:8px;
  font-size:16.5px;font-weight:700;letter-spacing:-.03em;margin:0;
}
.search-form,.crime-search-form{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap;margin-top:var(--s4)}
.form-label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.form-input-wrapper{position:relative;flex:1;min-width:220px}
.form-input{
  width:100%;padding:11px 13px;border-radius:10px;font-size:14.5px;
  background:var(--surface-2);border:1px solid var(--hair-2);color:var(--text);
  transition:border-color var(--fast),background var(--fast);
}
.form-input:focus{outline:none;border-color:var(--text-3);background:var(--surface)}
/* Only these two are input adornments. .search-icon is a standalone decorative
   circle in crime's search card — making it absolute sent it to the page origin
   (it appeared floating over the sidebar). */
.form-input-icon,.input-icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--text-3);font-size:14px;pointer-events:none;z-index:1;
}
.search-icon{
  width:64px;height:64px;margin:0 auto var(--s4);border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-2);color:var(--text-2);
}
.search-icon svg,.search-icon i{width:26px;height:26px;font-size:22px}
.form-input-wrapper:has(.form-input-icon) .form-input,
.form-input-wrapper .form-input-icon ~ .form-input{padding-left:34px}
.search-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;font-size:14px;font-weight:600;padding:11px 20px;
  border:0;border-radius:10px;cursor:pointer;white-space:nowrap;
  background:var(--inv-bg);color:var(--inv-fg);
}
.search-btn:hover{opacity:.88}
.search-btn:disabled{opacity:.45;cursor:not-allowed}
#autocomplete-dropdown{
  position:absolute;top:100%;left:0;right:0;z-index:40;margin-top:4px;
  background:var(--surface);border:1px solid var(--hair-2);border-radius:var(--r-md);
  box-shadow:var(--shadow);max-height:260px;overflow-y:auto;
}
#autocomplete-dropdown > *{padding:10px var(--s4);cursor:pointer;font-size:13.5px}
#autocomplete-dropdown > *:hover{background:var(--surface-2)}

/* --- results headers ---------------------------------------------------- */
.results-header{
  display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4);
}
.results-meta,.results-location{font-size:13px;color:var(--text-3)}
.results-title-icon{color:var(--text-3)}
.results-grid,.data-grid,.fmr-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s4);
}

/* --- FMR cards ---------------------------------------------------------- */
.fmr-card,.fmr-card-header{min-width:0}
.results-grid > *{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.fmr-card-header{padding:var(--s4);border-bottom:1px solid var(--hair)}
.fmr-card-location{font-size:15px;font-weight:700;letter-spacing:-.025em}
.fmr-card-meta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:4px}
.fmr-card-meta-item{font-size:12px;color:var(--text-3)}
.fmr-card-body{padding:var(--s4)}
.fmr-card-footer{
  padding:var(--s3) var(--s4);border-top:1px solid var(--hair);
  font-size:12px;color:var(--text-3);background:var(--surface-2);
}
.fmr-rates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:var(--s2)}
.fmr-rate-item{background:var(--surface-2);border-radius:var(--r-md);padding:var(--s3);text-align:center}
.fmr-rate-label{display:block;font-size:11px;color:var(--text-3);font-weight:600}
.fmr-rate-value{
  display:block;margin-top:3px;font-size:17px;font-weight:700;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.fmr-box{background:var(--surface-2);border-radius:var(--r-md);padding:var(--s3);text-align:center}
.fmr-box-label{display:block;font-size:11px;color:var(--text-3);font-weight:600}
.fmr-box-value{display:block;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px}
.fmr-header{display:flex;align-items:center;gap:8px;margin-bottom:var(--s3)}
.fmr-link,.hud-link,.crime-map-link{color:var(--info);text-decoration:none;font-weight:600;font-size:13px}
.fmr-link:hover,.hud-link:hover,.crime-map-link:hover{text-decoration:underline}

/* --- notices ------------------------------------------------------------ */
.notice-compact{
  background:var(--info-soft);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--s4);margin-bottom:var(--s4);
}
.notice-compact-header{display:flex;align-items:center;gap:9px;margin-bottom:var(--s3)}
.notice-compact-icon,.notice-compact-item-icon{
  width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:grid;place-items:center;
  background:var(--surface);color:var(--info);font-size:13px;
}
.notice-compact-title{font-size:14px;font-weight:700;letter-spacing:-.02em}
.notice-compact-subtitle{font-size:12.5px;color:var(--text-2)}
.notice-compact-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s3)}
.notice-compact-item{display:flex;gap:9px;align-items:flex-start}
.notice-compact-item-content{font-size:12.5px;color:var(--text-2);line-height:1.5}

.alert{border-radius:var(--r-md);padding:var(--s4);font-size:13.5px;margin-bottom:var(--s4)}
.alert-info{background:var(--info-soft);color:var(--info)}
.alert-light{background:var(--surface-2);color:var(--text-2)}

/* --- loading + empty ---------------------------------------------------- */
.loading-state,.loading-card,.loading-overlay{
  display:grid;place-items:center;gap:var(--s3);padding:var(--s8) var(--s5);text-align:center;
}
.loading-overlay{
  position:fixed;inset:0;z-index:500;background:var(--overlay);
  backdrop-filter:blur(3px);color:var(--text);
}
.loading-spinner{
  width:26px;height:26px;border-radius:50%;
  border:2.5px solid var(--hair-2);border-top-color:var(--text);
  animation:spin .7s linear infinite;
}
.loading-message,.loading-text{font-size:14px;font-weight:600}
.loading-submessage{font-size:12.5px;color:var(--text-3)}
.empty-state-icon{font-size:32px;color:var(--text-3)}
.empty-state-title{font-size:16px;font-weight:700;letter-spacing:-.02em}
.empty-state-message{font-size:13.5px;color:var(--text-2);max-width:44ch;margin:0 auto}

/* --- crime: stats + charts --------------------------------------------- */
.data-card-header{
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--hair);
  display:flex;align-items:center;gap:var(--s3);
}
.data-card-title-row{display:flex;align-items:center;gap:9px;min-width:0}
.data-card-icon{
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--text-2);font-size:14px;
}
.data-card-body{padding:var(--s5)}
.data-row{
  display:flex;align-items:baseline;gap:var(--s3);
  padding:9px 0;border-bottom:1px solid var(--hair);
}
.data-row:last-child{border-bottom:0}
.data-label{flex:0 0 52%;font-size:12.5px;color:var(--text-3);font-weight:500}
.data-value{flex:1;text-align:right;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}

.stat-card-big{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:var(--shadow-sm);
}
.stat-big-value{font-size:30px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat-big-label{font-size:12.5px;color:var(--text-3);font-weight:600;margin-top:4px}
.stat-big-subtext{font-size:12px;color:var(--text-3);margin-top:2px}
.crime-stats-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s2);margin-top:var(--s3)}
.crime-stat-box{background:var(--surface-2);border-radius:var(--r-md);padding:var(--s3);text-align:center}
.crime-stat-label{display:block;font-size:11px;color:var(--text-3);font-weight:600}
.crime-stat-value{display:block;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}

.chart-card-header{padding:var(--s4) var(--s5);border-bottom:1px solid var(--hair)}
.chart-wrapper{padding:var(--s5);min-height:260px}
.income-chart{width:100%}
.crime-map-header{padding:var(--s4) var(--s5);border-bottom:1px solid var(--hair)}
.crime-map-subtitle{font-size:12.5px;color:var(--text-3);margin-top:2px}
.crime-map-body{min-height:320px}
.crime-map-body iframe{width:100%;height:100%;min-height:320px;border:0;display:block}

.section-divider{display:flex;align-items:center;gap:var(--s3);margin:var(--s6) 0 var(--s4)}
.section-divider-line{flex:1;height:1px;background:var(--hair)}
.section-divider-text{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.section-divider-icon{color:var(--text-3)}
.demographics,.education,.housing,.income,.population,.race-breakdown,.section8{min-width:0}

/* --- invoice generator -------------------------------------------------- */
.control-panel{padding:var(--s5);margin-bottom:var(--s4)}
.invoice-container{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.invoice-header{
  padding:var(--s6);border-bottom:1px solid var(--hair);
  display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
}
.invoice-title{font-size:26px;font-weight:800;letter-spacing:-.04em;margin:0;display:flex;align-items:center;gap:9px}
.title-icon{color:var(--text-3)}
.company-info,.company-details,.client-details,.invoice-details{min-width:0;font-size:13px;color:var(--text-2);line-height:1.6}
.company-name,.client-name{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.invoice-meta{display:grid;gap:6px;text-align:right}
.invoice-meta-label{font-size:11.5px;color:var(--text-3);font-weight:600}
.invoice-number,.invoice-date,.due-date{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.invoice-body{padding:var(--s6)}
.invoice-info{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5);margin-bottom:var(--s5)}
.invoice-table{width:100%;border-collapse:collapse;font-size:13.5px}
.invoice-table th{
  text-align:left;padding:10px var(--s3);border-bottom:1px solid var(--hair-2);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);
}
.invoice-table td{padding:9px var(--s3);border-bottom:1px solid var(--hair);vertical-align:middle}
.item-row input,.description-input,.qty-input,.price-input{
  width:100%;background:var(--surface-2);border:1px solid var(--hair-2);color:var(--text);
  border-radius:8px;padding:8px 10px;font-size:13.5px;
}
.qty-input,.price-input{text-align:right;font-variant-numeric:tabular-nums}
.description-input{min-width:180px}
.amount-cell{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.add-item-btn{
  display:inline-flex;align-items:center;gap:7px;margin-top:var(--s3);
  font-family:inherit;font-size:13.5px;font-weight:600;padding:9px 14px;
  border:1px dashed var(--hair-2);border-radius:10px;background:var(--surface-2);
  color:var(--text);cursor:pointer;
}
.add-item-btn:hover{background:var(--surface-3);border-style:solid}
.totals{margin-left:auto;width:min(340px,100%);margin-top:var(--s5)}
.total-row,.tax-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:9px 0;border-bottom:1px solid var(--hair);font-size:13.5px;
}
.total-label{color:var(--text-2)}
.total-amount,.subtotal,.tax-amount,.grand-total{font-weight:600;font-variant-numeric:tabular-nums}
.grand-total{
  font-size:19px;font-weight:700;letter-spacing:-.03em;
  border-top:1px solid var(--hair-2);padding-top:var(--s3);
}
.tax-rate{width:78px;text-align:right}
.notes{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--hair)}
.notes-title{font-size:13px;font-weight:700;margin:0 0 var(--s2)}
.invoice-footer{
  padding:var(--s4) var(--s6);border-top:1px solid var(--hair);
  background:var(--surface-2);
}
.footer-text{font-size:12.5px;color:var(--text-3);margin:0}
.invoice-data{display:none}

@keyframes scaleIn{from{opacity:0;transform:scale(.97)}}
.animate-scale-in{animation:scaleIn .22s ease}

@media(max-width:860px){
  .search-form{flex-direction:column;align-items:stretch}
  .form-input-wrapper{min-width:100%}
  .search-btn{width:100%}
  .results-grid,.data-grid,.fmr-grid,.invoice-info{grid-template-columns:1fr}
  .invoice-header{flex-direction:column}
  .invoice-meta{text-align:left}
  .invoice-body,.invoice-header{padding:var(--s4)}
  .totals{width:100%}
  .data-label{flex:0 0 55%}
  /* Invoice table scrolls rather than squashing on a phone. */
  .invoice-table{min-width:520px}
  .invoice-body > .invoice-table,
  .invoice-body{overflow-x:auto}
}

/* Print: the invoice should print as a document, not an app screen. */
@media print{
  .control-panel,.add-item-btn{display:none!important}
  .invoice-container{border:0;box-shadow:none}
  .item-row input,.description-input,.qty-input,.price-input,.tax-rate{
    border:0;background:none;padding:0;
  }
}

/* --- two classes the inventory sweep flagged after conversion ----------- */
.location-info{font-size:13px;color:var(--text-2);line-height:1.5}
.client-address{font-size:13px;color:var(--text-2);line-height:1.6;white-space:pre-line}

/* ==========================================================================
   PART 16 — DEFAULT VISIBILITY + CLASS COLLISIONS
   Every rule here was derived by extracting the `display:none` defaults from
   each page's ORIGINAL stylesheet, rather than assuming. Styling a component
   without preserving its default visibility is what left loading overlays
   stuck on screen.
   ========================================================================== */

/* --- .hero collision ------------------------------------------------------
   app.css defines .hero as a 400px property-image hero. FMR and crime use
   .hero as a plain page section, so they inherited a tall empty box. Neither
   the dashboard nor properties uses the image version, so .hero returns to
   being a simple section. -------------------------------------------------- */
.hero{
  position:static;min-height:0;display:block;
  border-radius:0;overflow:visible;box-shadow:none;background:none;
  padding:var(--s6) 0 var(--s5);
}
.hero-title{font-size:29px;font-weight:800;letter-spacing:-.045em;line-height:1.1;margin:var(--s3) 0 0;color:var(--text)}
.hero-description{font-size:14.5px;color:var(--text-2);margin:8px 0 0;max-width:70ch}
.hero-content{max-width:none}

/* --- hidden by default in the originals; JS reveals them ---------------- */
.loading-state{display:none}
.loading-overlay{display:none}
.loading-overlay.active{display:grid}
#autocomplete-dropdown{display:none}
#autocomplete-dropdown.active{display:block}

/* crime hides .results-section until a search returns; FMR's original CSS does
   NOT — it is always visible there. Applying crime's default globally hid FMR's
   results permanently, which is why that page looked like it did nothing. */
main[data-page="crime"] .results-section{display:none}
main[data-page="crime"] .results-section.active{display:block}

/* Inline style.display set by JS beats these, which is exactly how each page
   already reveals them — so nothing needs a JS change. */

/* --- AI chat corrections ------------------------------------------------- */
/* The AI badge sits inline beside the title in the markup;

/* ==========================================================================
   PART 17 — PAGE-SCOPED CORRECTIONS
   Rules that differ per page are scoped with main[data-page="…"] so a default
   taken from one page can never silently break another.
   ========================================================================== */

/* --- crime: centred search card ---------------------------------------- */
main[data-page="crime"] .search-card{text-align:center;padding:var(--s6) var(--s5)}
main[data-page="crime"] .search-title{justify-content:center}
main[data-page="crime"] .search-description{margin:6px auto var(--s5);max-width:56ch}
main[data-page="crime"] #searchForm{max-width:620px;margin:0 auto}
main[data-page="crime"] .form-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--s3)}
main[data-page="crime"] .search-btn{width:100%;justify-content:center}

/* section dividers read as a labelled rule, not a floating icon */
.section-divider{
  display:flex;align-items:center;gap:var(--s3);
  margin:var(--s7) 0 var(--s4);
}
.section-divider-icon{
  order:1;display:grid;place-items:center;
  width:30px;height:30px;flex:0 0 30px;border-radius:9px;
  background:var(--surface-2);color:var(--text-2);font-size:14px;
}
.section-divider-text{order:2;white-space:nowrap}
.section-divider-line{order:3;flex:1;height:1px;background:var(--hair)}
.section-divider-line:first-child{order:0;flex:0 0 0;height:0}

/* charts need room; the demographics donut was squeezed and clipping legends */
main[data-page="crime"] .chart-wrapper{min-height:300px;display:block}
main[data-page="crime"] .chart-wrapper canvas{max-width:100%}
main[data-page="crime"] .data-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
main[data-page="crime"] .crime-map-body{min-height:420px}
main[data-page="crime"] .crime-map-body iframe{min-height:420px}
main[data-page="crime"] .stat-card-big{text-align:center}

/* --- fmr: results visible, grid sensible -------------------------------- */
main[data-page="fmr"] .results-section{display:block}
main[data-page="fmr"] .search-card{max-width:760px;margin:0 auto}
main[data-page="fmr"] .results-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

/* --- invoices: the sheet should read like a document -------------------- */
main[data-page="invoices"] .main-wrapper{max-width:920px;margin:0 auto}
main[data-page="invoices"] .invoice-container{background:var(--surface)}
main[data-page="invoices"] .control-panel{
  display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;
}
main[data-page="invoices"] .page-header{padding:var(--s6) 0 var(--s4)}