/* ═══════════════════════════════════════════════════════════════
   EasyAIOU Student Portal — MOBILE CORRECTIONS
   Audited at 380px, 2026-08-30.

   Load this LAST in every portal template, after saas.css /
   student_app.css / style.css / auth.css. Those sheets disagree with
   each other about buttons and type sizes; this file is the single
   place small-screen behaviour is decided, so it must win the cascade
   by load order rather than by !important.

       <link rel="stylesheet" href="/static/mobile.css">

   Scope: phones and small tablets only. Nothing here affects desktop.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Wide tables ────────────────────────────────────────────────
     Result, payment and dashboard tables are injected by JS as bare
     <table> elements with no wrapper, so the table itself has to be
     the scroll container. display:block still creates an anonymous
     table box internally, so column alignment is preserved.
     .compare (subscribe page) sets min-width:420px — wider than a
     380px phone — and would otherwise widen the whole page.        */
  .data-table,
  .payments-table,
  .compare,
  table.table,
  .table-wrap > table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cells stay on one line so the overflow is a clean horizontal
     scroll rather than a column squeeze. */
  .data-table th,    .data-table td,
  .payments-table th, .payments-table td,
  .compare th,        .compare td {
    white-space: nowrap;
  }

  /* ── Tap targets ────────────────────────────────────────────────
     44px is the accessible minimum for a touch control.            */
  .btn, .button, button, [role="button"],
  input[type="submit"], input[type="button"],
  a.btn, a.button,
  .auth-text-link,
  .nav-link, .bottomnav a, .student-bottomnav a {
    min-height: 44px;
  }

  /* Buttons that only wrap an icon still need width, not just height. */
  .btn-icon, .icon-btn, button.icon {
    min-width: 44px;
  }

  /* Inline links inside prose keep their natural size, but standalone
     footer/secondary links are controls — give them room. */
  .auth-alt a, .footer-links a, .page-foot a {
    display: inline-block;
    padding: 10px 2px;
  }

  /* ── Readable type ──────────────────────────────────────────────
     Audit found live text at 9px and 10px. 11px is the floor for
     supporting text; anything smaller is unreadable on a phone.    */
  small, .small, .muted, .meta, .hint, .caption,
  .sub, .subtle, .note, .journey-note, .card-meta {
    font-size: 12px;
  }

  .tiny, .xs, .micro, [class*="-tiny"], [class*="-xs"] {
    font-size: 11px;
  }

  /* ── iOS focus zoom ─────────────────────────────────────────────
     Safari zooms the viewport when a focused field is under 16px.  */
  input, select, textarea {
    font-size: 16px;
  }

  /* ── Safe areas ─────────────────────────────────────────────────
     Templates set viewport-fit=cover, so fixed chrome must clear the
     home indicator and notch on iPhone.                            */
  .bottomnav, .student-bottomnav, .app-bottomnav {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .topbar, .student-topbar, .portal-topbar {
    padding-top: calc(8px + env(safe-area-inset-top));
  }

  /* ── Overflow guard ─────────────────────────────────────────────
     Long unbroken strings (roll numbers, URLs, Cloudinary links) are
     the usual cause of a page that scrolls sideways.               */
  body { overflow-x: hidden; }

  .card, .content-card, .pcard, .panel, .tile {
    overflow-wrap: anywhere;
  }
}