/* Shared shell contract for every FiveQuad surface. Page CSS may define its
   content layout, but color, navigation, controls, and device behavior stay
   consistent across the portal, PWA, and public access pages. */

body.site-shell,
body.app-shell,
body.auth-shell {
  --fq-shell-page: #07111f;
  --fq-shell-panel: #0d1726;
  --fq-shell-panel-raised: #122037;
  --fq-shell-panel-muted: #0a1422;
  --fq-shell-line: #263b55;
  --fq-shell-text: #f4f8fc;
  --fq-shell-muted: #a7b7c9;
  --fq-shell-accent: #55b9b3;
  --fq-shell-accent-strong: #78d4cb;
  --fq-shell-success: #2f9b67;
  --fq-shell-warning: #d79a44;
  --fq-shell-danger: #c95d5b;
  --bg: var(--fq-shell-page);
  --panel: var(--fq-shell-panel);
  --panel2: var(--fq-shell-panel-raised);
  --panel3: var(--fq-shell-panel-muted);
  --soft: var(--fq-shell-panel-raised);
  --ink: var(--fq-shell-text);
  --text: var(--fq-shell-text);
  --muted: var(--fq-shell-muted);
  --line: var(--fq-shell-line);
  --border: var(--fq-shell-line);
  --primary: var(--fq-shell-accent);
  --blue: var(--fq-shell-accent);
  --accent: var(--fq-shell-warning);
  --green: var(--fq-shell-success);
  --amber: var(--fq-shell-warning);
  --red: var(--fq-shell-danger);
  color: var(--fq-shell-text);
  background: var(--fq-shell-page);
  color-scheme: dark;
}

body.site-shell,
body.app-shell {
  min-height: 100dvh;
  overflow-x: clip;
}

body.site-shell .sidebar {
  background: #0a1525;
  border-color: var(--fq-shell-line);
  box-shadow: 12px 0 30px rgb(0 0 0 / .18);
}

body.site-shell .brand,
body.site-shell .nav-link,
body.site-shell .sidebar-meta,
body.site-shell .brand-sub {
  color: var(--fq-shell-text);
}

body.site-shell .brand-sub,
body.site-shell .sidebar-meta {
  color: var(--fq-shell-muted);
}

body.site-shell .nav-link {
  border-radius: 6px;
}

body.site-shell .nav-link:hover {
  background: #13243b;
}

body.site-shell .nav-link.active {
  background: #183452;
  border-left-color: var(--fq-shell-accent-strong);
}

body.site-shell .content {
  background: var(--fq-shell-page);
}

body.site-shell .topbar {
  border-bottom-color: var(--fq-shell-line);
}

body.site-shell .subtext,
body.site-shell .small,
body.site-shell .tiny {
  color: var(--fq-shell-muted);
}

body.site-shell .userbox,
body.site-shell .card,
body.site-shell .quiet-panel,
body.site-shell details,
body.site-shell .toolbar,
body.site-shell .table-wrap,
body.site-shell .kpi,
body.site-shell .status-row {
  border-color: var(--fq-shell-line);
  background: var(--fq-shell-panel);
  box-shadow: none;
}

body.site-shell .card:hover,
body.site-shell .kpi:hover,
body.site-shell .status-row:hover {
  border-color: #41617c;
  background: #102039;
  box-shadow: none;
  transform: none;
}

body.site-shell .button,
body.site-shell button {
  border-color: transparent;
  background: #1d3552;
  color: var(--fq-shell-text);
  box-shadow: none;
}

body.site-shell .button:hover,
body.site-shell button:hover {
  background: #274765;
  box-shadow: none;
  transform: none;
}

body.site-shell .button.green,
body.site-shell .btn-green {
  background: var(--fq-shell-success);
}

body.site-shell .button.amber,
body.site-shell .btn-amber {
  background: #8d642a;
}

body.site-shell .button.red,
body.site-shell .btn-red {
  background: #9d4949;
}

body.site-shell input,
body.site-shell select,
body.site-shell textarea {
  border-color: var(--fq-shell-line);
  background: var(--fq-shell-panel-muted);
  color: var(--fq-shell-text);
}

