/* TASK-2026-MOBILE-UX R1/R2b — responsive 3-tier rail + right account drawer + scroll affordance.
   Targets the BASE shell classes (.nav-admin-root / .nav-rail / .content / .topbar) so EVERY admin
   shell (index.html, index.t9b.html, index.t9c.html, future) gets it just by linking this file +
   loading admin.js (which injects the ☰/⋮ controls + right drawer). No per-shell drawer markup.
   Tiers:  >=1200 full 264px rail · 768–1199 slim 72px ICON rail ("a bit of blue") ·
           <768 rail fully off-canvas → content all-white (☰ / edge-swipe re-opens it). */

/* ===== Fit-to-viewport (R2c) — a screen must never force the page wider than the device,
   and content adapts to the viewport in portrait OR landscape. Applies to EVERY screen. ===== */
.nav-admin-root { overflow-x: hidden; touch-action: manipulation; } /* page backstop + no double-tap zoom */
.row > *, .card { min-width: 0; }                 /* grid/flex children may shrink (kill auto-min blowout) */
.card-b { overflow-x: auto; }                     /* wide tables scroll INSIDE the card, even if injected async */
.card-b > table { width: 100%; }
@media (max-width: 767px) {
  .screen { padding: 18px 14px 72px; }            /* tighter gutters on phones */
  .card-b:not(.tight) { padding-left: 14px; padding-right: 14px; }
  .screen-h { flex-wrap: wrap; gap: 8px; }        /* title + actions stack instead of overflowing */
  .form-grid { grid-template-columns: 1fr; }      /* single column on phones regardless of the 880 rule */
}

/* app-bar controls live in the existing .topbar; shown only on collapse */
.splitter-btn {
  display: none;
  appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 40px; height: 40px; place-items: center;
  border-radius: 8px; font-size: 20px; line-height: 1; color: var(--nv-grey-700);
  flex: 0 0 auto;
}
.splitter-btn:hover { background: var(--nv-grey-100); }
.splitter-btn:focus-visible { outline: 3px solid rgba(0,31,63,0.18); outline-offset: 1px; }

.splitter-backdrop { display: none; }

/* ===== Shared collapsed chrome (both tablet + phone, <1200px) ===== */
@media (max-width: 1199px) {
  .splitter-btn { display: grid; }
  .topbar .crumb { flex: 1 1 auto; min-width: 0; }
  .topbar .crumb,
  .topbar .crumb-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* desktop text actions fold into the right drawer when collapsed */
  .topbar .topbar-actions { display: none; }

  /* the rail becomes a full overlay when OPENED, at either collapsed tier */
  .nav-rail { transition: transform 220ms ease, width 180ms ease; overflow-x: hidden; overflow-y: auto; }
  .nav-rail.is-open {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
    width: min(86vw, 300px); height: 100dvh;
    transform: none; box-shadow: var(--nv-shadow-lg);
  }

  /* RIGHT drawer = account / actions */
  .splitter-side-right {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 40;
    width: min(86vw, 300px); height: 100dvh;
    transform: translateX(100%);
    transition: transform 220ms ease;
    background: var(--nv-white); color: var(--nv-grey-900);
    box-shadow: var(--nv-shadow-lg);
    padding: 18px 16px; display: flex; flex-direction: column; gap: 6px;
    overflow-y: auto;
  }
  .splitter-side-right.is-open { transform: none; }

  .splitter-backdrop {
    display: block; position: fixed; inset: 0; z-index: 30;
    background: rgba(0,31,63,0.45); opacity: 0; pointer-events: none;
    transition: opacity 200ms ease;
  }
  .splitter-backdrop.is-on { opacity: 1; pointer-events: auto; }
  body.splitter-locked { overflow: hidden; }
}

/* ===== Phone (<768px): rail fully off-canvas → content all-white ===== */
@media (max-width: 767px) {
  .nav-admin-root { grid-template-columns: 1fr; }
  .nav-rail {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
    width: min(86vw, 300px); height: 100dvh;
    transform: translateX(-100%); box-shadow: var(--nv-shadow-lg);
  }
}

/* ===== Tablet / landscape (768–1199px): slim ICON rail ("a bit of blue") ===== */
@media (min-width: 768px) and (max-width: 1199px) {
  .nav-admin-root { grid-template-columns: 72px 1fr; }
  .nav-admin-root > .content { grid-column: 2; }
  .nav-rail:not(.is-open) { position: sticky; top: 0; width: 72px; height: 100dvh; padding: 22px 6px; }
  .nav-rail:not(.is-open) .rail-label,
  .nav-rail:not(.is-open) .brand-name,
  .nav-rail:not(.is-open) .brand-tag,
  .nav-rail:not(.is-open) .rail-section,
  .nav-rail:not(.is-open) .rail-foot,
  .nav-rail:not(.is-open) .data-patch { display: none; }
  .nav-rail:not(.is-open) .rail-link { justify-content: center; padding-left: 0; padding-right: 0; }
  .nav-rail:not(.is-open) .glyph { margin: 0 auto; }
  .nav-rail:not(.is-open) .brand { justify-content: center; }
}

/* right drawer never shows on desktop */
@media (min-width: 1200px) { .splitter-side-right { display: none !important; } }

/* right-drawer contents */
.splitter-side-right .rdrawer-head {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--nv-grey-500);
  padding: 4px 8px 8px;
}
.splitter-side-right .rdrawer-actor { font-weight: 700; color: var(--nv-navy); padding: 0 8px 8px; }
.splitter-side-right .rdrawer-link {
  appearance: none; border: 0; background: transparent; text-align: left; cursor: pointer;
  display: block; width: 100%; padding: 11px 8px; border-radius: 8px;
  font: 600 14px "Manrope", sans-serif; color: var(--nv-grey-900);
}
.splitter-side-right .rdrawer-link:hover { background: var(--nv-grey-100); }
.splitter-side-right .rdrawer-ver {
  margin-top: auto; padding: 10px 8px 2px; font-size: 11px; color: var(--nv-grey-500);
  border-top: 1px solid var(--nv-grey-200);
}

/* ===== Scroll affordance ===== */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
.scroll-aff {
  position: sticky; right: 0; float: right; top: 0;
  pointer-events: none; display: none; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: 4px 0 0 -30px;
}
.scroll-aff-chev {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--nv-navy); color: #fff; font-size: 16px; font-weight: 800; line-height: 1;
  box-shadow: var(--nv-shadow-md);
  animation: aff-pulse 1.4s ease-in-out infinite;
}
.scroll-aff.at-end .scroll-aff-chev { transform: scaleX(-1); } /* flip → points left */
@keyframes aff-pulse {
  0%, 100% { opacity: .55; transform: translateX(0); }
  50%      { opacity: 1;   transform: translateX(-3px); }
}
.scroll-aff.at-end .scroll-aff-chev { animation-name: aff-pulse-end; }
@keyframes aff-pulse-end {
  0%, 100% { opacity: .55; transform: scaleX(-1) translateX(0); }
  50%      { opacity: 1;   transform: scaleX(-1) translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-rail.splitter-side-left, .splitter-side-right, .splitter-backdrop { transition: none; }
  .scroll-aff-chev { animation: none !important; }
}