/**
 * NorthPathOS · Responsive rules — THE SINGLE SOURCE OF TRUTH for @media
 *
 * ════════════════════════════════════════════════════════════════════
 *   STOP. READ AGENTS.md → MODULAR ARCHITECTURE LAW BEFORE EDITING.
 * ════════════════════════════════════════════════════════════════════
 *
 * ALL @media queries live HERE. No more per-module / per-component
 * inline @media. If you find a breakpoint scattered in a module file
 * or in index.html, move it here.
 *
 * Breakpoint contract:
 *   ≤ 480px   phone portrait
 *   ≤ 768px   phone landscape + small tablet (mobile drawer kicks in)
 *   ≤ 960px   tablet (record body collapses to single column)
 *   ≤ 1024px  small laptop
 *   > 1024px  desktop
 *
 * Loaded by index.html via <link rel="stylesheet" href="lib/responsive.css">
 * (wired 2026-05-30).
 */

/* ════════════════════════════════════════════════════════════════════
   ≤ 768px — phone + small tablet
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Topbar: SINGLE-ROW layout (#805 QAQC M5, 2026-09-26 topbar redesign)
     [☰] FaroSalud(Panel) — spacer — [find] [clinic name] [bell] [avatar]
     Replaces the old two-row layout built around #theme-toggle /
     #topbar-tenant-switcher / #logout-btn / #cmdk-btn / #lang-toggle /
     #all-apps-btn / #topbar-vertical-widget -- none of those elements exist
     in index.html anymore (find + all-apps merged into lib/cmd-k-search.js's
     one button; theme/lang/Salir moved into lib/account-menu.js's avatar
     dropdown; the old client-side tenant switcher was removed outright, not
     hidden, per the operator's clinic_control decision -- see
     admin/lib/account-menu.js's own header). CSS Grid with display:contents
     on .topbar-right lets all topbar children participate in the same grid
     without restructuring HTML. */
  .topbar {
    display: grid;
    grid-template-areas: "burger logo find clinic bell avatar";
    grid-template-columns: auto 1fr auto auto auto auto;
    height: auto;
    min-height: var(--topbar);
    padding: .4rem .65rem;
    gap: .35rem .45rem;
    align-items: center;
  }
  /* Let topbar-right's children flow into the grid as if they were
     direct topbar children. */
  .topbar-right { display: contents; }

  .hamburger          { grid-area: burger; }
  .topbar-logo        { grid-area: logo; justify-self: start; min-width: 0; overflow: hidden; }
  #topbar-find-btn    { grid-area: find; }
  #topbar-clinic-name { grid-area: clinic; }
  #notif-btn          { grid-area: bell; }
  #account-menu-mount { grid-area: avatar; }
  /* Brand wordmark stays tight. Badge pill HIDDEN on mobile (2026-06-09,
     operator: "FaroSalud Panel is bunched up against the theme color" — the
     pill collided with the theme toggle at ≤768px and adds no info here). */
  .topbar-brand { font-size: .85rem; }
  .topbar-badge { display: none; }

  /* ── Sidebar / drawer (TikTok slide-out) ──────────────────────────
     Sidebar sits BEHIND content. Tap hamburger → main content slides
     right 260px revealing sidebar. Backdrop now positioned over the
     RIGHT-side slid content (not the sidebar) so sidebar nav items
     are clickable. */
  .sidebar {
    /* #805 QAQC M5: single-row topbar now (was * 2 for the old two-row
       layout) -- the drawer's top offset must match the topbar's real
       height or it opens with a stray gap/overlap above it. */
    position: fixed; top: var(--topbar); left: 0; bottom: 0;
    width: 260px; z-index: 5;
    transform: none !important;
    background: var(--white);
    box-shadow: none;
    border-right: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  /* Touch-scroll fix (2026-09-07, operator-reported): dragging the native
     scrollbar handle moved the menu, but touch/wheel scrolling did not.
     Root cause: html/body carry `overscroll-behavior:none` (2026-06-11
     white-flash-on-overscroll fix, components.css) and this sidebar is a
     `position:fixed` descendant scroll container with no explicit
     touch-action -- on some mobile browsers the touch gesture never starts
     an internal scroll because it isn't declared as own-axis-pannable, even
     though overflow-y:auto is set. `touch-action:pan-y` explicitly tells
     the browser this element handles vertical panning itself;
     `overscroll-behavior:contain` keeps scroll-chaining/rubber-band
     contained to the sidebar without touching the global html/body lock. */
  /* 2026-09-07 (Opus root-cause review, third correction): the
     html,body{touch-action:pan-y} line below was REMOVED. It only ever
     needed to apply to .sidebar (which correctly has its own
     touch-action:pan-y a few lines above) -- applying it document-wide
     was overreach that also disables pinch-zoom for the whole app (an
     accessibility regression) and was not the actual cause of the main-
     content scroll bug documented below. */
  /* Staging-banner offset (2026-09-07, operator-reported): the fixed
     .faro-staging-banner sits ABOVE the topbar and pushes app content
     down via `body.faro-has-staging-banner{padding-top:2rem}` -- but this
     sidebar is `position:fixed`, so it never inherits that body padding.
     Result on staging only (this class is absent in production): the
     drawer's top was 2rem too high, clipping the first nav item
     ("Inicio") behind the banner+topbar. Push it down by the same 2rem
     the banner already reserves, only when the banner is present. */
  body.faro-has-staging-banner .sidebar {
    top: calc(var(--topbar) + 2rem);
  }
  body.faro-has-staging-banner .sidebar-backdrop {
    top: calc(var(--topbar) + 2rem);
  }
  /* Sidebar overflow fix (2026-05-31, corrected 2026-09-07) — operator
     flagged: when drawer opens, main-content slid right by 260px making
     the document wider than the viewport, pushing things past the right
     margin. ACTUAL ROOT CAUSE FOUND (Opus root-cause review, 2026-09-07,
     third pass on this bug): the original `html, body { overflow-x:
     hidden; max-width: 100vw; }` line here was the real cause of a
     SEPARATE, much worse bug -- it silently disabled ALL native scroll
     input (wheel, touch, Page_Down) on the whole document, while leaving
     programmatic scroll (scrollTo/scrollTop) working, which is why it
     went undetected for two prior fix attempts that only ever looked at
     .app-body/.main-content. Per CSS Overflow 3: setting overflow-x
     alone forces the other axis to resolve to `auto`; on the ROOT
     element specifically, that also breaks how the browser's compositor
     resolves the viewport as a scroll-input target, decoupling native
     scroll gestures from the html element's own scroll container even
     though it still holds the real scrollable overflow. Verified live:
     forcing html/body to overflow:visible immediately restored gesture
     scroll (scrollY moved from 0 to 600 on the same wheel gesture that
     previously did nothing). Fix: do NOT set overflow on html/body at
     all for this purpose -- .app-body's own overflow-x:hidden (below)
     already fully contains the drawer-slide width problem on its own;
     the html/body rule was redundant for that job and actively harmful
     for scroll. Width containment is handled by max-width:100% instead
     of overflow, so no scroll container is created at the root. */
  html, body { max-width: 100%; }
  .app-body { position: relative; overflow-x: hidden; max-width: 100vw; }
  /* Narrow screens (<360px iPhone SE class) — shrink sidebar so the closed
     drawer doesn't dominate AND so the open-drawer slide is less extreme. */
  @media (max-width: 360px) {
    .sidebar { width: 230px !important; }
    .app-body.menu-open .main-content { transform: translateX(230px); }
    .sidebar-backdrop { left: 230px; }
  }
  .main-content {
    position: relative; z-index: 10;
    background: var(--g50);
    transition: transform .35s cubic-bezier(.4,0,.2,1), border-radius .35s ease, box-shadow .35s ease;
    width: 100%;
    min-height: calc(100vh - var(--topbar));
    padding: 1rem .75rem;
  }
  .app-body.menu-open .main-content {
    transform: translateX(260px);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    box-shadow: -8px 0 28px rgba(0,0,0,.18);
  }
  /* Backdrop positioned over the slid-away main-content area (right of
     the visible sidebar) so sidebar buttons receive their own clicks. */
  .sidebar-backdrop {
    position: fixed; top: var(--topbar);
    left: 260px; right: 0; bottom: 0;
    background: transparent; z-index: 11;
  }
  .sidebar-backdrop.show { display: block; }

  /* Hamburger: keep visible (already is via base CSS), but no border at
     mobile size so it doesn't dominate the row. */
  .hamburger { padding: .35rem .45rem; }

  /* ── Tables → horizontal-scroll wrapper, smaller cells ────────────
     2026-05-30 fix for operator-reported "empty white space on @media":
     at 600px viewport, wide tables blew past viewport and the body bg
     showed through as a void on the right. */
  .product-table-wrap,
  .table-wrap,
  .section-card-body { max-width: 100%; overflow-x: auto; }

  .product-table,
  .section-card .table-wrap table { min-width: 520px; font-size: .78rem; }
  .product-table th,
  .product-table td { padding: .5rem .55rem; }
  /* Hide less-critical columns on narrow viewports */
  .product-table .col-mobile-hide,
  .product-table th.col-mobile-hide { display: none; }

  /* Stat cards collapse to 2 columns */
  .stats-row { grid-template-columns: 1fr 1fr; }

  /* Page header: stack title/actions vertically */
  .page-header { flex-direction: column; align-items: stretch; gap: .5rem; }
  .header-actions { display: flex; flex-wrap: wrap; gap: .35rem; }

}

