/* FinanzApp Control — Premium product layer
   This file intentionally sits after the legacy stylesheet: it refines the
   shared primitives used by every module without changing business flows. */

:root,
[data-theme="dark"],
body.dark-theme {
    --premium-surface: color-mix(in srgb, var(--bg-card-solid) 88%, transparent);
    --premium-surface-raised: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    --premium-line: color-mix(in srgb, var(--border) 82%, rgba(255, 255, 255, .07));
    --premium-highlight: rgba(255, 255, 255, .055);
    --premium-shadow: 0 18px 44px rgba(0, 0, 0, .24), 0 2px 8px rgba(0, 0, 0, .16);
    --premium-shadow-hover: 0 24px 56px rgba(0, 0, 0, .30), 0 3px 10px rgba(0, 0, 0, .18);
}


[data-theme="light"],
body:not(.dark-theme)[data-theme="light"] {
    --premium-surface: color-mix(in srgb, var(--bg-card-solid) 94%, transparent);
    --premium-surface-raised: #ffffff;
    --premium-line: color-mix(in srgb, var(--border) 92%, rgba(15, 23, 42, .08));
    --premium-highlight: rgba(15, 23, 42, .028);
    --premium-shadow: 0 18px 44px rgba(15, 23, 42, .08), 0 2px 8px rgba(15, 23, 42, .045);
    --premium-shadow-hover: 0 24px 56px rgba(15, 23, 42, .12), 0 3px 10px rgba(15, 23, 42, .06);
}

/* A few executive components predate the shared color tokens. Make their
   information hierarchy explicit in the light theme as well. */
[data-theme="light"] .executive-kpi,
body:not(.dark-theme)[data-theme="light"] .executive-kpi {
    background: linear-gradient(145deg, #ffffff, #f4f8fc);
    border-color: var(--premium-line);
    box-shadow: var(--premium-shadow);
}
[data-theme="light"] .executive-period,
body:not(.dark-theme)[data-theme="light"] .executive-period {
    background: #eef4f8;
    border-color: var(--premium-line);
}
[data-theme="light"] .executive-insight,
body:not(.dark-theme)[data-theme="light"] .executive-insight {
    background: linear-gradient(90deg, rgba(129,140,248,.10), rgba(255,255,255,.78) 52%);
}
[data-theme="light"] .executive-donut-wrap::before,
body:not(.dark-theme)[data-theme="light"] .executive-donut-wrap::before {
    border-color: rgba(15,23,42,.08);
    background: linear-gradient(135deg, rgba(15,23,42,.025), rgba(255,255,255,.72) 36%, rgba(129,140,248,.06));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}
[data-theme="light"] .executive-donut-legend::before,
body:not(.dark-theme)[data-theme="light"] .executive-donut-legend::before { background: linear-gradient(180deg, transparent, rgba(15,23,42,.14), transparent); }
[data-theme="light"] .executive-donut-legend-row,
body:not(.dark-theme)[data-theme="light"] .executive-donut-legend-row { border-bottom-color: rgba(15,23,42,.08); }
[data-theme="light"] .executive-donut-legend-row b,
body:not(.dark-theme)[data-theme="light"] .executive-donut-legend-row b { border-color: rgba(15,23,42,.1); background: rgba(15,23,42,.035); }

html { scroll-behavior: smooth; }
body { letter-spacing: -.006em; }

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 68%);
    opacity: .28;
}

/* Shell: clearer location, quieter chrome, more useful active state. */
.app-shell { isolation: isolate; }
.rail {
    padding: 18px 14px 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-sidebar) 96%, #101b2e), var(--bg-sidebar) 56%);
}
.sidebar-brand { margin: 0 6px; padding: 4px 6px 20px; }
.rail-nav { padding: 14px 5px 10px; }
.nav-group { margin-bottom: 16px; }
.nav-group-label { margin: 0 10px 7px; letter-spacing: .105em; }
.rail-nav a,
.rail-nav .nav-action {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 10px;
}
.rail-nav a::after {
    content: "";
    position: absolute;
    inset: 5px 6px;
    z-index: -1;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: border-color .18s ease, background .18s ease;
}
.rail-nav a:hover,
.rail-nav .nav-action:hover {
    background: transparent;
    transform: translateX(1px);
}
.rail-nav a:hover::after { border-color: var(--premium-line); background: var(--premium-highlight); }
.rail-nav a.active {
    color: var(--text-primary);
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand-soft) 82%, transparent), rgba(255,255,255,.018));
    box-shadow: inset 0 0 0 1px var(--brand-ring), 0 6px 18px rgba(0,0,0,.11);
}
.rail-nav a.active .tab-icon { color: var(--brand); filter: drop-shadow(0 0 7px var(--brand-glow)); }
.rail-nav a.active::before { width: 3px; border-radius: 999px; }
.rail-note,
.rail-footer .ia-control-panel { border-color: var(--premium-line); background: var(--premium-surface); }

