/* ═══════════════════════════════════════════════════════════════════════
   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; }

/* ── Roster columns that ship hidden (owner decision 9) ─────────────────
   One rule per column, width and clip together, because on this table they
   are the same decision: .reg-table is table-layout: auto, so a column sizes
   to the widest thing anywhere in it and an uncapped timestamp column would
   win space back off .reg-cell-activity, which prints prose. The widths are
   floors, not caps - the same contract the block above states.
   These live here rather than in admin.css because .reg-table is worn by five
   screens (AdminContacts, AdminContracts, AdminConversions, AdminLeads and
   the roster) and only .reg-page is this one. */

.reg-page .reg-th-channel,
.reg-page .reg-cell-channel { width: 140px; white-space: nowrap; }
.reg-page .reg-th-serial,
.reg-page .reg-cell-serial { width: 96px; white-space: nowrap; }
.reg-page .reg-th-approval-changed,
.reg-page .reg-cell-approval-changed { width: 120px; white-space: nowrap; }
.reg-page .reg-th-details-mail,
.reg-page .reg-cell-details-mail { width: 120px; white-space: nowrap; }
.reg-page .reg-th-wa-confirm,
.reg-page .reg-cell-wa-confirm { width: 130px; white-space: nowrap; }
.reg-page .reg-th-reminder,
.reg-page .reg-cell-reminder { width: 130px; white-space: nowrap; }

/* The channel pill borrows .reg-source-badge's geometry and its five tier
   swatches from admin.css. Two things have to be undone for an in-cell use,
   and both are the reset .lead-origin-chip and .enr-origin-chip already make:

     - margin-left: auto is for the pill's place at the end of a card header.
       It computes to 0 on an inline-level box, so it is inert in a desktop
       table cell - but the card band turns every captioned cell into a flex
       container, and the moment this column ever earns a card rung the pill
       would be a flex item and jump the gutter. Reset it now, where the reason
       is still visible, not after somebody reports the jump.
     - The ellipsis lives on the PILL, not on the cell: .reg-source-badge is an
       inline-flex box, so it sizes to its content and would hang out of a
       capped cell carrying the ellipsis with it. */
.reg-page .reg-channel-chip {
  margin-left: 0;
  max-width: 160px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── A date row opens that date's roster (dates screen) ────────────────
   The affordance is the whole of the visual change: without a pointer cursor
   a clickable row is a surprise rather than a control. The class is applied
   PER ROW and only where the reader holds the roster's own grant - a row that
   looks live and answers nothing is worse than one that never claimed to be.

   The hover tint is 0-2-2 and beats admin.css's own `.admin-table tr:hover td`
   (0-1-2), which paints #f8f9ff on every row of this table. Deepening it is
   safe HERE and is not on the roster: this table carries no selection or
   landing marks to fight over the same surface, so the two states the reader
   can see are "a row" and "the row I am about to open".

   `background-color`, never the `background` shorthand: the shorthand resets
   background-image with it, and these cells may yet grow one. */

.odd-page .odd-row--clickable {
  cursor: pointer;
}

.odd-page .odd-row--clickable:hover td {
  background-color: #eff4ff;
}

/* ── 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 new roster columns do not reach the card (owner decision 2) ──
     The card is a flex stack ordered by explicit integers keyed on the cell
     CLASS (admin.css). Owner decision 2 freezes that ladder, and a captioned
     cell with no rung of its own inherits `order: 5` from
     `.reg-table td[data-label]` and lands in an arbitrary middle position -
     between the participation mode and attendance, on this table. So a column
     the reader turned on for the desktop table stays off the card rather than
     landing somewhere nobody chose.
     Rungs 14 to 19 are free and are left free on purpose: the same rule has to
     read the same way in admin-leads.css, which has two free slots for seven
     new cells, and in admin-enrollments.css, which has none.
     To put one of these on the card later: delete its line here and add
     `.reg-page .reg-table td.reg-cell-X { order: 14; }` beside rung 13 in
     admin.css. The static class the template already carries is what makes
     that a one-line change - see tests/adminSidebarRail.spec.ts. */
  .reg-page .reg-table td.reg-cell-channel          { display: none; }
  .reg-page .reg-table td.reg-cell-serial           { display: none; }
  .reg-page .reg-table td.reg-cell-approval-changed { display: none; }
  .reg-page .reg-table td.reg-cell-details-mail     { display: none; }
  .reg-page .reg-table td.reg-cell-wa-confirm       { display: none; }
  .reg-page .reg-table td.reg-cell-reminder         { display: none; }

  /* 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;
  }
}