/* ══════════════════════════════════════════════════════════════════════
   mobile.css — one shared responsive layer for all ~269 templates.
   ----------------------------------------------------------------------
   None of the templates extend a base, so there was no single place to
   fix this. Rather than hand-edit every file, this stylesheet targets the
   idioms the templates actually share (Bootstrap 5 tables/cards/modals,
   the .wrap / .kpi / .page-head house patterns) and is linked from all of
   them. mobile.js handles the one thing CSS cannot do: wrapping a bare
   <table> in a scroll container.

   Scoped almost entirely inside @media (max-width: …) so desktop
   rendering is untouched. The few unconditional rules are marked.

   Loaded LAST, after Bootstrap and after each page's own <style>, so it
   wins on specificity ties without needing !important everywhere.
   ══════════════════════════════════════════════════════════════════════ */

/* ── unconditional: stop the page itself scrolling sideways ──────────
   A single wide table used to widen <body> and let the whole layout
   slide, header included. Overflow belongs to the table, not the page. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* mobile.js wraps unwrapped tables in this */
.js-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
/* Fade on the right edge while a table still has content off-screen, so
   it is discoverable that it scrolls. Set by mobile.js. */
.js-scroll-x.has-more { position: relative; }
.js-scroll-x.has-more::after {
  content: ""; position: sticky; right: 0; top: 0;
  float: right; width: 26px; height: 100%;
  margin-left: -26px; pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(0,0,0,.09));
}

/* ══════════════ TABLETS AND BELOW (≤ 992px) ══════════════ */
@media (max-width: 992px) {
  /* Not .container / .container-fluid: Bootstrap already pads those to match
     its own row gutters (15px in v4, 12px in v5). Forcing 12px on a v4 page
     let every .row hang 3px past the screen edge. */
  .wrap { padding-left: 12px; padding-right: 12px; }
  .card.m-4, .card.m-3 { margin: 10px !important; }
  .page-head { flex-wrap: wrap; gap: 8px; }
  /* Filter bars and toolbars: let them wrap instead of overflowing */
  .filters, .filter-row, .toolbar, .btn-toolbar, .page-head > div { flex-wrap: wrap; }
}

/* ══════════════ PHONES (≤ 768px) ══════════════ */
@media (max-width: 768px) {

  /* ── tables ────────────────────────────────────────────────────────
     Every table scrolls inside its own container. Cells stop wrapping
     to two-character columns, which is what made these unreadable long
     before they were unscrollable. */
  .table-responsive, .table-container, .js-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive, .table-container { padding: 8px !important; }
  table, .table, .pc-table, .sum-table {
    font-size: .8rem;
    width: auto;
    min-width: 100%;
  }
  table th, table td, .table th, .table td {
    white-space: nowrap;
    padding: 6px 8px !important;
  }
  /* …except the free-text columns, which are the ones worth reading.
     Marked up by mobile.js from the header name. */
  table td.js-wrap {
    white-space: normal;
    min-width: 180px;
    max-width: 280px;
  }

  /* Sticky headers stay sticky, but a sticky *column* on a 360px screen
     eats half the viewport — drop it. */
  table th { position: sticky; top: 0; }
  table td.sticky-col, table th.sticky-col { position: static !important; }

  /* ── cards / layout ── */
  .card { border-radius: 10px; }
  .card-body { padding: 12px; }
  .wrap { padding: 8px; }
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.2rem; }
  h3, h4 { font-size: 1.05rem; }
  h5, h6 { font-size: .95rem; }

  /* ── KPI / stat tiles: 2-up instead of a squeezed row ── */
  .kpi { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi .box, .kpi > div { min-width: 0 !important; width: auto !important; }
  .kpi .box b, .kpi .box strong { font-size: 1.1rem; }

  /* ── forms ──
     16px is the threshold below which iOS Safari zooms the viewport on
     focus and never zooms back out. Anything the user types into has to
     be at least that, however small the design elsewhere. */
  input, select, textarea,
  .form-control, .form-select, .form-control-sm, .form-select-sm {
    font-size: 16px !important;
  }
  .form-control, .form-select { padding: 8px 10px; }
  /* A select sized width:auto grows to fit its longest option — a long
     attendee/employee name pushed whole toolbars off-screen. Cap it. */
  select, .form-select, select.form-control { max-width: min(100%, calc(100vw - 32px)); }
  form.d-flex, .d-flex > form { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  .row > [class*="col-"] { margin-bottom: 8px; }
  label, .form-label { font-size: .85rem; }

  /* ── tap targets ──
     ~44px is the smallest reliably hittable control. btn-sm is well under
     it, and these tables are full of btn-sm actions. */
  .btn, button, .nav-link, .page-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-sm { min-height: 34px; padding: 6px 10px; font-size: .82rem; }
  /* Buttons inside a table row stay compact — the row is already
     scrollable and 44px tall rows would make a 30-row table endless. */
  table .btn, table .btn-sm { min-height: 28px; padding: 3px 8px; font-size: .76rem; }

  /* ── modals: full-bleed sheets, which is what a phone wants ── */
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 100%;
  }
  .modal-content { border-radius: 0; min-height: 100vh; }
  .modal-body { max-height: none; overflow-y: visible; padding: 14px; }
  /* Keep the action buttons reachable without scrolling the sheet. */
  .modal-footer {
    position: sticky; bottom: 0; background: #fff;
    border-top: 1px solid #dee2e6; padding: 10px 14px;
    flex-wrap: nowrap; gap: 8px;
  }
  .modal-footer .btn { flex: 1 1 auto; }
  .modal-header { position: sticky; top: 0; background: #fff; z-index: 2; }

  /* ── tabs / pills: scroll horizontally rather than stacking into a
     wall of full-width buttons ── */
  .nav-tabs, .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link, .nav-pills .nav-link {
    white-space: nowrap;
    font-size: .82rem;
    padding: 8px 10px;
  }

  /* ── pagination / pager bars ── */
  .pc-pager, .pagination-wrapper {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px;
  }
  .pagination { flex-wrap: wrap; justify-content: center; }

  /* ── misc house patterns ── */
  .table-responsive > .btn, .d-flex.gap-2 { flex-wrap: wrap; }
  .text-nowrap.small, .small { font-size: .78rem; }
  .badge { font-size: .68rem; padding: 4px 7px; }
  /* Print/export button clusters */
  .page-head .btn, .page-head a.btn { flex: 0 1 auto; }
}

/* ══════════════ SMALL PHONES (≤ 480px) ══════════════ */
@media (max-width: 480px) {
  .kpi { grid-template-columns: 1fr; }
  .wrap { padding: 6px; }
  .card-body { padding: 10px; }
  table, .table, .pc-table { font-size: .74rem; }
  table th, table td { padding: 5px 6px !important; }
  h1 { font-size: 1.2rem; }
  .page-head { align-items: flex-start; }
  /* Stack the header's button cluster full-width — at this size a row of
     three 33%-wide buttons truncates all three labels. */
  .page-head .btn, .page-head a.btn { flex: 1 1 100%; }
}

/* ══════════════ PRINT ══════════════
   Several of these pages are printed to PDF for circulation, and the
   mobile rules above (sticky footers, scroll containers) break that. */
@media print {
  .js-scroll-x, .table-responsive, .table-container {
    overflow: visible !important;
  }
  table th, table td { white-space: normal !important; }
  .modal-footer, .modal-header { position: static !important; }
  .no-print, .btn, .nav-tabs, .pc-pager, .pagination-wrapper { display: none !important; }
}