/** WastHub ERP — Unified App Shell (Phase 3.5). Scoped to migrated pages. */
/* Production sync: clients shell width contract, 2026-09-07. */
html:is([data-wast-ui], [data-wh-shell]) { --wh-shell-footer-height: 3rem; --wh-announcement-row-height: 2.5rem; --wh-shell-header-height: var(--wh-topbar-height); }
html:is([data-wast-ui], [data-wh-shell]) body { overflow-x: hidden; }
html:is([data-wast-ui], [data-wh-shell]) .app-wrapper { display: grid; grid-template-columns: var(--wh-sidebar-width) minmax(0, 1fr); min-height: 100vh; background: var(--wh-color-surface-page); transition: grid-template-columns var(--wh-duration-normal) var(--wh-easing-standard); }
html:is([data-wast-ui], [data-wh-shell]) .app-wrapper[data-wh-sidebar="collapsed"] { grid-template-columns: var(--wh-sidebar-width-collapsed) minmax(0, 1fr); }
html:is([data-wast-ui], [data-wh-shell]) .main-content,
html:is([data-wast-ui], [data-wh-shell]) .main-content.sidebar-collapsed { display: grid; grid-template-rows: var(--wh-shell-header-height) minmax(0, 1fr) auto; grid-column: 2; min-width: 0; min-height: 100vh; margin: 0; }
html:is([data-wast-ui], [data-wh-shell]) .page-content { grid-row: 2; min-width: 0; margin: 0; padding: var(--wh-page-padding-block) var(--wh-page-padding-inline); }
html[data-wh-shell] .main-content > :not(#topbar):not(.topbar):not(#footer):not(.footer):not(#headerContainer):not(#footerContainer) { grid-row: 2; min-width: 0; }
html[data-wh-shell] :where(#sidebarContainer, #headerContainer, #footerContainer) { display: contents; }
html[data-wast-ui] .wh-page-header[data-wh-variant="context"] :where(.wh-breadcrumb, .wh-page-header__title-row) { display: none; }
html[data-wast-ui] .wh-page-header[data-wh-variant="context"] { align-items: center; }

html:is([data-wast-ui], [data-wh-shell]) .sidebar { position: fixed; z-index: calc(var(--wh-z-topbar) + 1); inset-block: 0; inset-inline-start: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: var(--wh-sidebar-width); height: 100dvh; overflow: hidden; color: var(--wh-color-neutral-200); background: var(--wh-color-neutral-950); border: 0; border-inline-end: var(--wh-border-width-default) solid color-mix(in srgb, var(--wh-color-neutral-0) 10%, transparent); box-shadow: none; transition: width var(--wh-duration-normal) var(--wh-easing-standard), transform var(--wh-duration-normal) var(--wh-easing-standard); }
html:is([data-wast-ui], [data-wh-shell]) .sidebar.collapsed { width: var(--wh-sidebar-width-collapsed); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-header { display: flex; align-items: center; gap: var(--wh-space-3); min-height: var(--wh-topbar-height); padding: var(--wh-space-3) var(--wh-space-4); border-block-end: var(--wh-border-width-default) solid color-mix(in srgb, var(--wh-color-neutral-0) 8%, transparent); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-logo { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; flex: 0 0 auto; color: var(--wh-color-teal-500); background: color-mix(in srgb, var(--wh-color-teal-500) 12%, transparent); border: 0; border-radius: var(--wh-radius-md); box-shadow: none; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-brand-name { color: var(--wh-color-neutral-50); font-family: var(--wh-font-family-body); font-size: var(--wh-font-size-md); font-weight: var(--wh-font-weight-bold); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-brand-desc { color: var(--wh-color-neutral-400); font-size: var(--wh-font-size-xs); font-weight: var(--wh-font-weight-regular); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-toggle { position: absolute; inset-block-start: calc(var(--wh-topbar-height) / 2 - 1rem); inset-inline-end: -1rem; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; color: var(--wh-color-neutral-300); background: var(--wh-color-neutral-900); border: var(--wh-border-width-default) solid var(--wh-color-neutral-700); border-radius: var(--wh-radius-full); box-shadow: var(--wh-elevation-1); cursor: pointer; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-mobile-close { display: none; margin-inline-start: auto; inline-size: var(--wh-control-height); block-size: var(--wh-control-height); color: var(--wh-color-neutral-300); background: transparent; border: var(--wh-border-width-default) solid var(--wh-color-neutral-700); border-radius: var(--wh-radius-md); font: inherit; font-size: var(--wh-font-size-xl); cursor: pointer; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-search { padding: var(--wh-space-3); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-search input { width: 100%; min-height: var(--wh-control-height); padding: var(--wh-control-padding-block) calc(var(--wh-control-padding-inline) + var(--wh-space-5)); color: var(--wh-color-neutral-100); background: var(--wh-color-neutral-900); border: var(--wh-border-width-default) solid var(--wh-color-neutral-700); border-radius: var(--wh-radius-md); box-shadow: none; font: inherit; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-search input:focus-visible { outline: var(--wh-focus-ring); outline-offset: var(--wh-focus-ring-offset); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-search-icon { inset-inline-start: var(--wh-space-3); inset-inline-end: auto; color: var(--wh-color-neutral-400); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-nav { min-height: 0; overflow-y: auto; padding: 0 var(--wh-space-2) var(--wh-space-3); scrollbar-gutter: stable; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .nav-section { margin-block: var(--wh-space-2); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .nav-section-header { min-height: 2rem; padding: var(--wh-space-2) var(--wh-space-3); color: var(--wh-color-neutral-400); background: transparent; border: 0; box-shadow: none; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .nav-section-title { color: inherit; font-size: var(--wh-font-size-xs); font-weight: var(--wh-font-weight-semibold); letter-spacing: 0; text-transform: none; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .nav-link { display: flex; align-items: center; gap: var(--wh-space-3); min-height: var(--wh-control-height); margin: var(--wh-space-1) 0; padding: var(--wh-space-2) var(--wh-space-3); color: var(--wh-color-neutral-300); background: transparent; border: 0; border-radius: var(--wh-radius-md); box-shadow: none; font-size: var(--wh-font-size-sm); text-decoration: none; transition: color var(--wh-duration-fast), background-color var(--wh-duration-fast); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .nav-link:hover { color: var(--wh-color-neutral-50); background: color-mix(in srgb, var(--wh-color-neutral-0) 7%, transparent); transform: none; box-shadow: none; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .nav-link.active, html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .nav-link[aria-current="page"] { color: var(--wh-color-neutral-0); background: color-mix(in srgb, var(--wh-color-teal-500) 20%, transparent); border-inline-start: var(--wh-border-width-strong) solid var(--wh-color-teal-500); box-shadow: none; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .nav-link-icon { display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; flex: 0 0 auto; color: inherit; background: transparent; box-shadow: none; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .nav-link-badge { margin-inline-start: auto; padding: var(--wh-space-1) var(--wh-space-2); color: var(--wh-color-teal-500); background: color-mix(in srgb, var(--wh-color-teal-500) 15%, transparent); border-radius: var(--wh-radius-full); font-size: var(--wh-font-size-2xs); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-footer { padding: var(--wh-space-3); background: var(--wh-color-neutral-950); border-block-start: var(--wh-border-width-default) solid color-mix(in srgb, var(--wh-color-neutral-0) 8%, transparent); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-user { display: flex; align-items: center; gap: var(--wh-space-3); margin: 0 0 var(--wh-space-2); padding: var(--wh-space-2); background: transparent; border: 0; border-radius: var(--wh-radius-md); box-shadow: none; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-user-avatar { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; flex: 0 0 auto; color: var(--wh-color-neutral-0); background: var(--wh-color-indigo-600); border: 0; border-radius: var(--wh-radius-full); box-shadow: none; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-user-name { color: var(--wh-color-neutral-100); font-family: var(--wh-font-family-body); font-size: var(--wh-font-size-sm); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-user-role { color: var(--wh-color-neutral-400); font-size: var(--wh-font-size-xs); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-logout-btn { display: grid; place-items: center; width: 100%; min-height: var(--wh-control-height-compact); color: var(--wh-color-red-500); background: transparent; border: var(--wh-border-width-default) solid color-mix(in srgb, var(--wh-color-red-500) 35%, transparent); border-radius: var(--wh-radius-md); box-shadow: none; cursor: pointer; }
html:is([data-wast-ui], [data-wh-shell]) .sidebar.collapsed :where(.sidebar-brand, .sidebar-search, .nav-section-title, .nav-section-chevron, .nav-link-text, .nav-link-badge, .sidebar-user-info, .sidebar-logout-btn) { display: none; }
html:is([data-wast-ui], [data-wh-shell]) .sidebar.collapsed :where(.sidebar-header, .nav-section-header, .nav-link, .sidebar-user) { justify-content: center; padding-inline: var(--wh-space-2); }
html:is([data-wast-ui], [data-wh-shell]) .sidebar.collapsed .nav-section-content { display: block; max-height: none; overflow: visible; }

html:is([data-wast-ui], [data-wh-shell]) .topbar, html:is([data-wast-ui], [data-wh-shell]) .topbar.sidebar-collapsed { box-sizing: border-box; position: fixed; z-index: var(--wh-z-topbar); inset-block-start: 0; inset-inline: var(--wh-sidebar-width) 0; display: grid; grid-template-columns: minmax(10rem, max-content) minmax(10rem, 1fr) max-content; align-items: center; gap: var(--wh-space-3); height: var(--wh-topbar-height); padding: 0 var(--wh-page-padding-inline); color: var(--wh-color-text-primary); background: color-mix(in srgb, var(--wh-color-surface-elevated) 96%, transparent); border: 0; border-block-end: var(--wh-border-width-default) solid var(--wh-color-border-default); border-radius: 0; box-shadow: none; backdrop-filter: blur(12px); transition: inset-inline-start var(--wh-duration-normal) var(--wh-easing-standard); }
html:is([data-wast-ui], [data-wh-shell])[dir="rtl"] .topbar { right: var(--wh-sidebar-width); left: 0; }
html:is([data-wast-ui], [data-wh-shell])[dir="ltr"] .topbar { right: 0; left: var(--wh-sidebar-width); }
html:is([data-wast-ui], [data-wh-shell]) .app-wrapper[data-wh-sidebar="collapsed"] .topbar { inset-inline-start: var(--wh-sidebar-width-collapsed); }
html:is([data-wast-ui], [data-wh-shell])[dir="rtl"] .app-wrapper[data-wh-sidebar="collapsed"] .topbar { right: var(--wh-sidebar-width-collapsed); left: 0; }
html:is([data-wast-ui], [data-wh-shell])[dir="ltr"] .app-wrapper[data-wh-sidebar="collapsed"] .topbar { right: 0; left: var(--wh-sidebar-width-collapsed); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-right, html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-left { display: flex; align-items: center; gap: var(--wh-space-1); min-width: 0; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-left { justify-content: flex-end; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-title { display: flex; align-items: center; gap: var(--wh-space-2); min-width: 0; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-title .page-icon { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; color: var(--wh-color-action-primary); background: var(--wh-color-action-primary-subtle); border-radius: var(--wh-radius-md); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-title h1 { overflow: hidden; margin: 0; color: var(--wh-color-text-primary); font-family: var(--wh-font-family-body); font-size: var(--wh-font-size-md); font-weight: var(--wh-font-weight-bold); white-space: nowrap; text-overflow: ellipsis; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-title .breadcrumb { color: var(--wh-color-text-muted); font-size: var(--wh-font-size-xs); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-center { box-sizing: border-box; position: static; display: flex; align-items: center; justify-content: center; min-width: 0; width: 100%; max-width: none; height: var(--wh-control-height-compact); padding: 0 var(--wh-space-2); overflow: hidden; color: var(--wh-color-status-info); background: var(--wh-color-status-info-surface); border: var(--wh-border-width-default) solid color-mix(in srgb, var(--wh-color-status-info) 25%, transparent); border-radius: var(--wh-radius-md); box-shadow: none; justify-self: stretch; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-center[hidden] { display: none !important; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-center.announcement-info { color: var(--wh-color-status-info); background: var(--wh-color-status-info-surface); border-color: color-mix(in srgb, var(--wh-color-status-info) 25%, transparent); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-center.announcement-warning { color: var(--wh-color-status-warning); background: var(--wh-color-status-warning-surface); border-color: color-mix(in srgb, var(--wh-color-status-warning) 30%, transparent); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-center.announcement-danger { color: var(--wh-color-status-negative); background: var(--wh-color-status-negative-surface); border-color: color-mix(in srgb, var(--wh-color-status-negative) 30%, transparent); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-center.announcement-success { color: var(--wh-color-status-positive); background: var(--wh-color-status-positive-surface); border-color: color-mix(in srgb, var(--wh-color-status-positive) 25%, transparent); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-center .announcement-badge { color: inherit; background: color-mix(in srgb, currentColor 12%, transparent); border-color: color-mix(in srgb, currentColor 22%, transparent); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .announcement-content-wrapper { min-width: 0; max-width: 100%; overflow: hidden; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .announcement-text-container { min-width: 0; overflow: hidden; white-space: nowrap; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .announcement-text { display: inline-block; min-width: max-content; overflow: visible; white-space: nowrap; text-overflow: clip; line-height: var(--wh-line-height-control); will-change: transform; }
html:is([data-wast-ui], [data-wh-shell]) #topbar :where(.lang-toggle-btn, .theme-toggle-btn, .notification-btn, .mobile-menu-btn) { position: relative; display: inline-grid; place-items: center; min-inline-size: var(--wh-control-height); block-size: var(--wh-control-height); padding: var(--wh-space-2); color: var(--wh-color-text-secondary); background: transparent; border: var(--wh-border-width-default) solid transparent; border-radius: var(--wh-radius-md); box-shadow: none; font: inherit; font-weight: var(--wh-font-weight-semibold); cursor: pointer; }
html:is([data-wast-ui], [data-wh-shell]) #topbar :where(.lang-toggle-btn, .theme-toggle-btn, .notification-btn, .mobile-menu-btn):hover { color: var(--wh-color-text-primary); background: var(--wh-color-surface-subtle); border-color: var(--wh-color-border-default); box-shadow: none; transform: none; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .notification-badge { position: absolute; inset-block-start: 0; inset-inline-end: 0; min-inline-size: 1rem; block-size: 1rem; padding: 0 var(--wh-space-1); color: var(--wh-color-neutral-0); background: var(--wh-color-status-negative); border: 2px solid var(--wh-color-surface-elevated); border-radius: var(--wh-radius-full); font-size: var(--wh-font-size-2xs); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .user-button { display: flex; align-items: center; gap: var(--wh-space-2); min-height: var(--wh-control-height); padding: var(--wh-space-1) var(--wh-space-2); color: var(--wh-color-text-primary); background: transparent; border: var(--wh-border-width-default) solid transparent; border-radius: var(--wh-radius-md); box-shadow: none; font: inherit; cursor: pointer; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .user-button:hover, html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .user-button:focus-visible { background: var(--wh-color-surface-subtle); border-color: var(--wh-color-border-default); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .user-avatar { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; color: var(--wh-color-neutral-0); background: var(--wh-color-indigo-600); border-radius: var(--wh-radius-md); box-shadow: none; }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .user-name { color: var(--wh-color-text-primary); font-size: var(--wh-font-size-sm); font-weight: var(--wh-font-weight-semibold); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .user-role { color: var(--wh-color-text-muted); font-size: var(--wh-font-size-2xs); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .user-dropdown-menu { inset-block-start: calc(100% + var(--wh-space-2)); min-width: 16rem; color: var(--wh-color-text-primary); background: var(--wh-color-surface-elevated); border: var(--wh-border-width-default) solid var(--wh-color-border-default); border-radius: var(--wh-radius-lg); box-shadow: var(--wh-elevation-3); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .notification-item { color: var(--wh-color-text-primary); background: transparent; border-block-end: var(--wh-border-width-default) solid var(--wh-color-border-default); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .notification-item:hover { background: var(--wh-color-surface-subtle); }
html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .notification-item.unread { background: var(--wh-color-action-primary-subtle); border-inline-start: var(--wh-border-width-strong) solid var(--wh-color-action-primary); }

html:is([data-wast-ui], [data-wh-shell]) .footer { grid-row: 3; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--wh-space-2) var(--wh-space-4); min-height: var(--wh-shell-footer-height); padding: var(--wh-space-2) var(--wh-page-padding-inline); color: var(--wh-color-text-muted); background: var(--wh-color-surface-page); border: 0; border-block-start: var(--wh-border-width-default) solid var(--wh-color-border-default); box-shadow: none; font-size: var(--wh-font-size-xs); }
html:is([data-wast-ui], [data-wh-shell]) .footer :where(.footer-right, .footer-left, .footer-copyright, .footer-status, .footer-links) { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wh-space-2); }
html:is([data-wast-ui], [data-wh-shell]) .footer-dev-note, html:is([data-wast-ui], [data-wh-shell]) .footer-version { padding: 0; color: var(--wh-color-text-muted); background: transparent; border: 0; border-radius: 0; }
html:is([data-wast-ui], [data-wh-shell]) .footer-links a { color: var(--wh-color-text-secondary); padding: var(--wh-space-1); border-radius: var(--wh-radius-sm); text-decoration: none; }
html:is([data-wast-ui], [data-wh-shell]) .footer-links a:hover { color: var(--wh-color-action-primary); background: var(--wh-color-surface-subtle); }

html:is([data-wast-ui], [data-wh-shell]) .sidebar-overlay { position: fixed; z-index: calc(var(--wh-z-sidebar) - 1); inset: 0; display: none; opacity: 0; visibility: hidden; background: var(--wh-color-surface-overlay); backdrop-filter: none; transition: opacity var(--wh-duration-normal); }
html:is([data-wast-ui], [data-wh-shell]) .sidebar-overlay.active { opacity: 1; visibility: visible; }
html:is([data-wast-ui], [data-wh-shell])[data-wh-nav-open="true"] { overflow: hidden; }

@media (max-width: 64rem) {
  html:is([data-wast-ui], [data-wh-shell]) .app-wrapper, html:is([data-wast-ui], [data-wh-shell]) .app-wrapper[data-wh-sidebar="collapsed"] { grid-template-columns: minmax(0, 1fr); }
  html:is([data-wast-ui], [data-wh-shell]) .main-content, html:is([data-wast-ui], [data-wh-shell]) .main-content.sidebar-collapsed { grid-column: 1; }
  html:is([data-wast-ui], [data-wh-shell]) .sidebar, html:is([data-wast-ui], [data-wh-shell]) .sidebar.collapsed { z-index: calc(var(--wh-z-topbar) + 2); width: min(88vw, var(--wh-sidebar-width)); transform: translateX(105%); }
  html:is([data-wast-ui], [data-wh-shell]) .sidebar-overlay { z-index: calc(var(--wh-z-topbar) + 1); }
  html:is([data-wast-ui], [data-wh-shell])[dir="ltr"] .sidebar, html:is([data-wast-ui], [data-wh-shell])[dir="ltr"] .sidebar.collapsed { transform: translateX(-105%); }
  html:is([data-wast-ui], [data-wh-shell]) .sidebar.open { transform: translateX(0); }
  html:is([data-wast-ui], [data-wh-shell]) .sidebar-overlay { display: block; }
  html:is([data-wast-ui], [data-wh-shell]) .topbar, html:is([data-wast-ui], [data-wh-shell]) .topbar.sidebar-collapsed, html:is([data-wast-ui], [data-wh-shell]) .app-wrapper[data-wh-sidebar="collapsed"] .topbar { inset-inline-start: 0; grid-template-columns: minmax(10rem, auto) minmax(6rem, 1fr) auto; height: var(--wh-topbar-height) !important; }
  html:is([data-wast-ui], [data-wh-shell])[dir] .topbar, html:is([data-wast-ui], [data-wh-shell])[dir] .topbar.sidebar-collapsed { right: 0; left: 0; }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .mobile-menu-btn { display: inline-grid; }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-toggle { display: none; }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .sidebar-mobile-close { display: grid; place-items: center; }
}

/* Shared readability floor across the unified application shell. */
html:is([data-wast-ui], [data-wh-shell]) :is(
  .nav-link-badge,
  .announcement-badge,
  .notif-time,
  .user-role,
  .user-arrow,
  .footer-dev-note,
  .footer-version
) {
  font-size: 12px !important;
}
@media (max-width: 48rem) {
  html:is([data-wast-ui], [data-wh-shell]) .topbar, html:is([data-wast-ui], [data-wh-shell]) .topbar.sidebar-collapsed { grid-template-columns: minmax(0, auto) minmax(4rem, 1fr) auto !important; height: var(--wh-topbar-height) !important; padding: 0 var(--wh-space-3) !important; }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-title .breadcrumb, html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .user-info, html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .user-arrow { display: none; }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-center { width: 100% !important; min-width: 0 !important; height: var(--wh-control-height-compact) !important; padding-inline: var(--wh-space-1) !important; overflow: hidden !important; }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-center .announcement-badge { padding-inline: var(--wh-space-1); }
  html:is([data-wast-ui], [data-wh-shell]) .footer { justify-content: center; text-align: center; }
  html:is([data-wast-ui], [data-wh-shell]) .footer-right, html:is([data-wast-ui], [data-wh-shell]) .footer-left { justify-content: center; width: 100%; }
}
@media (max-width: 30rem) {
  html:is([data-wast-ui], [data-wh-shell]) .page-content { padding-inline: var(--wh-space-3); }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-title .page-icon { display: none; }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-title h1 { max-width: 5rem; font-size: var(--wh-font-size-sm); }
  html:is([data-wast-ui], [data-wh-shell]) .topbar { gap: 0; padding-inline: var(--wh-space-2); }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-left { gap: 0; }
  html:is([data-wast-ui], [data-wh-shell]) #topbar :where(.lang-toggle-btn, .theme-toggle-btn, .notification-btn, .mobile-menu-btn) { min-inline-size: 2.5rem; block-size: 2.5rem; }
  html:is([data-wast-ui], [data-wh-shell]) #topbar :where(.lang-toggle-btn, .theme-toggle-btn) { display: none; }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-center .status-dot { display: none; }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-center .announcement-content-wrapper { gap: var(--wh-space-1); }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-center .announcement-badge { padding-inline: 2px; font-size: var(--wh-font-size-2xs); }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-center .announcement-nav { gap: 2px; }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .topbar-center .announcement-nav-btn { width: 1.125rem; height: 1.125rem; min-width: 1.125rem; padding: 0; }
  html:is([data-wast-ui], [data-wh-shell]) .footer-dev-note, html:is([data-wast-ui], [data-wh-shell]) .footer-divider { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:is([data-wast-ui], [data-wh-shell]) :where(.app-wrapper, .sidebar, .topbar, .sidebar-overlay) { transition: none; }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .announcement-text-container { overflow-x: auto; scrollbar-width: thin; }
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar) .announcement-text { transform: none !important; }
}

html:is([data-wast-ui], [data-wh-shell])[data-wh-announcement-layout="below"] { --wh-shell-header-height: calc(var(--wh-topbar-height) + var(--wh-announcement-row-height)); }
html:is([data-wast-ui], [data-wh-shell])[data-wh-announcement-layout="below"] .topbar,
html:is([data-wast-ui], [data-wh-shell])[data-wh-announcement-layout="below"] .topbar.sidebar-collapsed { grid-template-rows: var(--wh-topbar-height) var(--wh-announcement-row-height); height: var(--wh-shell-header-height) !important; padding-block: 0; }
html:is([data-wast-ui], [data-wh-shell])[data-wh-announcement-layout="below"] :is(#sidebar, #topbar) .topbar-right { grid-column: 1; grid-row: 1; }
html:is([data-wast-ui], [data-wh-shell])[data-wh-announcement-layout="below"] :is(#sidebar, #topbar) .topbar-left { grid-column: 3; grid-row: 1; }
html:is([data-wast-ui], [data-wh-shell])[data-wh-announcement-layout="below"] :is(#sidebar, #topbar) .topbar-center { grid-column: 1 / -1; grid-row: 2; align-self: start; width: 100%; height: var(--wh-control-height-compact); }
/* Shell-only pages retain legacy content styles and typography. */
html[data-wh-shell]:not([data-wast-ui]) :is(#sidebar, #topbar, #footer),
html[data-wh-shell]:not([data-wast-ui]) :is(#sidebar, #topbar, #footer) * { box-sizing: border-box; }
html[data-wh-shell] :is(#sidebar, #topbar, #footer) { font-family: var(--wh-font-family-body); }
html[data-wh-shell] .main-content { margin: 0 !important; padding: 0 !important; }
html[data-wh-shell] .main-content > .page-content { min-width: 0; overflow-x: clip; }

/* The navigation itself is fixed, so the shell must reserve its width only once.
   A grid column plus a fixed sidebar produced a second empty rail on the opposite side. */
@media (min-width: 56.01rem) {
  html:is([data-wast-ui], [data-wh-shell]) .app-wrapper { display: block; }
  html:is([data-wast-ui], [data-wh-shell]) .main-content,
  html:is([data-wast-ui], [data-wh-shell]) .main-content.sidebar-collapsed {
    inline-size: calc(100% - var(--wh-sidebar-width));
    margin-inline-start: var(--wh-sidebar-width) !important;
  }
  html:is([data-wast-ui], [data-wh-shell]) .app-wrapper[data-wh-sidebar="collapsed"] .main-content,
  html:is([data-wast-ui], [data-wh-shell]) .app-wrapper[data-wh-sidebar="collapsed"] .main-content.sidebar-collapsed {
    inline-size: calc(100% - var(--wh-sidebar-width-collapsed));
    margin-inline-start: var(--wh-sidebar-width-collapsed) !important;
  }
}
html[data-wh-shell] #footer { position: static; width: auto; margin: 0; }

@media print {
  html:is([data-wast-ui], [data-wh-shell]) :is(#sidebar, #topbar, #footer, [data-wh-toast-region]) { display: none !important; }
}