/* Shared small-screen safeguards for SI-WAS pages. Page-specific layouts remain authoritative. */
@media (max-width: 767px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, canvas { max-width: 100%; }
  input, select, textarea { max-width: 100%; }
  .wrap, .page { width: calc(100% - 24px); max-width: calc(100vw - 24px); margin-left: auto; margin-right: auto; }
  .top, .topbar { flex-wrap: wrap; gap: 12px; }
  .top .brand, .topbar .brand { min-width: 0; }
  .top .brand strong, .topbar .brand strong, .top .brand b { overflow-wrap: anywhere; }
  .top .nav, .topbar .nav { flex-wrap: wrap; gap: 7px; }
  .top .nav a, .topbar .nav a { min-height: 40px; }
  .hero { max-width: 100%; }
  .toolbar { flex-wrap: wrap; }
  .search, .search input { min-width: 0; }
  .table-wrap, .overflow-x-auto, .table-responsive, .siwas-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table, .overflow-x-auto table, .table-responsive table, .siwas-table-scroll table { width: max-content; min-width: 100%; }
  .modal { padding: 8px; }
  .dialog, .modal-box { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }
  .dialog-body { padding: 16px; }
  .actions { flex-wrap: wrap; }
  .siwas-header-logo { width: 37px; height: 37px; margin-right: 5px; }
}
@media (max-width: 480px) {
  .top, .topbar { padding-left: 14px; padding-right: 14px; }
  .top .brand small, .topbar .brand small { display: none; }
  .top .nav a, .topbar .nav a { padding: 9px 10px; }
  .hero h1 { overflow-wrap: anywhere; }
  .filter, .stats, .cards { grid-template-columns: minmax(0, 1fr); }
  .card, .chart-card { min-width: 0; }
  .modal .dialog-head { padding: 15px 17px; }
  .modal .dialog-head h2 { font-size: 18px; }
  .siwas-header-logout span { display: none; }
}
@media print {
  .siwas-table-scroll { overflow: visible !important; }
  .siwas-table-scroll table { width: 100% !important; }
}