/* sh-responsive.css — small-screen improvements. Add to any page with:
   <link rel="stylesheet" href="sh-responsive.css">  (after the page's own styles) */
@media (max-width: 640px){
  body{ padding:10px !important; }
  .topbar{ padding:11px 13px !important; }
  .topbar .btn, .topbar .btn.ghost{ padding:7px 10px !important; font-size:11.5px !important; }
  .hub-header{ flex-direction:column; align-items:flex-start; gap:10px; }
  .hub-user{ flex-wrap:wrap; }
  /* KPI tiles: 2 per row on phones */
  .kpi-row{ grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
  .kpi .v{ font-size:20px !important; }
  /* charts / cards stack full width */
  .grid{ grid-template-columns:1fr !important; }
  .card canvas{ max-height:220px; }
  /* forms single column */
  .form-grid{ grid-template-columns:1fr !important; }
  /* tables keep horizontal scroll (already wrapped in .table-wrap) */
  table{ font-size:11.5px; }
  thead th, tbody td{ padding:7px 8px !important; }
  .modal{ max-width:100% !important; }
  h1,.month{ font-size:20px !important; }
}
@media (max-width: 400px){
  .kpi-row{ grid-template-columns:1fr !important; }
}