.portfolio-heading { margin-bottom: 20px; }
[data-portfolio-view],
[data-portfolio-view] > *,
.portfolio-overview,
.portfolio-overview > * { min-width: 0; max-width: 100%; }
[data-portfolio-view] .table-scroll,
.portfolio-overview .table-scroll { max-width: 100%; overflow-x: auto; }
[data-portfolio-view] .table-scroll table,
.portfolio-overview .table-scroll table {
    width: 100%;
    border-collapse: collapse;
}
[data-portfolio-view] .table-scroll th,
[data-portfolio-view] .table-scroll td,
.portfolio-overview .table-scroll th,
.portfolio-overview .table-scroll td {
    padding: 11px 12px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
[data-portfolio-view] .table-scroll th,
.portfolio-overview .table-scroll th {
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--surface-soft);
}
[data-portfolio-view] .table-scroll th:first-child,
[data-portfolio-view] .table-scroll td:first-child,
.portfolio-overview .table-scroll th:first-child,
.portfolio-overview .table-scroll td:first-child { text-align: left; }
[data-portfolio-view] .table-scroll tbody tr:last-child td,
.portfolio-overview .table-scroll tbody tr:last-child td { border-bottom: 0; }

.portfolio-filter-bar {
    display: grid;
    gap: 12px;
    margin: 0 0 20px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fff, #fcfcfd);
}
.portfolio-filter-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
    gap: 10px;
}
.portfolio-filter-field {
    min-width: 0;
    display: grid;
    gap: 6px;
}
.portfolio-filter-field > span:first-child {
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.portfolio-filter-field input,
.portfolio-filter-field select {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    color: var(--text);
    background: #fff;
    border-color: #d0d5dd;
}
.portfolio-search-field { grid-column: span 2; }
.portfolio-filter-input { position: relative; display: block; }
.portfolio-filter-input .icon {
    position: absolute;
    top: 50%;
    left: 11px;
    z-index: 1;
    color: var(--muted);
    pointer-events: none;
    transform: translateY(-50%);
}
.portfolio-filter-input input { padding-left: 36px; }
.portfolio-filter-meta {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.portfolio-filter-meta output {
    min-width: 0;
    margin-right: auto;
    color: var(--muted-strong);
    font-size: 10px;
    font-weight: 650;
}
.portfolio-filter-reset,
.portfolio-filter-action { min-height: 32px; padding: 5px 9px; font-size: 10px; }
.portfolio-filter-reset:disabled { opacity: .42; cursor: default; }
[data-portfolio-view='tenant_profiles'] .portfolio-filter-fields {
    grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(120px, 1fr)) max-content;
}
[data-portfolio-view='tenant_profiles'] .portfolio-search-field { grid-column: auto; }
.portfolio-filter-inline-reset {
    min-height: 40px;
    align-self: end;
    padding: 8px 14px;
    white-space: nowrap;
}
.workflow-filter-empty {
    min-height: 240px;
    display: grid;
    place-items: center;
}

/* Keep the compact timeline summary aligned with its controls when the content
   column is wide enough. The split breakpoint avoids the persistent sidebar's
   narrow 1041-1180px content range. */
@media (min-width: 1181px), (min-width: 900px) and (max-width: 1040px) {
    [data-portfolio-view='timeline'] .portfolio-filter-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 12px;
        padding-block: 12px;
    }
    [data-portfolio-view='timeline'] .portfolio-filter-meta {
        min-height: 40px;
        align-self: end;
        padding-top: 0;
        white-space: nowrap;
        border-top: 0;
    }
}

.global-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 30;
    overflow: hidden;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}
