:root {
  --background: #f3f5f7;
  --surface: #fff;
  --surface-soft: #f7f9fb;
  --sidebar: #14202b;
  --sidebar-hover: #223442;
  --on-sidebar: #fff;
  --text: #1b2732;
  --muted: #5f6e79;
  --border: #dfe5ea;
  --border-strong: #c7d0d8;
  --primary: #176c74;
  --primary-dark: #10575e;
  --primary-soft: #e5f3f3;
  --accent: #168267;
  --accent-text: #168267;
  --on-primary: #fff;
  --warning: #a56514;
  --warning-soft: #fff3df;
  --danger: #b83c45;
  --danger-soft: #fcebed;
  --info: #2f6ba8;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px #14202b0b, 0 12px 32px #14202b10;
  --focus: #2e8993;
  color-scheme: light;
}

/* Dark mode is opt-in only: applied via [data-theme="dark"] (the sidebar
   toggle), persisted in a `theme` cookie shared by every page. With no
   cookie set, the app always starts in light mode regardless of the
   operator's OS/browser preference. */
:root[data-theme="dark"] {
  --background: #10161c;
  --surface: #1a232c;
  --surface-soft: #212b34;
  --sidebar: #0b1117;
  --sidebar-hover: #1c2731;
  --on-sidebar: #fff;
  --text: #e6ecf1;
  --muted: #93a2ad;
  --border: #2b3742;
  --border-strong: #3e4c58;
  --primary: #2a9aa4;
  --primary-dark: #6fd0d9;
  --primary-soft: #123338;
  --accent: #2fb08d;
  --accent-text: #4fd1ab;
  --on-primary: #04191b;
  --warning: #e3a94e;
  --warning-soft: #3a2c14;
  --danger: #e2707a;
  --danger-soft: #3c1a1e;
  --info: #6ba8de;
  --shadow: 0 1px 2px #00000040, 0 12px 32px #00000055;
  --focus: #4fbac4;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--background); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--background);
  color: var(--text);
  font: 15px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--primary-dark); }
h1, h2, h3, h4, p { margin-top: 0; }
h3 { font-size: clamp(1.45rem, 2vw, 1.85rem); letter-spacing: -.025em; }
h4 { font-size: 1.05rem; }
small { font-weight: 500; color: var(--muted); }
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 1000;
  left: 12px;
  top: -80px;
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: var(--shadow);
}
.skip-link:focus { top: 12px; }

