/* ============================================================================
   UDS SHELL: the one phone-and-desktop frame for every staff layout
   (mobile register, owner directive 2026-09-02, 5-seat committee).

   Plain CSS on purpose: the SPT shell never loads Tailwind (D10), so the
   shared shell markup (shared/_shell_header, shared/_shell_drawer_footer)
   is written in uds-shell-* classes that render identically in all five
   layouts. Linked LAST by every staff layout; un-layered rules beat
   Tailwind's layered utilities and the department sheets by order, so this
   sheet is authoritative for the frame. The layouts DROP the classes they
   hand over (no second source).

   Two shell tiers only (DECISIONS row 2):
     phone   = everything else (drawer behind the menu button)
     desktop = (min-width: 1024px) and (min-height: 500px): static sidebar
   The height guard keeps a landscape phone in the phone tier. The same
   query string is the `shell-desktop` @custom-variant in
   application.tailwind.css; test/meta/shell_static_scan_test.rb pins the
   two spellings byte-equal.
   ========================================================================= */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --shell-header-h: 56px;
  --shell-nav-w: 240px;
  --shell-drawer-w: 280px;
  --shell-top-offset: 0px; /* the impersonation banner sets 40px */
}

html {
  -webkit-text-size-adjust: 100%;
  /* The header is sticky, so anything scrolled into view (anchors,
     focus, Playwright) lands below it, not under it. */
  scroll-padding-top: calc(var(--shell-header-h) + var(--safe-top) + var(--shell-top-offset) + 8px);
}

/* ---- Frame ---- */
.uds-shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.uds-shell-nav {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(var(--shell-drawer-w), 85vw);
  display: flex; flex-direction: column;
  background: var(--surface-raised); border-right: 1px solid var(--surface-border);
  z-index: 300;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  overflow-y: auto; overflow-x: hidden;
  padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); padding-left: var(--safe-left);
  margin: 0; max-width: none; height: auto;
  overscroll-behavior: contain; /* A3: the drawer scrolls, the page behind it does not */
}
body[data-nav-open] .uds-shell-nav { transform: none; }
body[data-nav-open] { overflow: hidden; }

.uds-shell-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 250; display: none;
  touch-action: none;
}
body[data-nav-open] .uds-shell-overlay { display: block; }

.uds-shell-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  margin: 0; max-width: none; overflow: visible;
}

