/* ══════════════════════════════════════════════════════════════════════
   FRONTIER PROPERTY CARD (Phase 3)
   Three-zone scoreboard: Position · Demand Pipeline · Rent
   See mockups/property_card_v4.html for the design spec.
   ══════════════════════════════════════════════════════════════════════ */

/* Card shell */
.fr-property-card {
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline);
    border-radius: var(--fr-r-lg);
    overflow: visible;          /* required so the badge tooltip can escape */
    box-shadow: 0 1px 0 rgba(20, 24, 29, 0.02), 0 1px 2px rgba(20, 24, 29, 0.03);
    margin-bottom: 24px;
    font-family: var(--fr-font-sans);
    color: var(--fr-ink);
}

/* Card header strip (property name + subtitle + updated indicator) */
.fr-pc-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    padding: 22px 32px 18px;
    border-bottom: 1px solid var(--fr-hairline);
}
.fr-pc-title {
    font-family: var(--fr-font-serif);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--fr-ink);
    line-height: 1;
    margin: 0;
}
.fr-pc-subtitle {
    color: var(--fr-ink-3);
    font-size: 13px;
    font-weight: 400;
}
.fr-pc-subtitle .fr-sep {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--fr-ink-3);
    margin: 0 8px;
    vertical-align: middle;
    opacity: 0.6;
}
.fr-pc-header-spacer { flex: 1; }
.fr-updated {
    font-family: var(--fr-font-mono);
    font-size: 11px;
    color: var(--fr-ink-3);
    letter-spacing: 0.02em;
}
.fr-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fr-positive);
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(31, 122, 77, 0.5);
    animation: fr-pulse 2.4s ease-out infinite;
}
@keyframes fr-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(31, 122, 77, 0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(31, 122, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(31, 122, 77, 0); }
}

/* Three-zone grid */
.fr-pc-zones {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.fr-pc-zone {
    padding: 26px 32px 30px;
    border-right: 1px solid var(--fr-hairline);
    position: relative;
    opacity: 0;
    transform: translateY(6px);
    animation: fr-rise 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.fr-pc-zone:last-child { border-right: 0; }
.fr-pc-zone:nth-child(1) { animation-delay: 80ms; }
.fr-pc-zone:nth-child(2) { animation-delay: 160ms; }
.fr-pc-zone:nth-child(3) { animation-delay: 240ms; }
@keyframes fr-rise {
    to { opacity: 1; transform: translateY(0); }
}
.fr-zone-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fr-ink-3);
    font-weight: 500;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fr-zone-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--fr-hairline);
}

/* Hero stat block (one per zone) */
.fr-stat-hero {
    margin-bottom: 26px;
}
.fr-stat-hero-value {
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-size: 36px;
    font-weight: 500;
    color: var(--fr-ink);
    letter-spacing: -0.025em;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.fr-stat-hero-value .fr-of,
.fr-stat-hero-value .fr-sub  {
    color: var(--fr-ink-3);
    font-size: 22px;
    font-weight: 400;
}
.fr-stat-hero-value .fr-delta {
    font-size: 13px;
    margin-left: 4px;
    font-weight: 500;
    font-family: var(--fr-font-mono);
}
.fr-stat-hero-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--fr-ink-3);
    margin-top: 8px;
    font-weight: 500;
}
/* Zone 1 hero variant: hero on left, publish badge on right */
.fr-stat-hero--with-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.fr-stat-hero--with-badge .fr-hero-text { flex: 0 0 auto; }

/* Stat row (label : value pairs) */
.fr-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-top: 1px dashed var(--fr-hairline);
}
.fr-stat-row:first-of-type {
    border-top: 1px solid var(--fr-hairline);
    padding-top: 12px;
}
.fr-stat-label {
    color: var(--fr-ink-2);
    font-size: 12.5px;
    font-weight: 400;
}
.fr-stat-value {
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 500;
    color: var(--fr-ink);
}
.fr-stat-value .fr-unit {
    color: var(--fr-ink-3);
    font-size: 11px;
    margin-left: 3px;
    font-weight: 400;
}
.fr-delta {
    font-family: var(--fr-font-mono);
    font-size: 11.5px;
    font-weight: 500;
}
.fr-delta.fr-up   { color: var(--fr-positive); }
.fr-delta.fr-down { color: var(--fr-negative); }

/* ── Adv. vs in-place row (Zone 3 verdict) ──
   Label left (like the Market position row beneath it); the figures sit in a
   compact color-coded pill on the right — green when asking rents lead the
   in-place roll, red when they trail. Small on purpose: a sleek verdict, not
   a banner. The row's first-of-type solid top border doubles as the divider
   between it and the sparkline above. */
