/**
 * Mobile responsiveness (global)
 * - Slide-in sidebar on small screens
 * - Reduce padding in containers
 * - Make tables/datatable wrappers scrollable
 *
 * Keep this file small and high-impact; page-specific fixes should live near the page styles.
 */

@media (max-width: 991.98px) {
  /* ---- Sidebar as drawer ---- */
  #sidenav-main.tempes-sidebar-tabler {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1045; /* above header (bootstrap modal backdrop is 1050) */
    max-width: min(var(--tempes-sidebar-width), calc(100vw - 3rem)) !important;
    width: min(var(--tempes-sidebar-width), calc(100vw - 3rem)) !important;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
  }

  /* When open (toggled via JS) */
  body.tempes-sidebar-open #sidenav-main.tempes-sidebar-tabler {
    transform: translateX(0);
  }

  /* Backdrop */
  body.tempes-sidebar-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
  }

  /* Prevent page from sliding under the drawer */
  .page-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Make sure the top bar stays clickable */
  header.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
  }

  /* ---- Topbar mobile menu button (bigger tap target) ---- */
  #tempes-mobile-sidebar-toggle {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
  }

  #tempes-mobile-sidebar-toggle .bi {
    font-size: 1.35rem;
    line-height: 1;
  }

  /* ---- Spacing ---- */
  .container-xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* ---- Tables / DataTables ---- */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce filter/length controls wrapping chaos */
  .dataTables_wrapper .row {
    padding: 0.5rem 0.75rem !important;
  }
}