/* =========================================================================
   delivery.wheelder.com — mobile-first responsive layer (additive, global)
   ------------------------------------------------------------------------
   The app is Bootstrap-based but desktop-built: a fixed 260px sidebar plus
   an inline style="margin-left:260px" on <main> pushed content off-screen on
   phones/tablets, and wide data tables blew out the layout. This layer fixes
   those on small screens WITHOUT touching desktop (>=992px stays identical).
   Injected on every page via the delivery vhost, so it applies app-wide.
   ========================================================================= */

/* --- never allow sideways scrolling of the whole page on a phone --- */
html, body { max-width: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas, iframe, embed, object { max-width: 100%; height: auto; }

/* --- app-shell: collapse ONLY the /dashboard Bootstrap-grid light sidebar column
       (NOT the employee `.modern-sidebar`, which is a fixed off-canvas drawer with
       its own toggle — un-pinning that would break the drawer). --- */
@media (max-width: 991.98px) {
  nav.sidebar.bg-light, .col-md-3.sidebar, .col-lg-2.sidebar {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
  nav.sidebar.bg-light .position-sticky { position: static !important; height: auto !important; }
  /* content no longer needs to clear a fixed sidebar — zero every left margin,
     including the inline style="margin-left:260px" on <main> */
  .main-content, .content-wrapper, .dashboard-content, .page-content,
  main.col-md-9, main.col-lg-10, main[style*="margin-left"] {
    margin-left: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* any element hard-coded to the sidebar width shouldn't force a scrollbar */
  [style*="width: 260px"], [style*="width:260px"] { width: 100% !important; }
  /* marketing top-navbar actions wrap instead of overflowing */
  .navbar .container-fluid { flex-wrap: wrap; }
}

/* --- wide data tables: scroll horizontally inside their own box --- */
@media (max-width: 991.98px) {
  .table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* --- touch-friendly targets + graceful stacking on phones --- */
@media (max-width: 767.98px) {
  .btn, .nav-link, .dropdown-item, .form-control, .form-select { min-height: 42px; }
  .btn-sm { min-height: 34px; }
  /* button rows / inline flex groups wrap rather than overflow */
  .d-flex.gap-2, .btn-group, .btn-toolbar { flex-wrap: wrap; }
  /* keep large display headings from overflowing narrow screens */
  h1, .h1 { font-size: 1.6rem; }
  h2, .h2 { font-size: 1.35rem; }
  .display-1, .display-2, .display-3, .display-4 { font-size: 2rem; }
  /* stat/number tiles read better stacked and full-width */
  .card { margin-bottom: 1rem; }
}

/* --- modals / offcanvas fit small screens --- */
@media (max-width: 575.98px) {
  .modal-dialog { margin: 0.5rem; }
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
}