/* Layout hardening layer: loaded after the main styles so it can safely fix
   viewport, overflow and stacking edge cases without changing the visual theme. */
:root{
  --ui-layer-sticky:20;
  --ui-layer-nav:40;
  --ui-layer-toast:60;
}
html{min-width:320px;scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:0}
.layout,.main,.topline,.top-actions,.toolbar,.panel,.panel-head,.panel-head>div,.table-scroll,#view,.field{min-width:0}
.sidebar{height:100dvh;overscroll-behavior:contain}
.top-actions{min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.top-actions button{white-space:nowrap;min-height:40px}
.panel,.schedule-panel{isolation:isolate}
.schedule-panel .schedule-desktop{position:relative;max-width:100%;isolation:isolate;overscroll-behavior:contain}
.schedule-panel table.schedule thead th{z-index:var(--ui-layer-sticky);background-clip:padding-box}
.schedule-panel table.schedule tbody th{z-index:calc(var(--ui-layer-sticky) - 5);background:#fff;background-clip:padding-box}
.schedule-panel table.schedule thead th:first-child{z-index:calc(var(--ui-layer-sticky) + 5)}
.event.is-live{z-index:auto}
.table-scroll{max-width:100%;scrollbar-gutter:stable}
dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:hidden}
dialog .dialog-head{z-index:3;flex:none}
dialog .dialog-body{max-height:calc(100dvh - 84px);overflow:auto;overscroll-behavior:contain}
.toast{z-index:var(--ui-layer-toast);pointer-events:none}
img,iframe{max-width:100%}

@media(max-width:900px){
  body{overflow-wrap:anywhere}
  .sidebar{height:auto;overflow:visible}
  .nav-list{z-index:var(--ui-layer-nav)}
  .topline{flex-wrap:wrap;align-items:flex-start}
  .topline>div:first-child{flex:1 1 13rem;min-width:0}
  .top-actions{flex:0 1 auto;max-width:100%;gap:6px}
  .toolbar,.filter-fields,.week-control,.weekstrip,.stats{min-width:0}
  .day-btn{min-width:0}
  .panel-head{align-items:flex-start}
  .panel-actions{min-width:0;flex-wrap:wrap;justify-content:flex-end}
  .mobile-room-header,.room-label-stack,.mobile-agenda,.mobile-day-details{min-width:0}
  .mobile-room-header>*{min-width:0}
  dialog{width:min(710px,calc(100vw - 16px));max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  dialog .dialog-body{max-height:calc(100dvh - 74px)}
}

@media(max-width:520px){
  .main{padding-left:10px;padding-right:10px}
  .topline>div:first-child{flex-basis:100%}
  .top-actions{width:100%;justify-content:flex-start}
  .top-actions button{flex:1 1 auto;min-width:0}
  .weekstrip{gap:1px}
  .day-btn{padding-left:0;padding-right:0}
  .stats{gap:7px}
  .panel{border-radius:12px}
  .panel-head,.legend{padding-left:12px;padding-right:12px}
  .mobile-schedule{padding-left:10px;padding-right:10px}
}

@media(max-width:360px){
  html{min-width:280px}
  .top-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .top-actions button{width:100%;padding-left:5px;padding-right:5px}
  .stat{min-width:0}
  .stat strong{font-size:1.3rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

@media print{
  html{min-width:0;scrollbar-gutter:auto}
  .sidebar{height:auto}
  .schedule-panel .schedule-desktop{overflow:visible;max-height:none}
}