/* ============================================================================
   dswd-responsive.css — every screen the system will actually meet

   Breakpoints chosen from the device list in Chrome's device toolbar, because
   those are the widths this will be opened at: a social worker on a Galaxy
   at a payout site, a supervisor on an iPad, an encoder on a 1366 office
   laptop.

     320   Galaxy Fold, folded — the narrowest screen still in use
     360   Galaxy S8/S20/S22, and most budget Android handsets
     375   iPhone SE, iPhone 12/13 mini
     390   iPhone 12/13/14/15 Pro
     414   iPhone XR / 11 / Plus sizes, Pixel 7
     430   iPhone 15 Pro Max
     540   Surface Duo, folded
     768   iPad Mini portrait — where the sidebar becomes a drawer
     820   iPad Air portrait
     912   Surface Pro 7
    1024   iPad Pro portrait, iPad Mini landscape
    1180   iPad Air landscape
    1280   the common laptop, and iPad Pro landscape
    1366   the single most common office laptop in the Philippines
    1440   MacBook Pro 15 / larger laptops
    1920   desktop
    2560   wide desktop

   Loaded after dswd-surfaces.css, so it settles layout last.
   ========================================================================= */

/* ═══════════════════════════════════════════════════════════════════════
   FOUNDATION — applies at every size
   ═══════════════════════════════════════════════════════════════════════ */

/* Nothing may push the page sideways. One overflowing table has been the
   cause of every "the whole site scrolls left and right on my phone" report
   I have ever seen. */
html, body{ max-width: 100%; overflow-x: hidden; }

/* Tables are the usual culprit: they cannot wrap, so they get their own
   scroller rather than dragging the page with them. */
.table-responsive, .mod-table-scroll, .q-table-wrap, .adv-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Long unbroken strings — a control number, an email, a URL — break rather
   than widening their container. */
.q-ctrl, .audit-meta, .cs-where, .ph-link code, .info-row .v{
  overflow-wrap: anywhere;
}

/* Images never exceed their box. */
img, video, canvas, svg{ max-width: 100%; height: auto; }

