@media(max-width:680px){
 html{scroll-padding-top:76px}
 body{font-size:13px;background:#f4f7f9}
 body.auth-locked{overflow:hidden}
 input,select,textarea{font-size:16px}
 button,.primary,.secondary{min-height:44px}

 .sidebar{
  position:fixed;
  inset:auto 0 0 0;
  width:auto;
  height:78px;
  max-height:78px;
  display:block;
  padding:7px 8px max(7px,env(safe-area-inset-bottom));
  overflow-x:auto;
  overflow-y:hidden;
  border-top:1px solid #244963;
  box-shadow:0 -8px 28px rgba(12,41,61,.22);
  scrollbar-width:none;
 }
 .sidebar::-webkit-scrollbar{display:none}
 .sidebar .brand,.sidebar-bottom{display:none!important}
 .sidebar nav{display:flex;gap:6px;min-width:max-content}
 .nav-item{
  flex:0 0 96px;
  min-height:56px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-content:center;
  align-items:center;
  gap:5px 7px;
  padding:8px;
  border-radius:9px;
  color:#d3e5ee;
  font-size:9px;
  line-height:1.1;
  white-space:normal;
 }
 .nav-item span{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#173f5f;
  color:#9fd5f0;
  font-size:8px;
 }
 .nav-item.active span{background:#fff;color:#176ca4}

 main{margin-left:0!important;padding-top:64px;padding-bottom:96px}
 .topbar,#bms-topbar{
  left:0!important;
  right:0!important;
  min-height:64px;
  gap:6px;
  padding:8px 10px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
 }
 .topbar .search,#bms-topbar .search,.topbar .current-user-pill,#bms-topbar .current-user-pill,.process-nav{display:none!important}
 .top-actions,#bms-topbar .bms-workspace-actions,#bms-topbar .bms-nav-actions{gap:6px;min-width:max-content}
 .topbar button,#bms-topbar button{padding:8px 10px;border-radius:8px;font-size:10px}
 #new-booking,#bms-topbar #new-booking{background:#176ca4;color:#fff;border-color:#176ca4}

 .view{min-height:calc(100dvh - 142px);padding:18px 10px 110px}
 .page-heading{display:grid;gap:10px;margin-bottom:16px}
 .page-heading h1{font-size:22px;line-height:1.15}
 .page-heading p{font-size:11px;line-height:1.45}
 .heading-actions,.top-actions,.modal-actions{display:flex;flex-wrap:wrap}
 .heading-actions>button,.modal-actions>button{flex:1 1 140px}
 .panel,.metrics article,.intel-card,.courtesy-card{border-radius:8px}
 .metrics,.dashboard-grid,.comms-grid,.intel-grid,.courtesy-grid,.settings-layout,.form-row{grid-template-columns:1fr!important}
 .panel-head{display:grid;gap:8px;padding:14px}
 .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
 table{min-width:640px}

 .login-screen{padding:14px}
 .login-card{padding:22px 18px}
 .login-logo{width:min(240px,82vw);margin-bottom:18px}
 .login-card h1{font-size:24px;line-height:1.12}
 .login-intro{font-size:12px}
 .demo-logins button{flex:1 1 120px;min-height:40px}

 .call-view{min-height:calc(100dvh - 142px)}
 .call-top{display:grid;gap:10px}
 .call-clock{width:max-content}
 .call-layout{grid-template-columns:1fr!important}
 .call-record,.call-notes,.question-stage{padding:14px;border-radius:8px}
 .question-stage{min-height:0}
 .question-content{padding:22px 16px}
 .question-content h2{font-size:20px}
 .answer-options{grid-template-columns:1fr}
 .answer-option,.confirm-answer{min-height:48px}
 .flow-actions{gap:8px;padding:12px}
 .flow-actions button{flex:1}

 dialog[open]{
  top:70px;
  width:calc(100% - 12px);
  max-height:calc(100dvh - 154px);
 }
 dialog form{padding:16px;max-height:calc(100dvh - 154px)}
 #toast{
  right:10px;
  bottom:calc(92px + env(safe-area-inset-bottom));
  max-width:calc(100vw - 20px);
 }
 .pwa-update-banner{
  bottom:calc(92px + env(safe-area-inset-bottom));
 }
 .pwa-install-helper{
  bottom:calc(164px + env(safe-area-inset-bottom));
 }
}

@media (display-mode: standalone) and (max-width:680px){
 main{padding-top:calc(64px + env(safe-area-inset-top))}
 .topbar,#bms-topbar{padding-top:max(8px,env(safe-area-inset-top));min-height:calc(64px + env(safe-area-inset-top))}
}