.app {
  --sidebar-width: clamp(270px, 22vw, 340px);
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns .18s ease;
}
.side {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 16px 18px;
  background: linear-gradient(175deg, var(--sidebar-hover), var(--sidebar) 70%);
  color: var(--on-sidebar);
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
}
/* .side itself no longer scrolls -- .side-top (logo) and .idle-controls
   (bottom Hide/Unhide button) are fixed flex items, and only .side-scroll
   (the nav + session-controls in between) scrolls, so the logo and the
   collapse toggle stay put no matter how long the menu gets. */
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; }
.side-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  scrollbar-width: thin;
  scrollbar-color: #ffffff40 transparent;
}
.side-scroll::-webkit-scrollbar { width: 6px; }
.side-scroll::-webkit-scrollbar-track { background: transparent; }
.side-scroll::-webkit-scrollbar-thumb { background: #ffffff40; border-radius: 99px; }
.side-scroll::-webkit-scrollbar-thumb:hover { background: #ffffff66; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand > div { flex: 1 1 auto; min-width: 0; }
.btn.nav-toggle { display: none; flex: 0 0 auto; }
.mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #e55045;
  color: #fff;
  font-weight: 900;
  font-size: 1.2rem;
  box-shadow: inset 0 0 0 1px #ffffff20;
}
.mark.has-logo {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  box-shadow: none;
}
/* Absolutely positioned so height:100% resolves reliably -- as a plain
   percentage height on a grid item that isn't stretched (place-items:center
   above means align-self defaults to center, not stretch), the browser falls
   back to sizing the image by its own intrinsic aspect ratio against the
   100% width, which for a wide/short mark (the sidebar's system-logo-only
   banner mode) produced an image far taller than its box, silently clipped
   by overflow:hidden into a cropped-looking center slice. */
.mark.has-logo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.brand.uploaded-logo-only:not(.company-logo-only) > :not(.mark) { display: none; }
.side .brand.system-logo-only:not(.company-logo-only) {
  /* flex: 0 0 auto (not 1 1 auto) -- .side is itself a column flex
     container, and a flex-grow item here would consume all of the
     sidebar's leftover vertical space instead of just the logo's own
     96px, pushing nav/footer far down and leaving a large blank gap. */
  flex: 0 0 auto;
  justify-content: flex-end;
  min-height: 96px;
  width: 100%;
}
.side .brand.system-logo-only:not(.company-logo-only) > :not(.mark) { display: none; }
.side .brand.system-logo-only:not(.company-logo-only) .mark {
  width: 100%;
  height: 96px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.side .brand.system-logo-only:not(.company-logo-only) .mark.has-logo > img { object-position: left center; }
.brand[data-company-brand].company-logo-only { justify-content: flex-end; min-height: 96px; width: 100%; }
.brand[data-company-brand].company-logo-only > :not([data-company-logo]) { display: none; }
.brand [data-company-logo] { display: none; width: 100%; height: 96px; object-fit: contain; object-position: left center; }
.brand[data-company-brand].company-logo-only [data-company-logo] { display: block; }
.brand h1 { margin: 1px 0 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .085em;
}
.side .eyebrow { color: var(--on-sidebar); }
.company-logo-thumb { display: block; width: 72px; height: 36px; object-fit: contain; object-position: center; border-radius: 6px; background: var(--surface-soft); }
.nav { display: grid; gap: 3px; }
.nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 10px 13px 10px 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--on-sidebar);
  text-align: left;
  font-weight: 650;
  cursor: pointer;
}
.nav-icon, .side-action-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.nav-icon svg, .side-action-icon svg { width: 18px; height: 18px; }
.nav-label, .side-action-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.nav button::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 99px;
  background: #68c5c7;
  transform: translateY(-50%);
  transition: height .16s ease;
}
.nav button:hover { background: #ffffff12; color: var(--on-sidebar); }
.nav button.active { background: var(--sidebar-hover); color: var(--on-sidebar); }
.nav button.active::before { height: 20px; }
.side-footer {
  display: grid;
  gap: 14px;
  flex: 0 0 auto;
}
.side-actions { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; }
.side-actions .btn {
  min-width: 0;
  min-height: 38px;
  padding: 8px 9px;
  border-color: #ffffff33;
  background: #ffffff0d;
  color: var(--on-sidebar);
  font-size: .78rem;
}
.side-actions .btn:hover, .side-actions .btn:focus-visible { border-color: #ffffff66; background: #ffffff1c; }
.side-actions #themeToggle { padding: 8px 11px; font-size: .95rem; }
.side-context-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.side-context-actions .btn {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  justify-content: center;
  border-color: #ffffff33;
  background: #ffffff0d;
  color: var(--on-sidebar);
  font-size: .78rem;
}
.side-context-actions .btn:hover,
.side-context-actions .btn:focus-visible {
  border-color: #ffffff66;
  background: #ffffff1c;
  color: var(--on-sidebar);
}
.side-context-actions .company-switch-button[hidden] + .tile-layout-button { grid-column: 1 / -1; }
.side-context-actions .tile-layout-button:only-child { grid-column: 1 / -1; }
.account {
  border-top: 1px solid #ffffff1c;
  padding: 16px 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.account .avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff16;
  color: var(--on-sidebar);
  font-size: .74rem;
  font-weight: 800;
}
.account .avatar.has-image { overflow: hidden; padding: 0; }
.account .avatar img { width: 100%; height: 100%; object-fit: cover; }
.account div { min-width: 0; }
.account strong, .account span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account div span { color: var(--on-sidebar); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.idle-timer {
  margin: 8px 4px 0;
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffffff80;
  letter-spacing: .02em;
}
.idle-timer::before { content: "Idle sign-out in "; font-weight: 500; }
.idle-timer.idle-timer-warning { color: #ff9d92; }
.idle-controls { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 0 auto; padding-top: 14px; border-top: 1px solid #ffffff1c; }
.idle-controls .idle-timer { flex: 1 1 auto; min-width: 0; }
.sidebar-collapse-toggle {
  flex: 0 0 auto;
  min-width: 38px;
  min-height: 34px;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #ffffff33;
  border-radius: 8px;
  background: #ffffff0d;
  color: var(--on-sidebar);
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
}
.sidebar-collapse-toggle:hover, .sidebar-collapse-toggle:focus-visible { border-color: #ffffff66; background: #ffffff1c; }
.sidebar-collapse-icon { font-size: 1.25rem; line-height: 1; transition: transform .18s ease; }
/* Unscoped (not just the >=801px collapsed-rail rules below) so Hide/Unhide
   gives the same icon-flip + label-swap feedback at every width, including
   inside the mobile menu, where the rest of the collapsed-sidebar treatment
   (icon-only rail) doesn't apply. */
.app[data-sidebar-collapsed="true"] .sidebar-collapse-label { display: none; }
.app[data-sidebar-collapsed="true"] .sidebar-collapse-icon { transform: rotate(180deg); }
/* Also unscoped: shrinking the logo down to just its icon mark is the one
   part of the collapsed-rail treatment that still makes sense on a
   full-width mobile header (it reclaims header height) -- unlike the
   sidebar-width/nav-column changes below, which only apply once there's an
   actual narrow icon rail to collapse into (>=801px). Without this, tapping
   Hide on mobile flips the button's own label but changes nothing else you
   can see. */
.app[data-sidebar-collapsed="true"] .brand > :not(.mark),
.app[data-sidebar-collapsed="true"] .brand[data-company-brand] [data-company-logo] { display: none; }
.app[data-sidebar-collapsed="true"] .brand[data-company-brand] > .mark { display: grid; }
.app[data-sidebar-collapsed="true"] .side .brand,
.app[data-sidebar-collapsed="true"] .side .brand.system-logo-only:not(.company-logo-only),
.app[data-sidebar-collapsed="true"] .side .brand[data-company-brand].company-logo-only {
  width: 44px;
  min-height: 44px;
  margin-inline: auto;
}
.app[data-sidebar-collapsed="true"] .side .brand .mark,
.app[data-sidebar-collapsed="true"] .side .brand.system-logo-only:not(.company-logo-only) .mark {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

@media (min-width: 801px) {
  .app[data-sidebar-collapsed="true"] { --sidebar-width: 76px; }
  .app[data-sidebar-collapsed="true"] .side { padding-inline: 10px; gap: 16px; overflow-x: hidden; }
  .app[data-sidebar-collapsed="true"] .side-top,
  .app[data-sidebar-collapsed="true"] .brand,
  .app[data-sidebar-collapsed="true"] .account,
  .app[data-sidebar-collapsed="true"] .idle-controls { justify-content: center; }
  .app[data-sidebar-collapsed="true"] .brand > :not(.mark),
  .app[data-sidebar-collapsed="true"] .nav-label,
  .app[data-sidebar-collapsed="true"] .side-action-label,
  .app[data-sidebar-collapsed="true"] .account > div,
  .app[data-sidebar-collapsed="true"] .idle-timer,
  .app[data-sidebar-collapsed="true"] .sidebar-collapse-label,
  .app[data-sidebar-collapsed="true"] .brand[data-company-brand] [data-company-logo] { display: none; }
  .app[data-sidebar-collapsed="true"] .brand[data-company-brand] > .mark { display: grid; }
  .app[data-sidebar-collapsed="true"] .side .brand,
  .app[data-sidebar-collapsed="true"] .side .brand.system-logo-only:not(.company-logo-only),
  .app[data-sidebar-collapsed="true"] .side .brand[data-company-brand].company-logo-only {
    width: 44px;
    min-height: 44px;
    margin-inline: auto;
  }
  .app[data-sidebar-collapsed="true"] .side .brand .mark,
  .app[data-sidebar-collapsed="true"] .side .brand.system-logo-only:not(.company-logo-only) .mark {
    width: 42px;
    height: 42px;
    border-radius: 11px;
  }
  .app[data-sidebar-collapsed="true"] .nav button { justify-content: center; padding: 11px 8px; }
  .app[data-sidebar-collapsed="true"] .nav button::before { left: 1px; }
  .app[data-sidebar-collapsed="true"] .side-actions { grid-template-columns: 1fr; }
  .app[data-sidebar-collapsed="true"] .side-actions .btn {
    width: 44px;
    margin-inline: auto;
    padding-inline: 8px;
    font-size: 0;
  }
  .app[data-sidebar-collapsed="true"] .side-actions .btn > span { font-size: 1rem; }
  .app[data-sidebar-collapsed="true"] .side-context-actions { grid-template-columns: 1fr; }
  .app[data-sidebar-collapsed="true"] .side-context-actions .btn {
    width: 44px;
    margin-inline: auto;
    padding-inline: 8px;
    justify-content: center;
  }
  .app[data-sidebar-collapsed="true"] .account { padding-inline: 0; }
  .app[data-sidebar-collapsed="true"] .sidebar-collapse-icon { transform: rotate(180deg); }
}

.work { min-width: 0; padding: 28px 30px 60px; }
.top {
  margin: -28px -30px 26px;
  padding: 16px 30px;
  min-height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--background);
  background: var(--background);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.top h2 { margin: 2px 0 0; font-size: 1.35rem; letter-spacing: -.02em; }
.breadcrumb { display: flex; gap: 7px; align-items: center; color: var(--muted); font-size: .72rem; }
.breadcrumb strong { color: var(--text); }
.actions, .split-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 8px 13px;
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
}
.btn:hover { border-color: var(--border-strong); background: var(--surface-soft); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn.danger { color: var(--danger); border-color: #e5b9bd; }
.btn.danger:hover { background: var(--danger-soft); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.icon { min-width: 38px; padding: 6px 10px; font-size: 1.2rem; }
.btn.small { min-height: 31px; padding: 6px 9px; font-size: .8rem; }
.btn[disabled], .btn[aria-disabled="true"] {
  /* Plain opacity used to wash light-on-light buttons out to
     near-invisible (text/border/fill all faded toward the page
     background at once, unlike colored variants which stayed
     legible). Explicit muted colors keep contrast readable while
     still looking clearly disabled. */
  opacity: 1;
  background: var(--surface-soft);
  color: var(--muted);
  border-color: var(--border);
  cursor: not-allowed;
}
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover { background: var(--surface-soft); border-color: var(--border); }
.btn:focus-visible, .nav button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [role="button"]:focus-visible, tr[tabindex]:focus-visible,
a:focus-visible, .table[tabindex]:focus-visible, .sort-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.page { display: none; width: 100%; min-width: 0; }
.page.active { display: block; }
.page-heading {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}
.page-heading h3 { margin: 0 0 4px; }
.page-heading p { margin: 0; max-width: 740px; color: var(--muted); }
/* Every page used to name itself three times -- breadcrumb, top-bar <h2>, then
   a page-heading <h3> repeating it verbatim ("Orders / Orders / ORDER
   PROCESSING / Orders"). The top bar is the page title; the section heading
   below it now carries the eyebrow's words, which were the only ones that said
   anything new. Keeps a heading in the outline and buys back a line above the
   fold on every page. */
.page-heading h3.eyebrow, .head h3.eyebrow { margin: 0; }
.page-heading h3.eyebrow + p, .head h3.eyebrow + p { margin-top: 5px; }
/* Compatibility for the vendor portal and first-start screen. */
.head {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}
.head h3 { margin: 0; }
.panel, .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.panel { padding: 18px; margin-bottom: 18px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.panel-heading h4 { margin: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.card { padding: 17px; }
.dashboard-tiles-unlocked .dashboard-tile,
.dashboard-tiles-unlocked .workspace-tile {
  border-style: dashed;
  cursor: grab;
  user-select: none;
}
.dashboard-tiles-unlocked .dashboard-tile:active,
.dashboard-tiles-unlocked .workspace-tile:active { cursor: grabbing; }
.dashboard-tile-dragging {
  opacity: .48;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.navigation-tiles-unlocked button[data-page] {
  box-shadow: inset 0 0 0 1px #ffffff2e;
  cursor: grab;
}
.navigation-tiles-unlocked button[data-page]:active { cursor: grabbing; }
.navigation-tiles-unlocked button.navigation-tile-dragging {
  opacity: .48;
  box-shadow: inset 0 0 0 2px #68c5c7;
}
.checkout-layout-unlocked > .checkout-layout-tile {
  position: relative;
  outline: 1px dashed color-mix(in srgb, var(--primary) 65%, var(--border));
  outline-offset: 5px;
  border-radius: 7px;
  cursor: grab;
}
.checkout-layout-unlocked > .checkout-layout-tile::after {
  content: "⋮⋮";
  position: absolute;
  top: -2px;
  right: 2px;
  color: var(--primary);
  font-weight: 900;
  letter-spacing: -2px;
  pointer-events: none;
}
.checkout-layout-unlocked > .checkout-layout-tile:active { cursor: grabbing; }
.checkout-layout-tile-dragging { opacity: .5; }
.checkout-stage #orderHeaderForm {
  padding: 14px;
  gap: 9px 12px;
}
.checkout-stage #orderHeaderForm .field { gap: 3px; }
.checkout-stage #orderHeaderForm .field > span { font-size: .72rem; }
.checkout-stage #orderHeaderForm input,
.checkout-stage #orderHeaderForm select,
.checkout-stage #orderHeaderForm textarea {
  min-height: 34px;
  padding: 6px 9px;
}
.checkout-stage #orderHeaderForm textarea { min-height: 70px; }
.checkout-stage #orderHeaderForm .field.checkbox { min-height: 32px; }
.checkout-stage #orderHeaderForm .section-divider { margin: 9px 0 3px; }
.checkout-stage #orderHeaderForm > .section-divider:first-child { margin-top: 1px; }
.checkout-stage #checkoutAddressStatus { font-size: .78rem; line-height: 1.25; }
.checkout-stage #checkoutAddressActions { margin-top: 1px; }
.multiline-text { white-space: pre-wrap; }
.card span { display: block; color: var(--muted); font-size: .78rem; font-weight: 700; }
.card strong { display: block; margin-top: 5px; font-size: 1.75rem; line-height: 1.1; }
.cards .card strong { max-width: 100%; overflow-wrap: anywhere; }
.metric-card, .status-card { text-align: left; }
button.card { width: 100%; color: inherit; cursor: pointer; }
button.card:hover { border-color: #a8bec1; box-shadow: 0 2px 4px #14202b0d, 0 16px 34px #14202b13; }
.metric-card[data-tone="warning"] { border-top: 3px solid #d79338; }
.metric-card[data-tone="info"] { border-top: 3px solid #5e8dbb; }
.metric-card[data-tone="success"] { border-top: 3px solid #49a087; }
.status-card.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.queue-panel { min-height: 160px; }
.company-card-grid {
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.company-choice-card {
  width: 100%;
  min-height: 92px;
  padding: 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  text-align: left;
  cursor: pointer;
}
.company-choice-card:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); }
.company-choice-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.company-choice-card.current { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px var(--primary-soft); }
.company-choice-card.current:disabled { opacity: 1; cursor: default; transform: none; }
.company-choice-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .04em;
}
.company-choice-copy { min-width: 0; }
.company-choice-copy strong, .company-choice-copy small { display: block; overflow: hidden; text-overflow: ellipsis; }
.company-choice-copy strong { font-size: 1rem; }
.company-choice-copy small { margin-top: 4px; color: var(--muted); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.company-choice-arrow { color: var(--primary); font-size: 1.35rem; }
.company-choice-status { color: var(--primary-dark); font-size: .68rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.company-card-grid[aria-busy="true"] { opacity: .65; pointer-events: none; }
dialog.company-switch-dialog { width: min(760px, calc(100vw - 28px)); height: auto; max-height: min(82vh, 760px); }

.filter-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 11px;
  flex-wrap: wrap;
  box-shadow: none;
}
.filter-toolbar.compact { margin-bottom: 14px; padding: 0; border: 0; box-shadow: none; }
.filter-toolbar .field { min-width: 150px; flex: 1 1 150px; }
.filter-toolbar .search-field { min-width: min(280px, 100%); flex-grow: 2; }
.field { display: grid; gap: 6px; }
.field.checkbox {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.field.checkbox input { width: 17px; min-height: 17px; height: 17px; margin: 0; }
.field > span, .check-field > span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 750;
}
.check-field { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; }
.check-field input { width: 17px; height: 17px; margin: 0; }
input, select, textarea {
  width: 100%;
  min-height: 39px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface);
  color: var(--text);
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-soft); color: var(--muted); }
.material-search { position: relative; min-width: min(320px, 52vw); }
.order-material-results, .material-search-results { margin-top: 6px; overflow: auto; max-height: 220px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.material-search-result { display: grid; width: 100%; gap: 1px; padding: 9px 10px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.material-search-result:last-child { border-bottom: 0; }
.material-search-result:hover, .material-search-result:focus-visible { background: var(--primary-soft); outline: 0; }
.material-search-result strong { font-size: .84rem; }
.material-search-result span { font-weight: 650; }
.material-search-result small { font-size: .72rem; }
.material-search-empty { margin: 0; padding: 10px; color: var(--muted); font-size: .82rem; }
.line-material-selection { display: block; min-height: 1.25em; margin-top: 5px; }
.form-stack { display: grid; gap: 14px; }
.form-stack.narrow { width: min(560px, 100%); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; align-items: end; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.span-2 { grid-column: 1 / -1; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: center; }
.form-sections { display: grid; gap: 17px; }
fieldset { margin: 0; padding: 15px; border: 1px solid var(--border); border-radius: 12px; }
legend { padding: 0 7px; color: var(--text); font-size: .86rem; font-weight: 800; }
.form-error {
  padding: 10px 12px;
  border: 1px solid #e5b9bd;
  border-radius: 8px;
  background: var(--danger-soft);
  color: #8e2831;
  font-weight: 650;
}
.form-error:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.form-error[data-kind="conflict"] { border-color: #e1c185; background: var(--warning-soft); color: #73501e; }
.form-error[data-kind="forbidden"] { border-color: #c6cbd1; background: #f2f4f6; color: #4c5964; }
:root[data-theme="dark"] .form-error { color: #f3b6bd; }
:root[data-theme="dark"] .form-error[data-kind="conflict"] { color: #f0c78c; }
:root[data-theme="dark"] .form-error[data-kind="forbidden"] { border-color: var(--border-strong); background: var(--surface-soft); color: var(--muted); }

.table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  contain: layout paint;
  overflow: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px #14202b08;
}
table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .84rem; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; vertical-align: middle; }
th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
tbody tr:last-child td { border-bottom: 0; }
.selectable-table tbody tr[data-record-id] { cursor: pointer; }
.selectable-table tbody tr[data-record-id]:hover td { background: var(--surface-soft); }
.selectable-table tbody tr.selected td { background: var(--primary-soft); }
.selectable-table tbody tr.selected td:first-child { box-shadow: inset 4px 0 var(--primary); }
.selectable-table tbody tr:focus-visible td { background: var(--primary-soft); }
.primary-cell { font-weight: 800; color: var(--text); }
.secondary-cell { display: block; color: var(--muted); font-size: .74rem; font-weight: 500; }
.number { text-align: right; font-variant-numeric: tabular-nums; }
.empty-cell { padding: 28px; text-align: center; color: var(--muted); white-space: normal; }
.loading-cell, .error-cell { padding: 28px; text-align: center; color: var(--muted); white-space: normal; }
.loading-cell::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 9px;
  vertical-align: -2px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.error-cell { color: var(--danger); }
.grid-table { margin-bottom: 12px; }
.grid-table table { min-width: 980px; }
.grid-table th, .grid-table td { padding: 6px; }
.grid-table input, .grid-table select, .grid-table textarea { min-width: 90px; padding: 7px 8px; font-size: .82rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 8px;
  background: #edf2f5;
  color: #50616e;
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.badge.ACTIVE, .badge.AVAILABLE, .badge.RECEIVED, .badge.SHIPPED, .badge.APPROVED, .badge.COMPLETED, .badge.ACCEPTED {
  background: #e4f3ed; color: #17765f;
}
.badge.ORDERED, .badge.SUBMITTED, .badge.OPEN, .badge.DRAFT { background: #eaf1f8; color: #356d9d; }
.badge.WORKING, .badge.RECEIVING, .badge.IN_PROGRESS, .badge.PARTIALLY_RECEIVED { background: #fff2dc; color: #966017; }
.badge.PACKED, .badge.WAITING_FOR_PICKUP, .badge.PENDING_APPROVAL, .badge.QUARANTINE { background: #f3ebfa; color: #77529b; }
.badge.ON_HOLD, .badge.HOLD, .badge.REJECTED, .badge.DAMAGED { background: #fdebed; color: #a8333e; }
.badge.CANCELLED, .badge.VOIDED, .badge.INACTIVE { background: #f0f1f2; color: #707c85; }
.badge.urgent { background: #fdebed; color: #a8333e; }
.badge.standard { background: #edf2f5; color: #50616e; }

/* Status badges are self-contained color pairs, not derived from the
   surface/text variables, so they need their own dark-mode pairing --
   otherwise every badge in the app stays a light-mode pastel chip
   floating on a dark page. */
:root[data-theme="dark"] .badge { background: #212b34; color: #93a2ad; }
:root[data-theme="dark"] .badge.ACTIVE, :root[data-theme="dark"] .badge.AVAILABLE,
:root[data-theme="dark"] .badge.RECEIVED, :root[data-theme="dark"] .badge.SHIPPED,
:root[data-theme="dark"] .badge.APPROVED, :root[data-theme="dark"] .badge.COMPLETED,
:root[data-theme="dark"] .badge.ACCEPTED {
  background: #123328; color: #4fd1ab;
}
:root[data-theme="dark"] .badge.ORDERED, :root[data-theme="dark"] .badge.SUBMITTED,
:root[data-theme="dark"] .badge.OPEN, :root[data-theme="dark"] .badge.DRAFT { background: #16283a; color: #7db8e6; }
:root[data-theme="dark"] .badge.WORKING, :root[data-theme="dark"] .badge.RECEIVING,
:root[data-theme="dark"] .badge.IN_PROGRESS, :root[data-theme="dark"] .badge.PARTIALLY_RECEIVED { background: #3a2c14; color: #e3a94e; }
:root[data-theme="dark"] .badge.PACKED, :root[data-theme="dark"] .badge.WAITING_FOR_PICKUP,
:root[data-theme="dark"] .badge.PENDING_APPROVAL, :root[data-theme="dark"] .badge.QUARANTINE { background: #2b1f38; color: #c9a6e6; }
:root[data-theme="dark"] .badge.ON_HOLD, :root[data-theme="dark"] .badge.HOLD,
:root[data-theme="dark"] .badge.REJECTED, :root[data-theme="dark"] .badge.DAMAGED,
:root[data-theme="dark"] .badge.urgent { background: #3c1a1e; color: #e2707a; }
:root[data-theme="dark"] .badge.CANCELLED, :root[data-theme="dark"] .badge.VOIDED,
:root[data-theme="dark"] .badge.INACTIVE, :root[data-theme="dark"] .badge.standard { background: #242e37; color: #93a2ad; }

.pagination { min-height: 44px; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .8rem; }
.pagination-size { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; white-space: nowrap; }
.pagination-size input {
  width: 78px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.pagination-size input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.queue-tabs { display: flex; gap: 4px; margin-bottom: 12px; padding: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.queue-tabs button {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--muted);
  font-weight: 750;
  cursor: pointer;
}
.queue-tabs button[aria-selected="true"] { background: var(--surface); color: var(--primary-dark); box-shadow: inset 0 -2px var(--primary); }
.sort-button {
  width: 100%;
  min-width: max-content;
  margin: -7px -8px;
  padding: 7px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}
.sort-button:hover { background: var(--surface-soft); color: var(--text); }
.sort-button.number { justify-content: flex-end; }
.sort-indicator { width: 10px; color: var(--primary-dark); font-size: .8rem; line-height: 1; }
.sort-button[data-active-sort="true"] .sort-indicator::before { content: "▲"; }
.sort-button[data-active-sort="true"][data-sort-direction="desc"] .sort-indicator::before { content: "▼"; }
.progress { display: inline-flex; align-items: center; gap: 8px; }
.progress-track { width: 70px; height: 6px; overflow: hidden; border-radius: 99px; background: var(--border); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }

.page-state {
  position: fixed;
  z-index: 50;
  left: 50%;
  top: 88px;
  transform: translateX(-50%);
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 750;
}
.page[aria-busy="true"] { cursor: progress; }
.page-feedback {
  margin: 0 0 18px;
  padding: 15px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #e4b8bc;
  border-left: 5px solid var(--danger);
  border-radius: 11px;
  background: var(--danger-soft);
  color: #842c34;
}
.page-feedback[data-kind="conflict"] { border-color: #e6ca96; border-left-color: var(--warning); background: var(--warning-soft); color: #73501e; }
.page-feedback[data-kind="forbidden"] { border-color: #cbd3da; border-left-color: #667582; background: #f1f4f6; color: #46545f; }
.page-feedback strong { display: block; font-size: 1rem; }
.page-feedback p { margin: 3px 0 0; color: inherit; }
:root[data-theme="dark"] .page-feedback { color: #f3b6bd; }
:root[data-theme="dark"] .page-feedback[data-kind="conflict"] { color: #f0c78c; }
:root[data-theme="dark"] .page-feedback[data-kind="forbidden"] { border-color: var(--border-strong); border-left-color: var(--muted); background: var(--surface-soft); color: var(--muted); }
.toast-region { position: fixed; z-index: 100; right: 22px; top: 90px; width: min(380px, calc(100vw - 44px)); display: grid; gap: 8px; }
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--info);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-weight: 650;
}
.toast-message { min-width: 0; overflow-wrap: anywhere; }
.toast-close {
  flex: 0 0 auto;
  margin: -4px -5px -4px auto;
  padding: 0;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.toast-close:hover, .toast-close:focus-visible { background: var(--surface-alt); }
.toast.success { border-left-color: var(--accent); }
.toast.error { border-left-color: var(--danger); }
.empty-state { padding: 26px; color: var(--muted); text-align: center; }
.info-banner, .warning-box {
  margin-bottom: 16px;
  padding: 12px 14px;
  display: flex;
  gap: 8px 16px;
  flex-wrap: wrap;
  border: 1px solid #b8d8da;
  border-radius: 10px;
  background: var(--primary-soft);
  color: #234c50;
}
.warning-box { border-color: #edd1a5; background: var(--warning-soft); color: #77501c; }
.section-divider { margin: 24px 0 10px; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.section-divider small { font-size: .68rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.section-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.record-summary { margin-bottom: 14px; }
.record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.section-head h4 { margin: 0; }
.material-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.material-images figure { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.material-images img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-soft); }
.material-images figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px; color: var(--muted); font-size: .78rem; }
/* Row actions must stay on one line. `.actions` wraps by design, which is right
   in a panel footer but wrong inside a table cell: with up to seven buttons in
   a ~120px column it turned every account row into a vertical button stack,
   inflating rows from ~44px to 288px and pushing four records off a 1000px
   screen. The table already scrolls horizontally when the actions need it. */
tbody td .actions { flex-wrap: nowrap; gap: 6px; }

/* With `nowrap` on every cell, the single longest value in a column sets that
   column's width forever: one 90-character audit actor claimed 432px and a
   41-character company name 355px, pushing later columns off-screen on six
   pages. Cap the ordinary cells and clip instead -- table-tools puts the full
   value in a title on any cell that actually got clipped. Cells holding row
   actions or form controls are exempt: their width is real, not runaway. */
.table:not(.grid-table) table td,
.table:not(.grid-table) table th { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
/* These must out-specify the cap above, or the exemption silently loses and the
   row actions get clipped -- which is the one thing the exploded view forbids. */
.table:not(.grid-table) table td:has(input, select, textarea, .actions) { max-width: none; }
.table:not(.grid-table) table .empty-cell,
.table:not(.grid-table) table .loading-cell,
.table:not(.grid-table) table .error-cell { max-width: none; overflow: visible; }

/* Column reordering and resizing, enabled by the Unlock layout button. */
table.columns-unlocked thead th { cursor: grab; position: relative; }
table.columns-unlocked thead th:hover { background: var(--primary-soft); }
table.columns-unlocked thead th:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
thead th.column-dragging { opacity: .55; cursor: grabbing; }
/* The grip sits wholly inside its own header. Straddling the column edge gave
   it a ~4px hit area, because the neighbouring header won the hit test for
   everything past the boundary. */
.col-resize {
  position: absolute;
  top: 0;
  right: 0;
  width: 11px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
}
.col-resize::after {
  content: "";
  position: absolute;
  top: 18%;
  right: 3px;
  width: 2px;
  height: 64%;
  border-radius: 2px;
  background: var(--primary);
  opacity: .35;
}
.col-resize:hover::after { opacity: 1; }
body.resizing-column { cursor: col-resize; user-select: none; }

/* Hidden columns. A column is only gone while the layout is locked; unlock and
   it returns as a narrow stub carrying the button that brings it back, so a
   column can never go missing with no way to find it again. */
.col-hidden { display: none; }
table.columns-unlocked th.col-hidden,
table.columns-unlocked td.col-hidden {
  display: table-cell;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  background: var(--surface-soft);
}
table.columns-unlocked th.col-hidden > :not(.col-hide),
table.columns-unlocked td.col-hidden > * { visibility: hidden; }
table.columns-unlocked th.col-hidden { color: transparent; }
table.columns-unlocked td.col-hidden { color: transparent; }
.col-hide {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: var(--surface);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.col-hide:hover { background: var(--danger-soft); color: var(--danger); }
table.columns-unlocked th.col-hidden .col-hide {
  right: 50%;
  transform: translate(50%, -50%);
  background: var(--primary);
  color: var(--on-primary);
}
table.columns-unlocked th.col-hidden .col-hide:hover { background: var(--primary-dark); }
/* Once a column has an explicit width, its content must clip rather than
   force the column back open. */
table.columns-sized th, table.columns-sized td { overflow: hidden; text-overflow: ellipsis; }
table.columns-sized td .actions { overflow: visible; }
/* Denser data rows: the person cell is only 40px tall, so the old 11px cell
   padding plus a 40px avatar was most of the row height for no information. */
.table thead th { padding-top: 9px; padding-bottom: 9px; }
.table tbody td { padding-top: 7px; padding-bottom: 7px; }
.table .person-cell { min-width: 0; }
.table .person-avatar { width: 30px; height: 30px; font-size: .68rem; }
.table .person-cell small { font-size: .78rem; opacity: .85; }

.person-cell { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.person-cell > div { min-width: 0; }
.person-cell strong, .person-cell small { display: block; overflow: hidden; text-overflow: ellipsis; }
.person-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: .75rem;
  font-weight: 850;
}
.person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.record-grid > div { padding: 10px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); }
.record-grid span { display: block; margin-bottom: 3px; color: var(--muted); font-size: .7rem; font-weight: 750; text-transform: uppercase; }
.record-grid strong { overflow-wrap: anywhere; }
.editable-detail-card {
  position: relative;
  min-width: 0;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.editable-detail-card > small {
  position: absolute;
  right: 9px;
  top: 7px;
  color: var(--primary);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  opacity: 0;
}
.editable-detail-card:hover,
.editable-detail-card:focus-visible {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
  outline: none;
}
.editable-detail-card:hover > small,
.editable-detail-card:focus-visible > small { opacity: 1; }
.editable-description-card {
  min-height: 56px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
}
.editable-description-card p { margin: 0; padding-right: 34px; white-space: pre-wrap; overflow-wrap: anywhere; }
.inline-detail-form { display: grid; gap: 8px; width: 100%; cursor: default; }
.inline-detail-form input,
.inline-detail-form textarea { width: 100%; min-width: 0; }
.inline-detail-form .actions { margin-top: 0; }
.inline-dimension-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.inline-dimension-grid label { display: grid; gap: 3px; min-width: 0; }
.record-grid .inline-detail-form span,
.record-grid .inline-dimension-grid span { margin: 0; font-size: .66rem; }
.record-grid .inline-detail-form .check-field span { font-size: .76rem; text-transform: none; }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; padding: 0 0 17px 25px; }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); }
.timeline li::after { content: ""; position: absolute; left: 9px; top: 16px; width: 1px; bottom: 0; background: var(--border-strong); }
.timeline li:last-child::after { display: none; }
.timeline p { margin: 2px 0 0; color: var(--muted); font-size: .78rem; }
.detail-columns { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: 18px; }
.detail-section { margin-bottom: 20px; }
.detail-section h4 { margin: 0 0 9px; }
.order-address-lines { padding: 3px 0 4px; }
.order-address-lines p { margin: 0; padding: 3px 0; overflow-wrap: anywhere; }
.order-address-lines p + p { color: var(--muted); }
.receipt-line-list { display: grid; gap: 12px; }
.receipt-line-card { padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px #14202b08; }
.receipt-line-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.receipt-line-head h5 { margin: 2px 0; font-size: 1rem; }
.receipt-line-head p, .receipt-line-note p { margin: 0; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.receipt-line-head > strong { flex: 0 0 auto; color: var(--primary-dark); font-size: .88rem; }
.receipt-line-card .record-grid { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); }
.receipt-line-note { margin-top: 10px; padding: 10px 11px; border-radius: 9px; background: var(--surface-soft); }
.receipt-line-note strong { display: block; margin-bottom: 3px; font-size: .72rem; }
.quantity-comparison { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quantity-comparison > div { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.quantity-comparison span { display: block; color: var(--muted); font-size: .7rem; font-weight: 750; text-transform: uppercase; }
.quantity-comparison strong { display: block; margin-top: 4px; font-size: 1.35rem; }
.audit-builder { max-height: 340px; }
.audit-options { margin-top: 15px; }
.selection-count { margin-right: auto; color: var(--muted); font-weight: 700; }
.validation-result { margin-top: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.validation-result ul { margin: 8px 0 0; padding-left: 20px; max-height: 220px; overflow: auto; }
.steps { display: flex; gap: 5px; list-style: none; padding: 0; margin: 0 0 18px; overflow-x: auto; }
.steps li { flex: 1 0 auto; padding: 7px 9px; border-bottom: 2px solid var(--border); color: var(--muted); font-size: .72rem; font-weight: 750; text-align: center; }
.steps li.active { border-color: var(--primary); color: var(--primary-dark); }

.warehouse-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr);
  gap: 18px;
  align-items: start;
}
.warehouse-map, .label-workbench { margin-bottom: 0; }
.label-workbench { position: sticky; top: 102px; }
.location-tree { display: grid; gap: 14px; }
.warehouse-group {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}
.warehouse-group-header {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.warehouse-group-header h5 { margin: 0; font-size: .96rem; }
.warehouse-group-header p { margin: 2px 0 0; color: var(--muted); font-size: .75rem; }
.warehouse-group-actions { display: flex; align-items: center; gap: 8px; }
.warehouse-location-panel { position: relative; }
.warehouse-location-panel.is-collapsed { max-height: 390px; overflow: hidden; }
.warehouse-location-panel.is-collapsed::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 58px;
  content: "";
  pointer-events: none;
  background: linear-gradient(transparent, var(--surface-soft));
}
.warehouse-location-panel.is-expanded {
  max-height: min(64vh, 680px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.warehouse-list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.warehouse-list-footer span { color: var(--muted); font-size: .75rem; text-align: right; }
.location-list { display: grid; gap: 7px; margin: 0; padding: 10px; list-style: none; }
.location-children { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.location-node { display: grid; gap: 6px; }
.location-node[data-depth="1"] { margin-left: 24px; }
.location-node[data-depth="2"] { margin-left: 48px; }
.location-card {
  width: 100%;
  min-height: 54px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.location-card:hover, .location-card[aria-current="true"] { border-color: #9fc2c5; background: var(--primary-soft); }
.location-type-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #edf2f5;
  color: #50616e;
  font-size: .67rem;
  font-weight: 900;
}
.location-card[data-type="RACK"] .location-type-icon { background: #eaf1f8; color: #356d9d; }
.location-card > span:nth-child(2) { min-width: 0; flex: 1; }
.location-card strong, .location-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location-card small { color: var(--muted); }
.location-card .badge { flex: 0 0 auto; }
.location-label-preview { display: grid; gap: 14px; }
.location-label-preview img {
  display: block;
  width: min(100%, 360px);
  margin: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.location-label-preview h5 { margin: 0; font-size: 1.15rem; text-align: center; }
.location-label-preview p { margin: 0; color: var(--muted); text-align: center; }
.stock-label-section { display: grid; gap: 10px; }
.stock-label-section .section-divider { margin-top: 6px; }
.stock-label-section > .muted { margin: 0; font-size: .78rem; }
.stock-label-list { display: grid; gap: 8px; max-height: 460px; overflow: auto; }
.stock-label-card { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); }
.stock-label-card img { width: 62px; height: 62px; padding: 3px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.stock-label-card strong, .stock-label-card span, .stock-label-card small { display: block; overflow-wrap: anywhere; }
.stock-label-card span, .stock-label-card small { color: var(--muted); font-size: .72rem; }
.stock-label-card .actions { grid-column: 1 / -1; }
.empty-state.compact { padding: 14px; font-size: .8rem; }

.data-console textarea {
  min-height: 130px;
  font: .84rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.data-query-result { margin-top: 16px; }
.raw-data-table { min-height: 180px; }
.raw-data-table table, .data-query-result table { min-width: max-content; }
.raw-data-table td, .data-query-result td { max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.print-frame {
  position: fixed;
  width: 1px;
  height: 1px;
  right: 0;
  bottom: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.raw-null { color: var(--muted); font-style: italic; }
.raw-json { font: .76rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 460px);
  gap: 20px;
  align-items: start;
}
.settings-editor { min-width: 0; }
.settings-preview { position: sticky; top: 102px; }
.theme-controls { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 10px; }
.color-field {
  padding: 10px;
  display: grid;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .74rem;
  font-weight: 750;
}
.color-field input { min-height: 42px; padding: 3px; }
.media-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.media-control {
  padding: 12px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-soft);
}
.media-control p { margin: 2px 0 8px; font-size: .75rem; }
.media-preview {
  min-height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: #fff;
}
.media-preview.landscape { background: linear-gradient(145deg, #182b36, #24404b); }
.media-preview img { width: 100%; height: 100%; object-fit: contain; }
.media-preview.landscape img { object-fit: cover; }
.settings-savebar {
  position: sticky;
  z-index: 10;
  bottom: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.mini-login {
  min-height: 390px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 30px #14202b12;
}
.mini-login-hero, .mini-login-form { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.mini-login-hero { background: var(--sidebar); color: var(--preview-on-sidebar, var(--on-sidebar)); }
.mini-login-hero h5 { margin: 0 0 10px; font-size: 1.08rem; }
.mini-login-hero p { margin: 0; color: inherit; font-size: .76rem; }
.mini-brand { display: flex; align-items: center; gap: 10px; }
.mini-brand small, .mini-brand strong { display: block; }
.mini-login-form { justify-content: center; gap: 10px; background: #fff; color: #17212b; }
.mini-login-form h5 { margin: 0 0 8px; font-size: 1.15rem; color: inherit; }
.mini-login-form > small { color: #5f6e79; }
.fake-input { display: block; height: 34px; border: 1px solid var(--border-strong); border-radius: 7px; }
.fake-button { display: block; margin-top: 8px; padding: 8px; border-radius: 7px; background: var(--primary); color: var(--preview-on-primary, var(--on-primary)); font-weight: 800; text-align: center; }

dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(90vh, 920px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 80px #0d182557;
}
dialog::backdrop { background: #0d1825a8; backdrop-filter: blur(2px); }
dialog[open] { display: block; }
dialog.wide-dialog { width: min(1180px, calc(100vw - 28px)); }
dialog.drawer {
  width: min(760px, 94vw);
  height: 100vh;
  max-height: 100vh;
  margin: 0 0 0 auto;
  border-radius: 16px 0 0 16px;
}
dialog.order-drawer { width: min(880px, 96vw); }
dialog.receipt-drawer { width: min(940px, 96vw); }
dialog.order-summary-dialog { width: min(960px, calc(100vw - 28px)); height: min(90vh, 920px); }
.dialog-shell { display: flex; flex-direction: column; max-height: inherit; height: 100%; min-height: 0; }
.dialog-header, .dialog-footer { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px; }
.dialog-header { border-bottom: 1px solid var(--border); }
.dialog-header h3 { margin: 0; font-size: 1.25rem; }
.dialog-body { flex: 1 1 auto; min-height: 0; padding: 18px; overflow: auto; }
.dialog-body { overscroll-behavior: contain; }
.dialog-footer { border-top: 1px solid var(--border); justify-content: flex-end; flex-wrap: wrap; background: var(--surface-soft); }
.dialog-action-error { flex: 0 0 100%; margin-bottom: 12px; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input[type="file"] { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.permission-dialog-layout { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; margin-top: 10px; }
.permission-dialog-fields .form-stack { position: sticky; top: 0; }
.permission-groups { margin-top: 12px; max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: 9px; padding: 4px 14px; }
.permission-group { padding: 10px 0; border-bottom: 1px solid var(--border); columns: 2; column-gap: 20px; }
.permission-group:last-child { border-bottom: 0; }
.permission-group h4 { margin: 0 0 7px; color: var(--muted); font-size: .73rem; text-transform: uppercase; letter-spacing: .05em; column-span: all; }
.permission-group label { display: flex; align-items: center; gap: 8px; padding: 4px 1px; cursor: pointer; break-inside: avoid; }
.permission-group input { width: auto; min-height: auto; }
.permission-group label[hidden] { display: none; }
@media (max-width: 900px) {
  .permission-dialog-layout { grid-template-columns: 1fr; }
  .permission-dialog-fields .form-stack { position: static; }
  .permission-group { columns: 1; }
}

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: clamp(20px, 5vw, 72px); }
.auth { width: min(1180px, 100%); min-height: min(720px, calc(100vh - 80px)); display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; border-radius: 24px; background: var(--surface); box-shadow: 0 18px 55px #14202b20; }
.auth-info {
  padding: clamp(38px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--sidebar);
  background-image: linear-gradient(145deg, var(--sidebar-hover), var(--sidebar));
  background-position: center;
  background-size: cover;
  color: var(--on-sidebar);
}
.auth-info p, .auth-info .eyebrow { color: inherit; }
.auth-info.has-background, .auth-info.has-background p,
.auth-info.has-background .eyebrow { color: #fff; }
.auth-info .brand h1 { font-size: 1.25rem; }
.auth-info .mark.has-logo { width: 72px; height: 72px; border-radius: 16px; }
.auth-info .brand.uploaded-logo-only {
  width: 100%;
  min-height: 112px;
}
.auth-info .brand.uploaded-logo-only .mark.has-logo {
  width: min(100%, 440px);
  height: 112px;
  border-radius: 0;
}
.auth-info .brand.uploaded-logo-only .mark.has-logo > img {
  object-position: left center;
}
.auth-copy { max-width: 620px; }
.auth-copy h2 { margin-bottom: 22px; font-size: clamp(2rem, 3.8vw, 3.15rem); line-height: 1.25; letter-spacing: -.04em; }
.auth-copy p { margin: 0; font-size: clamp(1rem, 1.7vw, 1.22rem); }
.auth-form { padding: clamp(38px, 7vw, 76px); display: flex; flex-direction: column; justify-content: center; }
.auth-form > h2 { margin: 7px 0 36px; font-size: clamp(2rem, 4vw, 2.65rem); letter-spacing: -.04em; }
.auth-form .field > span { font-size: .95rem; }
.auth-form input { min-height: 54px; font-size: 1.05rem; }
.auth-submit { width: 100%; min-height: 52px; margin-top: 15px; font-size: 1.05rem; }
.auth-switch { margin: 4px 0 0; font-size: 1rem; }
.stack { display: grid; gap: 14px; }
.message { min-height: 20px; font-weight: 700; }
.message.error { color: var(--danger); }
.message.success { color: var(--accent-text); }
.muted { color: var(--muted); }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
  .app { --sidebar-width: clamp(240px, 27vw, 290px); }
  .work { padding-left: 22px; padding-right: 22px; }
  .top { margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; }
  .detail-columns { grid-template-columns: 1fr; }
  .warehouse-layout, .settings-layout { grid-template-columns: 1fr; }
  .label-workbench, .settings-preview { position: static; }
  .settings-preview { order: -1; }
}
@media (max-width: 800px) {
  .app { display: block; }
  /* .side becomes a wrapping flex ROW on mobile: the logo takes its own
     line, then a single line carries the session-control icons and the Menu
     button. .side-top / .side-footer / .side-actions / .side-context-actions
     / .idle-controls are display:contents so their buttons become direct
     flex items of that row -- the controls stay inside .side-footer in the
     DOM (where desktop wants them, pinned at the bottom of the rail), and
     display:contents relocates them visually without moving any DOM, so both
     layouts share one structure and every existing selector still matches.
     height must stay auto (not the base rule's 100vh) or the closed header
     alone reserves a full screen of blank space above the page content. */
  .side {
    position: sticky;
    z-index: 40;
    top: 0;
    width: 100%;
    height: auto;
    max-height: 100vh;
    padding: 12px 15px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 8px;
    box-shadow: 0 5px 18px #0d18252b;
  }
  /* .side-top and .idle-controls dissolve so the logo, Hide and Menu share
     one line. .side-actions / .side-context-actions stay real grid boxes so
     their buttons keep their text labels on full-width lines below. */
  .side-top,
  .side-footer,
  .idle-controls { display: contents; }
  /* Sized to its content rather than a full-width band -- the logo image is
     only ~150px wide, so the rest of that line was dead space that Hide and
     Menu can use instead. Same specificity as the logo-only brand rules
     above, which force width:100%. */
  .side .brand,
  .side .brand.system-logo-only:not(.company-logo-only),
  .side .brand[data-company-brand].company-logo-only {
    order: 1;
    flex: 0 1 auto;
    width: auto;
    max-width: 46%;
    min-height: 0;
    margin-bottom: 0;
  }
  .side .brand.system-logo-only:not(.company-logo-only) .mark,
  .side .brand[data-company-brand].company-logo-only [data-company-logo] {
    width: 150px;
    max-width: 100%;
    height: 52px;
  }
  .sidebar-collapse-toggle { order: 2; margin-left: auto; display: none; }
  .btn.nav-toggle { display: inline-flex; order: 3; min-height: 42px; border-color: currentColor; background: transparent; color: var(--on-sidebar); }
  .btn.nav-toggle:hover { border-color: currentColor; background: #ffffff1c; }
  /* Labels stay on while expanded: a bare row of icons gave no clue which
     one was "Unlock layout" or "Sign out". Icon-only is the collapsed
     (Hide) state's job, below. Hidden by default: the session controls and
     the Hide toggle live inside the Menu collapse (shown when open, below),
     so a closed mobile header is just the logo and the Menu button. */
  .side-actions,
  .side-context-actions { order: 4; flex: 1 1 100%; display: none; }
  .side-footer .account { display: none; }
  .side-scroll { order: 5; flex: 1 1 100%; display: none; max-height: min(62vh, 480px); padding-top: 10px; border-top: 1px solid #ffffff1c; }
  .side-scroll:has(.nav[data-open="true"]) { display: flex; }
  /* Menu open: reveal the session controls and the Hide toggle alongside the
     page-nav links and idle timer. */
  .side-scroll:has(.nav[data-open="true"]) ~ .side-footer .side-actions,
  .side-scroll:has(.nav[data-open="true"]) ~ .side-footer .side-context-actions { display: grid; }
  .side-scroll:has(.nav[data-open="true"]) ~ .idle-controls .sidebar-collapse-toggle { display: inline-flex; }
  .nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .nav button { justify-content: flex-start; padding: 9px; text-align: left; font-size: .78rem; }
  .nav button::before { display: none; }
  /* Status text, not a control -- so it gets its own line under the nav
     rather than a slot in the header row, and only while the menu is open. */
  .idle-timer { order: 6; flex: 1 1 100%; display: none; margin: 0; }
  .side-scroll:has(.nav[data-open="true"]) ~ .idle-controls .idle-timer { display: block; }

  /* Collapsed ("Hide") on mobile: every label drops away and the whole
     header condenses to one icon line -- the action groups dissolve so
     their buttons join the logo/Hide/Menu row, and the nav icons flow in
     rows across the panel (a horizontal bar has no narrow rail to shrink
     into). This is the only state that goes icon-only; expanded keeps text. */
  .app[data-sidebar-collapsed="true"] .nav-label,
  .app[data-sidebar-collapsed="true"] .side-action-label,
  .app[data-sidebar-collapsed="true"] .sidebar-collapse-label { display: none; }
  .app[data-sidebar-collapsed="true"] .nav {
    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
  }
  .app[data-sidebar-collapsed="true"] .nav button { justify-content: center; padding: 11px 8px; }
  /* Collapsed = a persistent icon toolbar. The compact session-control icons
     and the Show/Hide chevron stay pinned on top regardless of the menu state;
     tapping Menu only drops the nav links in below them. (The roomy labelled
     mode still tucks its controls away when closed -- see the show-on-open
     rules above.) */
  .app[data-sidebar-collapsed="true"] .side-actions,
  .app[data-sidebar-collapsed="true"] .side-context-actions { display: contents; }
  .app[data-sidebar-collapsed="true"] .sidebar-collapse-toggle { display: inline-flex; }
  .app[data-sidebar-collapsed="true"] .side-footer .btn,
  .app[data-sidebar-collapsed="true"] .sidebar-collapse-toggle,
  .app[data-sidebar-collapsed="true"] .btn.nav-toggle {
    order: 2;
    width: 44px;
    min-width: 44px;
    min-height: 40px;
    padding-inline: 0;
    justify-content: center;
  }
  .app[data-sidebar-collapsed="true"] .side-actions #themeToggle { padding-inline: 0; }
  /* Menu loses its text here too, or logo + 5 icons + "Menu" overflows a
     ~390px line and wraps the button onto a row of its own. sidebar.js gives
     it an aria-label, so hiding the text costs it no accessible name. */
  .app[data-sidebar-collapsed="true"] .btn.nav-toggle { order: 3; }
  .app[data-sidebar-collapsed="true"] .btn.nav-toggle > span:last-child { display: none; }
  /* Shrunk logo joins that same line instead of holding one to itself. */
  .app[data-sidebar-collapsed="true"] .side .brand,
  .app[data-sidebar-collapsed="true"] .side .brand.system-logo-only:not(.company-logo-only),
  .app[data-sidebar-collapsed="true"] .side .brand[data-company-brand].company-logo-only { flex: 0 0 auto; margin-inline: 0; }
  .work { padding: 18px 16px 42px; }
  .top { position: relative; margin: -18px -16px 20px; padding: 14px 16px; }
  .breadcrumb { display: none; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .head { align-items: flex-start; flex-direction: column; }
  .grid, .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .theme-controls, .media-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-toolbar { align-items: stretch; }
  .filter-toolbar .field, .filter-toolbar .search-field { flex-basis: calc(50% - 8px); min-width: 0; }
  .auth { grid-template-columns: 1fr; }
  .auth { min-height: auto; }
  .auth-info, .auth-form { padding: 30px; }
  .auth-info { min-height: 330px; background-position: top center; }
  dialog.drawer { width: 100vw; border-radius: 0; }
  .page-feedback { align-items: flex-start; }
}
@media (max-width: 560px) {
  .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top { align-items: flex-start; }
  .top .actions { justify-content: flex-end; }
  .icon-text { font-size: 0; }
  .icon-text span { font-size: 1rem; }
  .filter-toolbar .field, .filter-toolbar .search-field { flex-basis: 100%; }
  .theme-controls, .media-controls { grid-template-columns: 1fr; }
  .media-control { grid-template-columns: 82px minmax(0, 1fr); }
  .mini-login { grid-template-columns: 1fr; }
  .mini-login-hero { min-height: 210px; }
  .settings-savebar { align-items: stretch; flex-direction: column; }
  .settings-savebar .btn { width: 100%; }
  .quantity-comparison { grid-template-columns: 1fr; }
  .receipt-line-head { flex-direction: column; }
  .receipt-line-head > strong { flex-basis: auto; }
  .dialog-header, .dialog-footer { padding: 13px 14px; }
  .dialog-body { padding: 14px; }
  .dialog-footer { align-items: stretch; }
  .dialog-footer .selection-count { flex: 0 0 100%; margin: 0 0 2px; }
  .dialog-footer > .btn { min-height: 44px; }
  .btn.small { min-height: 38px; }
  .page-feedback { flex-direction: column; }
  .page-feedback .btn { width: 100%; }
  .inline-dimension-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .selectable-table tbody tr.selected td:first-child { border-left: 4px solid Highlight; }
  .badge { border: 1px solid currentColor; }
}
@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  .side, .toast-region, .page-state, .page-feedback, dialog { display: none !important; }
  .app { display: block !important; min-height: 0; }
  .work { min-height: 0; padding: 0; }
  .work > * { display: none !important; }
  #orderDetailDialog[open] {
    position: static;
    display: block !important;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }
  #orderDetailDialog .dialog-shell, #orderDetailDialog .dialog-body { height: auto; max-height: none; overflow: visible; }
  #orderDetailDialog .dialog-header { padding: 0 0 10px; border-bottom: 2px solid #17212b; }
  #orderDetailDialog .dialog-body { padding: 14px 0 0; }
  #orderDetailDialog .dialog-header button, #orderDetailDialog .dialog-footer, #orderDetailActions { display: none !important; }
  #orderDetailDialog .record-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; }
  #orderDetailDialog .record-grid > div { padding: 3px 0 7px; border: 0; border-radius: 0; background: transparent; }
  #orderDetailDialog .detail-section { margin-bottom: 14px; break-inside: avoid; }
  #orderDetailDialog .order-items-section { break-inside: auto; }
  #orderDetailDialog .table { overflow: visible; border-color: #bfc6cc; }
  #orderDetailDialog table { font-size: 9pt; }
  #orderDetailDialog th, #orderDetailDialog td { padding: 6px 7px; }
  #orderDetailDialog .order-address-lines { padding: 0; }
  #orderDetailDialog .order-address-lines p { color: #17212b; }
}

/* Two-factor overlay (shared by both portals). Fixed and above everything so a
   required enrolment cannot be scrolled past or clicked around. */
.totp-overlay { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center;
  background: #0d1825d9; padding: 20px; }
.totp-panel { width: min(460px, 100%); max-height: 90vh; overflow: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px;
  box-shadow: 0 18px 50px #0d182559; }
.totp-panel h2 { margin: 4px 0 8px; font-size: 1.15rem; }
.totp-secret { display: block; padding: 10px 12px; margin-top: 4px; border-radius: 8px;
  background: var(--surface-strong, #eef1f4); border: 1px solid var(--line);
  font-size: .95rem; letter-spacing: .06em; word-break: break-all; }
.totp-codes { list-style: none; margin: 10px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.totp-codes code { display: block; padding: 7px 9px; border-radius: 6px;
  background: var(--surface-strong, #eef1f4); border: 1px solid var(--line);
  font-size: .88rem; text-align: center; user-select: all; }


/* Account actions menu -- one dialog replacing a row of up to nine buttons. */
.account-menu-list { display: grid; gap: 8px; }
.account-menu-list .account-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  line-height: 1.35;
}
.account-menu-list .account-menu-item strong { display: block; }
.account-menu-list .account-menu-item small { display: block; opacity: 0.75; font-weight: 400; }

/* Account settings: the photo sits above the identity fields. */
.account-settings-photo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.person-avatar.large { width: 64px; height: 64px; font-size: 1.35rem; }
/* The sidebar profile is a button now; keep it looking like the block it was. */
button.account { background: none; border: 0; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
button.account:hover, button.account:focus-visible { opacity: 0.85; }

/* Table cells that are also the way to edit what they show. Styled as text
   rather than as a button so the table stays readable at a glance. */
.link-cell {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer; text-decoration: underline;
  text-decoration-style: dotted; text-underline-offset: 3px;
}
.link-cell:hover, .link-cell:focus-visible { text-decoration-style: solid; }
.link-cell.person-cell { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.link-cell.person-cell strong { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.link-cell.person-cell:hover strong { text-decoration-style: solid; }