/* ═══════════════════════════════════════════════════════════════════════════
   AYAN ERP — mobile safety-net layer (added 2026-10-10)
   Purely additive: loaded LAST (after the inline "mobile-optimize" block in index.php), no
   markup / id / class / JS changes. Targets 768px, 480px and 320px.
   Served from 'self', so it needs no CSP nonce.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Never let one wide child widen the whole page (the usual cause of "everything is tiny / shifted") */
html, body { max-width: 100%; }
body { overflow-x: hidden; }   /* body only: keeps position:sticky and iOS momentum scrolling working */
img, svg, canvas, video { max-width: 100%; height: auto; }

@media (max-width: 768px) {
  /* ── Tables: scroll sideways inside their own box instead of squashing or overflowing ── */
  .page table:not(.ay-kv):not(.tot),
  .modal table:not(.ay-kv):not(.tot),
  #pg-inventory table, #pg-invmovement table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page table th, .page table td, .modal table th, .modal table td {
    white-space: nowrap;           /* keep columns readable; the table scrolls */
  }
  .page table td.wrap, .page table td .wrap, .modal table td.wrap { white-space: normal; min-width: 140px; }
  .table-wrap, .ayan-scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* ── Multi-column grids collapse so labels/inputs never overlap ── */
  .kpi-grid, .adv-kpi-grid, .ayan-gl-summary, .ayan-integrity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpi-grid-3, .chart-grid, .chart-grid-3, .ust-grid, .ust-nutrition-grid, .um-perms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .form-grid, .form-grid-3, .form-grid-2, .um-field-group, .ust-grid-2, .kpi-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .chart-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .ntx-rows, .ntx-total-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) !important; }
  .se-ar { grid-template-columns: minmax(0, 1fr) auto !important; row-gap: 4px; }

  /* ── Modals: fit the screen, scroll inside, comfortable padding ── */
  .overlay { padding: 8px !important; align-items: flex-end; }
  .modal { padding: 16px !important; width: 100% !important; max-width: 100% !important;
           max-height: calc(var(--app-vh, 100vh) * .94); overflow-y: auto; -webkit-overflow-scrolling: touch;
           border-radius: 14px 14px 0 0; }
  .modal-title { flex-wrap: wrap; gap: 6px; word-break: break-word; }

  /* ── Touch targets & wrapping ── */
  .btn, button, .nav-item, .tab, select { min-height: 40px; }
  .btn-sm, .btn-xs { min-height: 40px; min-width: 40px; }
  td .btn, td button { margin: 2px 0; }
  .page-header, .toolbar, .filters, .filter-bar, .btn-row, .actions { flex-wrap: wrap !important; gap: 8px; }
  h1, h2, h3, .kpi-label, .kpi-value, .kpi-sub, td, th, label { overflow-wrap: anywhere; }
  .kpi-value { font-size: clamp(15px, 4.6vw, 22px) !important; }
}

@media (max-width: 480px) {
  /* Stacked forms */
  .form-grid, .form-grid-3, .form-grid-2, .um-field-group, .ust-grid, .ust-grid-2, .ust-nutrition-grid,
  .um-perms-grid, .kpi-grid-3, .kpi-grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .kpi-grid, .adv-kpi-grid, .ayan-gl-summary, .ayan-integrity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .form-grid > *, .form-grid-2 > *, .form-grid-3 > * { min-width: 0; }
  .form-grid input, .form-grid select, .form-grid textarea,
  .modal input, .modal select, .modal textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
  .modal-footer, .modal .btn-row { flex-direction: column-reverse; }
  .modal-footer .btn, .modal .btn-row .btn { width: 100%; }
}

@media (max-width: 340px) {
  .kpi-grid, .adv-kpi-grid, .ayan-gl-summary, .ayan-integrity-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .content, .page { padding: 8px !important; }
  .modal { padding: 12px !important; }
}

