/* ==========================================================================
   SHARED UTILITIES — Tailwind classes remapped to design tokens
   ==========================================================================
   Loaded ONLY by the page(s) named above, after app.css and utils.css.

   Why the split: a single global stylesheet accumulated 17 rounds of patches,
   ended up defining 45 selectors three or more times, and the newest rules
   were losing to older ones. Worse, class names collide across pages —
   .hero, .tab-content, .results-section and .search-icon all mean different
   things on different pages — so a default taken from one page silently broke
   another. Per-page files make that impossible by construction.
   ========================================================================== */

   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-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-radius:var(--r-xl);box-shadow:var(--shadow);
  width:min(760px,100%);max-height:calc(100vh - 48px);overflow:hidden;
  display:flex;flex-direction:column;
}
.wv-header{padding:var(--s5) var(--s5) var(--s4);text-align:center}
.wv-header h1{font-size:23px;font-weight:800;letter-spacing:-.04em;color:var(--text);margin:0 0 6px}
.wv-logo{width:44px;height:44px;border-radius:13px;margin:0 auto var(--s3);
         background:var(--inv-bg);color:var(--inv-fg);display:grid;place-items:center}
.wv-message{font-size:14px;color:var(--text-2);margin:0}
.wv-video-wrap{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden}
.wv-video{width:100%;height:100%;object-fit:contain;display:block}
.wv-controls{
  position:absolute;inset:auto 0 0 0;padding:var(--s3) var(--s4);
  background:linear-gradient(to top,rgba(0,0,0,.8),transparent);
  display:flex;align-items:center;gap:var(--s3);
}
.wv-play-btn,.wv-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:inherit;font-size:13.5px;font-weight:600;
  padding:9px 15px;border-radius:10px;cursor:pointer;border:0;
  background:var(--inv-bg);color:var(--inv-fg);
}
.wv-play-btn{width:44px;height:44px;padding:0;border-radius:50%;background:#FAFAFA;color:#0B0B0D}
.wv-progress-wrap{flex:1;height:5px;border-radius:var(--r-pill);background:rgba(255,255,255,.25);overflow:hidden}
.wv-progress-bar{height:100%;background:#FAFAFA;width:0;transition:width .2s linear}
.wv-timer{font-size:12px;color:#FAFAFA;font-variant-numeric:tabular-nums;white-space:nowrap}
.wv-instructions{padding:var(--s4) var(--s5);border-top:1px solid var(--hair)}
.wv-instruction{font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:8px;margin-bottom:6px}
.wv-container .wv-btn[disabled]{opacity:.4;cursor:not-allowed}

/* --- 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. */

   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 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}
/* margin:auto centres a flex item on BOTH axes and does not depend on
   justify-content surviving, which is what left dialogs pinned to the edge. */
.modal-overlay > .modal-content{margin:auto}

/* --- 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 14 — AI CHAT CORRECTIONS
   ========================================================================== */
/* The window must be hidden until opened; leaving it displayed showed a strip
   of the input bar above the launcher at all times. */
.gchat-container{display:block}          /* outer wrapper: holds BOTH button and window */
#gchat-window,.gchat-window{display:none}
#gchat-window.active,.gchat-window.active,
#gchat-window.open,.gchat-window.open{display:flex}

/* Kill the residual blue from the original chat styling. */
.gchat-header,.gchat-header-title{background:var(--surface);color:var(--text)}
.gchat-header{border-bottom:1px solid var(--hair)}
.gchat-ai-badge{background:var(--gain);color:#fff}
.gchat-send-button{border-radius:var(--r-pill);width:36px;height:36px;flex:0 0 36px}
.gchat-content [class*="user"],.gchat-content .user-message,
.gchat-content .gchat-user{background:var(--inv-bg)!important;color:var(--inv-fg)!important}
.gchat-content .bot-message,.gchat-content .gchat-bot,

/* ==========================================================================
   RECOVERED — sticky footer, empty states, AI assistant.
   These were lost when the global stylesheet was split into per-page files:
   the section containing them was not assigned to any of the new files, so
   67 selectors silently disappeared (the whole AI chat among them).
   ========================================================================== */
/* --- 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}
/* .app is display:flex. Without an explicit flex basis a converted page's
   <main class="content"> can size to its own content instead of filling the
   space beside the rail — which collapses the whole page into a narrow column. */
.app > .content{flex:1 1 auto;min-width:0}
.main{display:flex;flex-direction:column;min-height:100vh}

/* EXAMPLE PORTFOLIO BANNER.
   ⚠️ Defined here because `.main` is here and every page loads this file — the
   banner is a direct child of `.main`, so its styles belong beside it.
   `flex:0 0 auto` because `.main` is a flex column: without it the bar
   stretches or shrinks depending on the page below.
   Amber, not red: nothing is wrong, but it needs attention. */
.demo-bar{
  flex:0 0 auto;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:9px 16px;background:#b45309;color:#fff;font-size:13px;line-height:1.4;
}
.demo-bar b{font-weight:700}
.demo-bar span{opacity:.92}
.demo-bar.is-blocked{background:#b42318}
.demo-dot{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.9;flex:none}
.demo-bar a{
  margin-left:auto;padding:4px 12px;border-radius:999px;
  background:rgba(255,255,255,.18);color:#fff;
  font-weight:650;text-decoration:none;white-space:nowrap;
}
.demo-bar a:hover{background:rgba(255,255,255,.3)}
@media (max-width:640px){ .demo-bar a{margin-left:0} }
.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}


/* ==========================================================================
   AI ASSISTANT — matched to the design system
   ========================================================================== */
#gchat-button,.gchat-button{
  position:fixed;right:20px;bottom:20px;z-index:900;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--hair-2);
  background:var(--inv-bg);color:var(--inv-fg);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--shadow);transition:transform var(--fast),box-shadow var(--fast);
}
#gchat-button:hover,.gchat-button:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.gchat-button-icon{font-size:20px;line-height:1}
.gchat-ai-badge{
  position:absolute;top:-3px;right:-3px;
  background:var(--gain);color:#fff;font-size:9px;font-weight:700;
  padding:2px 6px;border-radius:var(--r-pill);
}
#gchat-window,.gchat-window{
  /* Anchored to the SAME corner as the launcher, so the panel's bottom-right
     lands exactly where the circle was instead of floating above it. */
  position:fixed;right:20px;bottom:20px;z-index:902;
  width:min(380px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 56px));
  background:var(--surface);border:1px solid var(--hair-2);
  border-radius:var(--r-xl);box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;
}
.gchat-header{
  padding:var(--s4);border-bottom:1px solid var(--hair);
  display:flex;align-items:center;gap:10px;background:var(--surface);
}
.gchat-header-title{font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.gchat-logo{width:30px;height:30px;border-radius:9px;object-fit:cover;background:var(--surface-3)}
.gchat-close-button{
  margin-left:auto;width:28px;height:28px;border-radius:8px;
  border:1px solid var(--hair-2);background:var(--surface-2);color:var(--text-2);cursor:pointer;
}
.gchat-close-button:hover{background:var(--surface-3);color:var(--text)}
.gchat-content{flex:1;overflow-y:auto;padding:var(--s4);background:var(--bg)}
.gchat-input-area{
  padding:var(--s3) var(--s4) var(--s4);border-top:1px solid var(--hair);
  background:var(--surface);
}
.gchat-input-wrapper{display:flex;gap:var(--s2);align-items:flex-end}
#gchat-user-input{
  flex:1;background:var(--surface-2);border:1px solid var(--hair-2);color:var(--text);
  border-radius:12px;padding:10px 13px;font-size:14.5px;resize:none;max-height:120px;
}
#gchat-user-input:focus{outline:none;border-color:var(--text-3);background:var(--surface)}
.gchat-send-button{
  width:38px;height:38px;flex:0 0 38px;border-radius:10px;border:0;cursor:pointer;
  background:var(--inv-bg);color:var(--inv-fg);display:grid;place-items:center;
}
.gchat-send-button:hover{opacity:.88}
.gchat-dots{display:flex;gap:4px;padding:var(--s3)}
.gchat-dot{
  width:6px;height:6px;border-radius:50%;background:var(--text-3);
  animation:gchatBounce 1.2s infinite ease-in-out;
}
.gchat-dot:nth-child(2){animation-delay:.15s}
.gchat-dot:nth-child(3){animation-delay:.3s}
@keyframes gchatBounce{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.gchat-upgrade-prompt{
  background:var(--surface-2);border-radius:var(--r-md);padding:var(--s4);
  text-align:center;
}
.gchat-upgrade-icon{font-size:22px;color:var(--flag);margin-bottom:var(--s2)}
.gchat-upgrade-text{font-size:13px;color:var(--text-2);line-height:1.5}
.gchat-upgrade-features{display:flex;flex-direction:column;gap:6px;margin:var(--s3) 0;text-align:left}
.gchat-upgrade-feature{font-size:12.5px;color:var(--text-2);display:flex;align-items:center;gap:7px}
.gchat-upgrade-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 15px;border-radius:10px;border:0;cursor:pointer;
  background:var(--inv-bg);color:var(--inv-fg);font-weight:600;font-size:13.5px;text-decoration:none;
}
/* Chat window hidden until opened; the container holds the launcher and must
   never be hidden with it. */
.gchat-container{display:block}
#gchat-window,.gchat-window{display:none}
#gchat-window.active,.gchat-window.active,
#gchat-window.open,.gchat-window.open{display:flex}
.gchat-ai-badge{
  position:static;margin-left:6px;display:inline-flex;align-items:center;
  padding:2px 7px;font-size:9.5px;line-height:1.4;flex:0 0 auto;
}
.gchat-header{align-items:center}
.gchat-input-wrapper{align-items:center}
.gchat-send-button{align-self:center}