/* ══════════════════════════════════════════════
   MOBILE.CSS — ENSURE HSE Platform
   Full mobile-first responsive layer
   Applies at ≤ 768px
══════════════════════════════════════════════ */

/* ───────────────────────────────────────────
   1. ROOT + BODY
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  body {
    overflow: auto;
    height: auto;
    -webkit-text-size-adjust: 100%;
  }
  .app {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  /* ── Sidebar hidden on mobile ── */
  .sidebar { display: none !important; }

  /* ── Main content ── */
  .main { min-height: 100vh; overflow: visible; }
}

/* ───────────────────────────────────────────
   2. TOPBAR
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .topbar {
    /* Honour the iPhone notch / Dynamic Island so the logo, hamburger
       and notification bell never slide under the status bar. */
    padding: env(safe-area-inset-top) 12px 0;
    height: calc(52px + env(safe-area-inset-top));
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Hide the text page-title on mobile — logo takes center stage */
  .page-title { display: none !important; }

  /* Hamburger + search buttons. Visually match .notif-bell on the
     right (borderless icon, fills with bg3 only on hover/active) so
     the three header controls read as one consistent set. */
  .mob-header-btn {
    display: flex !important;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: var(--text2);
    font-size: 16px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s;
  }
  .mob-header-btn:hover,
  .mob-header-btn:active {
    background: var(--bg3);
    color: var(--text);
  }

  /* Centered logo in topbar */
  .mob-topbar-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
  }
  .mob-topbar-logo-text {
    font-family: 'Fugaz One', cursive;
    font-size: 22px;
    font-weight: 400;
    color: var(--text);
    letter-spacing: 0px;
    line-height: 1;
  }

  /* Hide desktop buttons, show mobile-specific one */
  .topbar-right .btn-secondary { display: none !important; }
  .topbar-right .btn-primary   { display: none !important; }

  /* Context action button (shown via JS per page) */
  #mob-topbar-action {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #mob-topbar-action .btn {
    padding: 7px 13px;
    font-size: 12px;
    min-height: 34px;
    border-radius: 9px;
  }
}

/* Hide mob-topbar-logo on desktop */
@media (min-width: 769px) {
  .mob-topbar-logo { display: none !important; }
}

/* ───────────────────────────────────────────
   3. CONTENT + SAFE AREA
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .content {
    padding: 14px 12px calc(80px + env(safe-area-inset-bottom)) 12px;
    overflow: visible;
  }
}

/* ───────────────────────────────────────────
   4. STAT CARDS
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 14px;
  }
  .stat-card {
    padding: 12px 12px;
    border-radius: 12px;
  }
  .stat-label {
    font-size: 9.5px;
    margin-bottom: 5px;
    letter-spacing: 0.6px;
  }
  .stat-value {
    font-size: 24px !important;
    letter-spacing: -0.5px;
  }
  .stat-sub {
    font-size: 10px;
    margin-top: 3px;
  }
  .stat-bar { margin-top: 8px; }
}

@media (max-width: 400px) {
  .stat-value { font-size: 20px !important; }
}

/* ───────────────────────────────────────────
   5. PANELS + TWO-COL
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .panel {
    padding: 12px;
    border-radius: 12px;
  }
  .panel-header { margin-bottom: 10px; }
  .panel-title  { font-size: 12.5px; }
  .panel-link   { font-size: 11px; }

  .two-col {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
}

/* ───────────────────────────────────────────
   6. TABLES
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }
  .tbl { min-width: 460px; font-size: 12px; }
  .tbl th {
    padding: 6px 8px;
    font-size: 9px;
    letter-spacing: 0.5px;
  }
  .tbl td {
    padding: 8px 8px;
    font-size: 12px;
  }
  .hide-mob { display: none !important; }
}

/* ───────────────────────────────────────────
   7. TABS
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 5px;
    margin-bottom: 12px;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* ───────────────────────────────────────────
   8. FORMS (≥16px prevents iOS auto-zoom)
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .finput, .fsel, .fta {
    font-size: 16px !important;
    padding: 10px 12px;
    border-radius: 10px;
  }
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .fg.full { grid-column: 1; }
  .flbl { font-size: 12px; }

  /* Upload zone */
  .upload-zone { padding: 18px 14px; }
}

/* ───────────────────────────────────────────
   9. BUTTONS
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .btn     { min-height: 40px; }
  .btn-sm  { min-height: 32px; padding: 6px 10px; font-size: 11px; }
  .mob-full-btn { width: 100%; justify-content: center; }
}

/* ───────────────────────────────────────────
   10. BADGES
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .bdg { font-size: 10.5px; padding: 2px 7px; }
}

/* ───────────────────────────────────────────
   11. BOTTOM NAV
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .mob-nav {
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    z-index: 300;
    padding-bottom: env(safe-area-inset-bottom);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -1px 20px rgba(0,0,0,0.07);
  }
  .mob-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 58px;
    padding: 0 4px;
  }
  .mob-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 8px;
    border-radius: 12px;
    cursor: pointer;
    flex: 1;
    max-width: 72px;
    min-width: 0;
    transition: background 0.15s;
    position: relative;
  }
  .mob-nav-item.active { background: var(--navy-l); }

  /* SVG icon wrapper */
  .mob-nav-item .mni {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0; /* hide any emoji fallback */
  }
  .mob-nav-item .mni svg {
    width: 22px;
    height: 22px;
    stroke: var(--text3);
    stroke-width: 1.75;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.15s;
  }
  .mob-nav-item.active .mni svg { stroke: var(--navy); }

  /* Label */
  .mob-nav-item .mnl {
    font-size: 9.5px;
    font-weight: 500;
    color: var(--text3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
    transition: color 0.15s;
  }
  .mob-nav-item.active .mnl { color: var(--navy); font-weight: 700; }

  /* Quick Capture button — sits raised above the rest of the bottom nav. */
  .mob-nav-quick {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    flex: 1;
    max-width: 72px;
    min-width: 0;
    cursor: pointer;
    margin-top: -22px;             /* raise above the nav row */
    position: relative;
  }
  .mob-nav-quick-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--safety-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(234, 88, 12, .35), 0 2px 4px rgba(0,0,0,.12);
    transition: transform .12s ease;
  }
  .mob-nav-quick:active .mob-nav-quick-circle { transform: scale(.94); }
  .mob-nav-quick-label {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: var(--safety-orange) !important;
    margin-top: 1px;
  }

  /* Badge dot */
  .mob-nav-item .mnb {
    position: absolute;
    top: 2px;
    right: 8px;
    background: var(--safety-orange);
    color: white;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 10px;
    min-width: 14px;
    text-align: center;
    line-height: 1.4;
  }
}

/* ───────────────────────────────────────────
   12. MOBILE DRAWER
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .mob-drawer {
    width: 82%;
    max-width: 310px;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    /* Push the drawer's own header below the iPhone notch / Dynamic Island. */
    padding-top: env(safe-area-inset-top);
  }
  .mob-drawer .nav-item {
    padding: 10px 12px;
    gap: 10px;
    font-size: 13px;
    border-radius: 10px;
  }
  .mob-drawer .nav-item .nav-icon {
    font-size: 16px;
  }

  /* Drawer footer: user row + actions */
  .mob-drawer-footer {
    padding: 12px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .mob-drawer-footer .user-row {
    padding: 8px 10px;
    border-radius: 10px;
    margin-bottom: 8px;
  }
  .mob-drawer-actions {
    display: flex;
    gap: 8px;
  }
  .mob-drawer-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.12s;
  }
  .mob-drawer-btn:hover { background: var(--navy-l); color: var(--navy); border-color: var(--navy-m); }
  .mob-drawer-btn.danger { background: var(--danger-l); color: var(--danger); border-color: #fca5a5; }
  .mob-drawer-btn svg {
    width: 14px; height: 14px;
    stroke: currentColor; stroke-width: 1.75;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
  }
}

