/**
 * pi-polish.css — PI Layout Polish
 * Batch 51: Property summary row, KPI cards, deal timeline, market pulse,
 *           strategy subtabs, PI header buttons, and Deal Score card repositioning.
 *
 * ALL selectors verified from source files. Zero hardcoded colors.
 * Comments cite source file for each selector.
 */

/* ============================================================
   PROPERTY SUMMARY ROW
   Selectors from: css/pi-layout.css (.pi-summary-row)
   ============================================================ */

/* from css/pi-layout.css: .pi-summary-row */
.pi-summary-row {
    min-height: 88px;
    background: var(--surface-card);   /* verified: base.css --surface-card */
    border-radius: 12px;               /* --radius-md */
    border: 1px solid var(--glass-border);
    padding: 12px 16px;
    align-items: center;
    gap: 16px;
}

/* from css/pi-layout.css: .pi-summary-photo */
.pi-summary-photo {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background: var(--glass-bg);       /* closest to --surface-2; base.css glass bg */
    object-fit: cover;
    flex-shrink: 0;
}

/* from css/pi-layout.css: .pi-summary-chip */
.pi-summary-chip {
    height: 28px;
    font-size: 0.75rem;
    gap: 8px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--surface-card);
    display: inline-flex;
    align-items: center;
}

/* ============================================================
   KPI CARDS ROW
   Selectors from: css/pi-dashboards.css (.dash-kpi-row, .dash-metric-card)
   ============================================================ */

/* from css/pi-dashboards.css: .dash-kpi-row */
.dash-kpi-row {
    gap: 8px;
}

/* from css/pi-dashboards.css: .dash-metric-card */
.dash-metric-card {
    min-height: 68px;
    padding: 10px 14px;
    background: var(--surface-card);     /* verified: base.css --surface-card */
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06); /* acceptable shadow-only rgba */
}

/* from css/pi-dashboards.css: .dash-metric__value */
.dash-metric__value {
    font-family: var(--font-display);    /* verified: base.css --font-display = Orbitron */
    font-size: 1.1rem;
    color: var(--gold-500);              /* verified: base.css --gold-500 = #FDA929 */
    letter-spacing: -0.02em;
}

/* from css/pi-dashboards.css: .dash-metric__label */
.dash-metric__label {
    font-size: 0.62rem;
    font-family: var(--font-heading);    /* Exo 2 */
    text-transform: uppercase;
    color: var(--text-muted);            /* verified: base.css --text-muted */
    letter-spacing: var(--tracking-widest);
}

/* ============================================================
   DEAL TIMELINE STRIP
   Selectors from: css/deal-timeline.css (#lf-deal-timeline, .dt-label, .dt-value)
   ============================================================ */

/* from css/deal-timeline.css: #lf-deal-timeline */
#lf-deal-timeline {
    height: 56px;
    min-height: 56px;
    background: var(--surface-card);
    border-radius: 10px;
    border: 1px solid var(--glass-border);
}

/* from css/deal-timeline.css: .dt-label */
.dt-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: var(--tracking-widest);
}

/* from css/deal-timeline.css: .dt-value, .dt-input */
.dt-value,
.dt-input {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue-steel);            /* verified: base.css --blue-steel = #134160 */
}

/* ============================================================
   MARKET PULSE STRIP
   Selectors from: css/market-pulse.css (#lf-market-pulse, .mp-value, .mp-label)
   ============================================================ */

/* from css/market-pulse.css: #lf-market-pulse */
#lf-market-pulse {
    height: 56px;
    min-height: 56px;
    background: var(--surface-card);
    border-radius: 10px;
    border: 1px solid var(--glass-border);
}

/* from css/market-pulse.css: .mp-value */
.mp-value {
    font-size: 0.82rem;
    font-weight: 600;
}

/* from css/market-pulse.css: .mp-label */
.mp-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* ============================================================
   STRATEGY SUBTABS IN PI HEADER
   Selectors from: css/pi-layout.css (.pi-strategy-tab, .pi-strategy-tab--active)
   ============================================================ */

/* from css/pi-layout.css: .pi-strategy-tab */
.pi-strategy-tab {
    height: 28px;
    padding: 0 14px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--glass-border);
}

/* from css/pi-layout.css: .pi-strategy-tab.pi-strategy-tab--active */
.pi-strategy-tab.pi-strategy-tab--active {
    background: var(--gold-500);         /* verified: base.css --gold-500 */
    color: var(--text-inverse);          /* verified: base.css --text-inverse = #020b12 */
    border-color: var(--gold-500);
    font-weight: 600;
    text-decoration: none;
    border-bottom: none;
}

/* Remove any underline-only active indicator */
.pi-strategy-tab.pi-strategy-tab--active::after {
    display: none;
}

/* ============================================================
   PI HEADER BUTTONS
   Selectors from: css/pi-layout.css (.pi-reports-btn, .pi-run-btn)
   ============================================================ */

/* from css/pi-layout.css: .pi-reports-btn — ghost button */
.pi-reports-btn {
    height: 32px;
    font-size: 0.78rem;
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);           /* verified: base.css --text-secondary */
    border-radius: 10px;
}

/* from css/pi-layout.css: .pi-run-btn — gold pill */
.pi-run-btn {
    height: 32px;
    font-size: 0.78rem;
    padding: 0 14px;
    background: var(--gold-500);            /* verified: base.css --gold-500 */
    border-radius: 10px;
    border: none;
    color: var(--text-inverse);             /* verified: base.css --text-inverse = #020b12 */
    font-weight: 700;
}

/* ============================================================
   DEAL SCORE CARD — Batch 52 Redesign
   Selectors verified against css/deal-score.css source.
   Card (#lf-deal-score-header) lives inside .pi-summary-row (confirmed in index.html).
   Scoped to #lf-deal-score-header to avoid touching quick-mode ring.
   ============================================================ */

/* Deal Score Card — pi-polish.css overrides */
#lf-deal-score-header.lf-deal-score-card {          /* verified from deal-score.css */
    width: 140px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    position: static;
    margin-left: auto;
    gap: 4px;
    background: var(--surface-card);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

/* Ring — 96px diameter, 10px thick donut */
#lf-deal-score-header .deal-score__ring {           /* verified from deal-score.css */
    width: 96px;
    height: 96px;
    background: conic-gradient(var(--score-color, var(--text-muted)) calc(var(--score-pct, 0) * 1%), var(--surface-dark, rgba(5,22,34,0.80)) calc(var(--score-pct, 0) * 1%));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Inner cutout for donut */
#lf-deal-score-header .deal-score__ring::before {   /* verified from deal-score.css */
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--bg-abyss-mid);
    z-index: 0;
}

/* Score number — 2.2rem per spec */
#lf-deal-score-header .deal-score__number {         /* verified from deal-score.css */
    font-size: 2.2rem;
    font-family: var(--font-display);
    color: var(--score-color, var(--text-muted));
    position: relative;
    z-index: 1;
}

/* Label below ring */
#lf-deal-score-header .deal-score__label {          /* verified from deal-score.css */
    font-size: 0.62rem;
    font-family: var(--font-heading);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 4px;
    letter-spacing: 0.06em;
}

/* Signals — show only first signal line, hide the rest */
#lf-deal-score-header .deal-score__signals {        /* verified from deal-score.css */
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    width: 100%;
}

#lf-deal-score-header .deal-score__signal:not(:first-child) {  /* verified from deal-score.css */
    display: none;
}

#lf-deal-score-header .deal-score__signal:first-child { /* verified from deal-score.css */
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

/**
 * ============================================================
 * BATCH 53 — VISUAL QA PASS
 * Append-only additions. All selectors verified from source.
 * Comments cite origin file for each rule.
 * Zero hardcoded colors (rgba shadow exceptions noted).
 * ============================================================
 */

/* ============================================================
   MARKET PULSE — SIMULATED BADGE
   from css/market-pulse.css: .mp-badge-simulated
   ============================================================ */
/* from css/market-pulse.css: .mp-badge-simulated */
.mp-badge-simulated {
    font-size: 0.58rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ============================================================
   DEAL TIMELINE — DIVIDER LINES
   from css/deal-timeline.css: .dt-field + .dt-field::before
   ============================================================ */
/* from css/deal-timeline.css: .dt-field dividers */
.dt-field + .dt-field::before {
    background: var(--glass-border);   /* 1px solid var(--glass-border) */
    width: 1px;
}

/* ============================================================
   AI AGENT PANEL CARDS
   from css/property-intelligence.css: .pi-ai-card, .pi-ai-card__title, .pi-ai-card__text
   ============================================================ */
/* from css/property-intelligence.css: .pi-ai-card */
.pi-ai-card {
    min-height: 80px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--surface-card);
}