.workspace { padding: 22px 28px 42px; }
.topbar {
    min-height: 68px;
    margin-bottom: 24px;
    padding: 0 2px 18px;
    border-bottom: 1px solid var(--premium-line);
}
.topbar-heading { gap: 5px; }
.topbar-heading h1 { letter-spacing: -.035em; }
.topbar-heading .eyebrow { color: var(--text-muted); font-size: 10px; letter-spacing: .11em; }
.topbar-icon-action,
.user-menu-trigger {
    border: 1px solid var(--premium-line);
    background: color-mix(in srgb, var(--bg-card) 78%, transparent);
    box-shadow: 0 1px 0 rgba(255,255,255,.035) inset;
}
.topbar-icon-action:hover:not(:disabled),
.user-menu-trigger:hover { border-color: var(--brand-ring); background: var(--brand-soft); }

/* Common page composition. */
.dashboard,
.tab-view { gap: 18px; }
.tab-view.active { animation: premium-view-in .4s var(--ease-out); }
@keyframes premium-view-in {
    from { opacity: 0; transform: translateY(10px); filter: blur(2px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero,
.attention-hero {
    position: relative;
    isolation: isolate;
    padding: 26px 28px;
    border-color: var(--premium-line);
    background: linear-gradient(118deg, var(--premium-surface-raised), color-mix(in srgb, var(--bg-card) 88%, transparent));
    box-shadow: var(--premium-shadow);
}
.hero::after,
.attention-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 260px;
    height: 260px;
    right: -112px;
    top: -186px;
    border: 1px solid var(--brand-ring);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(129,140,248,.025), 0 0 70px rgba(129,140,248,.09);
    pointer-events: none;
}
.hero h2,
.attention-hero h2 { max-width: 27ch; font-size: clamp(25px, 2.25vw, 34px); line-height: 1.12; }
.hero p:not(.eyebrow),
.attention-hero p:not(.eyebrow) { max-width: 69ch; line-height: 1.6; }
.eyebrow { font-weight: 800; letter-spacing: .1em; }

.panel,
.stats-grid article,
.plan-card,
.attention-stat,
.attention-health,
.attention-guide {
    border-color: var(--premium-line);
    box-shadow: var(--premium-shadow);
}
.panel { overflow: clip; background: var(--premium-surface); }
.panel-head {
    min-height: 64px;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(255,255,255,.018), transparent 45%);
}
.panel-head h3 { letter-spacing: -.018em; }
.panel-head > div > span:not(.panel-head-count) { display: block; margin-top: 4px; color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.panel-body { padding: 20px; }

/* Data density: metrics become easier to scan while retaining a calm surface. */
.stats-grid { gap: 16px; }
.stats-grid article,
.attention-stat { border-radius: 14px; }
.stats-grid article { min-height: 118px; padding: 18px; }
.stats-grid strong,
.attention-stat strong { font-variant-numeric: tabular-nums; }
.stats-grid article:hover,
.attention-stat-action:hover { box-shadow: var(--premium-shadow-hover); }
.kpi-icon { width: 42px; height: 42px; border-radius: 12px; }
.kpi-sub { line-height: 1.35; }
.attention-summary { gap: 16px; }
.attention-stat { min-height: 116px; padding: 18px 20px; }
.attention-stat strong { margin-top: 11px; }
.attention-health { margin: 0; }
.health-card { min-height: 88px; background: color-mix(in srgb, var(--bg-card-solid) 90%, transparent); }

/* Filters, actions and inputs share a tactile, clear interaction model. */
.toolbar,
.audit-toolbar {
    padding: 12px;
    border: 1px solid var(--premium-line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-card) 72%, transparent);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
input,
select,
textarea,
.cselect,
.filters-badge {
    border-color: var(--premium-line) !important;
    background: color-mix(in srgb, var(--bg-input) 90%, transparent) !important;
}
input:hover,
select:hover,
textarea:hover,
.cselect:hover { border-color: var(--border-strong) !important; }
input:focus,
select:focus,
textarea:focus,
.cselect:focus-within {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-soft), inset 0 1px 0 rgba(255,255,255,.035);
}
.search-field input { min-height: 42px; }
.attention-filters { padding: 0 20px 14px; }
.attention-filter { min-height: 34px; transition: transform .16s var(--ease-out), border-color .16s ease, background .16s ease; }
.attention-filter:hover { transform: translateY(-1px); }

.btn-primary,
.btn-nuevo,
.btn-confirm {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 100%);
    box-shadow: 0 8px 18px rgba(99,102,241,.20), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover:not(:disabled),
.btn-nuevo:hover:not(:disabled),
.btn-confirm:hover:not(:disabled) { box-shadow: 0 12px 24px rgba(99,102,241,.28), inset 0 1px 0 rgba(255,255,255,.24); }
.btn-secondary,
.btn-cancel { border-color: var(--premium-line); background: color-mix(in srgb, var(--bg-input) 80%, transparent); }
.btn-secondary:hover:not(:disabled),
.btn-cancel:hover:not(:disabled) { border-color: var(--brand-ring); background: var(--brand-soft); }

/* Long operational lists and tables receive strong row boundaries and a clear action lane. */
.attention-item { min-height: 82px; padding: 16px 20px; transition: background .18s ease, box-shadow .18s ease; }
.attention-item:hover { background: linear-gradient(90deg, var(--premium-highlight), transparent); box-shadow: inset 3px 0 0 var(--brand-ring); }
.attention-item.critical:hover { box-shadow: inset 3px 0 0 var(--danger); }
.attention-item.warning:hover { box-shadow: inset 3px 0 0 var(--warning); }
.attention-item strong { font-size: 13px; letter-spacing: -.01em; }
.attention-item p { max-width: 78ch; }
.attention-queue-panel .panel-head { padding-bottom: 12px; }
.attention-guide { background: linear-gradient(145deg, var(--premium-surface-raised), var(--premium-surface)); }

.audit-table-wrapper { background: color-mix(in srgb, var(--bg-card-solid) 45%, transparent); }
.audit-table th,
.audit-table td { padding: 13px 16px; }
.audit-table th { background: color-mix(in srgb, var(--bg-card-solid) 94%, transparent); }
.audit-table tbody tr { transition: background .15s ease; }
.audit-table tbody tr:hover { background: var(--premium-highlight); }
.tenant-list-item { box-shadow: 0 4px 12px rgba(0,0,0,.07); }

/* Tenant directory: an operational portfolio, not a list of generic rows. */
.tenant-segments { display: flex; gap: 8px; padding: 12px 20px; overflow-x: auto; border-bottom: 1px solid var(--premium-line); }
.tenant-segment { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 10px; border: 1px solid var(--premium-line); border-radius: 999px; color: var(--text-secondary); background: var(--premium-highlight); font: inherit; font-size: 11px; font-weight: 750; white-space: nowrap; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.tenant-segment b { display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 999px; color: var(--text-muted); background: var(--bg-input); font-family: var(--font-mono); font-size: 10px; }
.tenant-segment:hover { color: var(--text-primary); border-color: var(--border-strong); }
.tenant-segment.active { color: var(--brand); border-color: var(--brand-ring); background: var(--brand-soft); }
.tenant-segment.active b { color: #ffffff; background: var(--brand); }
.tenant-explorer { display: grid; gap: 7px; padding: 10px; }
.tenant-explorer-row { position: relative; display: grid; grid-template-columns: minmax(230px, 1.5fr) minmax(205px, 1.1fr) minmax(112px, .55fr) 76px minmax(150px, .85fr) auto; align-items: center; gap: 14px; min-height: 76px; padding: 11px 12px 11px 16px; overflow: hidden; border: 1px solid transparent; border-radius: 13px; background: color-mix(in srgb, var(--bg-card-solid) 74%, transparent); cursor: pointer; outline: none; transition: border-color .16s ease, background .16s ease, transform .16s var(--ease-out); }
.tenant-explorer-row::before { content: ""; position: absolute; inset: 13px auto 13px 0; width: 3px; border-radius: 0 4px 4px 0; background: var(--brand); opacity: .82; }
.tenant-explorer-row:hover { z-index: 1; border-color: var(--brand-ring); background: var(--premium-surface-raised); transform: translateX(2px); }
.tenant-explorer-row:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.tenant-explorer-row.health-attention::before { background: var(--danger); }
.tenant-explorer-row.health-quiet::before { background: var(--warning); }
.tenant-explorer-row.health-paused::before { background: var(--text-muted); }
.tenant-explorer-identity { display: flex; min-width: 0; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.tenant-explorer-identity:hover .tenant-explorer-copy strong { color: var(--brand); }
.tenant-explorer-identity .tenant-monogram { flex: 0 0 auto; width: 38px; height: 38px; font-size: 11px; }
.tenant-explorer-copy { display: grid; min-width: 0; gap: 3px; }
.tenant-explorer-copy strong { overflow: hidden; color: var(--text-primary); font-size: 13px; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.tenant-explorer-copy small { display: flex; gap: 5px; overflow: hidden; color: var(--text-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tenant-explorer-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tenant-health-badge { display: inline-flex; align-items: center; gap: 5px; max-width: 135px; color: var(--text-secondary); font-size: 9.5px; font-weight: 750; line-height: 1.25; white-space: nowrap; }
.tenant-health-badge i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand-glow); }
.health-attention .tenant-health-badge i { background: var(--danger); box-shadow: 0 0 10px var(--danger-soft); }
.health-quiet .tenant-health-badge i { background: var(--warning); box-shadow: 0 0 10px var(--warning-soft); }
.health-paused .tenant-health-badge i { background: var(--text-muted); box-shadow: none; }
.tenant-explorer-capacity,
.tenant-explorer-metric,
.tenant-explorer-activity { display: grid; min-width: 0; gap: 3px; }
.tenant-explorer-capacity > span,
.tenant-explorer-metric > span,
.tenant-explorer-activity > span { color: var(--text-muted); font-size: 8.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.tenant-explorer-capacity strong,
.tenant-explorer-metric strong,
.tenant-explorer-activity strong { overflow: hidden; color: var(--text-primary); font-family: var(--font-mono); font-size: 10.5px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.tenant-explorer-activity small { overflow: hidden; color: var(--text-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tenant-capacity-track { display: block; width: 100%; height: 4px; margin-top: 2px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--border) 74%, transparent); }
.tenant-capacity-track b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-hover), var(--brand)); }
.tenant-capacity-track b.is-over { background: linear-gradient(90deg, var(--danger-hover), var(--danger)); }
.tenant-explorer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.tenant-directory-open {
    min-width: 86px;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    /* Conserva el verde de acción principal del ERP en la puerta al perfil 360. */
    background: linear-gradient(180deg, #4f46e5 0%, #4338ca 52%, #312e81 100%);
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px rgba(0,0,0,.20), 0 8px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.30);
    transition: transform .16s var(--ease-out), background .16s ease, border-color .16s ease, box-shadow .2s ease;
}
.tenant-directory-open:hover:not(:disabled) {
    color: #fff;
    background: linear-gradient(180deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
    border-color: #a5b4fc;
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(110,231,183,.28), 0 0 20px rgba(99,102,241,.42), 0 12px 24px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.40);
}
.tenant-directory-open:focus-visible {
    outline: 2px solid #a5b4fc;
    outline-offset: 3px;
}
.skeleton-directory .skeleton-row { height: 76px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Perfil 360: the account gets its own decision-first command center. */
body.tenant-focus .detail-hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .54fr);
    gap: 18px;
    padding: 24px;
    border-color: var(--brand-ring);
    background: radial-gradient(560px 280px at 0% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 72%), linear-gradient(130deg, var(--premium-surface-raised), color-mix(in srgb, var(--bg-card-solid) 82%, var(--bg-elevated)));
}
body.tenant-focus .tenant-hero-main { display: grid; gap: 20px; min-width: 0; }
body.tenant-focus .tenant-page-identity { align-items: flex-start; }
body.tenant-focus .tenant-page-copy .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 8px; }
body.tenant-focus .tenant-hero-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tenant-hero-overview-card { min-height: 96px; padding: 13px; border: 1px solid var(--premium-line); border-radius: 13px; background: color-mix(in srgb, var(--bg-input) 74%, transparent); }
.tenant-hero-overview-card > span { display: block; color: var(--text-muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tenant-hero-overview-card > strong { display: flex; align-items: center; gap: 6px; margin-top: 8px; overflow: hidden; color: var(--text-primary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.tenant-hero-overview-card > strong i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand-glow); }
.tenant-hero-overview-card.health-attention > strong i { background: var(--danger); box-shadow: 0 0 10px var(--danger-soft); }
.tenant-hero-overview-card.health-quiet > strong i { background: var(--warning); box-shadow: 0 0 10px var(--warning-soft); }
.tenant-hero-overview-card.health-paused > strong i { background: var(--text-muted); box-shadow: none; }
.tenant-hero-overview-card small { display: block; margin-top: 6px; overflow: hidden; color: var(--text-muted); font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.tenant-hero-overview-card .kpi-bar { margin-top: 12px; }
body.tenant-focus .detail-actions { gap: 12px; padding: 15px; border-color: var(--premium-line); border-radius: 15px; background: color-mix(in srgb, var(--bg-card-solid) 72%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.tenant-command-title { padding: 1px 2px 3px; }
.tenant-command-title span { display: block; color: var(--text-primary); font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.tenant-command-title small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 10px; }
body.tenant-focus .detail-action-primary { padding-bottom: 12px; }
body.tenant-focus .detail-action-primary .btn-secondary:first-child { color: #ffffff; background: var(--brand); border-color: var(--brand); }
body.tenant-focus .detail-action-primary .btn-secondary:first-child svg { color: #ffffff; }
body.tenant-focus .metrics { gap: 14px; }
body.tenant-focus .metric { min-height: 118px; border-radius: 14px; }
body.tenant-focus .tenant-360-grid { gap: 14px; }
body.tenant-focus .tenant-360-card { min-height: 196px; }

/* Dialogs and status feedback should feel intentional, not like browser chrome. */
.modal-card { border-color: var(--premium-line); background: color-mix(in srgb, var(--bg-card-solid) 92%, transparent); }
.modal-header { background: linear-gradient(90deg, rgba(255,255,255,.025), transparent); }
.toast { border-color: var(--premium-line); box-shadow: var(--premium-shadow-hover); }
.empty-state { padding: 42px 24px; }

@media (max-width: 1100px) {
    .workspace { padding: 20px 20px 36px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    body::before { background-size: 34px 34px; }
    .workspace { padding: 16px 14px 30px; }
    .topbar { margin-bottom: 18px; padding-bottom: 14px; }
    .hero,
    .attention-hero { padding: 20px; }
    .hero h2,
    .attention-hero h2 { font-size: 24px; }
    .panel-head { min-height: auto; padding: 15px 16px; }
    .panel-body { padding: 16px; }
    .toolbar,
    .audit-toolbar { padding: 10px; border-radius: 12px; }
    .attention-item { padding: 15px 16px; }
    .audit-table th,
    .audit-table td { padding: 12px 14px; }
    .tenant-explorer { padding: 8px; }
    .tenant-explorer-row { grid-template-columns: minmax(200px, 1.35fr) minmax(155px, .95fr) minmax(96px, .5fr) auto; gap: 10px; }
    .tenant-explorer-activity { display: none; }
    .tenant-segments { padding: 10px 16px; }
    body.tenant-focus .detail-hero { grid-template-columns: 1fr; padding: 18px; }
    body.tenant-focus .tenant-hero-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 500px) {
    .tenant-explorer-row { grid-template-columns: minmax(0, 1fr) auto; gap: 9px; min-height: 0; padding: 12px 10px 12px 15px; }
    .tenant-explorer-state { grid-column: 1 / -1; grid-row: 2; }
    .tenant-explorer-capacity,
    .tenant-explorer-metric { display: none; }
    .tenant-explorer-actions { grid-column: 2; grid-row: 1; }
    .tenant-explorer-actions .tenant-directory-open { min-width: 42px; }
    .tenant-explorer-actions .tenant-directory-open span { display: none; }
    body.tenant-focus .tenant-hero-overview { grid-template-columns: 1fr; }
    .tenant-hero-overview-card { min-height: 74px; }
}

@media (max-width: 520px) {
    .stats-grid { grid-template-columns: 1fr; }
    .attention-stat { min-height: 100px; }
    .hero::after,
    .attention-hero::after { width: 190px; height: 190px; right: -105px; top: -130px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .tab-view.active,
    .modal-card,
    .modal { animation: none !important; }
    *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}