/* ───────────────────────────────────────────
   13. FAB
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .mob-fab {
    display: flex !important;
    position: fixed;
    bottom: calc(70px + env(safe-area-inset-bottom));
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--navy);
    color: white;
    border: none;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(30,58,138,0.38);
    z-index: 250;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
    line-height: 1;
  }
  .mob-fab:active {
    transform: scale(0.9);
    box-shadow: 0 2px 8px rgba(30,58,138,0.3);
  }
}

/* ───────────────────────────────────────────
   14. KPI MODAL — bottom sheet
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  #kpi-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #kpi-modal > div {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
  }

  /* Single column layout inside KPI modal */
  #kpi-modal [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Top control row: stack year/month */
  #kpi-modal [style*="grid-template-columns:1fr 1fr 2fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* ───────────────────────────────────────────
   15. DETAIL VIEWS (Incident / CAPA / NCR)
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* Back-button header rows */
  #inc-detail > div:first-child,
  #capa-detail > div:first-child,
  #ncr-detail > div:first-child,
  #doc-detail > div:first-child,
  #chem-detail > div:first-child {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }

  /* Incident new form — two-col → one-col */
  #inc-new .two-col,
  #inc-new [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ───────────────────────────────────────────
   16. STEPPER (SG generic + CAPA)
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .sg-stepper {
    flex-direction: column !important;
    width: auto;
    overflow-x: visible;
  }
  .sg-step {
    flex-direction: row;
    align-items: center;
    flex: none;
    width: 100%;
    gap: 12px;
    padding: 6px 0;
    min-width: 0;
  }
  .sg-step-row {
    flex-direction: column;
    align-items: center;
    width: auto;
    flex-shrink: 0;
  }
  .sg-step-line  { width: 2px; height: 16px; flex: none; margin: 0; }
  .sg-step-dot   { width: 26px; height: 26px; font-size: 10px; }
  .sg-step-label {
    margin-top: 0;
    font-size: 12px;
    white-space: normal;
    text-align: left;
    padding: 0;
    flex: 1;
  }
}

/* ───────────────────────────────────────────
   17. ACTIVITY FEED
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .act { padding: 7px 0; gap: 8px; }
  .act-text  { font-size: 11.5px; }
  .act-time  { font-size: 10px; }
  .act-dot   { width: 7px; height: 7px; margin-top: 4px; }
}

/* ───────────────────────────────────────────
   18. SETTINGS PAGE
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* The outer flex wrapper inside #p-settings */
  #p-settings > div {
    flex-direction: column !important;
    gap: 0 !important;
    min-height: auto !important;
  }

  /* Left nav panel — make it full width, remove sticky + fixed width */
  #p-settings > div > div:first-child {
    width: 100% !important;
    flex-shrink: 0 !important;
    position: relative !important;
    top: auto !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 10px 8px 0 !important;
  }
  /* Hide the "Settings" label and Save button inside the nav panel on mobile */
  #p-settings > div > div:first-child > div:first-child { display: none !important; }
  #p-settings > div > div:first-child > div:last-child  { display: none !important; }

  /* Vnav becomes horizontal pill scroller */
  #settings-vnav {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 5px !important;
    padding: 6px 4px 10px !important;
    scrollbar-width: none;
  }
  #settings-vnav::-webkit-scrollbar { display: none; }

  .s-vnav-item {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 7px 13px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    margin-bottom: 0 !important;
    border: 1px solid var(--border) !important;
  }
  .s-vnav-item.active {
    background: var(--navy-l) !important;
    color: var(--navy) !important;
    border-color: var(--navy-m) !important;
  }
  .s-vnav-icon { display: none !important; }

  /* Content area: full width */
  #p-settings > div > div:last-child {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ───────────────────────────────────────────
   19. KPI MODULE (stat cards grid + month table + dashboard)
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* KPI page stat cards */
  #kpi-stat-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Monthly KPI table — opt OUT of the table-to-card transform ──
     The global rule (~line 1597) makes every .tbl render as a stack of
     labelless cards on mobile. That's right for record lists, wrong
     for a 17-column numeric table where the headers ARE the meaning.
     Re-assert table layout + give the wrapper horizontal scroll so the
     wide table can be panned right to see all metrics. */
  #p-kpis .tbl-wrap,
  #p-qa .tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #p-kpis .tbl, #p-qa .tbl,
  #p-kpis .tbl thead, #p-qa .tbl thead,
  #p-kpis .tbl tbody, #p-qa .tbl tbody,
  #p-kpis .tbl tr, #p-qa .tbl tr,
  #p-kpis .tbl th, #p-qa .tbl th,
  #p-kpis .tbl td, #p-qa .tbl td {
    display: revert;
    width: auto;
  }
  #p-kpis .tbl thead, #p-qa .tbl thead {
    position: static !important;
    width: auto !important; height: auto !important;
    clip: auto !important; overflow: visible !important;
    margin: 0 !important;
  }
  #p-kpis .tbl tbody tr, #p-qa .tbl tbody tr {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    cursor: default;
  }
  #p-kpis .tbl tbody td, #p-qa .tbl tbody td {
    border-bottom: 1px solid var(--border) !important;
    padding: 8px 10px !important;
    font-size: 13px;
    white-space: nowrap;
  }
  #p-kpis .tbl tbody td:first-child, #p-qa .tbl tbody td:first-child {
    font-weight: 700; font-size: 13px;
    color: var(--text); padding-right: 16px !important;
  }
  /* Hide the column-truncation rule on mobile too — with horizontal
     scroll the user can pan to see ALL columns. */
  #kpi-monthly-tbody tr td:nth-child(n+8):not(:nth-last-child(-n+3)),
  #kpi-monthly-tbody tr th:nth-child(n+8):not(:nth-last-child(-n+3)) {
    display: revert;
  }

  /* ── Custom dashboard grid — collapse to single column on mobile ──
     The desktop layout is a 24-column CSS grid sized for ≥1000px;
     on a 360px phone each column becomes ~14px and widget positions
     (grid-column: x / span w) collide chaotically. Force every slot
     to full-width stacked, regardless of its stored x/w/y/h. */
  #cdash-grid,
  #qakpi-cdash-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
  }
  #cdash-grid > *,
  #qakpi-cdash-grid > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-height: 240px;
    position: relative !important;
    left: auto !important; top: auto !important;
  }
  /* Hide the drag/resize handles — they're useless without a grid. */
  #cdash-grid .cdash-resize,
  #qakpi-cdash-grid .cdash-resize {
    display: none !important;
  }
  /* The drag-handle cursor on the title row makes no sense either. */
  #cdash-grid .cdash-card > div[style*="cursor:grab"],
  #qakpi-cdash-grid .cdash-card > div[style*="cursor:grab"] {
    cursor: default !important;
  }
}

/* ───────────────────────────────────────────
   20. AUTH SCREEN — mobile friendly
─────────────────────────────────────────────*/
@media (max-width: 480px) {
  .auth-card {
    border-radius: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 24px;
    max-width: 100%;
    border: none;
    box-shadow: none;
  }
  #auth-screen { align-items: stretch; }
}