.global-results button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 8px;
}
.global-results button:hover,
.global-results button:focus-visible { background: var(--surface-soft); }
.global-results button > span:last-child { min-width: 0; }
.global-results strong,
.global-results small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-results small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.global-results p { margin: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.avatar-light { color: #3730a3; background: #e0e7ff; border-color: #c7d2fe; }

.portfolio-overview { display: grid; gap: 18px; margin-top: 20px; }
.portfolio-overview > .portfolio-filter-bar { margin-bottom: -2px; }
.portfolio-signal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.signal-card { min-height: 118px; padding: 18px; }
.signal-card > span { display: block; color: var(--muted-strong); font-size: 11px; font-weight: 700; }
.signal-card > strong {
    display: block;
    margin: 13px 0 7px;
    font-size: 25px;
    line-height: 1;
    letter-spacing: -.035em;
}
.signal-card > small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.danger-signal { border-left: 3px solid #f97066; }
.portfolio-dashboard-grid,
.financial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.portfolio-panel { padding: 20px; }
.comparison-panel { width: 100%; }
.trend-chart {
    height: 190px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: end;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 10px 0;
    border-bottom: 1px solid var(--border);
    background-image: linear-gradient(to bottom, transparent 49%, var(--border) 50%, transparent 51%);
}
.trend-month { height: 100%; display: grid; grid-template-rows: 1fr 22px; gap: 7px; text-align: center; }
.trend-bars { display: flex; align-items: end; justify-content: center; gap: 5px; min-height: 0; }
.trend-bars span { width: min(16px, 38%); min-height: 3px; border-radius: 4px 4px 0 0; }
.trend-expected { background: #c7d2fe; }
.trend-collected { background: var(--brand); }
.trend-month small { color: var(--muted); font-size: 10px; }
.inline-legend { display: flex; gap: 16px; margin-top: 14px; color: var(--muted); font-size: 10px; }
.inline-legend span { display: flex; align-items: center; gap: 6px; }
.inline-legend i { width: 8px; height: 8px; display: inline-block; border-radius: 2px; }
.expected-dot { background: #c7d2fe; }
.collected-dot { background: var(--brand); }

/* Overview reporting surfaces use a shared, theme-aware visual language. */
.portfolio-overview {
    --overview-chart-grid: color-mix(in srgb, var(--border) 76%, transparent);
    --overview-chart-track: color-mix(in srgb, var(--border) 58%, var(--surface-soft));
    --overview-series-estimated: #6d5bd0;
    --overview-series-actual: #087f6d;
    --overview-series-collected: #2563eb;
    --overview-series-expense: #c4324b;
    --overview-series-noi: #15803d;
}
html[data-rees-theme='dark'] .portfolio-overview,
html[data-rees-theme='midnight'] .portfolio-overview {
    --overview-chart-grid: color-mix(in srgb, var(--border-interactive) 52%, transparent);
    --overview-chart-track: color-mix(in srgb, var(--border-interactive) 38%, var(--surface-muted));
    --overview-series-estimated: #b9a5ff;
    --overview-series-actual: #39d0bc;
    --overview-series-collected: #72a7ff;
    --overview-series-expense: #ff8294;
    --overview-series-noi: #48d597;
}
.portfolio-overview .trend-expected,
.portfolio-overview .expected-dot { background-color: var(--overview-series-estimated); }
.portfolio-overview .trend-collected,
.portfolio-overview .collected-dot { background-color: var(--overview-series-collected); }

.portfolio-overview-filter-bar {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: end;
    gap: 12px;
    margin-bottom: 0;
    padding: 12px 14px;
    background: var(--surface-raised, var(--surface));
}
.portfolio-overview-filter-bar .portfolio-filter-fields {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 9px;
}
.portfolio-overview-filter-bar .portfolio-filter-field { gap: 5px; }
.portfolio-overview-filter-bar .portfolio-filter-meta {
    min-height: 40px;
    padding-top: 0;
    border-top: 0;
    white-space: nowrap;
}
.portfolio-overview-filter-bar .portfolio-filter-meta output {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-report-tabs {
    width: fit-content;
    max-width: 100%;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(112px, max-content);
    gap: 3px;
    overflow-x: auto;
    margin: 15px 0 0;
    padding: 3px;
    background: var(--surface-muted, var(--surface-soft));
    border: 1px solid var(--border-subtle, var(--border));
    border-radius: 10px;
}
.app .portfolio-report-tab {
    position: relative;
    min-height: 34px;
    padding: 6px 12px;
    color: var(--text-tertiary, var(--muted));
    font-size: 10px;
    font-weight: 720;
    line-height: 1.3;
    white-space: nowrap;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    box-shadow: none;
}
.app .portfolio-report-tab:hover {
    color: var(--text-primary, var(--text));
    background: var(--surface-hover, var(--surface-soft));
}
.app .portfolio-report-tab[aria-selected='true'] {
    color: var(--brand-strong, var(--brand));
    background: var(--surface-raised, var(--surface));
    border-color: color-mix(in srgb, var(--brand) 25%, var(--border-interactive, var(--border)));
    box-shadow: var(--shadow-xs);
}
.app .portfolio-report-tab:focus-visible {
    z-index: 1;
    outline: 3px solid var(--focus, color-mix(in srgb, var(--brand) 34%, transparent));
    outline-offset: 1px;
}
.portfolio-report-panel {
    min-width: 0;
    margin-top: 14px;
}
.portfolio-report-panel[hidden] { display: none !important; }
.portfolio-report-panel:focus-visible {
    outline: 3px solid var(--focus, color-mix(in srgb, var(--brand) 34%, transparent));
    outline-offset: 4px;
    border-radius: 8px;
}

.portfolio-chart {
    min-width: 0;
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 15px;
    background: color-mix(in srgb, var(--surface-muted, var(--surface-soft)) 72%,
        var(--surface-raised, var(--surface)));
    border: 1px solid var(--border-subtle, var(--border));
    border-radius: 11px;
}
.portfolio-chart > figcaption {
    color: var(--text-secondary, var(--text-subtle));
    font-size: 10px;
    font-weight: 650;
    line-height: 1.45;
}
.portfolio-chart-legend {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    color: var(--text-tertiary, var(--muted));
    font-size: 10px;
    line-height: 1.35;
    list-style: none;
}
.portfolio-chart-legend-item {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.portfolio-chart-swatch {
    width: 14px;
    height: 10px;
    flex: 0 0 auto;
    background-color: var(--overview-series-color);
    background-image: var(--overview-series-pattern, none);
    border: 1px solid color-mix(in srgb, var(--overview-series-color) 72%,
        var(--text-primary, var(--text)));
    border-radius: 3px;
}
:is(.portfolio-chart-bar, .portfolio-comparison-bar) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--overview-series-color);
    background-color: var(--overview-series-color);
    background-image: var(--overview-series-pattern, none);
    border: 1px solid color-mix(in srgb, var(--overview-series-color) 76%,
        var(--text-primary, var(--text)));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--overview-series-color) 20%, transparent);
    transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
:is(.portfolio-chart-bar, .portfolio-comparison-bar):is(:hover, :focus-visible) {
    z-index: 2;
    filter: saturate(1.14) brightness(1.04);
    outline: 3px solid var(--focus, color-mix(in srgb, var(--brand) 34%, transparent));
    outline-offset: 2px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--overview-series-color) 28%, transparent);
}
:is(.portfolio-chart-bar, .portfolio-chart-swatch).estimated-series {
    --overview-series-color: var(--overview-series-estimated);
    --overview-series-pattern: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, #fff 32%, transparent) 0 3px,
        transparent 3px 7px
    );
}
:is(.portfolio-chart-bar, .portfolio-chart-swatch).actual-series {
    --overview-series-color: var(--overview-series-actual);
    --overview-series-pattern: none;
}
:is(.portfolio-comparison-bar, .portfolio-chart-swatch).collected-series {
    --overview-series-color: var(--overview-series-collected);
    --overview-series-pattern: none;
}
:is(.portfolio-comparison-bar, .portfolio-chart-swatch):is(.expense-series, .expenses-series) {
    --overview-series-color: var(--overview-series-expense);
    --overview-series-pattern: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, #fff 34%, transparent) 0 3px,
        transparent 3px 7px
    );
}
:is(.portfolio-comparison-bar, .portfolio-chart-swatch).noi-series {
    --overview-series-color: var(--overview-series-noi);
    --overview-series-pattern: repeating-linear-gradient(
        90deg,
        transparent 0 5px,
        color-mix(in srgb, #fff 28%, transparent) 5px 7px
    );
}
.portfolio-comparison-bar.noi-series.is-negative {
    --overview-series-color: var(--overview-series-expense);
    --overview-series-pattern: repeating-linear-gradient(
        45deg,
        color-mix(in srgb, #fff 34%, transparent) 0 3px,
        transparent 3px 7px
    );
}

.portfolio-maintenance-chart .portfolio-chart-groups {
    min-width: 0;
    min-height: 218px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(70px, 1fr);
    align-items: end;
    gap: 12px;
    overflow-x: auto;
    padding: 18px 8px 0;
    overscroll-behavior-inline: contain;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(25% - 1px),
        var(--overview-chart-grid) 25%
    );
    border-bottom: 1px solid var(--border-interactive, var(--border));
}
.portfolio-chart-group {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(150px, 1fr) auto;
    align-items: stretch;
    gap: 9px;
    padding: 4px 3px 0;
    border-radius: 7px 7px 0 0;
}
.portfolio-chart-group:focus-within,
.portfolio-chart-group:hover {
    background: color-mix(in srgb, var(--brand-soft) 40%, transparent);
}
.portfolio-chart-bars {
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 6px;
}
.portfolio-chart-bar {
    width: min(24px, 38%);
    height: var(--bar-size, 0%);
    min-height: 5px;
    border-radius: 5px 5px 1px 1px;
}
.portfolio-chart-bar[data-chart-value='0'] {
    min-height: 0;
    border-width: 0;
    box-shadow: none;
}
.portfolio-chart-bar:is(:hover, :focus-visible) { transform: translateY(-2px); }
.portfolio-chart-label {
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    color: var(--text-tertiary, var(--muted));
    font-size: 9px;
    font-weight: 650;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.portfolio-chart-group > small {
    min-height: 2.5em;
    color: var(--text-tertiary, var(--muted));
    font-size: 8px;
    font-weight: 550;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
}

.portfolio-comparison-chart {
    max-height: min(580px, 68dvh);
    gap: 10px;
    overflow-y: auto;
    overscroll-behavior-block: contain;
}
.portfolio-comparison-chart .portfolio-chart-legend {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 4px 2px 9px;
    background: color-mix(in srgb, var(--surface-muted, var(--surface-soft)) 92%,
        var(--surface-raised, var(--surface)));
    border-bottom: 1px solid var(--overview-chart-grid);
}
.portfolio-comparison-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(130px, .65fr) minmax(240px, 2fr);
    grid-template-areas:
        'label bars'
        'summary bars';
    align-items: center;
    gap: 14px;
    padding: 9px 8px;
    border-radius: 8px;
}
.portfolio-comparison-row + .portfolio-comparison-row {
    border-top: 1px solid var(--overview-chart-grid);
}
.portfolio-comparison-row:focus-within,
.portfolio-comparison-row:hover {
    background: color-mix(in srgb, var(--brand-soft) 34%, transparent);
}
.portfolio-comparison-row > strong {
    grid-area: label;
    min-width: 0;
    overflow: hidden;
    display: block;
    color: var(--text-secondary, var(--text-subtle));
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    -webkit-line-clamp: unset;
}
.portfolio-comparison-row > small {
    grid-area: summary;
    min-width: 0;
    overflow: hidden;
    color: var(--text-tertiary, var(--muted));
    font-size: 8px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portfolio-comparison-bars {
    grid-area: bars;
    min-width: 0;
    display: grid;
    gap: 5px;
}
.portfolio-comparison-bar {
    width: var(--bar-size, 0%);
    min-width: 5px;
    height: 15px;
    border-radius: 1px 5px 5px 1px;
}
.portfolio-comparison-bar[data-chart-value='0'] {
    min-width: 0;
    border-width: 0;
    box-shadow: none;
}
.portfolio-comparison-bar:is(:hover, :focus-visible) { transform: translateX(2px); }
.portfolio-chart-empty {
    min-height: 150px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 24px;
    color: var(--text-tertiary, var(--muted));
    font-size: 11px;
    line-height: 1.55;
    text-align: center;
    background: var(--surface-muted, var(--surface-soft));
    border: 1px dashed var(--border-interactive, var(--border));
    border-radius: 10px;
}
.portfolio-chart-empty strong {
    color: var(--text-secondary, var(--text-subtle));
    font-size: 12px;
}
.portfolio-chart-empty span { max-width: 52ch; }
.compact-list,
.attention-list,
.activity-list { display: grid; gap: 4px; margin-top: 14px; }
.compact-list button,
.attention-list button {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 4px;
    color: var(--text);
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
}
.compact-list button:last-child,
.attention-list button:last-child { border-bottom: 0; }
.compact-list button:hover,
.attention-list button:hover { background: var(--surface-soft); }
.compact-list button > span { min-width: 0; }
.compact-list button > span:last-child { text-align: right; }
.compact-list strong,
.compact-list small,
.attention-list strong,
.attention-list small { display: block; }
.compact-list small,
.attention-list small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.attention-list button { justify-content: flex-start; }
.attention-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--danger);
    background: var(--danger-soft);
    border-radius: 8px;
}
.activity-list > div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 7px 3px;
    border-bottom: 1px solid var(--border);
}
.activity-list > div:last-child { border-bottom: 0; }
.activity-list strong,
.activity-list small { display: block; }
.activity-list small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.activity-mark { width: 8px; height: 8px; flex: 0 0 auto; background: #818cf8; border-radius: 50%; box-shadow: 0 0 0 4px #eef2ff; }
.maintenance-insights { grid-column: 1 / -1; }
.insight-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}
.insight-metrics > div { padding: 12px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 8px; }
.insight-metrics span,
.insight-metrics strong { display: block; }
.insight-metrics span { color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.insight-metrics strong { margin-top: 6px; font-size: 14px; }
.unit-cost-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.unit-cost-list > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.unit-cost-list span strong,
.unit-cost-list small { display: block; }
.unit-cost-list small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.inline-empty { margin: 22px 0; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.portfolio-empty { min-height: 240px; }

.calendar-card { overflow: hidden; }
.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 18px;
}
.calendar-period-copy { min-width: 0; }
.calendar-period-copy > span,
.calendar-legend-label {
    color: var(--muted);
    font-size: var(--type-meta, 12px);
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.calendar-period-copy h2 { margin: 4px 0 0; font-size: 20px; line-height: 1.25; }
.calendar-period-copy time { color: var(--text); }
.calendar-period-nav {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(126px, auto) auto minmax(126px, auto);
    overflow: hidden;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-xs);
}
.app .calendar-period-nav button {
    min-width: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 7px 11px;
    color: var(--text-subtle);
    background: var(--surface-raised, var(--surface));
    border: 0;
    border-radius: 0;
}
.app .calendar-period-nav button:hover { color: var(--brand); background: var(--surface-soft); }
.calendar-period-nav button + button { border-left: 1px solid var(--border); }
.calendar-period-button .icon { width: 16px; height: 16px; flex: 0 0 auto; }
.calendar-period-button > span { min-width: 0; display: grid; gap: 1px; text-align: left; }
.calendar-period-button small,
.calendar-period-button strong { display: block; line-height: 1.2; }
.calendar-period-button small { color: var(--muted); font-size: 11px; font-weight: 700; }
.calendar-period-button strong { overflow: hidden; font-size: var(--type-body-compact, 13px); text-overflow: ellipsis; white-space: nowrap; }
.calendar-period-next > span { text-align: right; }
.calendar-period-next .icon { transform: rotate(180deg); }
.calendar-today-button { font-size: var(--type-body-compact, 13px); font-weight: 750; }
.calendar-legend {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 18px;
    background: var(--surface-soft);
    border-top: 1px solid var(--border);
}
.calendar-legend > * { flex: 0 0 auto; }
.calendar-legend-label { margin-right: 4px; }
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(88px, 1fr));
    overflow-x: auto;
    border-top: 1px solid var(--border);
}
.weekday {
    padding: 9px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    text-align: center;
    text-transform: uppercase;
    background: var(--surface-soft);
    border-right: 1px solid var(--border);
}
.calendar-day {
    min-height: 112px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px;
    color: var(--text);
    text-align: left;
    background: #fff;
    border: 0;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.calendar-day:hover { position: relative; z-index: 1; background: #fafbff; box-shadow: inset 0 0 0 2px #c7d2fe; }
.calendar-day.outside { color: #98a2b3; background: #fafafa; }
.calendar-day.today .day-number { color: #fff; background: var(--brand); }
.day-number { width: 25px; height: 25px; display: grid; place-items: center; font-size: 11px; font-weight: 750; border-radius: 50%; }
.day-events { display: grid; gap: 4px; min-width: 0; }
.calendar-event {
    display: block;
    overflow: hidden;
    padding: 4px 5px;
    font-size: 9px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-left: 3px solid currentColor;
    border-radius: 3px;
}
.calendar-event.success { color: var(--success); background: var(--success-soft); }
.calendar-event.danger { color: var(--danger); background: var(--danger-soft); }
.calendar-event.warning { color: var(--warning); background: var(--warning-soft); }
.calendar-event.info { color: var(--info); background: var(--info-soft); }
.day-events > small { color: var(--muted); font-size: 9px; }

.timeline-card { overflow-x: auto; padding: 20px; }
.timeline-legend {
    min-width: 900px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding-bottom: 16px;
    color: var(--muted-strong);
    font-size: 10px;
    font-weight: 650;
}
.timeline-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.timeline-legend i {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    background: var(--brand);
    border-radius: 50%;
}
.timeline-legend i.success { background: var(--success); }
.timeline-legend i.info { background: var(--brand); }
.timeline-legend i.warning { background: var(--warning); }
.timeline-legend i.danger { background: var(--danger); }
.timeline-legend i.vacant { background: #98a2b3; }
.timeline-months,
.timeline-row { min-width: 900px; display: grid; grid-template-columns: 170px minmax(700px, 1fr); }
.timeline-months {
    grid-template-columns: 170px repeat(7, minmax(100px, 1fr));
    padding-bottom: 10px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}
.timeline-months span:first-child { text-align: left; }
.timeline-row { min-height: 54px; align-items: center; border-bottom: 1px solid var(--border); }
.timeline-row:last-child { border-bottom: 0; }
.timeline-unit { min-width: 0; padding-right: 14px; }
.timeline-row strong,
.timeline-row small { display: block; }
.timeline-unit strong,
.timeline-unit small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-unit small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.timeline-track {
    position: relative;
    height: 34px;
    background-image: repeating-linear-gradient(90deg, var(--surface-soft) 0,
        var(--surface-soft) calc(14.285% - 1px), var(--border) calc(14.285% - 1px),
        var(--border) 14.285%);
    border-radius: 7px;
}
.timeline-today {
    position: absolute;
    top: -3px;
    bottom: -3px;
    z-index: 3;
    width: 2px;
    background: #f04438;
    border-radius: 2px;
    pointer-events: none;
}
.timeline-today::before {
    position: absolute;
    top: -3px;
    left: 50%;
    width: 6px;
    height: 6px;
    content: "";
    background: #f04438;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.timeline-bar {
    position: absolute;
    top: 2px;
    height: 30px;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 9px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: left;
    background: var(--brand);
    border: 1px solid var(--brand-hover);
    border-radius: 6px;
}
.timeline-bar:hover { filter: brightness(1.06); box-shadow: var(--shadow-sm); }
.timeline-bar-label {
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.timeline-bar.success { color: #fff; background: var(--success); border-color: #05603a; }
.timeline-bar.info { color: #fff; background: var(--brand); border-color: var(--brand-hover); }
.timeline-bar.danger { color: #fff; background: var(--danger); border-color: #912018; }
.timeline-bar.warning { color: #fff; background: var(--warning); border-color: #93370d; }
.timeline-bar.vacant { color: #475467; background: repeating-linear-gradient(135deg, #f2f4f7, #f2f4f7 6px, #e4e7ec 6px, #e4e7ec 12px); border-color: #98a2b3; }

.dialog-list { display: grid; gap: 10px; margin-top: 14px; }
.dialog-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.dialog-list article > div:nth-child(2) { text-align: right; }
.dialog-list strong,
.dialog-list span { display: block; }
.dialog-list div > span:not(.pill) { margin-top: 4px; color: var(--muted); font-size: 10px; }
.dialog-row-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; }
.dialog-row-actions button { min-height: 34px; padding-block: 6px; font-size: 11px; }

.directory-layout {
    display: grid;
    grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}
.directory-list { overflow: hidden; }
.directory-list > div:last-child { max-height: 660px; overflow-y: auto; padding: 7px; }
.tenant-directory-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
}
.tenant-directory-row:hover { background: var(--surface-soft); }
.tenant-directory-row.active { background: var(--brand-soft); border-color: #c7d2fe; }
.tenant-select {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    color: var(--text);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 8px 0 0 8px;
}
.tenant-select:hover { background: transparent; }
.tenant-row-actions { display: flex; gap: 3px; padding-right: 7px; }
.tenant-row-actions .icon-button { width: 30px; height: 30px; }
.directory-list button strong,
.directory-list button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.directory-list button small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.directory-alert { width: 20px; height: 20px; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 800; background: var(--danger); border-radius: 50%; }
.profile-panel { min-height: 580px; padding: 22px; }
.profile-head { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.profile-head > div { min-width: 0; flex: 1; }
.profile-head h2 { margin: 0; font-size: 19px; }
.profile-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.avatar-large { width: 48px; height: 48px; font-size: 15px; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.profile-stat-grid > div { min-width: 0; padding: 13px; background: var(--surface-soft); }
.profile-stat-grid span,
.profile-stat-grid strong { display: block; }
.profile-stat-grid span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.profile-stat-grid strong { overflow: hidden; margin-top: 7px; font-size: 12px; text-overflow: ellipsis; }
.danger-text { color: var(--danger); }
.profile-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-title h3 { margin: 0; font-size: 13px; }
.section-title small { color: var(--muted); font-size: 9px; }
.compact-button { min-height: 30px; padding: 4px 8px; font-size: 10px; }
.payment-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 14px; }
.payment-strip > div { display: grid; gap: 6px; text-align: center; }
.payment-strip > div > span { height: 9px; background: #d0d5dd; border-radius: 999px; }
.payment-strip span.success { background: #12b76a; }
.payment-strip span.danger { background: #f04438; }
.payment-strip span.warning { background: #f79009; }
.payment-strip span.info { background: #53b1fd; }
.payment-strip small { color: var(--muted); font-size: 9px; }
.profile-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 18px; }
.profile-history-panel {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}
.profile-history-title { min-height: 34px; align-items: flex-start; }
.profile-history-title > div { min-width: 0; }
.profile-history-title h3,
.profile-history-title small { display: block; }
.profile-history-title small { margin-top: 3px; line-height: 1.35; }
.profile-history-title .compact-button { flex: 0 0 auto; }
.profile-feed { display: grid; gap: 1px; margin-top: 8px; }
.profile-history-feed { min-width: 0; align-content: start; }
.profile-history-empty {
    box-sizing: border-box;
    min-height: 46px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 10px 3px;
}
.profile-feed > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 3px;
    border-bottom: 1px solid var(--border);
}
.profile-feed > div > span { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 7px; }
.profile-feed p { min-width: 0; flex: 1; margin: 0; }
.profile-feed strong,
.profile-feed small { display: block; }
.profile-feed small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.5; }

.kanban-board {
    height: clamp(440px, calc(100dvh - 310px), 710px);
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.kanban-column { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 10px; background: #eef1f6; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.kanban-column > header { display: flex; align-items: center; gap: 8px; padding: 5px 4px 12px; }
.kanban-column > header h2 { flex: 1; margin: 0; font-size: 12px; }
.kanban-column > header > span:last-child { min-width: 22px; padding: 3px 6px; color: var(--muted); font-size: 9px; text-align: center; background: #fff; border-radius: 999px; }
.status-dot { width: 8px; height: 8px; background: #98a2b3; border-radius: 50%; }
.status-dot.success { background: #12b76a; }
.status-dot.warning { background: #f79009; }
.status-dot.danger { background: #f04438; }
.kanban-column > div { min-height: 0; display: grid; align-content: start; gap: 9px; overflow-y: auto; overscroll-behavior: contain; padding-right: 3px; }
.column-empty { margin: 22px 6px; color: var(--muted); font-size: 10px; text-align: center; }
.work-card { overflow: hidden; box-shadow: var(--shadow-sm); }
.work-card-main { width: 100%; display: grid; gap: 9px; padding: 14px; color: var(--text); text-align: left; background: #fff; border: 0; }
.work-card-main:hover { background: #fcfcfd; }
.work-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.work-meta > span { display: flex; flex-wrap: wrap; gap: 4px; }
.work-meta small { color: var(--muted); font-size: 9px; }
.work-card-main > span:not(.work-meta) { color: var(--muted); font-size: 10px; }
.work-supplier { display: flex; align-items: center; gap: 6px; }
.work-cost { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; color: var(--text) !important; border-top: 1px solid var(--border); }
.work-cost small { color: var(--muted); }
.work-card-actions { display: flex; align-items: center; justify-content: space-between; padding: 8px; background: var(--surface-soft); border-top: 1px solid var(--border); }
.cost-log-panel { margin-top: 18px; padding: 20px; }
.cost-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.cost-gallery button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    color: var(--text);
    text-align: left;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 9px;
}
.cost-gallery button:hover { background: #fff; border-color: #a5b4fc; }
.cost-gallery button > span { min-width: 0; }
.cost-gallery button > span:last-child { flex: 0 0 auto; text-align: right; }
.cost-gallery strong,
.cost-gallery small { display: block; }
.cost-gallery small { margin-top: 4px; color: var(--muted); font-size: 9px; }

.portfolio-modal { width: min(680px, calc(100vw - 32px)); }
.portfolio-modal textarea { width: 100%; resize: vertical; }
.portfolio-modal select { width: 100%; }
.portfolio-modal label { color: var(--text-subtle); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.supplier-service-picker {
    min-width: 0;
    margin: 16px 0 0;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.supplier-service-picker legend { padding: 0 5px; color: var(--text); font-size: 11px; font-weight: 700; }
.supplier-service-catalog-row,
.supplier-service-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin-top: 9px;
}
.supplier-service-catalog-row label,
.supplier-service-add label { margin: 0; }
.supplier-service-catalog-row button,
.supplier-service-add button { min-height: 40px; }
.supplier-selected-services {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    margin-top: 10px;
    padding: 8px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.supplier-service-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 5px 6px 5px 9px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 999px;
}
.supplier-service-chip > span {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.supplier-service-chip button {
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 50%;
}
.supplier-service-chip button:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.detail-grid > div { padding: 10px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 8px; }
.detail-grid span,
.detail-grid strong { display: block; }
.detail-grid span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.detail-grid strong { margin-top: 5px; font-size: 11px; }
.detail-description { margin: 14px 0 2px; color: var(--muted-strong); font-size: 11px; line-height: 1.6; }
.supplier-rate-helper { justify-self: start; min-height: 30px; margin-top: -8px; padding: 5px 2px; font-size: 10px; }
.feedback-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.feedback-section p { color: var(--muted-strong); font-size: 11px; }
.feedback-section p strong { margin-right: 8px; color: var(--text); }
.callout { margin: 14px 0 2px; padding: 11px 12px; font-size: 10px; line-height: 1.5; border-radius: 8px; }
.info-callout { color: #175cd3; background: var(--info-soft); border: 1px solid #b2ddff; }
.payment-modal { width: min(760px, calc(100vw - 32px)); }
.payment-context {
    margin-top: 16px;
    padding: 15px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 11px;
}
.payment-context > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.payment-context > header > div { min-width: 0; }
.payment-context > header > div > span,
.payment-context dt,
.payment-charge-amount small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.payment-context h3 { margin: 4px 0 0; font-size: 15px; line-height: 1.35; }
.payment-context-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin: 13px 0 0;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.payment-context-grid > div { min-width: 0; padding: 10px; background: var(--surface-raised); }
.payment-context dt,
.payment-context dd { margin: 0; }
.payment-context dd {
    overflow: hidden;
    margin-top: 5px;
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-overflow: ellipsis;
}
.payment-allocation-picker { min-width: 0; margin: 17px 0 0; padding: 0; border: 0; }
.payment-allocation-picker > legend { padding: 0; color: var(--text); font-size: 12px; font-weight: 800; }
.payment-allocation-picker > p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.payment-scope-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 11px;
}
.portfolio-modal label.payment-scope-option {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 11px;
    cursor: pointer;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 9px;
}
.portfolio-modal label.payment-scope-option:has(input:checked) {
    background: var(--brand-soft);
    border-color: color-mix(in srgb, var(--brand) 48%, var(--border));
}
.payment-scope-option input,
.payment-charge-row input {
    width: 16px;
    min-height: 16px;
    height: 16px;
    margin: 2px 0 0;
    padding: 0;
    accent-color: var(--brand);
}
.payment-scope-option span,
.payment-scope-option strong,
.payment-scope-option small,
.payment-charge-copy strong,
.payment-charge-copy small,
.payment-charge-amount strong,
.payment-charge-amount small { display: block; }
.payment-scope-option strong { color: var(--text); font-size: 11px; }
.payment-scope-option small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.payment-charge-list {
    max-height: min(230px, 32dvh);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    margin-top: 10px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 9px 9px 0 0;
}
.payment-charge-list:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.portfolio-modal label.payment-charge-row {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 11px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.portfolio-modal label.payment-charge-row:last-child { border-bottom: 0; }
.portfolio-modal label.payment-charge-row:has(input:checked) { background: var(--brand-soft); }
.portfolio-modal label.payment-charge-row:has(input:disabled) { cursor: default; }
.payment-charge-copy { min-width: 0; }
.payment-charge-copy strong { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; }
.payment-charge-copy small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.payment-charge-amount { min-width: 110px; text-align: right; }
.payment-charge-amount strong { margin-top: 4px; color: var(--text); font-size: 11px; }
.payment-allocation-total {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 11px;
    color: var(--muted);
    font-size: 10px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 9px 9px;
}
.payment-allocation-total strong { color: var(--text); font-size: 12px; }
.payment-amount-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.payment-modal input[readonly] { color: var(--text); background: var(--surface-soft); cursor: default; }
.confirm-label { margin: 18px 0 4px; font-weight: 700; }

.supplier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.supplier-card { overflow: hidden; padding: 18px; }
.supplier-card header { display: flex; align-items: center; gap: 10px; }
.supplier-card header > div:nth-child(2) { min-width: 0; flex: 1; }
.supplier-card h2 { overflow: hidden; margin: 0; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.supplier-card header div > span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.supplier-mark { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 10px; }
.supplier-services { min-height: 36px; margin: 16px 0; color: var(--muted-strong); font-size: 10px; line-height: 1.6; }
.supplier-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; background: var(--border); border: 1px solid var(--border); border-radius: 8px; }
.supplier-metrics span { padding: 10px; background: var(--surface-soft); }
.supplier-metrics small,
.supplier-metrics strong { display: block; }
.supplier-metrics small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.supplier-metrics strong { overflow: hidden; margin-top: 5px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.supplier-profile-button { width: 100%; margin-top: 14px; }
.supplier-profile-stats { margin-top: 14px; grid-template-columns: repeat(4, 1fr); }

.financial-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.category-bars { display: grid; gap: 14px; margin-top: 20px; }
.category-bars > div > span { display: flex; justify-content: space-between; gap: 12px; }
.category-bars strong { font-size: 11px; }
.category-bars small { color: var(--muted); font-size: 10px; }
.category-bars i { height: 8px; display: block; overflow: hidden; margin-top: 7px; background: #eaecf0; border-radius: 999px; }
.category-bars i span { height: 100%; display: block; background: linear-gradient(90deg, #818cf8, #4f46e5); border-radius: inherit; }
.pnl-table { width: 100%; margin-top: 15px; border-collapse: collapse; }
.pnl-table th,
.pnl-table td { padding: 14px 4px; border-bottom: 1px solid var(--border); }
.pnl-table th { color: var(--muted-strong); font-size: 11px; font-weight: 600; text-align: left; }
.pnl-table td { font-weight: 650; text-align: right; }
.pnl-table .pnl-total th,
.pnl-table .pnl-total td { color: var(--text); font-size: 13px; font-weight: 800; border-bottom: 0; }
.expense-log { margin-top: 16px; }
.expense-log .table-scroll { margin-top: 14px; }

.report-selector {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.report-selector > button {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px 11px;
    color: var(--text);
    text-align: left;
}
.report-selector > button:hover { border-color: #a5b4fc; }
.report-selector > button.active { background: var(--brand-soft); border-color: #a5b4fc; box-shadow: inset 0 -3px 0 var(--brand); }
.report-selector .report-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--brand); background: #fff; border-radius: 8px; }
.report-selector strong,
.report-selector small { display: block; overflow: hidden; text-overflow: ellipsis; }
.report-selector strong { font-size: 11px; white-space: nowrap; }
.report-selector small { height: 27px; margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.report-selector b { min-width: 22px; padding: 3px 5px; color: var(--muted); font-size: 9px; text-align: center; background: #fff; border-radius: 999px; }
.report-preview { padding: 16px 18px; }
.report-preview .card-head { margin-bottom: 10px; }
.report-preview .table-scroll { margin-top: 16px; }
.report-view-tabs {
    display: inline-flex;
    gap: 4px;
    margin-top: 0;
    padding: 4px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.report-view-tabs button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    color: var(--muted-strong);
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 750;
}
.report-view-tabs button.active {
    color: var(--brand-strong);
    background: #fff;
    box-shadow: 0 1px 3px rgba(16,24,40,.12);
}
.report-view-panel { margin-top: 12px; }
.report-view-panel .table-scroll { margin-top: 0; }
.report-visualization { display: grid; gap: 12px; }
.report-visual-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.report-visual-kpis article {
    min-width: 0;
    padding: 11px 13px;
    background: linear-gradient(145deg, var(--surface-soft), #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.report-visual-kpis span { display: block; color: var(--muted); font-size: 9px; }
.report-visual-kpis strong { display: block; overflow: hidden; margin-top: 4px; font-size: 17px; text-overflow: ellipsis; }
.report-visual-kpis strong.negative { color: var(--danger); }
.report-bar-chart { display: grid; gap: 9px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 10px; }
.report-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 4px; }
.report-chart-head strong { font-size: 12px; }
.report-chart-head span { color: var(--muted); font-size: 9px; }
.report-bar-row { display: grid; grid-template-columns: minmax(140px, .7fr) minmax(180px, 2fr); align-items: center; gap: 14px; }
.report-bar-row > div { min-width: 0; display: flex; justify-content: space-between; gap: 10px; }
.report-bar-row strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.report-bar-row span { flex: 0 0 auto; color: var(--muted-strong); font-size: 9px; font-weight: 700; }
.report-bar-row i { height: 10px; overflow: hidden; background: #eef2f6; border-radius: 999px; }
.report-bar-row i span { width: var(--report-bar); height: 100%; display: block; background: linear-gradient(90deg, #818cf8, var(--brand)); border-radius: inherit; }
.report-bar-row i span.negative { background: linear-gradient(90deg, #fda29b, var(--danger)); }

[data-portfolio-view='portfolio_reports'] .portfolio-filter-bar {
    gap: 8px;
    margin-bottom: 12px;
    padding: 11px 14px 9px;
}
[data-portfolio-view='portfolio_reports'] .portfolio-filter-field { gap: 4px; }
[data-portfolio-view='portfolio_reports'] .portfolio-filter-field input,
[data-portfolio-view='portfolio_reports'] .portfolio-filter-field select {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
}
[data-portfolio-view='portfolio_reports'] .portfolio-filter-meta {
    min-height: 25px;
    padding-top: 6px;
}

html[data-rees-density='compact'] .portfolio-overview {
    gap: 14px;
    margin-top: 16px;
}
html[data-rees-density='compact'] .portfolio-overview-filter-bar { padding: 10px 12px; }
html[data-rees-density='compact'] .portfolio-report-tabs { margin-top: 11px; }
html[data-rees-density='compact'] .app .portfolio-report-tab {
    min-height: 30px;
    padding-block: 4px;
}
html[data-rees-density='compact'] .portfolio-report-panel { margin-top: 10px; }
html[data-rees-density='compact'] .portfolio-chart {
    gap: 10px;
    padding: 12px;
}
html[data-rees-density='compact'] .portfolio-maintenance-chart .portfolio-chart-groups {
    min-height: 184px;
    padding-top: 12px;
}
html[data-rees-density='compact'] .portfolio-chart-group {
    grid-template-rows: auto minmax(124px, 1fr) auto;
    gap: 6px;
}
html[data-rees-density='compact'] .portfolio-comparison-row { padding-block: 6px; }

@media (max-width: 1240px) {
    .supplier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cost-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    [data-portfolio-view='tenant_profiles'] .portfolio-filter-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    [data-portfolio-view='tenant_profiles'] .portfolio-search-field { grid-column: span 3; }
}

@media (max-width: 1040px) {
    .portfolio-overview-filter-bar { grid-template-columns: 1fr; }
    .portfolio-overview-filter-bar .portfolio-filter-meta {
        min-height: 34px;
        padding-top: 8px;
        border-top: 1px solid var(--border-subtle, var(--border));
    }
    .portfolio-overview-filter-bar .portfolio-filter-meta output { max-width: none; }
    .directory-layout { grid-template-columns: 280px minmax(0, 1fr); }
    .profile-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-columns { grid-template-columns: 1fr; gap: 0; }
    .financial-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .portfolio-signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portfolio-dashboard-grid,
    .financial-grid { grid-template-columns: 1fr; }
    .kanban-board { overflow-x: auto; grid-template-columns: repeat(3, minmax(280px, 1fr)); padding-bottom: 7px; }
    .directory-layout { grid-template-columns: 1fr; }
    .directory-list > div:last-child { max-height: 270px; }
    .profile-panel { min-height: 0; }
    .unit-cost-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .global-results { position: fixed; top: 68px; right: 12px; left: 12px; }
    .portfolio-overview-filter-bar .portfolio-filter-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .portfolio-overview-filter-bar .portfolio-filter-inline-reset {
        grid-column: auto;
    }
    .portfolio-report-tabs {
        width: 100%;
        grid-auto-columns: minmax(128px, 1fr);
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
    }
    .portfolio-report-tab { scroll-snap-align: start; }
    .portfolio-chart { padding: 12px; }
    .portfolio-maintenance-chart .portfolio-chart-groups {
        min-height: 196px;
        display: flex;
        align-items: stretch;
        gap: 8px;
        overflow-x: auto;
        padding-inline: 4px;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
    }
    .portfolio-chart-group {
        min-width: 68px;
        min-height: 190px;
        height: auto;
        flex: 1 0 68px;
        grid-template-rows: auto minmax(138px, 1fr) auto;
        scroll-snap-align: start;
    }
    .portfolio-comparison-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            'label'
            'summary'
            'bars';
        gap: 8px;
        padding-inline: 4px;
    }
    .portfolio-comparison-row > strong,
    .portfolio-comparison-row > small {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }
    .supplier-grid { grid-template-columns: 1fr; }
    .report-selector { display: flex; overflow-x: auto; padding-bottom: 7px; }
    .report-selector > button { min-width: 220px; flex: 0 0 auto; }
    .report-bar-row { grid-template-columns: 1fr; gap: 6px; }
    .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .supplier-profile-stats { grid-template-columns: repeat(2, 1fr); }
    .calendar-card { margin-inline: -8px; border-radius: 9px; }
    .calendar-grid { grid-template-columns: repeat(7, minmax(76px, 1fr)); }
    .calendar-day { min-height: 98px; }
    [data-portfolio-view] .table-scroll,
    .portfolio-overview .table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        contain: inline-size paint;
    }
    [data-portfolio-view] .table-scroll table,
    .portfolio-overview .table-scroll table { min-width: 680px; }
}

@media (max-width: 640px) {
    .supplier-service-catalog-row,
    .supplier-service-add { grid-template-columns: 1fr; }
    .supplier-service-catalog-row button,
    .supplier-service-add button { width: 100%; }
    .portfolio-filter-bar { padding: 12px; }
    .portfolio-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portfolio-search-field { grid-column: span 2; }
    [data-portfolio-view='tenant_profiles'] .portfolio-filter-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    [data-portfolio-view='tenant_profiles'] .portfolio-search-field { grid-column: span 2; }
    .portfolio-filter-inline-reset {
        grid-column: span 2;
        width: 100%;
        min-height: 44px;
    }
    .portfolio-filter-meta { flex-wrap: wrap; }
    .portfolio-filter-meta output { min-width: 100%; }
    [data-portfolio-view='timeline'] .portfolio-filter-meta {
        display: flex;
        flex-wrap: nowrap;
    }
    [data-portfolio-view='timeline'] .portfolio-filter-meta output { min-width: 0; }
    [data-portfolio-view='timeline'] .portfolio-filter-meta button { width: auto; }
    .portfolio-signal-grid,
    .financial-kpis { grid-template-columns: 1fr; }
    .signal-card { min-height: 104px; }
    .portfolio-panel { padding: 16px; }
    .insight-metrics,
    .unit-cost-list { grid-template-columns: 1fr 1fr; }
    .trend-chart { height: 160px; gap: 5px; padding-inline: 2px; }
    .portfolio-heading { align-items: flex-start; }
    .portfolio-heading .heading-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
    .portfolio-heading .heading-actions button { width: 100%; }
    .calendar-toolbar { align-items: stretch; flex-direction: column; gap: 12px; padding: 14px 12px; }
    .calendar-period-copy h2 { font-size: 18px; }
    .calendar-period-nav { width: 100%; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .calendar-legend { padding-inline: 12px; }
    .directory-list > div:last-child { max-height: 230px; }
    .profile-panel { padding: 16px; }
    .profile-head { align-items: flex-start; flex-wrap: wrap; }
    .profile-head > .pill { margin-left: 61px; }
    .profile-stat-grid { grid-template-columns: 1fr; }
    .payment-strip { gap: 4px; }
    .payment-context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payment-scope-options { grid-template-columns: 1fr; }
    .payment-charge-row { align-items: flex-start; }
    .cost-gallery { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; gap: 0; }
    .expense-log .table-scroll {
        overflow: visible;
        contain: none;
    }
    .expense-log .table-scroll table,
    .expense-log .table-scroll tbody {
        width: 100%;
        min-width: 0;
        display: block;
    }
    .expense-log .table-scroll thead { display: none; }
    .expense-log .table-scroll tbody { display: grid; gap: 10px; }
    .expense-log .table-scroll tr {
        display: grid;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: var(--shadow-xs);
    }
    .expense-log .table-scroll td {
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 8px 12px;
        text-align: right;
        white-space: normal;
        border: 0;
    }
    .expense-log .table-scroll td::before {
        flex: 0 0 auto;
        content: attr(data-label);
        color: var(--muted);
        font-size: 8px;
        font-weight: 750;
        letter-spacing: .05em;
        text-align: left;
        text-transform: uppercase;
    }
    .expense-log .table-scroll .action-cell {
        justify-content: flex-end;
        padding: 9px 11px;
        background: var(--surface-soft);
        border-top: 1px solid var(--border);
    }
    .expense-log .table-scroll .action-cell::before { margin-right: auto; }
    .dialog-list article { grid-template-columns: 1fr; }
    .dialog-list article > div:nth-child(2) { text-align: left; }
    .dialog-row-actions { grid-column: 1; display: grid; }
    .dialog-row-actions button { width: 100%; }
}

@media (max-width: 420px) {
    .portfolio-overview-filter-bar .portfolio-filter-fields { grid-template-columns: 1fr; }
    .portfolio-overview-filter-bar .portfolio-filter-inline-reset { grid-column: 1; }
    .portfolio-chart-legend { gap: 7px 11px; }
    .portfolio-chart-empty { min-height: 120px; padding: 18px 12px; }
    .portfolio-comparison-bar { height: 14px; }
    .app .calendar-period-nav button { min-height: 44px; padding-inline: 8px; }
    .calendar-period-button strong { display: none; }
    .calendar-period-button > span { text-align: center; }
    .calendar-period-button small { color: inherit; font-size: var(--type-meta, 12px); font-weight: 750; }
    .calendar-legend-label { display: none; }
    .portfolio-filter-fields { grid-template-columns: 1fr; }
    .portfolio-search-field { grid-column: 1; }
    [data-portfolio-view='tenant_profiles'] .portfolio-filter-fields { grid-template-columns: 1fr; }
    [data-portfolio-view='tenant_profiles'] .portfolio-search-field,
    .portfolio-filter-inline-reset { grid-column: 1; }
    .portfolio-filter-meta { display: grid; grid-template-columns: 1fr; }
    .portfolio-filter-meta output { min-width: 0; }
    .portfolio-filter-meta button { width: 100%; }
    .profile-head > .pill { margin-left: 0; }
    .profile-actions { display: grid; }
    .profile-actions button { width: 100%; }
    .payment-context-grid { grid-template-columns: 1fr; }
    .portfolio-modal label.payment-charge-row {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: flex-start;
    }
    .payment-charge-amount { grid-column: 2; min-width: 0; text-align: left; }
    .detail-grid,
    .supplier-profile-stats { grid-template-columns: 1fr; }
    .supplier-card header { align-items: flex-start; }
    .supplier-card header .row-actions { flex-direction: column; }
    .insight-metrics,
    .unit-cost-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-overview,
    .portfolio-report-tabs,
    .portfolio-chart-groups { scroll-behavior: auto; }
    .portfolio-report-tab,
    .portfolio-chart-bar,
    .portfolio-comparison-bar { transition: none; }
    .portfolio-chart-bar:is(:hover, :focus-visible),
    .portfolio-comparison-bar:is(:hover, :focus-visible) { transform: none; }
}

@media (prefers-contrast: more) {
    .portfolio-overview-filter-bar,
    .portfolio-report-tabs,
    .portfolio-chart,
    .portfolio-chart-empty { border-width: 2px; }
    .app .portfolio-report-tab[aria-selected='true'] {
        border-color: var(--brand-strong, var(--brand));
        outline: 1px solid var(--brand-strong, var(--brand));
    }
    :is(.portfolio-chart-bar, .portfolio-comparison-bar, .portfolio-chart-swatch) {
        border-width: 2px;
        box-shadow: none;
    }
    .portfolio-comparison-row + .portfolio-comparison-row {
        border-top-color: var(--border-interactive, var(--border));
    }
}

@media (forced-colors: active) {
    .portfolio-overview-filter-bar,
    .portfolio-report-tabs,
    .portfolio-chart,
    .portfolio-chart-empty {
        color: CanvasText;
        background: Canvas;
        border: 1px solid CanvasText;
        box-shadow: none;
        forced-color-adjust: auto;
    }
    .app .portfolio-report-tab {
        color: ButtonText;
        background: ButtonFace;
        border: 1px solid ButtonText;
        forced-color-adjust: auto;
    }
    .app .portfolio-report-tab[aria-selected='true'] {
        color: HighlightText;
        background: Highlight;
        border-color: Highlight;
        box-shadow: none;
    }
    :is(.portfolio-chart-bar, .portfolio-comparison-bar, .portfolio-chart-swatch) {
        color: CanvasText;
        background: Canvas;
        border: 2px solid CanvasText;
        box-shadow: none;
        forced-color-adjust: none;
    }
    :is(.portfolio-chart-bar, .portfolio-chart-swatch).estimated-series {
        background: repeating-linear-gradient(
            135deg,
            Canvas 0 3px,
            CanvasText 3px 6px
        );
    }
    :is(.portfolio-chart-bar, .portfolio-chart-swatch).actual-series,
    :is(.portfolio-comparison-bar, .portfolio-chart-swatch).collected-series {
        color: Highlight;
        background: Highlight;
    }
    :is(.portfolio-comparison-bar, .portfolio-chart-swatch):is(.expense-series, .expenses-series) {
        color: CanvasText;
        background: CanvasText;
    }
    :is(.portfolio-comparison-bar, .portfolio-chart-swatch).noi-series {
        color: CanvasText;
        background: Canvas;
        border: 3px double CanvasText;
    }
    :is(.portfolio-chart-bar, .portfolio-comparison-bar):focus-visible,
    .app .portfolio-report-tab:focus-visible,
    .portfolio-report-panel:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }
}

.parking-approval-page { display: grid; gap: 16px; }
.parking-approval-page .portfolio-heading,
.parking-approval-page .portfolio-filter-bar { margin-bottom: 0; }
.parking-approval-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.parking-approval-stat {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 15px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.parking-approval-stat > span {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 10px;
}
.parking-approval-stat.success > span { color: var(--success); background: var(--success-soft); }
.parking-approval-stat.warning > span { color: var(--warning); background: var(--warning-soft); }
.parking-approval-stat.danger > span { color: var(--danger); background: var(--danger-soft); }
.parking-approval-stat small { display: block; color: var(--muted); font-size: 8px; font-weight: 700; }
.parking-approval-stat strong { display: block; margin-top: 3px; color: var(--text); font-size: 17px; }

.lease-request-page {
    display: grid;
    gap: 14px;
}
.lease-request-page .portfolio-heading,
.lease-request-page .portfolio-filter-bar {
    margin-bottom: 0;
}
.lease-request-page .portfolio-filter-fields {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.lease-request-page .portfolio-search-field {
    grid-column: span 2;
}
.lease-request-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.lease-request-board {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.lease-request-board:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.lease-request-column {
    min-width: 0;
    height: clamp(390px, 58vh, 620px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}
.lease-request-column > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 15px;
    border-bottom: 1px solid var(--border);
}
.lease-request-column > header h2 {
    margin: 0;
    color: var(--text);
    font-size: 12px;
}
.lease-request-column > header p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.4;
}
.lease-request-lane-count {
    min-width: 25px;
    padding: 4px 7px;
    color: var(--muted-strong);
    font-size: 9px;
    font-weight: 800;
    text-align: center;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.lease-request-scroll {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 12px;
}
.lease-request-scroll:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -3px;
}
.lease-request-column-empty {
    margin: 0;
    padding: 28px 12px;
    color: var(--muted);
    font-size: 9px;
    text-align: center;
}
.lease-request-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: var(--shadow-xs);
}
.lease-request-card > header,
.lease-request-dialog-summary > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.lease-request-card h3,
.lease-request-dialog-summary h3 {
    margin: 3px 0 0;
    color: var(--text);
    font-size: 14px;
}
.lease-request-tenant {
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    color: var(--text);
    font-size: 12px;
}
.lease-request-tenant span {
    color: var(--muted);
}
.lease-request-tenant strong,
.lease-request-tenant span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lease-request-card dl,
.lease-request-dialog-summary dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin: 0;
}
.lease-request-card dt,
.lease-request-dialog-summary dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.lease-request-card dd,
.lease-request-dialog-summary dd {
    min-width: 0;
    margin: 2px 0 0;
    color: var(--text);
    font-size: 12px;
    overflow-wrap: anywhere;
}
.lease-request-note,
.lease-request-dialog-summary > p,
.lease-decision-note {
    margin: 0;
    padding: 8px 10px;
    color: var(--muted-strong);
    background: var(--surface-subtle);
    border-inline-start: 3px solid var(--brand);
    border-radius: 0 8px 8px 0;
    font-size: 12px;
    line-height: 1.45;
}
.lease-request-card .lease-request-note {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.lease-request-card > button {
    width: 100%;
}
.lease-request-dialog-summary {
    display: grid;
    gap: 12px;
    padding: 12px;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.lease-renewal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.lease-renewal-wide {
    grid-column: 1 / -1;
}
.lease-decision-note h3 {
    margin: 0 0 5px;
    color: var(--text);
    font-size: 11px;
}
.lease-decision-note p {
    margin: 0;
}

.parking-approval-board {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.parking-approval-column {
    min-width: 0;
    height: clamp(390px, 58vh, 620px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}
.parking-approval-column > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 15px;
    border-bottom: 1px solid var(--border);
}
.parking-approval-column > header h2 { margin: 0; color: var(--text); font-size: 12px; }
.parking-approval-column > header p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.4; }
.parking-approval-column > header > span {
    min-width: 25px;
    padding: 4px 7px;
    color: var(--muted-strong);
    font-size: 9px;
    font-weight: 800;
    text-align: center;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.parking-approval-scroll {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 12px;
}
.parking-approval-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.parking-column-empty {
    margin: 0;
    padding: 28px 12px;
    color: var(--muted);
    font-size: 9px;
    text-align: center;
}
.parking-approval-card {
    min-width: 0;
    display: grid;
    gap: 11px;
    padding: 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: var(--shadow-xs);
}
.parking-approval-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.parking-approval-card .eyebrow { margin: 0 0 4px; }
.parking-approval-card h3 { margin: 0; color: var(--text); font-size: 11px; line-height: 1.35; }
.parking-approval-tenant { min-width: 0; margin: 0; }
.parking-approval-tenant strong,
.parking-approval-tenant span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parking-approval-tenant strong { color: var(--text); font-size: 10px; }
.parking-approval-tenant span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.parking-approval-card dl,
.parking-review-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.parking-approval-card dl div,
.parking-review-details div {
    min-width: 0;
    padding: 8px 9px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.parking-approval-card dt,
.parking-review-details dt { color: var(--muted); font-size: 7px; font-weight: 700; text-transform: uppercase; }
.parking-approval-card dd,
.parking-review-details dd { overflow: hidden; margin: 3px 0 0; color: var(--text); font-size: 9px; font-weight: 650; text-overflow: ellipsis; }
.parking-approval-card dl div:last-child { grid-column: 1 / -1; }
.parking-decision-note {
    margin: 0;
    padding: 9px 10px;
    color: var(--muted-strong);
    font-size: 8px;
    line-height: 1.5;
    background: var(--surface-soft);
    border-left: 3px solid var(--border-strong);
    border-radius: 7px;
}
.parking-approval-card > button { width: 100%; }

.parking-review-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 13px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.parking-review-summary .eyebrow { margin: 0 0 4px; }
.parking-review-summary strong,
.parking-review-summary span { display: block; }
.parking-review-summary strong { color: var(--text); font-size: 12px; }
.parking-review-summary div > span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.parking-review-details { margin-bottom: 15px; }
.parking-field-hint { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.parking-decision-history {
    margin-top: 14px;
    padding: 14px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.parking-decision-history h3 { margin: 0; color: var(--text); font-size: 12px; }
.parking-decision-history p { margin: 7px 0; color: var(--muted-strong); font-size: 9px; line-height: 1.5; }
.parking-decision-history small { color: var(--muted); font-size: 8px; }

@media (max-width: 1000px) {
    .lease-request-board,
    .parking-approval-board {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        padding-bottom: 6px;
    }
    .lease-request-column,
    .parking-approval-column {
        width: min(340px, 82vw);
        min-width: min(340px, 82vw);
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

@media (max-width: 640px) {
    .lease-request-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lease-request-page .portfolio-search-field { grid-column: 1 / -1; }
    .lease-renewal-grid { grid-template-columns: 1fr; }
    .lease-renewal-wide { grid-column: auto; }
    .parking-approval-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .parking-approval-stat { padding: 12px; }
    .lease-request-column,
    .parking-approval-column {
        width: min(330px, calc(100vw - 48px));
        min-width: min(330px, calc(100vw - 48px));
        height: min(520px, 65vh);
    }
    .parking-review-summary { align-items: flex-start; }
    .parking-review-details { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .lease-request-stats { grid-template-columns: 1fr; }
    .parking-approval-stats { grid-template-columns: 1fr; }
}