/* ---- Header (shared/_shell_header) ---- */
.uds-shell-header {
  /* Above page content, below every overlay the shells already have
     (quick-info z-50, impersonation banner z-50, toasts z-60, confirms z-70). */
  position: sticky; top: var(--shell-top-offset); z-index: 30;
  display: flex; align-items: center; gap: 4px;
  height: calc(var(--shell-header-h) + var(--safe-top));
  padding: var(--safe-top) calc(8px + var(--safe-right)) 0 calc(8px + var(--safe-left));
  background: var(--surface-raised); border-bottom: 1px solid var(--surface-border);
  flex-shrink: 0;
}
.uds-shell-menu, .uds-shell-back {
  width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--ink); text-decoration: none; border-radius: var(--radius-control);
}
.uds-shell-menu:hover, .uds-shell-back:hover { background: #F5F3F0; }
.uds-shell-menu:focus-visible, .uds-shell-back:focus-visible,
.uds-shell-row:focus-visible, .uds-shell-user-link:focus-visible, .uds-shell-signout:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.uds-shell-menu svg, .uds-shell-back svg { width: 24px; height: 24px; }
.uds-shell-title {
  flex: 1; min-width: 0; margin: 0; padding: 0 4px;
  font-size: 18px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uds-shell-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.uds-shell-actions > * { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; }
.uds-shell-date { display: none; font-size: 14px; color: var(--ink-secondary); white-space: nowrap; }
.uds-shell-desktop-only { display: none !important; }

/* ---- Drawer footer (shared/_shell_drawer_footer) ---- */
.uds-shell-rows { border-top: 1px solid var(--surface-border); padding: 8px; margin-top: auto; }
.uds-shell-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px;
  padding: 0 12px; border: 0; border-radius: var(--radius-control); background: none;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink);
  text-decoration: none; cursor: pointer; text-align: left;
}
.uds-shell-row:hover { background: #F5F3F0; }
.uds-shell-row svg { width: 20px; height: 20px; color: var(--ink-secondary); flex-shrink: 0; }
.uds-shell-user { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--surface-border); }
.uds-shell-user-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 44px; text-decoration: none; color: inherit; }
.uds-shell-user-link:hover { opacity: 0.8; }
.uds-shell-avatar {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--dept-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500;
}
.uds-shell-user-text { min-width: 0; }
.uds-shell-user-name, .uds-shell-user-role { display: block; }
.uds-shell-user-name { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uds-shell-user-role { font-size: 12px; color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uds-shell-signout-form { display: flex; align-items: center; margin: 0; }
.uds-shell-signout {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-secondary); border-radius: var(--radius-control);
}
.uds-shell-signout:hover { color: var(--ink); background: #F5F3F0; }
.uds-shell-signout svg { width: 20px; height: 20px; }

/* ---- Copyright footers: hidden on phones (they cost 41px under the fold
        on the thread pages and say nothing a staffer needs there). ---- */
.uds-shell-footer { display: none; }

/* BFT's content column (its inline padding moved here so the phone gutter can win) */
.uds-shell-content { padding: 16px; }

/* ---- Phone helpers used by the pages from Phase 2 ---- */
.uds-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.uds-panel { width: min(520px, 100vw) !important; }
.uds-fill-dvh { height: calc(100vh - var(--shell-header-h)); height: calc(100dvh - var(--shell-header-h) - var(--safe-top) - var(--safe-bottom)); }

/* ---- Turbo's loading signal is the only one in the installed app ---- */
.turbo-progress-bar { background: var(--dept-accent); height: 3px; }

/* ---- Phone tier: everything below the desktop query ---- */
@media not all and (min-width: 1024px) and (min-height: 500px) {
  /* Inputs under 16px make iOS zoom the page on focus, and nothing in the
     installed app un-zooms it. ONE rule beats every sheet (!important on
     purpose: .spt-input and .bft-input are class selectors). */
  input:not([type="submit"]):not([type="button"]):not([type="image"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  select, textarea { font-size: 16px !important; min-height: 44px; }
  body, .spt-body, body.bft-layout { font-size: 15px; }
  /* Real 44pt hit areas: the controls inside the header wrappers and the
     drawer's nav links, not just their wrappers. */
  .uds-shell-actions .uds-support-icon, .uds-shell-actions .notification-bell, .uds-shell-actions .spt-sibyl-launch,
  .uds-shell-actions a, .uds-shell-actions button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .uds-shell-nav a, .uds-shell-nav button { min-height: 44px; }
  /* The column never pans; what is wider than a phone scrolls inside its own
     box (tables below) or wraps (header rows, pill rows). */
  .uds-shell-main > main, .uds-shell-main > .data-container, .uds-shell-main > .uds-shell-content { padding-left: max(16px, var(--safe-left)); padding-right: max(16px, var(--safe-right)); overflow-x: hidden; }
  /* Every table scrolls inside itself on a phone (the classic block-table
     rule); nothing else in the app relies on table display at this width. */
  /* Tables already inside a scroller (at any depth), and FullCalendar's grid
     (built from tables), keep table display. */
  .uds-shell-main :not(.overflow-x-auto):not(.overflow-x-auto *):not(.uds-scroll-x):not(.uds-scroll-x *):not([data-role="bft-table-scroll"]):not([data-role="bft-table-scroll"] *):not(.fc):not(.fc *) > table {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* Page header rows and pill rows wrap instead of running off the edge. */
  .spt-page-header, .spt-page-header-right, .spt-filter-row, .spt-summary-row, .spt-card-header, .bft-page-header { flex-wrap: wrap; gap: 8px 12px; }
  .spt-summary-card { min-width: 0; flex: 1 1 140px; }
  /* Every Tailwind flex ROW wraps on a phone unless it says nowrap, scrolls on
     purpose, or leads with a truncating title (those shrink and ellipsize, and
     wrapping would drop their trailing timestamp to a second line). Anything
     inside a scroller keeps its own layout. A row that fits never wraps. */
  .uds-shell-main .flex:not(.flex-col):not(.flex-nowrap):not(.overflow-x-auto):not(.overflow-x-auto *):not(:has(> .truncate)) { flex-wrap: wrap; row-gap: 8px; }
  /* Hand-styled rows (BFT writes display:flex inline): inline styles set no
     flex-wrap, so a sheet rule can still let them wrap. Controls never
     exceed their box. */
  .uds-shell-main div[style*="display: flex"], .uds-shell-main div[style*="display:flex"] { flex-wrap: wrap; }
  .uds-shell-main select, .uds-shell-main input, .uds-shell-main textarea { max-width: 100%; }
  /* SPT: the health strip wraps instead of pushing the page sideways; the
     activity bell dropdown pins to the viewport instead of clipping. */
  .spt-health-item { white-space: normal; }
  .bell-dropdown { position: fixed; left: max(8px, var(--safe-left)); right: max(8px, var(--safe-right)); width: auto; top: calc(var(--shell-header-h) + var(--safe-top) + 8px); }
  /* Confirm dialogs (both flavours) fit a thumb. */
  #turbo-confirm-dialog p[data-confirm-message], .app-modal-body p { font-size: 15px; }
  #turbo-confirm-dialog button, .app-modal button { min-height: 48px; }
}

/* ---- Desktop tier ---- */
@media (min-width: 1024px) and (min-height: 500px) {
  .uds-shell-nav {
    position: sticky; top: var(--shell-top-offset); bottom: auto; align-self: flex-start;
    height: calc(100vh - var(--shell-top-offset)); height: calc(100dvh - var(--shell-top-offset));
    width: var(--shell-nav-w); flex-shrink: 0; z-index: 20; /* above page stickies (z-10), under side panels (40), modals (50) */
    transform: none; transition: none; padding: 0 0 var(--safe-bottom) 0;
  }
  body[data-nav-open] { overflow: auto; }
  .uds-shell-overlay, body[data-nav-open] .uds-shell-overlay { display: none; }
  .uds-shell-menu, .uds-shell-back { display: none; }
  .uds-shell-header { padding-left: calc(24px + var(--safe-left)); padding-right: calc(24px + var(--safe-right)); gap: 8px; }
  .uds-shell-title { padding: 0; }
  .uds-shell-actions { gap: 16px; }
  .uds-shell-actions > * { min-width: 0; min-height: 0; }
  .uds-shell-date { display: inline; }
  .uds-shell-desktop-only { display: inline-flex !important; }
  .uds-shell-phone-only { display: none !important; }
  .uds-shell-footer { display: block; }
  .uds-shell-content { padding: 24px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .uds-shell-nav { transition: none; }
}