/* ══════════════════════════════════════════════════════════════════════
   REVIEW DASHBOARD
   ----------------------------------------------------------------------
   Analyst surface — scan all properties, see which have submitted /
   published rates, and jump into the ones that need action. Uses the
   editorial vocabulary for chrome (serif page title, small-caps
   eyebrows, hairline rules) but stays workman-style inside the table
   itself: sans property names, faint vertical gridlines, fixed column
   widths. Built for heavy daily scanning by pricing analysts.

   The page content is width-capped at 1280px so that on wide monitors
   the table reads as a focused scan column rather than a stretched-out
   strip. The navbar above stays full-width.
   ══════════════════════════════════════════════════════════════════════ */

/* Page wrapper: cap width so columns don't sprawl on ultrawide displays */
.review-dashboard-page {
    max-width: 1280px;
    margin: 0 auto;
}

/* ── Page header (title + subtitle + live updated pill) ─────────────── */
.fr-review-header {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 14px;
    margin: 4px 4px 22px;
}
.fr-review-header-text { flex: 1; min-width: 280px; }
.fr-review-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-review-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-review-updated {
    font-family: var(--fr-font-mono);
    font-size: 11px;
    color: var(--fr-ink-3);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 4px;
}
.fr-review-updated .live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--fr-positive);
    box-shadow: 0 0 0 0 rgba(31, 122, 77, 0.5);
    animation: fr-pulse 2.4s ease-out infinite;
}

/* ── Three-zone scoreboard (Pending / Published / Not Submitted) ────── */
.fr-review-scoreboard {
    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);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    overflow: hidden;
    margin-bottom: 24px;
}
.fr-review-score {
    padding: 24px 28px 26px;
    border-right: 1px solid var(--fr-hairline);
    background: transparent;
    border-top: none;
    border-bottom: none;
    border-left: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--fr-font-sans);
    color: var(--fr-ink);
    position: relative;
    opacity: 0;
    transform: translateY(6px);
    animation: fr-rise 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: background 140ms ease;
}
.fr-review-score:last-child { border-right: 0; }
.fr-review-score:nth-child(1) { animation-delay: 80ms; }
.fr-review-score:nth-child(2) { animation-delay: 160ms; }
.fr-review-score:nth-child(3) { animation-delay: 240ms; }
.fr-review-score:hover { background: #FBF9F4; }
.fr-review-score:focus-visible {
    outline: none;
    background: #FBF9F4;
    box-shadow: inset 0 0 0 2px rgba(180, 83, 9, 0.18);
}
.fr-review-score--active {
    background: #FBF6EC;
}
.fr-review-score--active:hover { background: #FBF6EC; }
.fr-review-score--active::after {
    content: '';
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 0;
    height: 2px;
    background: var(--fr-accent);
}
.fr-review-score-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fr-ink-3);
    font-weight: 500;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fr-review-score-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--fr-hairline);
}
.fr-review-score-value {
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-size: 38px;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--fr-ink);
}
.fr-review-score-value--pending   { color: var(--fr-warning); }
.fr-review-score-value--published { color: var(--fr-positive); }
.fr-review-score-value--missing   { color: var(--fr-ink-2); }
.fr-review-score-hint {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--fr-ink-3);
    font-weight: 400;
}

/* ── Controls row (search + clear filter) ────────────────────────────── */
.fr-review-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}
.fr-review-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline-strong);
    border-radius: var(--fr-r-md);
    padding: 0 14px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.fr-review-search:focus-within {
    border-color: var(--fr-accent);
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.10);
}
.fr-review-search-label {
    font-family: var(--fr-font-sans);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fr-ink-3);
    padding-right: 10px;
    border-right: 1px solid var(--fr-hairline);
}
.fr-review-search input,
.fr-review-search input.form-control {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: var(--fr-font-sans);
    font-size: 14px;
    color: var(--fr-ink);
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
}
.fr-review-search input::placeholder {
    color: #B5B2A8;
    font-style: italic;
}
.fr-review-clear {
    height: 42px;
    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-review-clear:hover {
    background: #FBF9F4;
    color: var(--fr-ink);
    border-color: #C9C5B8;
}
.fr-review-clear[disabled],
.fr-review-clear[hidden] { display: none; }

/* ── Editorial table ─────────────────────────────────────────────────── */
.fr-review-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-review-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--fr-ink);
    /* Fixed layout so column widths below are authoritative — without this
       the browser redistributes width to whichever column has the longest
       content, which is what caused the property column to dominate. */
    table-layout: fixed;
}

/* Column widths — total = 100%. Tuned for typical content lengths:
   property name ~16ch, ISO timestamp ~10ch, status pill ~14ch. The
   "No Rate Published" column is wider than its content needs in order
   to accommodate the italic hint subtext on a single line. */
.fr-review-table thead th:nth-child(1) { width: 22%; }
.fr-review-table thead th:nth-child(2) { width: 18%; }
.fr-review-table thead th:nth-child(3) { width: 16%; }
.fr-review-table thead th:nth-child(4) { width: 20%; }
.fr-review-table thead th:nth-child(5) { width: 14%; }
.fr-review-table thead th:nth-child(6) { width: 10%; }

