/* ==========================================================================
   GBS Lighthouse — Global responsive layer (phones, Android, iOS, tablets)
   Desktop is UNTOUCHED: every rule lives inside a max-width media query.
   Loaded last in <head> so its !important rules win over inline page CSS.
   ========================================================================== */

/* Never let media overflow the viewport (safe at all sizes) */
img, svg, canvas, video, iframe { max-width: 100%; }
* { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ----------------------------- TABLET (<= 900px) ----------------------------- */
@media (max-width: 900px){
  .wrap, .container, .page, main { padding-left: 16px !important; padding-right: 16px !important; }
  .cards, .kpi, .kpis, .kpirow, .stats, .stat-grid, .metrics,
  .grid:not(table){ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [style*="grid-template-columns"]:not(table){ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .split, .twocol { gap: 14px !important; }
  .topbar, .top, .top .in, .wbtop, .hdr-top, .apphead, .htop, .ob-header, .ob-header > *,
  header, .header, .appbar, .navbar, .toolbar {
    flex-wrap: wrap !important; row-gap: 8px !important;
  }
  .topbar, .apphead, .ob-header { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ----------------------------- PHONE (<= 640px) ----------------------------- */
@media (max-width: 640px){
  html, body { overflow-x: hidden; }
  /* flex panes must not force widths wider than the screen (e.g. map two-pane) */
  .card, .mapcard, .side, .panel, .pane, .col { min-width: 0 !important; }
  .layout, .row.flex, .split { flex-wrap: wrap !important; }
  .mapcard, .side { width: auto !important; flex: 1 1 100% !important; }
  .stat { grid-template-columns: 1fr !important; }
  /* letter-size print docs (e.g. demand-planning packing/PO sheet) scale to screen */
  .pl-doc, .printdoc, .doc-sheet { width: 100% !important; max-width: 100% !important; padding: 18px !important; }
  body { font-size: 15px; }
  .wrap, .container, .page, main { padding-left: 12px !important; padding-right: 12px !important; }

  .cards, .kpi, .kpis, .kpirow, .stats, .stat-grid, .metrics,
  .grid:not(table), .split, .twocol{ grid-template-columns: 1fr !important; }
  [style*="grid-template-columns"]:not(table){ grid-template-columns: 1fr !important; }
  .split, .twocol { display: block !important; }

  table, table.grid, #tbl, #mainTable, #ctab, .tbl{
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  table thead th { white-space: nowrap; }

  /* top navigation / header bars: wrap instead of running off-screen */
  .topbar, .top, .top .in, .wbtop, .hdr-top, .apphead, .htop, .ob-header, .ob-header > *,
  header, .header, .appbar, .navbar { flex-wrap: wrap !important; row-gap: 8px !important; }
  .topbar { padding: 12px 14px !important; gap: 8px 12px !important; }
  .apphead, .ob-header { padding-left: 14px !important; padding-right: 14px !important; }
  /* right-aligned link clusters drop to their own full-width row */
  .topbar .right, .top .right, .apphead .right, .hdr-top .right,
  [class*="top"] .right, [class*="head"] .right {
    margin-left: 0 !important; width: 100% !important; gap: 14px !important;
    flex-wrap: wrap !important; row-gap: 8px !important; }
  .topbar .ttl { font-size: 14px !important; }

  .toolbar, .filters, .filterbar, .tabs, .tabbar, .actions, .btnrow,
  .topbar nav, header nav { flex-wrap: wrap !important; }
  .tabs, .tabbar { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .modal, .modal .box{ width: 94vw !important; max-width: 94vw !important; }
  .modal .box{ padding: 16px 16px !important; max-height: 88vh; overflow-y: auto; }
  .modal { max-height: 92vh; }

  .btn, button, .tab, select, input[type=button], input[type=submit]{ min-height: 40px; }
  .btn { padding-top: 9px; padding-bottom: 9px; }

  svg#usmap, .mapwrap svg, #map svg { width: 100% !important; height: auto !important; }

  h1 { font-size: 20px !important; }
  h2 { font-size: 17px !important; }
}

/* --------------------------- Small phones (<= 380px) --------------------------- */
@media (max-width: 380px){
  .wrap, .container, .page, main { padding-left: 10px !important; padding-right: 10px !important; }
  body { font-size: 14.5px; }
}