/* ==========================================================
   mobile.css — Responsive overrides for PIARC Toolkit
   Loaded LAST so these rules win over style.css / layout.css
   ========================================================== */

/* ======================== 768px (tablet / phone) ======================== */
@media (max-width: 768px) {

  /* --- Global shell --- */
  .app main { padding: 12px; }

  /* --- Tool pages: stack diagram + cards --- */
  .tool-container { flex-wrap: wrap; padding: 0.75rem; }
  .diagram,
  .cards-wrapper {
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* --- Results tables: horizontal scroll --- */
  .results { overflow-x: auto; }

  /* --- Modal: near-full-width --- */
  .modal .inner { width: 96vw; max-width: 96vw; }

  /* --- Sensitivity chart: responsive height --- */
  #sensChart { height: clamp(240px, 50vh, 480px) !important; }
  #sensModal .inner { width: 96vw; }

  /* --- Admin shell --- */
  .admin-shell { padding: 10px; }
  .admin-shell header.top { padding: 10px 12px; }
  .admin-shell .tabs { gap: 6px; }
  .admin-shell .tab { padding: 8px 10px; font-size: 13px; }
  .admin-shell .table-scroll { max-width: calc(100vw - 24px); }
  .admin-shell .table-scroll th,
  .admin-shell .table-scroll td { font-size: 13px; padding: 6px 8px; }
  .admin-shell .actions { flex-wrap: wrap; padding: 10px 12px; }
  .admin-shell .content { padding: 10px 12px; }
}

/* ======================== 480px (small phone) ======================== */
@media (max-width: 480px) {

  .app main { padding: 8px; }

  /* --- Tool grid: single column --- */
  .tool-grid { grid-template-columns: 1fr; }

  /* --- Country selector: don't force min-width --- */
  #country-select { min-width: 0; }

  /* --- Admin: tighter --- */
  .admin-shell { padding: 6px; }
  .admin-shell .tab { padding: 6px 8px; font-size: 12px; }
}

/* ======================== 400px (tiny phone) ======================== */
@media (max-width: 400px) {

  /* --- Results grid: single column --- */
  .results-grid { grid-template-columns: 1fr; }
}