/* ============================================================================
   wandm-mobile-safe.css — centralized mobile/portrait safety net (v4.1)
   ----------------------------------------------------------------------------
   Linked LAST on the audited pages so it provides a single, shared layer of
   responsive protections WITHOUT rewriting each page's bespoke CSS:
     • no horizontal overflow on html/body
     • media/img/svg never exceed their container
     • tables scroll instead of forcing page-wide overflow
     • long EN/AR text wraps instead of pushing width
     • tap targets ≥ 44px on real controls
     • grids collapse to a single column on phones
     • the mock exam timer stays visible on mobile (never re-hidden)
     • the admin announcement editor stacks on phones
     • iframes/frames stay within the viewport width
   Desktop is unaffected: rules are either harmless globally (box-sizing,
   image max-width) or gated behind @media (max-width:560px).
   ========================================================================== */

/* ---- Global: contain width, sane box model ---- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }

/* ---- Media never overflows its container ---- */
img, svg, canvas, video {
  max-width: 100%;
  height: auto;
}

/* ---- Tables: full width, and a scroll wrapper that never bursts the page ---- */
table { width: 100%; max-width: 100%; }
.table-wrap, .responsive-table, .wandm-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Long text wraps (English + Arabic) instead of widening the layout ---- */
.long-text, .q-text, .q-stem, .explanation, .q-explanation,
.wa-home-body, .ann-body, .stem, .q-title {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ---- Tap targets: real interactive controls get a comfortable hit area ---- */
button, .btn, [role="button"], a.card, .ch-row, .mock-card, .station-card,
.tab-btn, .mcq-sys-head, .home-btn, .wandm-home-btn, .bc-save {
  min-height: 44px;
  touch-action: manipulation;
}

/* ============================ PHONE PORTRAIT ============================ */
@media (max-width: 560px) {
  /* Grids collapse to one column (covers the known grid class names). */
  .grid, .cards-grid, .dash-grid, .chapter-grid, .mock-grid, .station-grid,
  .mcq-grid, .nx-dash, .stats, .analytics, .cards, .card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Iframes / content frames stay within the viewport. */
  .app-shell, .content-frame, iframe, .frame-wrap, #frame-wrap {
    width: 100%;
    max-width: 100%;
  }

  /* The exam/mock timer must remain visible on mobile (never re-hidden). */
  .mock-timer, .timer, .exam-timer, #examTimer {
    display: flex !important;
    visibility: visible !important;
  }

  /* Admin announcement + broadcast editors stack on phones. */
  .admin-form, .announcement-editor, #ann-panel, .broadcast {
    grid-template-columns: 1fr !important;
  }
  /* The announcement level row + save button wrap rather than overflow. */
  #ann-panel .ann-row, #ann-panel select, #ann-panel input, #ann-panel textarea,
  .broadcast textarea { max-width: 100%; }
}

/* Very small phones (≤ 380px): tighten the MCQ accordion padding a touch more. */
@media (max-width: 380px) {
  .mcq-sys-head { padding: 12px 12px; }
  .ch-row { flex-wrap: wrap; }
}