body.site-shell th {
  background: #0a1422;
  color: var(--fq-shell-muted);
}

/* Data headers are labels, not primary action buttons. The compact arrow is
   the only affordance needed to indicate a sortable column. */
body.site-shell .table-wrap thead th,
body.app-shell .table-wrap thead th {
  background: transparent;
  color: var(--fq-shell-muted);
}

body.site-shell .table-wrap thead,
body.app-shell .table-wrap thead {
  background: #0a1422;
}

body.site-shell .table-sort-toggle,
body.app-shell .table-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}

body.site-shell .table-sort-toggle::after,
body.app-shell .table-sort-toggle::after {
  content: "↕";
  color: var(--fq-shell-muted);
  font-size: .9rem;
  opacity: .72;
}

body.site-shell th[aria-sort="ascending"] .table-sort-toggle::after,
body.app-shell th[aria-sort="ascending"] .table-sort-toggle::after { content: "↑"; opacity: 1; }

body.site-shell th[aria-sort="descending"] .table-sort-toggle::after,
body.app-shell th[aria-sort="descending"] .table-sort-toggle::after { content: "↓"; opacity: 1; }

body.site-shell .table-sort-toggle:hover,
body.site-shell .table-sort-toggle:focus-visible,
body.app-shell .table-sort-toggle:hover,
body.app-shell .table-sort-toggle:focus-visible {
  background: transparent !important;
  color: var(--fq-shell-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.site-shell .pill,
body.site-shell .tag {
  border-color: #36516b;
  background: #132840;
  color: #d2f0ec;
}

body.app-shell .rail,
body.app-shell .supply-rail {
  background: #0a1525;
  border-color: var(--fq-shell-line);
}

body.app-shell .rail nav a,
body.app-shell .supply-rail a {
  color: #d5e1ed;
}

body.app-shell .rail nav a.active,
body.app-shell .supply-rail a.active {
  background: #183452;
  box-shadow: inset 3px 0 0 var(--fq-shell-accent-strong);
}

body.app-shell .rail nav a:hover,
body.app-shell .supply-rail a:hover {
  background: #13243b;
}

body.app-shell .content,
body.app-shell .supply-content,
body.app-shell .wrap {
  background: var(--fq-shell-page);
}

body.app-shell .topbar {
  border-color: var(--fq-shell-line);
  background: transparent;
}

body.app-shell .panel-head {
  border-color: var(--fq-shell-line);
  background: #0f1d31;
}

body.app-shell .panel,
body.app-shell .fact,
body.app-shell .board-call,
body.app-shell .notice,
body.app-shell .response-row {
  border-color: var(--fq-shell-line);
  background: var(--fq-shell-panel);
  box-shadow: none;
}

body.app-shell .dispatch-card:hover,
body.app-shell .board-call:hover {
  background: #102039;
}

body.app-shell button,
body.app-shell .button {
  border-color: #36516b;
  background: #1d3552;
  color: var(--fq-shell-text);
  box-shadow: none;
}

body.app-shell button.primary,
body.app-shell .button.primary {
  background: var(--fq-shell-accent);
  color: #06131c;
}

body.app-shell input,
body.app-shell select,
body.app-shell textarea {
  border-color: var(--fq-shell-line);
  background: var(--fq-shell-panel-muted);
  color: var(--fq-shell-text);
}

body.auth-shell {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

body.auth-shell .auth-main,
body.auth-shell main {
  width: min(34rem, 100%);
}

body.auth-shell .panel,
body.auth-shell .auth-card,
body.auth-shell .wrap {
  border-color: var(--fq-shell-line);
  background: var(--fq-shell-panel);
}

/* App pages retain their task-specific layouts, while the shared shell owns
   the visual language and the minimum interaction size across every route. */
body.app-shell.page-dashboard,
body.app-shell.page-dispatch,
body.app-shell.page-inventory {
  min-height: 100dvh;
  background: var(--fq-shell-page);
}

body.app-shell.page-dashboard .empty,
body.app-shell.page-dashboard .empty-status,
body.app-shell.page-dashboard .drawer,
body.app-shell.page-dashboard .route-box,
body.app-shell.page-dashboard .time-box,
body.app-shell.page-dashboard .staffing-role-card,
body.app-shell.page-dashboard .staffing-schedule-card,
body.app-shell.page-dashboard .oos-banner {
  border-color: var(--fq-shell-line);
  background: var(--fq-shell-panel);
  box-shadow: none;
}

body.app-shell.page-dashboard .panel,
body.app-shell.page-dashboard .empty,
body.app-shell.page-dashboard .drawer,
body.app-shell.page-dashboard .map-frame-wrap,
body.app-shell.page-dashboard .route-box,
body.app-shell.page-dashboard .time-box,
body.app-shell.page-dashboard .staffing-role-card,
body.app-shell.page-dashboard .staffing-schedule-card {
  border-radius: 8px;
}

body.app-shell.page-dashboard .empty-kicker,
body.app-shell.page-dashboard .section-header svg {
  color: var(--fq-shell-accent-strong);
}

body.app-shell.page-dashboard .pill.slate,
body.app-shell.page-dashboard .empty-status {
  color: var(--fq-shell-text);
  background: var(--fq-shell-panel-raised);
}

body.app-shell.page-dashboard .menu-button,
body.app-shell.page-dashboard .logout-button,
body.app-shell.page-dashboard .admin-link,
body.app-shell.page-dashboard .drawer-close {
  border-color: #36516b;
  background: #1d3552;
  color: var(--fq-shell-text);
}

body.app-shell.page-dashboard .topbar.panel {
  background: #0f1d31;
}

body.app-shell.page-dashboard .menu-button:hover,
body.app-shell.page-dashboard .logout-button:hover,
body.app-shell.page-dashboard .admin-link:hover,
body.app-shell.page-dashboard .drawer-close:hover {
  border-color: #4f7492;
  background: #274765;
}

body.app-shell.page-dispatch .panel-head,
body.app-shell.page-dispatch .dispatch-meta span,
body.app-shell.page-dispatch .fact,
body.app-shell.page-dispatch .response-row,
body.app-shell.page-dispatch .board-call,
body.app-shell.page-dispatch .notice {
  border-color: var(--fq-shell-line);
  background: var(--fq-shell-panel-raised);
}

body.app-shell.page-dispatch .dispatch-card.active {
  background: #132b42;
  box-shadow: inset 4px 0 0 var(--fq-shell-accent-strong);
}

body.app-shell.page-dispatch .nav-toggle,
body.app-shell.page-inventory .nav-toggle {
  border-color: #36516b;
  background: #1d3552;
}

body.app-shell.page-dispatch .rail nav a,
body.app-shell.page-inventory .supply-rail nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .6875rem .75rem;
  font-size: 1rem;
  line-height: 1.25;
}

body.app-shell.page-dispatch .rail nav a.active,
body.app-shell.page-inventory .supply-rail nav a.active {
  box-sizing: border-box;
}

body.app-shell.page-inventory h1,
body.app-shell.page-inventory .checkout-panel h1 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.08;
}

body.app-shell.page-inventory .hero,
body.app-shell.page-inventory .panel,
body.app-shell.page-inventory .product,
body.app-shell.page-inventory #supply-cart,
body.app-shell.page-inventory .category,
body.app-shell.page-inventory .confirm-dialog,
body.app-shell.page-inventory .empty,
body.app-shell.page-inventory .cart-empty {
  border-color: var(--fq-shell-line);
  background: var(--fq-shell-panel);
  box-shadow: none;
}

body.app-shell.page-inventory .hero,
body.app-shell.page-inventory .panel,
body.app-shell.page-inventory .product,
body.app-shell.page-inventory #supply-cart,
body.app-shell.page-inventory .category,
body.app-shell.page-inventory .confirm-dialog,
body.app-shell.page-inventory .empty,
body.app-shell.page-inventory .cart-empty {
  border-radius: 8px;
}

body.auth-shell .card,
body.auth-shell .form-card,
body.auth-shell .status-card,
body.auth-shell .support-card {
  border-color: var(--fq-shell-line);
  background: var(--fq-shell-panel);
  border-radius: 8px;
  box-shadow: none;
}

body.auth-shell input,
body.auth-shell select,
body.auth-shell textarea {
  border-color: var(--fq-shell-line);
  background: var(--fq-shell-panel-muted);
  color: var(--fq-shell-text);
  border-radius: 6px;
}

body.auth-shell button,
body.auth-shell .button {
  border-color: transparent;
  background: var(--fq-shell-accent);
  color: #06131c;
  border-radius: 6px;
}

body.app-shell img,
body.app-shell svg,
body.app-shell video,
body.app-shell canvas,
body.app-shell iframe,
body.site-shell img,
body.site-shell svg,
body.site-shell video,
body.site-shell canvas,
body.site-shell iframe,
body.auth-shell img,
body.auth-shell svg {
  max-width: 100%;
}

body.site-shell .table-wrap,
body.app-shell .table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

@media (max-width: 73.75rem) {
  body.site-shell .content {
    padding-top: calc(4.5rem + env(safe-area-inset-top));
  }

  body.app-shell .rail,
  body.app-shell .supply-rail {
    background: #0a1525;
  }
}

@media (max-width: 51.25rem) {
  body.app-shell.page-inventory .supply-app {
    display: block;
  }

  body.app-shell.page-inventory .supply-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1049;
    display: block;
    width: min(20rem, calc(100vw - 2.25rem));
    height: 100dvh;
    padding: calc(1rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 160ms ease, visibility 0s linear 160ms;
    box-shadow: 16px 0 34px rgb(0 0 0 / .32);
  }

  body.app-shell.page-dispatch .rail,
  body.app-shell.page-inventory .supply-rail {
    width: min(20rem, calc(100vw - 2.25rem));
  }

  body.app-shell.page-inventory:not(.nav-collapsed) .supply-rail {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
  }

  body.app-shell.page-inventory .supply-nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 1048;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgb(0 0 0 / .58);
  }

  body.app-shell.page-inventory .supply-nav-scrim[hidden] {
    display: none !important;
  }

  body.app-shell.page-inventory .nav-toggle {
    position: fixed;
    top: max(.75rem, env(safe-area-inset-top));
    right: max(.75rem, env(safe-area-inset-right));
    bottom: auto;
    z-index: 1050;
    display: grid;
    width: 48px;
    height: 48px;
  }

  body.app-shell.page-inventory .wrap {
    padding-top: calc(4.5rem + env(safe-area-inset-top));
  }
}

