/* Shell base layout — applied at first paint via the static
   `body.ops-shell-active` class on every shell-using page.

   This file exists to prevent the layout flash that would otherwise
   happen between the moment `body { visibility: visible }` is set by
   admin-auth.js and the moment shell.js mounts and injects its
   `<style>` block. Without this CSS, the body has no padding-top and
   `.container` has no left offset on first paint, so the page renders
   in its raw (full-width) layout for ~50–200ms before shell.js snaps
   it into place.

   What's here: only the rules that affect the BODY's flow positioning
   (padding-top + descendant container offsets + legacy header hiding +
   .ops-main margin reset). The full shell stylesheet (topbar, sidebar,
   role chips, drag handles, edit-mode visuals, etc.) still lives in
   shell.js because those elements don't exist until shell.js injects
   them — there's nothing to style at first paint.

   The CSS variable values (--topbar-h, --sidebar-w) match shell.js's
   `injectShellLayoutStyles()` so the two stay in sync. If you change
   one, change the other. */

:root {
  --topbar-h: 56px;
  --sidebar-w: 232px;
}

/* Pad the top of the body by the topbar height so first-child page
   content doesn't slip under the (eventually-injected) fixed topbar.
   Sidebar offset for body-level legacy yutzybid containers (.container,
   .footer, .welcome-msg) — they need to live to the right of the
   sidebar that shell.js will inject into the same DOM. */
body.ops-shell-active {
  padding-top: var(--topbar-h);
}
body.ops-shell-active > .container,
body.ops-shell-active > .footer,
body.ops-shell-active > div.welcome-msg {
  margin-left: var(--sidebar-w);
  max-width: calc(100vw - var(--sidebar-w));
}

/* Hide the legacy yutzybid red header (.header / .header-bar /
   .topbar / #adminBar). These were the navigation surface pre-v5.5.0;
   the sidebar has fully replaced them. Most pages had their .header
   markup deleted in v5.5.4, but this rule stays as belt-and-suspenders
   for any page that still has one or that admin-auth.js injects into. */
body.ops-shell-active > .header,
body.ops-shell-active > .header-bar,
body.ops-shell-active > .topbar,
body.ops-shell-active > #adminBar {
  display: none !important;
}

/* Ops pages wrap their content in <main class="ops-main">, which
   styles.css gives `margin-top: var(--topbar-h)` so the kanban toolbar
   sits below the fixed topbar. With body's padding-top:56px above,
   styles.css's +56 margin would double-pad — zero it out so .ops-main
   sits flush against body's content edge (immediately under topbar). */
body.ops-shell-active > .ops-main {
  margin-top: 0;
}

/* Mobile: sidebar slides off-screen, so body-level containers lose
   their sidebar-width offset and use the full viewport. */
@media (max-width: 800px) {
  body.ops-shell-active > .header,
  body.ops-shell-active > .container,
  body.ops-shell-active > .footer,
  body.ops-shell-active > div.welcome-msg {
    margin-left: 0;
    max-width: 100vw;
  }
}