/* ═══════════════════════════════════════════════════════════════════════
   admin-open-day.css - the four open-day admin screens' mobile pattern pass
   (AdminOpenDayDates .odd-page, AdminOpenDayRegistrations .reg-page,
   AdminOpenDayStats .ods-page, AdminOpenDayWizard .odw-page).

   Loads AFTER admin.css (index.html order), so an equal-specificity override
   of an admin.css rule wins HERE by cascade order alone - which is why every
   selector in this file is scoped to one of the four page roots and no wider.
   A bare utility class here would silently restyle every other admin screen.

   The .adm-table-scroll BASE utility (max-inline-size, overflow-x, touch
   scrolling, overscroll containment) lives in admin.css. This file never
   redefines it; it only shapes what happens INSIDE those wrappers on these
   four screens. Wide tables scroll in their own wrapper box at every width;
   the page itself only scrolls vertically in the shared .admin-main.

   .odw-page is the wizard's root and is NOT an RTL island - the screen is
   English and inherits .admin-main's LTR. Do not add it to any direction
   group. The other three roots re-establish RTL in admin.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Column widths (were inline style="width: __px" attributes) ─────────
   Same values the templates carried inline; a class so DevTools Workspaces
   edits persist. Widths are floors for the auto table layout, not caps. */

.odd-page .odd-col-active { width: 70px; }
.odd-page .odd-col-actions { width: 140px; }

.reg-page .reg-col-check { width: 36px; }
.reg-page .reg-col-registered { width: 100px; }
.reg-page .reg-col-actions { width: 208px; }

.odw-page .odw-col-type { width: 120px; }
.odw-page .odw-col-options { width: 110px; }
.odw-page .odw-col-order { width: 70px; }
.odw-page .odw-col-skip { width: 80px; }
.odw-page .odw-col-active { width: 70px; }
.odw-page .odw-col-actions { width: 120px; }

/* ── Overscroll containment on the pre-existing inner scrollers ─────────
   These already scroll horizontally in admin.css; containment stops a
   finished swipe from chaining into the page (or into browser history
   navigation) on touch. The .adm-table-scroll wrappers get the same
   containment from the base utility. */

.reg-page .reg-tabs,
.reg-page .reg-date-pills,
.reg-page .reg-stats-matrix-wrap,
.ods-page .stats-bars,
.ods-page .stats-chart-card {
  overscroll-behavior-x: contain;
}

