/* Separate staff actions from room status while keeping every panel in view. */
#app #dashboard.active{display:flex;flex-direction:column;gap:12px}
#app #dashboard>.cards{flex:none;margin:0!important}
#app #dashboard #dashboardWorkspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"actions actions" "rooms departures";grid-template-rows:auto minmax(0,1fr);gap:12px!important;height:auto;min-width:0}
#app #dashboard #dashboardWorkspace>.panel{padding:14px 16px!important;min-width:0;min-height:0}
#app #dashboard #dashboardWorkspace h3{margin:0 0 12px;font-size:1.1rem;line-height:1.5}
#app #dashboardActionsPanel{grid-area:actions}
#app #dashboardRoomsPanel{grid-area:rooms;display:flex;flex-direction:column}
#app #dashboardDeparturesPanel{grid-area:departures;display:flex;flex-direction:column}
#app #dashboard .dashboard-actions{display:flex;align-items:center;flex-wrap:nowrap;gap:10px;overflow-x:auto;padding-bottom:4px}
#app #dashboard .dashboard-actions .btn{min-height:44px;padding:8px 14px;font-size:.9375rem;flex:0 0 auto;max-width:none;white-space:nowrap}
#app #dashboardActionsPanel:not(:has(.btn:not(.hidden))){display:none}
#app #dashboard #dashboardWorkspace:not(:has(#dashboardActionsPanel .btn:not(.hidden))){grid-template-areas:"rooms departures";grid-template-rows:minmax(0,1fr)}
#app #dashboardRoomsPanel .dashboard-room-heading{margin-bottom:0;flex:none}
#app #dashboard #roomSummary{min-height:0;flex:1}
#app #dashboard #roomSummary .summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:0!important}
#app #dashboard #roomSummary .summary-state{min-width:0;padding:10px!important}
#app #dashboard #roomSummary .summary-state small{font-size:.875rem;line-height:1.5}
#app #dashboard #departures{min-height:0;overflow:auto;scrollbar-width:none;scrollbar-gutter:auto}
#app #dashboard #departures .departure{padding:6px 0!important;font-size:.9375rem;line-height:1.5;gap:2px 8px}
#app #dashboard #departures .departure b{min-width:0;overflow-wrap:anywhere}
#app #dashboard #departures .departure .departure-room{white-space:nowrap;text-align:left}
#app #dashboard #departures .departure small{grid-column:2;font-size:.875rem;text-align:left;white-space:nowrap}
#app #dashboard #departures .departure:last-child{border-bottom:0}
#app #dashboard #dashboardNoticeGrid:not(:has(>:not(.hidden))){display:none!important}
/* Include the document and sidebar scroll containers, not only the content area.
   Preserve touch, wheel and keyboard access on small or zoomed screens. */
html:has(#app:not(.hidden) #dashboard.active),
body:has(#app:not(.hidden) #dashboard.active),
#app:not(.hidden):has(#dashboard.active),
#app:not(.hidden):has(#dashboard.active) :is(.main,.content,.side,.nav),
#app:not(.hidden) #dashboard.active,
#app:not(.hidden) #dashboard.active :is(.panel,#dashboardNoticeGrid,#departures,#roomSummary){scrollbar-width:none!important;scrollbar-gutter:auto!important}
html:has(#app:not(.hidden) #dashboard.active)::-webkit-scrollbar,
body:has(#app:not(.hidden) #dashboard.active)::-webkit-scrollbar,
#app:not(.hidden):has(#dashboard.active)::-webkit-scrollbar,
#app:not(.hidden):has(#dashboard.active) :is(.main,.content,.side,.nav)::-webkit-scrollbar,
#app:not(.hidden) #dashboard.active::-webkit-scrollbar,
#app:not(.hidden) #dashboard.active :is(.panel,#dashboardNoticeGrid,#departures,#roomSummary)::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}

@media screen and (min-width:981px){
  body:has(#app:not(.hidden) #dashboard.active){height:100vh;height:100dvh;overflow:hidden}
  #app:has(#dashboard.active){height:100vh;height:100dvh;min-height:0;overflow:hidden}
  #app:has(#dashboard.active)>.main{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  #app:has(#dashboard.active)>.main>.top{flex:none}
  #app .content:has(#dashboard.active){flex:1;min-height:0;height:auto;width:100%;margin:0 auto;padding:10px 16px;overflow:hidden}
  #app #dashboard.active{height:100%;min-height:0}
  #app #dashboard #dashboardWorkspace{flex:1;min-height:0}
  #app #dashboard #dashboardWorkspace>.panel{padding:12px 14px!important}
  #app #dashboard #dashboardWorkspace h3{margin-bottom:8px}
  #app #dashboard>.cards .card{min-height:76px;padding:8px 14px!important}
  #app #dashboard #dashboardNoticeGrid{flex:none;max-height:min(24dvh,180px);overflow:auto;margin:0!important}
  #app #dashboard #dashboardRoomsPanel{overflow:hidden}
  #app #dashboard #roomSummary{overflow:auto}
  #app #dashboard #roomSummary .summary-grid{align-content:center;height:100%;grid-auto-rows:minmax(64px,1fr);gap:8px!important}
  #app #dashboard #roomSummary .summary-state{display:grid;grid-template-columns:1fr 1fr;align-content:center;align-items:center;padding:6px 8px!important}
  #app #dashboard #roomSummary .summary-state span{text-align:left;padding-inline-end:6px}
  #app #dashboard #roomSummary .summary-state b{text-align:right;padding-inline-start:6px}
  #app #dashboard #roomSummary .summary-state small{grid-column:1/-1}
  #app #dashboard #dashboardDeparturesPanel{overflow:hidden}
  #app #dashboard #dashboardDeparturesPanel>h3{flex:none}
  #app #dashboard #departures{flex:1}
}
@media screen and (min-width:981px) and (max-height:720px){
  #app #dashboard.active{gap:8px}
  #app #dashboard #dashboardWorkspace{gap:8px!important}
  #app #dashboard #dashboardWorkspace>.panel{padding:8px 12px!important}
  #app #dashboard .dashboard-actions .btn{min-height:38px;padding:6px 12px}
  #app #dashboard #departures .departure{padding:4px 0!important}
}
@media screen and (max-width:980px){
  #app #dashboard #dashboardWorkspace{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"actions" "rooms" "departures";grid-template-rows:auto auto auto}
  #app #dashboard #dashboardWorkspace:not(:has(#dashboardActionsPanel .btn:not(.hidden))){grid-template-areas:"rooms" "departures";grid-template-rows:auto auto}
  #app #dashboard #departures{overflow:visible}
}
@media screen and (max-width:620px){
  #app #dashboard #roomSummary .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media print{
  #app #dashboardActionsPanel{display:none}
  #app #dashboard #dashboardWorkspace{display:block}
  #app #dashboard #departures{overflow:visible}
}