/* ════════════════════════════════════════════════════════════════════
   ≤ 480px — phone portrait (further tightening)
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .topbar {
    grid-template-columns: auto 1fr auto auto auto auto;
    padding: .35rem .5rem;
    gap: .25rem .35rem;
  }
  /* #805 QAQC M5: narrow-phone tightening for the current-clinic label
     (replaces the removed #topbar-tenant-switcher's own narrow-phone rule
     -- there is no switcher to size anymore, only the always-visible
     label). */
  #topbar-clinic-name { max-width: 95px; font-size: .62rem; }
  .topbar-brand { font-size: .78rem; }
  /* .topbar-badge already display:none at ≤768px (see above) — no sizing needed here. */
  .stats-row { grid-template-columns: 1fr; }
  .product-table th,
  .product-table td { padding: .4rem .35rem; }
}

/* ════════════════════════════════════════════════════════════════════
   ≤ 960px — tablet (record body single column)
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .record-body { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   ≤ 960px — contact chatter as a right dock (Week 3, item G)
   Below 960px the chatter is not stacked under the record any more: it is a drawer
   docked to the right edge, closed by default, opened by the tab on its left edge
   (.chatter-dock-toggle, wired in modules/annotations.js; Esc closes it). Design tokens only.
   ════════════════════════════════════════════════════════════════════ */
