/* ============================================================================
   SAM Booking — Responsive layer (admin / instructor / student portal)

   Presentation only. Nothing here changes behaviour, routes, form fields or
   validation; it only restyles the existing markup for narrow viewports.

   Loaded LAST in layouts/main.php (after custom.css *and* after the layout's
   inline <style> block) so that equal-specificity rules resolve in favour of
   these mobile overrides.

   Breakpoints
     <= 991.98px  tablet & phone — sidebar becomes an off-canvas drawer
     <= 767.98px  phone          — tables scroll horizontally, toolbars stack
     <= 575.98px  small phone    — tighter padding, full-width controls
   ========================================================================== */

/* ── Desktop defaults: the drawer chrome stays out of the way ─────────────── */
.sidebar-toggle   { display: none; }
.sidebar-backdrop { display: none; }



/* ══════════════════════════════════════════════════════════════════════════
   <= 991.98px — sidebar becomes an off-canvas drawer
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  /* The desktop layout is `body { display:flex }` with a fixed sidebar and a
     margin-left on the content. On mobile the sidebar leaves the flow entirely,
     so the content can simply be a normal block at full width. */
  body { display: block; }

  .main-content {
    margin-left: 0;
    width: 100%;
    min-height: 100vh;
  }

  /* ── The drawer ──
     Height is the crux of this panel on a phone. `100vh` on iOS Safari is the
     LARGE viewport — it excludes the address bar and the bottom toolbar, both
     of which overlay the page — so a 100vh drawer runs about 110px below the
     glass. The footer (user block, Change Password, Logout) ends up underneath
     the browser chrome, and because the menu still *fits* inside that oversized
     box there is nothing to scroll to bring it back. `100dvh` tracks the
     viewport actually on screen, so the panel ends where the user can see it
     and overflow becomes real scrolling. 100vh stays first as the fallback for
     browsers without dynamic units. */
  .sidebar {
    width: min(280px, 84vw);
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .28);
    z-index: 1045;
    will-change: transform;

    /* Body scroll is locked while the drawer is open; `contain` stops a swipe
       that reaches the end of the menu from being handed to the page behind. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar.is-open { transform: translateX(0); }

  /* Larger hit areas — 44px is the minimum comfortable touch target. */
  .sidebar nav a {
    padding: 13px 22px;
    min-height: 46px;
    font-size: 15px;
  }
  .sidebar .brand        { padding: 18px 22px; }
  /* The bottom inset keeps the Logout button clear of the home indicator. It
     lives on the footer rather than on the scroller because bottom padding on
     an overflow box is dropped by some engines. */
  .sidebar .sidebar-footer { padding: 16px 22px calc(16px + env(safe-area-inset-bottom, 0px)); }

  /* ── Backdrop behind the open drawer ── */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 1040;
  }
  .sidebar-backdrop.is-open { opacity: 1; visibility: visible; }

  /* Stop the page behind the drawer scrolling under the user's finger. */
  body.sidebar-locked { overflow: hidden; }

  /* ── Hamburger ── */
  .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--primary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .sidebar-toggle:hover        { background: var(--bg); }
  .sidebar-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ── Topbar ── */
  .topbar { padding: 0 14px; gap: 10px; }

  /* A long page title must not push the notification bell off screen. */
  .topbar-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
  }
  .topbar-left { min-width: 0; }

  /* Safety net against a stray wide element scrolling the whole page sideways.
     `clip` rather than `hidden` on purpose: `hidden` would make .page-body a
     scroll container, which breaks the sticky .topbar and forces a second
     vertical scrollbar. `clip` does neither, and older browsers simply
     ignore it — the per-component rules below carry the real load. */
  .page-body { padding: 16px; overflow-x: clip; }
}