@media (max-width: 43.75rem) {
  body.site-shell .content,
  body.app-shell .content,
  body.app-shell .supply-content {
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  body.site-shell .topbar,
  body.app-shell .topbar {
    gap: .75rem;
  }

  body.site-shell .userbox,
  body.app-shell .status-line {
    width: 100%;
  }

  body.site-shell .toolbar > *,
  body.app-shell .actions > * {
    max-width: 100%;
  }

  body.app-shell.page-dashboard,
  body.app-shell.page-dashboard main {
    height: auto;
    min-height: 100dvh;
    overflow-y: auto;
  }

  body.app-shell.page-dashboard .board {
    height: auto;
    min-height: calc(100dvh - 1.5rem);
  }

  body.app-shell.page-dashboard .main {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell.page-dashboard .topbar-right,
  body.app-shell.page-dashboard .topbar-left {
    min-width: 0;
  }

  body.app-shell.page-dispatch .topbar {
    padding: 0 0 1rem;
    background: transparent;
  }

  body.app-shell.page-dispatch .status-line > * {
    min-height: 44px;
  }

  body.app-shell input,
  body.app-shell select,
  body.app-shell textarea,
  body.auth-shell input,
  body.auth-shell select,
  body.auth-shell textarea {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.site-shell *,
  body.app-shell *,
  body.auth-shell * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}