/* ══════════════════════════════════════════════════════════════════════
   FRONTIER MODALS — shared
   ─────────────────────────────────────────────────────────────────────
   Any dbc.Modal that gets `className="fr-modal"` is portal'd to the
   document body (outside the .fr-page scope) — these selectors anchor
   the styling on the className itself so it works regardless of which
   page launched the modal.
   ══════════════════════════════════════════════════════════════════════ */

.fr-modal .modal-content {
    background-color: var(--fr-surface) !important;
    border: 1px solid var(--fr-hairline) !important;
    border-radius: var(--fr-r-lg) !important;
    box-shadow:
        0 1px 0 rgba(20, 24, 29, 0.02),
        0 24px 60px -16px rgba(20, 24, 29, 0.18) !important;
}
.fr-modal .modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--fr-hairline) !important;
    padding: 20px 24px !important;
}
.fr-modal .modal-title {
    font-family: var(--fr-font-serif) !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: var(--fr-ink) !important;
    letter-spacing: 0.005em;
}
.fr-modal .modal-body {
    padding: 22px 24px !important;
    font-family: var(--fr-font-sans);
    color: var(--fr-ink);
}
.fr-modal .modal-body label,
.fr-modal .modal-body .col-form-label {
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--fr-ink-3) !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
}
.fr-modal .modal-body .form-control,
.fr-modal .modal-body .form-select {
    background-color: var(--fr-bg) !important;
    border: 1px solid var(--fr-hairline-strong) !important;
    border-radius: var(--fr-r-md) !important;
    font-family: var(--fr-font-sans) !important;
    color: var(--fr-ink) !important;
    box-shadow: none !important;
}
.fr-modal .modal-body .form-control:focus,
.fr-modal .modal-body .form-select:focus {
    outline: none !important;
    background-color: var(--fr-surface) !important;
    border-color: var(--fr-accent) !important;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.12) !important;
}
.fr-modal .modal-body .form-control:disabled,
.fr-modal .modal-body .form-select:disabled {
    background-color: rgba(20, 24, 29, 0.025) !important;
    color: var(--fr-ink-2) !important;
    border-color: var(--fr-hairline) !important;
}
/* FormText caption inside modals */
.fr-modal .modal-body .form-text {
    color: var(--fr-ink-3) !important;
    font-size: 12.5px !important;
    margin-top: 6px;
    line-height: 1.45;
}
/* dcc.Dropdown styling inside modals (e.g., Add Recipient user picker) */
.fr-modal .modal-body .Select-control {
    background-color: var(--fr-bg) !important;
    border: 1px solid var(--fr-hairline-strong) !important;
    border-radius: var(--fr-r-md) !important;
    min-height: 40px !important;
    box-shadow: none !important;
}


/* ══════════════════════════════════════════════════════════════════════
   UNIT TYPE ROW LAYOUT — scannable master/detail rows (reversible).
   Toggleable alternative to .ut-card; see
   docs/UNIT_TYPE_ROW_REDESIGN_PLAN.md. Collapsed row is a column-aligned
   summary; clicking expands the existing .ut-head/.ut-body/.ut-foot detail.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Section-header split (title left, layout toggle right) ──────────── */
.fr-section-header--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

/* ── Segmented Cards/Rows toggle ────────────────────────────────────── */
.fr-seg {
    display: inline-flex;
    background: var(--fr-bg);
    border: 1px solid var(--fr-hairline-strong);
    border-radius: 100px;
    padding: 3px;
    gap: 2px;
}
.fr-seg-btn {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--fr-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fr-ink-3);
    padding: 6px 16px;
    border-radius: 100px;
    transition: background 140ms ease, color 140ms ease;
}
.fr-seg-btn:hover { color: var(--fr-ink-2); }
.fr-seg-btn.active {
    background: var(--fr-surface);
    color: var(--fr-accent-strong);
    box-shadow: 0 1px 2px rgba(20, 24, 29, 0.10);
}

/* ── Row wrapper ────────────────────────────────────────────────────── */
.ut-row {
    position: relative;
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline);
    /* Status edge is a real 3px left BORDER (not a ::before bar) so it runs the
       full height of the row — header, drawer, foot AND the expanded units
       table — and can never be painted over by the table's stacking context.
       Color is set per data-state below. */
    border-left: 3px solid var(--fr-accent);
    border-radius: var(--fr-r-md);
    overflow: hidden;
    margin-bottom: 9px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ut-row[data-state="published"] { border-left-color: var(--fr-accent); }
