/* Mobile breakpoints — narrow phones (<375px iPhone SE etc). Shared across pages. */
@media (max-width: 480px) {
  body { font-size: 14px !important; }
  .container, .wrap, main { padding-left: 12px !important; padding-right: 12px !important; }
  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  table { font-size: 12px !important; }
  .actions, .btns, .button-row { flex-wrap: wrap !important; gap: 6px !important; }
  .actions button, .btns button { flex: 1 1 auto !important; min-width: 0 !important; font-size: 12px !important; padding: 8px 10px !important; }
  .stat-card, .card, .panel { padding: 12px !important; }
  .grid, .stats-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 375px) {
  body { font-size: 13px !important; }
  h1 { font-size: 20px !important; }
  .modal, .dialog { width: calc(100vw - 24px) !important; max-width: 100% !important; }
  .table-wrap, .table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  /* Hide non-essential table columns on tiny screens */
  table .hide-xs { display: none !important; }
  .btn-secondary, .btn-tertiary { padding: 7px 10px !important; font-size: 11px !important; }
}