/* ══════════════════════════════════════════════════════════════════════════
   <= 767.98px — phone layout
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  .page-body { padding: 14px 12px; }

  /* ── Data tables ──
     Squeezing a 9-column admin table into 380px turns every cell into a
     one-word-per-line column. Keeping cells on one line and letting the
     wrapper scroll sideways keeps the data readable and the row scannable.
     Cells holding free text (review bodies, notes) opt out with .cell-wrap. */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    /* Hint that there is more to the right of the fold. */
    scrollbar-width: thin;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > td {
    white-space: nowrap;
  }
  .table-responsive .table td.cell-wrap,
  .table-responsive .table th.cell-wrap {
    white-space: normal;
    min-width: 200px;
  }

  .table-responsive > .table { font-size: 13.5px; }
  .table-responsive > .table > thead > tr > th { font-size: 12.5px; }

  /* Action clusters (Edit / icon buttons / Delete) sit on one line and
     scroll with the rest of the row rather than stacking mid-table. */
  .table .btn-sm { padding: .2rem .45rem; font-size: 12.5px; }

  /* ── Page headers: "Instructors  [+ Add Instructor]" and friends ── */
  .page-body > .d-flex.justify-content-between { flex-wrap: wrap; gap: .6rem; }

  /* ── Tab strips (instructor edit screens have five) ──
     Scroll them sideways instead of wrapping into a ragged three-row block. */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-item  { flex: 0 0 auto; }
  .nav-tabs .nav-link  { white-space: nowrap; font-size: 13.5px; padding: .5rem .75rem; }

  /* ── Filter / toolbar forms ──
     The Bootstrap columns already stack; just make the action buttons
     comfortable to tap once they are on their own row. */
  form .row.g-2.align-items-end > [class*="col-md"] .btn { min-height: 38px; }

  /* ── Notification dropdown ──
     Its inline min-width:300px overflows a 320px screen. */
  .topbar .dropdown-menu {
    min-width: 0 !important;
    width: calc(100vw - 28px);
    max-width: 340px;
  }

  /* ── Stat cards ── */
  .card .fs-2 { font-size: 1.5rem !important; }

  /* ── FullCalendar (admin + instructor calendars) ── */
  .fc .fc-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  .fc .fc-toolbar-title { font-size: 1.05rem; }
  .fc .fc-button        { padding: .25rem .5rem; font-size: 13px; }

  /* ── Booking wizard step dots (student) ── */
  #step-indicators { flex-wrap: wrap; row-gap: .5rem; }
  #step-indicators .step-dot { width: 28px !important; height: 28px !important; font-size: 12px !important; }
  #step-indicators #step-label { flex-basis: 100%; margin-left: 0 !important; }

  /* Side-by-side wizard choices stack rather than shrink to unreadable. */
  #step-1 > .d-flex.gap-3 { flex-direction: column; }
}


/* ══════════════════════════════════════════════════════════════════════════
   <= 575.98px — small phones
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {

  .page-body { padding: 12px 10px; }

  /* Cards carry a lot of p-4 in this codebase; reclaim the side margins. */
  .page-body .card.p-4 { padding: 1rem !important; }

  /* Flash messages sit outside .page-body with m-3 — match the tighter gutter. */
  .main-content > .alert { margin: .75rem .625rem 0 !important; }

  /* Modals: use the full width, and keep long forms scrollable in place. */
  .modal-dialog { margin: .5rem; }
  .modal-body   { max-height: 72vh; overflow-y: auto; }

  /* A lone button in a page header should span the row it wrapped onto. */
  .page-body > .d-flex.justify-content-between > .btn { width: 100%; }

  /* Button rows (filters, approve/reject pairs) stretch to full width. */
  form .row.g-2.align-items-end > [class*="col-md"] > .btn,
  form .row.g-2.align-items-end > [class*="col-md"] > a.btn { width: 100%; margin-bottom: .4rem; }

  .fc .fc-toolbar-title { font-size: .95rem; }

  /* ── Login / password-reset card (layouts/auth.php) ──
     40px of padding on a 360px screen leaves the form barely 280px wide,
     and the card otherwise sits flush against both screen edges. */
  .auth-card  { padding: 26px 20px; margin: 12px; }
  .auth-brand { margin-bottom: 20px; }
}