.fr-adv-stat-row { align-items: center; }
/* Slightly heavier treatment for the two Zone-3 verdict rows (adv vs
   in-place + market position) so they carry more weight than the plain
   stat rows in the other zones. Scoped to these rows only — the shared
   .fr-stat-label / .fr-stat-value styles drive Zones 1 & 2 too. */
.fr-stat-row.fr-adv-stat-row,
.fr-stat-row.fr-stat-row--with-bar {
    padding-top: 13px;
    padding-bottom: 13px;
}
.fr-adv-stat-row .fr-stat-label,
.fr-stat-row--with-bar .fr-stat-label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--fr-ink);
}
.fr-stat-row--with-bar .fr-stat-value {
    font-size: 15px;
}
.fr-adv-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
}
.fr-adv-pill.fr-up {
    background: var(--fr-positive-tint-2);
    color: var(--fr-positive-deep);
}
.fr-adv-pill.fr-down {
    background: var(--fr-negative-tint-2);
    color: var(--fr-negative-deep);
}
.fr-adv-pill .fr-adv-arrow { font-size: 9px; }
.fr-adv-pill .fr-adv-sep   { opacity: 0.5; }

/* ── Market position percentile bar (Zone 3) ──
   Used in render_z3_stats. The right side of the row holds a thin
   track with a colored fill from 0 to N% and the numeric value
   beside it, instead of a plain "39th pct" text value. */
.fr-stat-row--with-bar {
    align-items: center;  /* override 'baseline' so the bar lines up vertically */
}
.fr-pct-row-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
    max-width: 70%;
}
.fr-pct-bar-wrap {
    flex: 1;
    min-width: 90px;
    max-width: 160px;
}
.fr-pct-bar-track {
    position: relative;
    width: 100%;
    height: 11px;
    background: var(--fr-hairline);
    border-radius: 6px;
    overflow: hidden;
}
.fr-pct-bar-fill {
    height: 100%;
    background: var(--fr-accent);
    border-radius: 6px;
    transition: width 0.25s ease-out;
}
/* Quartile segment markers — 1px-wide translucent overlays at 25/50/75
   that paint on top of both the fill and the track. Reads as faint
   joints dividing the bar into quartiles, like a fuel gauge. The
   semi-transparent black darkens whatever sits beneath: amber → darker
   amber over the fill, hairline → darker gray over the unfilled track.
   This sits in front of .fr-pct-bar-fill by source order. */
.fr-pct-bar-track::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(
        to right,
        transparent calc(25% - 0.75px),
        rgba(0, 0, 0, 0.36) calc(25% - 0.75px),
        rgba(0, 0, 0, 0.36) calc(25% + 0.75px),
        transparent calc(25% + 0.75px),
        transparent calc(50% - 0.75px),
        rgba(0, 0, 0, 0.36) calc(50% - 0.75px),
        rgba(0, 0, 0, 0.36) calc(50% + 0.75px),
        transparent calc(50% + 0.75px),
        transparent calc(75% - 0.75px),
        rgba(0, 0, 0, 0.36) calc(75% - 0.75px),
        rgba(0, 0, 0, 0.36) calc(75% + 0.75px),
        transparent calc(75% + 0.75px)
    );
}

/* ── Zone-level action button (Zone 3 "View Market Charts") ── */
.fr-zone-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 16px;
    padding: 9px 14px;
    background: transparent;
    border: 1px solid var(--fr-hairline-strong);
    border-radius: 6px;
    color: var(--fr-ink-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.15s ease-out;
}
.fr-zone-action-btn:hover {
    background: var(--fr-accent-soft);
    border-color: var(--fr-accent);
    color: var(--fr-accent-strong);
}
.fr-zone-action-btn:active {
    transform: translateY(1px);
}
.fr-zone-action-btn-arrow {
    font-size: 14px;
    line-height: 1;
    transform: translateY(-1px);
}

/* Forward-occupancy mini chart (Zone 1) */
.fr-occ-trajectory {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--fr-hairline);
}
.fr-occ-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--fr-ink-3);
    font-weight: 500;
    margin-bottom: 12px;
}
.fr-occ-chart-wrap {
    position: relative;  /* anchors the .fr-occ-dot overlay */
    width: 100%;
    height: 120px;       /* trimmed from 160 to make room for the net-to-rent
                            strip (incl. its divider) below while keeping
                            Zone 1's total height — and its baseline alignment
                            with Zone 2 — unchanged */
    margin-bottom: 6px;
}
/* True-circle data points overlaid on the SVG line+area. The path
   inside the SVG stretches non-uniformly with the container, which
   would distort SVG circles into ovals — so we render the dots as
   HTML elements positioned at percentage coordinates instead. */