/* ───────────────────────────────────────────
   21. NOTIFICATION TOAST — mobile
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .notif {
    bottom: calc(68px + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    text-align: center;
    border-radius: 10px;
    font-size: 12.5px;
  }
}

/* ───────────────────────────────────────────
   22. RISK GRID — 3 cols on mobile
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .risk-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px;
  }
  .rc { padding: 6px 3px; font-size: 9px; }
}

/* ───────────────────────────────────────────
   23. TRAINING GRID
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  #course-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
}
@media (max-width: 400px) {
  #course-grid { grid-template-columns: 1fr !important; }
}

/* ───────────────────────────────────────────
   24. SDS READER
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .sds-reader { height: 380px; }
  .sds-reader-toolbar { flex-direction: column; align-items: flex-start; }
  .sds-reader-actions { width: 100%; }
  .sds-reader-actions .btn { flex: 1; justify-content: center; }
}

/* ───────────────────────────────────────────
   25. CAPA ACTION ROWS — stack on mobile
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  #action-rows-capa > div,
  div[id^="carow"] {
    grid-template-columns: 1fr !important;
  }
  #capa-step-content .two-col {
    grid-template-columns: 1fr !important;
  }
}

/* ───────────────────────────────────────────
   26. USER ACTIONS MENU (profile popup)
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .user-actions-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 30px rgba(0,0,0,0.14) !important;
    padding: 10px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
}

/* ───────────────────────────────────────────
   27. DARK MODE MOBILE EXTRAS
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  body.dark-mode .mob-nav {
    box-shadow: 0 -1px 20px rgba(0,0,0,0.35);
  }
  body.dark-mode .mob-drawer {
    box-shadow: 4px 0 24px rgba(0,0,0,0.45);
  }
}

/* ───────────────────────────────────────────
   28. ACTION DETAIL — two-col → single col
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* Main detail + notes grid → stack */
  .act-detail-body {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Back-bar: shrink buttons on mobile */
  .act-detail-body ~ * .btn-sm,
  #p-actions .btn-sm { font-size: 11px; }

  /* Notes textarea less tall on mobile */
  #act-note-input { rows: 2; min-height: 64px; }
}

/* ───────────────────────────────────────────
   29. GENERIC FORM GRID HELPERS
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* Any 2-col form grid → single column */
  .form-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Inline owner / due-date save rows — stack nicely */
  .act-detail-body [style*="display:flex"][style*="flex-wrap:wrap"] {
    gap: 6px !important;
  }
  .act-detail-body input.finput[style*="font-size:14px"] {
    font-size: 16px !important; /* prevent iOS zoom */
    width: 100% !important;
  }

  /* Role guide: 4 → 2 columns */
  .role-guide-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* ───────────────────────────────────────────
   30. KPI MODAL — better stacking with IDs
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* Month / Year / Hours row → 2+1 wrap */
  #kpi-modal-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Worked Hours spans full width */
  #kpi-modal-top .fg:last-child {
    grid-column: 1 / -1 !important;
  }
  /* Main Lagging/Leading body → single column */
  #kpi-modal-body {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Rates preview → 3 equal columns (keep as-is, numbers are small) */
  #kpi-rates-preview {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  #kpi-rates-preview [style*="font-size:24px"] {
    font-size: 20px !important;
  }
}

/* ───────────────────────────────────────────
   31. DASHBOARD — KPI performance section
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* 6-col KPI stat row → 3 on mobile */
  .stat-grid[style*="repeat(6,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* 4-col summary → 2-col */
  .stat-grid[style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ───────────────────────────────────────────
   32. INSPECTION FORM — inner grids
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* Hazard + PPE checkbox grids — keep 2 col (checkboxes are compact) */
  #hazard-checks,
  #hazard-checks ~ .form-grid-2 { grid-template-columns: 1fr 1fr !important; }

  /* Inspection detail form 2-col → 1-col */
  .form-grid-2:not(#hazard-checks) { grid-template-columns: 1fr !important; }
}

/* ───────────────────────────────────────────
   33. MODAL OVERLAY — prevent overflow
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* Generic modal inner panels → full width */
  .modal-inner, .modal > div > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Prevent horizontal overflow on all content */
  .content * { max-width: 100%; box-sizing: border-box; }
  .content .panel, .content .card { overflow: hidden; }
}

/* ───────────────────────────────────────────
   TRAINING CENTRE — MOBILE
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* Course grid: 1 column on small, 2 on medium mobile */
  #course-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  @media (min-width: 480px) {
    #course-grid { grid-template-columns: 1fr 1fr !important; }
  }

  /* Training sub-view buttons */
  #tv-home .flex-row,
  #tv-home [style*="display:flex"][style*="gap"] {
    flex-wrap: wrap;
  }

  /* Training matrix topbar: stack filters */
  .mx-topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .mx-filters {
    flex-wrap: wrap;
    gap: 6px;
  }
  .mx-search { width: 100% !important; }

  /* Matrix table: horizontal scroll */
  .mx-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ───────────────────────────────────────────
   MODALS — MOBILE
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* Training matrix modal */
  #mx-modal > div {
    max-width: 100% !important;
    width: calc(100vw - 24px) !important;
    margin: 0 auto;
    max-height: 90vh !important;
  }

  /* Onboarding overlay */
  #onboarding-overlay > div {
    max-width: 100% !important;
    padding: 20px !important;
    max-height: 95vh;
    overflow-y: auto;
  }
}

/* ───────────────────────────────────────────
   DASHBOARD CHARTS — MOBILE
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  #dash-charts-section .two-col {
    grid-template-columns: 1fr !important;
  }
  #dash-capa-chart {
    max-width: 160px !important;
    max-height: 160px !important;
  }
}

/* ───────────────────────────────────────────
   KPI PAGE — MOBILE
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  .kpi-card-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .kpi-stat-grid,
  #kpi-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* KPI chart panels */
  #p-kpis .two-col {
    grid-template-columns: 1fr !important;
  }
}


/* ───────────────────────────────────────────
   PHASE 3: MOBILE-FRIENDLY FORM INPUTS
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* Bigger touch targets on every input/button */
  .finput, .fsel, .fta {
    font-size: 16px !important;          /* prevents iOS auto-zoom on focus */
    min-height: 44px;
    padding: 12px 14px !important;
    line-height: 1.3;
  }
  .fta { min-height: 96px; }
  .btn {
    min-height: 44px;
    padding: 11px 16px !important;
  }
  /* Stack form columns + give labels breathing room */
  .two-col, .three-col,
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .fg .flbl { font-size: 13px; margin-bottom: 6px; }

  /* Photo capture pill — make the camera icon obviously tappable */
  label.ph-cap {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
  }

  /* Sticky primary submit on the new-incident & new-NCR forms */
  #new-inc-modal .btn-primary,
  #ncr-new-modal .btn-primary {
    position: sticky;
    bottom: 8px;
    z-index: 5;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  }

  /* Modal bodies — full-screen-ish on phone */
  .modal,
  [id$="-modal"] > div {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
    margin: auto auto 0 !important;
  }
}

