/* Shared touch / phone / tablet / Windows polish for every portal (loaded after each page's own styles). */

/* ── every device ───────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, input, select, textarea, label, summary, [onclick], [role="button"], .nav-direct, .pg-btn, .pg-btn-outline, .act-btn {
  touch-action: manipulation;              /* no 300 ms tap delay, no accidental double-tap zoom */
  -webkit-tap-highlight-color: transparent;
}
/* slim, consistent scrollbars — Windows' default 17 px bars eat page width and look heavy */
* { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #64748b; background-clip: content-box; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
#sidebar { scrollbar-color: #4b7d66 transparent; }
#sidebar::-webkit-scrollbar-thumb { background: #4b7d66; background-clip: content-box; }
/* momentum scrolling everywhere something scrolls — harmless on a region that never actually overflows */
.tbl-wrap, .dataTables_wrapper, [style*="overflow:auto"], [style*="overflow-x:auto"], [style*="overflow-y:auto"] {
  -webkit-overflow-scrolling: touch;
}
/* overscroll-behavior: contain stops a swipe from also moving the page BEHIND this region (the classic use
   is a modal) — it must only go on the few regions that are genuinely their own independent scroll area.
   Earlier this also caught every inline-styled `overflow-x:auto` table wrapper (used all over the app purely
   so a wide table clips instead of stretching the page) — contain there made a touch that started on a table
   get swallowed instead of scrolling the page underneath it, which is what broke scrolling on a phone. Those
   only get the X-axis contained (stops a horizontal swipe triggering the browser's back/forward gesture),
   never the Y-axis, so a vertical swipe over a table still scrolls the page normally. */
#content, .modal, .modal-backdrop, #sidebar {
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.tbl-wrap, .dataTables_wrapper {
  overscroll-behavior-x: contain;
}
/* popups never grow past the screen — they scroll inside themselves */
.modal { max-width: 96vw; max-height: 92vh; max-height: 92dvh; overflow-y: auto; }
.modal-backdrop { overflow-y: auto; }
img, video, canvas, svg { max-width: 100%; }
/* notched phones: keep content clear of the notch / home bar */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.topbar { padding-top: env(safe-area-inset-top); }

/* Keep transient feedback clear of the topbar function search. Different
   portals historically used either #toast or a dynamically-created
   #_gbToast; one shared rule gives both a predictable, non-blocking home. */
#toast, #_gbToast {
  top: calc(var(--topbar-h, 56px) + 14px) !important;
  left: auto !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  min-width: 0 !important;
  width: max-content !important;
  max-width: min(420px, calc(100vw - 32px)) !important;
  transform: translateY(-8px) !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
#toast.show, #_gbToast.show { transform: translateY(0) !important; }

/* ── touch screens of any size (phones, tablets, Windows touch laptops) ── */
@media (pointer: coarse), (max-width: 900px) {
  /* iOS Safari's `100vh` is the height with the address bar hidden — every dashboard sizes its outer
     `body` and its scrolling `#content` column to a fixed `100vh`, so on a real phone (address bar
     visible) that's taller than what's actually on screen: the bottom of the page sits under the
     browser chrome, and because the parent (`body`) is `overflow:hidden`, a swipe that starts low on
     the page has nothing left to scroll and does nothing — this, not any scroll-blocking CSS, is what
     mostly reads as "scrolling doesn't work" on a phone. `100dvh` tracks the real visible height and
     updates live as the address bar shows/hides; unsupported browsers just keep the `100vh` set above
     this in each page's own stylesheet, so this is a pure improvement, never a regression. */
  html, body, #content { height: 100dvh; }
  button, .pg-btn, .pg-btn-outline, .act-btn, .topbar-logout { min-height: 42px; min-width: 42px; }
  td button, td .act-btn { min-height: 36px; min-width: 36px; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { min-height: 42px; font-size: 16px; }   /* 16px stops iOS zooming into the field */
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  .nav-direct, .nav-item, .nav-submenu a, #sidebar a { min-height: 46px; }
  td a, .dl-link, .card a { padding-top: 6px; padding-bottom: 6px; }
  .dataTables_wrapper .dataTables_length select { min-width: 72px; }
  .dataTables_wrapper .dataTables_paginate .paginate_button { min-height: 40px; min-width: 40px; display: inline-flex !important; align-items: center; justify-content: center; }
  .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
}

/* ── tablets ─────────────────────────────────────────────── */
@media (min-width: 601px) and (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .card-body { overflow-x: auto; }
}

/* ── phones ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  #toast, #_gbToast {
    top: auto !important;
    right: 12px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 24px) !important;
  }
  /* big money figures must never be clipped inside a KPI card */
  .kpi-card-grad .kpi-val, .kpi-val, .kpi-value { font-size: clamp(17px, 5.2vw, 24px) !important; overflow-wrap: anywhere; }
  .modal { width: 96vw !important; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions > * { flex: 1 1 auto; justify-content: center; }
  .tbl-wrap, .card-body { overflow-x: auto; }
  /* full-screen detail sheets (KPI drill-downs, cash-position transactions) */
  #pcKpiOverlay, .cpd-overlay { padding: 0 !important; }
  #pcKpiOverlay > div, .cpd-panel { border-radius: 0 !important; max-width: 100% !important; }
  /* keep the floating chat button from covering the last row of a list */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* Every page builds its own form layouts as raw inline `style="display:grid;grid-template-columns:…"` —
     fine at desktop width, but a fixed 2-6 column layout (a "110px label + 1fr input" relation row, two
     equal-width fields side by side, a KPI/card row typed as `repeat(N,1fr)`…) left as-is on a ~360px phone
     squeezes every input/label into a sliver, which is what read as "input boxes not properly aligned".
     `#content [style*="…"]` catches these WITHOUT touching every dashboard file by hand. Left alone on
     purpose: `repeat(auto-fill/auto-fit,minmax(…))` grids (already collapse to one column on their own once
     the container is narrower than one minmax() cell — forcing them changes nothing) and `repeat(7,` /
     `repeat(6,minmax(` / `repeat(5,minmax(` style grids (a calendar's day-of-week strip, a small fixed-size
     icon/rating row) — those must stay multi-column at any width or the widget itself breaks. */
  #content [style*="grid-template-columns:110px"], #content [style*="grid-template-columns: 110px"],
  #content [style*="grid-template-columns:1fr 1fr"], #content [style*="grid-template-columns: 1fr 1fr"],
  #content [style*="grid-template-columns:1.2fr 1fr"], #content [style*="grid-template-columns: 1.2fr 1fr"],
  #content [style*="grid-template-columns:1fr 2fr"], #content [style*="grid-template-columns: 1fr 2fr"],
  #content [style*="grid-template-columns:1fr 300px"], #content [style*="grid-template-columns: 1fr 300px"],
  #content [style*="grid-template-columns:2fr 1fr"], #content [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #content [style*="grid-template-columns:repeat(2,"], #content [style*="grid-template-columns: repeat(2,"],
  #content [style*="grid-template-columns:repeat(3,"], #content [style*="grid-template-columns: repeat(3,"],
  #content [style*="grid-template-columns:repeat(4,"], #content [style*="grid-template-columns: repeat(4,"] {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
}