.fr-occ-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.6px solid #B45309;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* Each cell is absolutely positioned at the same x% as its dot above
   (the percentages are computed in render_z1_occ_chart and applied as
   inline ``left: X%`` styles). ``transform: translateX(-50%)`` centers
   each label horizontally on its dot. */
.fr-occ-axis {
    position: relative;
    height: 30px;
    margin-top: 2px;
}
.fr-occ-axis-cell {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    text-align: center;
    font-family: var(--fr-font-mono);
    font-size: 11px;
    color: var(--fr-ink-2);
    font-weight: 500;
    white-space: nowrap;
}
.fr-occ-axis-cell .fr-axis-label {
    display: block;
    color: var(--fr-ink-3);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 2px;
    font-family: var(--fr-font-sans);
    font-weight: 500;
}

/* Net-to-rent strip (Zone 1): units still to lease, aligned under the
   30d/60d/90d occupancy points. A hairline divides it from the % axis so
   counts and percentages don't read as the same series. The top padding is
   sized to roughly match the zone's own 30px bottom padding, which centers
   the row vertically in the space between the hairline and the zone bottom
   (rather than crowding the hairline). Caption + cells share a bottom edge
   so their text baselines align despite the different font sizes. */
.fr-ntr-strip {
    position: relative;
    height: 18px;
    margin-top: 10px;
    padding-top: 34px;
    border-top: 1px solid var(--fr-hairline);
}
.fr-ntr-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fr-ink-3);
    font-weight: 500;
}
.fr-ntr-cell {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}
.fr-ntr-value {
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    color: var(--fr-ink);
}
.fr-ntr-pct {
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 500;
    color: var(--fr-ink-3);
    margin-left: 4px;
}
.fr-ntr-unit {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fr-ink-3);
    margin-left: 4px;
}

/* Traffic funnel (Zone 2) */
.fr-funnel-wrap {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--fr-hairline);
}

/* Funnel header: title (+ info icon) on the left, 7D/30D toggle on the right */
.fr-funnel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.fr-funnel-title-group {
    display: inline-flex;
    align-items: center;
}
.fr-funnel-title {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--fr-ink-3);
    font-weight: 500;
}

/* Small info icon (FontAwesome) — hover reveals the YoY tooltip */
.fr-info-icon {
    margin-left: 6px;
    font-size: 11px;
    color: var(--fr-ink-3);
    cursor: help;
    opacity: 0.6;
    transition: opacity 120ms ease, color 120ms ease;
}
.fr-info-icon:hover {
    opacity: 1;
    color: var(--fr-ink-2);
}

/* 7D / 30D segmented toggle */
.fr-funnel-toggle {
    display: inline-flex;
    border-radius: 6px;
    background: var(--fr-bg);
    padding: 2px;
    border: 1px solid var(--fr-hairline);
}
.fr-funnel-toggle-btn {
    padding: 3px 9px;
    border: 0;
    background: transparent;
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-size: 10.5px;
    font-weight: 500;
    color: var(--fr-ink-3);
    cursor: pointer;
    border-radius: 4px;
    letter-spacing: 0.04em;
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.fr-funnel-toggle-btn:hover { color: var(--fr-ink-2); }
/* Default: 30D is active. Toggle the active styling via the wrap class. */
.fr-funnel-wrap .fr-funnel-toggle-btn[data-period="30d"] {
    background: var(--fr-surface);
    color: var(--fr-ink);
    box-shadow: 0 1px 2px rgba(20, 24, 29, 0.06);
}
.fr-funnel-wrap.fr-funnel-show-7d .fr-funnel-toggle-btn[data-period="30d"] {
    background: transparent;
    color: var(--fr-ink-3);
    box-shadow: none;
}
.fr-funnel-wrap.fr-funnel-show-7d .fr-funnel-toggle-btn[data-period="7d"] {
    background: var(--fr-surface);
    color: var(--fr-ink);
    box-shadow: 0 1px 2px rgba(20, 24, 29, 0.06);
}

/* Two row groups, one per period — only one visible at a time */
.fr-funnel-rows--7d  { display: none; }
.fr-funnel-rows--30d { display: block; }
.fr-funnel-wrap.fr-funnel-show-7d .fr-funnel-rows--7d  { display: block; }
.fr-funnel-wrap.fr-funnel-show-7d .fr-funnel-rows--30d { display: none; }

.fr-funnel-row {
    display: grid;
    grid-template-columns: 56px 1fr 36px 56px;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
}
.fr-funnel-label { font-size: 12.5px; color: var(--fr-ink-2); font-weight: 400; }
.fr-funnel-bar-track {
    height: 6px;
    background: var(--fr-hairline);
    border-radius: 99px;
    overflow: hidden;
}
.fr-funnel-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--fr-accent) 0%, var(--fr-accent-2) 100%);
    transform-origin: left center;
    animation: fr-bar-grow 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform: scaleX(0);
}
@keyframes fr-bar-grow { to { transform: scaleX(1); } }
.fr-funnel-rows .fr-funnel-row:nth-child(1) .fr-funnel-bar-fill { animation-delay: 240ms; }
.fr-funnel-rows .fr-funnel-row:nth-child(2) .fr-funnel-bar-fill { animation-delay: 320ms; }
.fr-funnel-rows .fr-funnel-row:nth-child(3) .fr-funnel-bar-fill { animation-delay: 400ms; }
.fr-funnel-rows .fr-funnel-row:nth-child(4) .fr-funnel-bar-fill { animation-delay: 480ms; }
.fr-funnel-value {
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 500;
    color: var(--fr-ink);
    text-align: right;
}

