/* ═══════════════════════════════════════════════════════════════════════════
 * Fluid ERP — PWA / Responsive Overlay
 *
 * Layered ON TOP of ds-v9.css + erp-bundle.css. Only contains media queries
 * + PWA-specific UI (install banner, offline badge, hamburger). Does NOT
 * touch the desktop styling.
 *
 * Breakpoints:
 *   ≤ 1024px (tablet)  — sidebars stack under main; smaller padding
 *   ≤  768px (mobile)  — full mobile layout: hamburger nav, single column
 *   ≤  480px (phone)   — tighter spacing, larger tap targets
 *
 * Must be loaded LAST (after ds-v9.css) for cascade to win.
 * =========================================================================== */

/* ── PWA chrome (always-on, all sizes) ─────────────────────────────────── */

#pwa-install-banner {
  position: fixed; bottom: 14px; right: 14px; left: 14px; max-width: 480px;
  margin: 0 auto; background: #fff; border: 2px solid var(--p, #4361ee);
  border-radius: 12px; padding: 12px 16px; z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  display: none; align-items: center; gap: 12px; font-family: Cairo, sans-serif;
}
#pwa-install-banner.show { display: flex; }
#pwa-install-banner .pi-ico { font-size: 28px; color: var(--p, #4361ee); flex-shrink: 0; }
#pwa-install-banner .pi-txt { flex: 1; font-size: 12.5px; line-height: 1.5; }
#pwa-install-banner .pi-txt b { display: block; font-size: 13px; margin-bottom: 2px; }
#pwa-install-banner button { border: none; border-radius: 7px; padding: 7px 14px;
  font-family: Cairo, sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; }
#pwa-install-banner .pi-yes { background: var(--p, #4361ee); color: #fff; }
#pwa-install-banner .pi-no  { background: transparent; color: var(--g500, #64748b); }

#pwa-offline-badge {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
  background: #f59e0b; color: #fff; padding: 5px 14px; border-radius: 9999px;
  font-family: Cairo, sans-serif; font-size: 11.5px; font-weight: 700;
  z-index: 9998; display: none; box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
#pwa-offline-badge.show { display: block; }
#pwa-offline-badge.online { background: #16a34a; animation: pwa-fade-out 2.5s forwards; }

@keyframes pwa-fade-out {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; display: none; }
}

#pwa-update-toast {
  position: fixed; bottom: 14px; right: 14px;
  background: #1e293b; color: #fff; padding: 11px 18px;
  border-radius: 9px; font-family: Cairo, sans-serif; font-size: 12px;
  z-index: 9999; display: none; align-items: center; gap: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
#pwa-update-toast.show { display: flex; }
#pwa-update-toast button { background: var(--p, #4361ee); color: #fff; border: none;
  padding: 5px 12px; border-radius: 5px; font-weight: 700; cursor: pointer; font-family: Cairo, sans-serif; font-size: 11.5px; }

/* ── Hamburger toggle (mobile-only chrome that lives in the topbar) ───── */