.ut-row[data-state="notpub"]   { border-left-color: var(--fr-warning); }
/* hover/open recolor only the top/right/bottom hairline, so the status-colored
   left edge stays put through both states. */
.ut-row:hover {
    border-top-color: var(--fr-hairline-strong);
    border-right-color: var(--fr-hairline-strong);
    border-bottom-color: var(--fr-hairline-strong);
    box-shadow: 0 2px 14px rgba(20, 24, 29, 0.05);
}
.ut-row.open {
    border-top-color: var(--fr-accent);
    border-right-color: var(--fr-accent);
    border-bottom-color: var(--fr-accent);
    box-shadow: 0 6px 26px rgba(20, 24, 29, 0.08);
}
.ut-row.is-empty { background: var(--fr-bg); }

/* ── Collapsed row main (the scannable grid) ────────────────────────── */
/* Type/Status · Available (own column, so it aligns down the page) ·
   Occupancy · Rent (delta + sparkline) · chevron. Market bar removed. */
.ut-row-main {
    display: grid;
    grid-template-columns: 270px 132px 260px 1fr 44px;
    align-items: center;
    gap: 26px;
    padding: 22px 28px;
    cursor: pointer;
    font-family: var(--fr-font-sans);
}

/* type + status — the section heading, larger than the metric columns. */
.ut-row-type .codeline { display: flex; align-items: center; gap: 12px; }
.ut-row-type .code {
    font-family: var(--fr-font-sans);
    font-weight: 700;
    font-size: 23px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--fr-ink);
}

/* available count — its own grid cell, left-aligned at a fixed x so the
   counts line up vertically regardless of status-pill width. */
