/*
 * Rees Maint enterprise presentation layer.
 *
 * This file is intentionally additive. It normalizes the existing V2 screens
 * without changing their role checks, data contracts, navigation, or workflow
 * behavior. Keep it loaded after every feature stylesheet.
 */

:root {
    --brand-strong: var(--brand-hover, #3730a3);
    --focus: rgba(79, 70, 229, .34);
    --focus: color-mix(in srgb, var(--brand, #4f46e5) 34%, transparent);
    --surface-raised: var(--surface, #fff);
    --surface-overlay: var(--surface, #fff);
    --surface-muted: var(--surface-soft, #f8fafc);
    --surface-hover: #f3f5fa;
    --surface-selected: var(--brand-soft, #eef2ff);
    --surface-inverse: var(--sidebar, #101828);
    --text-primary: var(--text, #101828);
    --text-secondary: var(--text-subtle, #344054);
    --text-tertiary: var(--muted, #667085);
    --text-on-brand: #fff;
    --border-subtle: var(--border, #e4e7ec);
    --border-interactive: var(--border-strong, #d0d5dd);
    --status-success: var(--success, #067647);
    --status-success-bg: var(--success-soft, #ecfdf3);
    --status-warning: var(--warning, #b54708);
    --status-warning-bg: var(--warning-soft, #fffaeb);
    --status-danger: var(--danger, #b42318);
    --status-danger-bg: var(--danger-soft, #fef3f2);
    --status-info: var(--info, #175cd3);
    --status-info-bg: var(--info-soft, #eff8ff);
    --type-meta: 12px;
    --type-body: 14px;
    --type-body-compact: 13px;
    --type-title: 16px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --control-height: 40px;
    --control-height-touch: 44px;
    --radius-control: 9px;
    --radius-surface: 14px;
    --shadow-surface: 0 1px 2px rgba(16, 24, 40, .04),
        0 3px 10px rgba(16, 24, 40, .045);
    --shadow-overlay: 0 22px 58px rgba(16, 24, 40, .2);
    --task-region-height: 620px;
    --task-region-height: clamp(420px, calc(100dvh - 320px), 720px);
}

html[data-rees-theme='dark'] {
    --brand-strong: var(--brand-hover, #c7d2fe);
    --focus: rgba(129, 140, 248, .45);
    --focus: color-mix(in srgb, var(--brand, #818cf8) 45%, transparent);
    --surface-raised: #111827;
    --surface-overlay: #151e2e;
    --surface-muted: #172033;
    --surface-hover: #1d293d;
    --surface-selected: var(--brand-soft, #252858);
    --surface-inverse: #070c16;
    --text-on-brand: #07111f;
    --border-subtle: #293449;
    --border-interactive: #465570;
    --shadow-surface: 0 1px 2px rgba(0, 0, 0, .24),
        0 5px 16px rgba(0, 0, 0, .18);
    --shadow-overlay: 0 24px 64px rgba(0, 0, 0, .46);
}

html[data-rees-theme='midnight'] {
    --brand-strong: var(--brand-hover, #dbeafe);
    --focus: rgba(98, 176, 255, .46);
    --focus: color-mix(in srgb, var(--brand, #62b0ff) 46%, transparent);
    --surface-raised: #071426;
    --surface-overlay: #0a1a2d;
    --surface-muted: #0c2035;
    --surface-hover: #102943;
    --surface-selected: var(--brand-soft, #132b48);
    --surface-inverse: #010611;
    --text-on-brand: #020817;
    --border-subtle: #19334c;
    --border-interactive: #345674;
    --shadow-surface: 0 1px 2px rgba(0, 0, 0, .3),
        0 6px 18px rgba(0, 0, 0, .24);
    --shadow-overlay: 0 26px 68px rgba(0, 0, 0, .54);
}

/* Shared page rhythm and hierarchy. */
.app .content {
    color: var(--text-primary);
}

.app :is(.view, .role-portal, .sp-page, .settings-page, [data-portfolio-view]) {
    min-width: 0;
    max-width: 100%;
}

.app :is(.heading, .portfolio-heading, .rp-heading, .sp-heading, .settings-heading) {
    align-items: flex-end;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.app :is(.heading, .portfolio-heading, .rp-heading, .sp-heading, .settings-heading)
    :is(.heading-copy, div:first-child) {
    min-width: 0;
}

.app :is(.heading, .portfolio-heading, .rp-heading, .sp-heading, .settings-heading) h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(28px, 2.25vw, 36px);
    line-height: 1.16;
    letter-spacing: -.035em;
}

.app :is(.heading-copy > p:last-child, .rp-heading > div > p:last-child,
    .sp-heading h1 + p, .settings-heading p:not(.eyebrow)) {
    max-width: 760px;
    margin-top: var(--space-2);
    color: var(--text-tertiary);
    font-size: var(--type-body);
    line-height: 1.55;
}

.app :is(.eyebrow, .rp-eyebrow) {
    margin-bottom: 7px;
    color: var(--brand);
    font-size: var(--type-meta);
    font-weight: 750;
    letter-spacing: .09em;
}

.app :is(.heading-actions, .rp-heading-actions, .sp-heading-actions) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Semantic surfaces shared by every role. */
.app :is(.card, .rp-card, .sp-kpi, .sp-board-column, .sp-work-card,
    .portfolio-panel, .settings-card, .settings-staff-card,
    .settings-summary-card, .settings-security-card,
    .occupancy-request-card, .parking-approval-column,
    .parking-approval-card) {
    color: var(--text-primary);
    background: var(--surface-raised);
    border-color: var(--border-subtle);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-surface);
}

.app :is(.data-surface, .rp-list-card, .sp-data-card, .sp-request-board,
    .calendar-card, .timeline-card, .profile-panel, .report-preview) {
    min-width: 0;
    overflow: hidden;
    background: var(--surface-raised);
    border-color: var(--border-subtle);
}

.app :is(.rp-card-head, .card-head, .settings-card-head) h2,
.app :is(.sp-overview-card, .sp-board-column, .parking-approval-column) h2 {
    color: var(--text-primary);
    font-size: var(--type-title);
    line-height: 1.3;
}

.app :is(.rp-card-head, .card-head, .settings-card-head) p {
    color: var(--text-tertiary);
    font-size: var(--type-body-compact);
    line-height: 1.5;
}

/* One KPI language for Owner, Property Manager, Tenant, Supplier and Security. */
.app :is(.kpis, .rp-metrics, .sp-kpis, .portfolio-signal-grid,
    .financial-kpis, .occupancy-approval-stats, .parking-approval-stats) {
    gap: var(--space-4);
}

.app :is(.kpi, .rp-metric, .sp-kpi, .signal-card,
    .occupancy-approval-stat, .parking-approval-stat) {
    min-width: 0;
    min-height: 112px;
    padding: 18px;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-surface);
}

.app :is(.kpi-icon, .rp-metric-icon, .sp-kpi > span,
    .signal-icon, .occupancy-approval-stat > span,
    .parking-approval-stat > span) {
    color: var(--brand);
    background: var(--surface-selected);
    border-radius: 10px;
}

.app :is(.kpi-label, .kpi-meta, .rp-metric p, .sp-kpi small,
    .signal-card small, .occupancy-approval-stat small,
    .parking-approval-stat small) {
    color: var(--text-tertiary);
    font-size: var(--type-meta);
    line-height: 1.4;
}

.app :is(.rp-metric strong, .sp-kpi strong, .signal-card strong,
    .occupancy-approval-stat strong, .parking-approval-stat strong) {
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1.15;
}

.app .kpi-link {
    width: 100%;
    min-height: 112px;
    color: inherit;
    font: inherit;
    text-align: left;
    appearance: none;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease,
        transform .16s ease, background-color .16s ease;
}

.app .kpi-link:hover {
    background: var(--surface-hover);
    border-color: var(--border-interactive);
    box-shadow: 0 8px 22px rgba(16, 24, 40, .11);
    transform: translateY(-2px);
}

.app .kpi-link:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-color: var(--brand);
}

.app .kpi-link:active {
    transform: translateY(0);
}

/* Card-style controls keep their information-rich dimensions above control floors. */
.app .tss-card-grid > button {
    min-height: 122px;
}

.app .rp-action {
    min-height: 126px;
}

.app .rp-access-service,
.context-panel .context-choice {
    min-height: 64px;
}

.context-switcher .context-trigger {
    min-height: 48px;
}

/* Standard filters and form controls. */
.app :is(.toolbar, .rp-toolbar, .sp-filter-bar, .portfolio-filter-bar,
    .occupancy-approval-toolbar, .settings-staff-toolbar) {
    gap: var(--space-3);
    padding: var(--space-4);
    color: var(--text-secondary);
    background: var(--surface-raised);
    border-color: var(--border-subtle);
}

.app :is(.toolbar-label, .rp-date-field > span,
    .sp-filter-bar label > span, .portfolio-filter-field > span:first-child,
    .occupancy-approval-toolbar label, .settings-field,
    .settings-staff-form label:not(.staff-role-choice):not(.staff-show-password)),
.modal-back label {
    color: var(--text-secondary);
    font-size: var(--type-meta);
    font-weight: 650;
    line-height: 1.4;
}

.app :is(input:not([type='checkbox']):not([type='radio']), select, textarea),
.modal-back :is(input:not([type='checkbox']):not([type='radio']), select, textarea) {
    min-height: var(--control-height);
    color: var(--text-primary);
    background-color: var(--surface-raised);
    border-color: var(--border-interactive);
    border-radius: var(--radius-control);
}

.app :is(input:not([type='checkbox']):not([type='radio']), select, textarea):hover,
.modal-back :is(input:not([type='checkbox']):not([type='radio']), select, textarea):hover {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--border-interactive));
}

.app :is(input:not([type='checkbox']):not([type='radio']), select, textarea):focus,
.modal-back :is(input:not([type='checkbox']):not([type='radio']), select, textarea):focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--focus);
}

.app button,
.app :is(a.primary, a.secondary, a.tertiary),
.modal-back button,
.modal-back :is(a.primary, a.secondary, a.tertiary) {
    min-height: var(--control-height);
}

.app :is(.primary, .secondary, .tertiary),
.modal-back :is(.primary, .secondary, .tertiary) {
    font-size: var(--type-body-compact);
    font-weight: 680;
    border-radius: var(--radius-control);
}

.app .primary,
.modal-back .primary {
    color: var(--text-on-brand);
    background: var(--brand);
    border-color: var(--brand);
}

.app .primary:hover,
.modal-back .primary:hover {
    color: var(--text-on-brand);
    background: var(--brand-strong);
    border-color: var(--brand-strong);
}

.app .secondary,
.modal-back .secondary,
.app .icon-button {
    color: var(--text-secondary);
    background: var(--surface-raised);
    border-color: var(--border-interactive);
}

.app :is(.secondary, .tertiary, .icon-button):hover,
.modal-back :is(.secondary, .tertiary, .icon-button):hover {
    color: var(--brand-strong);
    background: var(--surface-selected);
    border-color: color-mix(in srgb, var(--brand) 38%, var(--border-interactive));
}

.app .icon-button,
.modal-back :is(.modal-close, .icon-button) {
    width: var(--control-height);
    height: var(--control-height);
    min-height: var(--control-height);
}

.app :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible,
.modal-back :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* Statuses remain recognizable regardless of the feature module rendering them. */
.app :is(.pill, .rp-badge, .sp-status, .role-badge),
.app .settings-page .status-dot {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    color: var(--text-secondary);
    font-size: var(--type-meta);
    font-weight: 700;
    line-height: 1.2;
    background: var(--surface-muted);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
}

.app :is(.pill.success, .rp-badge-active, .rp-badge-accepted,
    .rp-badge-approved, .rp-badge-completed, .rp-badge-paid,
    .rp-badge-available, .rp-badge-allocated, .sp-status.success) {
    color: var(--status-success);
    background: var(--status-success-bg);
    border-color: color-mix(in srgb, var(--status-success) 28%, var(--border-subtle));
}

.app :is(.pill.warning, .rp-badge-offered, .rp-badge-pending,
    .rp-badge-on-hold, .rp-badge-renewing, .rp-badge-submitted,
    .rp-badge-in-review, .rp-badge-in-progress, .rp-badge-requested,
    .sp-status.warning) {
    color: var(--status-warning);
    background: var(--status-warning-bg);
    border-color: color-mix(in srgb, var(--status-warning) 28%, var(--border-subtle));
}

.app :is(.pill.danger, .rp-badge-urgent, .rp-badge-emergency,
    .rp-badge-declined, .rp-badge-rejected, .rp-badge-terminated,
    .rp-badge-cancelled, .rp-badge-expired, .sp-status.danger) {
    color: var(--status-danger);
    background: var(--status-danger-bg);
    border-color: color-mix(in srgb, var(--status-danger) 28%, var(--border-subtle));
}

.app :is(.pill.info, .rp-badge-new, .sp-status.info) {
    color: var(--status-info);
    background: var(--status-info-bg);
    border-color: color-mix(in srgb, var(--status-info) 28%, var(--border-subtle));
}

.app :is(.rp-badge-withdrawn, .rp-badge-closed) {
    color: var(--text-tertiary);
    background: var(--surface-muted);
    border-color: var(--border-subtle);
}

/* Readable operational lists. */
.app .content small,
.modal-back small {
    font-size: var(--type-meta);
    line-height: 1.45;
}

.app :is(.table td, .rp-list-main p, .rp-work-main p,
    .rp-compact-item, .rp-access-main p, .rp-access-main > small,
    .rp-parking-request-main p, .rp-parking-request-main small,
    .sp-mini-feed strong, .sp-mini-feed small, .sp-work-card h3,
    .sp-work-card p, .sp-work-card dl div, .sp-data-row strong,
    .sp-data-row small, .sp-request-main h2, .sp-request-main p,
    .sp-request-details span, .sp-supplier-card p,
    .occupancy-request-head p, .occupancy-request-reason,
    .parking-approval-card h3, .parking-approval-tenant strong,
    .parking-approval-tenant span, .staff-person strong,
    .staff-person small) {
    font-size: var(--type-body-compact);
    line-height: 1.5;
}

/*
 * Legacy modules used 7-11px utility copy. These scoped floors keep badges and
 * metadata compact at 12px while operational descriptions remain at least 13px.
 * Icons are deliberately excluded from every selector.
 */
.app .content p:not(.eyebrow):not(.rp-eyebrow),
.app .content :is(dd, li) {
    font-size: var(--type-body-compact);
    line-height: 1.5;
}

.app .content :is(small, dt, th, label, legend, output),
.app :is(.rp-work-meta span, .rp-service-provider,
    .rp-service-request-summary span, .rp-parking-section-head > span,
    .rp-secure, .rp-tenancy-switcher, .rp-parking-space p,
    .rp-parking-vehicle > span, .rp-parking-rate > span,
    .rp-remove-person span, .occupancy-decision-summary span,
    .sp-filter-bar output, .sp-board-column header span,
    .sp-request-time span, .sp-request-details span, .sp-terminal-label,
    .sp-record-summary span, .sp-field-hint,
    .occupancy-request-meta, .insight-metrics span, .detail-grid span,
    .report-visual-kpis span, .report-chart-head span,
    .report-bar-row span, .inline-legend, .signal-card > span,
    .weekday, .day-number, .calendar-event, .timeline-legend,
    .timeline-months, .profile-stat-grid span,
    .kanban-column > header > span:last-child,
    .work-card-main > span:not(.work-meta), .supplier-service-chip > span,
    .supplier-card header div > span, .supplier-metrics small,
    .report-selector b, .parking-approval-column > header > span,
    .parking-approval-tenant span, .parking-approval-card dt,
    .parking-review-details dt, .parking-review-summary div > span,
    .parking-field-hint, .legend-item span, .health-copy span) {
    font-size: var(--type-meta);
    line-height: 1.45;
}

.app :is(.rp-access-service strong, .rp-access-date strong,
    .rp-access-main h3, .rp-service-tile > div:last-child strong,
    .rp-service-request-summary strong, .rp-form-error,
    .rp-contract-section dd, .rp-parking-available-action > strong,
    .rp-list-main strong, .rp-work-main strong, .rp-compact-item strong,
    .rp-parking-tile strong, .rp-service-tile h3,
    .rp-parking-rate strong, .rp-parking-request-main strong,
    .rp-parking-available-row > div:nth-child(2) strong,
    .rp-parking-empty strong, .rp-form-section summary strong,
    .rp-request-history article strong,
    .sp-mini-feed strong, .sp-partial-warning strong,
    .sp-work-card h3, .sp-data-row strong, .sp-request-main h2,
    .sp-supplier-card h2, .sp-empty strong, .sp-record-summary strong,
    .sp-individual-head strong, .settings-info-row p,
    .theme-choice-copy strong, .density-choice strong,
    .staff-person strong, .staff-invite-note strong,
    .staff-role-choice strong, .settings-staff-empty span,
    .settings-no-results span, .parking-approval-card h3,
    .parking-approval-tenant strong) {
    font-size: var(--type-body-compact);
    line-height: 1.45;
}

.app .content :is(button, select, input, textarea),
.modal-back :is(button, select, input, textarea),
.app :is(.staff-scope-action, .dialog-row-actions button,
    .report-view-tabs button) {
    font-size: var(--type-body-compact);
}

.app :is(.nav-label, .side nav .nav-section-toggle, .account small,
    .workspace-label, .search-hint, .tss-current-destination small,
    .tss-card-section > summary, .tss-card-account-profile small,
    .period-badge, .table-summary) {
    font-size: var(--type-meta);
    line-height: 1.4;
}

.app :is(.mode-switch button, .tss-card-close, .tss-back-to-apps,
    .tss-card-account-actions a, .tss-card-account-actions button,
    .report-options summary) {
    font-size: var(--type-body-compact);
}

.app :is(.sp-partial-warning span, .sp-scope-note, .sp-column-empty,
    .timeline-bar, .dialog-list div > span:not(.pill),
    .column-empty, .detail-description, .supplier-services,
    .callout, .supplier-metrics strong, .category-bars strong,
    .report-selector strong, .report-bar-row strong,
    .parking-column-empty, .parking-approval-card dd,
    .parking-review-details dd, .parking-decision-note) {
    font-size: var(--type-body-compact);
    line-height: 1.5;
}

.app .settings-page :is(label, legend, output),
.app .settings-page :is(.settings-save-state, .settings-owner-badge,
    .staff-you, .security-property, .security-unassigned,
    .staff-additional-roles, .staff-scope-summary,
    .settings-security-summary span, .staff-mobile-label) {
    font-size: var(--type-meta);
    line-height: 1.45;
}

.app .settings-page :is(.manager-access-scope > header p,
    .manager-scope-note, .settings-deactivate-copy > p,
    .staff-invite-note p, .settings-security-card li,
    .staff-show-password) {
    font-size: var(--type-body-compact);
    line-height: 1.5;
}

.app .settings-page .manager-scope-choices label {
    font-size: var(--type-body-compact) !important;
}

/* Context switcher can render above the content tree, so it is scoped directly. */
.context-switcher :is(.context-trigger-copy small, .context-trigger-action),
.context-panel :is(.context-panel-head p, .context-mode-tabs > span,
    .context-results-head h3, .context-results-head small,
    .context-choice-copy small, .context-choice-meta, .context-panel-foot) {
    font-size: var(--type-meta);
    line-height: 1.4;
}

.context-switcher .context-trigger-copy strong,
.context-panel :is(.context-mode-tabs button, .context-choice-copy strong,
    .context-error strong, .context-empty strong,
    .context-error p, .context-empty p) {
    font-size: var(--type-body-compact);
    line-height: 1.45;
}

/* Bulk upload is a portal-level modal and is not guaranteed to be inside .content. */
.bulk-import-modal :is(.bulk-import-steps li, .bulk-import-steps li > span,
    .bulk-import-steps li strong,
    .bulk-target-copy .eyebrow, .bulk-target-copy h3 span,
    .bulk-target-badge, .bulk-property-picker label,
    .bulk-review-target, .bulk-summary-grid span, .bulk-preview-table th,
    .bulk-action-pill, .bulk-preview-limit, .bulk-import-receipt dt) {
    font-size: var(--type-meta);
    line-height: 1.4;
}

.bulk-import-modal :is(p:not(.eyebrow), .bulk-atomic-note,
    .bulk-drop-zone > span:not(.bulk-drop-icon),
    .bulk-preview-table td, .bulk-preview-empty,
    .bulk-import-receipt dd, .bulk-row-issues li) {
    font-size: var(--type-body-compact);
    line-height: 1.5;
}

.bulk-import-modal :is(.bulk-target-copy h3, .bulk-selected-file strong,
    .bulk-policy legend, .bulk-policy-option strong,
    .bulk-review-state strong) {
    font-size: var(--type-body-compact);
    line-height: 1.45;
}

.bulk-import-modal .bulk-preview-table td::before {
    font-size: var(--type-meta);
}

/* Create, edit and detail workflows mount outside .app in the modal portal. */
.modal-back :is(p:not(.eyebrow), dd, li, .modal-description,
    .form-hint, .rp-hint, .rp-form-error, .sp-field-hint,
    .parking-field-hint, .security-pass-details dd,
    .lease-draft-status strong, .amenity-options [role='option'] strong,
    .inventory-options [role='option'] strong, .amenity-no-results,
    .inventory-no-results, .inventory-empty, .amenity-chip,
    .amenity-empty, .lease-page-intro span) {
    font-size: var(--type-body-compact);
    line-height: 1.5;
}

.modal-back :is(small, dt, label, legend, .security-pass-state span,
    .inventory-item-head span, .lease-defaults-status,
    .table td::before) {
    font-size: var(--type-meta);
    line-height: 1.45;
}

.modal-back :is(.report-options summary, .form-section-collapsible summary,
    .resource-form-section > summary) {
    font-size: var(--type-body-compact);
}

html:is([data-rees-theme='dark'], [data-rees-theme='midnight'])
    .bulk-import-modal :is(.bulk-review-state.ready > span,
        .bulk-review-state.blocked > span) {
    background: var(--surface-raised);
}

html:is([data-rees-theme='dark'], [data-rees-theme='midnight'])
    .bulk-import-modal .bulk-preview-table tr.invalid {
    background: color-mix(in srgb, var(--status-danger-bg) 72%, var(--surface-raised));
}

.app :is(.table th, .table td, .table .action-cell,
    .sp-data-row, .sp-request-card, .rp-list-item, .rp-compact-item,
    .rp-work-item, .rp-access-item, .settings-staff-row,
    .settings-security-row) {
    border-color: var(--border-subtle);
}

.app :is(.table th, .table .action-heading, .table .action-cell,
    .toolbar, .calendar-day, .kanban-column > header,
    .report-selector .report-icon, .report-selector b) {
    background-color: var(--surface-raised);
}

.app :is(.table tbody tr, .sp-data-row, .sp-request-card,
    .rp-list-item, .rp-compact-item, .rp-work-item,
    .settings-staff-row):hover,
.app :is(.table tbody tr, .sp-data-row, .sp-request-card,
    .rp-list-item, .rp-compact-item, .rp-work-item,
    .settings-staff-row):focus-within {
    background-color: var(--surface-hover);
}

.app :is(.table-summary, .rp-toolbar, .rp-parking-toolbar,
    .sp-board-column, .kanban-column, .parking-approval-column > header,
    .settings-staff-toolbar) {
    background-color: var(--surface-muted);
}

/* Remove legacy light-only islands from portfolio and workflow surfaces. */
.app :is(.global-results, .work-card-main,
    .expense-log .table-scroll tr) {
    color: var(--text-primary);
    background: var(--surface-raised);
    border-color: var(--border-subtle);
}

.app :is(.work-card-main:hover, .cost-gallery button:hover,
    .report-view-tabs button.active, .calendar-day:hover) {
    background: var(--surface-hover);
}

.app :is(.kanban-column > header > span:last-child,
    .report-visual-kpis article) {
    background: var(--surface-raised);
    border-color: var(--border-subtle);
}

.app .calendar-day.outside {
    background: var(--surface-muted);
}

.app .calendar-day.outside:hover {
    background: var(--surface-hover);
}

.app :is(.table-scroll, .rp-task-scroll, .rp-catalog-scroll,
    .rp-access-scroll, .rp-list-card > .rp-list, .rp-work-list,
    .rp-parking-request-list, .sp-data-scroll, .sp-request-scroll,
    .sp-board-column-scroll, .kanban-column > div,
    .parking-approval-scroll, .occupancy-request-list) {
    overscroll-behavior: contain;
}

/* Parking keeps three potentially large collections on one responsive page. */
.app .rp-parking-scroll-region {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

/* Professional dialogs and expandable form sections. */
.modal-back {
    background: color-mix(in srgb, var(--surface-inverse) 64%, transparent);
    backdrop-filter: blur(4px);
}

.modal-back .modal {
    color: var(--text-primary);
    background: var(--surface-overlay);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-overlay);
}

.modal-back .modal-head {
    background: var(--surface-overlay);
    border-bottom: 1px solid var(--border-subtle);
}

.modal-back .modal-body {
    background: var(--surface-overlay);
}

.modal-back .modal-actions {
    background: color-mix(in srgb, var(--surface-overlay) 94%, var(--surface-muted));
    border-top-color: var(--border-subtle);
}

.modal-back :is(.form-section, .form-section-collapsible,
    .resource-form-section, .lease-form-section, .rp-form-section,
    .supplier-service-picker, .security-building-choices,
    .manager-access-scope) {
    color: var(--text-primary);
    background: var(--surface-muted);
    border-color: var(--border-subtle);
}

.modal-back :is(.form-section-collapsible, .resource-form-section,
    .lease-form-section, .rp-form-section) > summary {
    min-height: var(--control-height);
    color: var(--text-primary);
}

.modal-back :is(.form-section-collapsible, .resource-form-section,
    .lease-form-section, .rp-form-section) > summary::after {
    color: var(--brand-strong);
    background: var(--surface-raised);
    border-color: var(--border-interactive);
}

/* Keep lease controls top-aligned when only one field in a row has helper text. */
.modal-back .modal-lease .lease-section-body > .form-grid {
    align-items: start;
    gap: 0 16px;
}

.modal-back .modal-lease .lease-section-body > .form-grid > * {
    min-width: 0;
    align-self: start;
    align-content: start;
}

/* Empty, error and loading states share one calm visual language. */
.app :is(.empty, .rp-empty, .sp-empty, .portfolio-empty,
    .settings-staff-empty, .settings-no-results, .route-error,
    .settings-forbidden, .rp-forbidden, .sp-forbidden) {
    color: var(--text-tertiary);
    background: var(--surface-raised);
    border: 1px dashed var(--border-interactive);
    border-radius: var(--radius-surface);
}

.app :is(.empty, .rp-empty, .sp-empty, .portfolio-empty,
    .settings-staff-empty, .settings-no-results, .route-error,
    .settings-forbidden, .rp-forbidden, .sp-forbidden) :is(strong, h1, h2) {
    color: var(--text-primary);
    font-size: var(--type-title);
}

.app :is(.empty, .rp-empty, .sp-empty, .portfolio-empty,
    .route-error, .settings-forbidden, .rp-forbidden, .sp-forbidden) p,
.app :is(.empty, .portfolio-empty) > span:last-child {
    color: var(--text-tertiary);
    font-size: var(--type-body-compact);
    line-height: 1.55;
}

.app :is(.skeleton, .context-loading-line) {
    background: color-mix(in srgb, var(--surface-muted) 70%, var(--border-subtle));
}

/* Keep task-heavy desktop screens within the working viewport. */
@media (min-width: 769px) {
    .app .data-surface .table-scroll,
    .app :is(.rp-task-scroll, .rp-catalog-scroll, .rp-access-scroll,
        .rp-list-card > .rp-list, .rp-work-list, .rp-parking-request-list,
        .sp-data-scroll, .sp-request-scroll, .occupancy-request-list) {
        max-height: var(--task-region-height);
        overflow: auto;
        scrollbar-gutter: stable;
    }

    .app :is(.sp-board, .kanban-board, .parking-approval-board) {
        height: var(--task-region-height);
        min-height: 420px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .app :is(.sp-board-column, .kanban-column, .parking-approval-column) {
        min-height: 0;
        overflow: hidden;
    }

    .app :is(.sp-board-column-scroll, .kanban-column > div,
        .parking-approval-scroll) {
        min-height: 0;
        overflow-y: auto;
        scrollbar-gutter: stable;
    }

    .app :is(.table th, .sp-board-column > header,
        .kanban-column > header, .parking-approval-column > header) {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .app .rp-parking-scroll-region {
        max-height: 500px;
        max-height: clamp(300px, 52dvh, 500px);
        max-block-size: clamp(300px, 52dvh, 500px);
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-gutter: stable;
    }
}

@media (min-width: 821px) {
    .app .rp-parking-main .rp-parking-scroll-region {
        max-height: 340px;
        max-height: clamp(260px, calc(50dvh - 150px), 340px);
        max-block-size: clamp(260px, calc(50dvh - 150px), 340px);
    }

    .app .rp-parking-available .rp-parking-scroll-region {
        max-height: 752px;
        max-height: clamp(592px, calc(100dvh - 228px), 752px);
        max-block-size: clamp(592px, calc(100dvh - 228px), 752px);
    }
}

@media (max-width: 1280px) {
    .app .content {
        padding-inline: clamp(22px, 3vw, 34px);
    }

    .app .sp-filter-bar {
        grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(140px, .55fr));
    }

    .app .sp-filter-bar output {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 1024px) {
    .app :is(.kpis, .rp-metrics, .sp-kpis, .portfolio-signal-grid,
        .financial-kpis, .occupancy-approval-stats, .parking-approval-stats) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app :is(.heading, .portfolio-heading, .rp-heading, .sp-heading,
        .settings-heading) {
        align-items: flex-start;
    }

    .app .sp-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .app .content {
        min-height: calc(100vh - 64px);
        min-height: calc(100dvh - 64px);
        padding: 24px 18px 40px;
    }

    .app :is(.heading, .portfolio-heading, .rp-heading, .sp-heading,
        .settings-heading) {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: var(--space-4);
        margin-bottom: var(--space-5);
    }

    .app :is(.heading, .portfolio-heading, .rp-heading, .sp-heading,
        .settings-heading) h1 {
        font-size: clamp(26px, 7vw, 32px);
    }

    .app :is(.heading-actions, .rp-heading-actions, .sp-heading-actions) {
        width: 100%;
        align-items: stretch;
    }

    .app :is(.heading-actions, .rp-heading-actions, .sp-heading-actions)
        :is(.primary, .secondary) {
        flex: 1 1 180px;
        justify-content: center;
    }

    .app :is(.toolbar, .rp-toolbar, .sp-filter-bar,
        .portfolio-filter-bar, .occupancy-approval-toolbar,
        .settings-staff-toolbar) {
        padding: var(--space-3);
    }

    .app :is(.sp-filter-bar, .occupancy-approval-toolbar,
        .settings-staff-toolbar) {
        grid-template-columns: 1fr;
    }

    .app .sp-filter-bar output {
        grid-column: auto;
    }

    .app button,
    .app :is(a.primary, a.secondary, a.tertiary),
    .modal-back button,
    .modal-back :is(a.primary, a.secondary, a.tertiary),
    .app :is(input:not([type='checkbox']):not([type='radio']), select),
    .modal-back :is(input:not([type='checkbox']):not([type='radio']), select) {
        min-height: var(--control-height-touch);
    }

    .app .tss-card-grid > button,
    .app .rp-action {
        min-height: 112px;
    }

    .context-switcher .context-trigger {
        min-height: var(--control-height-touch);
    }

    .app .icon-button,
    .modal-back :is(.modal-close, .icon-button) {
        width: var(--control-height-touch);
        height: var(--control-height-touch);
        min-height: var(--control-height-touch);
    }

    /* Mobile pages scroll naturally; nested desktop work regions are released. */
    .app .data-surface .table-scroll,
    .app :is(.rp-task-scroll, .rp-catalog-scroll, .rp-access-scroll,
        .rp-list-card > .rp-list, .rp-work-list, .rp-parking-request-list,
        .sp-data-scroll, .sp-request-scroll, .sp-board-column-scroll,
        .kanban-column > div, .parking-approval-scroll,
        .occupancy-request-list) {
        max-height: none;
        overflow-y: visible;
        scrollbar-gutter: auto;
    }

    /* Long Parking collections remain bounded without widening the phone page. */
    .app .rp-parking-scroll-region {
        max-height: 480px;
        max-height: min(58dvh, 480px);
        max-block-size: min(58dvh, 480px);
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-gutter: auto;
    }

    .app :is(.sp-board, .kanban-board, .parking-approval-board) {
        width: 100%;
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-3);
        overflow: visible;
        scroll-snap-type: none;
    }

    .app :is(.sp-board-column, .kanban-column, .parking-approval-column) {
        width: 100%;
        min-width: 0;
        height: auto;
        scroll-snap-align: none;
    }

    /* Security data-management rows must never force a 620px mobile canvas. */
    .app .sp-data-row {
        min-width: 0;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: start;
        gap: 10px 12px;
        padding: 14px;
    }

    .app .sp-data-row > :is(.sp-status, .tertiary, .secondary) {
        grid-column: 2;
        justify-self: start;
    }

    .app .sp-data-row > :is(.tertiary, .secondary) {
        width: 100%;
        justify-content: center;
    }

    .app .sp-request-actions :is(button, a, label, select) {
        min-height: var(--control-height-touch);
    }

    .modal-back .modal {
        max-height: calc(100vh - env(safe-area-inset-top, 0px));
        max-height: calc(100dvh - env(safe-area-inset-top, 0px));
    }

    .modal-back .modal-actions {
        padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    }

    .modal-back .modal-lease .lease-section-body > .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .app .content {
        padding-inline: 14px;
    }

    .app :is(.kpis, .portfolio-signal-grid, .financial-kpis) {
        grid-template-columns: 1fr;
    }

    .app :is(.rp-metrics, .sp-kpis, .occupancy-approval-stats,
        .parking-approval-stats) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
    }

    .app :is(.kpi, .rp-metric, .sp-kpi, .signal-card,
        .occupancy-approval-stat, .parking-approval-stat) {
        min-height: 104px;
        padding: var(--space-3);
    }

    .app .tss-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-2);
    }

    .app .tss-card-grid > button {
        min-height: 104px;
        padding-inline: 7px;
    }

    .app .tss-card-grid > button span {
        font-size: var(--type-meta);
    }

    .app :is(.heading-actions, .rp-heading-actions, .sp-heading-actions) {
        display: grid;
        grid-template-columns: 1fr;
    }

    .app :is(.heading-actions, .rp-heading-actions, .sp-heading-actions)
        :is(.primary, .secondary) {
        width: 100%;
    }

    .app .sp-request-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .app .sp-request-actions :is(button, a, label, select) {
        width: 100%;
        max-width: none;
        justify-content: center;
    }
}

@media (max-width: 360px) {
    .app .tss-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app :is(.rp-metrics, .sp-kpis, .occupancy-approval-stats,
        .parking-approval-stats) {
        grid-template-columns: 1fr;
    }

    .app .rp-action {
        min-height: 98px;
    }
}

@media (pointer: coarse) {
    .app button,
    .app :is(a.primary, a.secondary, a.tertiary),
    .modal-back button,
    .modal-back :is(a.primary, a.secondary, a.tertiary),
    .app :is(input:not([type='checkbox']):not([type='radio']), select),
    .modal-back :is(input:not([type='checkbox']):not([type='radio']), select) {
        min-height: var(--control-height-touch);
    }

    .app .icon-button,
    .modal-back :is(.modal-close, .icon-button) {
        width: var(--control-height-touch);
        height: var(--control-height-touch);
    }

}

@media (prefers-reduced-motion: reduce) {
    .app *,
    .app *::before,
    .app *::after,
    .modal-back *,
    .modal-back *::before,
    .modal-back *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    .app :is(.card, .rp-card, .sp-kpi, .sp-board-column,
        .portfolio-panel, .settings-card, .pill, .rp-badge,
        .sp-status, .tss-card-grid > button),
    .app .settings-page .status-dot,
    .modal-back .modal {
        border: 1px solid CanvasText;
        box-shadow: none;
        forced-color-adjust: auto;
    }

    .app :is(.primary, .secondary, .tertiary, .icon-button),
    .modal-back :is(.primary, .secondary, .tertiary, .modal-close) {
        border: 1px solid ButtonText;
    }

    .app :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible,
    .modal-back :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 3px solid Highlight;
    }
}