/* Desktop keeps the original u27 geometry. Small screens use a focused drawer. */
.mobile-menu-toggle,.nav-drawer-close,.nav-backdrop{display:none}
.main,.content,.tablewrap{min-width:0}

@media(max-width:1050px){
  .titlebar{flex-wrap:wrap}
  .titlebar .tools{max-width:100%}
  .modalhead h2{overflow-wrap:anywhere;min-width:0}
}

@media(max-width:760px){
  body{min-width:320px}
  body.nav-open{overflow:hidden}
  .shell{display:block}
  .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;flex:0 0 auto}
  header{gap:8px;flex-wrap:wrap;padding:8px}
  header .crumb{display:none}
  header .tools{flex:1;justify-content:flex-end;gap:6px}
  header .tools button{min-height:40px;padding:7px 10px;font-size:12px}
  #syncstatus{order:5;flex-basis:100%;text-align:right;white-space:normal;overflow-wrap:anywhere}
  #current-user{font-size:12px;overflow-wrap:anywhere;max-width:100px}
  #main-sidebar{
    display:flex;position:fixed;inset:0 auto 0 0;width:min(290px,85vw);
    height:100vh;height:100dvh;padding:12px 16px;overflow:auto;
    z-index:4001;transform:translateX(-100%);visibility:hidden;
    transition:transform .18s ease,visibility .18s;
  }
  body.nav-open #main-sidebar{transform:translateX(0);visibility:visible}
  .nav-drawer-close{display:block;order:-1;min-height:44px;align-self:flex-end;margin-bottom:16px}
  body.nav-open .nav-backdrop{
    display:block;position:fixed;inset:0;width:100%;height:100%;padding:0;
    z-index:4000;border:0;border-radius:0;background:#193d3480;
  }
  #main-sidebar nav{display:grid;overflow:visible}
  #main-sidebar nav button{min-height:46px;width:100%;font-size:15px;padding:10px 8px;white-space:normal}
  #main-sidebar nav button .nav-icon{font-size:23px;width:24px}
  #main-sidebar nav button .nav-chevron{display:block}
  #main-sidebar .staff-submenu{max-height:none;overflow:visible}
  #main-sidebar .brand{display:flex;min-height:60px;padding:22px 4px 8px}
  #main-sidebar #mini-calendar{display:block}
  #main-sidebar .mini-grid,#main-sidebar .mini-days{display:grid}
  #main-sidebar .month-title{display:flex}
  #main-sidebar .mini-grid button{min-height:36px}
  .content{padding:18px 12px}
  .schedule-page .content{padding:0 8px 14px}
  .schedule-toolbar{gap:8px}
  .schedule-toolbar .tools{gap:6px;max-width:100%}
  .schedule-toolbar button,.schedule-toolbar select,.schedule-toolbar input{min-height:40px}
  .schedule-toolbar select{max-width:100%}
  .room-calendar{max-width:100%;height:65vh;min-height:320px}
  .titlebar{gap:12px}
  .titlebar .tools{width:100%}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{min-width:0;padding:12px;overflow-wrap:anywhere}
  .stat strong{font-size:22px}
  .tablewrap{max-width:100%;overscroll-behavior-x:contain}
  .tablewrap table{min-width:560px}
  dialog{width:calc(100% - 16px);max-width:calc(100% - 16px);max-height:94vh;max-height:94dvh;margin:auto}
  .modalhead{padding:12px;gap:8px;flex-wrap:wrap}
  .modalhead h2{flex:1;min-width:0;font-size:17px;margin:0}
  .modalhead button{min-height:44px;flex-shrink:0}
  .modalbody{padding:16px;max-height:76vh;max-height:76dvh}
  .modalbody .formgrid{grid-template-columns:minmax(0,1fr)}
  .modalbody .rowedit .field{min-width:0;flex-basis:100%}
  .modalbody input:not([type=checkbox]),.modalbody select,.modalbody textarea{font-size:16px;min-height:44px;width:100%}
  .modalbody .actions button,.titlebar button{min-height:44px}
  label.field{font-size:13px}
  .actions{gap:8px}
  .client-suggestions{top:100%;max-height:min(230px,40vh)}
  .client-suggestions button{min-height:44px;font-size:15px}
}

@media(prefers-reduced-motion:reduce){
  #main-sidebar{transition:none}
}