/* Phone layout for the staff dashboard (public/index.html). Everything below 760px wide;
   desktop is untouched. The sidebar becomes a slide-out menu opened by #mobile-nav-btn
   (public/mobile.js). Loaded after the inline <style> so equal-specificity rules win. */
.nav-toggle,.nav-backdrop,.sb-mobile-actions{display:none}

@media (max-width:760px){
  .shell{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;height:100vh;height:100dvh}

  /* Top bar: menu button + logo + the controls that matter on a phone. */
  .topbar{gap:8px;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top,0px));min-width:0}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:6px 10px;font-size:17px;line-height:1;color:var(--txt)}
  body.hal-mode .nav-toggle,body.ops-fill .nav-toggle,body.client-shell .nav-toggle{display:none}
  .brand{gap:8px;flex-shrink:0}
  .brand-logo{height:16px}
  .brand-sep,.brand-app,.ts,#user-lbl,#reload-cfg-btn{display:none !important}
  .tv-status{padding:6px;flex-shrink:0}
  #tv-lbl{display:none}
  .topbar-r{gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
  .topbar-r::-webkit-scrollbar{display:none}
  .topbar .btn{padding:6px 9px;white-space:nowrap;flex-shrink:0}
  .mode-nav{flex-shrink:0}
  .mode-btn{white-space:nowrap;padding:6px 8px;font-size:11.5px}
  /* Settings, theme, Reload Config and Log out move to the bottom of the slide-out menu. */
  #settings-btn,#theme-toggle-btn,#logout-btn{display:none !important}
  .sb-mobile-actions{display:flex;flex-wrap:wrap;gap:8px;padding:4px 10px 6px}
  .sb-mobile-actions .btn{flex:1 1 calc(50% - 4px);padding:10px 12px}
  .sb-mobile-actions [hidden]{display:none}

  /* Sidebar slides in over the page. Fixed elements leave the grid, so #main takes row 3. */
  .sidebar{position:fixed;top:0;bottom:0;left:0;width:min(84vw,300px);z-index:1001;
    padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
    transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.5);overscroll-behavior:contain}
  body.nav-open .sidebar{transform:none}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:1000;background:rgba(4,6,10,.55);opacity:0;pointer-events:none;transition:opacity .2s ease}
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
  .sb-item,.sb-group-hdr{padding-top:11px;padding-bottom:11px}

  .filter-bar{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .flt-group{flex-wrap:wrap;min-width:0}
  .multi{min-width:0;width:100%}
  .multi-panel{max-width:calc(100vw - 24px)}

  /* Content: tighter gutters; anything wider than the screen scrolls inside #main. */
  .main{padding:16px 12px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch}
  .landing{margin:24px auto;padding:16px}
  .landing-logo{max-width:100%;height:auto}
  .sum-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-grid{grid-template-columns:1fr}

  /* 16px inputs stop iOS from zooming the page when a field gets focus. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{font-size:16px}

  /* Reporting filters (Invoice Details, Summary, CB rate): one field per row instead of a wide
     grid that pushed Companies / Status / Run report off the right edge. */
  .rep-filter .rep-row[class*="row-"]{grid-template-columns:1fr !important}
  .rep-filter .rep-daterange input[type="date"]{flex:1 1 0;width:auto;min-width:0}
  /* Company tree dropdowns: fit the screen instead of a fixed 340px panel. */
  [id$="-dd-company-wrap"] > div{min-width:0 !important;width:calc(100vw - 48px);max-width:420px}
  .rep-filter [id$="-dd-company-wrap"] > div{width:100%;max-width:none}
  .login-card{width:auto;max-width:calc(100vw - 32px);padding:26px 22px}
  .toast{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}

@media (prefers-reduced-motion:reduce){
  .sidebar,.nav-backdrop{transition:none}
}