/* from css/property-intelligence.css: .pi-ai-card__title */
.pi-ai-card__title {
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--blue-steel);          /* verified: base.css --blue-steel = #134160 */
    letter-spacing: var(--tracking-widest);
}

/* from css/property-intelligence.css: .pi-ai-card__text */
.pi-ai-card__text {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ============================================================
   SCENARIO MODAL — STEP PROGRESS BAR
   from css/scenario-modal.css: .sm-step__num, step states, connectors
   ============================================================ */

/* from css/scenario-modal.css: .sm-step__num — 32px circles */
.sm-step__num {
    width: 32px;
    height: 32px;
    font-size: 0.78rem;
    border: 1px solid var(--glass-border);
    background: var(--surface-card);
    color: var(--text-muted);
    border-radius: 999px;
}

/* from css/scenario-modal.css: .sm-step--active .sm-step__num */
.sm-step--active .sm-step__num {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--text-inverse);
}

/* from css/scenario-modal.css: .sm-step--done .sm-step__num */
.sm-step--done .sm-step__num {
    background: var(--blue-steel);
    border-color: var(--blue-steel);
    color: var(--text-primary);        /* near-white #eaf2f7 on navy */
}

/* from css/scenario-modal.css: .sm-step-connector — 2px lines */
.sm-step-connector {
    height: 2px;
    background: var(--glass-border);
}

/* from css/scenario-modal.css: .sm-step-connector--done */
.sm-step-connector--done {
    background: var(--blue-steel);
}

/* NOTE: .sm-preset / preset button class not found in index.html or CSS source —
   skipped per spec instructions */

/* from css/scenario-modal.css: .sm-step-panel (step content container) */
.sm-step-panel {
    min-height: 380px;
    padding: 16px;
    background: var(--glass-bg);       /* closest to --surface-1 */
    border-radius: 10px;
}

/* ============================================================
   SCENARIO MODAL — FOOTER BUTTONS
   from css/scenario-modal.css: .sm-btn-back, .sm-btn-next, .sm-btn-save
   ============================================================ */

/* from css/scenario-modal.css: .sm-btn-back */
.sm-btn-back {
    height: 40px;
    background: transparent;
    border: 1.5px solid var(--glass-border);
}

/* from css/scenario-modal.css: .sm-btn-next */
.sm-btn-next {
    height: 40px;
    background: var(--btn-primary-bg);  /* var(--gold-500) */
    color: var(--btn-primary-fg);       /* var(--text-inverse) */
    font-weight: 700;
}

/* from css/scenario-modal.css: .sm-btn-save */
.sm-btn-save {
    height: 44px;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 10px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
}

/* ============================================================
   COMPS TAB — SUGGESTED COMP CARDS
   from css/comps-suggest.css: .comp-suggest-card, .comp-suggest-badge,
     .comp-suggest-address, .comp-suggest-price, .comp-suggest-meta,
     .comp-suggest-btn--confirm, .comp-suggest-btn--dismiss
   ============================================================ */

/* from css/comps-suggest.css: .comp-suggest-card */
.comp-suggest-card {
    border-left: 4px solid var(--gold-400);
    border-radius: 10px;
    padding: 14px;
    background: var(--gold-alpha-10);  /* closest to gold-alpha-05; token exists */
    margin-bottom: 8px;
}

/* from css/comps-suggest.css: .comp-suggest-badge */
.comp-suggest-badge {
    font-size: 0.62rem;
}

/* from css/comps-suggest.css: .comp-suggest-address */
.comp-suggest-address {
    font-size: 0.88rem;
    font-weight: 600;
}

/* from css/comps-suggest.css: .comp-suggest-price */
.comp-suggest-price {
    font-size: 0.95rem;
    color: var(--gold-500);
    font-weight: 700;
}

/* from css/comps-suggest.css: .comp-suggest-meta */
.comp-suggest-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* from css/comps-suggest.css: .comp-suggest-btn--confirm */
.comp-suggest-btn--confirm {
    height: 32px;
    background: var(--blue-steel);
    color: var(--text-inverse);        /* white text token */
    border-radius: 8px;
    border: 1px solid var(--blue-steel);
}

/* from css/comps-suggest.css: .comp-suggest-btn--dismiss */
.comp-suggest-btn--dismiss {
    height: 32px;
    background: transparent;
    border: 1px solid var(--blue-steel);
    color: var(--text-muted);
    border-radius: 8px;
}

/* ============================================================
   COMPS TAB — ARV SECTION HEADER + ADD COMP BTN
   from css/comps-tab.css: .comps-col-left__header (title text is bare span, no class)
   ============================================================ */

/* from css/comps-tab.css: .comps-col-left__header — label text styling */
.comps-col-left__header {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}

/* from css/comps-tab.css: .comps-add-btn */
.comps-add-btn {
    background: var(--btn-primary-bg);  /* var(--gold-500) */
    height: 32px;
    border-radius: 8px;
    font-size: 0.75rem;
}

/* ============================================================
   COMPS TAB — MAP PLACEHOLDER
   from css/comps-tab.css: .comps-map-placeholder
   ============================================================ */

/* from css/comps-tab.css: .comps-map-placeholder */
.comps-map-placeholder {
    border-radius: 12px;
    min-height: 320px;
    background: var(--glass-bg);       /* closest to --surface-2 */
    border: 1px solid var(--glass-border);
}

/* from css/comps-tab.css: .comps-map-address */
.comps-map-address {
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
}

/* ============================================================
   COMPS TAB — DERIVED ARV DISPLAY
   from css/comps-tab.css: .comps-arv-section, .comps-arv-value, .comps-method-chip
   ============================================================ */

/* from css/comps-tab.css: .comps-arv-section */
.comps-arv-section {
    background: var(--surface-card);
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    padding: 12px;
}

/* from css/comps-tab.css: .comps-arv-value */
.comps-arv-value {
    font-size: 1.2rem;
    font-family: var(--font-display);
    color: var(--gold-500);
    font-weight: var(--weight-bold);
}

/* from css/comps-tab.css: .comps-method-chip */
.comps-method-chip {
    font-size: 0.72rem;
    border-radius: 999px;
}

/* ============================================================
   SIDEBAR — PROPERTY LIST ITEMS
   from css/sidebar.css: .lf-property-item, .lf-prop-chip, .lf-prop-active
   ============================================================ */

/* from css/sidebar.css: .lf-property-item */
.lf-property-item {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 0.8rem;
}

/* from css/sidebar.css: .lf-prop-chip */
.lf-prop-chip {
    font-size: 0.62rem;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
}

/* from css/sidebar.css: .lf-property-item.lf-prop-active */
.lf-property-item.lf-prop-active {
    background: var(--gold-alpha-10);
    border-left: 3px solid var(--gold-500);
}

/* ============================================================
   SIDEBAR — NAV BUTTONS
   from css/sidebar.css: .lf-sb-btn-primary, .lf-sb-btn-ghost
   ============================================================ */

/* from css/sidebar.css: .lf-sb-btn-ghost (dashboard / nav button) */
.lf-sb-btn-ghost {
    height: 36px;
    border-radius: 8px;
    font-size: 0.82rem;
    padding: 0 12px;
    text-align: left;
    width: 100%;
}

/* from css/sidebar.css: .lf-sb-btn-primary (New Property button) */
.lf-sb-btn-primary {
    height: 40px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
}

/* ============================================================
   SIDEBAR — SEARCH INPUT
   from css/sidebar.css: .lf-sb-search, .lf-sb-search-input
   ============================================================ */

/* from css/sidebar.css: .lf-sb-search */
.lf-sb-search {
    height: 34px;
    border-radius: 8px;
}

/* from css/sidebar.css: .lf-sb-search-input */
.lf-sb-search-input {
    font-size: 0.8rem;
    padding: 0 10px 0 32px;
}

/* ============================================================
   SIDEBAR — USER BUTTON + AVATAR
   from css/sidebar.css: .lf-sb-user-btn, .lf-sb-avatar
   ============================================================ */

/* from css/sidebar.css: .lf-sb-user-btn */
.lf-sb-user-btn {
    height: 48px;
    border-radius: 10px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* from css/sidebar.css: .lf-sb-avatar */
.lf-sb-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--gold-alpha-20);
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ============================================================
   GENERAL — GLASS CARD
   from css/base.css: .glass-card
   ============================================================ */