.chatter-dock-toggle { display: none; }
@media (max-width: 960px) {
  .record-sidebar.has-chatter-dock {
    position: fixed; top: var(--topbar); right: 0; bottom: 0; z-index: 900;
    width: min(22.5rem, 92vw); overflow-y: auto;
    background: var(--card, var(--white)); border-left: 1px solid var(--line, var(--g200)); box-shadow: var(--sh2);
    transform: translateX(100%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .record-sidebar.has-chatter-dock.chatter-dock-open {
    transform: none; visibility: visible;
    transition: transform .2s ease, visibility 0s;
  }
  .record-sidebar.has-chatter-dock .chatter-dock-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: .75rem; left: -3rem; visibility: visible;
    min-width: 3rem; min-height: 2.75rem; padding: .25rem .5rem;
    background: var(--blue); color: var(--on-accent, var(--white));
    border: 0; border-radius: var(--r) 0 0 var(--r); box-shadow: var(--sh2);
    font-size: .72rem; font-weight: 700; cursor: pointer;
  }
  .record-sidebar.has-chatter-dock.chatter-dock-open .chatter-dock-toggle { left: 0; border-radius: 0 0 var(--r) 0; }
  .record-sidebar.has-chatter-dock .chatter-panel { padding-top: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .record-sidebar.has-chatter-dock { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   PWA / mobile-first fixes (FARO-PWA-001, 2026-06-05)
   Law 2 (mobile-first) + Design QAQC SOP: body ≥16px, ≥16px side margins,
   44px tap targets. Inputs MUST be ≥16px or iOS Safari auto-zooms on focus.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* iOS focus-zoom guard — any form control must render ≥16px */
  input, select, textarea, button { font-size: 16px; }
  /* 44px minimum touch targets (Apple HIG / Material) */
  button, .btn, .nav-item, a.nav-item, input, select,
  .qa-tab, .qa-create { min-height: 44px; }
  button, .btn { padding-block: .6rem; }
  /* ≥16px horizontal breathing room — no content kissing the edge */
  .main-content { padding-left: max(16px, env(safe-area-inset-left));
                  padding-right: max(16px, env(safe-area-inset-right)); }
  /* honor iOS safe areas at the bottom (home-bar) for the quick-action bar */
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}