/* ───────────────────────────────────────────
   FAB quick-capture sheet
   Bottom sheet shown when tapping the + FAB on
   any page that doesn't have a primary action
   wired directly. Activation Energy fix: turns
   a dead button into a 3-tile capture surface.
─────────────────────────────────────────────*/
.fab-sheet-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0); pointer-events: none;
  transition: background .18s ease;
}
.fab-sheet-backdrop.open {
  background: rgba(15, 23, 42, 0.42);
  pointer-events: auto;
}
.fab-sheet {
  position: fixed; left: 0; right: 0;
  bottom: 0; z-index: 301;
  background: var(--bg1, #fff);
  border-radius: 18px 18px 0 0;
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 30px -10px rgba(0,0,0,0.25);
  transform: translateY(100%);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.fab-sheet.open { transform: translateY(0); }
.fab-sheet-grip {
  width: 40px; height: 4px; border-radius: 999px;
  background: var(--border, #E2E8F0);
  margin: -4px auto 14px;
}
.fab-sheet-title {
  font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text3, #64748B);
  text-align: center; margin-bottom: 14px;
}
.fab-sheet-tiles {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}
.fab-sheet-tile {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px;
  padding: 18px 8px; min-height: 92px;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 14px; background: var(--bg2, #F8FAFC);
  color: var(--text, #0F172A); text-decoration: none;
  font-size: 12.5px; font-weight: 600; line-height: 1.25;
  text-align: center; cursor: pointer;
  transition: background .15s, transform .1s, border-color .15s;
}
.fab-sheet-tile:active { transform: scale(0.96); background: var(--bg, #fff); }
.fab-sheet-tile .fst-ico {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy, #1E3A8A);
}
.fab-sheet-tile .fst-ico svg {
  width: 26px; height: 26px;
  stroke: currentColor; stroke-width: 1.75;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.fab-sheet-tile.tile-incident { border-color: color-mix(in oklab, #DC2626 24%, var(--border, #E2E8F0)); }
.fab-sheet-tile.tile-incident .fst-ico { color: #DC2626; }
.fab-sheet-tile.tile-nearmiss { border-color: color-mix(in oklab, #D97706 24%, var(--border, #E2E8F0)); }
.fab-sheet-tile.tile-nearmiss .fst-ico { color: #D97706; }
.fab-sheet-tile.tile-inspection { border-color: color-mix(in oklab, #059669 24%, var(--border, #E2E8F0)); }
.fab-sheet-tile.tile-inspection .fst-ico { color: #059669; }

/* ───────────────────────────────────────────
   Incident form — Take photo tile
   The default <input type=file> button is tiny and ambiguous.
   Wrapped in a labelled tile, photo capture becomes the obvious
   first action when the form opens. Works on desktop too — but
   we extend the tappable area on phones.
─────────────────────────────────────────────*/
.inc-photo-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 12px;
  background: var(--bg2, #F8FAFC);
  border: 1.5px dashed var(--border-strong, #CBD5E1);
  color: var(--text, #0F172A);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  min-height: 64px;
  position: relative;
}
.inc-photo-tile:hover {
  border-color: var(--navy, #1E3A8A);
  background: var(--bg, #fff);
}
.inc-photo-tile:active { transform: scale(0.99); }
.inc-photo-tile.has-files {
  border-style: solid;
  border-color: color-mix(in oklab, #059669 35%, var(--border, #E2E8F0));
  background: color-mix(in oklab, #059669 4%, var(--bg, #fff));
}
.inc-photo-tile .ipt-ico {
  width: 48px; height: 48px; border-radius: 12px;
  background: color-mix(in oklab, var(--navy, #1E3A8A) 10%, transparent);
  color: var(--navy, #1E3A8A);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.inc-photo-tile.has-files .ipt-ico {
  background: color-mix(in oklab, #059669 14%, transparent);
  color: #059669;
}
.inc-photo-tile .ipt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inc-photo-tile .ipt-title { font-size: 15px; font-weight: 700; line-height: 1.25; }
.inc-photo-tile .ipt-sub   { font-size: 12.5px; color: var(--text3, #64748B); line-height: 1.4; }

@media (max-width: 768px) {
  .inc-photo-tile { padding: 18px 16px; min-height: 72px; }
  .inc-photo-tile .ipt-title { font-size: 16px; }
}

/* ───────────────────────────────────────────
   Dashboard — mobile slim-down
   Even with the JS route to loadPersonalDashboard() on mobile, there is
   a brief flash of the static org-wide markup before it swaps. Hide the
   heaviest sections so that flash isn't a wall of org KPIs and charts.
   The personal dashboard's innerHTML replacement removes these anyway.
─────────────────────────────────────────────*/
@media (max-width: 768px) {
  #p-dashboard #dash-kpi-section,
  #p-dashboard #dash-charts-section { display: none !important; }

  /* Tighten the static stat-card grid if the org-wide path ever runs
     (e.g. orientation change while on dashboard). 6 cards → 2x2 layout
     showing the 4 most actionable: Open Incidents, Overdue CAPAs,
     Open NCRs, Permits Pending. */
  #p-dashboard #dash-stat-cards .stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  #p-dashboard #dash-stat-cards .stat-grid > .stat-card:nth-child(2),
  #p-dashboard #dash-stat-cards .stat-grid > .stat-card:nth-child(5) {
    display: none !important;
  }
  #p-dashboard #dash-stat-cards .stat-card { padding: 12px 14px !important; }
  #p-dashboard #dash-stat-cards .stat-value { font-size: 28px !important; }
  #p-dashboard #dash-stat-cards .stat-label { font-size: 11.5px !important; }

  /* The 4 dashboard tables stack single column. */
  #p-dashboard #dash-tables-section .two-col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ───────────────────────────────────────────
   Active inspection — accordions visible everywhere,
   sticky mobile progress header + sync chip + Next
   button only on phones.
─────────────────────────────────────────────*/
.ins-accordion { padding: 0 !important; overflow: hidden; }
.ins-accordion > .ins-accordion-summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  font-weight: 700;
  user-select: none;
}
.ins-accordion > .ins-accordion-summary::-webkit-details-marker { display: none; }
.ins-accordion > .ins-accordion-summary > .ins-acc-name {
  flex: 1;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3, #64748B);
}
.ins-accordion > .ins-accordion-summary > .ins-acc-counter {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg3, #F1F5F9);
  border: 1px solid var(--border, #E2E8F0);
  color: var(--text2, #475569);
}
.ins-accordion > .ins-accordion-summary > .ins-acc-counter.ins-acc-counter--done {
  background: color-mix(in oklab, #059669 14%, transparent);
  color: #059669;
  border-color: color-mix(in oklab, #059669 30%, var(--border, #E2E8F0));
}
.ins-accordion > .ins-accordion-summary > .ins-acc-caret {
  font-size: 14px;
  color: var(--text3, #64748B);
  transition: transform .18s;
}
.ins-accordion[open] > .ins-accordion-summary > .ins-acc-caret { transform: rotate(180deg); }
.ins-accordion > .ins-accordion-body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--border, #E2E8F0);
}

/* Highlight pulse for the row scrolled to via "Next →" — Zeigarnik
   close-the-loop signal. Works on both rows and the submit button. */
.check-item--flash {
  animation: insFlash 900ms ease-out;
  border-radius: 8px;
}
@keyframes insFlash {
  0%   { box-shadow: 0 0 0 3px color-mix(in oklab, var(--navy, #1E3A8A) 35%, transparent); background: color-mix(in oklab, var(--navy, #1E3A8A) 8%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
}

/* Sticky mobile header — Goal-Gradient progress bar + sync chip + Next.
   Hidden on desktop; the right-column Live Score panel covers that case. */
.ins-mob-header { display: none; }
@media (max-width: 768px) {
  .ins-mob-header {
    display: block;
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in oklab, var(--bg, #fff) 94%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--border, #E2E8F0);
    padding: 10px 12px 12px;
    margin: 0 -8px 12px;
  }
  .ins-mob-header .imh-bar {
    height: 5px; border-radius: 999px;
    background: var(--bg3, #F1F5F9);
    overflow: hidden;
  }
  .ins-mob-header .imh-bar-fill {
    height: 100%; width: 0%;
    background: var(--navy, #1E3A8A);
    transition: width .3s cubic-bezier(.4, 0, .2, 1);
  }
  .ins-mob-header .imh-row {
    display: flex; align-items: center; gap: 10px;
    margin-top: 9px;
  }
  .ins-mob-header .imh-counts { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
  .ins-mob-header .imh-progress {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 13px; font-weight: 700;
    color: var(--text, #0F172A);
  }
  .ins-mob-header .imh-pct {
    font-size: 13px; font-weight: 700;
  }
  .ins-mob-header .imh-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    border: 1px solid var(--border, #E2E8F0);
    background: var(--bg, #fff);
    color: var(--text2, #475569);
    flex-shrink: 0;
  }
  .ins-mob-header .imh-chip-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text3, #64748B);
  }
  .imh-chip--ok      .imh-chip-dot { background: #059669; box-shadow: 0 0 0 2px color-mix(in oklab, #059669 25%, transparent); }
  .imh-chip--pending .imh-chip-dot { background: #D97706; box-shadow: 0 0 0 2px color-mix(in oklab, #D97706 25%, transparent); }
  .imh-chip--offline .imh-chip-dot { background: #DC2626; box-shadow: 0 0 0 2px color-mix(in oklab, #DC2626 25%, transparent); }
  .imh-chip--offline { border-color: color-mix(in oklab, #DC2626 30%, var(--border, #E2E8F0)); }

  .ins-mob-header .imh-next {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; border-radius: 999px;
    background: var(--navy, #1E3A8A);
    color: #fff; border: none;
    font-size: 13px; font-weight: 700;
    cursor: pointer; flex-shrink: 0;
    box-shadow: 0 4px 10px -2px color-mix(in oklab, var(--navy, #1E3A8A) 50%, transparent);
  }
  .ins-mob-header .imh-next:active { transform: scale(0.97); }
  .ins-mob-header .imh-next--submit {
    background: #059669;
    box-shadow: 0 4px 10px -2px color-mix(in oklab, #059669 50%, transparent);
  }
  .ins-mob-header .imh-next-arr { font-size: 14px; }

  /* Accordion tightening on phones */
  .ins-accordion > .ins-accordion-summary { padding: 12px 14px; }
  .ins-accordion > .ins-accordion-body { padding: 4px 14px 14px; }

  /* Hide the bulky desktop Live Score panel header on mobile — info
     duplicates the sticky header. The pass/fail/NA tally stays useful
     so we keep the panel body. */
  #p-inspections #ins-active .two-col > div:last-child > #ins-score-panel { display: none; }
}

/* ───────────────────────────────────────────
   Mobile drawer — search field + acronym hints
─────────────────────────────────────────────*/
.mob-drawer-search-wrap {
  position: relative;
  margin: 2px 6px 10px;
}
.mob-drawer-search-ico {
  position: absolute;
  left: 11px; top: 50%;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  color: var(--text3, #64748B);
  pointer-events: none;
}
.mob-drawer-search {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 34px 10px 34px;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 10px;
  background: var(--bg2, #F8FAFC);
  color: var(--text, #0F172A);
  font-size: 14px;
  outline: none;
  transition: border-color .15s, background .15s;
  -webkit-appearance: none;
}
.mob-drawer-search::placeholder { color: var(--text3, #64748B); }
.mob-drawer-search:focus {
  border-color: var(--navy, #1E3A8A);
  background: var(--bg, #fff);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--navy, #1E3A8A) 14%, transparent);
}
.mob-drawer-search-clear {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border: none; border-radius: 50%;
  background: var(--bg3, #F1F5F9);
  color: var(--text2, #475569);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center; justify-content: center;
}
.mob-drawer-search-clear:hover { background: var(--border, #E2E8F0); }

.nav-acro-help {
  font-size: 11px;
  font-weight: 500;
  color: var(--text3, #94A3B8);
  margin-left: 6px;
  white-space: nowrap;
}
/* On narrow viewports the helper falls to its own line so the main
   acronym stays large and legible. */
@media (max-width: 380px) {
  .nav-item { flex-wrap: wrap; align-items: baseline; }
  .nav-acro-help { width: 100%; margin-left: 28px; margin-top: -2px; }
}

.mob-drawer-noresults {
  display: none;
  margin: 12px 16px 0;
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text3, #64748B);
  background: var(--bg2, #F8FAFC);
  border: 1px dashed var(--border, #E2E8F0);
  border-radius: 10px;
}

/* ════════════════════════════════════════════════════════════════════
   SPRINT A + B mobile polish (2026-06-05)
   Foundation + list-view fixes from the mobile audit. Every rule below
   is a no-op above 768px so desktop is unaffected.
   ──────────────────────────────────────────────────────────────────── */

/* ── A.1 — Notification panel: fit the viewport on mobile ─────────── */
@media (max-width: 768px) {
  .notif-panel {
    /* Was fixed width:360px + right:16px = bled off-screen on 375px.
       Pin to both edges instead and let it grow to fit. */
    width: auto !important;
    left: 12px !important;
    right: 12px !important;
    max-height: calc(100vh - 80px - env(safe-area-inset-bottom, 0px));
    border-radius: 14px;
  }
}

/* ── A.2 — Toast: lift above the bottom nav + FAB ─────────────────── */
@media (max-width: 768px) {
  .notif-toast {
    /* Bottom nav (58px) + FAB cluster + safe area. Keep it left-anchored
       so the FAB on the right side stays unobstructed. */
    width: auto;
    left: 12px;
    right: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── A.3 — Touch targets: 44×44 minimum (Apple HIG) ───────────────── */
@media (max-width: 768px) {
  .mob-header-btn,
  .notif-bell,
  .mob-drawer-close,
  .qr-btn,
  .help-btn,
  .ua-icon {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .mob-nav-item .mni {
    /* Bottom-nav glyph stays small but the parent tap area expands. */
    width: 24px; height: 24px;
  }
  .mob-nav-item {
    min-height: 56px;
  }
  /* Filter tabs in module headers — generic chip lift */
  .tab, .obs-tab, .co-tab, .capa-tab, .ins-tab {
    min-height: 36px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* Inspection check buttons (.cbtn) and similar small action chips */
  .cbtn {
    min-height: 36px;
    padding: 6px 12px !important;
  }
}

/* ── A.4 — KEEP the page-header primary CTA on mobile ─────────────────
   Earlier this rule hid '.page-header-actions .btn-primary' on the
   theory that the FAB + Quick covered creation. They don't — Quick
   is observations-only, and the topbar mobile action is only wired
   for 6 of ~15 modules. Result: on PTW / training / documents / etc.
   the user had no way to create a new record from the module page.

   The page header already stacks title-above-actions on mobile (B.7),
   so the button appears as a full-width row below the title — clean
   and reachable. No display:none here.

   For modules that DO have a topbar mobile action (incidents, capa,
   ncr, inspections, actions, kpis) the user sees two CTAs briefly,
   but they both do the same thing and the topbar one is hidden inside
   #mob-topbar-action which only paints when populated — minor cost
   for fixing the larger problem. */

/* ── A.5 — Modal sizing: bottom-sheet on phones ───────────────────── */
@media (max-width: 768px) {
  /* Generic overlay → bottom-sheet container */
  [id$="-modal"],
  .modal-overlay,
  #co-detail-modal,
  #notif-rule-modal,
  #sa-create-org-modal,
  #sa-edit-user-modal,
  #sa-invite-admin-modal,
  #sa-org-modules-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  /* Inner card → full-width sheet with rounded top corners only */
  [id$="-modal"] > div,
  .modal-overlay > div,
  #co-detail-modal > div,
  #notif-rule-modal > div,
  #sa-create-org-modal > div,
  #sa-edit-user-modal > div,
  #sa-invite-admin-modal > div,
  #sa-org-modules-modal > div {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh !important;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
  }
  /* Tiny drag-handle hint so it looks like a real sheet */
  [id$="-modal"] > div::before,
  #co-detail-modal > div::before,
  #notif-rule-modal > div::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--border, #E2E8F0);
    border-radius: 2px;
    margin: -8px auto 14px;
  }
}

/* ── B.7 — Page header: stack title + actions cleanly ─────────────── */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .page-header-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  /* When the JS-injected Filter wrapper / Inspections Filter wrapper
     lands in here, push it to the left so the row reads
     'Filter ........ + New CAPA'. */
  .page-header-actions > .mob-filter-wrap,
  .page-header-actions > div:has(> #ins-filter-btn) {
    margin: 0 auto 0 0 !important;
  }
}

/* ── B.8 — Filter tabs: horizontal-scroll with fade hint ──────────── */
@media (max-width: 768px) {
  .tabs,
  .obs-tabs,
  .co-tabs,
  .capa-tabs,
  .ins-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    /* Right-fade gradient hint — only visible when content overflows */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    padding-right: 28px;
    /* Hide the scrollbar */
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar,
  .obs-tabs::-webkit-scrollbar { display: none; }
  .tab, .obs-tab, .co-tab, .capa-tab, .ins-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ── B.9 — Hide desktop-only secondary actions on mobile ──────────── */
/* "Show Archived | Columns | Export" rows above tables are power-user
   features that don't earn their space on a phone. */
@media (max-width: 768px) {
  /* Per-module archive / columns / export controls (every list module
     follows the #X-archive-toggle / #X-cols-btn / exportX() pattern). */
  [id$="-archive-toggle"],
  [id$="-cols-btn"],
  [id$="-cols-menu"],
  button[onclick^="export"],
  /* Legacy class hooks (a few older modules). NOTE: .act-row used to be
     in this list — it isn't legacy. It's the live Actions module row
     renderer (js/actions.js _renderActRow), so hiding it made the
     Actions Register show ONLY the section headers (THIS WEEK / DONE)
     with no rows on mobile. Removed. */
  .table-actions-row,
  .tbl-toolbar,
  .col-toggle-btn,
  .archive-toggle,
  .archived-toggle {
    display: none !important;
  }
  /* Page-header secondary buttons — QR poster + help-? lose value on a
     phone (no way to print a poster and the help link is a tap away in
     the More menu later). Keep them in tablet+. */
  .page-header-actions .qr-btn,
  .page-header-actions .help-btn { display: none !important; }
  /* Floating .mob-fab competes with the bottom-nav Quick button. Hide
     the floater everywhere it'd duplicate Quick's role. */
  .mob-fab { display: none !important; }
  /* But keep the bulk-action bar visible when rows are selected — that
     IS a primary mobile flow. */
  #co-bulk-bar, #obs-bulk-bar, #incidents-bulk-bar, #capa-bulk-bar,
  #ncr-bulk-bar, #ins-bulk-bar, #jha-bulk-bar, #doc-bulk-bar,
  #chem-bulk-bar, #moc-bulk-bar, #ptw-bulk-bar, #risk-bulk-bar,
  #ar-bulk-bar, #legal-bulk-bar, #trn-bulk-bar {
    display: flex !important;
  }
  /* Bulk bars hide via display:none when empty — preserve that behaviour
     by only forcing flex when the bar's own JS has set display:flex. */
  #co-bulk-bar[style*="display:none"], #obs-bulk-bar[style*="display:none"],
  #incidents-bulk-bar[style*="display:none"], #capa-bulk-bar[style*="display:none"],
  #ncr-bulk-bar[style*="display:none"], #ins-bulk-bar[style*="display:none"],
  #jha-bulk-bar[style*="display:none"], #doc-bulk-bar[style*="display:none"],
  #chem-bulk-bar[style*="display:none"], #moc-bulk-bar[style*="display:none"],
  #ptw-bulk-bar[style*="display:none"], #risk-bulk-bar[style*="display:none"],
  #ar-bulk-bar[style*="display:none"], #legal-bulk-bar[style*="display:none"],
  #trn-bulk-bar[style*="display:none"] { display: none !important; }
}

/* ── B.10 — Tables → cards below 768px ────────────────────────────── */
@media (max-width: 768px) {
  /* Table shell becomes a stacked list. */
  .tbl,
  .tbl thead,
  .tbl tbody,
  .tbl tr,
  .tbl td {
    display: block;
    width: 100%;
  }
  .tbl { min-width: 0 !important; border-collapse: separate; }
  .tbl thead {
    /* Visually hide but keep accessible */
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0);
    border: 0;
  }
  .tbl-wrap { overflow-x: visible; padding: 0; margin: 0; }

  /* Each row becomes a card */
  .tbl tbody tr {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
    position: relative;
    cursor: pointer;
  }
  /* Cells become stacked rows, no inner borders */
  .tbl tbody td {
    border: 0 !important;
    padding: 2px 0 !important;
    font-size: 13px;
    color: var(--text2);
    background: transparent !important;
  }
  /* First cell (typically Ref) — title-ish weight */
  .tbl tbody td:first-child {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    padding-bottom: 4px !important;
    padding-right: 28px !important; /* leaves room for the chevron */
  }
  /* Tighten badge/pill spacing inside cells */
  .tbl tbody td .bdg,
  .tbl tbody td span[class*="bdg"] { font-size: 11px; padding: 2px 8px; }
  /* The hide-mob class still hides those cells */
  .tbl tbody td.hide-mob { display: none !important; }
  /* Last cell often holds an action button — push it inline */
  .tbl tbody td:last-child:not(:only-child) {
    display: inline-block !important;
    width: auto;
    padding-top: 8px !important;
  }
  /* Bulk-select checkbox: float to the top-right corner of the card */
  .tbl tbody tr input[type="checkbox"] {
    position: absolute;
    top: 12px; right: 38px;
    opacity: 1 !important; /* always visible on touch, no hover-to-reveal */
    width: 18px; height: 18px;
  }
  /* Hide row hover background since touch has no hover */
  .tbl tr:hover td { background: transparent; }

  /* ── Colspan rows (empty states + loaders) — direct-target the cell
        without relying on :has() (which had inconsistent support in some
        previews). We can't reach the parent TR via pure CSS for the card
        styling, so we use negative margins on the colspan TD to BREAK
        OUT of the TR's card padding. */
  .tbl tbody td[colspan] {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    /* Cancel the TR's card padding (14 16 12 14) so the empty state
       fills the full card width with sensible internal padding instead. */
    margin: -14px -16px -12px -14px !important;
    padding: 40px 24px !important;
    background: var(--bg2) !important;
    border: 0 !important;
    border-radius: 12px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--text3) !important;
    cursor: default !important;
  }
  /* Anything inside the empty-state cell (icon + heading + body + CTA)
     should fill naturally and stay centred. */
  .tbl tbody td[colspan] > * {
    max-width: 100% !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .tbl tbody td[colspan] > svg,
  .tbl tbody td[colspan] > div { display: block !important; }
  .tbl tbody td[colspan] > button { display: inline-block !important; margin-top: 12px !important; }
}

/* ── B.7c — Module list pages: cut visual noise on phones ────────────
   User feedback: 'the filtering is too much visually, plus the KPI as
   well.' On mobile we keep the title + '+ New X' CTA + the list/empty
   state. The breakdown counts and the filter tab strip are hidden —
   they're desktop-density UI that didn't earn their place on a phone.
   When users need to filter, they can switch to desktop or we'll add
   a single dropdown later.

   Empty-state card stays compact (smaller icon, tighter padding) so
   it doesn't dominate the page when there's no data. */
@media (max-width: 768px) {
  /* (1) Hide the module breakdown counts ('5 CAPAs · 2 open · …').
        Desktop-only signal — too dense for a phone. */
  [id$="-header-counts"] { display: none !important; }

  /* (2) Hide the individual filter chips — replaced on mobile by a
        native <select> (.mob-filter-select, inserted by app.js). The
        chip-strip wrapper has no class so we hide the chips directly. */
  .tab[data-tab] { display: none !important; }

  /* (2b) Page subtitle ('Plan, run and review safety inspections…',
        'Authorise, track and close work permits…', etc.) is marketing
        copy. On a phone the user already knows what page they're on. */
  .page-header-subtitle { display: none !important; }

  /* (2c) Inspections has its own secondary action row (Schedule /
        Templates / Create Form / Export) that doesn't earn its place
        on a phone — those are admin/setup tools. The Filter button
        stays (functional). The primary '+ Start Inspection' CTA stays
        in the page header. */
  #p-inspections button[onclick*="ins-schedule"],
  #p-inspections button[onclick*="ins-templates"],
  #p-inspections button[onclick*="ins-build"],
  #p-inspections button[onclick*="exportInspections"] {
    display: none !important;
  }

  /* (2d) Hide the '+ New X' page-header CTA when we're inside a
        record-detail subview. Detect via the presence of a back button.
        Each module uses its own back fn name; matching by 'Back' prefix
        catches ptwBack, capaBack, ncrBack, etc. */
  div[id^="p-"]:has(button[onclick*="Back("]) .page-header-actions,
  div[id^="p-"]:has(button[onclick*="Back()"]) .page-header-actions,
  div[id^="p-"]:has(button[onclick*="closeObservation"]) .page-header-actions {
    display: none !important;
  }
  /* Same for the Filter pill — no list to filter when in detail view. */
  div[id^="p-"]:has(button[onclick*="Back("]) .mob-filter-wrap,
  div[id^="p-"]:has(button[onclick*="Back()"]) .mob-filter-wrap,
  div[id^="p-"]:has(button[onclick*="closeObservation"]) .mob-filter-wrap {
    display: none !important;
  }

  /* (2e) PTW detail header card — restack cleanly.
        Real container is #ptw-content (list and detail share the same
        wrapper). The header card is the first .panel inside it. On
        mobile we:
          • drop the decorative icon tile (saves space, adds no info)
          • turn the flex container into a vertical stack
          • give the action button row full width with equal-flex btns */
  /* (legacy block kept as no-op — superseded by .ptw-detail-header rules
     further down. The old :first-of-type selector silently failed because
     the back/export row is the first <div> sibling, so the panel rules
     never matched on real markup.) */
  /* Title sizing for the narrow column. */
  #ptw-content h2 { font-size: 18px !important; line-height: 1.25 !important; }
  /* Two-column section gap tighter on phones. */
  #ptw-content .two-col { gap: 12px !important; }

  /* The JS-injected wrapper holds an exact clone of the Inspections
     Filter button (same .btn.btn-secondary.btn-sm classes, same
     lucide list-filter icon, same modFilterToggle handler). The
     button itself doesn't need any extra styling — it inherits from
     the global .btn classes. We just give the wrapper a tiny bit of
     bottom margin so it sits cleanly in the page-header row. */
  .mob-filter-wrap { margin-bottom: 12px; }

  /* (3) Empty-state cell: smaller icon, tighter padding so the card
        takes ~half the vertical space. */
  .tbl tbody td[colspan] { padding: 28px 16px !important; }
  .tbl tbody td[colspan] svg { width: 38px !important; height: 38px !important; }
  .tbl tbody td[colspan] > div:first-child { margin-bottom: 6px !important; }
  .tbl tbody td[colspan] > div:nth-of-type(2) { font-size: 13.5px !important; margin-bottom: 4px !important; }
  .tbl tbody td[colspan] > div:nth-of-type(3) { font-size: 12.5px !important; margin-bottom: 12px !important; }
}

/* ── PTW mobile polish — list rows + map filter bar ────────────────────
   The desktop filter bar wraps a flex row of 8 controls; on a phone
   that becomes a 400px-tall stack that buries the map. Constrain it to
   a 2-column grid with smaller controls, and tighten the card rows the
   table-to-card pattern produces. */
@media (max-width: 768px) {
  /* ── Map filter bar: 2-column grid, compact controls ── */
  .ptw-map-filterbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .ptw-map-filterbar > select,
  .ptw-map-filterbar > input[type="text"] {
    width: 100% !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
    min-height: 38px;
  }
  /* Date pickers — drop the inline 'Start ≥' label and make each
     wrapper a single grid cell with the input filling it. */
  .ptw-map-filterbar > label {
    margin: 0 !important;
    font-size: 11px !important;
    color: var(--text3);
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .ptw-map-filterbar > label > input[type="date"] {
    width: 100% !important;
    font-size: 13px !important;
    padding: 7px 8px !important;
    min-height: 36px;
  }
  /* Expiring-soon checkbox label — make it a clear standalone cell. */
  .ptw-map-filterbar > label:has(input[type="checkbox"]) {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px !important;
    font-size: 12.5px !important;
    color: var(--text);
    min-height: 38px;
  }
  /* Reset button — full-width on its own row. */
  .ptw-map-filterbar > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  /* ── PTW card rows: tighten spacing, simpler hierarchy ── */
  #ptw-tbody tr {
    padding: 12px 14px 10px !important;
    margin-bottom: 8px !important;
  }
  /* The bulk-select checkbox cell — float right top, smaller hit area. */
  #ptw-tbody td:first-child {
    position: absolute;
    top: 10px; right: 12px;
    width: auto !important;
    padding: 0 !important;
    z-index: 2;
  }
  /* Ref + dot — secondary look (not the headline). */
  #ptw-tbody td:nth-child(2) {
    font-weight: 500 !important;
    font-size: 12px !important;
    color: var(--text3) !important;
    padding: 0 0 4px !important;
  }
  /* Title/location cell — the actual headline. */
  #ptw-tbody td:nth-child(3) {
    padding: 0 28px 6px 0 !important;
  }
  #ptw-tbody td:nth-child(3) > div:first-child {
    font-size: 15px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
  /* Type + status — sit on one row as inline chips. */
  #ptw-tbody td:nth-child(4),
  #ptw-tbody td:nth-child(5) {
    display: inline-block !important;
    width: auto !important;
    padding: 4px 6px 4px 0 !important;
  }
  /* Single date row (expiry only — start is hide-mob). */
  #ptw-tbody td:nth-child(7) {
    font-size: 12px !important;
    color: var(--text3) !important;
    padding: 4px 0 0 !important;
  }
  #ptw-tbody td:nth-child(7)::before {
    content: 'Expires ';
    color: var(--text3);
  }
  /* Receiver — small footer line. */
  #ptw-tbody td:nth-child(8) {
    font-size: 12px !important;
    color: var(--text3) !important;
    padding: 2px 0 0 !important;
  }
  #ptw-tbody td:nth-child(8)::before {
    content: 'Worker · ';
    color: var(--text3);
  }

  /* ── Detail-view header card: vertical stack on mobile ──
     Restack the (icon | info | actions) flex row into a clean column:
       row 1: small icon + badges (ref · status · type) inline
       row 2: title
       row 3: location
       row 4: full-width action button row */
  .ptw-detail-header { position: relative; }
  .ptw-detail-head-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  /* Icon block (the 48×48 type tile) — shrunk + absolute-positioned so
     the badge row can sit alongside it without a flex column shift. */
  .ptw-detail-head-row > div:first-child {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    position: absolute;
    top: 0; left: 0;
  }
  .ptw-detail-head-row > div:first-child svg,
  .ptw-detail-head-row > div:first-child i {
    width: 18px !important;
    height: 18px !important;
  }
  /* Info column (badges + title + location). Padding-left makes room
     for the absolute icon. min-height matches the icon so the badge
     line vertically centres against it. */
  .ptw-detail-head-row > div:nth-child(2) {
    padding-left: 44px;
    min-height: 34px;
  }
  .ptw-detail-head-row > div:nth-child(2) > div:first-child {
    gap: 6px !important;
    margin-bottom: 6px !important;
    line-height: 1.4;
  }
  .ptw-detail-head-row > div:nth-child(2) > h2 {
    font-size: 19px !important;
    line-height: 1.25 !important;
    margin: 4px 0 4px -44px !important;   /* pull title back to card edge */
  }
  .ptw-detail-head-row > div:nth-child(2) > div:last-child {
    margin-left: -44px;   /* location flush with title */
  }
  /* Action row — full width, equal-flex buttons. */
  .ptw-detail-head-row > div:last-child {
    width: 100%;
    display: flex !important;
    gap: 8px !important;
    margin: 0 !important;
    justify-content: stretch;
  }
  .ptw-detail-head-row > div:last-child .btn {
    flex: 1 1 0 !important;
    justify-content: center !important;
    min-width: 0 !important;
    white-space: nowrap;
    min-height: 42px;
  }
}
   The .mod-filter-menu and column menus are absolutely positioned with
   `right: 0` from their button wrapper. On a phone, where the button
   sits in the right half of the row, the menu's left edge can fall
   off-screen (truncating labels like 'Hazardous' → 'azardous'). Pin
   them to a centred, viewport-bounded position with internal scrolling
   so every option stays readable. */
@media (max-width: 768px) {
  .mod-filter-menu {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(86vw, 320px) !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    z-index: 1600 !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.22) !important;
  }
  /* Dim the page behind the open menu so users see it's a focused
     overlay, not a stray dropdown. Uses a pseudo-element on body. */
  body:has(.mod-filter-menu[style*="display: block"])::before,
  body:has(.mod-filter-menu[style*="display:block"])::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.28);
    z-index: 1500;
    pointer-events: none;
  }
}

/* ── Mobile global-search overlay ─────────────────────────────────
   The desktop topbar search (#gs-wrap) is hidden on mobile via the
   .hide-mob class. We surface it through a magnifier button in the
   topbar; tapping it adds .gs-mobile-open on <body>, which expands
   #gs-wrap into a full-screen overlay. The existing GlobalSearch JS
   handles the rest — typing, results panel, navigation. */
@media (max-width: 768px) {
  /* The trigger button sits next to the bell on the right. Hidden
     by default, shown on mobile. No extra margin — .topbar-right's
     gap handles spacing (tightened to 2px on mobile below). */
  .mob-search-btn {
    display: flex !important;
  }
  /* Tight pairing of search + bell on the right. Default .topbar-right
     gap is 8px which left them looking too far apart on a phone. */
  .topbar-right { gap: 2px !important; }
  /* (No dim backdrop — user feedback: 'the page becomes dark when
     clicking on the search'. The overlay sits on top with its own
     elevation; the page stays in its natural state behind it.) */

  /* Promote the desktop search wrap to a full-screen overlay only
     when the body class is set. Overrides .hide-mob's display:none. */
  body.gs-mobile-open #gs-wrap {
    display: block !important;
    position: fixed !important;
    top: env(safe-area-inset-top);
    left: 0;
    right: 0;
    margin: 0 !important;
    max-width: none !important;
    padding: 12px 14px 14px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    z-index: 1800;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  }
  body.gs-mobile-open #gs-input {
    font-size: 16px !important;  /* prevents iOS zoom on focus */
    padding: 12px 40px 12px 38px !important;
    height: 46px !important;
  }
  body.gs-mobile-open #gs-panel {
    position: static !important;
    max-height: calc(100vh - 140px) !important;
    margin-top: 10px !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }
}

/* Hide the mobile trigger on desktop. */
@media (min-width: 769px) {
  .mob-search-btn { display: none !important; }
  /* Same for the mobile filter wrap — desktop keeps the chip strip. */
  .mob-filter-wrap { display: none !important; }
}

/* ── Fix iOS Safari rendering of date / time / datetime-local inputs.
   iOS swaps in a native widget that centres the value text in a chunky
   placeholder-style font and ignores the input's box dimensions. The
   value overflows visibly on small modals (Renew/Extend Permit), and
   on focus iOS rebuilds the layout again which breaks the bottom-sheet
   modal sizing. Strip the native appearance so the input behaves like
   a normal text field and the existing .finput rules apply cleanly. */
@media (max-width: 768px) {
  input[type="datetime-local"],
  input[type="date"],
  input[type="time"],
  input[type="month"],
  input[type="week"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    text-align: left !important;
    min-height: 42px;
    line-height: 1.3 !important;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    /* iOS adds an internal padding on these — collapse it. */
    -webkit-padding-end: 12px;
    -webkit-padding-start: 12px;
  }
  /* Kill the default native picker indicator on the right that some
     iOS versions add on top of our content. */
  input[type="datetime-local"]::-webkit-date-and-time-value,
  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value {
    text-align: left !important;
    min-height: 1em;
  }
}

/* ── B.10b-ios — Stop iOS Safari from auto-zooming into form fields.
   When an input/textarea/select has font-size < 16px, iOS Safari zooms
   the viewport in on focus and frequently fails to zoom back out after
   blur — leaving the user stuck. Bumping every form-control font-size
   to 16px on mobile (the iOS threshold) makes the zoom a no-op.
   Inline font-size:14px declarations are overridden via !important. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input:not([type]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ── B.10c — Observation detail: stack the 2-column layout vertically.
   Desktop uses a 1fr | 320px split (main panel + lifecycle sidebar);
   on a phone that forced the main panel into a sliver and pushed the
   sidebar off-screen. Single column with full width on mobile. */
@media (max-width: 768px) {
  .obs-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Tighter inline stat boxes (Type / Reported / Location / Severity)
     so each one fits on a line without truncating. */
  #obs-detail-content .panel > div[style*="grid-template-columns:1fr 1fr"],
  #obs-detail-content .panel > div[style*="grid-template-columns: 1fr 1fr"] {
    gap: 8px !important;
  }
  /* Lifecycle panel becomes a normal content block below the main one. */
  .obs-detail-grid > .panel:last-child {
    position: static !important;
  }
}

/* ── B.11 — Tap chevron on cards (mobile only) ────────────────────── */
@media (max-width: 768px) {
  .tbl tbody tr::after {
    content: '›';
    position: absolute;
    top: 50%; right: 14px;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
    color: var(--text3, #94A3B8);
    font-weight: 400;
    pointer-events: none;
  }
  /* Suppress the chevron on rows that are empty-state / loader placeholders */
  .tbl tbody tr[colspan]::after,
  .tbl tbody tr:has(.app-loader)::after,
  .tbl tbody tr:has(td[colspan])::after {
    content: none !important;
    display: none !important;
  }
}

/* ── Misc B-tier polish ───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Settings vertical nav pills — clamp width and add ellipsis */
  .s-vnav-item {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Notification rules — recipient rows stack vertically */
  .nr-rec-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .nr-rec-row select { width: 100% !important; }
}