/**
 * 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: TWO-FLOOR layout per operator spec ────────────────────
     Row 1: [☰] FaroSalud(Panel) — spacer — [theme] [tenant] [Salir]
     Row 2: [search] [bell] [lang] [apps] — — — — — (0 pacientes hoy)
     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  logo  theme  tenant logout"
      "search bell  lang  apps   widget widget";
    grid-template-columns: auto auto 1fr auto minmax(60px, auto) auto;
    grid-template-rows: auto auto;
    height: auto;
    min-height: calc(var(--topbar) * 2);
    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; }
  #theme-toggle           { grid-area: theme; }
  #topbar-tenant-switcher { grid-area: tenant; max-width: 130px; font-size: .68rem; }
  #logout-btn             { grid-area: logout; }
  #cmdk-btn               { grid-area: search; }
  #notif-btn              { grid-area: bell; }
  #lang-toggle            { grid-area: lang; }
  #all-apps-btn           { grid-area: apps; }
  #topbar-vertical-widget {
    grid-area: widget;
    display: inline-flex !important;
    justify-content: flex-end;
    font-size: .65rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Brand wordmark stays tight, badge tucked next to it. */
  .topbar-brand { font-size: .85rem; }
  .topbar-badge { font-size: .58rem; padding: .15rem .42rem; }

  /* ── 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 {
    position: fixed; top: calc(var(--topbar) * 2); left: 0; bottom: 0;
    width: 260px; z-index: 5;
    transform: none !important;
    background: var(--white);
    box-shadow: none;
    border-right: none;
  }
  .app-body { position: relative; overflow-x: hidden; }
  .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) * 2));
    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: calc(var(--topbar) * 2);
    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;
  }
  #topbar-tenant-switcher { max-width: 95px; font-size: .62rem; }
  #logout-btn { font-size: .68rem; padding: .25rem .5rem; }
  .topbar-brand { font-size: .78rem; }
  .topbar-badge { font-size: .55rem; padding: .12rem .35rem; }
  .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; }
}