/* ════════════════════════════════════════════════════════════════
   responsive.css — mobile / tablet polish for the dashboards.
   Loaded AFTER main.css. Collapses both class-based AND inline
   grid layouts (inline ones bypass main.css media queries), keeps
   wide tables scrollable, and adds a mobile language switcher.
   ════════════════════════════════════════════════════════════════ */

/* ── Tablet ── */
@media (max-width: 1024px) {
  .kpi-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .hc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Phone / small tablet ── */
@media (max-width: 860px) {
  /* Collapse every multi-column grid — including inline ones — to one column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .kpi-5, .nut-kpi-row, .nut-rings, .partners-row, .hc-grid, .intel-row,
  .g2, .g3, .g6040, .g4060, .g5545, .g3565 { grid-template-columns: 1fr !important; }
  .kpi-grid-4, .kpi-grid-5 { grid-template-columns: 1fr 1fr !important; }

  /* WHO command header → stack */
  .who-cmd-hdr { flex-direction: column; align-items: stretch; gap: 12px; }
  .wch-div { display: none; }
  .wch-metrics { gap: 16px; justify-content: space-between; }
  .wch-tags { flex-direction: row; flex-wrap: wrap; }

  /* Pipeline rows: drop the source column, let name + bar breathe */
  .pl-src { display: none; }
  .pl-drug { width: auto; flex: 1; min-width: 90px; }

  /* Keep wide content scrollable instead of overflowing */
  .hm-scroll, .cmd-map-svg-wrap, .risk-wrap, .pl-wrap { overflow-x: auto; }
  .content { padding: 16px 12px 28px; }
  .sec-label-txt { font-size: 9px; }
}

/* ── Small phones ── */
@media (max-width: 560px) {
  .kpi-5, .kpi-grid-4, .kpi-grid-5 { grid-template-columns: 1fr !important; }
  .k5-val, .wch-score-val { font-size: 30px; }
  .ptlive-toast-wrap { left: 10px; right: 10px; }
  .ptlive-toast { max-width: none; }
  .ptl-trace { padding: 18px 15px; max-height: 90vh; }
  .topbar .avatar { display: none; }
}

/* ════════════════════════════════════════════════════════
   Mobile language switcher (injected by live.js).
   Hidden on desktop; the sidebar already carries language there.
   ════════════════════════════════════════════════════════ */
.m-lang { display: none; }
@media (max-width: 768px) {
  .m-lang {
    display: flex; position: fixed; right: 12px; bottom: 12px; z-index: 9500;
    background: rgba(8, 15, 30, 0.96); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px; overflow: hidden; box-shadow: 0 10px 32px rgba(0,0,0,0.55);
  }
  .m-lang button {
    background: transparent; border: none; color: #9fb2cc;
    font-size: 12px; font-weight: 800; padding: 9px 14px; cursor: pointer;
  }
  .m-lang button.on { background: #1a8fe0; color: #fff; }
}