/* Kensington English — global mobile/tablet hardening for the portal.
 * Loaded on every portal page. Rules are gated behind mobile/tablet media
 * queries so desktop layouts are untouched, and use !important only where a
 * page's inline <style> would otherwise re-introduce horizontal overflow.
 * The heavy lifting for wide tables is done together with portal-fit.js,
 * which wraps bare <table>s in `.ke-tscroll`. */

/* ── Grid-blowout guard (all narrow screens) ─────────────────────────────── */
/* A single-column CSS-grid shell with a `1fr` track grows to its widest child
   (a wide table/row), stretching the whole page past the viewport. minmax(0,1fr)
   caps the track at the container width so wide children overflow INTO their own
   scroll box (.ke-tscroll / overflow-x:auto wrappers) instead of stretching the
   page. This is the root cure behind the html/body overflow-x:hidden clamp. */
@media (max-width: 900px) {
  body.admin-shell { grid-template-columns: minmax(0, 1fr) !important; }
  .admin-main, .admin-workspace { min-width: 0 !important; }
}
@media (max-width: 820px) {
  .dash-shell { grid-template-columns: minmax(0, 1fr) !important; }
  .dash-shell > main, .dash-shell main.main, .dash-shell .main { min-width: 0 !important; }
}

/* ── Phones + small tablets (≤820px) ─────────────────────────────────────── */
@media (max-width: 820px) {
  /* Kill sideways page scroll — the #1 mobile complaint. Wide things below
     get their OWN scroll (.ke-tscroll) so nothing is clipped. */
  html, body { max-width: 100% !important; overflow-x: hidden !important; }

  /* Media never blows out the viewport. */
  img, video, iframe, embed, object { max-width: 100% !important; height: auto; }

  /* Wide tables scroll horizontally inside their own box (JS-wrapped). */
  .ke-tscroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    scrollbar-width: thin;
  }
  .ke-tscroll > table { min-width: max-content; }
  /* Nudge: any pre/code blocks scroll rather than stretch the page. */
  pre { overflow-x: auto; max-width: 100%; }

  /* Dialogs / modals / drawers must fit the screen. Conservative width cap. */
  .modal, .modal-card, .modal-bg > *, .sheet, .dialog, [role="dialog"],
  .cm-card, .ef-modal, .drawer, .popover {
    max-width: calc(100vw - 24px) !important;
  }
}

/* ── Phones (≤560px) ─────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* Comfortable touch targets. */
  button, .btn, a.btn, .btn-sm, input[type="submit"], .icon-btn { min-height: 40px; }
  /* Forms: 16px inputs stop iOS from zooming on focus. */
  input, select, textarea { font-size: 16px !important; }
  /* Give tabular data a touch more room by trimming default page gutters is
     left to each page; here we only guarantee it never overflows. */

  /* Dash-shell sub-page topbar (back link + user + Sign out). On 29 pages this
     is a single justify-between flex row with no wrap, so a longer user name
     pushes the Sign-out button off the right edge — the "sides not showing"
     bug. Wrapping is always safe: it only engages when the row overflows. */
  .top { flex-wrap: wrap; row-gap: 8px; }
  .top .user { flex-wrap: wrap; min-width: 0; }

  /* Admin drawer key/value rows (e.g. enrolment drawer): long emails/values
     clip against the fixed label column. Let them wrap and break. */
  .drawer-row { flex-wrap: wrap; row-gap: 2px; }
  .drawer-row .v { text-align: left; max-width: 100%; word-break: break-word; overflow-wrap: anywhere; }

  /* Admin page-head action bars (filters + buttons) wrap instead of clipping. */
  .admin-page-head .actions { flex-wrap: wrap; row-gap: 8px; }
  .admin-page-head .actions select { flex: 1 1 100%; }
}