/* ══════════════════════════════════════════════════════════════════════
   EXECUTIVE SUMMARY
   ----------------------------------------------------------------------
   Portfolio-wide metrics at a glance: occupancy, leased %, adv vs
   in-place, market position, 30-day rent change. Rows expand on click
   to reveal a unit-type breakdown indented beneath the property row.

   Page is capped at 1180px — narrower than Reports' 1440px because the
   data is a tight grid of short percentage values, not wide timestamps.
   Saturated bootstrap red/green/amber from the previous design is
   replaced with the Frontier signal tokens so the page feels like the
   rest of the app.
   ══════════════════════════════════════════════════════════════════════ */

.executive-summary-page {
    max-width: 1180px;
    margin: 0 auto;
    font-family: var(--fr-font-sans);
    color: var(--fr-ink);
}

/* ── Editorial header (title + subtitle + Expand/Collapse on the right) */
.fr-exec-header {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 14px;
    margin: 4px 4px 22px;
}
.fr-exec-header-text { flex: 1; min-width: 280px; }
.fr-exec-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-exec-subtitle {
    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;
}
.fr-exec-controls {
    display: inline-flex;
    gap: 8px;
    flex-shrink: 0;
    padding-bottom: 4px;
}
.fr-exec-ghost-btn {
    height: 34px;
    padding: 0 14px;
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline-strong);
    border-radius: var(--fr-r-md);
    font-family: var(--fr-font-sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fr-ink-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.fr-exec-ghost-btn:hover {
    background: #FBF9F4;
    color: var(--fr-ink);
    border-color: #C9C5B8;
}
.fr-exec-ghost-btn .glyph {
    font-family: var(--fr-font-serif);
    font-size: 14px;
    line-height: 1;
    color: var(--fr-ink-3);
}

/* ── Table wrap ─────────────────────────────────────────────────────── */
.fr-exec-table-wrap {
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline);
    border-radius: var(--fr-r-lg);
    box-shadow: 0 1px 0 rgba(20, 24, 29, 0.02), 0 1px 2px rgba(20, 24, 29, 0.03);
    overflow: hidden;
    font-family: var(--fr-font-sans);
}
.fr-exec-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--fr-ink);
    table-layout: fixed;
}

/* Column widths — Property is the widest; metrics are compact percentage
   columns; View is a small right-edge action column. Total = 100%. */
.fr-exec-table thead th:nth-child(1) { width: 24%; }
.fr-exec-table thead th:nth-child(2) { width: 11%; }
.fr-exec-table thead th:nth-child(3) { width: 11%; }
.fr-exec-table thead th:nth-child(4) { width: 18%; } /* Adv vs In-Place — wider for "+3.4% (+$69)" */
.fr-exec-table thead th:nth-child(5) { width: 11%; }
.fr-exec-table thead th:nth-child(6) { width: 13%; }
.fr-exec-table thead th:nth-child(7) { width: 12%; }

/* ── Headers — small-caps eyebrow, sortable cue ─────────────────────── */
.fr-exec-table thead th {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fr-ink-3);
    font-weight: 500;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--fr-hairline);
    border-right: 1px solid var(--fr-hairline);
    background: #FBFAF6;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}
.fr-exec-table thead th:last-child { border-right: 0; cursor: default; }
.fr-exec-table thead th.is-right { text-align: right; }
.fr-exec-table thead th:hover:not(:last-child) {
    color: var(--fr-ink);
    background: #F7F4EB;
}
.fr-exec-sort-indicator {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    color: var(--fr-accent);
    font-weight: 600;
    vertical-align: middle;
    line-height: 1;
}

/* ── Body cells ─────────────────────────────────────────────────────── */
.fr-exec-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--fr-hairline);
    border-right: 1px solid var(--fr-hairline);
    vertical-align: middle;
    font-size: 13px;
    color: var(--fr-ink);
    overflow: hidden;
    text-overflow: ellipsis;
}
.fr-exec-table tbody td:last-child { border-right: 0; }
.fr-exec-table tbody tr:last-child td { border-bottom: 0; }
.fr-exec-table tbody td.is-right { text-align: right; }

/* Property rows — clickable, zebra-striped, warm hover */
.fr-exec-table tbody tr.fr-exec-prop-row { cursor: pointer; }
.fr-exec-table tbody tr.fr-exec-prop-row:nth-of-type(even) td { background: #FCFBF7; }
.fr-exec-table tbody tr.fr-exec-prop-row:hover td { background: #FBF6EC; }

/* Property name cell — sans medium with leading chevron */
.fr-exec-prop {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--fr-font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--fr-ink);
    line-height: 1.2;
}
.fr-exec-chevron {
    display: inline-block;
    font-family: var(--fr-font-serif);
    font-size: 18px;
    line-height: 1;
    color: var(--fr-ink-3);
    width: 12px;
    text-align: center;
    transform: translateY(2px);
    transition: color 120ms ease;
}
.fr-exec-table tbody tr.fr-exec-prop-row:hover .fr-exec-chevron {
    color: var(--fr-accent);
}

/* Numeric cells — mono tabular-nums, right-aligned */
.fr-exec-num {
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
}
.fr-exec-num--neutral { color: var(--fr-ink); }
.fr-exec-num--pos     { color: var(--fr-positive-deep); }
.fr-exec-num--warn    { color: var(--fr-warning-deep); }
.fr-exec-num--neg     { color: var(--fr-negative); }
.fr-exec-num--muted   { color: var(--fr-ink-3); }
.fr-exec-num-sub {
    margin-left: 6px;
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--fr-ink-3);
    font-weight: 400;
}
.fr-exec-em-dash {
    color: var(--fr-ink-3);
    font-family: var(--fr-font-mono);
    font-size: 13px;
}

/* ── Expanded unit-type rows (indented sub-rows) ────────────────────── */
.fr-exec-table tbody tr.fr-exec-ut-row td {
    background: #FCFBF7;
    padding: 9px 16px;
    color: var(--fr-ink-2);
    font-size: 12px;
}
.fr-exec-table tbody tr.fr-exec-ut-row td.fr-exec-ut-name-cell {
    padding-left: 40px;
}
.fr-exec-table tbody tr.fr-exec-ut-row:hover td {
    background: #F8F4EA;
}
.fr-exec-ut-name {
    font-family: var(--fr-font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--fr-ink-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.fr-exec-table tbody tr.fr-exec-ut-row .fr-exec-num {
    font-size: 12px;
    font-weight: 400;
}

/* ── View link (right-edge ghost chevron) ───────────────────────────── */
.fr-exec-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--fr-r-sm);
    font-family: var(--fr-font-sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fr-accent);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.fr-exec-view .chev {
    font-family: var(--fr-font-serif);
    font-size: 16px;
    line-height: 1;
    transition: transform 160ms ease;
}
.fr-exec-view:hover {
    background: var(--fr-accent-soft);
    border-color: rgba(180, 83, 9, 0.18);
    color: var(--fr-accent-strong);
}
.fr-exec-view:hover .chev { transform: translateX(3px); }

/* ── Empty state ────────────────────────────────────────────────────── */
.fr-exec-empty {
    padding: 56px 22px;
    text-align: center;
    color: var(--fr-ink-3);
    font-family: var(--fr-font-sans);
    font-size: 13.5px;
}
.fr-exec-empty .title {
    font-family: var(--fr-font-serif);
    font-style: italic;
    font-size: 18px;
    color: var(--fr-ink-2);
    margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   END EXECUTIVE SUMMARY
   ══════════════════════════════════════════════════════════════════════ */