/* ============================================================
   responsive.css — shared stylesheet loaded on every page
   (linked after each page's own <style> / styles.css)
   ============================================================ */

/* --- Damage control: nothing should overflow the viewport -- */
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
img,svg{max-width:100%;height:auto}
table{max-width:100%}

/* --- Wide tables: sideways scroll on any narrow screen ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:12px 0}
.tbl-wrap table{margin:0;min-width:100%;width:auto}
@media(max-width:700px){
 .tbl-wrap{box-shadow:inset -8px 0 12px -12px rgba(30,58,138,.55)}
}

/* --- Shared sidebar drawer on narrow screens -------------------- */
@media(max-width:1020px){
 #sb{width:min(320px,86vw)}
}

/* --- Tablet / small laptop layout ------------------------------- */
@media(min-width:701px) and (max-width:1020px){
 .grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
}

/* --- Phones -------------------------------------------------------- */
@media(max-width:700px){
  body{font-size:17px}
  h1{font-size:clamp(28px,7.6vw,40px)}
  h2{font-size:25px}
  h3{font-size:18.5px}
  table{font-size:15px}
  th,td{padding:6px 8px}
  .box{padding:11px 13px 10px}
  .box .tag{font-size:12px}
  .toolbar input{min-width:0;flex:1 1 100%}
  .fbtn{flex:1 1 auto;padding:6px 8px;text-align:center}
  .stat{flex:1 1 44%;min-width:0}
}

/* --- Very small phones ------------------------------------------------- */
@media(max-width:420px){
  body{font-size:15.5px}
  #main{padding-left:10px;padding-right:10px}
  h1{font-size:clamp(24px,7vw,32px)}
  h2{font-size:22px}
  h3{font-size:17px}
  .stat{flex:1 1 100%}
  .chips span{font-size:12px;padding:2px 9px}
  footer{font-size:11.5px}
}

/* --- Print overrides ------------------------------------------------------ */
@media print{
  .tbl-wrap{overflow:visible;box-shadow:none}
  .tbl-wrap table{width:100%;min-width:0}
  .toolbar,.fbtn{display:none !important}
}