/* The notch and the home indicator on modern phones. */
body{
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ═══════════════════════════════════════════════════════════════════════
   320px — Galaxy Fold folded. Everything must still be usable here.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 359px){
  :root{ --ux-gap-md: 12px; --ux-gap-lg: 20px; }

  .content, .citizen-content, .mod-body, .container{ padding-left: 12px; padding-right: 12px; }

  /* One column for everything. At this width two columns leaves each about
     140px, which is narrower than the content inside them. */
  .kpi-grid, .chart-grid, .mod-stat-grid, .cs-cols, .svc-grid,
  .row > [class*="col-"]{ grid-template-columns: 1fr !important; }
  .row > [class*="col-"]{ flex: 0 0 100%; max-width: 100%; }

  .kpi-val, .ds-val, .mod-stat-val{ font-size: 1.5rem; }
  .dash-hello{ padding: 16px 18px; }
  .dash-hello h2{ font-size: 1.05rem; }

  /* Actions stack full width rather than wrapping into ragged rows. */
  .dash-actions, .ux-actions, .cap-actions, .svc-toolbar{ flex-direction: column; }
  .dash-actions > *, .ux-actions > *, .cap-actions > *{ width: 100%; justify-content: center; }

  /* Tabs scroll instead of wrapping to four lines. */
  .tab-nav, .filter-row, .dir-tabs{
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .tab-nav::-webkit-scrollbar, .filter-row::-webkit-scrollbar{ height: 0; }

  .ux-confirm-box, .ph-box{ padding: 20px 18px; }
  .ph-qr{ min-height: 170px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   360–430px — the ordinary phone. Most citizen traffic is here.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 360px) and (max-width: 575px){
  .content, .citizen-content, .mod-body{ padding-left: 14px; padding-right: 14px; }

  .kpi-grid, .mod-stat-grid{ grid-template-columns: 1fr !important; }
  .chart-grid{ grid-template-columns: 1fr !important; }
  .chart-wrap{ height: 230px; }

  /* A KPI reads better as a row than a tall card on a narrow screen — the
     figure and its label side by side rather than stacked. */
  .kpi{ min-height: 0; padding: 16px 18px; }
  .kpi-val{ font-size: 1.65rem; }

  .section{ padding: 44px 0; }
  .section-title{ font-size: 1.5rem; }
  .hero{ min-height: auto; padding: 84px 0 48px; }
  .hero h1{ font-size: 1.9rem; }

  /* The registration stepper turns horizontal, since a vertical one eats the
     screen before the form begins. */
  .reg-steps{ flex-direction: row; overflow-x: auto; gap: 8px; }
  .reg-steps .step-label{ display: none; }

  /* Two columns of programme cards do not fit; one does. */
  .hero-programs-mini{ grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   576–767px — large phones landscape, small tablets portrait
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 576px) and (max-width: 767px){
  .kpi-grid, .mod-stat-grid{ grid-template-columns: repeat(2, 1fr) !important; }
  .chart-grid{ grid-template-columns: 1fr !important; }
  .chart-wrap{ height: 250px; }
  .section{ padding: 54px 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   768–991px — iPad Mini and iPad Air portrait.

   The sidebar becomes a drawer here rather than at 576px: on an 820px iPad a
   288px sidebar leaves 530px of content, which is too little for the tables
   these pages carry.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991px){
  .dswd-sidebar, .citizen-sidebar, .mod-sidebar{
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1080;
  }
  .dswd-sidebar.open, .citizen-sidebar.open, .mod-sidebar.open{ transform: none; }
  .main-wrap, .main-content, .citizen-main, .mod-main, .content-wrap{ margin-left: 0 !important; }

  /* The burger has to be present, or the drawer cannot be opened. */
  .sidebar-toggle, .dswd-burger, .mod-burger{ display: inline-flex !important; }

  .kpi-grid, .mod-stat-grid{ grid-template-columns: repeat(2, 1fr) !important; }
  .chart-grid{ grid-template-columns: 1fr !important; }
  .chart-wrap{ height: 270px; }

  /* The CMS editors go single column — side by side at 768 gives each 360px,
     which is narrower than the forms inside them. */
  .mod-editor-row > [class*="col-"]{ flex: 0 0 100%; max-width: 100%; }
  .cms-split{ grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   992–1279px — Surface Pro, iPad Pro portrait, small laptops.
   The sidebar returns, but narrower.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (max-width: 1279px){
  :root{ --sidebar-w: 240px; }

  .kpi-grid{ grid-template-columns: repeat(2, 1fr); }
  .chart-grid{ grid-template-columns: 1fr; }
  .chart-wrap{ height: 280px; }
  .cms-split{ grid-template-columns: 1fr; }

  /* Tables get dense rather than scrolling, at this width there is room. */
  .q-table th, .q-table td{ padding-left: 14px; padding-right: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   1280–1439px — the common office laptop, including 1366×768.

   1366 is the width to get right: it is the most common laptop screen in
   Philippine government offices, and at 768px tall the vertical room matters
   as much as the horizontal.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) and (max-width: 1439px){
  :root{ --sidebar-w: 264px; }
  .kpi-grid{ grid-template-columns: repeat(4, 1fr); }
  .chart-grid{ grid-template-columns: repeat(2, 1fr); }
  .chart-wrap{ height: 260px; }
}

/* Short screens — 1366×768 and every laptop with a 720p panel. Vertical space
   is the scarce resource, so the tall decorative blocks give some back. */
@media (min-width: 992px) and (max-height: 800px){
  .dash-hello{ padding: 16px 22px; }
  .dash-hello h2{ font-size: 1.15rem; }
  .chart-wrap{ height: 220px; }
  .hero{ min-height: 78vh; }
  .section{ padding: 60px 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   1440px and up — full desktop
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px){
  .kpi-grid{ grid-template-columns: repeat(4, 1fr); }
  .chart-grid{ grid-template-columns: repeat(2, 1fr); }
  .chart-wrap{ height: 300px; }
}

/* Beyond 1920 the content stops widening. A table line 2400px long is harder
   to read than the same table at 1600 — the eye loses its place between the
   name at the left and the status at the right. */
@media (min-width: 1920px){
  .content, .citizen-content, .mod-body{
    max-width: 1720px; margin-left: auto; margin-right: auto;
  }
  .chart-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 2560px){
  .content, .citizen-content, .mod-body{ max-width: 1920px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ORIENTATION AND INPUT
   ═══════════════════════════════════════════════════════════════════════ */

/* A phone held sideways has almost no height. Anything sized in vh has to
   give way, or the form disappears behind the keyboard. */
@media (max-height: 480px) and (orientation: landscape){
  .hero{ min-height: auto; padding: 70px 0 40px; }
  .cap-stage{ max-height: 62vh; }
  .dswd-intro-seal{ width: min(38vmin, 200px); height: min(38vmin, 200px); }
  .ux-confirm-box, .ph-box{ max-height: 88vh; overflow-y: auto; }
  .modal-body{ max-height: 60vh; overflow-y: auto; }
}

/* Touch, whatever the width. A hover state that sticks after a tap reads as
   a broken button. */
@media (hover: none){
  .kpi:hover, .card:hover, .panel:hover, .mod-card:hover,
  .prog-cat-card:hover, .news-card:hover{ transform: none; }
  /* Bigger targets where fingers, not cursors, are doing the work. */
  .q-table td a, .mod-table td a, .dir-person a{ min-height: 44px; display: inline-flex; align-items: center; }
}

/* iOS zooms the page in when a field's text is under 16px. Setting the inputs
   to 16px is the only reliable way to stop it. */
@media (max-width: 991px){
  input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="date"], select, textarea{
    font-size: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRINT — a caseworker printing a record wants the record, not the chrome
   ═══════════════════════════════════════════════════════════════════════ */
@media print{
  .dswd-sidebar, .citizen-sidebar, .mod-sidebar,
  .topbar, .citizen-topbar, .dswd-govstrip, .dswd-flagbar,
  .dash-actions, .tab-nav, .filter-bar, .no-print,
  .dswd-totop, .ds-a11y-fab, .dswd-emg-fab, .dswd-cookie-fab{ display: none !important; }

  .main-wrap, .main-content, .citizen-main, .mod-main{ margin-left: 0 !important; }
  .panel, .card, .mod-card, .dswd-card{ box-shadow: none !important; break-inside: avoid; }
  .kpi-grid{ grid-template-columns: repeat(4, 1fr) !important; }
  a[href]::after{ content: ""; }        /* no printed URLs after every link */
}