/* Dr Deen Spine Care — final Chrome/mobile usability layer — 2026-10-12
   Screen-only overrides. Desktop and print remain unchanged. */
@media screen and (max-width: 900px){
  html{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{width:100%;max-width:100vw;min-width:0!important;overflow-x:hidden!important;margin-left:0!important;margin-right:0!important}
  *,*::before,*::after{box-sizing:border-box}
  img,video,canvas,svg,iframe{max-width:100%;height:auto}
  iframe{width:100%}
  .wrap,.container,.adminwrap,.main,.main-panel,.pagebody,.pagecard,.content,.content-wrap,.topin,.top-inner,.hospital-wrap{max-width:100%!important;min-width:0!important}
  .wrap,.adminwrap,.main,.main-panel,.content,.content-wrap{padding-left:10px!important;padding-right:10px!important}

  /* Chrome mobile: 16px controls prevent unwanted zoom; 44px gives touch targets. */
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important;max-width:100%!important;min-width:0!important}
  button,.btn,input[type="submit"],input[type="button"],input[type="reset"],a.button{min-height:44px;touch-action:manipulation}
  textarea{min-height:88px}

  /* Generic grid/flex layouts: stack cleanly on phones. */
  .grid,.grid2,.grid3,.row,.row2,.fields,.filter,.searchbar,.toolbar,.settings,.stats,.kpis,.cards,.reports,
  .branch-control-grid,.admin-doctor-grid,.md-form-grid,.tvpart-grid,.account-report-actions,.queue-hero{
    min-width:0!important;
  }
  .grid,.grid2,.grid3,.fields,.branch-control-grid,.admin-doctor-grid,.md-form-grid,.tvpart-grid{grid-template-columns:1fr!important}
  .filter,.searchbar{grid-template-columns:1fr!important;gap:8px!important}
  .toolbar,.top-actions,.actions,.admin-doctor-actions,.tvpart-actions{flex-wrap:wrap!important}
  .toolbar>* ,.top-actions>* ,.admin-doctor-actions>* ,.tvpart-actions>*{max-width:100%}

  /* Cards/panels should never force desktop width. */
  .card,.panel,.kpi,.box,.pagecard,.hero,.notice,.info,.current-banner,.reportbox,.dangerzone{max-width:100%!important;min-width:0!important}
  .card,.panel{overflow-wrap:anywhere}

  /* Tables: keep columns readable and allow finger scrolling rather than shrinking text. */
  .scroll,.table-responsive,.table-wrap,.history-table,.dataTables_wrapper,.dataTables_scrollBody{
    width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain
  }
  table{max-width:none!important}
  .scroll table,.table-responsive table,.table-wrap table,.history-table table{min-width:720px}
  th,td{vertical-align:middle}

  /* Admin top bars and generic headers */
  .bar .wrap,.top .wrap,.head,.page-head{gap:8px!important;flex-wrap:wrap!important}
  .bar .links,.links{display:flex!important;max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch;gap:6px!important;padding-bottom:3px}
  .bar .links a,.links a{flex:0 0 auto;white-space:nowrap}
  .head .right{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .head .right a,.head .right button,.save{width:100%!important}

  /* Central control / side-navigation style dashboards */
  .shell,.app-shell{min-width:0!important}
  .shell{grid-template-columns:1fr!important}
  .shell .side{position:fixed!important;left:0;top:0;bottom:0;width:min(86vw,310px)!important;max-width:310px;transform:translateX(-105%);z-index:4000;overflow-y:auto;transition:transform .2s ease}
  .shell.sidebar-open .side,.shell.menu-open .side,.shell .side.open{transform:translateX(0)}
  .shell .main{width:100%!important;min-width:0!important;padding:10px!important}
  .menu-btn{display:inline-flex!important;align-items:center;justify-content:center;min-width:44px;min-height:44px}

  /* Reception: horizontal nav rail + single-column work area. Existing JS remains unchanged. */
  body .app-shell{grid-template-columns:1fr!important;width:100%!important}
  body .side-menu{position:static!important;width:100%!important;height:auto!important;max-height:none!important;padding:6px 8px!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important}
  body .side-menu .side-brand,body .side-menu .sidebar-toggle{display:none!important}
  body .side-menu nav{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;width:max-content;min-width:100%;padding:0!important}
  body .side-menu nav a{flex:0 0 auto!important;min-height:42px!important;padding:8px 10px!important;white-space:nowrap!important;justify-content:center!important}
  body .side-menu nav .nav-label{display:inline!important}
  body .main-panel{width:100%!important;min-width:0!important}
  body .main-panel .wrap{padding:9px!important}
  .reception-summary,.mini,.handover-mini{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .filter{display:grid!important;grid-template-columns:1fr!important}
  .filter>*,.filter label,.filter input,.filter select,.filter button{width:100%!important}
  .slot-grid,.slots,.slotwrap{max-width:100%!important}
  .row-actions,.compact-actions{flex-wrap:wrap!important}
  .row-actions a,.row-actions button,.compact-actions a,.compact-actions button{min-height:38px!important}
  .handover-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:7px!important}
  .handover-actions>*{width:100%!important}

  /* Doctor panel: keep the important action buttons visible on narrow Chrome screens. */
  .doctor-panel-page .top{height:auto!important;min-height:58px!important;padding:6px 0!important}
  .doctor-panel-page .top-inner{width:100%!important;min-width:0!important;padding:0 8px!important;display:flex!important;flex-wrap:wrap!important}
  .doctor-panel-page .top-brand{flex:1 1 150px!important;max-width:calc(100vw - 70px)!important}
  .doctor-panel-page .top-actions{order:3;width:100%!important;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;padding:2px 0 3px!important}
  .doctor-panel-page .top-actions a,.doctor-panel-page .top-actions button{flex:0 0 auto!important;min-height:42px!important;white-space:nowrap!important}
  .doctor-panel-page .main{width:100%!important;min-width:0!important;padding:9px!important}
  .doctor-panel-page .cards,.doctor-panel-page .grid,.doctor-panel-page .row,.doctor-panel-page .reports,.doctor-panel-page .accounts-grid{grid-template-columns:1fr!important}
  .doctor-panel-page .queue-actions,.doctor-panel-page .action-inline{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .doctor-panel-page .queue-actions>* ,.doctor-panel-page .action-inline>*{width:100%!important}
  .doctor-panel-page .sidebar{width:min(88vw,310px)!important;max-width:310px!important}

  /* Queue control: rows become readable cards; action buttons wrap underneath. */
  .queue{display:grid!important;gap:9px!important}
  .qrow{grid-template-columns:52px minmax(0,1fr)!important;gap:7px!important;padding:10px!important}
  .qrow .time,.qrow .status,.qrow .actions{grid-column:2!important}
  .qrow .actions{display:flex!important;flex-wrap:wrap!important;gap:6px!important}
  .qrow .actions form,.qrow .actions .moveform{flex:1 1 120px!important;min-width:0!important}
  .qrow .actions button,.qrow .actions .btn{width:100%!important}
  .available{grid-template-columns:1fr!important}

  /* Public site/dropdowns. */
  .public-feature-menu .public-feature-pop,.staff-login-menu.branch-login .staff-login-pop{
    position:fixed!important;left:10px!important;right:10px!important;top:72px!important;transform:none!important;width:auto!important;max-height:72vh!important;overflow-y:auto!important
  }
  .public-feature-menu .public-feature-pop:before{display:none}
  .dm-quick-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .dm-quick-btn{width:100%!important;min-width:0!important}

  /* Login pages */
  .login-shell,.login-card,.login-box{width:calc(100% - 18px)!important;max-width:480px!important;margin-left:auto!important;margin-right:auto!important}

  /* Long text / codes should wrap instead of widening the viewport. */
  pre,code,.code,.muted,.note,.control-hint,.subnote{overflow-wrap:anywhere;word-break:break-word}
}

@media screen and (max-width: 520px){
  .wrap,.adminwrap,.main,.main-panel,.content,.content-wrap{padding-left:8px!important;padding-right:8px!important}
  h1{font-size:clamp(21px,7vw,28px)!important;line-height:1.2!important}
  h2{font-size:clamp(18px,6vw,24px)!important;line-height:1.25!important}
  .reception-summary,.mini,.handover-mini,.cards,.stats,.kpis,.reports{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .reception-summary .sbox,.kpi,.stat{padding:10px!important}
  .side-menu nav a{font-size:12px!important}
  .doctor-panel-page .top-actions a,.doctor-panel-page .top-actions button{font-size:12px!important;padding:8px 10px!important}
  .qrow{grid-template-columns:44px minmax(0,1fr)!important}
}

@media screen and (max-width: 360px){
  .reception-summary,.mini,.handover-mini,.cards,.stats,.kpis,.reports{grid-template-columns:1fr!important}
}

@media print{
  /* Never let mobile screen overrides alter A4/A5/receipt printing. */
  html,body{overflow:visible!important;max-width:none!important}
}