/* from css/base.css: .glass-card */
.glass-card {
    border-radius: 12px;
    background: var(--surface-card);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* ============================================================
   GENERAL — MODAL CARD (sm-card)
   from css/scenario-modal.css: .sm-card
   ============================================================ */

/* from css/scenario-modal.css: .sm-card */
.sm-card {
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
}

/* ============================================================
   DECISION HERO CARD
   from css/pi-dashboards.css: .dash-hero, .dash-hero__offer, .dash-hero__mao,
     .dash-conf-ring-wrap, .dash-hero__actions
   ============================================================ */

/* from css/pi-dashboards.css: .dash-hero */
.dash-hero {
    border-radius: 14px;
    padding: 20px 24px;
    border-left: 4px solid var(--gold-500);
    overflow: visible;
}

/* from css/pi-dashboards.css: .dash-hero__offer (suggested offer) */
.dash-hero__offer {
    font-size: 2rem;
    font-family: var(--font-display);
    color: var(--gold-500);
}

/* from css/pi-dashboards.css: .dash-hero__mao (MAO reference) */
.dash-hero__mao {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* from css/pi-dashboards.css: .dash-conf-ring-wrap (confidence ring — 72px) */
.dash-conf-ring-wrap {
    width: 72px;
    height: 72px;
}

/* from css/pi-dashboards.css: .dash-conf-ring (confidence ring itself) */
.dash-conf-ring {
    width: 72px;
    height: 72px;
}

/* from css/pi-dashboards.css: .dash-hero__actions */
.dash-hero__actions {
    gap: 8px;
    margin-top: 14px;
}

/**
 * ============================================================
 * BATCH 57 — COLOR CONTRAST + VISUAL HIERARCHY + TEXT FIXES
 * Append-only. All selectors verified from source files.
 * Zero new hardcoded colors except contrast-fixed gold #b8771a
 * and brand navy #134160. No layout changes — color, typography,
 * hover states only.
 * ============================================================
 */

/* ============================================================
   FIX 1 — GOLD TEXT CONTRAST ON LIGHT BACKGROUNDS
   Problem: var(--gold-500) = #FDA929 fails contrast on white/light grey.
   Fix: override to #b8771a (darker gold, passes WCAG AA).

   Targets confirmed from source:
     - .dash-metric__value--gold  → css/pi-dashboards.css:94
     - .pi-kpi__value             → css/property-intelligence.css:577
     - .dash-hero__offer          → css/pi-dashboards.css:487 + pi-polish.css:690
     - .pi-suggested-offer        → css/property-intelligence.css:611
     - .offer-card__price--target → css/offer-range.css:107
     - .comps-arv-value           → css/comps-tab.css verified
     - .comp-suggest-price        → css/comps-suggest.css verified
   ============================================================ */

/* Gold data values — darker readable gold on light bg */
/* selectors from pi-dashboards.css, property-intelligence.css, offer-range.css */
.dash-metric__value--gold,
.pi-kpi__value,
.dash-hero__offer,
.pi-suggested-offer,
.offer-card__price--target,
.comps-arv-value,
.comp-suggest-price {
    color: #b8771a;
    text-shadow: none;
}

/* Navy data values: ARV / MAO etc — ensure --blue-steel, no light blue */
/* targets dash-metric__value (ARV, MAO, nav values) on light bg */
/* from pi-dashboards.css: .dash-metric__value uses var(--text-cyan) which maps to #134160 in light theme */
.dash-metric__value {
    color: var(--blue-steel);       /* #134160 — dark enough on white */
    text-shadow: none;
}

/* ============================================================
   FIX 2 — VISUAL HIERARCHY IN PROPERTY INTELLIGENCE
   Primary / secondary / tertiary size differentiation.

   Sources:
     - .pi-kpi__value             → css/property-intelligence.css:577
     - .dash-hero__offer          → css/pi-dashboards.css:487
     - .pi-kpi__label             → css/property-intelligence.css:568
     - .pi-kpi-section__title     → css/property-intelligence.css:540
     - .dash-card__title          → css/pi-dashboards.css:113
     - .dash-metric__label        → css/pi-dashboards.css:83
   ============================================================ */

/* PRIMARY — ARV, Suggested Offer, Deal Score value: ≥1.3rem Orbitron, 700 */
/* from property-intelligence.css: .pi-kpi__value */
.pi-kpi__value,
.dash-hero__offer,
.pi-suggested-offer {
    font-size: 1.3rem;
    font-family: var(--font-display);   /* Orbitron */
    font-weight: 700;
}

/* SECONDARY — Rehab Cost, MAO, ROI: 1.0rem Orbitron, 600 */
/* from pi-dashboards.css: .dash-metric__value */
.dash-metric__value {
    font-size: 1.0rem;
    font-family: var(--font-display);   /* Orbitron */
    font-weight: 600;
}

/* TERTIARY LABELS — tiny uppercase Exo 2 */
/* from property-intelligence.css: .pi-kpi__label */
/* from pi-dashboards.css: .dash-metric__label, .dash-card__title */
.pi-kpi__label,
.pi-kpi-section__title,
.dash-metric__label,
.pi-kpi-section__title {
    font-size: 0.62rem;
    font-family: var(--font-heading);   /* Exo 2 */
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* SECTION HEADERS inside strategy panels */
/* from pi-dashboards.css: .dash-card__title */
.dash-card__title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #134160;
    border-bottom: 1px solid var(--border-subtle, var(--glass-border));
    padding-bottom: 6px;
    margin-bottom: 12px;
}

/* ============================================================
   FIX 3 — TEXT OVERFLOW IN MONTHLY CASH FLOW
   Prevent value overflow in KPI / metric cards.

   Sources:
     - .dash-metric-card           → css/pi-dashboards.css:53
     - .pi-kpi-card                → css/property-intelligence.css:555
     - .dash-cashflow-indicator    → css/pi-dashboards.css:285
     - .dash-cashflow-indicator__value → css/pi-dashboards.css:306
   ============================================================ */

/* Flex children: min-width:0 prevents overflow blowout */
/* from pi-dashboards.css: .dash-metric-card */
.dash-metric-card {
    min-width: 0;
    overflow: hidden;
}

/* from property-intelligence.css: .pi-kpi-card */
.pi-kpi-card {
    min-width: 0;
    overflow: hidden;
}

/* Value elements: clip overflowing text */
/* from pi-dashboards.css: .dash-metric__value (already has white-space/overflow/text-overflow — reinforce) */
.dash-metric__value,
.pi-kpi__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Cash flow specific: allow shrink with a floor */
/* from pi-dashboards.css: .dash-cashflow-indicator__value */
.dash-cashflow-indicator__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 80px;
}

/* ============================================================
   FIX 4 — COMPS TAB EMPTY STATE
   Styled empty state when #arv-comps-list has no comp cards.

   Sources:
     - #arv-comps-list             → index.html:830 (div.comps-list#arv-comps-list)
     - .comps-add-btn              → css/comps-tab.css, pi-polish.css
   ============================================================ */

/* Empty state via :empty pseudo — fires when list has no children */
#arv-comps-list:empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    border: 1.5px dashed var(--glass-border);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
}

#arv-comps-list:empty::before {
    content: "⊕";
    font-size: 2rem;
    color: var(--text-dim);
    margin-bottom: 8px;
    display: block;
}

#arv-comps-list:empty::after {
    content: "No comparables added yet\a Click Add Comp to get started";
    white-space: pre;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.8;
    display: block;
}

/* Pulse the Add Comp button when list is empty — gold border pulse */
/* Targets #arv-comps-add-btn sibling via JS-added class or direct selector */
/* Fallback: always apply pulse on .comps-add-btn when empty state is visible */
#arv-comps-list:empty ~ * .comps-add-btn,
#arv-comps-list:empty + .comps-add-btn,
.comps-col-left__header .comps-add-btn {
    border: 1.5px solid var(--gold-500);
    animation: compsAddPulse 2s ease-in-out infinite;
}

@keyframes compsAddPulse {
    0%   { box-shadow: 0 0 0 0 rgba(253, 169, 41, 0.0); border-color: var(--gold-500); }
    50%  { box-shadow: 0 0 0 4px rgba(253, 169, 41, 0.22); border-color: var(--gold-400); }
    100% { box-shadow: 0 0 0 0 rgba(253, 169, 41, 0.0); border-color: var(--gold-500); }
}