/* YoY delta column: green ▲ / red ▼ / muted — */
.fr-funnel-yoy {
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}
.fr-funnel-yoy.fr-up        { color: var(--fr-positive); }
.fr-funnel-yoy.fr-down      { color: var(--fr-negative); }
.fr-funnel-yoy--neutral     { color: var(--fr-ink-3); }

/* Sparkline wrapper (Zone 3) */
.fr-sparkline-wrap {
    margin: 14px 0 22px;
    height: 64px;
}

/* Publish-status badge (Zone 1 hero) */
.fr-publish-badge {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 14px;
    border-radius: var(--fr-r-md);
    cursor: pointer;
    transition: background 140ms ease;
    text-decoration: none;
    flex: 1 1 auto;
    max-width: 200px;
    align-self: stretch;
    justify-content: center;
}
.fr-publish-badge--clean {
    background: var(--fr-positive-tint);
}
.fr-publish-badge--clean:hover {
    background: var(--fr-positive-tint-2);
}
.fr-publish-badge--action {
    background: var(--fr-warning-tint);
}
.fr-publish-badge--action:hover {
    background: var(--fr-warning-tint-2);
}
.fr-pb-top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.fr-publish-badge--clean .fr-pb-top  { color: var(--fr-positive-deep); }
.fr-publish-badge--action .fr-pb-top { color: var(--fr-warning-deep); }
.fr-pb-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.fr-publish-badge--clean .fr-pb-icon  { background: var(--fr-positive); }
.fr-publish-badge--action .fr-pb-icon { background: var(--fr-warning); }
.fr-pb-detail {
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-size: 11px;
    color: var(--fr-ink-3);
    letter-spacing: 0.01em;
    padding-left: 24px;
    line-height: 1.3;
}

