/* ── Mobile utility classes ──────────────────────────────────────────────────
   Add these to HTML elements directly instead of writing per-page media queries.
   mob-show / mob-show-flex: hidden on desktop, visible on mobile.
   mob-hide: visible on desktop, hidden on mobile.
─────────────────────────────────────────────────────────────────────────── */
.mob-show      { display: none; }
.mob-show-flex { display: none; }

@media (max-width: 1025px) {
  /* Visibility */
  .mob-hide        { display: none !important; }
  .mob-show        { display: block !important; }
  .mob-show-flex   { display: flex !important; }

  .no-scroll,
  body.h-100.no-scroll { overflow: hidden !important; }

  /* Sidebar search bar — hidden on mobile, navigation is the focus */
  .main-sidebar__search { display: none !important; }

  /* Modals must stack above the sidebar overlay (z-index: 1060).
     Bootstrap 5 defaults are backdrop: 1050, modal: 1055 — both below the
     overlay, which blocks all touches on iOS Safari. Push them above it. */
  .modal-backdrop { z-index: 1061 !important; }
  .modal          { z-index: 1062 !important; }

  /* Layout */
  .mob-full-w      { width: 100% !important; max-width: 100% !important; }
  .mob-w-auto      { width: auto !important; align-self: flex-start; margin-left: 12px !important; }
  .mob-stack       { flex-direction: column !important; }
  .mob-center      { text-align: center !important; justify-content: center !important; }
  .mob-left        { margin-left: 0 !important; justify-content: flex-start !important; text-align: left !important; }
  .mob-min-w-0     { min-width: 0; flex: 1 1 auto; }
  .mob-nowrap      { white-space: nowrap !important; }
  .mob-self-end    { align-self: flex-end !important; }
  .mob-self-start  { align-self: flex-start !important; }

  /* Card / container — 96 % viewport width, centred; works from small iPhones to wide iPads.
     Use on standalone cards NOT inside a Bootstrap column — inside a column, reduce padding instead. */
  .mob-card-w      { width: 96vw !important; margin-left: auto !important; margin-right: auto !important; }

  /* Passes card — reclaim horizontal space by shrinking the 25 px inner padding down to ~2 % of viewport */
  .passes-card .pass-overview-header,
  .passes-card .table-container {
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  /* Fixed bottom-sheet panel — pair with mob-bottom-sheet-offset on the scrolling content above it */
  .mob-bottom-sheet {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
    z-index: 900;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mob-safe-pad-bottom { padding-bottom: env(safe-area-inset-bottom) !important; }

  /* Pad content so it doesn't hide behind a mob-bottom-sheet */
  .mob-bottom-sheet-offset { padding-bottom: 72px; }

  /* Daterangepicker — hide preset ranges on mobile */
  .daterangepicker .ranges {
    display: none !important;
  }

  /* Daterangepicker — fixed bottom sheet so JS-injected left/right inline styles
     can't push it off-screen; vertical scroll handles tall calendars. */
  .daterangepicker {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.15);
    z-index: 1001002 !important;
    padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }

  /* ── Page-header row ───────────────────────────────────────────────────────
     Wrap a page title + date-picker / action bar in this div on any page. */
  .page-header-row {
    display: flex;
    flex-direction: column;
  }

  .page-header-row .dt-picker-group-container {
    margin-top: 0 !important;
    margin-right: 0 !important;
    padding: 0 12px;
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 8px;
  }

  .page-header-row h4 {
    font-size: 1.5rem !important;
    font-weight: 600;
  }

  /* ── mob-field-row ─────────────────────────────────────────────────────────
     Add to any flex row of form inputs that should stack vertically on mobile. */
  .mob-field-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .mob-field-row > * {
    width: 100% !important;
  }

  .mob-field-row input,
  .mob-field-row select,
  .mob-field-row textarea {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Scheduler modal only — reduce the unusually large 40 px body padding */
  #program-event-modal .modal-body {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── mob-col-stack ─────────────────────────────────────────────────────────
     Forces every direct column child to full width on mobile. */
  .mob-col-stack > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Override display:table / display:table-cell layouts that block mobile reflow */
  .mob-table-to-block      { display: block !important; }
  .mob-table-cell-to-block { display: block !important; width: 100% !important; float: none !important; }

  /* Horizontally scrollable wrapper */
  .mob-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Vertically center a row of mixed-height toolbar buttons */
  .mob-toolbar-row {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
  }
  .mob-toolbar-row > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    float: none !important;
  }
}