/* ============================================================
   FIX 5 — BUTTON HOVER STATES
   Universal hover improvements. 0.15s ease across the board.

   Sources:
     - .btn-primary     → css/base.css
     - .btn-secondary   → css/base.css
     - .glass-card      → css/base.css + pi-polish.css
     - .pi-strategy-tab → css/pi-layout.css + pi-polish.css
   ============================================================ */

/* .btn-primary hover — lift + gold glow */
/* from base.css: .btn-primary */
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(253, 169, 41, 0.25);
    transition: all 0.15s ease;
}

/* .btn-secondary hover — lift + navy shadow */
/* from base.css: .btn-secondary */
.btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(19, 65, 96, 0.15);
    transition: all 0.15s ease;
}

/* .glass-card hover — lift + soft shadow */
/* from base.css: .glass-card */
.glass-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.15s ease;
}

/* Strategy subtabs — inactive hover: subtle tint */
/* from pi-layout.css: .pi-strategy-tab (inactive) */
.pi-strategy-tab:not(.pi-strategy-tab--active):hover {
    background: rgba(19, 65, 96, 0.06);
    transition: background 0.15s ease;
}

/* Universal transition: all interactive elements */
/* Catch-all for any remaining button/card transitions */
.btn-primary,
.btn-secondary,
.glass-card,
.pi-strategy-tab,
.dash-metric-card,
.pi-kpi-card {
    transition: all 0.15s ease;
}


/**
 * ============================================================
 * BATCH 58 — PROPERTY INTELLIGENCE DENSITY REDUCTION
 * Append-only. All selectors verified from source files.
 * Spacing and grouping only — no layout changes.
 * Zero hardcoded colors except white (#ffffff) for card backgrounds.
 * Must not break 1280px viewport layout.
 * ============================================================
 */

/* ============================================================
   FIX 1 — SECTION SPACING IN PI TAB
   Increase breathing room between every major section stacked
   inside #lf-tab-intel:
     #lf-deal-progress → .pi-summary-row → #lf-deal-timeline
     → #lf-market-pulse → .pi-strategy-area
   All are direct children of #lf-tab-intel (flex column).
   Sources:
     - #lf-tab-intel         → index.html:366 (lf-tab-panel)
     - #lf-deal-progress     → index.html; css/deal-progress.css
     - .pi-summary-row       → css/pi-layout.css:163
     - #lf-deal-timeline     → css/deal-timeline.css
     - #lf-market-pulse      → css/market-pulse.css
   ============================================================ */

/* #lf-tab-intel is a flex-column container — add gap between children */
/* from index.html: #lf-tab-intel.lf-tab-panel */
#lf-tab-intel {
    display: flex;
    flex-direction: column;
    gap: 0;            /* gap handled per-element to avoid strategy-area issue */
}

/* Gap below each major strip/section */
/* from css/deal-progress.css: #lf-deal-progress */
#lf-deal-progress {
    margin-bottom: 16px;
}

/* from css/pi-layout.css: .pi-summary-row */
.pi-summary-row {
    margin-bottom: 16px;
}

/* from css/deal-timeline.css: #lf-deal-timeline */
#lf-deal-timeline {
    margin-bottom: 8px;
}

/* from css/market-pulse.css: #lf-market-pulse */
#lf-market-pulse {
    margin-bottom: 16px;
}

/* ============================================================
   FIX 2 — STRATEGY PANEL INTERNAL SPACING
   Increase padding inside .pi-strategy-panel and
   add breathing room between KPI row and content below.
   Sources:
     - .pi-strategy-panel    → css/pi-layout.css:279 (14px 16px, gap:12px)
     - .pi-dashboard         → css/pi-dashboards.css:10 (gap:10px, padding:14px 16px)
     - .dash-kpi-row         → css/pi-dashboards.css:46
   ============================================================ */

/* from css/pi-layout.css: .pi-strategy-panel — increase internal padding + gap */
.pi-strategy-panel {
    padding: 20px 24px;
    gap: 16px;
}

/* from css/pi-dashboards.css: .pi-dashboard — increase internal gap */
.pi-dashboard {
    gap: 16px;
    padding: 0;        /* panel already has 20px 24px — avoid double padding */
}

/* KPI row → content below: extra top margin on all non-KPI direct children */
/* from css/pi-dashboards.css: .dash-card, .dash-hero, .dash-cashflow-indicator, .lf-dna-card */
.dash-kpi-row + .dash-card,
.dash-kpi-row + .dash-hero,
.dash-kpi-row + .dash-cashflow-indicator,
.dash-kpi-row + .lf-dna-card {
    margin-top: 20px;
}

/* ============================================================
   FIX 3 — KPI CARDS ROW BREATHING ROOM
   Gap between cards: 12px. Floor/ceiling widths. Vertical padding.
   Allow wrap on small viewports.
   Sources:
     - .dash-kpi-row         → css/pi-dashboards.css:46
     - .dash-metric-card     → css/pi-dashboards.css:53
   ============================================================ */

/* from css/pi-dashboards.css: .dash-kpi-row */
.dash-kpi-row {
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 0;
}

/* from css/pi-dashboards.css: .dash-metric-card */
.dash-metric-card {
    min-width: 110px;
    max-width: 160px;
}

/* ============================================================
   FIX 4 — DEAL DNA + DECISION HERO SEPARATION
   These two cards sit sequentially in .pi-dashboard flex column.
   Add gap between them.
   Sources:
     - .lf-dna-card          → css/deal-dna.css:20
     - .dash-hero            → css/pi-dashboards.css:442
     - .dash-decision-box    → css/pi-dashboards.css:214
   ============================================================ */

/* When DNA card is followed by hero / decision box */
.lf-dna-card + .dash-hero,
.lf-dna-card + .dash-decision-box,
.dash-hero + .lf-dna-card {
    margin-top: 20px;
}

/* Container holding DNA + hero side-by-side (if flex row) */
/* from css/pi-layout.css: .pi-strategy-bottom (flex row) */
.pi-strategy-bottom {
    gap: 20px;
}

/* ============================================================
   FIX 5 — AI AGENT PANEL CARDS INTERNAL SPACING
   4-card 2×2 grid. More gap, more padding, min-height, title margin.
   Sources:
     - .pi-ai-panel__grid    → css/property-intelligence.css:404 (gap:1px)
     - .pi-ai-card           → css/property-intelligence.css:411 (padding:14px 16px)
     - .pi-ai-card__header   → css/property-intelligence.css:419
   ============================================================ */

/* from css/property-intelligence.css: .pi-ai-panel__grid — increase gap */
.pi-ai-panel__grid {
    gap: 12px;
    background: transparent;   /* was glass-border color used as gap trick — replace with real gap */
    padding: 12px;
}

/* from css/property-intelligence.css: .pi-ai-card — more padding, min-height */
.pi-ai-card {
    padding: 16px;
    min-height: 90px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
}

/* from css/property-intelligence.css: .pi-ai-card__title — margin before body */
.pi-ai-card__title {
    margin-bottom: 6px;
}

/* ============================================================
   FIX 6 — PROPERTY SUMMARY ROW REFINEMENT
   Clean property card feel: white bg, defined padding, photo 72×72.
   Sources:
     - .pi-summary-row       → css/pi-layout.css:163
     - .pi-summary-photo     → css/pi-layout.css:182
     - .pi-summary-facts     → css/pi-layout.css:198
     - .pi-summary-ai-status → css/pi-layout.css:237
   ============================================================ */

/* from css/pi-layout.css: .pi-summary-row */
.pi-summary-row {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    padding: 14px 20px;
    gap: 20px;
    height: auto;
    min-height: 72px;
    max-height: none;
}

/* from css/pi-layout.css: .pi-summary-photo — 72×72 thumbnail */
.pi-summary-photo {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* from css/pi-layout.css: .pi-summary-facts — wrap chips nicely */
.pi-summary-facts {
    flex-wrap: wrap;
    gap: 8px;
}

/* from css/pi-layout.css: .pi-summary-ai-status — push to far right */
.pi-summary-ai-status {
    margin-left: auto;
    flex-shrink: 0;
}

/* ============================================================
   FIX 7 — MARKET PULSE AND TIMELINE STRIP CARD APPEARANCE
   Give both strips a white card-like grouped appearance.
   Sources:
     - #lf-deal-timeline     → css/deal-timeline.css
     - #lf-market-pulse      → css/market-pulse.css
   ============================================================ */

/* from css/deal-timeline.css: #lf-deal-timeline */
#lf-deal-timeline {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    padding: 0 20px;
}

