/* ===== Global Reset ===== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        sans-serif;
    background-color: #f8f9fa;
}

/* ===== App Container ===== */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* ===== Sidebar ===== */
.sidebar {
    width: 240px;
    min-width: 240px;
    background-color: #1a1d23;
    color: #c9d1d9;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: hidden;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

/* Scrolls independently between the frozen brand header and footer */
.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 12px 20px;
    flex-shrink: 0;
}

.sidebar-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.sidebar-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sidebar-divider {
    border-color: rgba(255, 255, 255, 0.08);
    margin: 0 16px 8px 16px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
}

/* ===== Live financial summary ===== */
.sidebar-live-link {
    display: block;
    text-decoration: none !important;
    padding: 0 12px;
    margin-top: 6px;
    margin-bottom: 18px;
}
.sidebar-live-inner {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sidebar-live-link:hover .sidebar-live-inner {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
}
.live-idle { color: #6b7280; font-size: 0.75rem; line-height: 1.4; }

/* Tiny uppercase captions above each hero number */
.live-cap {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #6b7280;
}
.live-cap-row { line-height: 1; }
.live-cap-year { font-size: 0.6rem; font-weight: 600; color: #8b93a1; }
.live-cap-spaced { display: block; margin-top: 10px; }
.live-muted { font-size: 0.8rem; color: #9ca3af; margin-top: 2px; }

/* Hero numbers — the two figures that move on every assumption tweak */
.live-hero-row {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 1px;
}
.live-hero {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
    border-radius: 4px;
    padding: 0 3px;
    margin-left: -3px;
}

/* SELL alert — shown only when the verdict turns (HOLD stays silent) */
.live-alert {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(220, 38, 38, 0.14);
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 6px;
    padding: 5px 8px;
    margin-bottom: 8px;
}
.live-alert-word { color: #f87171; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.04em; }
.live-alert-reason { display: block; color: #fca5a5; font-size: 0.7rem; }

/* Directional pulse on change. Two parities (a/b) with DISTINCT keyframe names
   per direction — a changed animation-name is what forces the browser to restart
   the animation, so every change re-fires (a shared name only plays once). */
@keyframes pulseUpA { 0% { background: rgba(34, 197, 94, 0.5); } 100% { background: transparent; } }
@keyframes pulseUpB { 0% { background: rgba(34, 197, 94, 0.5); } 100% { background: transparent; } }
@keyframes pulseDownA { 0% { background: rgba(248, 113, 113, 0.5); } 100% { background: transparent; } }
@keyframes pulseDownB { 0% { background: rgba(248, 113, 113, 0.5); } 100% { background: transparent; } }
.pulse-up-a { animation: pulseUpA 2.25s ease; }
.pulse-up-b { animation: pulseUpB 2.25s ease; }
.pulse-down-a { animation: pulseDownA 2.25s ease; }
.pulse-down-b { animation: pulseDownB 2.25s ease; }

/* Inline +/- delta that fades out (distinct keyframe names per parity, same reason) */
@keyframes ghostFadeA { 0% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ghostFadeB { 0% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
.ghost-a { animation: ghostFadeA 4s ease forwards; }
.ghost-b { animation: ghostFadeB 4s ease forwards; }
.ghost-a, .ghost-b {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
}
.ghost-up { color: #22c55e; }
.ghost-down { color: #f87171; }

/* ===== Nav Links (Top-Level) ===== */
.nav-link-item {
    color: #9ca3af !important;
    padding: 10px 16px !important;
    border-radius: 6px !important;
    margin-bottom: 2px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none !important;
}

.nav-link-item:hover {
    color: #e5e7eb !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.nav-link-item.active {
    color: #ffffff !important;
    background-color: rgba(99, 102, 241, 0.15) !important;
    font-weight: 600;
}

/* Parent items with sub-nav: label left, chevron right */
.nav-link-item.has-subnav {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.nav-chevron {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

/* Tailless arrow built from two borders; points down when collapsed */
.nav-chevron-icon {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    opacity: 0.8;
}

/* Rotates to point up when the sub-nav is expanded */
.nav-chevron.open .nav-chevron-icon {
    transform: rotate(225deg);
}

/* ===== Nav Sub-Items (Indented, Subordinate) ===== */
.nav-sub-item {
    color: #6b7280 !important;
    padding: 7px 16px 7px 40px !important;
    border-radius: 6px !important;
    margin-bottom: 1px;
    font-size: 0.82rem;
    font-weight: 400;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none !important;
}

.nav-sub-item:hover {
    color: #d1d5db !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.nav-sub-item.active {
    color: #e5e7eb !important;
    background-color: rgba(99, 102, 241, 0.1) !important;
    font-weight: 500;
}

/* ===== Content Area ===== */
.content-area {
    margin-left: 240px;
    padding: 32px 40px;
    flex: 1;
    min-height: 100vh;
    background-color: #ffffff;
}

/* ===== Onboarding gate (blur + unlock overlay) ===== */

/* Blur the analysis charts underneath the gate. pointer-events off so the
   dimmed content can't be interacted with while locked. */
.content-area.content-gated > * {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

.onboarding-gate {
    position: fixed;
    top: 0;
    left: 240px;
    right: 0;
    bottom: 0;
    z-index: 500;
    background: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 24px;
    overflow-y: auto;
}

.gate-overlay-inner {
    width: 100%;
    max-width: 440px;
}

.gate-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14);
    padding: 28px 28px 24px;
}

.gate-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}

.gate-subtitle {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 18px;
}

.gate-progress-track {
    height: 6px;
    background: #f1f5f9;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 6px;
}

.gate-progress-fill {
    height: 100%;
    background: #38bdf8;
    border-radius: 99px;
    transition: width 0.3s ease;
}

.gate-progress-label {
    font-size: 0.78rem;
    color: #9ca3af;
    margin-bottom: 16px;
}

.gate-item-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gate-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-top: 1px solid #f1f5f9;
}
.gate-item:first-child {
    border-top: none;
}

.gate-item-icon {
    font-size: 0.95rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.gate-icon-done { color: #22c55e; }
.gate-icon-empty { color: #38bdf8; }
.gate-icon-default { color: #9ca3af; }

.gate-item-label {
    font-size: 0.92rem;
    color: #111827;
    flex: 1;
}
.gate-item-done .gate-item-label { color: #6b7280; }

.gate-item-add {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff !important;
    text-decoration: none !important;
    background: #2563eb;
    padding: 4px 14px;
    border-radius: 6px;
}
.gate-item-add:hover { background: #1d4ed8; }

.gate-item-done {
    font-size: 0.8rem;
    color: #22c55e;
    font-weight: 600;
}

/* ===== Page Container ===== */
.page-container {
    max-width: 1200px;
}

.page-container h2 {
    color: #111827;
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 8px;
}

.page-container h4 {
    color: #374151;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.page-container p {
    color: #6b7280;
    font-size: 0.95rem;
}

/* ===== Hide Dash default dev tools ribbon in production ===== */
._dash-loading {
    display: none;
}

/* ===== Property Setup Page ===== */

.page-subtitle {
    color: #6b7280;
    font-size: 0.95rem;
    margin-bottom: 28px;
}

.setup-section {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px 28px;
    margin-bottom: 24px;
}

.section-heading {
    color: #111827;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.section-subtext {
    color: #9ca3af;
    font-size: 0.82rem;
    margin-top: -12px;
    margin-bottom: 18px;
}

.form-label {
    color: #374151;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== Segmented Toggle (e.g. Tax View: Pre-tax / After-tax) ===== */

.segmented-toggle .btn {
    border: 1px solid #d1d5db !important;
    background-color: #ffffff;
    color: #374151;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    padding: 6px 16px;
}

.segmented-toggle .btn:hover {
    background-color: #f3f4f6;
}

.segmented-toggle .btn-check:checked + .btn {
    background-color: #111827;
    border-color: #111827 !important;
    color: #ffffff;
}

.segmented-toggle .btn-check:checked + .btn:hover {
    background-color: #111827;
}

/* ===== Info Icon & Benchmark Tooltips (CSS-only, hoverable) ===== */

.info-icon {
    color: #9ca3af;
    font-size: 0.8rem;
    cursor: default;
    vertical-align: middle;
    transition: color 0.15s ease;
    user-select: none;
}

.custom-tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Invisible bridge fills the gap between icon and tooltip panel so the
   mouse doesn't leave the hover zone while traveling between them. */
.custom-tooltip-wrapper::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 0;
    width: 12px;        /* matches the gap + tooltip arrow area */
    height: 100%;
    display: block;
}

.custom-tooltip-content {
    display: none;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background-color: #1f2937;
    color: #e5e7eb;
    font-size: 0.8rem;
    text-align: left;
    max-width: 280px;
    padding: 8px 12px;
    border-radius: 6px;
    line-height: 1.5;
    white-space: normal;
    pointer-events: auto;   /* allow mouse events so links are clickable */
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    /* small left-pointing arrow */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Show the panel when hovering the wrapper OR the panel itself */
.custom-tooltip-wrapper:hover .custom-tooltip-content,
.custom-tooltip-content:hover {
    display: block;
}

.custom-tooltip-wrapper:hover .info-icon {
    color: #6366f1;
}

/* ===== Dropdowns (Dash dcc.Dropdown override) ===== */

.dr-dropdown .Select-control {
    border-color: #d1d5db !important;
    border-radius: 6px !important;
    font-size: 0.88rem;
}

.dr-dropdown .Select-menu-outer {
    font-size: 0.88rem;
    border-color: #d1d5db;
}

/* ===== Nominal Badge ===== */

.badge-nominal {
    font-size: 0.7rem;
    font-weight: 500;
    vertical-align: middle;
    background-color: #6366f1 !important;
}

/* ===== Auto-calc hint beneath rent field ===== */

.form-hint {
    color: #9ca3af;
    font-size: 0.78rem;
    font-style: italic;
}

/* ===== Slider tooltip bubbles — uniform width ===== */

.rc-slider-tooltip-inner {
    min-width: 52px !important;
    text-align: center !important;
}

/* ===== Date Slicer Pills ===== */

.slicer-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slicer-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.slicer-pills {
    display: inline-flex !important;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    overflow: hidden;
    background: #ffffff;
}

.slicer-pills label {
    padding: 6px 16px !important;
    font-size: 0.82rem !important;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border-right: 1px solid #e5e7eb;
    user-select: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
    /* Dash 4 adds margin-right via .dash-radioitems-inline — zero it out so
       teal fill reaches both edges of every pill slot with no white gaps. */
    margin: 0 !important;
}

.slicer-pills label:last-child {
    border-right: none;
}

.slicer-pills label:has(input:checked) {
    background-color: #0d9488;
    color: #ffffff;
}

.slicer-pills label:hover:not(:has(input:checked)) {
    background-color: #f3f4f6;
}

.date-range-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

/* ===== KPI Cards ===== */

.kpi-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
}

.kpi-card-wrapper {
    padding: 4px;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    height: 100%;
}

.kpi-card-wrapper .kpi-card {
    height: 100%;
}

.kpi-card-wrapper.active {
    background-color: #eff6ff;
}

.kpi-card-wrapper:hover:not(.active) {
    background-color: #f9fafb;
}

.kpi-card-label {
    font-size: 0.72rem;
    color: #6b7280;
    margin-bottom: 2px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kpi-card-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.kpi-sparkline {
    margin: 0 -8px;
}

/* Status border — subtle colored left border on the card */

.kpi-border-great {
    border-left: 3px solid #bbf7d0 !important;
}

.kpi-border-good {
    border-left: 3px solid #fef08a !important;
}

.kpi-border-poor {
    border-left: 3px solid #fecaca !important;
}

.kpi-border-neutral {
    border-left: 3px solid #e5e7eb !important;
}

/* Stat card — delta line + inline share bar */

.kpi-stat-delta {
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: -2px;
    margin-bottom: 4px;
}

.kpi-delta-ok    { color: #16a34a; }
.kpi-delta-alert { color: #dc2626; }
.kpi-delta-neutral { color: #6b7280; }

.kpi-stat-bar {
    height: 12px;
    background: #f1f5f9;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 8px;
}

.kpi-stat-bar-fill {
    height: 100%;
    background: #64748b;
    border-radius: 6px;
    transition: width 0.3s ease;
}

/* Ranked mini-bar list (Where the money goes) */

.kpi-rank-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 0.72rem;
}

.kpi-rank-name {
    flex: 0 0 68px;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-rank-track {
    flex: 1 1 auto;
    height: 10px;
    background: #f1f5f9;
    border-radius: 5px;
    overflow: hidden;
}

.kpi-rank-fill {
    height: 100%;
    border-radius: 5px;
}

.kpi-rank-val {
    flex: 0 0 auto;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

/* Vertical 100% composition stack (Expense Composition) */

.kpi-stack {
    display: flex;
    flex-direction: column;
    height: 170px;
    width: fit-content;
    margin: 12px auto 0;   /* centered in the card */
}

.kpi-stack-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    overflow: hidden;
    cursor: default;
}

/* Fixed min-widths keep every band's left/right edges aligned regardless of
   how many digits the $ value has (min-width:auto would otherwise let a wide
   number push the band sideways). */
.kpi-stack-dollar {
    flex: 0 0 66px;
    min-width: 66px;
    text-align: right;
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kpi-stack-band {
    flex: 0 0 92px;
    min-width: 92px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.kpi-stack-pct {
    flex: 0 0 38px;
    min-width: 38px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Rounded on/off switches (HOA / MGMT tab toggles) */
#hoa-enabled-switch.form-check-input,
#mgmt-enabled-switch.form-check-input {
    border-radius: 2em !important;
}

/* Suggested Reserve headline: % on the left, $ conversion on the right */

.kpi-suggested-headline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.kpi-suggested-dollar {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Compare bars (suggested vs current reserve) */

.kpi-compare-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 0.72rem;
}

.kpi-compare-label {
    flex: 0 0 76px;
    color: #6b7280;
    white-space: nowrap;   /* keep "Reserve /mo" on one line in both views */
}

.kpi-compare-track {
    flex: 1 1 auto;
    height: 10px;
    background: #f1f5f9;
    border-radius: 5px;
    overflow: hidden;
}

.kpi-compare-fill {
    height: 100%;
    border-radius: 5px;
    background: #f59e0b;
}

/* Suggested Reserve — label line + bar row ($ · % / yr) */

.kpi-reserve-rowlabel {
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 500;
    margin-top: 8px;
    margin-bottom: 3px;
}

.kpi-reserve-barrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
}

.kpi-reserve-barrow .kpi-compare-track {
    flex: 1 1 auto;
}

.kpi-reserve-amt {
    color: #374151;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kpi-reserve-dot {
    color: #cbd5e1;
    font-weight: 700;
}

.kpi-reserve-pct {
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* In-card CapEx toggle (segmented) */

/* Pin the toggle footer to the bottom of the card body so the CapEx and
   Reserve-period toggles line up across cards of equal height. */
.kpi-card > .card-body {
    display: flex;
    flex-direction: column;
}

/* Keep every expense KPI card the same height across sub-tabs so switching
   tabs doesn't shift the chart/table below. Scoped to the expenses KPI row so
   the Dashboard cards are unaffected. */
#expense-kpi-row .kpi-card {
    min-height: 268px;
}

.kpi-card-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}

.expense-capex-mode-toggle {
    display: inline-flex;
    gap: 2px;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 2px;
    font-size: 0.66rem;
}

.expense-capex-mode-toggle .form-check {
    margin: 0;
    padding: 0;
    min-height: 0;
}

.expense-capex-mode-toggle .form-check-input {
    display: none;
}

.expense-capex-mode-toggle .form-check-label {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
}

.expense-capex-mode-toggle .form-check-input:checked + .form-check-label {
    background: #ffffff;
    color: #4338ca;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Signal card — icon + message */

.kpi-signal-message {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}

.kpi-signal-icon { font-size: 1.05rem; }

.kpi-signal-great { color: #16a34a; }
.kpi-signal-good  { color: #ca8a04; }
.kpi-signal-poor  { color: #dc2626; }
.kpi-signal-neutral { color: #6b7280; }

/* CapEx treatment toggle above the KPI row */

.expense-capex-mode-toggle {
    font-size: 0.72rem;
}

.expense-capex-mode-toggle .form-check {
    margin-right: 0.75rem;
}

.expense-capex-mode-toggle .form-check-label {
    color: #6b7280;
    cursor: pointer;
}

.expense-capex-mode-toggle .form-check-input:checked {
    background-color: #6366f1;
    border-color: #6366f1;
}

/* Status badge — small pill below the sparkline */

.kpi-status-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    display: inline-block;
    letter-spacing: 0.02em;
}

.kpi-status-great {
    background-color: #f0fdf4;
    color: #16a34a;
}

.kpi-status-good {
    background-color: #fefce8;
    color: #ca8a04;
}

.kpi-status-poor {
    background-color: #fef2f2;
    color: #dc2626;
}

/* ===== KPI Card Subtitle ===== */

.kpi-card-subtitle {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-top: -2px;
    margin-bottom: 4px;
    font-weight: 500;
}


/* TTM tooltip — pure CSS hover */
.ttm-tooltip {
    position: relative;
    display: inline;
    cursor: help;
    border-bottom: 1px dotted #9ca3af;
}

.ttm-tooltip::after {
    content: "Trailing 12 Months";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1f2937;
    color: #e5e7eb;
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    display: none;
    z-index: 999;
    margin-bottom: 4px;
    pointer-events: none;
}

.ttm-tooltip:hover::after {
    display: block;
}

/* ===== Benchmark Threshold Inputs (gradient bar) ===== */

.benchmark-row {
    padding: 12px 20px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-top: 12px;
}

.benchmark-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.benchmark-label-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.benchmark-label {
    display: inline;
    font-size: 0.82rem;
    font-weight: 400;
    color: #6b7280;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.benchmark-label-prefix {
    font-weight: 800;
    font-size: 0.92rem;
    color: #374151;
}

.benchmark-info-icon {
    font-size: 0.85rem;
}

.benchmark-reset-btn {
    background: none;
    border: none;
    padding: 0;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: underline;
}

.benchmark-reset-btn:hover {
    color: #374151;
}

/* Relative frame: the bar sits at the top, the two chips are pinned
   absolutely under their zone boundaries (left set by the callback). */
.benchmark-bar-inner {
    position: relative;
    height: 66px;
    margin: 0 12px;
}

.benchmark-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
}

.benchmark-bar-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    border-radius: 6px;
}

.benchmark-zone-label {
    position: absolute;
    top: 0;
    height: 26px;
    line-height: 26px;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
}

/* Draggable handles: a RangeSlider overlaid on the gradient bar. Dash 4's
   RangeSlider renders as Radix primitives (dash-slider-*), not the old
   rc-slider markup — track/range are forced transparent so only the
   gradient bar shows, and the thumbs are restyled as thin vertical ticks
   instead of Dash's default purple circles. */
.benchmark-slider-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    /* The Radix slider's own container/root stay a fixed 34px tall and
       top-align by default, which pushed the thumb's overhang entirely to
       the bottom. Centering the whole stack here makes it symmetric. */
    display: flex;
    align-items: center;
}

.benchmark-slider-layer .dash-slider-root {
    align-items: center;
}

.benchmark-slider-layer .dash-slider-track,
.benchmark-slider-layer .dash-slider-range {
    background: transparent !important;
}

.benchmark-slider-layer .dash-slider-thumb {
    width: 3px;
    /* Taller than the 26px bar so it overhangs evenly top and bottom —
       the root is centered via align-items: center above. */
    height: 36px;
    border-radius: 1px;
    background: #374151;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    cursor: grab;
}

.benchmark-slider-layer .dash-slider-thumb:hover,
.benchmark-slider-layer .dash-slider-thumb:focus-visible {
    background: #111827;
    box-shadow: 0 0 0 4px rgba(55, 65, 81, 0.15);
}

.benchmark-slider-layer .dash-slider-thumb:active {
    cursor: grabbing;
}

/* Read-only value boxes pinned under each handle (full colored border). */
.benchmark-chip {
    position: absolute;
    top: 38px;
    transform: translateX(-50%);
}

.benchmark-value-box {
    padding: 3px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    border-radius: 6px;
    background: #fff;
    white-space: nowrap;
}

.benchmark-value-box-good { border: 1.5px solid #eab308; color: #854d0e; }
.benchmark-value-box-great { border: 1.5px solid #22c55e; color: #166534; }

/* ===== Expense Controls Row ===== */

.expense-controls-row {
    padding: 8px 0;
}

/* ===== Expense Empty State (first-time entry) ===== */

/* Wraps the hero chart + content area so the empty-state form can float on
   top of the chart (blurred behind it) instead of requiring a scroll past
   the chart to reach a form stacked below. */
.expense-chart-content-wrap {
    position: relative;
}

.expense-chart-blurred {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

.expense-content-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.expense-content-overlay .expense-empty-wrap {
    padding: 0;
}
.expense-content-overlay .expense-empty-card {
    background-color: #ffffff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
}

.expense-empty-wrap {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.expense-empty-card {
    width: 100%;
    max-width: 360px;
    text-align: center;
    padding: 28px 24px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background-color: #f8fafc;
}

.expense-empty-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.expense-empty-desc {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 16px;
}

.expense-empty-value-box {
    max-width: 200px;
    margin: 0 auto;
}

.expense-empty-input {
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
}

.expense-empty-hint {
    font-size: 0.76rem;
    color: #9ca3af;
    margin: 10px 0 4px;
}

/* ===== Login Page ===== */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #0f1117;
}

.login-card {
    background-color: #1a1d23;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 40px 36px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.login-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.login-brand-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.login-tagline {
    color: #6b7280;
    font-size: 0.82rem;
    margin-bottom: 0;
}

.login-divider {
    border-color: rgba(255, 255, 255, 0.08);
    margin: 20px 0 24px 0;
}

.login-btn {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.login-error {
    margin-top: 10px;
    font-size: 0.84rem;
    color: #f87171;
    min-height: 20px;
}

/* ===== Sidebar Setup Checklist ===== */

.sidebar-onboarding-wrap {
    position: relative;
    margin-top: auto;
    padding: 0 8px 8px;
}

.onboarding-panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 10px 22px;
    margin-bottom: 4px;
}

.onboarding-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.onboarding-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #e5e7eb;
}

.onboarding-count {
    font-size: 0.72rem;
    color: #9ca3af;
}

.onboarding-progress-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 10px;
}

.onboarding-progress-fill {
    height: 100%;
    background: #38bdf8;
    border-radius: 99px;
    transition: width 0.3s ease;
}

.onboarding-group-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 6px 0 3px;
}

/* Fine-tuning collapses by default via native <details> — no JS needed */
.onboarding-tuning-group {
    margin: 6px 0 0;
}

.onboarding-group-summary {
    margin: 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
}
.onboarding-group-summary::-webkit-details-marker { display: none; }
.onboarding-group-summary::before {
    content: "▸";
    font-size: 0.6rem;
    transition: transform 0.15s ease;
}
.onboarding-tuning-group[open] > .onboarding-group-summary::before {
    transform: rotate(90deg);
}

.onboarding-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.onboarding-item-icon {
    font-size: 0.78rem;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.onboarding-icon-done { color: #22c55e; }
.onboarding-icon-empty { color: #38bdf8; }
.onboarding-icon-default { color: #6b7280; }

.onboarding-item-label {
    font-size: 0.76rem;
    color: #c9d1d9;
    flex: 1;
}
.onboarding-item-done .onboarding-item-label { color: #9ca3af; }

.onboarding-item-add {
    font-size: 0.7rem;
    color: #38bdf8 !important;
    text-decoration: none !important;
    font-weight: 600;
}
.onboarding-item-add:hover { color: #7dd3fc !important; }

/* Anchored to the checklist card's bottom-right corner, inset just inside
   its border so it reads as part of the card rather than a floating link.
   The offset accounts for .sidebar-onboarding-wrap's own bottom padding
   (8px) plus .onboarding-panel's margin-bottom (4px) — those sit *outside*
   the panel's border, so a naive small offset lands the button below the
   card instead of inside it. */
.onboarding-dismiss-btn {
    position: absolute;
    right: 16px;
    bottom: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 5px;
    color: #6b7280;
    font-size: 0.65rem;
    padding: 2px 7px;
    cursor: pointer;
    width: auto;
    text-align: right;
}
.onboarding-dismiss-btn:hover { color: #9ca3af; background: rgba(255, 255, 255, 0.1); }

.onboarding-toast {
    font-size: 0.74rem;
    color: #9ca3af;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.onboarding-restore-btn {
    background: none;
    border: 1px solid #d1d5db;
    color: #374151;
    font-size: 0.82rem;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 12px;
}
.onboarding-restore-btn:hover { background: #f3f4f6; }

/* ===== Sidebar Footer (Sign Out) ===== */

.sidebar-footer {
    flex-shrink: 0;
    margin-top: 0;
    padding: 8px 8px 16px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-account {
    color: #9ca3af;
    font-size: 0.9rem;
    padding: 6px 16px 4px;
    text-align: left;
}

.sidebar-signout {
    color: #6b7280 !important;
    font-size: 0.84rem !important;
}

/* Hide dcc.Slider's built-in numeric input box — we supply our own value boxes */
.dash-slider-container .dash-input-container,
.dash-slider-container input.dash-range-slider-input {
    display: none !important;
}

/* ===== Property Setup — financing row layout ===== */

.fin-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 6px;
    padding: 16px 18px;
    border-radius: 8px;
}
/* Subtle alternating bands so each major section reads as its own block */
.fin-row:nth-of-type(odd) {
    background-color: rgba(15, 23, 42, 0.04);
}
.fin-row:nth-of-type(even) {
    background-color: rgba(15, 23, 42, 0.015);
}
.fin-row-label {
    flex: 0 0 150px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #374151;
}
.fin-row-mid {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 6px;
}
.fin-row-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Fixed-width slot for %/yr value-box; always present (empty for rows without one)
   so the equation columns align at the same X across all rows. */
.fin-val-slot {
    flex: 0 0 96px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Fixed-width editable boxes so they line up down the right edge */
.fin-box-price {
    width: 150px;
}
.fin-box-dollar {
    width: 150px;
}
.fin-box-price .form-control,
.fin-box-dollar .form-control {
    text-align: right;
    font-weight: 600;
    color: #111827;
}
/* Editable dollar prefix — visible box, darker gray */
.fin-box-dollar.fin-input .input-group-text {
    color: #4b5563;
    background-color: #e9ecef;
    font-weight: 600;
}
/* Calculated/disabled dollar prefix — no box, just a plain $ */
.fin-box-dollar:not(.fin-input) .input-group-text {
    background-color: transparent;
    border-color: transparent;
    color: #9ca3af;
    font-weight: 400;
    padding-left: 6px;
    padding-right: 2px;
}

/* ===== Property Setup — financing controls ===== */

/* Compact editable readout box on the right end of each slider */
.value-box {
    max-width: 92px;
}
.value-box .value-box-input {
    text-align: center;
    font-weight: 600;
    color: #111827;
    padding-left: 6px;
    padding-right: 6px;
}
.value-box .input-group-text {
    color: #4b5563;
    background-color: #e9ecef;
    font-weight: 600;
    padding-left: 8px;
    padding-right: 8px;
}

/* Vertical loan + down = purchase equation (down payment row) */
.fin-equation-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fin-eq-row {
    display: flex;
    align-items: center;
    gap: 0;
}
.fin-eq-op {
    flex: 0 0 20px;
    text-align: center;
    color: #9ca3af;
    font-weight: 700;
}
.fin-eq-cap {
    flex: 0 0 100px;
    margin-left: 8px;
    font-size: 0.72rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
}
.fin-eq-sum-row {
    padding-top: 6px;
    border-top: 1.5px solid #d1d5db;
    margin-top: 1px;
}
.fin-box-dollar .form-control:disabled {
    background-color: #f9fafb;
    color: #374151;
    opacity: 1;
}

/* Purchase Date sits on the left of the Purchase Price row */
.fin-date-left {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.fin-date-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: #374151;
    margin: 0;
    white-space: nowrap;
}
.fin-date-input {
    max-width: 180px;
}
.fin-price-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

/* Property Configuration — units evenly span the full box width */
.unit-line {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    gap: 24px;
    margin-top: 8px;
}
.unit-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.unit-line-label,
.unit-cell .unit-grid-label,
.unit-cell label {
    font-size: 0.82rem;
    font-weight: 500;
    color: #374151;
    margin: 0;
    white-space: nowrap;
}
.unit-cell label.disabled {
    color: #c0c5cd;
}
/* The redesign distributes width via the even grid columns, not by bloating
   any single control — each stays a modest size, centered in its column. */
.unit-count-dd {
    width: 180px;
}
.unit-name-input {
    width: 110px;
    text-align: center;
}

/* Tax Assumptions — Federal/State matrix; value columns flex to fill the box */
.tax-grid {
    display: grid;
    grid-template-columns: max-content 1fr 1fr;
    column-gap: 16px;
    row-gap: 10px;
    align-items: center;
}
/* Federal/State headers and value cells center within their flexible column */
.tax-grid-head:not(:first-child),
.tax-grid > .tax-cell {
    justify-self: center;
}
.tax-grid-head {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    text-align: center;
}
.tax-grid-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: #374151;
    margin: 0;
    white-space: nowrap;
}
.tax-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tax-info-icon {
    color: #9ca3af;
    cursor: help;
    font-size: 0.8rem;
}

/* Disabled-state explainer (100% down → no mortgage) */
.slider-note {
    font-size: 0.78rem;
    color: #b45309;
    font-style: italic;
    margin-top: 6px;
    min-height: 1rem;
}

/* ── 10-K statement grid ──────────────────────────────────── */
.tk-statement-grid .tk-label-cell {
    font-weight: 600;
    color: #374151;
}
.tk-statement-grid .ag-row.tk-row-subtotal {
    font-weight: 700;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
}
.tk-statement-grid .ag-row.tk-row-total {
    font-weight: 800;
    background: #fef3c7;
    border-top: 2px solid #f59e0b;
    border-bottom: 2px solid #f59e0b;
}
.tk-statement-grid .ag-row.tk-row-return {
    background: #eef2ff;
    color: #4338ca;
}
.tk-statement-grid .ag-row.tk-row-driver {
    color: #94a3b8;
    font-style: italic;
    font-size: 0.82rem;
}
.tk-statement-grid .ag-row.tk-row-signal {
    font-size: 0.82rem;
    font-weight: 500;
}
/* Blank separator between major sections — no border, no hover, not clickable. */
.tk-statement-grid .ag-row.tk-row-spacer,
.tk-statement-grid .ag-row.tk-row-spacer .ag-cell {
    background: transparent !important;
    border: none !important;
    cursor: default !important;
}
.tk-statement-grid .ag-row.tk-row-child .tk-label-cell {
    padding-left: 26px;
    font-weight: 400;
    color: #6b7280;
}
.tk-statement-grid .ag-cell {
    cursor: pointer;
}
/* ── Investment disclaimer box ─────────────────────────────────── */
.tk-disclaimer {
    margin-top: 24px;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
}
.tk-disc-heading {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    margin-bottom: 8px;
}
.tk-disc-list {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}
.tk-disc-list li {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 4px;
    line-height: 1.5;
}
.tk-disc-title {
    font-weight: 600;
    color: #4b5563;
}
/* Current-year column tint ("Highlight Today" toggle). Semi-transparent so row
   backgrounds (subtotal/total) show through; click-to-explain inline styles win. */
.tk-statement-grid .ag-cell.tk-col-today {
    background-color: rgba(13, 148, 136, 0.07);
}
.tk-statement-grid .ag-header-cell.tk-col-today-header {
    background-color: rgba(13, 148, 136, 0.10);
}

/* Column-marker legend (shown below slicers when markers are present). */
.tk-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 2px;
}
.tk-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #6b7280;
}
.tk-legend-star {
    color: #b45309;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* First-sell optimal year column (amber accent, distinct from teal "today"). */
.tk-statement-grid .ag-cell.tk-col-sell {
    background-color: rgba(245, 158, 11, 0.08);
}
.tk-statement-grid .ag-header-cell.tk-col-sell-header {
    background-color: rgba(245, 158, 11, 0.15);
    font-weight: 700;
}

/* ── 10-K sticky header + formula explainer (Phase 3) ─────────── */
.tk-sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    padding: 8px 0 10px;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 8px;
}
.tk-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
.tk-explainer {
    flex: 1 1 420px;
    min-width: 360px;
    max-width: 680px;
    height: 172px;             /* fixed — never resizes with the equation */
    position: relative;
    text-align: left;          /* equations & detail are left-justified */
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 16px 16px;
    background: #fafafa;
    overflow-y: auto;          /* scroll long explanations instead of clipping */
}
.tk-explainer-head {
    position: absolute;        /* pinned to the top-right corner (equation shown) */
    top: 10px;
    right: 16px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
}
/* Idle state — title + prompt centered both ways */
.tk-explainer-idle {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    text-align: center;
}
.tk-explainer-head-center {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
}
.tk-idle-hint {
    color: #9ca3af;
    font-size: 0.9rem;
}
.tk-eq-title { font-weight: 700; color: #111827; }
.tk-eq-year { color: #6b7280; font-weight: 600; }
.tk-eq-formula { color: #6b7280; font-size: 0.8rem; margin-bottom: 6px; }
.tk-eq-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}
.tk-eq-chip { padding: 1px 7px; border-radius: 5px; font-weight: 700; }
.tk-eq-op { color: #6b7280; font-weight: 600; }
.tk-eq-result { font-weight: 800; color: #111827; }
.tk-eq-muted { color: #9ca3af; font-style: italic; }
.tk-eq-source {
    margin-top: 6px;
    font-size: 0.75rem;
    color: #9ca3af;
}
.tk-eq-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #2563eb;
}
.tk-eq-link:hover { text-decoration: underline; }
.tk-eq-warn {
    margin-top: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #b45309;
}

/* CSS fraction — numerator stacked over a bar over denominator */
.tk-frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 4px;
}
.tk-frac-num {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px 3px;
}
.tk-frac-den {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 6px 0;
    border-top: 2px solid #374151;
}

/* ===== Rent Health & Target (Property Performance bottom section) ===== */
.rt-section {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid #e5e7eb;
}

.rt-section-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.15rem;
}

.rt-section-subtitle {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 1.25rem;
}

.rt-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem 1.15rem;
    height: 100%;
}

.rt-panel-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    margin-bottom: 0.1rem;
}

.rt-panel-title {
    font-size: 1rem;
    font-weight: 500;
    color: #111827;
    margin-bottom: 0.75rem;
}

.rt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 0.35rem;
}

.rt-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #6b7280;
}

.rt-swatch {
    display: inline-block;
    width: 12px;
    height: 2.5px;
    border-radius: 2px;
}

.rt-swatch-rent { background: #2a78d6; }
.rt-swatch-expense { background: #D85A30; }
.rt-swatch-required { background: #BA7517; }
.rt-swatch-breakeven { background: #888780; }

.rt-chart-note {
    font-size: 0.72rem;
    line-height: 1.35;
    color: #9ca3af;
    margin-top: 0.25rem;
}

.rt-cards-row {
    display: grid;
    gap: 10px;
    margin-top: 0.5rem;
}

.rt-cards-2 { grid-template-columns: 1fr 1fr; }
.rt-cards-3 { grid-template-columns: 1fr 1fr 1fr; }

.rt-target-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #1d4ed8;
    background: #eff6ff;
    border-radius: 999px;
    white-space: nowrap;
}

.rt-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    text-align: center;
}

.rt-card-accent {
    background: #eff6ff;
}

.rt-card-label {
    font-size: 0.72rem;
    color: #6b7280;
    margin-bottom: 0.1rem;
}

.rt-card-accent .rt-card-label {
    color: #1d4ed8;
}

.rt-card-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827;
}

.rt-card-accent .rt-card-value {
    color: #1d4ed8;
}

.rt-sensitivity-wrap {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    margin-top: 1rem;
}

.rt-sensitivity-intro {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 0.85rem;
}

.rt-sensitivity-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.8rem;
    text-align: center;
}

.rt-sensitivity-table th,
.rt-sensitivity-table td {
    padding: 5px 4px;
}

.rt-row-label {
    text-align: left !important;
    color: #6b7280;
    width: 100px;
    font-weight: 500;
    white-space: nowrap;
}

.rt-col-head {
    font-weight: 400;
    color: #9ca3af;
}

.rt-col-current {
    font-weight: 600;
    color: #111827;
}

.rt-col-breakeven {
    background: #fef3e2;
    font-weight: 500;
}

.rt-col-target {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
}

.rt-col-head.rt-col-breakeven { color: #854d0e; }

.rt-coc-up { color: #0f6e56; }
.rt-coc-down { color: #993c1d; }


/* ===== CapEx replacement calendar (Phase A) ============================== */
.capex-cal { border: 1px solid #e9edf2; border-radius: 12px; overflow: hidden;
  background: #fff; }
.capex-cal-scroll { max-height: 640px; overflow: auto; }
.capex-cal-head { display: flex; position: sticky; top: 0; z-index: 6;
  background: #fff; min-width: max-content; border-bottom: 1px solid #cbd5e1; }
.capex-cal-corner { position: sticky; left: 0; z-index: 8; background: #fff; }
.capex-cal-gutter { width: 96px; flex: 0 0 96px; position: sticky; left: 0;
  z-index: 4; background: #fff; border-right: 1px solid #cbd5e1; }
.capex-cal-gutterhead { padding: 8px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: #94a3b8; font-weight: 600; display: flex;
  justify-content: space-between; }
.capex-cal-cols { display: flex; }
.capex-cal-colhead { width: 104px; flex: 0 0 104px; padding: 8px;
  border-right: 1px solid #e9edf2; text-align: left; min-height: 66px;
  display: flex; flex-direction: column; justify-content: space-between; }
.capex-cal-colhead > :first-child { align-self: flex-start; }
.capex-cal-colhead > :last-child { align-self: flex-start; margin-top: auto; }
.capex-cal-cat { font-size: 12.5px; font-weight: 600; line-height: 1.15; color: #1e293b; }
.capex-cal-unitplain { font-size: 11px; color: #94a3b8; font-weight: 600; margin-top: 5px; }
.capex-cal-pill { display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 20px; color: #fff; }
.capex-cal-catpill { font-size: 12px; line-height: 1.15; }
.capex-cal-gridrow { display: flex; min-width: max-content; }
.capex-cal-col { width: 104px; flex: 0 0 104px; border-right: 1px solid #e9edf2; }
.capex-cal-lane { position: relative; }
.capex-cal-yearcell { position: relative; overflow: hidden; border-bottom: 1px solid #e9edf2;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 2px 8px 0 8px; font-size: 11px; font-variant-numeric: tabular-nums; }
.capex-cal-yr { color: #475569; }
.capex-cal-amt { font-size: 10.5px; color: #94a3b8; position: relative; z-index: 2; }
.capex-cal-yearcell.dense .capex-cal-amt { color: #f59e0b; font-weight: 700; }
.capex-cal-yearcell.current { background: #fff5e6; }
.capex-cal-yearcell.current .capex-cal-yr { color: #f59e0b; font-weight: 700; }
.capex-cal-spendbar { position: absolute; right: 0; bottom: 3px; height: 4px;
  background: #f59e0b; opacity: .45; border-radius: 2px; z-index: 1; }
.capex-cal-curband { position: absolute; left: 0; right: 0; background: #fff5e6; z-index: 0; }
.capex-cal-blk { position: absolute; left: 5px; right: 5px; border-radius: 6px;
  overflow: hidden; padding: 5px 7px 4px; font-size: 10.5px; line-height: 1.25;
  display: flex; flex-direction: column; justify-content: space-between; }
.capex-cal-blk.future { color: #fff; }
.capex-cal-blk.active { color: #1e293b; }
.capex-cal-blk.b-over { border: 2.5px solid #0f172a; }
.capex-cal-blk.b-dash { border: 1.5px dashed #64748b; }
.capex-cal-blk.b-solid { border: 1px solid rgba(15,23,42,.14); }
.capex-cal-btop { display: flex; flex-direction: column; }
.capex-cal-bt { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capex-cal-bprice { font-weight: 600; opacity: .9; }
.capex-cal-bbot { display: flex; flex-direction: column; }
.capex-cal-byr { font-variant-numeric: tabular-nums; font-weight: 600; }
.capex-cal-blife, .capex-cal-bact { opacity: .82; font-size: 10px; }
.capex-cal-bact { font-weight: 600; opacity: .95; }

/* ----- CapEx calendar toolbar + legend (prototype styling) --------------- */
.capex-cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 10px 12px; background: #f8fafc; border: 1px solid #e9edf2;
  border-radius: 10px; margin-bottom: 12px; }
.capex-cal-tgroup { display: flex; align-items: center; gap: 8px; }
.capex-cal-tlabel { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: #94a3b8; font-weight: 600; }
.capex-seg { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 8px;
  overflow: hidden; background: #fff; }
.capex-seg .capex-seg-btn { font: inherit; font-size: 12.5px; padding: 6px 14px;
  color: #475569; background: #fff; border: 0; border-right: 1px solid #e9edf2;
  cursor: pointer; white-space: nowrap; line-height: 1.3; }
.capex-seg .capex-seg-btn:last-child { border-right: 0; }
.capex-seg .capex-seg-btn:hover { background: #f1f5f9; color: #1e293b; }
.capex-seg .capex-seg-btn.active { background: #1e293b; color: #fff; }
.capex-zoom-btn.btn { width: 30px; height: 30px; padding: 0; border-radius: 8px;
  border: 1px solid #cbd5e1; background: #fff; color: #475569; font-size: 16px;
  line-height: 1; margin-left: 6px; box-shadow: none; }
.capex-zoom-btn.btn:hover { background: #f1f5f9; color: #1e293b; }
.capex-cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 2px 12px;
  font-size: 12px; color: #475569; }
.capex-cal-legitem { display: inline-flex; align-items: center; gap: 6px; }
.capex-cal-sw { width: 26px; height: 13px; border-radius: 3px; background: #eef2f7;
  display: inline-block; box-sizing: border-box; }
.capex-cal-sw.sw-dash { border: 1.5px dashed #475569; }
.capex-cal-sw.sw-solid { border: 1px solid #cbd5e1; }
.capex-cal-sw.sw-over { border: 2.5px solid #0f172a; }
.capex-cal-legnote { color: #94a3b8; }

.capex-cal-blk { cursor: pointer; }
.capex-cal-blk:hover { box-shadow: 0 2px 8px rgba(15,23,42,.22); z-index: 3; }

.capex-cal-blk { user-select: none; -webkit-user-select: none; }
.capex-cal-blk:hover { cursor: grab; }

/* ----- CapEx calendar: resize handle + legend row 2 --------------------- */
.capex-cal-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  cursor: ns-resize; z-index: 4; }
.capex-cal-legend.capex-cal-legend-color { margin-top: 6px; }

/* ----- CapEx calendar: re-sort (refresh) button ------------------------- */
.capex-cal-refresh.btn { font-size: 12px; padding: 5px 12px; border-radius: 8px;
  border: 1px solid #fca5a5; background: #fef2f2; color: #b91c1c;
  box-shadow: none; white-space: nowrap; font-weight: 600; }
.capex-cal-refresh.btn:hover { background: #fee2e2; color: #991b1b;
  border-color: #f87171; }