.ut-row-avail-cell {
    font-family: var(--fr-font-sans);
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 7px;
}
.ut-row-avail-cell b {
    font-size: 15px;
    font-weight: 700;
    color: var(--fr-ink);
    letter-spacing: -0.01em;
}
/* "AVAILABLE" — same small-caps label vocabulary as OCCUPIED / VS IN-PLACE */
.ut-row-avail-cell .lab {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fr-ink-3);
}
.ut-row-stag {
    font-family: var(--fr-font-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 100px;
    white-space: nowrap;
    line-height: 1;
}
.ut-row-stag.pub {
    color: var(--fr-accent-strong);
    background: var(--fr-accent-soft);
}
.ut-row-stag.notpub {
    color: #fff;
    background: var(--fr-warning);
    border: 1px solid var(--fr-warning-deep);
    box-shadow: 0 1px 4px rgba(181, 112, 31, 0.30);
}

/* occupancy — color-banded, color only */
.ut-row-occ { display: flex; flex-direction: column; gap: 7px; }
.ut-row-occ .figs { display: flex; align-items: baseline; gap: 9px; }
.ut-row-occ .figs .pct {
    font-family: var(--fr-font-sans);
    font-weight: 700;
    font-size: 23px;
    line-height: 1;
    letter-spacing: -0.01em;
}
.ut-row-occ .figs .occlab {
    font-family: var(--fr-font-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fr-ink-3);
}
.ut-row-occ .track {
    height: 6px;
    border-radius: 100px;
    background: #EDEBE4;
    overflow: hidden;
}
.ut-row-occ .track i { display: block; height: 100%; border-radius: 100px; }
.ut-row-occ .lsd {
    font-family: var(--fr-font-mono);
    font-size: 10px;
    color: var(--fr-ink-3);
}
.ut-row-occ .lsd b { color: var(--fr-ink-2); font-weight: 600; }
.ut-row-occ.is-tight .pct { color: var(--fr-positive-deep); }
.ut-row-occ.is-tight .track i { background: var(--fr-positive); }
.ut-row-occ.is-watch .pct { color: var(--fr-warning-deep); }
.ut-row-occ.is-watch .track i { background: var(--fr-warning); }
.ut-row-occ.is-loose .pct { color: var(--fr-negative); }
.ut-row-occ.is-loose .track i { background: var(--fr-negative); }

/* rent — headline delta + in-place -> advertised flow + sparkline */
.ut-row-rent { display: flex; align-items: center; gap: 28px; }
.ut-row-spark { padding-left: 28px; border-left: 1px solid var(--fr-hairline); }
.ut-row-rent .delta2 { display: flex; flex-direction: column; min-width: 100px; }
.ut-row-rent .delta2 .big {
    font-family: var(--fr-font-sans);
    font-weight: 700;
    font-size: 25px;
    line-height: 1;
    letter-spacing: -0.01em;
}
.ut-row-rent .delta2 .cap {
    font-family: var(--fr-font-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fr-ink-3);
    margin-top: 5px;
}
.ut-row-rent .big.is-up { color: var(--fr-positive-deep); }
.ut-row-rent .big.is-flat { color: var(--fr-ink-2); }
.ut-row-rent .big.is-warn { color: var(--fr-warning-deep); }
.ut-row-rent .big.is-down { color: var(--fr-negative); }
.ut-row-rent .flow {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-left: 32px;
    border-left: 1px solid var(--fr-hairline);
}
.ut-row-rent .flow .stat { display: flex; flex-direction: column; gap: 5px; }
.ut-row-rent .flow .stat .k {
    font-family: var(--fr-font-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fr-ink-3);
}
.ut-row-rent .flow .stat b {
    font-family: var(--fr-font-mono);
    font-size: 17px;
    font-weight: 600;
    color: var(--fr-ink);
}
.ut-row-rent .flow .stat.adv b { color: var(--fr-accent-strong); }
.ut-row-rent .flow .arrow {
    color: var(--fr-ink-3);
    font-size: 15px;
    align-self: flex-end;
    padding-bottom: 2px;
}

/* chevron */
.ut-row-chev {
    justify-self: end;
    font-size: 20px;
    line-height: 1;
    color: var(--fr-ink-3);
    transition: transform 200ms ease, color 140ms ease;
}
.ut-row.open .ut-row-chev { transform: rotate(90deg); color: var(--fr-accent); }

/* ── Expanded detail — the original Cards body on a recessed "drawer" ──
   The collapsed row stays bright white (the landmark). The expanded body
   reuses the shared 3-column `.ut-body` (Availability/Traffic · Rent ·
   Market) and recedes onto the warm paper tone, so the white row reads as a
   headline floating above an evidence drawer. No dotted divider — the tonal
   step plus a soft inset top-shadow separates them, and the amber left-edge
   (the 3px `border-left` on `.ut-row`) already runs the full height to tie the
   two together. Responsive stacking is inherited from the shared `.ut-body`
   media query. */
.ut-row-detail-inner {
    background: var(--fr-bg);
    border-top: 1px solid var(--fr-hairline-strong);
    box-shadow: inset 0 8px 10px -9px rgba(20, 24, 29, 0.13);
}

/* Responsive: stack the row main on narrow viewports */
@media (max-width: 1100px) {
    .ut-row-main {
        grid-template-columns: 1fr 1fr;
        gap: 18px 24px;
    }
    .ut-row-chev { display: none; }
}
.fr-modal .modal-body .Select-control:hover { border-color: var(--fr-ink-3) !important; }
.fr-modal .modal-body .Select.is-focused:not(.is-open) > .Select-control {
    background-color: var(--fr-surface) !important;
    border-color: var(--fr-accent) !important;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.12) !important;
}
.fr-modal .modal-body .Select-menu-outer {
    background-color: var(--fr-surface) !important;
    border: 1px solid var(--fr-hairline-strong) !important;
    border-radius: var(--fr-r-md) !important;
    box-shadow: 0 8px 24px rgba(20, 24, 29, 0.10) !important;
    margin-top: 4px !important;
}
.fr-modal .modal-body .Select-option:hover,
.fr-modal .modal-body .Select-option.is-focused {
    background-color: var(--fr-accent-soft) !important;
    color: var(--fr-accent-strong) !important;
}
/* Checklist (non-switch) inside modals — checkboxes */
.fr-modal .modal-body .form-check-input[type="checkbox"] {
    background-color: var(--fr-surface);
    border: 1px solid var(--fr-hairline-strong);
}
.fr-modal .modal-body .form-check-input[type="checkbox"]:checked {
    background-color: var(--fr-accent) !important;
    border-color: var(--fr-accent) !important;
}
.fr-modal .modal-body .form-check-label {
    color: var(--fr-ink);
    font-size: 14px;
    margin-left: 6px;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.fr-modal .modal-footer {
    background: transparent !important;
    border-top: 1px solid var(--fr-hairline) !important;
    padding: 16px 24px !important;
}
.fr-modal .modal-footer .btn {
    font-family: var(--fr-font-sans) !important;
    font-weight: 500 !important;
    border-radius: var(--fr-r-md) !important;
    box-shadow: none !important;
}
.fr-modal .modal-footer .btn-primary,
.fr-modal .modal-footer .btn-warning,
.fr-modal .modal-footer .btn-success {
    background-color: var(--fr-accent) !important;
    background-image: none !important;
    border-color: var(--fr-accent) !important;
    color: #FDF8EE !important;
}
.fr-modal .modal-footer .btn-primary:hover,
.fr-modal .modal-footer .btn-warning:hover,
.fr-modal .modal-footer .btn-success:hover {
    background-color: var(--fr-accent-strong) !important;
    border-color: var(--fr-accent-strong) !important;
    color: #FDF8EE !important;
}
.fr-modal .modal-footer .btn-secondary {
    background-color: var(--fr-surface) !important;
    background-image: none !important;
    border-color: var(--fr-hairline-strong) !important;
    color: var(--fr-ink) !important;
}
.fr-modal .modal-footer .btn-secondary:hover {
    border-color: var(--fr-ink-3) !important;
}
/* Modal backdrop a touch warmer than Bootstrap default */
.modal-backdrop.show { background-color: rgba(20, 24, 29, 0.45); }

/* ── Market Comparison modal — unit-type dropdown ───────────────────────
   Mirrors the sidebar property selector (.fr-sidebar-dropdown): rounded
   corners, 42px height, General Sans 15/500 value label, amber focus ring.
   Scoped tighter (4 classes) than the generic .fr-modal .modal-body
   .Select-control rules above so the sizing + value-label font win
   regardless of source order. */
.fr-modal .modal-body .fr-market-unit-dropdown .Select-control {
    background-color: var(--fr-surface) !important;
    border: 1px solid var(--fr-hairline-strong) !important;
    border-radius: var(--fr-r-md) !important;
    min-height: 42px !important;
    height: 42px !important;
    box-shadow: none !important;
}
.fr-modal .modal-body .fr-market-unit-dropdown .Select-control:hover {
    border-color: var(--fr-ink-3) !important;
}
.fr-modal .modal-body .fr-market-unit-dropdown .Select.is-focused:not(.is-open) > .Select-control {
    border-color: var(--fr-accent) !important;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.12) !important;
}
.fr-modal .modal-body .fr-market-unit-dropdown .Select-value-label,
.fr-modal .modal-body .fr-market-unit-dropdown .Select-value .Select-value-label,
.fr-modal .modal-body .fr-market-unit-dropdown .Select-value-label * {
    color: var(--fr-ink) !important;
    font-family: var(--fr-font-sans) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}