/* from css/market-pulse.css: #lf-market-pulse */
#lf-market-pulse {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    padding: 0 20px;
}

/* ============================================================
   FIX 8 — SECTION LABELS VIA ::before PSEUDO-ELEMENTS
   Visual labels before KPI row and AI panel.
   Sources:
     - .dash-kpi-row         → css/pi-dashboards.css:46
     - .pi-ai-panel          → css/property-intelligence.css:353
   ============================================================ */

/* "DEAL METRICS" label before KPI cards row */
/* from css/pi-dashboards.css: .dash-kpi-row */
.dash-kpi-row::before {
    content: "DEAL METRICS";
    display: block;
    width: 100%;
    font-size: 0.62rem;
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 0.10em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* "AI UNDERWRITING ANALYSIS" label before AI panel */
/* from css/property-intelligence.css: .pi-ai-panel */
.pi-ai-panel::before {
    content: "AI UNDERWRITING ANALYSIS";
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 0.10em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
    padding: 0 2px;
}


/**
 * ============================================================
 * BATCH 63 — LAYOUT FIXES: PI PANEL, COMPS, SCENARIO MODAL, QUICK MODE
 * Append-only. All selectors verified from source files.
 * Zero hardcoded colors.
 * ============================================================
 */

/* ============================================================
   FIX 1 — PI STRATEGY PANEL: TWO-COLUMN LAYOUT
   .pi-dashboard is flex-column. DNA card (.lf-dna-card) is
   injected by deal-dna.js inside .pi-dashboard after kpi-row.
   Use CSS grid to create a 2-col layout: main content left,
   DNA + AI panel right. DNA and AI panel get grid-column: 2.
   All other children go to column 1 automatically.

   Sources:
     - .pi-dashboard          → css/pi-dashboards.css:10
     - .lf-dna-card           → css/deal-dna.css:20
     - .pi-strategy-bottom    → css/pi-layout.css
   ============================================================ */

/* Make pi-dashboard a 2-column grid */
.pi-dashboard {
    display: grid !important;
    grid-template-columns: 1fr 280px !important;
    grid-auto-rows: auto !important;
    gap: 16px 20px !important;
    align-items: start !important;
    padding: 0 !important;
}

/* All direct children go to column 1 by default */
.pi-dashboard > * {
    grid-column: 1 !important;
    min-width: 0;
}

/* DNA card: right column, span from row 1 to end */
.pi-dashboard > .lf-dna-card {
    grid-column: 2 !important;
    grid-row: 1 / -1 !important;
    width: 100% !important;
    align-self: start !important;
}

/* pi-strategy-bottom (decision box + AI panel): full left column width */
.pi-dashboard > .pi-strategy-bottom,
.pi-dashboard > .dash-hero,
.pi-dashboard > .dash-decision-box {
    grid-column: 1 !important;
}

/* Collapse the side column when no DNA card exists */
.pi-dashboard:not(:has(.lf-dna-card)) {
    grid-template-columns: 1fr !important;
}

/* ============================================================
   FIX 2 — COMPS TAB LAYOUT + SUBTAB STYLING
   Full-width 45/55 split, richer comp cards, subtab height.

   Sources:
     - .comps-panel           → css/comps-tab.css (flex row container)
     - .comps-col-left        → css/comps-tab.css
     - .comps-col-right       → css/comps-tab.css
     - .comps-subtab          → css/comps-tab.css
     - .comp-card             → css/comps-tab.css
   ============================================================ */

/* Tab outer: fill height */
#lf-tab-comps.lf-tab-panel--active {
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;
}

/* Subtab bar: taller, more prominent */
.comps-subtab-bar {
    flex-shrink: 0 !important;
    height: 40px !important;
    display: flex !important;
    align-items: stretch !important;
    padding: 0 12px !important;
    gap: 4px !important;
    border-bottom: 1px solid var(--glass-border) !important;
    background: var(--surface-dark) !important;
}

.comps-subtab {
    height: 36px !important;
    font-size: 0.8rem !important;
    padding: 0 16px !important;
    border-radius: var(--radius-full) !important;
    border: 1.5px solid transparent !important;
    font-weight: 500 !important;
    align-self: center !important;
}

.comps-subtab.comps-subtab--active {
    background: var(--gold-alpha-20) !important;
    border-color: var(--gold-500) !important;
    color: var(--gold-600, var(--gold-500)) !important;
    font-weight: 600 !important;
}