/* Notice shown by the session handler (assets/ayan_session_guard.js) */
.ayan-notice { position: fixed; left: 8px; right: 8px; top: calc(8px + env(safe-area-inset-top)); z-index: 2147483000;
  background: #1f2937; color: #fff; border-radius: 10px; padding: 12px 14px; font: 600 14px/1.4 system-ui, sans-serif;
  display: flex; gap: 10px; align-items: center; justify-content: space-between; box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.ayan-notice--warn { background: #92400e; }
.ayan-notice button { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 8px; background: #fff; color: #111827; font-weight: 700; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════════
   2026-10-10 — touch targets, table scroll wrappers, KPI stacking to 320px,
   grand-total rows and the Logistics & QC Hub. Additive only.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px), (pointer: coarse) {
  /* every control a finger can hit is at least 40px tall */
  .btn, button, .nav-item, .tab, select, a.btn, [role="button"], [data-x-click].btn,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), textarea {
    min-height: 40px;
  }
  .btn-sm, .btn-xs, .icon-btn, td .btn, td button, .pb-btn, .pb-sel, .pb-search { min-height: 40px !important; min-width: 40px; }
  /* checkboxes / radios keep their size but get a 40px hit area through padding on their label */
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
  /* 16px text in inputs stops iOS from zooming the page on focus */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
}

@media (max-width: 768px) {
  /* clean horizontal scroll for any table wrapper the pages use */
  .table-wrap, .table-scroll, .table-responsive, .tbl-wrap, .table-container, .lqc-wrap, .ayan-scrollx {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; overscroll-behavior-x: contain;
  }
  .page table tfoot td, .modal table tfoot td { white-space: nowrap; }

  /* KPI / metric grids written inline in the pages (style="grid-template-columns:repeat(4,1fr)") */
  .page [style*="grid-template-columns:repeat(3,1fr)"], .page [style*="grid-template-columns: repeat(3, 1fr)"],
  .page [style*="grid-template-columns:repeat(4,1fr)"], .page [style*="grid-template-columns: repeat(4, 1fr)"],
  .page [style*="grid-template-columns:repeat(5,1fr)"], .page [style*="grid-template-columns: repeat(5, 1fr)"],
  .page [style*="grid-template-columns:repeat(6,1fr)"], .page [style*="grid-template-columns: repeat(6, 1fr)"],
  .modal [style*="grid-template-columns:repeat(3,1fr)"], .modal [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .kpi-card, .adv-kpi, .stat-card, .lqc-kpi { min-width: 0; }
}

@media (max-width: 360px) {
  /* 320–360px phones: every KPI / metric grid becomes one column, nothing overflows sideways */
  .kpi-grid, .kpi-grid-2, .kpi-grid-3, .adv-kpi-grid, .ayan-gl-summary, .ayan-integrity-grid, .lqc-kpis,
  .page [style*="grid-template-columns:repeat(2,1fr)"], .page [style*="grid-template-columns: repeat(2, 1fr)"],
  .page [style*="grid-template-columns:repeat(3,1fr)"], .page [style*="grid-template-columns: repeat(3, 1fr)"],
  .page [style*="grid-template-columns:repeat(4,1fr)"], .page [style*="grid-template-columns: repeat(4, 1fr)"],
  .page [style*="grid-template-columns:repeat(5,1fr)"], .page [style*="grid-template-columns: repeat(5, 1fr)"],
  .page [style*="grid-template-columns:repeat(6,1fr)"], .page [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .kpi-value, .lqc-kpi .v { font-size: clamp(15px, 6vw, 20px) !important; }
}

@media print {
  /* filter bars and the hub's buttons never reach paper; grand totals print once at the end */
  .ayan-flt, .lqc-bar, .lqc-tabs, .lqc-btn, .lqc-iso { display: none !important; }
  tfoot.ayt-gt { display: table-row-group !important; }
  thead { display: table-header-group; }
}