/* Tooltip for badge hover (action state only — shows per-unit-type breakdown) */
.fr-publish-badge[data-tooltip]::after,
.fr-publish-badge[data-tooltip]::before {
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 20;
}
.fr-publish-badge[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--fr-ink);
    color: #FFFFFF;
    padding: 9px 12px;
    border-radius: 8px;
    font-family: var(--fr-font-mono);
    font-size: 11.5px;
    line-height: 1.5;
    white-space: pre;
    box-shadow: 0 8px 24px rgba(20, 24, 29, 0.18);
}
.fr-publish-badge[data-tooltip]::before {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--fr-ink);
}
.fr-publish-badge[data-tooltip]:hover::after,
.fr-publish-badge[data-tooltip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Zone 1/2/3 stack on smaller screens */
@media (max-width: 1100px) {
    .fr-pc-zones { grid-template-columns: 1fr; }
    .fr-pc-zone {
        border-right: 0;
        border-bottom: 1px solid var(--fr-hairline);
    }
    .fr-pc-zone:last-child { border-bottom: 0; }
}


/* ──────────────────────────────────────────────────────────────────────
   PROPERTY CARD — slim header mode (Leasing Hub & Settings)
   ----------------------------------------------------------------------
   Leasing agents jump straight to the unit table; settings users don't
   need property metrics either — the demand/rent zones are noise for
   both workflows. The card class is toggled by a callback in
   app/callbacks/navigation.py based on the active page.
   ────────────────────────────────────────────────────────────────────── */

.fr-property-card.fr-property-card-slim {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 16px;
}
.fr-property-card.fr-property-card-slim .fr-pc-header {
    border-bottom: none;
    padding: 14px 4px 4px;
}
.fr-property-card.fr-property-card-slim .fr-pc-zones,
.fr-property-card.fr-property-card-slim .fr-updated {
    display: none;
}


/* ──────────────────────────────────────────────────────────────────────
   PROPERTY CARD POPOVERS (Phase 5 / Task #8)
   Hover-revealed math breakdowns for the Leases Needed row and Demand
   Gap hero in Zone 2. Anchored to the new design language: warm white
   surface, hairline border, mono numerics, refined hierarchy.
   ────────────────────────────────────────────────────────────────────── */

.fr-popover.popover {
    border: 1px solid var(--fr-hairline) !important;
    border-radius: var(--fr-r-md) !important;
    background: var(--fr-surface) !important;
    box-shadow: 0 12px 32px rgba(20, 24, 29, 0.10),
                0 2px 4px rgba(20, 24, 29, 0.04) !important;
    font-family: var(--fr-font-sans) !important;
    max-width: 360px !important;
}
.fr-popover .popover-body {
    padding: 14px 16px !important;
    min-width: 280px;
    color: var(--fr-ink);
}
.fr-popover .popover-arrow::after,
.fr-popover .popover-arrow::before {
    border-bottom-color: var(--fr-hairline) !important;
}

.fr-popover-eyebrow {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--fr-ink-3);
    font-weight: 600;
    margin-bottom: 10px;
}
.fr-popover-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-size: 13px;
    line-height: 1.4;
}
.fr-popover-row-label {
    color: var(--fr-ink-2);
}
.fr-popover-row-value {
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    color: var(--fr-ink);
    font-weight: 500;
    margin-left: 12px;
    white-space: nowrap;
}
.fr-popover-row--emphasis .fr-popover-row-label {
    color: var(--fr-ink);
    font-weight: 500;
}
.fr-popover-row--emphasis .fr-popover-row-value {
    font-weight: 600;
    font-size: 14px;
}
.fr-popover-divider {
    height: 1px;
    background: var(--fr-hairline);
    margin: 8px 0;
}

/* The cursor-help affordance lets the user know the element has more
   info available on hover. Applied to the popover anchors. */
.fr-popover-anchor {
    cursor: help;
}


/* ──────────────────────────────────────────────────────────────────────
   SECTION HEADER — page break between property card and unit-type list
   ────────────────────────────────────────────────────────────────────── */

.fr-section-header {
    margin: 8px 4px 18px;
}
.fr-section-title {
    font-family: var(--fr-font-serif);
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.005em;
    color: var(--fr-ink);
    line-height: 1;
    margin: 0 0 6px;
}
.fr-section-description {
    font-family: var(--fr-font-serif);
    font-style: italic;
    font-size: 15px;
    color: var(--fr-ink-2);
    margin: 0;
    line-height: 1.4;
    letter-spacing: 0.005em;
}


/* Softer red for availability exposure "urgent" bar */
.bg-exposure-urgent {
  background-color: #e57373 !important;  /* Coral red - urgent but not alarming */
}

/* Renewals UI polish */
.renewals-summary-bar {
  gap: 8px;
}
.renewals-badge {
  display: inline-block;
  padding: 4px 8px;
  margin-right: 8px;
  border-radius: 12px;
  font-size: 12px;
  background: rgba(0,0,0,0.04);
}
.renewals-badge-current { color: #6c757d; }
.renewals-badge-new { color: #0dcaf0; }
.renewals-badge-base { color: #0d6efd; }
.renewals-badge-amenity { color: #20c997; }
.renewals-badge-increase { color: #198754; }
.renewals-badge-total { color: #0d6efd; font-weight: 600; }

.pill-override {
  background: #ffe8a1;
  color: #856404;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
}
/* Keep override input inline with badges, avoid wrapping early */
.override-inline { display: inline-block; vertical-align: middle; min-width: 140px; }

/* Renewals table terms collapse row styling */
.terms-collapse-row > td {
  background: #f6f8fb;
  border-top: 1px solid #dfe3e8;
  border-bottom: 1px solid #dfe3e8;
}

.terms-collapse-row .dash-table-container {
  margin: 0;
}