.fr-modal .modal-body .fr-market-unit-dropdown .Select-placeholder {
    color: var(--fr-ink-3) !important;
}
.fr-modal .modal-body .fr-market-unit-dropdown .Select-option {
    font-family: var(--fr-font-sans) !important;
    font-size: 14px !important;
    padding: 9px 14px !important;
}
.fr-modal .modal-body .fr-market-unit-dropdown .Select-option.is-selected {
    background-color: var(--fr-accent-soft) !important;
    color: var(--fr-accent-strong) !important;
    font-weight: 600 !important;
}

/* ── Market Comparison 30-day detail modal — nested-modal stacking ──────
   This modal opens on top of the (already-open) Market Comparison modal and
   is rendered with backdrop=False (see app/layouts/main.py for why). Lift its
   `.modal` above the parent modal's content (z-index 1055) so the centered
   dialog sits cleanly on top; Bootstrap's `.modal { pointer-events: none }`
   keeps the empty area click-through to the chart behind. */
.fr-market-detail-modal.modal {
    z-index: 1075 !important;
}
/* Give the detail chart a little breathing room above the modal's bottom edge */
.fr-market-detail-modal .modal-body .js-plotly-plot {
    margin-bottom: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   END FRONTIER MODALS
   ══════════════════════════════════════════════════════════════════════ */