/* Shared shell: more room for records without changing page controls. */
:root { --modern-topbar-height: 50px; }
html { scroll-padding-top: calc(var(--modern-topbar-height) + 12px); }
.modern-app .modern-topbar { padding-inline: 24px; }
.modern-app .modern-topbar-location { gap: 9px; }
.modern-app .modern-topbar-title { margin: 0; min-width: 0; font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modern-app .modern-search-trigger { padding-block: 5px; }
.modern-app .modern-topbar-actions { gap: 6px; }
.modern-app .modern-preview-badge { padding-block: 3px; }
.modern-app .modern-sidebar .nav-brand { padding: 14px; gap: 6px; }
.modern-app .modern-sidebar .brand-link { min-width: 0; gap: 8px; font-size: 20px; }
.modern-app .modern-sidebar .brand-icon { width: 36px; height: 38px; flex-shrink: 0; border-radius: 10px; }
.modern-app .modern-sidebar .brand-icon svg { width: 27px; height: 27px; }
.modern-app .modern-brand-copy { min-width: 0; white-space: nowrap; }
.modern-app .modern-brand-caption { font-size: 9px; }
.modern-app .modern-sidebar-collapse { width: 30px; height: 32px; flex-shrink: 0; color: var(--steel-text); background: var(--surface-2); border-color: var(--border); }
.modern-app .modern-sidebar-collapse:hover { color: var(--indigo); background: var(--mint); }
.modern-app .modern-sidebar-collapse svg { width: 18px; height: 18px; }
.modern-app .modern-skip-link { inset-inline-start: calc(var(--modern-sidebar-width) + 12px); }

@media screen {
    body.modern-app:not(.login-page) .site-body { padding: 16px 24px 20px; }
    .modern-app #mainContent :is(.sites-page, .entry-types-page, .ad-page, .audit-page, .wh-page, .ss-page, .pr-page, .modern-operations-page) {
        padding-top: 0; margin-top: 0; width: 100%; max-width: none;
    }
    .modern-app #mainContent :is(.business-report, .modern-forecast-content, .bs-wrap, .sl-wrap) { padding-top: 0; }

    /* These finance banners contain only a duplicate title and decorative badge. */
    .modern-app #mainContent .modern-finance-hero { display: none; }
    .modern-app #mainContent :is(.modern-ops-hero, .sites-page-header, .entry-types-header, .wh-hero, .ss-hero, .pr-hero) {
        min-height: 0; padding: 0; margin-bottom: 14px; gap: 12px; flex-direction: row; flex-wrap: wrap;
        justify-content: flex-start; align-items: center; border: 0; border-radius: 0; background: transparent; box-shadow: none;
    }
    .modern-app #mainContent :is(.modern-ops-hero > div:has(> h1), .sites-page-heading, .entry-types-header > div:first-child, .wh-hero-copy, .ss-hero > div:first-child, .pr-hero-content, .modern-simple-header) { display: none; }
    .modern-app #mainContent .pr-external-hero { display: none; }
    .modern-app #mainContent :is(.wh-hero-actions, .ss-hero-actions, .pr-hero-actions, .ad-topbar-actions) {
        margin: 0; max-width: 100%; flex-wrap: wrap; gap: 8px;
    }
    .modern-app #mainContent .wh-sync-state { padding: 6px 10px; }
    .modern-app #mainContent .modern-simple-page { padding-top: 0; }

    /* Keep dates, totals and operational notes attached to their report actions. */
    .modern-app #mainContent :is(.br-header, .fc-header) { gap: 10px 18px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
    .modern-app #mainContent :is(.br-header > div:first-child > h1, .br-header > div:first-child > .br-eyebrow, .br-header > div:first-child > p:first-of-type, .fc-header > div:first-child > h1, .fc-header > div:first-child > .fc-eyebrow, .fc-header > div:first-child > p) { display: none; }
    .modern-app #mainContent :is(.modern-report-context, .fc-report-dates) { margin-top: 0; font-size: 11px; }
    .modern-app #mainContent .br-header > div:first-child > p:last-child { margin-top: 3px; }
    .modern-app #mainContent :is(.br-header-actions, .fc-header-actions) { flex-wrap: wrap; }
}

@media screen and (min-width: 961px) {
    html.modern-sidebar-collapsed { --modern-sidebar-width: 72px; }
    html.modern-shell-ready .modern-app .modern-sidebar { transition: width .18s ease; }
    html.modern-shell-ready .modern-app :is(.modern-topbar, .site-body) { transition: margin-inline-start .18s ease; }
    html.modern-sidebar-collapsed .modern-sidebar .nav-brand { flex-direction: column; padding: 12px 8px; gap: 8px; }
    html.modern-sidebar-collapsed .modern-sidebar .brand-link { justify-content: center; gap: 0; }
    html.modern-sidebar-collapsed .modern-sidebar :is(.modern-brand-copy, .modern-nav-label, .modern-nav-group-label, .modern-account-name, .modern-sidebar-status > span:last-child) { display: none; }
    html.modern-sidebar-collapsed .modern-sidebar-collapse svg { transform: rotate(180deg); }
    html.modern-sidebar-collapsed .modern-sidebar .nav-links { padding: 0 10px 12px; }
    html.modern-sidebar-collapsed .modern-nav-group { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
    html.modern-sidebar-collapsed .modern-nav-group:last-child { border-bottom: 0; margin-bottom: 0; }
    html.modern-sidebar-collapsed .modern-sidebar .nav-item { position: relative; justify-content: center; gap: 0; min-height: 40px; padding: 10px 0; }
    html.modern-sidebar-collapsed .modern-sidebar .nav-item .nav-icon { width: 20px; height: 20px; }
    html.modern-sidebar-collapsed .modern-nav-active-dot { position: absolute; inset-inline-end: 3px; margin: 0; width: 4px; height: 4px; }
    html.modern-sidebar-collapsed .modern-sidebar .nav-end { padding: 10px 8px; }
    html.modern-sidebar-collapsed .modern-sidebar-status { justify-content: center; margin-bottom: 9px; }
    html.modern-sidebar-collapsed .modern-account-row { flex-direction: column; gap: 5px; }
}

@media screen and (max-width: 960px) {
    :root { --modern-topbar-height: 50px; }
    .modern-app .modern-sidebar-collapse { display: none; }
    .modern-app .modern-sidebar .nav-brand { padding: 16px 14px; }
    .modern-app .modern-topbar { padding-inline: 16px; }
    body.modern-app:not(.login-page) .site-body { padding: 14px 16px 18px; }
}
@media screen and (max-width: 600px) {
    .modern-app .modern-topbar { padding-inline: 8px; }
    .modern-app .modern-topbar-actions { gap: 2px; }
    .modern-app .modern-topbar-title { font-size: 11px; }
    body.modern-app:not(.login-page) .site-body { padding: 12px 10px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    html.modern-shell-ready .modern-app :is(.modern-sidebar, .modern-topbar, .site-body) { transition: none; }
}