/* ═══════════════════════════════════════════════════════════════════════
   Tablet + phone (the panel's canonical 1024px breakpoint)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* ── Un-cram the generic .admin-table rule inside the wrappers ──────
     admin.css turns every .admin-table into display:block with each row a
     fixed-layout table at 100% width - readable for 3 columns, an
     unreadable overlap for the 7-9 column tables on these screens. Inside
     an .adm-table-scroll wrapper the table stays a real table and the
     WRAPPER scrolls (same pattern as .affiliate-stats-table). */
  .odd-page .adm-table-scroll .admin-table,
  .odw-page .adm-table-scroll .admin-table,
  .ods-page .adm-table-scroll .admin-table {
    display: table;
    overflow: visible;
  }
  .odd-page .adm-table-scroll .admin-table thead,
  .odw-page .adm-table-scroll .admin-table thead,
  .ods-page .adm-table-scroll .admin-table thead {
    display: table-header-group;
  }
  .odd-page .adm-table-scroll .admin-table tbody,
  .odw-page .adm-table-scroll .admin-table tbody,
  .ods-page .adm-table-scroll .admin-table tbody {
    display: table-row-group;
  }
  .odd-page .adm-table-scroll .admin-table tr,
  .odw-page .adm-table-scroll .admin-table tr,
  .ods-page .adm-table-scroll .admin-table tr {
    display: table-row;
    width: auto;
    table-layout: auto;
  }
  .odd-page .adm-table-scroll .admin-table th,
  .odd-page .adm-table-scroll .admin-table td,
  .odw-page .adm-table-scroll .admin-table th,
  .odw-page .adm-table-scroll .admin-table td,
  .ods-page .adm-table-scroll .admin-table th,
  .ods-page .adm-table-scroll .admin-table td {
    white-space: nowrap;
  }

  /* Floors sized to each screen's column count; the auto layout widens
     past them when content demands. */
  .odd-page .adm-table-scroll .admin-table { min-inline-size: 920px; }
  .odw-page .adm-table-scroll .admin-table { min-inline-size: 780px; }
  .ods-page .adm-table-scroll .admin-table { min-inline-size: 560px; }

  /* The wizard's question text is the one long-prose column in these
     tables - it wraps instead of forcing a kilometre of sideways scroll. */
  .odw-page .adm-table-scroll .admin-table th:first-child,
  .odw-page .adm-table-scroll .admin-table td:first-child {
    white-space: normal;
    min-inline-size: 220px;
  }

  /* The stats drill-down's journey row is prose inside a colspan cell -
     it must wrap, or one long attribution path drags the whole table
     into kilometres of sideways scroll. */
  .ods-page .adm-table-scroll .admin-table tr.reg-row-detail td {
    white-space: normal;
  }

  /* Journey rows on the stats screen are click targets in their own
     right - the taller cell is what makes the whole row a comfortable
     tap. Covers the referral/funnel breakdown tables and the drill-down
     table inside the code-detail modal. */
  .ods-page .stats-breakdown-table td,
  .ods-page .adm-table-scroll .admin-table td {
    padding-block: 0.8rem;
  }
  .ods-page .stats-breakdown-table th.stats-sortable {
    padding-block: 1rem;
  }

  /* ── Seat cards stop paying full paint cost (registrations) ─────────
     Below 1025px each seat row is a stacked card and the roster runs to
     tens of thousands of pixels. content-visibility lets the browser skip
     rendering off-screen cards. SAFE here because nothing inside a seat
     card renders a fixed/sheet layer in place: the three modals and the
     toast are siblings of .reg-table-scroll, AdminSheet is not used on
     this screen, and admin.css already forbids position:fixed inside
     .reg-table-scroll (it is a container-query container). The detail row
     is excluded - it hosts the lead panel and must never be skipped while
     open. The intrinsic size is a pre-first-render estimate; `auto` then
     remembers each card's real height. */
  .reg-page .reg-table tbody tr:not(.reg-row-detail) {
    content-visibility: auto;
    contain-intrinsic-block-size: auto 420px;
  }

  /* ── Tap-target floor: 44px for every control on these screens ────── */
  .odd-page .btn,
  .reg-page .btn,
  .ods-page .btn,
  .odw-page .btn {
    min-block-size: 44px;
  }
  .odd-page .btn-icon,
  .reg-page .btn-icon,
  .ods-page .btn-icon,
  .odw-page .btn-icon {
    min-inline-size: 44px;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .reg-page .reg-tab,
  .reg-page .reg-date-pill,
  .reg-page .reg-stats-toggle,
  .reg-page .adm-ms__trigger,
  .reg-page .reg-mode,
  .reg-page .reg-attend,
  .ods-page .course-filter-tab {
    min-block-size: 44px;
  }
  /* The card foot's action bar: admin.css caps these at 2.3rem/2.5rem. */
  .reg-page .reg-table td.reg-cell-actions .reg-action {
    height: auto;
    min-block-size: 44px;
  }
  .reg-page .reg-actions-wa .wa-seg {
    min-block-size: 44px;
  }

  /* The 36x20 toggle keeps its size; the label grows an invisible 44x44
     hit area around it (the label is the click target already). */
  .odd-page .toggle::after,
  .odw-page .toggle::after {
    content: "";
    position: absolute;
    inset-block: -12px;
    inset-inline: -4px;
  }

  /* Checkboxes: a finger-sized box, and a 44px cell around the row
     selector in card mode. */
  .reg-page .reg-table input[type="checkbox"],
  .reg-page .reg-sendmail input[type="checkbox"],
  .odw-page .checkbox-label-inline input[type="checkbox"] {
    inline-size: 22px;
    block-size: 22px;
  }
  .reg-page .reg-table td.reg-cell-check {
    min-inline-size: 44px;
    min-block-size: 44px;
  }
  .odw-page .checkbox-label-inline {
    min-block-size: 44px;
  }

  /* The search clear glyph is a 2x4px-padded icon; give it the full
     floor and move the input's text off from under it (the island mirror
     puts the clear button on the LEFT on this page). */
  .reg-page .search-clear {
    min-inline-size: 44px;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .reg-page .admin-search input {
    padding-left: 46px;
  }

  /* ── Input font floor: 16px so mobile Safari stops zooming on focus ── */
  .odd-page .form-input,
  .odd-page .form-select,
  .odd-page .form-textarea,
  .reg-page .form-input,
  .reg-page .form-select,
  .reg-page .form-textarea,
  .ods-page .form-input,
  .ods-page .form-select,
  .odw-page .form-input,
  .odw-page .form-select,
  .odw-page .form-textarea {
    font-size: 16px;
  }
  .odd-page .form-input,
  .odd-page .form-select,
  .reg-page .form-input,
  .reg-page .form-select,
  .ods-page .form-input,
  .ods-page .form-select,
  .odw-page .form-input,
  .odw-page .form-select {
    min-block-size: 44px;
  }
  .reg-page .reg-status-select,
  .reg-page .reg-lead-status-select {
    font-size: 16px;
    min-block-size: 44px;
  }
  /* Outranks the card-mode pill rule in admin.css (0,3,1 there). */
  .reg-page .reg-table td.reg-cell-status .reg-status-select {
    font-size: 16px;
  }

  /* ── Zoom column (dates screen) ─────────────────────────────────────
     The link keeps inline-block (text-overflow needs a block container's
     own text; inline-flex would stop ellipsising) and grows to the tap
     floor with padding. The create-zoom button rides the .btn floor. */
  .odd-page .odd-zoom-link {
    min-block-size: 44px;
    padding-block: 0.8rem;
    box-sizing: border-box;
  }
  .odd-page .odd-cal-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Phone
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* The wizard modal's per-step grid (value · label · icon · description)
     cannot fit four columns on a phone; each step stacks and the header
     row goes - the inputs' placeholders carry the column names. */
  .odw-page .scale-steps-head {
    display: none;
  }
  .odw-page .scale-steps-row {
    grid-template-columns: 1fr;
  }
}