/* Panel: fill remaining height as flex row */
.comps-panel.comps-panel--active {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

/* Left column: 45% */
.comps-col-left {
    flex: 0 0 45% !important;
    width: 45% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-right: 1px solid var(--glass-border) !important;
}

/* Right column: 55% (flex 1) */
.comps-col-right {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* Comp card: richer two-row layout */
.comp-card {
    background: var(--surface-card) !important;
    border-radius: 10px !important;
    border: 1px solid var(--glass-border) !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    gap: 6px !important;
}

/* Address row: bold navy */
.comp-card .comp-input[data-field="address"],
.comp-card .comp-input-wrap:first-of-type .comp-input {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: var(--blue-steel) !important;
}

/* Price: gold, right-aligned */
.comp-card .comp-input[data-field="price"] {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #b8771a !important;
    text-align: right !important;
}

/* Chips row: flex, gap 8px, muted 0.72rem */
.comp-card__row:last-child {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.comp-card .comp-input[data-field="date"],
.comp-card .comp-input[data-field="sqft"] {
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
}

/* ============================================================
   FIX 3 — SCENARIO MODAL: STEP METRIC BAR
   Sticky key-output bar at top of each step.
   CSS for .sm-step-metric-bar injected by scenario-modal.js.

   Sources:
     - .sm-step-panel         → css/scenario-modal.css
   ============================================================ */

/* Sticky metric bar */
.sm-step-metric-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    background: var(--surface-dark, #ffffff) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    flex-shrink: 0 !important;
    margin-bottom: 8px !important;
}

.sm-step-metric-bar__label {
    font-family: var(--font-heading) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
}

.sm-step-metric-bar__value {
    font-family: var(--font-display) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

/* Value color variants */
.sm-metric--gold    { color: #b8771a !important; }
.sm-metric--navy    { color: var(--blue-steel) !important; }
.sm-metric--profit  { color: var(--blue-steel) !important; }
.sm-metric--positive { color: var(--color-positive) !important; }
.sm-metric--negative { color: var(--color-negative) !important; }

/* Step panel: flex column for sticky metric bar.
   FIX 1 (Batch 65): DO NOT override display here — display is
   controlled by scenario-modal.css (.sm-step-panel = none,
   .sm-step-panel--active = flex) and JS inline style.
   Adding display:flex !important broke all step visibility. */
.sm-step-panel {
    /* display intentionally NOT set here */
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;
}
.sm-step-panel--active {
    display: flex !important;
}
/* JS hides inactive panels via inline style="display:none" */

.sm-step-panel [data-sm-calc] {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0 !important;
}

/* Reduce padding inside cloned calculator surfaces */
.sm-step-panel .lf-calc-card,
.sm-step-panel .glass-card,
.sm-step-panel .glass-dark {
    padding: 12px 14px !important;
}

/* Tighter form rows inside scenario modal */
.sm-step-panel .lf-calc-row,
.sm-step-panel .form-row {
    margin-bottom: 10px !important;
}

/* Section headers inside calculator */
.sm-step-panel .lf-calc-section-header,
.sm-step-panel .lf-section-label {
    margin-bottom: 8px !important;
    font-size: 0.72rem !important;
}

/* Input padding tighter */
.sm-step-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.sm-step-panel select {
    padding: 8px 10px !important;
}

/* ============================================================
   FIX 4 — QUICK MODE: COMPACT NO-SCROLL LAYOUT
   Single-row inputs, compact chips, 2x2 output grid.

   Sources:
     - #lf-quick-mode         → css/quick-mode.css:65
     - .lf-qm-inputs          → css/quick-mode.css:82
     - .lf-qm-rehab           → css/quick-mode.css:177
     - .lf-qm-results         → css/quick-mode.css:235
     - .lf-qm-score-wrap      → css/quick-mode.css:302
     - .lf-qm-cta             → css/quick-mode.css:351
     - .lf-qm-divider         → css/quick-mode.css:392
   ============================================================ */

/* Container: flex column, fills height, no overflow */
#lf-quick-mode {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 12px 16px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

/* Label above inputs area */
#lf-quick-mode::before {
    content: "QUICK ANALYSIS";
    display: block;
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Inputs: 3 side-by-side in one row */
.lf-qm-inputs {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    align-items: start !important;
}

/* Each input field group */
.lf-qm-field,
.lf-qm-rehab {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Field label */
.lf-qm-field__label {
    font-size: 0.62rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Input height */
.lf-qm-input {
    height: 40px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
}

/* Rehab chips: compact row */
.lf-qm-rehab__chips {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
}

.lf-qm-chip {
    height: 26px !important;
    padding: 0 6px !important;
    font-size: 0.68rem !important;
    flex: 1 !important;
    white-space: nowrap !important;
    min-width: 0 !important;
}

.lf-qm-chip .lf-qm-chip__sub {
    display: none !important;   /* hide the ($15K) sub-labels in compact mode */
}

/* Custom rehab input wrap: full width, no max-width */
.lf-qm-rehab .lf-qm-field__input-wrap {
    max-width: 100% !important;
    width: 100% !important;
}

/* HR dividers: collapse */
.lf-qm-divider {
    margin: 2px 0 !important;
    opacity: 0.5 !important;
    flex-shrink: 0 !important;
}

/* Output cards: 2×2 grid */
.lf-qm-results {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

/* Each output card: 64px */
.lf-qm-card {
    height: 64px !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
}

.lf-qm-card__label {
    font-size: 0.58rem !important;
    letter-spacing: 0.06em !important;
}

.lf-qm-card__value {
    font-size: 1.0rem !important;
    letter-spacing: -0.02em !important;
}

/* Deal score ring: centered, compact */
.lf-qm-score-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    padding: 4px 0 !important;
}

.lf-qm-score-wrap .deal-score__ring,
.lf-qm-score-wrap .lf-deal-score-card {
    width: 80px !important;
    height: 80px !important;
}

.lf-qm-score-label {
    font-size: 0.62rem !important;
    letter-spacing: 0.06em !important;
}

.lf-qm-score-sub {
    display: none !important;    /* hide sub-text in compact mode */
}

/* CTA button: flex-shrink 0, margin-top auto pushes to bottom */
.lf-qm-cta {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

.lf-qm-cta__btn {
    height: 40px !important;
    font-size: 0.85rem !important;
    width: 100% !important;
}


/**
 * ============================================================
 * BATCH 64 — DEEP FIX: PI LAYOUT, COMPS, SCENARIO STEPS
 * Append-only. All selectors verified from source + diagnostic.
 * Zero hardcoded colors.
 * ============================================================
 */

/* ============================================================
   OVERRIDE BATCH 63 PI-DASHBOARD GRID (was fighting DNA injection order)
   Replace with explicit two-column body structure injected by
   applyTwoColLayout() in pi-dashboards.js (Batch 64).

   Rendered structure (post Batch 64):
     div.pi-dashboard
       div.pi-panel-header   ← KPI row, full width
       div.pi-panel-body     ← flex row
         div.pi-panel-main   ← charts, hero, AI panel
         div.pi-panel-side   ← DNA card, similar deals
   ============================================================ */

/* Reset the Batch 63 grid — pi-dashboard is now just a container */
.pi-dashboard {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    grid-template-columns: unset !important;
    grid-auto-rows: unset !important;
    padding: 0 !important;
    width: 100% !important;
}

/* All grid overrides from Batch 63 — neutralize */
.pi-dashboard > * {
    grid-column: unset !important;
}

.pi-dashboard > .lf-dna-card {
    grid-column: unset !important;
    grid-row: unset !important;
}

.pi-dashboard:not(:has(.lf-dna-card)) {
    grid-template-columns: unset !important;
}

/* ── FIX B: Explicit two-column layout classes ── */

/* KPI row: full-width header strip */
.pi-panel-header {
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 16px;
}

/* Body: flex row with main + side */
.pi-panel-body {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    min-height: 0;
    flex: 1;
}

/* Main column: charts, hero, AI panel */
.pi-panel-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Side column: DNA + similar deals */
.pi-panel-side {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: flex-start;
}

/* DNA card in side: full width */
.pi-panel-side .lf-dna-card {
    width: 100% !important;
}

/* Similar deals card in side: full width */
.pi-panel-side .lf-similar-deals-card {
    width: 100% !important;
    display: block !important;   /* override display:none default so it shows if data present */
}

/* Collapse side column to nothing if empty */
.pi-panel-side:empty {
    display: none;
    width: 0;
}

/* ============================================================
   FIX C — COMPS TAB: FULL VIEWPORT LAYOUT
   Verified classes from index.html diagnostic:
     #lf-tab-comps, .comps-subtab-bar, .comps-panel, .comps-panel--active
     .comps-col-left, .comps-col-right, .comps-map-wrap
     #lf-comps-arv-banner (injected by comps-connection.js)
   ============================================================ */

/* Tab: fill full height as flex column — only when active
   FIX (Batch 68): display:flex was unconditional, causing comps
   tab to show on top of PI tab. Scoped to --active only. */
#lf-tab-comps.lf-tab-panel--active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Ensure comps tab is hidden when not active */
#lf-tab-comps:not(.lf-tab-panel--active) {
    display: none !important;
}

/* Banner (if present): full width, flex-shrink 0 */
#lf-comps-arv-banner {
    width: 100% !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
}

/* Subtab bar: full width, fixed height */
.comps-subtab-bar {
    width: 100% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    padding: 0 16px !important;
    gap: 8px !important;
    border-bottom: 1px solid var(--glass-border) !important;
    background: var(--surface-dark) !important;
}

/* Subtabs: above the left column only visually */
.comps-subtab {
    height: 32px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    padding: 0 14px !important;
    border-radius: var(--radius-full) !important;
    border: 1.5px solid var(--glass-border) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
}

.comps-subtab.comps-subtab--active {
    background: var(--gold-alpha-20) !important;
    border-color: var(--gold-500) !important;
    color: var(--gold-600, var(--gold-500)) !important;
    font-weight: 600 !important;
}

/* Panel: flex row filling remaining height */
.comps-panel {
    display: none !important;
    flex-direction: row !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.comps-panel.comps-panel--active {
    display: flex !important;
}

/* Left column: 420px fixed, full height, scroll internally */
.comps-col-left {
    width: 420px !important;
    flex: 0 0 420px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-right: 1px solid var(--glass-border) !important;
}

.comps-col-left .comps-list {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}

/* Right column: flex 1, full height */
.comps-col-right {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Hide map right column header — map fills entire right column */
.comps-col-right__header {
    display: none !important;
}

/* Map wrap: fills right column */
.comps-map-wrap {
    flex: 1 !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Map container: fills map wrap, no border-radius (edge-to-edge) */
.fdcc-map-container,
.comps-map-placeholder {
    flex: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
}

.fdcc-map-container .leaflet-container {
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
}

/* Stats row: pinned below map, flex-shrink 0 */
.comps-stats-row {
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
    border-top: 1px solid var(--glass-border) !important;
}

/* Comp cards: cleaner two-row layout inside 420px col */
.comp-card {
    padding: 12px 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--glass-border) !important;
    margin-bottom: 6px !important;
    background: var(--surface-card) !important;
}

/* Suggested comp cards: full width, compact */
.comp-suggest-card {
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Confirm/Dismiss: equal width, full row */
.comp-suggest-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.comp-suggest-btn--confirm,
.comp-suggest-btn--dismiss {
    height: 32px !important;
    width: 100% !important;
}


/**
 * ============================================================
 * BATCH 65 — TARGETED FIXES: VIEWPORT HEIGHT, PI LAYOUT, QUICK MODE
 * Append-only. Root causes diagnosed, targeted overrides only.
 * ============================================================
 */

/* ============================================================
   FIX 3 — PI TWO-COLUMN LAYOUT: ENSURE HEIGHT CONTEXT
   .pi-strategy-panel is position:absolute; inset:0 — it fills
   the .pi-strategy-area. The flex body needs height to expand.
   ============================================================ */

/* Ensure strategy panel is a flex column filling its space */
.pi-strategy-panel {
    display: none;
    flex-direction: column !important;
    position: absolute !important;
    inset: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px 20px !important;
    gap: 0 !important;
}

.pi-strategy-panel--active {
    display: flex !important;
}

/* pi-dashboard fills the strategy panel */
.pi-dashboard {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    flex: 1 !important;
}

/* Panel body: flex row, fills remaining height */
.pi-panel-body {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-top: 16px !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Main column */
.pi-panel-main {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Side column */
.pi-panel-side {
    width: 300px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* KPI header row: full-width strip above the body */
.pi-panel-header {
    width: 100% !important;
    flex-shrink: 0 !important;
    margin-bottom: 4px !important;
}

/* ============================================================
   FIX 4 — QUICK MODE: CARD VISIBILITY
   Cards already have .lf-qm-card class (verified from source).
   The issue: Batch 63 forced display:flex on cards but the
   values are showing as text nodes in span.lf-qm-card__value.
   These classes already exist and work — just ensure visibility.
   ============================================================ */

/* Quick mode cards — ensure visible and styled */
.lf-qm-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    min-height: 64px !important;
    gap: 4px !important;
    overflow: hidden !important;
}

.lf-qm-card__label {
    font-size: 0.62rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--text-muted) !important;
    font-family: var(--font-heading) !important;
    white-space: nowrap !important;
}

.lf-qm-card__value {
    font-size: 1.1rem !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    color: #b8771a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.02em !important;
}

/* Color overrides per card type */
.lf-qm-card--mao .lf-qm-card__value   { color: #b8771a !important; }
.lf-qm-card--offer .lf-qm-card__value { color: var(--blue-steel) !important; }
.lf-qm-card--roi .lf-qm-card__value   { color: var(--blue-steel) !important; }
.lf-qm-card--profit .lf-qm-card__value { color: var(--color-positive) !important; }
.lf-qm-card--profit.lf-qm-card--negative .lf-qm-card__value { color: var(--color-negative) !important; }

/* Quick mode results grid */
.lf-qm-results {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   FIX 5 — VIEWPORT HEIGHT: FILL AVAILABLE SPACE
   #lf-main-content doesn't exist — it's #lf-shell-content.
   Targeting correct IDs from index.html.
   ============================================================ */

html, body {
    height: 100% !important;
    overflow: hidden !important;
}

#lf-app-frame {
    height: 100vh !important;
    display: flex !important;
    overflow: hidden !important;
}

/* Shell content: takes remaining width after sidebar */
#lf-shell-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
    min-width: 0 !important;
}

/* Main tabs bar: fixed height, no flex shrink */
#lf-main-tabs {
    flex-shrink: 0 !important;
}

/* Tab panels: fill remaining space */
.lf-tab-panel {
    flex: 1 !important;
    overflow: hidden !important;
    min-height: 0 !important;
    display: none !important;
}

.lf-tab-panel.lf-tab-panel--active {
    display: flex !important;
    flex-direction: column !important;
}

/* Both main tab panels */
#lf-tab-intel,
#lf-tab-comps {
    flex: 1 !important;
    min-height: 0 !important;
}

/* Strategy area fills remaining PI tab space */
.pi-strategy-area {
    flex: 1 !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}


/**
 * ============================================================
 * BATCH 66 — COMPS TAB FULL-WIDTH LAYOUT FIX
 * Final authoritative overrides. Selectors verified from index.html.
 *
 * Structure confirmed:
 *   #lf-tab-comps.lf-tab-panel
 *     div.comps-subtab-bar#comps-subtab-bar  ← subtab buttons
 *     div.comps-panel[#lf-comps-arv | #lf-comps-rent]
 *       div.comps-col-left
 *         div.comps-col-left__header         ← header + add btn
 *         div.comps-list#arv-comps-list       ← scrollable cards
 *         div.comps-arv-section               ← derived ARV / sticky bottom
 *       div.comps-col-right
 *         div.comps-col-right__header         ← "Map View" label
 *         div.comps-map-wrap
 *           div.comps-map-placeholder / .fdcc-map-container
 *           div.comps-stats-row
 * ============================================================
 */

/* ── TAB CONTAINER — active only (FIX Batch 68) ── */
#lf-tab-comps.lf-tab-panel--active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    width: 100% !important;
}

/* ── SUBTAB BAR: full width, fixed 44px ── */
/* selector: div.comps-subtab-bar (verified) */
.comps-subtab-bar {
    width: 100% !important;
    flex-shrink: 0 !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    gap: 8px !important;
    border-bottom: 1px solid var(--glass-border) !important;
    background: var(--surface-dark) !important;
    box-sizing: border-box !important;
}

/* ── COMPS PANEL: flex row filling remaining height ── */
/* selector: div.comps-panel (verified) */
.comps-panel {
    display: none !important;
    flex: 1 !important;
    flex-direction: row !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

.comps-panel.comps-panel--active {
    display: flex !important;
}

/* ── LEFT COLUMN: 480px, full-height flex column ── */
/* selector: div.comps-col-left (verified) */
.comps-col-left {
    width: 480px !important;
    flex: 0 0 480px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border-right: 1px solid var(--glass-border) !important;
}

/* ── LEFT HEADER: header + Add Comp button ── */
/* selector: div.comps-col-left__header (verified) */
.comps-col-left__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid var(--glass-border) !important;
    background: #ffffff !important;
    margin-bottom: 0 !important;
}

/* Header eyebrow badge text */
.comps-col-left__header .eyebrow-badge {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--blue-steel) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    letter-spacing: 0.04em !important;
}

/* ── COMPS LIST: scrollable, flex 1 ── */
/* selector: div.comps-list (verified) */
.comps-list {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px 14px !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* ── COMP CARDS: full-width, clean two-row layout ── */
/* selector: div.comp-card (verified from comps-tab.css) */
.comp-card {
    background: #ffffff !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    position: relative !important;
}

/* Card header: address full width */
/* selector: div.comp-card__row--full (verified from comps-tab.css) */
.comp-card__row--full .comp-input {
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    width: 100% !important;
}

/* Card data row: flex wrap, inputs have min-width */
/* selector: div.comp-card__row (verified) */
.comp-card__row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* Each input wrap inside data row: min 80px */
/* selector: div.comp-input-wrap (verified from comps-tab.css) */
.comp-card__row:not(.comp-card__row--full) .comp-input-wrap {
    min-width: 80px !important;
    flex: 1 !important;
}

/* Remove button: top right corner */
/* selector: button.comp-card__remove (verified from comps-tab.css) */
.comp-card__remove {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    color: var(--text-dim) !important;
    font-size: 11px !important;
    padding: 0 !important;
    opacity: 0.6 !important;
}

.comp-card__remove:hover {
    opacity: 1 !important;
    color: var(--color-negative) !important;
    background: rgba(220, 38, 38, 0.08) !important;
}

/* ── DERIVED ARV/RENT SECTION: sticky bottom ── */
/* selector: div.comps-arv-section (verified) */
.comps-arv-section {
    flex-shrink: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid var(--glass-border) !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* ── RIGHT COLUMN: flex 1, full-height map ── */
/* selector: div.comps-col-right (verified) */
.comps-col-right {
    flex: 1 !important;
    min-width: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Hide the "Map View" header — map fills the full column */
/* selector: div.comps-col-right__header (verified) */
.comps-col-right__header {
    display: none !important;
}

/* Map wrap: fills right column completely */
/* selector: div.comps-map-wrap (verified) */
.comps-map-wrap {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* Leaflet map container: edge-to-edge, no radius */
/* selector: div.fdcc-map-container (from map-integration.js) */
.fdcc-map-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    flex: none !important;
    min-height: 0 !important;
}

.fdcc-map-container .leaflet-container {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    min-height: 0 !important;
}

/* Fallback placeholder (before map loads) */
/* selector: div.comps-map-placeholder (verified) */
.comps-map-placeholder {
    flex: 1 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    width: 100% !important;
    height: 100% !important;
}

/* Stats row: pinned below map */
/* selector: div.comps-stats-row (verified) */
.comps-stats-row {
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-top: 1px solid var(--glass-border) !important;
    background: #ffffff !important;
}

/* comps-map-wrap needs position:relative for fdcc-map-container absolute positioning */
.comps-col-right {
    position: relative !important;
}

/* The map container wrapper within comps-col-right: fill all space above stats */
.comps-col-right .comps-map-wrap {
    flex: 1 !important;
    position: relative !important;
    min-height: 0 !important;
}


/**
 * ============================================================
 * BATCH 67 — TAB CONTENT ISOLATION GUARDS
 * Diagnostic confirmed: HTML structure is correct.
 *   - #lf-tab-intel opens line 388, closes line 812
 *   - #lf-tab-comps opens line 817, closes line 971
 *   - All comps elements are correctly inside #lf-tab-comps
 *   - All calculator init() functions render unique content
 * These rules prevent CSS bleed between tabs.
 * ============================================================
 */

/* Ensure comps elements never render inside PI tab */
#lf-tab-intel .comps-subtab-bar,
#lf-tab-intel .comps-panel,
#lf-tab-intel .comps-col-left,
#lf-tab-intel .comps-col-right,
#lf-tab-intel .comps-map-wrap,
#lf-tab-intel #lf-comps-arv-banner {
    display: none !important;
}

/* Ensure PI elements never render inside Comps tab */
#lf-tab-comps .pi-strategy-panel,
#lf-tab-comps .pi-dashboard,
#lf-tab-comps .pi-panel-body,
#lf-tab-comps .lf-deal-score-card,
#lf-tab-comps #lf-deal-timeline,
#lf-tab-comps #lf-market-pulse {
    display: none !important;
}


/**
 * ============================================================
 * BATCH 68 — COMPS TAB ISOLATION FIX + ADD-TO-SCENARIO BAR
 * Root cause: #lf-tab-comps { display: flex !important } in
 * earlier batches overrode batch20-fix.css display:none.
 * Fixed above by scoping to .lf-tab-panel--active only.
 * ============================================================
 */

/* ── ADD TO SCENARIO BAR ── */
.comps-add-scenario-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    background: var(--surface-dark) !important;
    border-top: 1px solid var(--glass-border) !important;
    flex-shrink: 0 !important;
    gap: 10px !important;
}

.comps-add-scenario-label {
    font-family: var(--font-heading) !important;
    font-size: 0.78rem !important;
    color: var(--text-muted) !important;
    flex-shrink: 0 !important;
}

#lf-comps-add-scenario-btn,
#lf-rent-add-scenario-btn {
    height: 36px !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
    padding: 0 16px !important;
    flex-shrink: 0 !important;
}


/**
 * ============================================================
 * BATCH 70 — COMPS TABLE LAYOUT + REAL COMPS TABLE STYLES
 * Left column 55%, map 45% max 320px height.
 * ============================================================
 */

/* ── PANEL SPLIT: 55% list / 45% map ── */
.comps-col-left {
    width: 55% !important;
    flex: 0 0 55% !important;
}

.comps-col-right {
    flex: 0 0 45% !important;
    width: 45% !important;
    max-width: 45% !important;
}

/* Map height cap so list has more room */
.comps-col-right .comps-map-wrap,
.fdcc-map-container,
.comps-col-right .fdcc-map-container {
    max-height: 320px !important;
    height: 320px !important;
    min-height: 200px !important;
    flex: none !important;
}

.fdcc-map-container .leaflet-container,
.comps-col-right .fdcc-map-container .leaflet-container {
    max-height: 320px !important;
    height: 320px !important;
}

/* Stats row appears after the map */
.comps-col-right {
    overflow-y: auto !important;
}

/* ── KPI BAR above real comps table ── */
.comps-kpi-bar {
    display: flex !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    background: var(--surface-card) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    padding: 0 !important;
}

.comps-kpi-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 8px !important;
    border-right: 1px solid var(--glass-border) !important;
    gap: 2px !important;
}

.comps-kpi-item:last-child {
    border-right: none !important;
}

.comps-kpi-label {
    font-family: var(--font-heading) !important;
    font-size: 0.58rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
}

.comps-kpi-value {
    font-family: var(--font-display) !important;
    font-size: 1.0rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

.comps-kpi-value--gold  { color: #FDA929 !important; }
.comps-kpi-value--navy  { color: #134160 !important; }

/* ── TABLE WRAPPER: scroll internally ── */
.comps-table-wrap {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    min-height: 0 !important;
}

/* ── REAL COMPS TABLE ── */
.comps-real-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.78rem !important;
    font-family: var(--font-heading) !important;
}

.comps-real-table th {
    background: rgba(19, 65, 96, 0.08) !important;
    color: #134160 !important;
    padding: 8px 10px !important;
    text-align: left !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-bottom: 1px solid var(--glass-border) !important;
    white-space: nowrap !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}

.comps-real-table td {
    padding: 7px 10px !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    font-size: 0.75rem !important;
    vertical-align: middle !important;
}

.comps-real-table tr:hover td {
    background: rgba(19, 65, 96, 0.04) !important;
}

/* Top 3 comps: gold highlight */
.comps-real-table tr.comp-row-top td {
    background: rgba(253, 169, 41, 0.06) !important;
}

.comps-real-table tr.comp-row-top:hover td {
    background: rgba(253, 169, 41, 0.10) !important;
}

/* Address cell: truncate */
.comps-real-table .comp-address {
    max-width: 160px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
    color: #134160 !important;
}

/* Price cell: gold */
.comps-real-table .comp-price {
    color: #FDA929 !important;
    font-weight: 600 !important;
}

/* comps-list when it contains a table: no extra padding/gap */
.comps-list:has(.comps-real-table) {
    padding: 0 !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}


/**
 * ============================================================
 * BATCH 71 — COMPS TABLE CHECKBOXES + FILTER BAR STYLES
 * ============================================================
 */

/* ── Filter header (count + toggle button) ── */
.comp-filter-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 14px !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid var(--glass-border) !important;
    background: var(--surface-card) !important;
}

.comp-filter-count {
    font-family: var(--font-heading) !important;
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
}

.cf-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: transparent !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
    font-family: var(--font-heading) !important;
    color: var(--blue-steel) !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.cf-toggle-btn:hover {
    background: var(--glass-bg) !important;
}

.cf-chevron {
    transition: transform 0.2s ease !important;
    font-size: 0.6rem !important;
}

.cf-toggle-btn.cf-open .cf-chevron {
    transform: rotate(180deg) !important;
}

/* ── Filter bar (collapsible) ── */
.comp-filter-bar {
    background: var(--surface-card) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    overflow: hidden !important;
    transition: max-height 0.25s ease !important;
    flex-shrink: 0 !important;
}

.comp-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    padding: 12px 14px !important;
}

.cf-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.cf-field--full {
    grid-column: 1 / -1 !important;
}

.cf-label {
    font-family: var(--font-heading) !important;
    font-size: 0.62rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--text-muted) !important;
}

.cf-range-val {
    font-size: 0.7rem !important;
    color: var(--text-muted) !important;
    margin-top: 2px !important;
}

.cf-range-pair {
    display: flex !important;
    gap: 6px !important;
}

.cf-range-pair input {
    width: 100% !important;
    flex: 1 !important;
}

.cf-checkbox-row {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.cf-checkbox-label {
    font-size: 0.72rem !important;
    color: var(--text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
}

/* Slider accent */
.comp-filter-bar input[type="range"] {
    accent-color: var(--gold-500) !important;
    width: 100% !important;
}

.cf-actions {
    display: flex !important;
    gap: 8px !important;
    padding: 0 14px 12px !important;
}

.cf-apply-btn {
    height: 32px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    font-size: 0.75rem !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    background: var(--gold-500) !important;
    color: var(--text-inverse) !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.cf-apply-btn:hover {
    background: var(--gold-600) !important;
}

.cf-reset-btn {
    height: 32px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    font-size: 0.75rem !important;
    font-family: var(--font-heading) !important;
    background: transparent !important;
    color: var(--blue-steel) !important;
    border: 1px solid var(--blue-steel) !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.cf-reset-btn:hover {
    background: var(--glass-bg) !important;
}

/* ── Checkbox column in table ── */
.comp-th-check,
.comp-td-check {
    width: 28px !important;
    text-align: center !important;
    padding: 6px 4px !important;
}

.comp-row-cb {
    width: 15px !important;
    height: 15px !important;
    accent-color: var(--gold-500) !important;
    cursor: pointer !important;
}

.comp-row-checked td {
    background: rgba(253, 169, 41, 0.06) !important;
}

.comp-row-checked:hover td {
    background: rgba(253, 169, 41, 0.10) !important;
}

@media (max-width: 768px) {
    .comp-filter-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}


/**
 * ============================================================
 * BATCH 72 — FILTERS ALWAYS VISIBLE + ARV TABLE FIX
 * ============================================================
 */

/* FIX 2: Filter bar always expanded, no collapsing */
.comp-filter-bar {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
}

/* Hide toggle button (no longer needed) */
.cf-toggle-btn {
    display: none !important;
}

/* Filter header: just shows comp count */
.comp-filter-header {
    padding: 6px 14px !important;
}

/* Ensure comps-list shows table content */
#arv-comps-list,
#rent-comps-list {
    padding: 0 !important;
    gap: 0 !important;
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}