.pwa-burger {
  display: none;                  /* hidden on desktop; shown ≤768px */
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  background: transparent; border: none;
  border-radius: 7px; font-size: 17px;
  /* Theme-aware: follow the topbar's own icon colour so the burger stays
     visible on BOTH the default light unified topbar (--utb-ico:#5b6472) AND
     dark/colored navbar themes (--utb-ico:rgba(255,255,255,.82)). It used to be
     hardcoded color:#fff on rgba(255,255,255,.16) — invisible once the unified
     topbar became white (--utb-r1-bg:#ffffff). See tests/smoke_pwa.php guard. */
  color: var(--utb-ico, #5b6472);
  cursor: pointer; padding: 0; margin-left: 4px;
}
.pwa-burger:hover { background: var(--utb-hover-bg, rgba(15,23,42,.06));
  color: var(--utb-hover-text, #111827); }
/* Legacy dark .topbar (pre-unified) keeps the original white-on-dark treatment,
   since it doesn't define the --utb-* variables. */
.topbar .pwa-burger { color: #fff; background: rgba(255,255,255,.16); }
.topbar .pwa-burger:hover { background: rgba(255,255,255,.28); color: #fff; }

body.pwa-nav-open { overflow: hidden; }

/* The container the burger toggles. Wrap your actual nav in
   class="pwa-nav-drawer" (or topbar JS will inject one). */
.pwa-nav-drawer {
  position: fixed; top: 46px; right: 0; bottom: 0; width: min(85vw, 320px);
  background: #1e293b; color: #fff; z-index: 95;
  transform: translateX(100%); transition: transform .22s ease-out;
  overflow-y: auto; padding: 8px 0;
  font-family: Cairo, sans-serif;
}
.pwa-nav-drawer.open { transform: translateX(0); }
.pwa-nav-drawer a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; color: #e2e8f0; text-decoration: none;
  font-size: 13.5px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.pwa-nav-drawer a:hover, .pwa-nav-drawer a.active {
  background: rgba(67,97,238,.18); color: #fff;
}
.pwa-nav-drawer .grp-head {
  padding: 14px 18px 8px; font-size: 10.5px; font-weight: 800;
  color: #94a3b8; letter-spacing: .5px; text-transform: uppercase;
}
.pwa-nav-backdrop {
  position: fixed; inset: 46px 0 0 0; background: rgba(0,0,0,.45);
  z-index: 90; display: none;
}
.pwa-nav-backdrop.show { display: block; }

/* ════════════════════════════════════════════════════════════════════════
 * BREAKPOINT: ≤ 1024px (tablet portrait)
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* 3-pane layout — DS v9 .body is CSS Grid (340px 1fr); flex fallback for any legacy uses */
  .body {
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" "side" !important;
    flex-direction: column !important;
  }
  .side { width: 100% !important; max-width: 100% !important; grid-area: side !important; }
  .main { width: 100% !important; max-width: 100% !important; grid-area: main !important; }

  /* dh: tighter padding */
  .dh { padding: 11px 14px 0; }
  .dh-title { font-size: 16px !important; }

  /* sec card padding */
  .sec-b { padding: 12px 14px !important; }

  /* form grids: collapse 4-col → 2-col on tablet (keep 2/3-col layouts intact) */
  .fg4, .main .fg4, .sd-b .fg4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* list status bar: 5-col → 3-col on tablet */
  .lsb { grid-template-columns: repeat(3, 1fr) !important; }
  .lsb-i:nth-child(n+4) { border-top: 1px solid var(--bord-l, #e2e8f0); }

  /* mega-nav: drop to 2-column on tablet */
  .mega-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════════════
 * BREAKPOINT: ≤ 768px (mobile)
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Topbar: hide the desktop search, show the hamburger */
  .tb-search { display: none !important; }
  .pwa-burger { display: flex !important; }
  .topbar { padding: 0 10px; height: 46px; }
  .brand { font-size: 13px; gap: 6px; }
  .brand small { display: none; }
  .tb-r { gap: 5px; }
  .tb-icon { width: 32px; height: 32px; font-size: 14px; }   /* larger tap target */
  .tb-user .nm { display: none; }                            /* avatar only */

  /* Hide the desktop module nav strip — drawer takes over */
  .module-nav, .app-nav, .unified-nav { display: none !important; }

  /* ── Unified topbar (.utb / dsv9_render_unified_topbar — the default topbar
     since DS v9's merged module-nav + search rollout). Its own inline
     <style id="utb-style"> only ever shrank things for tablet widths
     (900/780/700/640px) — nobody gave it the real mobile collapse the
     legacy .topbar above has, and assets/pwa.js was only ever looking for
     .topbar, so the hamburger never got injected here at all. This is the
     actual root cause of "not responsive at all, especially the navbar". */
  .utb-r1 { height: 46px; padding: 0 8px; gap: 4px; }
  .utb-mod-nm { display: none !important; }         /* module name text — icon stays */
  .utb-groups { display: none !important; }         /* horizontal module-nav strip → drawer instead */
  .utb-r2 { display: none !important; }              /* full search row — Ctrl+K still works via keyboard */
  .utb-apps-btn span { display: none; }
  .utb-tools { gap: 2px; }
  .utb-icon, .utb-apps-btn { width: 32px; height: 32px; }    /* larger tap target, matches .tb-icon above */
  .utb-user .nm { display: none; }                   /* avatar only, matches .tb-user .nm above */

  /* Document header: compact */
  .dh { padding: 10px 12px 0; position: relative; top: 0; }
  .dh-row1 { gap: 10px; }
  .dh-title { font-size: 15px !important; }
  .dh-meta { font-size: 11px !important; flex-wrap: wrap; }
  .dh-icon { width: 36px !important; height: 36px !important; font-size: 16px !important; }
  .crumbs { font-size: 10.5px !important; }

  /* Flow strip: horizontal scroll instead of wrap */
  .flow-strip {
    overflow-x: auto; padding: 8px 12px !important;
    flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch;
  }
  .flow-step { flex-shrink: 0; }

  /* Body padding */
  .body, .body.has-sidebar { padding: 10px !important; gap: 10px; }
  .main, .side { padding: 0 !important; }

  /* Section cards full-width */
  .sec, .sd { border-radius: 8px; margin-bottom: 10px; }
  .sec-h, .sd-h { padding: 9px 12px !important; font-size: 12.5px !important; }
  .sec-b, .sd-b { padding: 11px 12px !important; }

  /* Tables: scroll horizontally rather than break */
  .sec-b table, .sd-b table, .ds-table, .am-tbl, .ak-tbl {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap; max-width: 100%;
  }

  /* Opt-in card-style table for narrow screens — add class .mob-cards on a <table> */
  table.mob-cards { display: block; white-space: normal; overflow-x: visible; }
  table.mob-cards thead { display: none; }
  table.mob-cards tbody, table.mob-cards tr { display: block; width: 100%; }
  table.mob-cards tr {
    border: 1px solid var(--bord-l, #e2e8f0); border-radius: 9px;
    padding: 10px 12px; margin-bottom: 8px; background: #fff;
  }
  table.mob-cards td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border: none; gap: 12px; font-size: 13px;
  }
  table.mob-cards td::before {
    content: attr(data-label); font-weight: 700; color: var(--g500, #64748b);
    font-size: 11.5px; flex-shrink: 0;
  }

  /* Form grids: collapse ALL fg variants (not just .main .fg*) — covers sidebar & standalone forms */
  .fg, .fg2, .fg3, .fg4,
  .sd-b .fg, .sd-b .fg2, .sd-b .fg3, .sd-b .fg4 {
    grid-template-columns: 1fr !important;
  }

  /* List status bar: 5-col → 2-col on mobile */
  .lsb { grid-template-columns: repeat(2, 1fr) !important; }
  .lsb-i { border-left: none !important; border-top: 1px solid var(--bord-l, #e2e8f0); }
  .lsb-i:nth-child(-n+2) { border-top: none !important; }
  .lsb-i:nth-child(odd) { border-left: 1px solid var(--bord-l, #e2e8f0) !important; }
  .lsb-v { font-size: 16px !important; }
  .lsb-l { font-size: 9.5px !important; }

  /* Document header actions: wrap & compact */
  .dh-r {
    width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 6px !important;
    margin-top: 8px;
  }
  .dh-r .btn { font-size: 12px !important; padding: 7px 10px !important; }

  /* Breadcrumbs: ellipsis instead of wrap */
  .crumbs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Document map: tighter rows + smaller icons */
  .dmap-step { padding: 7px 0 !important; gap: 8px !important; grid-template-columns: 26px 1fr auto !important; }
  .dmap-ico { width: 26px !important; height: 26px !important; font-size: 10.5px !important; }
  .dmap-name { font-size: 11.5px !important; }
  .dmap-type { font-size: 9.5px !important; }
  .dmap-summary { grid-template-columns: 1fr 1fr !important; }

  /* Modal dialogs: full-screen on mobile (covers payment_modal, chat dock detached modals, generic .modal) */
  .modal, .modal-card, .payment-modal, .chat-dock.detached {
    inset: 0 !important; width: 100vw !important; height: 100vh !important;
    max-width: 100vw !important; max-height: 100vh !important;
    border-radius: 0 !important; transform: none !important;
  }

  /* Chat dock: docked floating window → full-screen on mobile */
  .chat-dock { width: 100vw !important; height: calc(100vh - 46px) !important;
    bottom: 0 !important; right: 0 !important; left: 0 !important; top: 46px !important;
    border-radius: 0 !important;
  }

  /* Forms: full-width inputs, bigger tap targets */
  .fi, input[type="text"], input[type="number"], input[type="date"],
  input[type="email"], input[type="password"], select, textarea {
    width: 100% !important;
    min-height: 38px !important;
    font-size: 14px !important;            /* ≥16px prevents iOS zoom on focus */
    padding: 8px 10px !important;
  }
  /* iOS zooms on focus when font-size < 16px on inputs. Force ≥16 on the smallest case */
  input, select, textarea { font-size: 16px !important; }

  /* Save bar: full-width, stacked */
  .savebar {
    flex-direction: column-reverse !important; gap: 8px;
    padding: 10px 12px !important;
  }
  /* .right is a nowrap flex row by default → with many action buttons (draft
     state can have 5: save+review+approve+cancel+delete) it overflows the
     viewport. Let it span full width and wrap so the full-width buttons stack. */
  .savebar .right { width: 100%; flex-wrap: wrap; gap: 8px; }
  .savebar .btn { width: 100%; margin-inline-end: 0 !important; padding: 11px 14px !important; font-size: 13.5px !important; }

  /* Mega nav grid → 1 column */
  .mega-grid { grid-template-columns: 1fr !important; }

  /* KPI strips → 2 cols on phone */
  .kpi-strip { grid-template-columns: 1fr 1fr !important; }

  /* Dashboard cards: stack */
  .dash-grid, .card-grid { grid-template-columns: 1fr !important; }

  /* Buttons: ≥38px tap area */
  .btn { min-height: 38px; padding: 9px 14px; font-size: 13px; }
  .btn-tiny { min-height: 32px; padding: 7px 11px; font-size: 12px; }

  /* Hide secondary chrome on mobile */
  .kb-hint, .keyboard-hint-bar, .footer-hint { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
 * BREAKPOINT: ≤ 480px (small phones)
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .kpi-strip { grid-template-columns: 1fr !important; }
  .sec-h, .sd-h { font-size: 12px !important; }
  .dh-title { font-size: 14px !important; }
  .tb-icon { width: 30px; height: 30px; }
  .utb-icon, .utb-apps-btn { width: 30px; height: 30px; }
  .body, .body.has-sidebar { padding: 7px !important; }
  .sec, .sd { margin-bottom: 8px; }

  /* lsb: single column on tiny screens */
  .lsb { grid-template-columns: 1fr !important; }
  .lsb-i { border-left: none !important; border-top: 1px solid var(--bord-l, #e2e8f0); }
  .lsb-i:first-child { border-top: none !important; }

  /* dh-meta: hide secondary meta items on tiny screens */
  .dh-meta > *:nth-child(n+3) { display: none; }

  /* Flow strip: shrink even more */
  .flow-step { padding: 5px 8px !important; font-size: 10.5px !important; }
  .fs-lbl { font-size: 10px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Standalone mode (when launched as installed PWA)
 * ════════════════════════════════════════════════════════════════════════ */
@media all and (display-mode: standalone) {
  /* Safe area for iOS notch */
  .topbar { padding-top: env(safe-area-inset-top, 0); height: calc(46px + env(safe-area-inset-top, 0)); }
  .savebar { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0)) !important; }

  /* iOS rubber-banding scroll: prevent body overscroll, keep main scrollable */
  html, body { overscroll-behavior-y: none; }

  /* Hide "install" prompt forever — they already installed */
  #pwa-install-banner { display: none !important; }

  /* Show a subtle "standalone" pill in the topbar so the user knows they're in app mode */
  body::after {
    content: ""; position: fixed; top: 0; right: 0; width: 3px; height: 100%;
    background: linear-gradient(180deg, var(--p, #4361ee), transparent 60%);
    pointer-events: none; z-index: 9997; opacity: .35;
  }
}

/* Standalone + mobile combined: pull the drawer down to clear the notch */
@media all and (display-mode: standalone) and (max-width: 768px) {
  .pwa-nav-drawer { top: calc(46px + env(safe-area-inset-top, 0)); }
  .pwa-nav-backdrop { top: calc(46px + env(safe-area-inset-top, 0)); }
}

/* ════════════════════════════════════════════════════════════════════════
 * Print: don't print PWA chrome
 * ════════════════════════════════════════════════════════════════════════ */
@media print {
  #pwa-install-banner, #pwa-offline-badge, #pwa-update-toast,
  .pwa-burger, .pwa-nav-drawer, .pwa-nav-backdrop { display: none !important; }
}