.fr-review-table thead th {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fr-ink-3);
    font-weight: 500;
    padding: 16px 22px;
    text-align: left;
    border-bottom: 1px solid var(--fr-hairline);
    /* Faint vertical gridline between columns — same tone as row borders so
       the grid reads as continuous ruling rather than a boxed-in cage. */
    border-right: 1px solid var(--fr-hairline);
    background: #FBFAF6;
    white-space: nowrap;
}
.fr-review-table thead th:last-child { border-right: 0; }
.fr-review-table thead th.is-center { text-align: center; }
.fr-review-table thead th.is-right  { text-align: right; }
.fr-review-table thead th .col-hint {
    display: block;
    font-size: 10px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--fr-ink-3);
    margin-top: 3px;
    font-style: italic;
    line-height: 1.3;
    /* Force one line — column width is tuned to accommodate this. If a
       future hint string ever overflows, that's a visible signal to either
       widen the column or shorten the copy. */
    white-space: nowrap;
}
.fr-review-table tbody td {
    padding: 14px 22px;
    border-bottom: 1px solid var(--fr-hairline);
    border-right: 1px solid var(--fr-hairline);
    vertical-align: middle;
    font-size: 13.5px;
    color: var(--fr-ink);
    overflow: hidden;
    text-overflow: ellipsis;
}
.fr-review-table tbody td:last-child { border-right: 0; }
.fr-review-table tbody tr:last-child td { border-bottom: 0; }
.fr-review-table tbody tr:nth-child(even) td { background: #FCFBF7; }
.fr-review-table tbody tr:hover td { background: #FBF6EC; }
.fr-review-table td.is-center { text-align: center; }
.fr-review-table td.is-right  { text-align: right; }

/* Property name — sans, workman, not editorial. This is a scanning column
   that operators read all day; readability beats voice. */
.fr-review-prop {
    font-family: var(--fr-font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--fr-ink);
    letter-spacing: 0;
    line-height: 1.2;
}
.fr-review-count {
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 500;
    color: var(--fr-accent);
    letter-spacing: -0.01em;
}
.fr-review-count--ok {
    color: var(--fr-positive);
    font-size: 15px;
    font-weight: 500;
}
.fr-review-meta {
    font-size: 13px;
    color: var(--fr-ink-2);
}
.fr-review-meta--mono {
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    color: var(--fr-ink-2);
}
.fr-review-meta--muted { color: var(--fr-ink-3); }

/* ── Status pills (soft tinted, no chunky dark gray) ────────────────── */
.fr-review-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 4px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.3;
    white-space: nowrap;
}
.fr-review-pill .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}
.fr-review-pill--published {
    background: var(--fr-positive-tint-2);
    color: var(--fr-positive-deep);
}
.fr-review-pill--pending {
    background: var(--fr-warning-tint-2);
    color: var(--fr-warning-deep);
}
.fr-review-pill--missing {
    background: var(--fr-hairline);
    color: var(--fr-ink-2);
}
.fr-review-pill--missing .dot { opacity: 0.6; }

/* ── View link (right-aligned chevron, ghost) ────────────────────────── */
.fr-review-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    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-review-view .chev {
    font-family: var(--fr-font-serif);
    font-size: 16px;
    line-height: 1;
    transform: translateX(0);
    transition: transform 160ms ease;
}
.fr-review-view:hover {
    background: var(--fr-accent-soft);
    border-color: rgba(180, 83, 9, 0.18);
    color: var(--fr-accent-strong);
}
.fr-review-view:hover .chev { transform: translateX(3px); }

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

/* ── Segmented toggle (New Leases | Renewals) ───────────────────────── */
.fr-review-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    margin: 0 4px 22px;
    background: #F2EFE7;
    border: 1px solid var(--fr-hairline);
    border-radius: var(--fr-r-md);
}
.fr-review-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: transparent;
    border: none;
    border-radius: calc(var(--fr-r-md) - 3px);
    font-family: var(--fr-font-sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--fr-ink-3);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.fr-review-tab:hover { color: var(--fr-ink-2); }
.fr-review-tab--active {
    background: var(--fr-surface);
    color: var(--fr-ink);
    box-shadow: 0 1px 2px rgba(20, 24, 29, 0.06);
}
.fr-review-tab--active:hover { color: var(--fr-ink); }
/* Small count badge on the Renewals tab so pending work is visible without
   switching panes. */
.fr-review-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 100px;
    background: var(--fr-warning-tint-2);
    color: var(--fr-warning-deep);
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
}
.fr-review-tab-badge[hidden] { display: none; }

/* ── Renewals pane: summary line ─────────────────────────────────────── */
.fr-review-renewal-summary {
    font-family: var(--fr-font-sans);
    font-size: 13.5px;
    color: var(--fr-ink-2);
    margin: 0 4px 16px;
}
.fr-review-renewal-summary-num {
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--fr-ink);
}

/* ── Renewals table: 6 columns
   (Property / Units / Expiration / By / Waiting / View) ───────────────── */
.fr-review-table--renewals thead th:nth-child(1) { width: 22%; }
.fr-review-table--renewals thead th:nth-child(2) { width: 13%; }
.fr-review-table--renewals thead th:nth-child(3) { width: 25%; }
.fr-review-table--renewals thead th:nth-child(4) { width: 16%; }
.fr-review-table--renewals thead th:nth-child(5) { width: 16%; }
.fr-review-table--renewals thead th:nth-child(6) { width: 8%; }

/* Expiration window — mono so the dates align and read as a data field */
.fr-review-exp {
    font-family: var(--fr-font-mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    color: var(--fr-ink);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Waiting-since cell: date + small age badge on one line */
.fr-review-age {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.fr-review-age-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px 3px;
    border-radius: 100px;
    background: var(--fr-hairline);
    color: var(--fr-ink-2);
    font-family: var(--fr-font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.fr-review-age-badge--stale {
    background: var(--fr-warning-tint-2);
    color: var(--fr-warning-deep);
}

/* ══════════════════════════════════════════════════════════════════════
   END REVIEW DASHBOARD
   ══════════════════════════════════════════════════════════════════════ */