/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1f2933;
  --muted: #6b7280;
  --line: #e5e7eb;
  --soft: #f1f5f9;
  --accent: #2563eb;
  --accent-weak: #e0e7ff;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  /* Width of the slate-900 frame strip down the right edge (and the
     visible band behind the header). Bumped from 12px → 16px after the
     chrome went dark: a 12px sliver of slate-900 reads as "missing"
     against the dark header on content-heavy pages (Workflow Runs,
     Settings) where the inner panel runs flush to .main's right edge.
     16px gives the frame enough presence to register as an intentional
     bezel on every page, not just the ones (Dashboard / Builder home)
     where surrounding margins already let the slate breathe. */
  --shell-gutter: 16px;
}

* {
  box-sizing: border-box;
}

/* Match .hidden: native [hidden] must beat high-specificity display utilities (.btn, .utility-bar …) */
[hidden] {
  display: none !important;
}

body.pp-body {
  margin: 0;
  font-family: "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif;
  /* Slate-900 frame — shows through as the right/bottom gutter strips
     and pairs with the matching .app-rail and .header-bar surfaces so
     the entire page chrome reads as one continuous dark shell. The
     navy `--primary` brand color is kept for buttons / accents. */
  background: #0f172a;
  color: var(--ink);
  padding: 0 var(--shell-gutter);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  padding-left: 192px;
  padding-top: 48px;
  background: transparent;
  transition: margin-right 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-bar {
  position: fixed;
  top: 0;
  left: var(--shell-gutter);
  right: var(--shell-gutter);
  height: 48px;
  background: #0f172a;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: right 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 16px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f8fafc;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.header-logo-mark {
  height: 24px;
  width: auto;
  object-fit: contain;
}

.header-logo-mark--dark {
  display: none;
}

.header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(248, 250, 252, 0.1);
  border: 1px solid rgba(248, 250, 252, 0.2);
  border-radius: 10px;
  padding: 6px 10px;
  min-width: 420px;
  color: #f1f5f9;
  font-size: 12.5px;
  position: relative;
  z-index: 46;
}

.header-search > * {
  position: relative;
  z-index: 47;
}

.header-search.is-open {
  background: #ffffff;
  border-color: #111827;
  color: #111827;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  border-radius: 12px;
}

.header-search input {
  border: none;
  background: transparent;
  color: inherit;
  outline: none;
  width: 100%;
}

.header-search input::placeholder {
  color: #e2e8f0;
}

.header-search.is-open input::placeholder {
  color: #9ca3af;
}

.header-search-icon {
  width: 16px;
  height: 16px;
  color: #e2e8f0;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: default;
  flex-shrink: 0;
}

.header-search.is-open .header-search-icon {
  color: #6b7280;
}

.header-search-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-search-shortcut {
  margin-left: auto;
  font-size: 11px;
  background: rgba(15, 23, 42, 0.6);
  border: none;
  color: #e2e8f0;
  padding: 2px 5px;
  border-radius: 6px;
}

.header-search.is-open .header-search-shortcut {
  background: #f3f4f6;
  color: #6b7280;
}

.header-search-shortcut + .header-search-shortcut {
  margin-left: 0;
}

.header-search-dropdown {
  position: absolute;
  top: -6px;
  left: -12px;
  right: -12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 48px 0 0;
  z-index: 44;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.header-search.is-open .header-search-dropdown {
  border-radius: 12px;
}

.header-search-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 12px 8px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 8px;
}

.header-search-pill {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #1f2937;
  border-radius: 10px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.header-search-pill.is-active,
.header-search-pill:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #1d4ed8;
}

.header-search-dropdown-list {
  max-height: 320px;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding: 0 12px 6px;
}

.header-search-group {
  display: grid;
  gap: 4px;
}

.header-search-group-label {
  color: #6b7280;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 6px;
}

.header-search-item {
  background: transparent;
  border: 1px solid transparent;
  color: #111827;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
}

.header-search-item:hover,
.header-search-item.is-active {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.header-search-item-title {
  display: block;
  font-weight: 600;
}

.header-search-item-media {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
  display: grid;
  place-items: center;
  color: #6b7280;
  font-weight: 600;
  font-size: 12px;
}

.header-search-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-search-item-placeholder {
  font-size: 12px;
}

.header-search-item-meta {
  display: grid;
  gap: 2px;
}

.header-search-item-meta.is-tight {
  gap: 0;
}

.header-search-item-subtitle {
  color: #6b7280;
  font-size: 11.5px;
}

.header-search-ai {
  margin-top: 8px;
  width: 100%;
  background: #f1f5f9;
  border: none;
  border-top: 1px solid #e5e7eb;
  color: #111827;
  border-radius: 0 0 14px 14px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.header-search-dropdown.has-results .header-search-ai {
  margin-top: 6px;
}

.header-search-ai.is-active,
.header-search-ai:hover {
  background: #e2e8f0;
}

.header-search-ai.is-loading {
  opacity: 0.7;
  cursor: progress;
}

.header-search-ai-spinner {
  margin-left: auto;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.35);
  border-top-color: #2563eb;
  animation: header-search-spin 0.8s linear infinite;
  opacity: 0;
}

.header-search-ai.is-loading .header-search-ai-spinner {
  opacity: 1;
}

@keyframes header-search-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.header-search-ai-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #1d4ed8;
}

.header-search-back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 0;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
}

.header-search-back svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.header-search-back:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* ── Mobile floor-mode toggle ────────────────────────────── */
.mobile-floor-toggle {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-corner {
  position: fixed;
  top: 48px;
  left: var(--shell-gutter);
  width: 16px;
  height: 16px;
  background: #0f172a;
  border-bottom-right-radius: 16px;
  z-index: 29;
}

/* When the sidebar is collapsed the corner has nothing to blend
   into — it would float against the white .main background as a
   stray dark quarter-circle. Hide it so the gutter looks clean. */
.app-shell.is-collapsed .sidebar-corner {
  display: none;
}

.sidebar {
  position: fixed;
  left: var(--shell-gutter);
  top: 48px;
  width: 192px;
  height: calc(100vh - 48px);
  background: #f8f9fb;
  color: #1e293b;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(0);
  transition: transform 0.2s ease;
  z-index: 30;
  border-top-left-radius: 16px;
  border-top-right-radius: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.1) transparent;
  will-change: transform;
}

.sidebar-footer {
  margin-top: auto;
}

.user-menu {
  position: relative;
}

.user-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #1f2933;
  font-weight: 600;
  cursor: pointer;
}

.user-menu > summary {
  list-style: none;
}

.user-menu > summary::-webkit-details-marker {
  display: none;
}

.user-menu-panel {
  position: absolute;
  top: 44px;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  min-width: 140px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 40;
}

.user-menu[open] .user-menu-panel {
  display: grid;
}

.user-menu-item {
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: #0f172a;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  width: 100%;
}

.user-menu-item:hover {
  background: #f1f5f9;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-text {
  flex: 1;
}

.icon-button {
  border: none;
  background: #e2e8f0;
  color: #334155;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.icon-button svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button:hover {
  background: #cbd5f5;
}

.icon-button-light {
  background: #ffffff;
  border: 1px solid var(--line);
  color: #334155;
}

.icon-button-light:hover {
  background: #f8fafc;
}

.icon-button-pinned {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #b45309;
}

.icon-button-pinned:hover {
  background: #fde68a;
}

.info-button svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.info-button svg .info-dot {
  fill: currentColor;
  stroke: none;
}

.item-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.item-details {
  min-width: 0;
}

.favorite-toggle-form {
  display: inline-block;
}

.favorite-toggle {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.favorite-toggle:hover {
  background: #f8fafc;
}

.favorite-toggle.is-active {
  background: #fef3c7;
  border-color: #fcd34d;
}

.favorite-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.favorite-toggle-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: #64748b;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.favorite-toggle.is-active .favorite-toggle-icon svg {
  fill: #f59e0b;
  stroke: #f59e0b;
}

.icon {
  transition: transform 0.2s ease;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #e2e8f0;
  display: grid;
  place-items: center;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #1f2933;
}

.brand-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.brand-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-group + .nav-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.nav-group-label {
  padding: 4px 8px 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
  user-select: none;
}

.nav-group:not(:has(.nav-section)) {
  display: none;
}

.nav-section {
  display: grid;
  gap: 1px;
  position: relative;
}

.nav-parent {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  transition: background-color 0.12s ease, color 0.12s ease;
}

/* When a section header has no link target (an expand-only header,
   used by some dynamic-sidebar system sections), we render a
   <button> instead of an <a>. Reset the browser's default button
   chrome so it looks identical to the anchor variant. */
button.nav-parent {
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  line-height: inherit;
}

.nav-parent:hover {
  background: rgba(15, 23, 42, 0.04);
  color: #111827;
}

.nav-parent:active {
  background: rgba(15, 23, 42, 0.06);
}

.nav-section-single .nav-parent.is-active {
  background: rgba(15, 23, 42, 0.06);
  color: #111827;
  font-weight: 600;
}

.nav-section-single .nav-parent.is-active .nav-icon {
  color: #111827;
}

.nav-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #6b7280;
  transition: color 0.12s ease;
  flex-shrink: 0;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-submenu {
  display: grid;
  gap: 1px;
  padding-left: 0;
  padding-top: 0;
  position: relative;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height 0.22s ease,
    opacity 0.15s ease,
    visibility 0s linear 0.22s;
}

.nav-section.is-active .nav-submenu {
  max-height: 600px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    max-height 0.22s ease,
    opacity 0.15s ease 0.05s,
    visibility 0s linear 0s;
}

.nav-item {
  display: block;
  width: 100%;
  padding: 5px 8px 5px 34px;
  border-radius: 6px;
  color: #4b5563;
  font-size: 13px;
  font-weight: 400;
  position: relative;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.nav-section-single {
  gap: 0;
}

.nav-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  background: #e5e7eb;
  color: #374151;
}

.nav-badge-purple {
  background: #ede9fe;
  color: #6d28d9;
}

.nav-badge--soon {
  background: #f1f5f9;
  color: #6b7280;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 5px;
  height: 16px;
  min-width: 0;
}

.nav-item--soon {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9ca3af;
  cursor: not-allowed;
  user-select: none;
}

.nav-item--soon:hover {
  background: transparent;
  color: #9ca3af;
}

.nav-item:hover {
  background: rgba(15, 23, 42, 0.04);
  color: #111827;
}

.nav-item:active {
  background: rgba(15, 23, 42, 0.06);
}

.nav-item.is-active {
  background: rgba(15, 23, 42, 0.06);
  color: #111827;
  font-weight: 500;
}

.nav-nested {
  margin: 0;
  padding: 0;
}

.nav-nested-toggle {
  display: block;
  padding: 5px 8px 5px 34px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 400;
  color: #4b5563;
  cursor: pointer;
  list-style: none;
  position: relative;
  user-select: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.nav-nested-toggle::-webkit-details-marker {
  display: none;
}

.nav-nested-toggle::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid #9ca3af;
  border-bottom: 1.5px solid #9ca3af;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform 0.15s ease;
}

.nav-nested[open] > .nav-nested-toggle::after {
  transform: translateY(-65%) rotate(45deg);
}

.nav-nested-toggle:hover {
  background: rgba(15, 23, 42, 0.04);
  color: #111827;
}

.nav-nested-items {
  display: grid;
  gap: 2px;
  padding-top: 2px;
}

.nav-nested-items .nav-item {
  padding-left: 50px;
}

.nav-mini {
  margin-top: 12px;
  padding: 10px 4px 0;
  display: grid;
  gap: 2px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.nav-mini + .nav-mini {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 0;
}

.nav-mini-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
}

.nav-mini-title:hover {
  color: #6b7280;
}

.nav-mini-list {
  display: grid;
  gap: 1px;
}

.nav-mini-item {
  display: block;
  width: 100%;
  padding: 4px 8px 4px 16px;
  border-radius: 6px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 400;
  transition: background-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-mini-item:hover {
  background: rgba(15, 23, 42, 0.04);
  color: #111827;
}

.nav-mini-empty {
  padding: 4px 8px 6px 16px;
  font-size: 11px;
  color: #9ca3af;
}


.sidebar-hover-zone {
  display: none;
}

/* ── Sidebar collapse / peek ─────────────────────────────────────────
   The sidebar can be toggled to a collapsed state via the chevron
   button on its right edge (`.sidebar-collapse-toggle`). When
   collapsed:
     - `.sidebar` slides off-screen to the left.
     - `.app-shell` drops its left padding so `.main` reclaims
       the full content width.
     - `.sidebar-hover-zone` becomes a 24px-wide invisible strip
       flush against the app-rail. Hovering it (or hovering the
       sidebar itself once it has peeked out) slides the sidebar
       back in as an overlay, without re-claiming the layout space.
     - The collapse-toggle button rotates its chevron and slides to
       sit just inside the right edge of the now-overlay sidebar so
       the user can re-pin it open from peek mode.
   Persistence lives in localStorage (`pp_sidebar_collapsed`) and is
   restored by `sidebar_controller#connect`. */
.app-shell.is-collapsed .sidebar {
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;
}

.app-shell.is-collapsed {
  padding-left: 0;
}

/* The hover zone has to sit OUTSIDE the .app-rail (which is fixed
   at left:0, width:56, z-index:50). If we put the zone behind the
   rail, the rail intercepts every mousemove and the peek never
   triggers. Anchoring at left:56 (right edge of rail) and giving
   it a generous 28px width makes the peek easy to discover by
   sliding the cursor past the rail. */
.app-shell.is-collapsed .sidebar-hover-zone {
  display: block;
  position: fixed;
  left: 56px;
  top: 48px;
  width: 28px;
  height: calc(100vh - 48px);
  z-index: 25;
}

/* Subtle visual affordance: a thin chevron-shaped strip that fades
   in when the user mouses near the rail, hinting that the menu is
   one pixel of mouse travel away. */
.app-shell.is-collapsed .sidebar-hover-zone::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 64px;
  transform: translateY(-50%);
  border-radius: 0 4px 4px 0;
  background: rgba(15, 23, 42, 0.16);
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, width 0.15s ease;
  pointer-events: none;
}

.app-shell.is-collapsed .sidebar-hover-zone:hover::after {
  opacity: 1;
  width: 6px;
  background: rgba(15, 23, 42, 0.32);
}

.app-shell.is-collapsed.is-peeking .sidebar,
.app-shell.is-collapsed .sidebar-hover-zone:hover ~ .sidebar,
.app-shell.is-collapsed .sidebar:hover {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  box-shadow: 12px 0 32px -8px rgba(15, 23, 42, 0.12);
}

/* ── Sidebar preview slots ───────────────────────────────────────
   The sidebar's `<aside>` body contains two sibling slots:
     - `.sidebar-content--current` holds the live tree for the
       active section (workspace tree, or the hardcoded fallback
       for legacy accounts).
     - `.sidebar-content--preview` is empty by default; the rail's
       hover-to-preview UX (sidebar_controller#previewSidebar)
       fetches another section's tree as HTML and injects it here,
       then flips `.app-shell` into `.is-previewing` mode.

   We swap visibility with display:none rather than opacity/visibility
   so the inactive slot doesn't intercept clicks or taborder, and so
   the active slot reflows the scroll container cleanly when the
   tree it contains is taller/shorter than the previous one. */
.sidebar-content--preview { display: none; }
.app-shell.is-previewing .sidebar-content--current { display: none; }
.app-shell.is-previewing .sidebar-content--preview { display: block; }

.sidebar-preview-banner {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: -4px 0 10px;
  padding: 7px 8px;
  border: 1px solid color-mix(in oklab, var(--pp-sidebar-active, #d1d5db) 52%, transparent);
  border-radius: 10px;
  background: color-mix(in oklab, var(--pp-sidebar-active, #d1d5db) 24%, transparent);
  color: var(--pp-sidebar-active-text, #111827);
}

.sidebar-preview-banner__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pp-sidebar-muted, #64748b);
}

.sidebar-preview-banner__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}

/* When previewing a non-workspace section (Inbox / Builder /
   Settings), the injected partial brings its own root aside
   (`.inbox-filter-sidebar` / `.builder-sidebar` / `.settings-
   sidebar`) — each of which has its own panel background, border-
   right, and rounded corners that were authored for a standalone
   chrome column. Dropped inside our gray app sidebar (`.sidebar`)
   they'd float as a panel-within-a-panel with double radii and a
   useless interior right border. The overrides below let the
   previewed aside fill the slot edge-to-edge so it reads as the
   sidebar instead of as a card sitting inside it.

   Scoped via `:has()` so the rules ONLY fire when the preview slot
   actually contains a foreign-style aside. Workspace previews
   render bare `<nav class="nav">` markup (via `_dynamic_sidebar`)
   that depends on the App sidebar's native padding/gap to lay out
   correctly — applying these resets to a workspace preview would
   strip the 18px/16px padding and squash the nav items against the
   chrome edge. The `:has()` guard keeps that case untouched. */
.app-shell.is-previewing
  .sidebar:has(
    > .sidebar-content--preview > .inbox-filter-sidebar,
    > .sidebar-content--preview > .builder-sidebar,
    > .sidebar-content--preview > .settings-sidebar
  ) {
  padding: 0;
  gap: 0;
}
.app-shell.is-previewing
  .sidebar-content--preview:has(
    > .inbox-filter-sidebar,
    > .builder-sidebar,
    > .settings-sidebar
  ) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.app-shell.is-previewing
  .sidebar-content--preview:has(
    > .inbox-filter-sidebar,
    > .builder-sidebar,
    > .settings-sidebar
  )
  > .sidebar-preview-banner {
  margin: 10px 12px 8px;
  flex: 0 0 auto;
}
.app-shell.is-previewing .sidebar-content--preview > .inbox-filter-sidebar,
.app-shell.is-previewing .sidebar-content--preview > .builder-sidebar,
.app-shell.is-previewing .sidebar-content--preview > .settings-sidebar {
  flex: 1;
  min-height: 0;
  border-right: none;
  border-bottom-left-radius: 0;
  /* Match the parent sidebar's top-left radius (16px) so the
     panel's curve aligns with the chrome corner instead of
     drawing its own slightly different one. */
  border-top-left-radius: 16px;
}

/* ── Sidebar collapse / expand toggle ───────────────────────────
   Reuses `.app-rail-icon` (defined in inbox.css) for size, color,
   hover, focus, and tooltip — so it pixel-matches every other
   glyph in the rail column. This rule only adds positioning:
   anchored at the top-left of the chrome (viewport 0, 0) inside
   the 56×48 area where the dark rail meets the dark header,
   centered horizontally in the 56px rail (left:8 since the
   button is 40px wide) and vertically in the 48px header strip
   (top:4). Sits above both the header (z:35) and the rail
   (z:50) so it stays clickable regardless of stacking.

   Specificity note: selector deliberately includes the `button`
   element to outrank `.app-rail-icon { position: relative }` from
   inbox.css, which loads after this file and would otherwise
   leave the toggle in normal flow inside `.app-shell` (rendering
   it BELOW the header bar instead of in the chrome corner). */
button.app-sidebar-toggle {
  position: fixed;
  top: 4px;
  left: 8px;
  z-index: 60;
}

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: 0;
  padding-top: 0;
  background: #f6f7f9;
  border-top-right-radius: 16px;
  /* visible so topbar/utility dropdowns (filters, menus) are not clipped at this edge */
  overflow: visible;
  position: relative;
  z-index: 20;
  min-height: calc(100vh - 48px);
}

.app-shell.is-collapsed .main {
  margin-left: 0;
  /* When the sidebar is collapsed, .main becomes the full content
     surface and butts directly against the dark gutter / app-rail
     on the left. Mirror the existing top-right radius so both
     upper corners curve symmetrically against the slate frame. */
  border-top-left-radius: 16px;
}

/* Match radius on the topbar too — same reason the topbar inherits
   .main's top-right radius (the white background would otherwise
   paint over .main's curve and the rounded corner would read as
   missing on every page that ships a topbar). */
.app-shell.is-collapsed .topbar {
  border-top-left-radius: 16px;
}

.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 30;
  /* Inherit .main's top-right rounded corner. Without this the topbar's
     rectangular white background paints over .main's 16px curve and the
     rounded corner reads as missing on every page that ships a topbar
     (Purchase Orders, Vendors, Invoices, Settings, Workflow Runs, …).
     The sidebar butts up against the topbar's left edge so the
     top-left stays square. */
  border-top-left-radius: 0;
  border-top-right-radius: 16px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 240px;
  min-width: 0;
}

.topbar-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.topbar-title h1 {
  margin: 0;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.topbar-title .eyebrow {
  margin: 0;
}
.topbar-title .eyebrow a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
.topbar-title .eyebrow a:hover {
  color: #1f2937;
  border-bottom-color: currentColor;
}

.topbar-subtitle {
  margin: 0;
  font-size: 13px;
  font-weight: normal;
  color: var(--text-muted, #64748b);
  max-width: 520px;
}

.view-switcher {
  position: relative;
  display: inline-flex;
}

.view-switcher > summary {
  list-style: none;
}

.view-switcher > summary::-webkit-details-marker {
  display: none;
}

.view-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.view-caret {
  font-size: 18px;
  color: var(--muted);
  line-height: 1;
}

.view-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  min-width: 220px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06);
  display: none;
  z-index: 40;
}

.view-switcher[open] .view-menu {
  display: flex;
  flex-direction: column;
}

.action-menu {
  position: relative;
  display: inline-flex;
}

.action-menu > summary {
  list-style: none;
}

.action-menu > summary::-webkit-details-marker {
  display: none;
}

.action-menu-right .view-menu {
  right: 0;
  left: auto;
}

.action-menu[open] .view-menu {
  display: flex;
  flex-direction: column;
}

.action-menu-panel {
  min-width: 200px;
  padding: 4px;
}

.action-menu-panel .action-menu-item {
  width: 100%;
  background: transparent;
  border: none;
  padding: 7px 10px;
  border-radius: 8px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0f172a;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Forms wrapped inside the action menu (eg. the bulk export
   GET form so JS can pour selected ids into a hidden input) need
   their default block layout neutralised so the button inside
   still matches the other items. */
.action-menu-panel .action-menu-form {
  margin: 0;
  display: block;
  width: 100%;
}

/* Style hint for destructive bulk operations — the same red wash
   the action dropdown on the order show page uses. */
.action-menu-panel .action-menu-item--danger {
  color: var(--danger);
}
.action-menu-panel .action-menu-item--danger:hover {
  background: #fef2f2;
}

.action-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.action-menu-trigger > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.action-menu-trigger .view-caret {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-menu-panel .action-menu-item.btn {
  border: none;
}

.action-menu-panel .action-menu-item:hover {
  background: #f1f5f9;
}

.action-menu-panel .action-menu-item.is-active {
  background: #e0e7ff;
  color: #1e3a8a;
  font-weight: 600;
}

.action-menu-panel .action-menu-item:disabled,
.action-menu-panel .action-menu-item[aria-disabled="true"] {
  color: var(--muted, #94a3b8);
  cursor: not-allowed;
  opacity: 0.65;
}

.action-menu-panel .action-menu-item:disabled:hover,
.action-menu-panel .action-menu-item[aria-disabled="true"]:hover {
  background: transparent;
}

.filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-row .input,
.filter-row select {
  min-width: 0;
}


.view-menu-item {
  background: transparent;
  border: none;
  text-align: left;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink, #0f172a);
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: background 0.1s ease;
}

.view-menu-item:hover {
  background: var(--soft, #f1f5f9);
}

.view-menu-item.is-active {
  font-weight: 600;
  color: var(--accent, #3b82f6);
}

.view-menu-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent, #3b82f6);
}

.view-menu-section {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #64748b);
  padding: 6px 10px 2px;
  user-select: none;
}

.view-menu-divider {
  height: 1px;
  background: var(--line, #e2e8f0);
  margin: 4px 6px;
}

.topbar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.filters-inline-main {
  flex: 1;
}

.search-flex {
  flex: 1;
  max-width: none;
}

.utility-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px 6px 24px;
  background: #ffffff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 -24px -24px;
  overflow: visible;
}

.utility-actions .action-menu[open] .view-menu {
  z-index: 50;
}

.table-selection-row {
  background: #f8fafc;
}

.table-selection-row th {
  padding: 12px 14px;
}

/* Sibling of .table-wrap: same padding as former <th>, dropdown not clipped by overflow-x */
.table-selection-row--outside {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.selection-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.selection-bar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: normal;
}

.selection-clear {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.selection-clear-icon {
  font-size: 12px;
  line-height: 1;
}

.selection-trigger {
  text-transform: none;
  font-size: 12px;
  line-height: 1.2;
}

.selection-trigger .view-caret {
  font-size: 16px;
  line-height: 1;
}

.selection-toggle {
  position: relative;
  display: inline-flex;
}

.selection-toggle .selection-menu {
  display: none;
  position: absolute;
  top: 28px;
  left: 0;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  min-width: 220px;
  box-shadow: var(--shadow);
  z-index: 40;
}

.selection-toggle[open] .selection-menu {
  display: grid;
  gap: 6px;
}

.selection-toggle > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.selection-toggle > summary::-webkit-details-marker {
  display: none;
}

.selection-menu {
  min-width: 220px;
}
.selection-menu .view-menu-item {
  display: block;
}

.utility-bar .filters-inline {
  width: 100%;
  gap: 12px;
}

/* Same visual weight as .facet-trigger (Status, Vendor, …) in this row */
.utility-bar .filters-inline > .btn,
.utility-bar .filters-inline .filter-field-picker > summary.btn {
  padding: 5px 12px;
  font-size: 13px;
  line-height: 1.4;
  min-height: 1.875rem;
  border-radius: 8px;
  box-shadow: none;
}

.utility-bar .filters-inline > .btn:hover,
.utility-bar .filters-inline .filter-field-picker > summary.btn:hover {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.utility-bar .filters-inline > .btn-primary {
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.14);
}

.utility-bar .filters-inline > .btn-primary:hover {
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.utility-bar .filters-inline > .btn-primary:active,
.utility-bar .filters-inline > .btn:active,
.utility-bar .filters-inline .filter-field-picker > summary.btn:active {
  box-shadow: none;
}

.filter-builder-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.filter-builder-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.filter-builder-group {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}

.filter-builder-group .input,
.filter-builder-group .filter-field-pill,
.filter-builder-group .filter-tags-wrap {
  border-radius: 0;
}

.filter-builder-group .filter-field-pill {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  padding: 6px 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.filter-remove-pill {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  padding: 0 10px;
  min-height: 32px;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-radius: 0;
}

.filter-builder-group .filter-remove-pill:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.filter-builder-group .filter-field-pill:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.filter-builder-group .filter-value-input.is-range-end {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.filter-operator-input {
  padding-right: 28px;
}

/* Tags wrap — sits in the same pill group like a text input */
.filter-tags-wrap {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 160px;
  max-width: 360px;
  border: 1px solid #e2e8f0;
  margin-left: -1px;
  background: #fff;
  padding: 3px 6px;
  min-height: 32px;
  font-size: 13px;
  cursor: text;
  border-radius: 0;
}

.filter-tags-wrap:not([hidden]) {
  display: inline-flex;
}

.filter-tags-wrap .filter-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 6px;
  padding: 1px 6px 1px 8px;
  font-size: 12px;
  white-space: nowrap;
  max-width: 180px;
}

.filter-tags-wrap .filter-tag-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-tags-wrap .filter-tag-chip-remove {
  background: none;
  border: none;
  color: #0369a1;
  font-size: 14px;
  line-height: 1;
  padding: 0 1px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.filter-tags-wrap .filter-tag-chip-remove:hover {
  color: #7c3aed;
}

.filter-tags-wrap .filter-tag-text-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  min-width: 80px;
  padding: 2px 0;
  flex: 1;
}

/* last child border-radius for tags wrap too — handled via is-value-last class */

.filter-field-picker {
  position: relative;
}

.filter-field-picker summary {
  list-style: none;
}

.filter-field-picker summary::-webkit-details-marker {
  display: none;
}

.filter-field-menu {
  position: absolute;
  top: 100%;
  /* left:0: grow right into main content; right:0 drew under the fixed sidebar. */
  left: 0;
  right: auto;
  display: flex;
  flex-direction: column;
  max-width: min(900px, calc(100vw - 24px));
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 4px 0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  z-index: 30;
}
.filter-field-search-wrap {
  padding: 8px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 12px 12px 0 0;
}
.filter-field-search {
  width: 100%;
  min-width: 220px;
  font-size: 13px;
}
.filter-field-browse {
  display: flex;
}
.filter-field-browse[hidden] {
  display: none;
}
.filter-field-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 0;
}
.filter-field-results[hidden] {
  display: none;
}
.filter-field-results .filter-field-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink, #0f172a);
}
.filter-field-results .filter-field-option:hover,
.filter-field-results .filter-field-option.is-highlighted {
  background: #f1f5f9;
}
.filter-field-no-results {
  padding: 12px 16px;
  text-align: center;
}
.filter-field-no-results p {
  margin: 0;
}

.filter-field-column {
  min-width: 200px;
}

.filter-field-menu > .filter-field-column + .filter-field-column {
  border-left: 1px solid #e2e8f0;
}

.filter-field-option {
  width: 100%;
  display: block;
  text-align: left;
  background: #ffffff;
  border: none;
  padding: 8px 10px;
  font-size: 14px;
}

.filter-field-menu .view-menu-item {
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 0;
  width: 100%;
}

.filter-field-menu .view-menu-item-parent {
  display: block;
  position: relative;
  padding-right: 24px;
}

.filter-field-menu .view-menu-item-parent .view-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.filter-field-option:hover {
  background: #f1f5f9;
}

.view-menu-item-parent {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.view-menu-item-parent .view-submenu {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 260px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  display: none;
  z-index: 30;
}

.filter-field-menu .view-submenu {
  padding: 4px 0;
  display: none;
  flex-direction: row;
  /* Right: left-opening panels sit under the fixed sidebar (main stacks below it). */
  left: 100%;
  right: auto;
  margin-left: 2px;
  margin-right: 0;
  z-index: 35;
}

.filter-field-menu .view-submenu > .filter-field-column + .filter-field-column {
  border-left: 1px solid #e2e8f0;
}

.view-submenu .view-menu-item {
  width: 100%;
  display: block;
  padding: 8px 10px;
}

.view-menu-item-parent:hover .view-submenu {
  display: block;
}

.view-menu-item-parent:focus-within .view-submenu {
  display: block;
}

.filter-field-menu .view-menu-item-parent:hover > .view-submenu {
  display: flex;
}

.filter-field-menu .view-menu-item-parent:focus-within > .view-submenu {
  display: flex;
}

.utility-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.utility-actions[hidden] {
  display: none;
}

.bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bulk-actions-panel,
.bulk-actions-form {
  display: block;
}

.bulk-action-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.select-cell {
  text-align: center;
  width: 36px;
}

.data-table th[data-column-id="select"],
.data-table td[data-column-id="select"] {
  width: 36px;
  padding-left: 12px;
  padding-right: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.utility-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.filters-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--soft);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  max-width: 520px;
  color: var(--muted);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.search:focus-within {
  background: var(--panel);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

.search-compact {
  max-width: 620px;
  padding: 8px 12px;
  flex: 1;
}

.search input {
  border: none;
  background: transparent;
  width: 100%;
  outline: none;
  font-size: inherit;
  color: var(--ink);
}

.search input::placeholder {
  color: var(--muted);
}

.search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #e2e8f0;
  color: #475569;
  font-size: 12px;
}
.search-icon-svg {
  flex-shrink: 0;
  color: var(--muted, #64748b);
}

.mobile-search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
  flex-shrink: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.topbar-actions .btn-compact,
.topbar-actions .input-compact,
.topbar-actions .favorite-toggle,
.topbar-actions .action-menu-trigger {
  height: 32px;
}

.topbar-actions .btn-compact {
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
}

.topbar-actions .input-compact {
  padding: 0 10px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #334155;
  display: grid;
  place-items: center;
  font-weight: 600;
}

.content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* Bottom-padding workaround for scroll viewports.
   --------------------------------------------------------------------
   Chromium and Gecko both fail to include `padding-bottom` of a flex
   child of an `overflow:auto` flex container in the container's
   scroll-height (chromium #920069, mozilla #748518). Concretely:
   `.settings-main` and `.builder-main` are both `display:flex;
   overflow-y:auto`, so the `padding-bottom` we set on `.settings-main
   > .content` (and similar) is silently dropped when the user scrolls
   all the way down — the last card visually butts against the bottom
   edge of the rounded card.

   Fix: put the trailing whitespace in the *normal flow* via an
   `::after` pseudo-element. Pseudo-elements sit inside the flex
   container, so their height IS counted in the parent's scroll
   height. `flex-shrink:0` keeps it from collapsing under flex
   distribution.

   Only applied to the two layouts that have the bug — the App
   layout's `.main` uses `overflow:visible` (the body scrolls), so
   `.content`'s normal padding-bottom already works there. The
   workflow builder explicitly opts out via `body[data-workflow-builder]`
   which fills the content area edge-to-edge.

   Reported on /locations/:id and /integrations/:id (settings layout). */
.settings-main > .content::after,
.builder-main > .content::after {
  content: "";
  display: block;
  flex-shrink: 0;
  /* 32px feels right next to the existing 24/32px top/side padding —
     visually matches the Builder shell's 48px-bottom intent without
     pushing every page taller than necessary. */
  height: 32px;
}
body[data-workflow-builder] .builder-main > .content::after {
  display: none;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}

.page-header-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-header-media {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  background: #f1f5f9;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.page-header-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-header-placeholder {
  font-weight: 600;
  color: #334155;
}

.page-header h1 {
  margin: 6px 0 4px;
  font-size: 24px;
}

.eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.muted {
  color: var(--muted);
}

.muted-subtext {
  font-size: 12px;
  margin-top: 2px;
}

/* Forecasting variant column: truncated title + SKU on next line */
.variant-cell {
  max-width: 200px;
}
.variant-cell .variant-cell-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.variant-cell .variant-cell-sku {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.per-page-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.per-page-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  min-height: 2.25rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.btn-primary:disabled,
.btn-primary[disabled] {
  opacity: 0.45;
}

.btn:active {
  background: #f1f5f9;
  border-color: #cbd5e1;
  box-shadow: none;
  transform: scale(0.97);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Native <button> defaults (esp. WebKit) can differ from <a class="btn">; keep one rhythm. */
button.btn {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Secondary — same box model as .btn-primary; was only a class name before. */
.btn-light {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.18);
}

.btn-danger {
  background: var(--danger);
  color: #ffffff;
  border-color: var(--danger);
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.18);
}

.btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25);
}

.btn-danger:active {
  background: #b91c1c;
  border-color: #b91c1c;
  box-shadow: none;
}

.btn-success {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.18);
}
.btn-success:hover {
  background: #15803d;
  border-color: #15803d;
  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.25);
}
.btn-success:active {
  background: #166534;
  border-color: #166534;
  box-shadow: none;
}

.btn-sm {
  padding: 5px 12px;
  font-size: 13px;
  min-height: 1.875rem;
}

.action-menu-trigger-primary.btn {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.action-menu-trigger-primary.btn:hover,
.action-menu-trigger-primary.btn:focus-visible {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  filter: brightness(0.92);
}

.action-menu-trigger-primary.btn .view-caret {
  color: #ffffff;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #334155;
  display: grid;
  place-items: center;
  font-size: 14px;
}

.column-controls .btn-icon-box {
  background: transparent;
  width: 10px;
  height: 18px;
}

.column-controls-icon {
  width: 14px;
  height: 14px;
  stroke: #334155;
  stroke-width: 1.6;
  fill: none;
}

.btn-compact {
  padding: 6px 10px;
  font-size: 13px;
  min-height: 1.875rem;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-with-feed {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 24px;
  align-items: start;
}

.page-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.page-activity-feed {
  position: sticky;
  top: 24px;
}

.page-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
}

.page-activity-item {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.page-activity-item:last-child {
  border-bottom: none;
}

.page-activity-time {
  display: block;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.page-activity-text {
  margin: 0;
}

.page-activity-user {
  color: var(--muted);
  font-weight: 500;
}

.page-activity-sep {
  color: var(--muted);
}

.vendor-show {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.vendor-show-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.purchase-order-show {
  grid-template-columns: minmax(0, 1fr) 280px;
}

.vendor-sidebar-stack {
  display: grid;
  gap: 16px;
}

.purchase-order-sidebar-stack {
  display: grid;
  gap: 16px;
}

.po-line-items-total {
  padding-left: 20px;
  padding-right: 20px;
}

.card,
.panel {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  padding: 16px;
}

.page-pilot-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
}
.page-pilot-strip__label {
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 11px;
}
.page-pilot-strip__policy {
  font-weight: 600;
}
.page-pilot-strip__meta {
  font-size: 13px;
}
.page-pilot-strip__recs {
  margin-left: auto;
}

.page-rec-explained {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--soft);
  border-radius: var(--radius);
  font-size: 13px;
}
.page-rec-explained__label {
  font-weight: 600;
  color: var(--muted);
}
.page-rec-explained__sku {
  font-family: ui-monospace, monospace;
  font-weight: 500;
}
.page-rec-explained__text {
  flex: 1;
  min-width: 0;
}

.card-label {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.card-value {
  margin: 10px 0 4px;
  font-size: 24px;
  font-weight: 600;
}

.card-sub {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-header .muted {
  margin: 2px 0 0;
}

.panel-header-stacked {
  flex-direction: column;
  align-items: stretch;
}
.panel-header-stacked .muted {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  max-width: 60em;
}
.form-actions-end {
  justify-content: flex-end;
}

#package-type-form > .form-errors + section,
#package-type-form > section + section,
#package-type-form > .form-actions {
  margin-top: 24px;
}

.ptype-dimensions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ptype-weight-grid {
  margin-top: 16px;
}

.ptype-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.ptype-toggle__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.ptype-toggle__track {
  position: relative;
  inline-size: 40px;
  block-size: 22px;
  border-radius: 999px;
  background: var(--pp-border-strong);
  transition: background 0.15s var(--pp-ease);
}

.ptype-toggle__track::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: var(--pp-surface);
  box-shadow: var(--pp-shadow-sm);
  transition: transform 0.15s var(--pp-ease);
}

.ptype-toggle__input:checked + .ptype-toggle__track {
  background: var(--pp-accent);
}

.ptype-toggle__input:checked + .ptype-toggle__track::after {
  transform: translateX(18px);
}

.ptype-toggle__input:focus-visible + .ptype-toggle__track {
  box-shadow: 0 0 0 3px var(--pp-accent-soft);
}

.ptype-toggle__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text);
}

@media (max-width: 760px) {
  .ptype-dimensions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .ptype-dimensions-grid {
    grid-template-columns: 1fr;
  }
}

/* Compact visibility date card — minimal by default, explanation behind More info */
.visibility-date-card {
  padding: 12px 16px;
}
.visibility-date-card__form {
  margin: 0;
}
.visibility-date-card__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.visibility-date-card__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0f172a);
}
.visibility-date-card .radio-group-inline {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.visibility-date-card .radio-group-inline .radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
}
.visibility-date-card__more {
  margin-left: auto;
}
.visibility-date-card__more-trigger {
  font-size: 12px;
  color: var(--muted, #64748b);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.visibility-date-card__more-trigger::-webkit-details-marker {
  display: none;
}
.visibility-date-card__more-trigger::before {
  content: "▶ ";
  font-size: 10px;
  opacity: 0.7;
}
.visibility-date-card__more[open] .visibility-date-card__more-trigger::before {
  content: "▼ ";
}
.visibility-date-card__more-trigger:hover {
  color: var(--ink, #0f172a);
}
.visibility-date-card__more-content {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e5e7eb);
  font-size: 13px;
  line-height: 1.5;
  max-width: 52em;
}
.visibility-date-card__more-content p {
  margin: 0;
}

/* Settings overview: grouped list layout */

.settings-overview-panel {
  padding: 0;
  overflow: hidden;
}

.settings-overview-search {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.settings-overview-search__field {
  position: relative;
  display: flex;
  align-items: center;
}

.settings-overview-search__icon {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  color: var(--muted, #9ca3af);
  pointer-events: none;
  flex-shrink: 0;
}

.settings-overview-search__input {
  width: 100%;
  height: 34px;
  padding: 0 32px 0 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg, #f8fafc);
  font-size: 13px;
  color: var(--ink, #0f172a);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* suppress browser native search field chrome */
  -webkit-appearance: none;
  appearance: none;
}

.settings-overview-search__input::placeholder {
  color: var(--muted, #9ca3af);
}

.settings-overview-search__input:focus {
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  background: #fff;
}

/* suppress native clear button in webkit */
.settings-overview-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.settings-overview-search__clear {
  position: absolute;
  right: 8px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted, #9ca3af);
  border-radius: 4px;
}

.settings-overview-search__clear:hover {
  color: var(--ink, #374151);
}

.settings-overview-search__clear svg {
  width: 14px;
  height: 14px;
}

.settings-overview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 28px;
  color: var(--muted, #9ca3af);
  text-align: center;
}

.settings-overview-empty svg {
  width: 32px;
  height: 32px;
  opacity: 0.5;
}

.settings-overview-empty p {
  margin: 0;
  font-size: 13px;
}

.settings-overview-section {
  padding: 28px 28px 0;
}

.settings-overview-section--first {
  padding-top: 24px;
}

.settings-overview-section:last-child {
  padding-bottom: 24px;
}

.settings-overview-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 6px;
}

.settings-list {
  border-top: 1px solid var(--line);
  margin: 0 -28px;
  padding: 0 28px;
}

.settings-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease;
  margin: 0 -28px;
  padding-left: 28px;
  padding-right: 28px;
}

.settings-list-item:hover {
  background: var(--bg-hover, #f8fafc);
}

.settings-list-item:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: -2px;
}

.settings-list-item__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--soft, #f1f5f9);
  display: grid;
  place-items: center;
  color: #374151;
}

.settings-list-item__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-list-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.settings-list-item__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-list-item__desc {
  font-size: 12px;
  color: var(--muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-list-item__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--muted, #9ca3af);
}

/* Settings page wrapper. The dedicated settings layout now renders
   the navigation as a chrome-level sidebar (`.settings-sidebar`,
   defined below near the Builder block), so this wrapper is
   effectively a single-column container — kept for backwards
   compatibility with existing settings views that still emit
   `<div class="settings-layout">…<div class="settings-content">…</div></div>`.
   The old `.settings-nav` partial has been replaced with a no-op so
   the inner nav column is empty. */
.settings-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  max-width: 100%;
}

/* Full-bleed modifier for table-heavy / data-dense pages.
   The default 1400px ceiling is right for forms and narrow detail
   pages (anything wider becomes hard to scan), but list/index pages
   with a wide table should consume every pixel of the viewport so
   the table never appears artificially boxed-in next to a strip of
   empty whitespace. Apply this on the SAME element as `.settings-layout`,
   e.g. `<div class="settings-layout settings-layout--full">`.

   See `.cursor/rules/page-width.mdc` for when to opt in. */
.settings-layout--full {
  max-width: none;
}

.settings-nav {
  flex-shrink: 0;
  width: 220px;
  position: sticky;
  top: 24px;
  padding: 16px 0;
  border-right: 1px solid var(--line, #e2e8f0);
}

/* When the inner `.settings-nav` is empty (i.e. rendered inside the
   new settings layout), it has no real estate of its own — collapse
   it so the content area takes the full width. The legacy two-column
   form is preserved when the nav has any children, so any caller
   still rendering the old partial in the app layout still works. */
.settings-nav:empty {
  display: none;
}

.settings-nav__group {
  margin-bottom: 20px;
}

.settings-nav__group:last-child {
  margin-bottom: 0;
}

.settings-nav__group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  margin: 0 0 8px 0;
  padding: 0 12px 0 0;
}

.settings-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.settings-nav__link {
  display: block;
  padding: 8px 12px 8px 0;
  font-size: 14px;
  color: var(--text, #0f172a);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.settings-nav__link:hover {
  background: var(--bg-hover, #f1f5f9);
  color: var(--text, #0f172a);
}

.settings-nav__link--active {
  font-weight: 600;
  color: var(--accent, #2563eb);
}

.settings-content {
  flex: 1;
  min-width: 0;
}
.settings-content > .panel + .panel {
  margin-top: 24px;
}

.population-method-grid {
  align-items: stretch;
}

.population-method-card {
  cursor: pointer;
  position: relative;
}

.population-method-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.population-method-card.is-selected,
.population-method-card:has(.population-method-input:checked) {
  border-color: #c7d2fe;
  background: var(--accent-weak);
}

.population-method-options {
  margin-top: 16px;
}

.settings-reporting {
  display: grid;
  gap: 12px;
}

.settings-reporting-inner {
  max-width: 1040px;
}

.settings-row {
  display: grid;
  gap: 24px;
  padding: 8px 0;
}

.settings-row-two-col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.settings-col h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.settings-col p {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.45;
}

.settings-col p:last-child {
  margin-bottom: 0;
}

.settings-col-inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-col-inputs .form-field {
  gap: 6px;
}

.settings-divider {
  height: 1px;
  background: var(--line);
  margin: 6px 0;
}

.settings-subsection-title {
  margin: 16px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.settings-subsection-title:first-child {
  margin-top: 0;
}

/* ════════════════════════════════════════════════════════════════════
   Customs settings — tax identifiers (cti) + auto-population rules.
   Lives in the settings region; the table itself uses .table-panel.
   ════════════════════════════════════════════════════════════════════ */
.cti-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--pp-text);
}

.cti-empty {
  padding: 24px 16px;
}

.cti-empty__title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text);
}

.cti-add {
  border-top: 1px solid var(--pp-border);
  padding: 16px;
}

.cti-add > summary {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-accent);
  transition: color 0.15s var(--pp-ease);
}

.cti-add > summary::-webkit-details-marker {
  display: none;
}

.cti-add > summary:hover {
  color: var(--pp-accent-hover);
}

.cti-add[open] > summary {
  margin-bottom: 16px;
}

.cti-rules {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pp-text-muted);
}

.cti-rules li::marker {
  color: var(--pp-text-subtle);
}

.cti-rules strong {
  color: var(--pp-text);
  font-weight: 600;
}

.settings-abc-grid {
  align-items: end;
}

.settings-abc-hint {
  margin: 8px 0 0;
  font-size: 12px;
}

.settings-guidance {
  margin-top: 8px;
}

.settings-guidance > summary {
  list-style: none;
}

.settings-guidance > summary::-webkit-details-marker {
  display: none;
}

.settings-guidance-trigger {
  cursor: pointer;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

.settings-guidance-body {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
}

.panel-header-tight {
  margin-bottom: 8px;
}

.panel-header h2 {
  margin: 0;
  font-size: 18px;
}

.panel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.panel-total {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.integration-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.integration-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.integration-header h2 {
  margin: 0;
  font-size: 18px;
}

.integration-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.integration-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.integration-section h3 {
  margin: 0;
  font-size: 15px;
}

.integration-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* Settings list panels (integrations / MCP index) — same anatomy as .panel.intg-section on integration show */
.panel.integration-list {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.integration-list-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--line);
}

.integration-list-header h2,
.integration-list-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.integration-list-header p.muted {
  margin: 4px 0 0;
  line-height: 1.4;
}

.integration-list-items {
  display: grid;
  gap: 12px;
  padding: 16px 24px 20px;
}

.mcp-scheduled-imports-table .mcp-import-last-run {
  white-space: nowrap;
}
.mcp-scheduled-imports-table .mcp-import-enabled-cell {
  vertical-align: middle;
}
.mcp-scheduled-imports-table .mcp-import-actions-cell {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Transform toggle button ── */
.transform-toggle-btn { color: #94a3b8; transition: color 0.15s; }
.transform-toggle-btn:hover { color: var(--accent, #2563eb); }
.transform-toggle-btn.transform-btn-active { color: var(--accent, #2563eb); }

/* ── Transform badge in show view ── */
.transform-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #6366f1;
  background: #eef2ff;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ── Rules summary on show page ── */
.rules-summary { display: flex; flex-direction: column; gap: 6px; }
.rule-summary-card {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.rule-summary-card code { font-size: 12px; background: #eef2ff; padding: 1px 5px; border-radius: 3px; }
.rule-summary-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent, #2563eb);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.integration-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

a.integration-row.integration-row-link {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

a.integration-row.integration-row-link:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

a.integration-row.integration-row-link:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}

.integration-row-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #94a3b8;
}

a.integration-row.integration-row-link:hover .integration-row-chevron {
  color: #64748b;
}

.integration-row-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.integration-row-meta > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.integration-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e2e8f0;
  display: grid;
  place-items: center;
  font-weight: 600;
}

.integration-avatar-logo {
  background: #fff;
  border: 1px solid var(--line);
  box-sizing: border-box;
}

.integration-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.integration-name {
  font-weight: 600;
  line-height: 1.25;
}

.integration-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.integration-empty,
.integration-empty-state {
  display: grid;
  gap: 12px;
  margin: 16px 24px 20px;
  padding: 20px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: #f8fafc;
}

.integration-empty p,
.integration-empty-state p {
  margin: 0;
}


.channel-picker {
  display: grid;
  gap: 16px;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.channel-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.channel-tile:hover {
  border-color: #cbd5f5;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.channel-tile.is-disabled {
  opacity: 0.6;
  pointer-events: none;
  background: #f8fafc;
}

.channel-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e2e8f0;
  display: grid;
  place-items: center;
  font-weight: 600;
}

.channel-logo--logo {
  background: #fff;
  border: 1px solid var(--line);
  box-sizing: border-box;
}

.channel-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Catalog mappings index — channel cards (cmi-*) ───────── */
.cmi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 16px 24px 20px;
}

.cmi-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  gap: 10px 12px;
  padding: 16px 18px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 12px);
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cmi-card:hover {
  border-color: #cbd5f5;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.cmi-card:hover .cmi-card__chevron {
  color: #64748b;
}

.cmi-card:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}

.cmi-card__head {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cmi-card__title {
  flex: 1;
  min-width: 0;
}

.cmi-card__name {
  font-weight: 600;
  line-height: 1.25;
}

.cmi-card__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmi-card__chevron {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #94a3b8;
}

.cmi-add-card {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 16px;
  padding: 24px 28px;
  border: 1px dashed var(--pp-border, #e2e8f0);
  border-radius: var(--radius, 12px);
  background: linear-gradient(135deg, var(--pp-surface, #fff) 0%, var(--pp-accent-soft, #eff6ff) 100%);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cmi-add-card:hover {
  border-color: var(--pp-accent, #2563eb);
  border-style: solid;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.cmi-add-card:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}

.cmi-add-card__art {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.cmi-add-card__logos {
  display: flex;
  align-items: center;
}

.cmi-add-card__logo {
  display: flex;
  margin-left: -10px;
}

.cmi-add-card__logo:first-child {
  margin-left: 0;
}

.cmi-add-card__logo .channel-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.cmi-add-card__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--pp-accent, #2563eb);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.cmi-add-card__body {
  flex: 1;
  min-width: 0;
}

.cmi-add-card__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}

.cmi-add-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  max-width: 52ch;
}

.cmi-add-card__cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-accent, #2563eb);
}

@media (max-width: 900px) {
  .cmi-grid {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }

  .cmi-add-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
  }

  .cmi-add-card__logos {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .cmi-add-card__logo {
    margin-left: 0;
  }
}

.channel-name {
  font-weight: 600;
}

.channel-soon {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.integration-setup {
  display: grid;
  gap: 16px;
  max-width: 520px;
}

.integration-setup-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.intg-auth-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin: 4px 0 8px;
}

.intg-auth-tab {
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.intg-auth-tab:hover {
  color: var(--text);
}

.intg-auth-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

.toggle input {
  accent-color: var(--accent);
}

/* ─── Integration settings page (redesign) ──────────────── */
.intg-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  /* Match .settings-content > .panel + .panel (24px) so stack spacing is even */
  margin-bottom: 24px;
}
.intg-status-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.intg-provider-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  background: #64748b;
}
.intg-provider-icon-shopify { background: #95bf47; }
.intg-provider-icon-printnode { background: #3b82f6; }

.intg-provider-icon-logo {
  background: #fff;
  border: 1px solid var(--line);
  padding: 7px;
  box-sizing: border-box;
}

.intg-provider-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.intg-status-left > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.intg-status-left > div:last-child > p.muted {
  margin: 0;
  line-height: 1.35;
}

.intg-provider-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}
.intg-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
}

.intg-direction-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
  letter-spacing: 0.02em;
  position: relative;
  top: -1px;
}
.intg-direction-pill--import {
  background: #eff6ff;
  color: #1d4ed8;
}
.intg-direction-pill--export {
  background: #f0fdf4;
  color: #15803d;
}
.intg-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
}
.intg-status-connected .intg-status-dot { background: #22c55e; }
.intg-status-connected { color: #15803d; background: #f0fdf4; }
.intg-status-error .intg-status-dot { background: #ef4444; }
.intg-status-error { color: #b91c1c; background: #fef2f2; }
.intg-status-pending .intg-status-dot { background: #f59e0b; }
.intg-status-pending { color: #92400e; background: #fffbeb; }

.intg-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

/* Clip inner backgrounds to panel radius; omit table-heavy panels that use sticky thead */
.intg-section.intg-sync-history,
.intg-section.intg-metafield-imports {
  overflow: hidden;
}
.intg-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--line);
}
.intg-section-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.intg-section-header p.muted {
  margin: 4px 0 0;
  line-height: 1.4;
}
.intg-section-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
}

.intg-danger-zone .intg-section-footer {
  background: #fef2f2;
}

.intg-danger-zone {
  border-color: #fecaca;
}

.intg-danger-zone .intg-section-header h3 {
  color: var(--danger);
}

/* Header + footer only (no body): avoid double rule between them */
.intg-section > .intg-section-header + .intg-section-footer {
  border-top: none;
}

.intg-sync-form {
  display: flex;
  flex-direction: column;
}

/* Amazon integration: product matching (inset + SKU strip grid) */
.intg-amazon-product-match-body {
  padding: 14px 24px 4px;
}
.intg-amazon-product-match-body .intg-order-import-modes {
  margin-bottom: 1rem;
}
.intg-amazon-sku-strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.intg-amazon-product-match-hint {
  margin: 0 0 0.25rem;
  font-size: 13px;
  line-height: 1.45;
}

/* FBA Restock Recommendations */
.fba-restock-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
}
.fba-restock-page .page-content-inner {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.fba-restock-page .fba-restock-meta {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #eff6ff;
  font-size: 13px;
  color: #1e40af;
}
.fba-restock-meta-divider {
  width: 1px;
  height: 14px;
  background: #bfdbfe;
}
.fba-restock-banner {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.fba-restock-banner-title {
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-size: 14px;
  color: var(--text, #0f172a);
}
.fba-restock-banner-body {
  margin: 0;
  line-height: 1.45;
}
.fba-restock-banner-note {
  margin: 0.55rem 0 0;
  line-height: 1.45;
}
.fba-restock-stat-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0.35rem 0 0.8rem;
}
.fba-restock-stat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 14px 16px;
}
.fba-restock-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.05;
}
.fba-restock-stat-label {
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
/* Ship-from card: matches .panel.intg-section on integration show; extra gap above Recommendations */
.fba-restock-ship-section {
  margin-bottom: 1.25rem;
}
.fba-restock-ship-body {
  padding: 0.85rem 1.25rem 1.25rem;
}
.fba-restock-ship-location-field .input {
  width: 100%;
  min-width: 0;
}
.fba-restock-ship-location-field > .muted {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.fba-restock-location-note {
  margin-top: 6px;
  font-size: 12px;
  display: block;
}
.fba-restock-table-panel .fba-restock-table-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 10px;
}
.fba-restock-table-intro {
  margin: 0.4rem 0 0;
  max-width: 52rem;
  line-height: 1.45;
  font-size: 13px;
}
.fba-restock-table-tags {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.fba-restock-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.fba-restock-tag-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.fba-restock-tag-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.fba-restock-select-all {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text, #0f172a);
}
.fba-restock-select-all input {
  width: 14px;
  height: 14px;
}
.fba-restock-table-panel .table-wrap {
  border-radius: 12px;
}
.fba-restock-table tbody td {
  color: var(--text, #0f172a);
  font-size: 14px;
  vertical-align: middle;
}
.fba-restock-table tbody tr:nth-child(even) {
  background: #fbfdff;
}
.fba-restock-table tbody tr.is-selected {
  background: #eff6ff;
}
.fba-restock-table tbody tr.is-selected td {
  border-bottom-color: #bfdbfe;
}
.fba-restock-table .fba-restock-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fba-restock-col-check {
  width: 40px;
}
.fba-restock-unselectable {
  color: #94a3b8;
  display: inline-block;
  width: 100%;
  text-align: center;
}
.fba-restock-cell-sku .fba-restock-msku {
  display: block;
  font-size: 12px;
  margin-top: 2px;
}
.fba-restock-asin {
  font-size: 12px;
  color: var(--muted);
}
.fba-restock-row-muted td {
  opacity: 0.66;
}
.fba-restock-ship-note {
  display: block;
  font-size: 11px;
  margin-top: 3px;
}
.fba-restock-ship-qty {
  font-size: 15px;
}
.fba-restock-days-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}
.fba-restock-days-badge-danger {
  background: #fef2f2;
  color: #b91c1c;
}
.fba-restock-days-badge-warning {
  background: #fffbeb;
  color: #b45309;
}
.fba-restock-days-badge-neutral {
  background: #f1f5f9;
  color: #334155;
}
.fba-restock-bottleneck {
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.fba-restock-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(3px);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}
.fba-restock-selection-help {
  margin-right: auto;
}
.fba-restock-actions .btn[disabled] {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}
@media (max-width: 980px) {
  .fba-restock-stat-bar {
    grid-template-columns: 1fr;
  }
  .fba-restock-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .fba-restock-selection-help {
    width: 100%;
    margin-right: 0;
  }
}
@media (max-width: 640px) {
  .fba-restock-page .fba-restock-meta {
    display: flex;
    flex-wrap: wrap;
  }
  .fba-restock-meta-divider {
    display: none;
  }
  .fba-restock-table-head {
    align-items: stretch;
  }
  .fba-restock-select-all {
    width: 100%;
    justify-content: center;
  }
}

.intg-sync-items {
  display: flex;
  flex-direction: column;
}
.intg-sync-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.12s ease;
}
.intg-sync-items > .intg-sync-toggle:first-child {
  border-top: none;
}
.intg-app-ext-block:first-child .intg-sync-toggle {
  border-top: none;
}
.intg-sync-toggle:hover {
  background: #f8fafc;
}
.intg-sync-label {
  display: block;
  font-weight: 500;
  font-size: 14px;
}
.intg-sync-desc {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 1px;
}

.intg-sync-order-block {
  border-top: 1px solid var(--line);
}
.intg-sync-order-block > .intg-sync-toggle {
  border-top: none;
}

/* Nested under Orders: scoped import options */
.intg-order-import-nest {
  padding: 4px 24px 16px 78px;
}
.intg-order-import-details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.intg-order-import-details[open] .intg-order-import-chevron {
  transform: rotate(90deg);
}
.intg-order-import-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  line-height: 1.35;
  user-select: none;
  transition: background 0.12s ease;
}
.intg-order-import-summary:hover {
  background: var(--bg-subtle, #f8fafc);
}
.intg-order-import-summary::-webkit-details-marker {
  display: none;
}
.intg-order-import-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  background: var(--bg-subtle, #f1f5f9);
  position: relative;
  transition: transform 0.2s ease;
}
.intg-order-import-chevron::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent #64748b;
  transform: translate(-35%, -50%);
}
.intg-order-import-summary-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.intg-order-import-summary-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
}
.intg-order-import-summary-sub {
  font-size: 12px;
  line-height: 1.4;
}
.intg-order-import-body {
  padding: 0 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--line);
  background: linear-gradient(to bottom, #fafbfc 0%, #fff 28px);
}
.intg-order-import-intro {
  margin: 0;
  padding-top: 12px;
  font-size: 12px;
  line-height: 1.45;
}
.intg-order-import-modes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.intg-order-import-modes .intg-radio-label-block {
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 calc(-1 * 12px);
  border-radius: 10px;
  border: 1px solid transparent;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.intg-order-import-modes .intg-radio-label-block:has(input:checked) {
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.35);
}
.intg-radio-label-block input {
  margin-top: 4px;
}
.intg-order-import-opt-title {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
}
.intg-order-import-opt-desc {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 2px;
}
.intg-order-import-tags-shell {
  padding-top: 2px;
}
.intg-order-import-tags-shell[hidden] {
  display: none !important;
}
.intg-order-import-tags-field {
  margin: 0;
}
.intg-order-import-tags-hint {
  font-size: 12px;
  line-height: 1.4;
}

/* Toggle switch */
.intg-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.intg-switch-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.intg-switch-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 999px;
  transition: background 0.2s ease;
  cursor: pointer;
}
.intg-switch-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.intg-switch-input:checked + .intg-switch-slider {
  background: var(--accent);
}
.intg-switch-input:checked + .intg-switch-slider::before {
  transform: translateX(18px);
}
.intg-switch-input:focus-visible + .intg-switch-slider {
  box-shadow: 0 0 0 2px rgba(99,102,241,0.3);
}

.intg-backfill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 24px 20px;
}
.intg-backfill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
  color: inherit;
}
.intg-backfill-btn:hover {
  border-color: #a5b4fc;
  box-shadow: 0 2px 8px rgba(99,102,241,0.08);
}
.intg-backfill-icon {
  font-size: 16px;
  line-height: 1;
}

/* App extension blocks */
.intg-app-ext-block {
  border-top: 1px solid var(--line);
}
.intg-app-ext-block:first-child {
  border-top: none;
}
.intg-app-ext-settings {
  padding: 12px 24px 16px 72px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-subtle, #f9fafb);
  border-top: 1px solid var(--line);
}
.intg-app-ext-setting-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intg-app-ext-setting-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.intg-app-ext-setting-label .intg-app-ext-setting-text {
  min-width: 180px;
  color: var(--fg);
}
.intg-app-ext-checkbox {
  padding: 0;
  border: none;
}
.intg-switch.intg-switch-sm {
  width: 36px;
  height: 20px;
}
.intg-switch-sm .intg-switch-slider::before {
  width: 14px;
  height: 14px;
}
.intg-switch-sm .intg-switch-input:checked + .intg-switch-slider::before {
  transform: translateX(16px);
}

.intg-reconnect-form {
  padding: 16px 24px 20px;
}
.intg-reconnect-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.intg-detail-grid {
  display: flex;
  gap: 32px;
  padding: 16px 24px 20px;
}
.intg-detail-grid div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.intg-detail-grid dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.intg-detail-grid dd {
  margin: 0;
  font-weight: 500;
}

.intg-vendor-tags {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
}
.intg-vendor-tags h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
}
.intg-vendor-tags-inputs {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}
.intg-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}
.intg-radio-label input {
  accent-color: var(--accent);
}

.intg-empty-hint {
  padding: 12px 24px;
}

.intg-section-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.intg-manual-metafield-error {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--danger, #d32f2f);
}

/* Sync history: filterable, paginated (no full page reload) */
.intg-sync-history-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 12px 24px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}

.intg-sync-history .table-wrap {
  border: none;
  border-radius: 0;
}

.intg-sync-history .data-table tbody tr:last-child td {
  border-bottom: none;
}

.intg-sync-history-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intg-sync-history-filter .input {
  min-width: 140px;
}

.intg-sync-history .intg-sync-history-pagination {
  padding: 12px 24px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
}

/* Metafield imports card: no inner table border */
.intg-metafield-imports [data-metafield-imports-target="emptyState"]:not(.hidden) {
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}

.intg-metafield-imports .intg-metafield-table-wrap {
  border: none;
  border-radius: 0;
}

.intg-metafield-imports .data-table tbody tr:last-child td {
  border-bottom: none;
}

.intg-section.intg-printnode-printers .table-wrap {
  border: none;
  border-radius: 0;
}

.intg-select-compact {
  max-width: 260px;
}

.intg-input-compact {
  max-width: 200px;
}

/* Metafield imports: compact table so empty state doesn't have excess vertical space */
.intg-metafield-table-wrap {
  min-height: 0;
}
.intg-metafield-table-wrap .data-table tbody tr:only-child td {
  padding-top: 12px;
  padding-bottom: 12px;
}

.intg-defaults-grid {
  display: flex;
  flex-direction: column;
  padding: 0 24px;
}
.intg-default-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.intg-defaults-grid > .intg-default-row:first-child {
  border-top: none;
}
.intg-default-row strong {
  font-size: 14px;
}

/* ── Integration show: tabs shell ──────────────────────────── */

/* Compact status row above the tabs (replaces the large .intg-status-banner). */
.intg-status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
}
.intg-status-strip__main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.intg-status-strip__logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: #64748b;
  flex-shrink: 0;
}
.intg-status-strip__logo--shopify { background: #95bf47; }
.intg-status-strip__logo--printnode { background: #3b82f6; }
.intg-status-strip__logo--amazon { background: #ff9900; }
.intg-status-strip__logo--image {
  background: #fff;
  border: 1px solid var(--line);
  padding: 4px;
}
.intg-status-strip__logo--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.intg-status-strip__text {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.intg-status-strip__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.intg-status-strip__meta {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tabs container on integration show: snap onto the status strip.
   The legacy `.tabs { display: flex; flex-wrap: wrap }` rule at the top
   of this file would otherwise lay the tabs__bar and tabs__panel side
   by side; force a vertical stack the same way `.entity-show__tabs` does. */
.intg-show-tabs.tabs {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
}
.intg-show-tabs > .tabs__bar {
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.intg-show-tabs > .tabs__panel {
  padding-top: 16px;
  width: 100%;
  min-width: 0;
}

/* Stacked panels inside a tab — provides consistent spacing between cards. */
.intg-tab-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.intg-tab-stack .settings-reporting-inner > .panel + .panel,
.intg-tab-stack .settings-reporting-inner > .panel + details.panel,
.intg-tab-stack .settings-reporting-inner > details.panel + .panel,
.intg-tab-stack .settings-reporting-inner > details.panel + details.panel {
  margin-top: 16px;
}
.intg-tab-stack .panel,
.intg-tab-stack details.panel {
  padding: 0;
}
.intg-tab-stack .panel > .panel-header {
  padding: 18px 20px 14px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.intg-tab-stack .panel > .panel-header h2 {
  font-size: 16px;
  margin: 0;
}
.intg-tab-stack .panel > .panel-header p.muted {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
}
.intg-tab-stack .panel > form,
.intg-tab-stack .panel > .form-stack,
.intg-tab-stack .panel > .table-wrap,
.intg-tab-stack .panel > .intg-overview-grid,
.intg-tab-stack .panel > .intg-quick-syncs,
.intg-tab-stack .panel > .intg-quick-syncs-hint,
.intg-tab-stack .panel > .intg-action-row,
.intg-tab-stack .panel > .settings-subsection-title,
.intg-tab-stack .panel > .form-actions,
.intg-tab-stack .panel > .iprev-form,
.intg-tab-stack .panel > .iprev-panel-footer {
  padding-left: 20px;
  padding-right: 20px;
}
.intg-tab-stack .panel > .iprev-form {
  padding-top: 16px;
  padding-bottom: 16px;
}
.intg-tab-stack .panel > .iprev-form + .iprev-panel-footer {
  padding-top: 0;
  padding-bottom: 16px;
  margin: 0;
}
.intg-tab-stack .panel > .iprev-form:has(+ .iprev-panel-footer) {
  padding-bottom: 8px;
}
.intg-tab-stack .panel > .form-stack {
  padding-top: 16px;
  padding-bottom: 16px;
}
.intg-tab-stack .panel > .form-stack > .form-actions {
  padding-left: 0;
  padding-right: 0;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.intg-tab-stack .panel > .table-wrap {
  padding-top: 0;
  padding-bottom: 12px;
}

/* Overview: stat grid */
.intg-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.intg-overview-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.intg-overview-stat__label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.intg-overview-stat__value {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  word-break: break-word;
}
.intg-overview-stat .intg-status-pill {
  align-self: flex-start;
}

/* Overview: quick sync buttons + helper hint */
.intg-quick-syncs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  padding-bottom: 8px;
}
.intg-quick-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.intg-quick-sync-btn .button_to,
.intg-quick-syncs > form {
  display: inline-block;
}
.intg-quick-sync-btn__icon {
  font-size: 16px;
  line-height: 1;
}
.intg-quick-syncs-hint {
  margin: 0;
  padding-bottom: 16px;
  font-size: 12px;
  line-height: 1.5;
}

/* Overview: action row (linked buttons) */
.intg-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Sync settings: radio cards (replaces .intg-radio-label-block) */
.intg-radio-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.intg-radio-fieldset__legend {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
  padding: 0;
}
.intg-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.intg-radio-card:hover {
  border-color: #cbd5e1;
}
.intg-radio-card input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
}
.intg-radio-card:has(input[type="radio"]:checked) {
  border-color: var(--accent);
  background: #f5f9ff;
}
.intg-radio-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.intg-radio-card__body strong {
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}
.intg-radio-card__body .muted {
  font-size: 12px;
  line-height: 1.4;
}

.intg-tag-input-shell {
  margin-top: 4px;
}
.intg-tag-input-shell[hidden] {
  display: none;
}

/* ── Declarative sync-settings schema UI ─────────────────────────────── */

/* Summary strip — shown at the top of the Sync settings panel */
.intg-sync-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  padding: 10px 20px;
  background: var(--pp-surface-2, #f8fafc);
  border-bottom: 1px solid var(--pp-border, var(--line));
  font-size: 13px;
  min-height: 40px;
}
.intg-sync-summary__group {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.intg-sync-summary__arrow {
  font-size: 12px;
  font-weight: 700;
}
.intg-sync-summary__arrow--in  { color: #1d4ed8; }
.intg-sync-summary__arrow--out { color: #15803d; }
.intg-sync-summary__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pp-text-muted, var(--muted));
}
.intg-sync-summary__pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.intg-sync-summary__pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
}
.intg-sync-summary__pill--import { background: #eff6ff; color: #1d4ed8; }
.intg-sync-summary__pill--export { background: #f0fdf4; color: #15803d; }
.intg-sync-summary__none { font-size: 13px; }

/* Domain sections — containers for one data area (Catalog, Orders, etc.) */
.intg-sync-domains {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.intg-sync-domain {
  padding: 0;
}

/* ── Catalog ownership banner ──────────────────────────────────── */
.intg-catalog-ownership {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--pp-surface-raised, var(--card-bg));
  border: 1px solid var(--pp-border, var(--line));
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0 12px;
}
.intg-catalog-ownership__icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--pp-muted, #6b7280);
}
.intg-catalog-ownership__body {
  flex: 1 1 0;
  min-width: 0;
}
.intg-catalog-ownership__title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
}
.intg-catalog-ownership__desc {
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.intg-catalog-ownership__btn {
  margin-top: 4px;
}

.intg-sync-domain--sep {
  border-top: 1px solid var(--pp-border, var(--line));
  margin-top: 4px;
  padding-top: 4px;
}
.intg-sync-domain__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-text-muted, var(--muted));
  margin: 16px 0 0;
  padding: 0;
}

/* Lane — one direction (import / export / both) within a domain */
.intg-sync-lane {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 3px solid transparent;
}
.intg-sync-lane--import { border-left-color: #93c5fd; }
.intg-sync-lane--export { border-left-color: #86efac; }
.intg-sync-lane--both   { border-left-color: #a5b4fc; }

.intg-sync-lane__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.intg-sync-lane__caption {
  font-size: 11px;
  color: var(--pp-text-muted, var(--muted));
  font-weight: 500;
}

/* Controls list */
.intg-sync-controls {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Individual control */
.intg-sync-control {
  padding: 10px 0;
  border-bottom: 1px solid var(--pp-border, var(--line));
}
.intg-sync-controls > .intg-sync-control:last-child {
  border-bottom: none;
}

/* Two-column toggle row: meta left, toggle right */
.intg-sync-control__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.intg-sync-control__meta {
  flex: 1;
  min-width: 0;
}
.intg-sync-control__label {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-text, var(--ink));
}
.intg-sync-control__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}
.intg-sync-control__input {
  flex-shrink: 0;
  padding-top: 1px;
}

/* Compact number input inside a control */
.intg-sync-number-input {
  max-width: 100px;
}

/* Nested children (always visible, locked when parent is off) */
.intg-sync-children {
  margin-top: 2px;
  padding-left: 20px;
  border-left: 2px solid var(--pp-border, var(--line));
}
.intg-sync-children .intg-sync-control {
  padding: 8px 0;
}
.intg-sync-children .intg-sync-control__label {
  font-size: 13px;
}
.intg-sync-children .intg-sync-control:last-child {
  border-bottom: none;
}

/* Locked state (parent toggle is off) */
.intg-sync-control.is-locked {
  opacity: 0.45;
  pointer-events: none;
}
.intg-sync-control--export-blocked .intg-sync-control__input {
  opacity: 0.45;
}
.intg-sync-control__blocked-note {
  font-size: 12px;
  line-height: 1.45;
  margin-top: 4px;
}

/* Expanders (shown when parent toggle is on) */
.intg-sync-expanders {
  margin-top: 10px;
  padding: 12px 16px;
  background: var(--pp-surface-2, #f8fafc);
  border: 1px solid var(--pp-border, var(--line));
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.intg-sync-expanders[hidden] {
  display: none;
}
.intg-sync-expanders .intg-sync-control {
  border-bottom: none;
  padding: 0;
}

/* Child control visual treatment */
.intg-sync-control--child .intg-sync-control__label {
  font-weight: 500;
}

/* Run-sync inline form inside the Sync history toolbar */
.intg-run-sync {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.intg-run-sync__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.intg-run-sync__select {
  min-width: 160px;
}
.intg-sync-history-divider {
  width: 1px;
  height: 24px;
  background: var(--line);
  margin: 0 4px;
}

/* Collapsible panel (used in Advanced tab) */
.intg-collapsible {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.intg-collapsible > .intg-collapsible__summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.intg-collapsible > .intg-collapsible__summary::-webkit-details-marker {
  display: none;
}
.intg-collapsible__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.intg-collapsible__hint {
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
}
.intg-collapsible__chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-right: 4px;
}
.intg-collapsible[open] .intg-collapsible__chevron {
  transform: rotate(-135deg);
}
.intg-collapsible__body {
  padding: 4px 20px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.intg-collapsible__body > .form-actions {
  margin-top: 4px;
}

/* Danger zone variant for collapsible */
.intg-danger-zone {
  border-color: #fecaca;
}
.intg-danger-zone .intg-collapsible__title {
  color: var(--danger);
}
.intg-danger-zone .intg-collapsible__body {
  background: #fef2f2;
  border-top-color: #fecaca;
}

/* Vendor tags hint */
.intg-vendor-tags-hint {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.4;
}

/* Eyebrow link inside the topbar title */
.eyebrow-link {
  color: inherit;
  text-decoration: none;
}
.eyebrow-link:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .intg-status-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .intg-overview-grid {
    grid-template-columns: 1fr 1fr;
  }
  .intg-collapsible > .intg-collapsible__summary {
    grid-template-columns: 1fr auto;
  }
  .intg-collapsible__hint {
    grid-column: 1 / -1;
  }
}

.table-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tab {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

.tab.is-active {
  background: var(--accent-weak);
  border-color: #c7d2fe;
  color: #1d4ed8;
  font-weight: 600;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.saved-views {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  background: var(--soft);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  color: #334155;
}

.input {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  min-width: 180px;
}

/* Display-only "input" — used where a value is locked (eg. the
   order Channel can't be changed once an order is created) but we
   still want the value rendered with input-like affordances. */
.input-readonly {
  background: #f9fafb;
  color: #475569;
  cursor: not-allowed;
}

.input-compact {
  min-width: 140px;
  padding: 6px 10px;
  font-size: 13px;
}

.column-controls {
  position: relative;
}

.column-selector {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.column-selector-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}

.column-selector-search {
  display: grid;
  gap: 6px;
  min-width: 220px;
}

.column-selector-actions {
  display: flex;
  gap: 8px;
}

.column-selector-group {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.column-selector-group-title {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.column-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.checkbox-row-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.column-controls > summary {
  list-style: none;
}

.column-controls > summary::-webkit-details-marker {
  display: none;
}

.column-panel {
  position: absolute;
  top: 38px;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  width: 380px;
  max-height: 520px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 20;
  overflow: hidden;
}

.column-controls.is-open .column-panel,
.column-controls[open] .column-panel {
  display: flex;
  flex-direction: column;
}

/* ── Search ── */
.column-panel-search {
  padding: 6px 12px 0;
  flex-shrink: 0;
}

.column-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.column-search-input {
  width: 100%;
  font-size: 13px;
  padding-right: 28px;
}

.column-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: #94a3b8;
  transition: color 0.15s, background 0.15s;
}

.column-search-clear:hover {
  color: #334155;
  background: #f1f5f9;
}

/* ── Section title ── */
.column-panel-section-title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Presets ── */
.column-panel-presets {
  padding: 8px 12px 0;
  display: grid;
  gap: 6px;
  flex-shrink: 0;
}

.column-preset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.column-preset-chip {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: #334155;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.column-preset-chip:hover {
  background: #f1f5f9;
  border-color: #c7d2fe;
}

.column-preset-chip.is-active {
  background: #4f46e5;
  color: #ffffff;
  border-color: #4f46e5;
}

/* ── AI Suggest ── */
.column-panel-ai {
  padding: 10px 12px 0;
  flex-shrink: 0;
}

.column-ai-input-wrap {
  display: flex;
  gap: 4px;
  align-items: center;
}

.column-ai-input {
  flex: 1;
  font-size: 13px;
}

.column-ai-btn {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #818cf8, #6366f1);
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.15s;
}

.column-ai-btn:hover {
  opacity: 0.85;
}

.column-ai-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.column-ai-hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: #6366f1;
  font-style: italic;
}

/* ── Column list ── */
.column-panel-list {
  padding: 6px 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.column-panel-hint {
  margin: 0;
  padding: 6px 12px 10px;
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

/* ── Column option row ── */
.column-option {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: #334155;
  padding: 4px 12px;
  transition: background 0.1s;
  position: relative;
}

.column-option:hover {
  background: #f8fafc;
}

.column-option-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.column-option-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
}

.column-option-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.column-option-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Pin button ── */
.column-pin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: #cbd5e1;
  transition: color 0.15s, background 0.15s;
}

.column-pin-btn:hover {
  color: #6366f1;
  background: #f1f5f9;
}

.column-pin-btn.is-active {
  color: #4f46e5;
}

.column-pin-btn.is-active .pin-icon {
  filter: drop-shadow(0 0 1px rgba(79, 70, 229, 0.4));
}

.column-pin-btn:disabled {
  opacity: 0.3;
  pointer-events: none;
}

.column-pin-btn.is-locked {
  color: #4f46e5;
  opacity: 0.6;
  cursor: default;
}

.column-pin-btn.is-locked:hover {
  background: transparent;
}

/* ── Drag handle ── */
.drag-handle {
  color: var(--muted);
  font-size: 14px;
  cursor: grab;
  flex-shrink: 0;
  user-select: none;
}

/* ── Drag-and-drop indicators — panel rows ── */
.column-option.is-dragging {
  opacity: 0.4;
}

.column-option.column-drag-above {
  box-shadow: inset 0 2px 0 0 #6366f1;
}

.column-option.column-drag-below {
  box-shadow: inset 0 -2px 0 0 #6366f1;
}

/* ── Drag-and-drop indicators — table headers ── */
.data-table th.column-drag-over-left {
  box-shadow: inset 3px 0 0 0 #6366f1;
}

.data-table th.column-drag-over-right {
  box-shadow: inset -3px 0 0 0 #6366f1;
}

/* ── Drop indicator line (absolute positioned) ── */
.column-drop-indicator {
  height: 2px;
  background: #6366f1;
  border-radius: 1px;
  margin: 0 12px;
  pointer-events: none;
}

.product-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #e2e8f0;
  color: #334155;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.data-table th.is-dragging {
  opacity: 0.6;
}

.input:focus {
  outline: 2px solid #c7d2fe;
  border-color: #c7d2fe;
}

.link {
  color: var(--accent);
  font-weight: 600;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Order form: line items panel; table scrolls inside. No overflow on panel so variant dropdown is not clipped. */
.order-form-line-items {
  min-width: 0;
}
.order-form-line-items .table-wrap {
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Searchable variant dropdown in order form */
.variant-select-cell {
  position: relative;
  min-width: 200px;
}
.variant-select-cell input[data-variant-select-target="search"] {
  width: 100%;
  min-width: 180px;
}
.variant-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 2px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}
/* When inside a scroll container (e.g. order form table), position fixed so dropdown is not clipped */
.variant-dropdown--fixed {
  position: fixed !important;
  left: 0;
  right: auto;
  top: 0;
  margin-top: 0;
  z-index: 1000;
}
.variant-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  border: none;
  background: none;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.variant-dropdown-item:hover {
  background: var(--hover-bg, #f1f5f9);
}
.variant-dropdown-item.muted {
  color: var(--muted);
  cursor: default;
}

.table-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
}

.table-panel .pagination:last-child {
  margin-bottom: 0;
}

.table-panel .table-wrap {
  border: none;
  border-radius: 0;
}
.table-panel .data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Line items table: keep outer card rounded; remove inner border so no double border */
.panel-line-items .table-panel {
  border: none;
  border-radius: 0;
}
.panel-line-items .table-panel .table-wrap {
  border-radius: 0;
}

.table-panel .panel-header,
.table-panel .panel-header-tight {
  padding: 16px 16px 0;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Compact, consistent padding when pagination is inside a panel */
.table-panel .pagination,
.panel .pagination {
  padding: 10px 16px;
  margin: 0;
}

.pagination .muted {
  font-size: 13px;
}

.pagination-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-page {
  font-size: 13px;
  color: var(--muted);
}

.btn.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.toolbar .topbar-actions .btn:not(.btn-primary):hover,
.toolbar .topbar-actions .column-controls > summary:hover,
.toolbar .filter-field-picker > summary:hover,
.toolbar .filters-inline .btn:not(.btn-primary):hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}

.btn-primary:active {
  background: #1e40af;
  border-color: #1e40af;
  box-shadow: none;
}

/* ── Purchase orders index — chevron pipeline ────────────────────── */
.po-pipeline {
  --pip-h: 70px;
  --pip-arrow: 10px;
  --pip-bg: #f8fafc;
  --pip-bg-hover: #f1f5f9;
  --pip-bg-active: #eff6ff;
  --pip-bg-empty: #f8fafc;
  --pip-border: var(--line, #e2e8f0);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
}

.po-pipeline__steps {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.po-pipeline__step {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
}

.po-pipeline__step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--pip-arrow);
  height: var(--pip-arrow);
  background: var(--pip-bg);
  border-right: 1px solid var(--pip-border);
  border-bottom: 1px solid var(--pip-border);
  transform: translate(50%, -50%) rotate(-45deg);
  z-index: 3;
  pointer-events: none;
}

.po-pipeline__step--last::after {
  display: none;
}

.po-pipeline__step-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-decoration: none;
  color: inherit;
  padding: 7px 6px 8px;
  padding-left: calc(6px + var(--pip-arrow) / 2);
  background: var(--pip-bg);
  height: var(--pip-h);
  box-sizing: border-box;
  transition: background 0.12s ease;
  border-top: 1px solid var(--pip-border);
  border-bottom: 1px solid var(--pip-border);
}

.po-pipeline__step--first .po-pipeline__step-link {
  padding-left: 10px;
  border-left: 1px solid var(--pip-border);
  border-radius: 8px 0 0 8px;
}

.po-pipeline__step--last .po-pipeline__step-link {
  padding-right: 10px;
  border-right: 1px solid var(--pip-border);
  border-radius: 0 8px 8px 0;
}

.po-pipeline__step-link:hover {
  background: var(--pip-bg-hover);
}

.po-pipeline__step:hover::after {
  background: var(--pip-bg-hover);
}

.po-pipeline__step-link:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  z-index: 4;
}

.po-pipeline__step--active .po-pipeline__step-link {
  background: var(--pip-bg-active);
}

.po-pipeline__step--active::after {
  background: var(--pip-bg-active);
}

.po-pipeline__step--empty .po-pipeline__step-link {
  background: var(--pip-bg-empty);
}

.po-pipeline__step--empty::after {
  background: var(--pip-bg-empty);
}

.po-pipeline__step--empty .po-pipeline__step-count {
  color: #cbd5e1;
}

.po-pipeline__step--empty .po-pipeline__step-label {
  color: #94a3b8;
}

.po-pipeline__step--empty .po-pipeline__step-value {
  visibility: hidden;
}

.po-pipeline__step-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #64748b;
  white-space: nowrap;
  line-height: 1.1;
  margin-bottom: 2px;
}

.po-pipeline__step--active .po-pipeline__step-label {
  color: #3b82f6;
}

.po-pipeline__step-count {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1e293b;
  line-height: 1.2;
}

.po-pipeline__step-value {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: #94a3b8;
  line-height: 1.2;
  white-space: nowrap;
  margin-top: 1px;
}

/* ── Mobile: 2×4 grid cards ───── */
@media (max-width: 899px) {
  .po-pipeline {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 14px;
  }

  .po-pipeline__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--pip-border);
    border-radius: 8px;
    overflow: hidden;
  }

  .po-pipeline__step::after {
    display: none;
  }

  .po-pipeline__step-link {
    --pip-h: 46px;
    padding: 6px 4px;
    border: none;
    border-radius: 0;
    border-right: 1px solid var(--pip-border);
    border-bottom: 1px solid var(--pip-border);
  }

  .po-pipeline__step:nth-child(4n) .po-pipeline__step-link {
    border-right: none;
  }

  .po-pipeline__step:nth-child(n+5) .po-pipeline__step-link {
    border-bottom: none;
  }

  .po-pipeline__step--first .po-pipeline__step-link,
  .po-pipeline__step--last .po-pipeline__step-link {
    padding: 6px 4px;
    border-radius: 0;
    border-left: none;
  }

  .po-pipeline__step-label {
    font-size: 9.5px;
  }

  .po-pipeline__step-count {
    font-size: 13px;
  }

  .po-pipeline__step-value {
    font-size: 9px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .po-pipeline__step-link {
    transition: none;
  }
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th,
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.data-table th.is-pinned,
.data-table td.is-pinned {
  position: sticky;
  background: #ffffff;
  z-index: 3;
}


.data-table th.is-pinned {
  background: #f8fafc;
  z-index: 4;
}


.data-table .is-pinned-edge {
  border-right: 1px solid #e5e7eb;
  position: relative;
  z-index: 6;
}

.data-table .is-pinned-edge::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
  background: #e5e7eb;
  pointer-events: none;
}

.data-table tbody tr:hover {
  background: #f8fafc;
}

.data-table th {
  background: #f8fafc;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

.data-table th .table-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.data-table th .table-sort:hover {
  color: #334155;
}

.data-table th .table-sort-indicator {
  font-size: 11px;
  opacity: 0.5;
}

.data-table th .table-sort.is-active .table-sort-indicator {
  opacity: 1;
}

.row-actions {
  text-align: right;
  white-space: nowrap;
}
.row-actions > *,
.row-actions > form {
  display: inline-flex;
}
.row-actions-inline {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}
.row-actions-inline-form {
  display: inline;
}

.inline-cell {
  min-width: 120px;
  padding: 6px 8px;
  border-radius: 8px;
  outline: none;
}

.inline-cell:focus {
  background: #eef2ff;
  box-shadow: inset 0 0 0 1px #c7d2fe;
}

.inline-select {
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #ffffff;
}

/* Products grid — keep status inline-select readable ("Active", "Archived", …) */
.data-table[data-grid-key="products"] th[data-column-id="status"],
.data-table[data-grid-key="products"] td[data-column-id="status"] {
  min-width: 7.25rem;
}

.data-table[data-grid-key="products"] td[data-column-id="status"] .inline-select {
  min-width: 6.75rem;
  width: max-content;
  max-width: 100%;
}

.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e2e8f0;
  font-size: 12px;
  color: #334155;
}

.pill-success {
  background: #dcfce7;
  color: #166534;
}

.pill-warning {
  background: #fef3c7;
  color: #92400e;
}

.pill-danger {
  background: #fee2e2;
  color: #991b1b;
}

/* Replenishment rec modal — policy rules scope */
.rec-policy-scope-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.pill.pill-scope {
  font-weight: 600;
  border: 1px solid transparent;
}

.pill.pill-scope--default {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

.pill.pill-scope--global {
  background: #e0e7ff;
  color: #3730a3;
  border-color: #c7d2fe;
}

.pill.pill-scope--vendor {
  background: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}

.pill.pill-scope--collection,
.pill.pill-scope--tag,
.pill.pill-scope--abc_class {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

.pill.pill-scope--product {
  background: #d1fae5;
  color: #065f46;
  border-color: #6ee7b7;
}

.pill.pill-scope--variant {
  background: #fce7f3;
  color: #9d174d;
  border-color: #f9a8d4;
}

.pill.pill-scope-detail {
  font-weight: 500;
  background: #ffffff;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.pill.pill-scope--conditional {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
  cursor: help;
}

.chart-placeholder {
  display: grid;
  gap: 10px;
  padding: 12px 0;
}

.chart-bar {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.list-title {
  margin: 0 0 4px;
  font-weight: 600;
}

.form-card {
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-size: 13px;
  color: var(--muted);
}

.form-field > p.muted {
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.form-field-wide {
  grid-column: span 2;
}

.form-actions {
  display: flex;
  gap: 12px;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted, #64748b);
}
.btn-ghost:hover {
  background: var(--soft, #f1f5f9);
  color: var(--ink, #0f172a);
}

/* ── Definition list ── */
.definition-list {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
}
.definition-list dt {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #64748b);
  border-bottom: 1px solid var(--line-light, #f1f5f9);
}
.definition-list dd {
  padding: 10px 16px;
  margin: 0;
  font-size: 14px;
  color: var(--ink, #0f172a);
  border-bottom: 1px solid var(--line-light, #f1f5f9);
}
.definition-list dt:last-of-type,
.definition-list dd:last-of-type {
  border-bottom: none;
}

/* ── Product form ───────────────────────────────────────────── */
.product-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-form .form-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  padding: 12px 16px;
}
.product-form .form-errors h2 {
  font-size: 14px;
  margin: 0 0 6px 0;
}
.product-form .form-errors ul {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
}

.product-form textarea.input--prose {
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
  min-height: 6rem;
}

.product-form .form-field label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.product-form__tabs-shell {
  padding: 0;
  overflow: hidden;
}
.product-form__tabs-shell > .tabs__bar {
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.product-form__tab-panel {
  padding: 0 16px 16px;
}
.product-form__tab-header {
  padding: 16px 0 12px;
  border-bottom: none;
}
.product-form__tab-header + .product-form__variants,
.product-form__tab-header + .product-form__variants-empty {
  margin-top: 0;
}

.product-form__details-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding-bottom: 4px;
}
.product-form__details-media {
  flex: 0 0 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.product-form__details-media-img,
.product-form__details-media-placeholder {
  width: 112px;
  height: 112px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  object-fit: cover;
}
.product-form__details-media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  color: var(--muted);
  background: var(--soft, #f8fafc);
}
.product-form__details-media-link {
  width: 100%;
  justify-content: center;
}
.product-form__details-fields {
  flex: 1;
  min-width: 0;
}
.product-form__details-hint {
  margin: 8px 0 0;
}

.product-form__sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin: 0 -16px -16px;
  background: color-mix(in srgb, var(--panel, #fff) 92%, transparent);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(6px);
}

@media (max-width: 720px) {
  .product-form__details-layout {
    flex-direction: column;
  }
  .product-form__details-media {
    flex-direction: row;
    flex: none;
    width: 100%;
    align-items: center;
  }
  .product-form__details-media-img,
  .product-form__details-media-placeholder {
    width: 72px;
    height: 72px;
  }
  .product-form__details-media-link {
    width: auto;
  }
}

.product-form__variants {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-form__variants-empty {
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.product-form-layout-toggle {
  flex-shrink: 0;
}

.product-form-layout-toggle__option {
  min-width: 36px;
  padding: 6px 10px;
}

.product-form-layout-toggle__wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-form-layout-toggle__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: inherit;
}

.product-form-layout-toggle__option.is-active .product-form-layout-toggle__trigger {
  color: var(--ink);
}

.product-form-layout-toggle__icon {
  display: block;
}

.product-form-layout-toggle__option:hover .product-form-layout-toggle__trigger {
  color: var(--ink);
}

.product-form--scroll [data-product-form-layout-target="bar"] {
  display: none;
}

.product-form__section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.product-form__section-badge {
  display: none;
}

.product-form--scroll .product-form__section-badge {
  display: inline-flex;
}

.product-form--scroll .product-form__tab-panel + .product-form__tab-panel {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 8px;
}

.product-form--scroll .product-form__tab-panel {
  scroll-margin-top: 72px;
}

.product-variant-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--panel);
}
.product-variant-row--expanded {
  padding-bottom: 14px;
}
.product-variant-row__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
}
.product-variant-row--expanded .product-variant-row__header {
  margin-bottom: 12px;
}
.product-variant-row__toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  margin: -4px -6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.product-variant-row__toggle:hover {
  background: var(--surface-hover, #f8fafc);
}
.product-variant-row__chevron {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
  margin-top: -2px;
}
.product-variant-row--expanded .product-variant-row__chevron {
  transform: rotate(45deg);
  margin-top: 2px;
}
.product-variant-row__summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  font-size: 14px;
}
.product-variant-row__summary-sku {
  font-weight: 600;
  color: var(--ink);
}
.product-variant-row__summary-sep {
  color: var(--muted);
}
.product-variant-row__summary-title,
.product-variant-row__summary-price {
  color: var(--muted);
  font-size: 13px;
}
.product-variant-row__summary-status {
  font-size: 11px;
  padding: 2px 8px;
}
.product-variant-row__remove {
  flex-shrink: 0;
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.product-variant-row__remove:hover {
  background: var(--surface-hover, #f3f4f6);
  color: #b91c1c;
}
.product-variant-row__essential {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pf-sku-preview {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft, #f8fafc);
}
.pf-sku-preview[data-state="loading"] .pf-sku-preview__sku {
  opacity: 0.5;
}
.pf-sku-preview__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pf-sku-preview__label {
  font-size: 0.8125rem;
  color: var(--muted);
}
.pf-sku-preview__sku {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}
.pf-sku-preview__use {
  margin-left: auto;
}
.pf-sku-preview__template {
  margin: 4px 0 0;
}
.pf-sku-preview__reason {
  margin: 4px 0 0;
  color: var(--warning-text, #b45309);
}
.product-variant-row__optional {
  padding-top: 4px;
}
.product-variant-row__more {
  margin-top: 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  background: var(--soft, #f8fafc);
}
.product-variant-row__more[open] {
  padding-bottom: 12px;
}
.product-variant-row__more > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
}
.product-variant-row__more > summary::-webkit-details-marker {
  display: none;
}
.product-variant-row__more > summary::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
  margin-top: -2px;
}
.product-variant-row__more[open] > summary::after {
  transform: rotate(45deg);
  margin-top: 2px;
}
.product-variant-row__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-variant-row__grid > .form-field {
  min-width: 0;
}
@media (max-width: 720px) {
  .product-variant-row__grid,
  .product-variant-row__essential {
    grid-template-columns: 1fr;
  }
}
.product-variant-row__weight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 9rem);
  gap: 8px;
  min-width: 0;
}
.product-variant-row__weight .input {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/* Stockout dates filter: align buttons with last row of inputs */
.stockout-days-filter-form {
  align-items: end;
}
.stockout-days-filter-form .form-actions {
  align-items: center;
}

.form-field-compact {
  gap: 4px;
}

.reports-topbar-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.reports-topbar-form .form-label {
  font-size: 11px;
  color: var(--muted);
}

.reports-topbar-form .input {
  min-width: 150px;
}

.reports-topbar-form .input-compact {
  min-width: 130px;
}

.reports-page {
  display: grid;
  gap: 16px;
}

.report-builder {
  display: grid;
  gap: 16px;
}

.report-output {
  margin-top: 16px;
  display: grid;
  gap: 16px;
}

.report-chart {
  min-height: 260px;
}

.report-table {
  overflow-x: auto;
}

/* ── Report builder: two-column layout ── */
.report-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .report-layout {
    grid-template-columns: 1fr;
  }
  .report-sidebar {
    order: -1;
  }
}

.report-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.report-chart-wrap {
  min-height: 300px;
  padding: 16px;
  position: relative;
}

.report-chart-wrap canvas {
  max-height: 400px;
}

.report-empty-state {
  padding: 48px 16px;
  text-align: center;
}

/* ── Summary metric cards ── */
.report-summary-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.report-summary-card {
  flex: 1 1 140px;
  min-width: 120px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}

.report-summary-card-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.report-summary-card-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
}

/* ── Save bar ── */
.report-save-form {
  margin-top: 0;
}

.report-save-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow);
}

.report-save-bar .input {
  flex: 1;
}

/* ── Right sidebar ── */
.report-sidebar {
  display: grid;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: sticky;
  top: 64px;
  overflow: visible;
}

.rb-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.rb-section:last-child {
  border-bottom: none;
}

.rb-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.rb-section-header h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.rb-section-add {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--accent);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.rb-section-add:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Selected items list ── */
.rb-selected-list {
  display: grid;
  gap: 4px;
}

.rb-selected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--soft);
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
}

.rb-selected-item-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  padding: 0 2px;
  line-height: 1;
}

.rb-selected-item-remove:hover {
  color: var(--danger);
}

/* ── Picker popover ── */
.rb-picker-popover {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  max-height: 420px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
  z-index: 100;
  overflow: hidden;
}

.rb-picker-popover.is-open {
  display: flex;
  flex-direction: column;
}

.rb-picker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.rb-picker-search {
  flex: 1;
}

.rb-picker-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
}

.rb-picker-close:hover {
  color: var(--ink);
}

.rb-picker-body {
  overflow-y: auto;
  max-height: 340px;
  padding: 8px;
}

.rb-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  transition: background 0.1s;
}

.rb-picker-item:hover {
  background: var(--soft);
}

.rb-picker-item.is-selected {
  background: var(--accent-weak);
}

.rb-picker-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

/* ── Visualization selector ── */
.rb-viz-current {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.rb-viz-select {
  width: 100%;
}

/* ── Filters ── */
.rb-filters-active {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rb-filter-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line, #e2e8f0);
}

.rb-filter-row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.rb-filter-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.rb-filter-label {
  color: var(--muted);
  font-weight: 500;
  flex-shrink: 0;
}

.rb-filter-operator {
  flex: 1;
  min-width: 0;
  max-width: 120px;
}

.rb-filter-row-body {
  min-width: 0;
}

.rb-filter-row-body .rb-filter-input {
  width: 100%;
  box-sizing: border-box;
}

.rb-filter-input {
  flex: 1;
  min-width: 0;
}

.rb-filter-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rb-filter-remove svg {
  width: 14px;
  height: 14px;
}

.rb-filter-remove:hover {
  color: var(--danger);
}

/* ── Topbar layout for report builder ── */
.rb-topbar-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}

.rb-topbar-dates {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.rb-topbar-dates .input-compact {
  min-width: 120px;
}

.rb-topbar-dates .form-field-compact {
  margin-bottom: 0;
}

.rb-topbar-dates .form-label {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 2px;
}

.topbar-button-group {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* ── Report index: category grid ── */
.report-index-section {
  margin-bottom: 24px;
}

.report-index-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.report-index-section-header h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.report-index-section-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.report-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.report-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.report-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.report-card-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.report-card-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.report-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.report-card-cta {
  border: 2px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
}

.report-card-category {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.report-card-cta:hover {
  border-color: var(--accent);
  background: var(--accent-weak);
}

/* ── Report category filter pills ── */
.report-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.report-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.report-pill:hover {
  border-color: var(--pill-color, var(--accent));
  color: var(--pill-color, var(--accent));
}

.report-pill.is-active {
  background: var(--pill-color, var(--accent));
  border-color: var(--pill-color, var(--accent));
  color: #fff;
}

/* ── Scheduled reports mini-table ── */
.scheduled-mini-table {
  width: 100%;
  font-size: 13px;
}

.scheduled-mini-table th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.scheduled-mini-table td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
}

/* ── Scheduled reports full page ── */
.schedule-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.schedule-status-badge.enabled {
  background: #d1fae5;
  color: #065f46;
}

.schedule-status-badge.paused {
  background: #fef3c7;
  color: #92400e;
}

/* ── Dropdown (for export) ── */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dropdown-toggle::after {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.55;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
  min-width: 180px;
  z-index: 50;
  padding: 4px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0s linear 0.15s;
}

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -4px;
  right: -4px;
  height: 12px;
}

.dropdown-menu.is-open,
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0s;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
}

.dropdown-item:hover {
  background: var(--soft);
}

.dropdown-item-form {
  margin: 0;
  display: block;
}

.dropdown-item-form .dropdown-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.view-menu-item-form {
  margin: 0;
  display: block;
  width: 100%;
}

.view-menu-item-form .view-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink, #0f172a);
  font-size: 13px;
  line-height: 1.4;
  font-family: inherit;
  background: transparent;
  border: none;
  text-decoration: none;
  transition: background 0.1s ease;
  -webkit-appearance: none;
  appearance: none;
}

.view-menu-item-form .view-menu-item:hover {
  background: var(--soft, #f1f5f9);
}

.dropdown-item--danger {
  color: var(--danger);
}

.dropdown-item--danger:hover {
  background: #fef2f2;
}

.dropdown-divider {
  height: 1px;
  background: var(--border, #e2e8f0);
  margin: 4px 0;
}

.wf-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.wf-dropdown-item__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--muted, #64748b);
}

.wf-dropdown-item__icon svg {
  width: 16px;
  height: 16px;
}

.wf-dropdown-item__label {
  flex: 1;
  min-width: 0;
}

.form-stack {
  display: grid;
  gap: 16px;
}

.policy-rule-form-hint {
  margin: 0 0 8px;
  font-size: 13px;
}
.policy-rule-advanced {
  margin-top: 8px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 10px);
  overflow: hidden;
}
.policy-rule-advanced-summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #0f172a);
  padding: 10px 14px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface, #f8fafc);
  transition: background 0.15s;
}
.policy-rule-advanced-summary::-webkit-details-marker { display: none; }
.policy-rule-advanced-summary:hover {
  background: var(--line, #e2e8f0);
}
.policy-rule-advanced-chevron {
  display: inline-block;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  transition: transform 0.2s;
}
.policy-rule-advanced[open] .policy-rule-advanced-chevron {
  transform: rotate(-180deg);
}
.policy-rule-advanced-hint {
  margin-left: 2px;
  font-weight: normal;
  font-size: 12px;
}
.policy-rule-advanced .form-card { margin-top: 0; margin: 12px 14px 14px; }
.policy-rule-advanced .form-card:last-of-type { margin-bottom: 14px; }

.flash {
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  background: #ffffff;
  font-size: 14px;
}

.flash-notice {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #1e3a8a;
}

.flash-alert {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.modal {
  border: none;
  padding: 0;
  background: transparent;
}

.modal::backdrop {
  background: rgba(15, 23, 42, 0.4);
}

.modal-content {
  position: relative;
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
  padding: 20px;
  width: min(640px, 90vw);
}

.modal-content-wide, .modal-md {
  width: min(640px, 90vw);
}

dialog.landed-cost-modal {
  max-height: 92vh;
  overflow: hidden;
}
.landed-cost-modal .modal-body {
  max-height: min(60vh, 420px);
  overflow-y: auto;
}

/* ── Add vendor variant modal (two-step wizard) ── */
dialog.modal:has(.add-vendor-variant-modal) {
  max-height: 90vh;
  overflow: visible;
}

.add-vendor-variant-modal {
  width: min(720px, 94vw);
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: min(80vh, 640px);
  overflow: hidden;
}

.add-vendor-variant-modal .modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.add-vendor-variant-modal .modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.add-vendor-variant-modal .modal-header .muted {
  margin: 2px 0 0;
  font-size: 13px;
}

.add-vendor-variant-modal > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Steps */
.avv-step {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.avv-step-hidden {
  display: none !important;
}

/* Step 1: search box */
.avv-search-box {
  position: relative;
  padding: 16px 24px 12px;
  flex-shrink: 0;
}

.avv-search-icon {
  position: absolute;
  left: 38px;
  top: 28px;
  color: var(--muted);
  pointer-events: none;
}

.avv-search-input {
  width: 100%;
  padding: 10px 12px 10px 38px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.avv-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.avv-search-input::placeholder {
  color: var(--muted);
}

/* Step 1: results */
.avv-results-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px;
  min-height: 0;
}

.avv-results-wrap .data-table {
  margin: 0;
}

.avv-results-wrap .data-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}

.avv-th-check {
  width: 32px;
}

.avv-empty-state {
  padding: 32px 16px !important;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* Step footer (shared by both steps) */
.avv-step-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  gap: 12px;
  background: var(--panel);
}

.avv-step-actions {
  display: flex;
  gap: 8px;
}

.avv-selection-count {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

/* Step 2: selected summary */
.avv-selected-summary {
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}

.avv-summary-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--bg-dim, #f1f5f9);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.avv-summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--bg-dim, #f1f5f9);
  border-radius: var(--radius);
  min-width: 0;
}

.avv-summary-thumb {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--line);
}

.avv-summary-thumb-placeholder {
  background: var(--line);
}

.avv-summary-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.avv-summary-label {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avv-summary-sku {
  font-size: 12px;
  color: var(--muted);
}

/* Step 2: details form */
.avv-details-section {
  padding: 20px 24px;
  flex: 1;
  overflow-y: auto;
}

.avv-details-heading {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
}

.avv-details-desc {
  margin: 0 0 16px;
  font-size: 13px;
}

.avv-details-grid {
  grid-template-columns: repeat(2, 1fr);
}

.avv-details-grid .form-field:last-child:nth-child(odd) {
  grid-column: span 1;
}

/* Replenishment recommendation detail modal only */
.rec-detail-modal-content {
  width: min(1200px, 95vw);
}

.rec-detail-modal-content .cv-trend {
  padding-top: 0;
}

/* ── Recommendation modal skeleton loader ── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

.skeleton {
  background: var(--color-gray-100, #e5e7eb);
  border-radius: 4px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-text {
  height: 14px;
}

.skeleton-block {
  width: 100%;
}

.rec-modal-skeleton-content {
  max-height: 88vh;
  overflow: hidden;
}

.rec-modal-skeleton-content .modal-header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

.rec-modal-skeleton-thumbnail {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  flex-shrink: 0;
}

.rec-modal-skeleton-title {
  width: 200px;
  margin-bottom: 8px;
}

.rec-modal-skeleton-sku {
  width: 100px;
}

.rec-modal-skeleton-body {
  padding: 20px 0 0;
}

.rec-modal-skeleton-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.rec-modal-skeleton-stat {
  height: 72px;
  border-radius: 6px;
}

.rec-modal-skeleton-chart {
  height: 180px;
  border-radius: 6px;
  margin-bottom: 24px;
}

.rec-modal-skeleton-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rec-modal-skeleton-row {
  height: 14px;
}

/* ── Sales history tab: title truncation & outlier rows ── */
.sales-history-table th.col-title,
.sales-history-table td.col-title {
  max-width: 220px;
  min-width: 80px;
}

.sales-title-truncate {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 220px;
}

.sales-row-outlier {
  background: #fffbeb;
}

.sales-outlier-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Recalculate button in modal header ── */
.rec-recalculate-btn {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  padding: 5px 12px;
  white-space: nowrap;
  border-radius: 8px;
}
.rec-recalculate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Stale banner ── */
.rec-stale-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  color: #92400e;
  font-size: 13px;
  margin: -4px 0 12px;
  padding: 8px 14px;
}
.rec-stale-recalculate-btn {
  background: none;
  border: 1px solid #d97706;
  border-radius: 4px;
  color: #b45309;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  white-space: nowrap;
}
.rec-stale-recalculate-btn:hover {
  background: #fef3c7;
}

/* ── Recalculate overlay ── */
.rec-recalculate-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: inherit;
}
.rec-recalculate-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.rec-recalculate-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: rec-spin 0.7s linear infinite;
}
@keyframes rec-spin {
  to { transform: rotate(360deg); }
}
.rec-recalculate-status {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

/* ── Navigation loading state (prev/next between recommendations) ── */
.rec-nav-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: inherit;
}

/* ── Recommended qty change highlight ── */
@keyframes rec-qty-flash {
  0%   { background: #d1fae5; color: #065f46; }
  80%  { background: #d1fae5; color: #065f46; }
  100% { background: transparent; color: inherit; }
}
.rec-recommended-qty-value.rec-qty-changed {
  animation: rec-qty-flash 4s ease forwards;
  border-radius: 4px;
  padding: 0 4px;
}

/* ── Override quantity UI ── */
.rec-override-badge {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}
.rec-override-engine-num {
  font-weight: 600;
}
.rec-override-original-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.rec-override-expiry {
  font-size: 11px;
  margin-top: 3px;
}
.rec-override-edit-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  padding: 3px 5px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, border-color 0.15s;
}
.cv-card--accent:hover .rec-override-edit-btn,
.cv-card--accent .rec-override-edit-btn:focus {
  opacity: 1;
  border-color: var(--line);
}
.rec-override-edit-btn:hover {
  background: var(--surface);
  color: var(--ink);
}
.cv-card--accent {
  position: relative;
}
.rec-override-form {
  margin-top: 8px;
}
.rec-override-input {
  width: 80px;
  font-size: 16px;
  font-weight: 700;
  padding: 4px 8px;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  outline: none;
  text-align: center;
}
.rec-override-input:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.rec-override-form-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.rec-override-vendor-rules {
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.35;
}
.rec-override-conflict {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
}
.rec-override-conflict-msg {
  margin: 0 0 8px;
  font-size: 12px;
  color: #78350f;
  line-height: 1.4;
}
.rec-override-conflict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.rec-override-conflict-cancel {
  background: none;
  border: none;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 4px 6px;
}
.rec-override-conflict-cancel:hover {
  color: var(--ink);
}
.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover {
  color: var(--accent-dark, #4338ca);
}

/* ── Draft PO connected button group in modal header ── */
.rec-po-group {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 6px;
  background: var(--pp-surface-1, #fff);
  line-height: 1;
}
.rec-po-group__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text-secondary, #475569);
  background: var(--pp-surface-2, #f1f5f9);
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 5px 0 0 5px;
}
.rec-po-group__label svg {
  flex-shrink: 0;
  opacity: 0.55;
}
.rec-po-group__label:hover {
  color: var(--pp-primary, #2563eb);
  background: #eff6ff;
}
.rec-po-group__label:hover svg {
  opacity: 0.85;
}
.rec-po-group__btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  border-right: 1px solid var(--pp-border, #e2e8f0);
  color: var(--pp-text-primary, #1e293b);
}
.rec-po-group__btn:last-child {
  border-right: none;
  border-radius: 0 5px 5px 0;
}
.rec-po-group__btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.rec-po-group__btn--update {
  font-variant-numeric: tabular-nums;
}
.rec-po-group__btn--update:hover {
  background: #eff6ff;
  color: var(--pp-primary, #2563eb);
}
.rec-po-group__btn--add {
  color: var(--pp-primary, #2563eb);
  font-weight: 600;
}
.rec-po-group__btn--add:hover {
  background: #eff6ff;
}
.rec-po-group__btn--remove {
  color: var(--pp-text-tertiary, #94a3b8);
  padding: 4px 8px;
  font-size: 15px;
  line-height: 1;
}
.rec-po-group__btn--remove:hover {
  background: #fee2e2;
  color: var(--danger, #ef4444);
}

/* Tooltip for PO group segments */
.rec-po-group .has-tooltip {
  position: relative;
}
.rec-po-group .has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  background: #1e293b;
  color: #f8fafc;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  padding: 5px 9px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 50;
}
.rec-po-group .has-tooltip:hover::after,
.rec-po-group .has-tooltip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.btn-danger-outline {
  background: none;
  border-color: var(--danger, #ef4444);
  color: var(--danger, #ef4444);
}
.btn-danger-outline:hover {
  background: #fee2e2;
  border-color: #dc2626;
}
.btn-danger-outline:active {
  background: #fecaca;
}
.hidden {
  display: none !important;
}

/* PO show line items: product cell with info icon, inline qty edit */
.po-line-item-product-cell {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.po-line-item-product-cell > span {
  min-width: 0;
  flex: 1;
}

.po-line-item-product-title {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-line-item-product-cell .info-button {
  flex-shrink: 0;
  margin-top: 2px;
}

.po-line-item-qty-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.po-line-item-qty-input {
  width: 72px;
}

.po-line-item-unit-cost-form {
  display: inline-block;
}

.po-line-item-unit-cost-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.po-line-item-unit-cost-input {
  width: 80px;
}

.po-line-item-save-vv-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.po-line-item-save-vv-btn.is-hidden {
  display: none;
}

.po-line-item-custom-fields-cell {
  background: rgba(0, 0, 0, 0.02);
  vertical-align: top;
}

.po-line-item-cf-details {
  margin: 0;
}

.po-line-item-cf-summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted-color, #6b7280);
  user-select: none;
}

.po-line-item-cf-body {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.po-line-item-manual-review {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.po-line-item-manual-review .pill {
  flex-shrink: 0;
}
.po-line-item-review-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.po-line-item-review-actions .btn {
  margin: 0;
}

.po-line-item--needs-review {
  background: rgba(245, 158, 11, 0.06);
}
.po-line-item-review-badge {
  margin-top: 4px;
}

.inline-edit-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
.inline-edit-cell .inline-edit-input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.inline-edit-cell:hover .inline-edit-input,
.inline-edit-cell .inline-edit-input:focus {
  border-color: var(--line);
  background: var(--panel);
  outline: none;
  box-shadow: 0 0 0 1px var(--line);
}
.inline-edit-cell .inline-edit-input::placeholder {
  color: var(--muted);
}
.inline-edit-cell .btn-inline-save {
  flex-shrink: 0;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.inline-edit-cell .btn-inline-save:hover {
  background: var(--soft);
}
.inline-edit-cell .btn-inline-save.is-hidden {
  display: none;
}

/* Input group: grey addon (e.g. currency suffix) like Bootstrap */
.input-group {
  display: inline-flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}
.input-group .inline-edit-input,
.input-group input[type="number"] {
  border-radius: 6px 0 0 6px;
  margin-right: -1px;
}
.input-group--price {
  flex: 0 1 auto;
  max-width: 100%;
}
.input-group--price .inline-edit-input,
.input-group--price input[type="number"] {
  width: 5.5ch;
  min-width: 5.5ch;
  max-width: 5.5ch;
  box-sizing: content-box;
}
.input-group-addon {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0 6px 6px 0;
  margin-left: -1px;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.inline-edit-cell:hover .input-group-addon,
.input-group .inline-edit-input:focus + .input-group-addon,
.input-group input:focus + .input-group-addon {
  border-color: var(--line);
  background: var(--soft);
}
.po-line-item-unit-cost-row .input-group:hover .input-group-addon,
.po-line-item-unit-cost-row .input-group input:focus + .input-group-addon {
  border-color: var(--line);
  background: var(--soft);
}

.modal-sm {
  width: min(420px, 90vw);
}

.modal-content-framed {
  padding: 0;
  overflow: hidden;
}

.modal-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: #f1f5f9;
  border-bottom: 1px solid var(--line);
}

.modal-titlebar h2,
.modal-titlebar h3 {
  margin: 0;
  font-size: 18px;
}

.modal-body {
  padding: 16px;
}

.modal-body .muted {
  margin-top: 0;
  margin-bottom: 12px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

/* ── Cycle count modal ─────────────────────────────────────── */

.cycle-count-modal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

.cycle-count-modal .vp-chip {
  max-width: 240px;
}

.cycle-count-modal .clp-done,
.cycle-count-modal .vp-done {
  display: none;
}

/* ── Cycle count scope toggle ─────────────────────── */

.cc-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 8px;
  overflow: hidden;
  background: var(--pp-surface-2, #f8fafc);
}

.cc-toggle__btn {
  flex: 1;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pp-text-muted, #475569);
  background: transparent;
  border: none;
  border-right: 1px solid var(--pp-border, #e2e8f0);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.cc-toggle__btn:last-child {
  border-right: none;
}

.cc-toggle__btn:hover:not(.is-active) {
  background: var(--pp-line, #e2e8f0);
}

.cc-toggle__btn.is-active {
  background: var(--pp-accent, #6366f1);
  color: #fff;
  font-weight: 600;
}

/* ── Cycle count collapsible sections ───────────────── */

.cc-section {
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 8px;
  margin-bottom: 16px;
}

.cc-section > summary,
.cc-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  cursor: pointer;
  user-select: none;
  list-style: none;
  background: var(--pp-surface-2, #f8fafc);
  border-radius: 8px;
}

.cc-section[open] > summary {
  border-bottom: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 8px 8px 0 0;
}

.cc-section > summary::-webkit-details-marker {
  display: none;
}

.cc-section > summary::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.cc-section[open] > summary::after {
  transform: rotate(180deg);
}

.cc-section > summary .cc-section__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pp-line, #e2e8f0);
  font-size: 11px;
  font-weight: 600;
  color: var(--pp-text-muted, #475569);
  margin-left: 8px;
  margin-right: auto;
}

.cc-section__body {
  padding: 14px;
}

.cc-divider {
  border: none;
  border-top: 1px solid var(--pp-border, #e2e8f0);
  margin: 16px 0;
}

/* ── Cycle count index: location filter banner ───────────── */

.cc-location-banner {
  padding: 8px 16px;
  margin-bottom: 12px;
  background: var(--pp-surface-2, #f8fafc);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 8px;
  font-size: 13px;
  color: var(--pp-text, #0f172a);
}

/* ── Cycle count index: My assigned counts ───────────────── */

.cc-my-counts-panel {
  border-left: 4px solid var(--accent, #6366f1);
}

.cc-my-count-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--pp-border, #e2e8f0);
}
.cc-my-count-row:first-child { border-top: none; }

.cc-my-count-row__info { flex: 1; min-width: 0; }

.cc-my-count-row__name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 14px;
}

.cc-my-count-row__meta { margin-top: 2px; }

.cc-my-count-row__progress { width: 140px; flex-shrink: 0; }

.cc-my-count-row__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .cc-my-count-row { flex-wrap: wrap; }
  .cc-my-count-row__progress { width: 100%; order: 3; }
  .cc-my-count-row__actions { order: 2; }
}

/* ── Cycle count index: filter tabs ──────────────────────── */

.cc-filter-tabs {
  display: flex;
  gap: 4px;
  padding: 0 0 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cc-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pp-text-muted, #475569);
  background: var(--pp-surface-2, #f8fafc);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.12s ease;
}

.cc-filter-tab:hover {
  background: #eef2ff;
  color: var(--pp-text, #0f172a);
}

.cc-filter-tab.is-active {
  background: var(--accent-weak, #eef2ff);
  color: var(--accent, #6366f1);
  border-color: var(--accent, #6366f1);
  font-weight: 600;
}

.cc-filter-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pp-line, #e2e8f0);
  font-size: 11px;
  font-weight: 600;
}

.cc-filter-tab.is-active .cc-filter-tab__count {
  background: var(--accent, #6366f1);
  color: #fff;
}

/* ── Cycle count index: empty state actions ──────────────── */

.cc-empty-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Cycle count show: summary panel ─────────────────────── */

.cc-summary-panel .panel-header {
  border-bottom: 1px solid var(--pp-border, #e2e8f0);
}

.cc-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0;
  padding: 16px;
}

.cc-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
}

.cc-meta-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--pp-text-muted, #64748b);
}

.cc-meta-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--pp-text, #0f172a);
}

.cc-inline-assign {
  display: inline-block;
}

.cc-inline-assign .input-compact {
  min-width: 160px;
}

/* ── Cycle count show: progress section ──────────────────── */

.cc-progress-section {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--pp-border, #e2e8f0);
}

.cc-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.cc-progress-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--pp-text, #0f172a);
}

.cc-progress-pct {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #6366f1);
}

.cc-progress-bar-full {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.cc-progress-bar-full__fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #818cf8);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* ── Cycle count show: notes callout ─────────────────────── */

.cc-notes-callout {
  margin: 0 16px 16px;
  padding: 10px 14px;
  background: var(--pp-surface-2, #f8fafc);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 8px;
  font-size: 13px;
  color: var(--pp-text, #0f172a);
}

/* ── Cycle count show: start panel ───────────────────────── */

.cc-start-panel .cc-start-panel__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
}

@media (max-width: 640px) {
  .cc-start-panel .cc-start-panel__content {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Cycle count show: lines header + controls ───────────── */

.cc-lines-header { border-bottom: none; padding-bottom: 0; }

.cc-lines-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 12px;
  flex-wrap: wrap;
}

.cc-line-filters {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cc-line-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pp-text-muted, #475569);
  background: var(--pp-surface-2, #f8fafc);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.12s ease;
}

.cc-line-filter-chip:hover {
  background: #eef2ff;
  color: var(--pp-text, #0f172a);
}

.cc-line-filter-chip.is-active {
  background: var(--accent-weak, #eef2ff);
  color: var(--accent, #6366f1);
  border-color: var(--accent, #6366f1);
  font-weight: 600;
}

.cc-line-filter-chip__count {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
}

.cc-line-filter-chip.is-active .cc-line-filter-chip__count {
  opacity: 1;
}

.cc-lines-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* ── Cycle count show: SKU cell with thumbnail ───────────── */

.cc-sku-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-sku-cell__thumb {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f1f5f9;
}

.cc-sku-cell__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Cycle count show: variance row highlight ────────────── */

.cc-line-row--variance {
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
}

.cc-lines-table .cc-line-row--variance td:first-child {
  padding-left: 13px;
}

/* ── Cycle count show: line table input sizing ───────────── */

.cc-lines-table .input-compact[type="number"] { width: 76px; }
.cc-lines-table .input-compact[type="text"]   { width: 120px; }

@media (max-width: 768px) {
  .cc-lines-table .input-compact[type="text"] { width: 80px; }
}

/* ── Cycle count show: workflow CTA (sticky footer) ──────── */

.cc-workflow-cta {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: #fff;
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  margin: 12px 0;
}

.cc-workflow-cta__info {
  font-size: 14px;
  color: var(--pp-text, #0f172a);
}

@media (max-width: 640px) {
  .cc-workflow-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* ── Cycle count show: exceptions panel ──────────────────── */

.cc-exceptions-panel .panel-header {
  border-bottom: 1px solid var(--pp-border, #e2e8f0);
}

.cc-exceptions-more {
  padding: 12px 16px;
  text-align: center;
  border-top: 1px solid var(--pp-border, #e2e8f0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rec-nav-arrows {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 4px;
  padding-right: 10px;
  border-right: 1px solid var(--border);
}

.rec-nav-arrows .icon-button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.rec-nav-arrows .icon-button:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.rec-nav-counter {
  font-size: 12px;
  min-width: 40px;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

/* ── Keyboard shortcuts hints ── */
.rec-kbd-hints-wrapper {
  position: relative;
}
.rec-kbd-hints-toggle {
  color: var(--muted);
  transition: color 0.15s;
}
.rec-kbd-hints-toggle:hover {
  color: var(--ink);
}
.rec-kbd-hints-popover {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 10px 14px;
  min-width: 200px;
  white-space: nowrap;
}
.rec-kbd-hints-wrapper:hover .rec-kbd-hints-popover,
.rec-kbd-hints-wrapper:focus-within .rec-kbd-hints-popover {
  display: block;
}
.rec-kbd-hints-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.rec-kbd-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--ink);
}
.rec-kbd-row kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  background: var(--surface, #f1f5f9);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.rec-kbd-row span {
  color: var(--muted);
}

.modal-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.metric-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.metric-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

.metric-label {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.metric-value {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.metric-subtext {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.modal-header-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.modal-header-thumbnail {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--surface);
}

.modal-header-product-name {
  margin: 0 0 2px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-header-sku {
  margin: 0;
  font-size: 13px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

/* ── Vendor-variant modal sections ── */
.vv-modal-section {
  min-width: 0;
}
.vv-modal-section + .vv-modal-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.vv-modal-section-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.vv-modal-section-desc {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.vv-modal-hint {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.input--static {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
}

.modal-close-top {
  position: absolute;
  top: 12px;
  right: 12px;
}

.scale-modal-inner .modal-header {
  margin-bottom: 16px;
}

.scale-preview-table {
  max-height: 280px;
  overflow: auto;
  margin-bottom: 16px;
}

.scale-preview-summary {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--soft);
  border-radius: var(--radius);
  font-size: 14px;
}

.scale-preview-summary p {
  margin: 4px 0;
}

.scale-preview-row-removed {
  opacity: 0.6;
}

.scale-po-modal .modal-content {
  width: min(720px, 92vw);
}

.variant-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  background: #f1f5f9;
}

.variant-thumb-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}

.variant-picker-pagination {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.variant-picker-pagination__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.variant-picker-pagination__text {
  font-size: 13px;
  color: var(--muted);
}

.variant-picker-pagination__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-list {
  margin: 0;
  display: grid;
  gap: 12px;
}

.detail-callout {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  font-size: 13px;
}

.detail-callout .formula-line {
  margin-top: 6px;
  color: #334155;
  font-family: "SF Mono", "SFMono-Regular", ui-monospace, "Cascadia Code", "Fira Mono", "Consolas", "Liberation Mono", "Menlo", monospace;
  font-size: 12px;
}

.metric-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.metric-kpi {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}

.metric-label {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.metric-value {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.inline-unit {
  font-size: 12px;
  color: var(--muted);
  margin-left: 4px;
  text-transform: none;
  letter-spacing: normal;
}

.modal-section {
  margin-bottom: 20px;
}

.section-title {
  margin: 0 0 12px;
  font-size: 16px;
}

.recalc-form {
  display: grid;
  gap: 12px;
}

.recalc-form .form-grid {
  margin-top: 4px;
}

.recalc-form .modal-actions {
  align-items: center;
  justify-content: flex-end;
  align-self: flex-start;
  grid-column: 1 / -1;
}

.modal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.tab-button {
  border: 1px solid var(--line);
  background: #ffffff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  color: #475569;
}

.tab-button.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-weak);
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.detail-table th,
.detail-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  vertical-align: top;
}

.detail-table th {
  text-align: left;
  background: #f8fafc;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--muted);
}

.detail-table .detail-group td {
  background: #f8fafc;
  font-weight: 600;
  color: #0f172a;
  border-bottom: 1px solid var(--line);
}

.detail-table .detail-highlight td {
  background: #eef2ff;
  font-weight: 600;
}

/* ═══ Calculation tab (cv-*) ═══ */
.cv {
  max-width: 100%;
  padding: 0 0 8px;
}

/* Metric cards row */
.cv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.cv-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.cv-card--accent {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.cv-card-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cv-card--accent .cv-card-label {
  color: #4338ca;
}
.cv-card-value {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.cv-card--accent .cv-card-value {
  color: var(--accent);
  font-size: 26px;
  font-weight: 800;
}
.cv-card-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.cv-card-purchase-conversion {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.cv-card-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
}
.cv-card-badge--danger {
  background: #fee2e2;
  color: #991b1b;
}
.cv-card-badge--warn {
  background: #fef3c7;
  color: #92400e;
}

/* Formula strip */
.cv-formula {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 14px;
  margin-bottom: 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  flex-wrap: wrap;
}
.cv-formula-term {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.cv-formula-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cv-formula-lbl {
  font-size: 9px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cv-formula-op {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  padding: 0 1px;
}
.cv-formula-eq {
  font-size: 16px;
  font-weight: 300;
  color: var(--muted);
  padding: 0 3px;
}
.cv-formula-term--result .cv-formula-num {
  font-size: 18px;
  color: var(--accent);
}

/* Metric rows */
.cv-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}

.cv-row {
  border-bottom: 1px solid var(--line);
}
.cv-row:last-child {
  border-bottom: none;
}
.cv-row-head {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s;
}
.cv-row-head:hover {
  background: #f8fafc;
}
.cv-row-head::-webkit-details-marker {
  display: none;
}
.cv-row-head--flat {
  cursor: default;
}
.cv-row-head--flat:hover {
  background: transparent;
}

.cv-row-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.cv-row-chevron::before {
  content: "›";
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}
.cv-row[open] > summary .cv-row-chevron,
.cv-assumptions[open] > summary .cv-row-chevron {
  transform: rotate(90deg);
  color: var(--ink);
}

.cv-row--flat .cv-row-head {
  padding-left: 44px;
}

.cv-row-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.cv-row-num {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cv-row-num small {
  font-weight: 500;
  color: var(--muted);
  font-size: 12px;
  margin-left: 3px;
}

.cv-row-body {
  padding: 0 16px 14px 44px;
}

/* Detail sub-rows (label : value) */
.cv-detail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed #eef0f4;
  font-size: 12px;
}
.cv-detail:last-child {
  border-bottom: none;
}
.cv-detail > span:first-child {
  color: var(--muted);
  font-weight: 500;
}
.cv-detail > span:last-child {
  color: var(--ink);
  font-weight: 500;
  text-align: right;
}

/* Assumptions */
.cv-assumptions {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  overflow: hidden;
}
.cv-assumptions-head {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.cv-assumptions-head::-webkit-details-marker {
  display: none;
}
.cv-assumptions-body {
  padding: 4px 16px 14px 44px;
}

/* Safety stock formula mini-strip */
.cv-ss-formula {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #f0f4f8;
  border-radius: 8px;
  flex-wrap: wrap;
}
.cv-ss-term {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.cv-ss-term small {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
}
.cv-ss-op {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
}
.cv-ss-term--result {
  font-size: 17px;
  color: var(--accent);
}

/* Detail row variants */
.cv-detail-divider {
  border-top: 1px dashed #dde1e8;
  margin: 8px 0;
}
.cv-detail--label > span:first-child {
  color: var(--ink);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cv-detail--indent {
  padding-left: 12px;
}
.cv-detail--total > span:last-child {
  font-weight: 700;
}

/* Inline callout in cv-row-body */
.cv-callout {
  margin: 8px 0 2px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
.cv-callout--warn {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

/* Forecast confidence card */
.cv-confidence {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}
.cv-confidence-head {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.cv-confidence-head::-webkit-details-marker {
  display: none;
}
.cv-confidence-head:hover {
  background: #f8fafc;
}
.cv-confidence-label {
  flex: 1;
}
.cv-confidence-mae {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.cv-confidence-body {
  padding: 4px 16px 14px 44px;
}
.pill-sm {
  font-size: 10px;
  padding: 2px 8px;
}

/* What-if analysis card */
.cv-whatif {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}
.cv-whatif-head {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.cv-whatif-head::-webkit-details-marker {
  display: none;
}
.cv-whatif-head:hover {
  background: #f8fafc;
}
.cv-whatif-label {
  flex: 1;
}
.cv-whatif-hint {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
.cv-whatif-body {
  padding: 4px 16px 14px 44px;
}
.cv-whatif-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cv-whatif-header {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cv-whatif-header span {
  flex: 1;
  text-align: center;
}
.cv-whatif-header span:first-child {
  text-align: left;
}
.cv-whatif-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px dashed #eef0f4;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.cv-whatif-row:last-child {
  border-bottom: none;
}
.cv-whatif-row span {
  flex: 1;
  text-align: center;
}
.cv-whatif-row span:first-child {
  text-align: left;
}
.cv-whatif-row--current {
  background: #f0f7ff;
  margin: 0 -16px;
  padding: 7px 16px;
  border-radius: 4px;
  font-weight: 700;
}

/* Mini sparkline in assumptions */
.cv-monthly-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  padding: 4px 0;
}
.cv-spark-bar {
  flex: 1;
  background: var(--accent);
  opacity: 0.35;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: opacity 0.15s;
}
.cv-spark-bar:hover {
  opacity: 0.7;
}
.cv-spark-labels {
  display: flex;
  gap: 3px;
  font-size: 9px;
  color: var(--muted);
  text-align: center;
}
.cv-spark-labels span {
  flex: 1;
  text-align: center;
}

/* Two-column layout for calculation tab */
.cv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.cv-grid-left {
  min-width: 0;
}
.cv-grid-right {
  min-width: 0;
}
@media (max-width: 900px) {
  .cv-grid {
    grid-template-columns: 1fr;
  }
}

/* Inline sales trend chart (Chart.js canvas) */
.cv-trend {
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--line);
}
.cv-trend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.cv-trend-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.cv-trend-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.cv-trend-granularity {
  width: auto;
  min-width: 90px;
}
.cv-trend-caption {
  font-size: 11px;
  margin-top: 6px;
}

/* Demand / forecast context cards */
.cv-context {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.cv-context + .cv-context {
  margin-top: 6px;
}
.cv-context-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  user-select: none;
}
.cv-context-head::-webkit-details-marker {
  display: none;
}
.cv-context-head:hover {
  background: #f8fafc;
}
.cv-context-label {
  flex: 1;
}
.cv-context-hint {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.cv-context-body {
  padding: 2px 16px 14px 44px;
}
.cv-context[open] > summary .cv-row-chevron {
  transform: rotate(90deg);
}

/* Muted num variant for flat rows */
.cv-row-num--muted {
  font-weight: 500;
  color: var(--muted);
  font-size: 12px;
}

.placeholder-card {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 16px;
  background: #fafafa;
}

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #111827;
}

.checkbox-inline input {
  width: 16px;
  height: 16px;
}

.forecast-chart {
  height: 280px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.forecast-chart-caption {
  overflow-wrap: break-word;
  max-width: 100%;
}

.forecast-table {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.forecast-table-title {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.data-table-compact th,
.data-table-compact td {
  padding: 8px 12px;
  font-size: 12px;
}

.text-right {
  text-align: right;
}

.detail-list > div {
  display: grid;
  gap: 4px;
}

.detail-list dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.detail-list dd {
  margin: 0;
  font-weight: 600;
}

/* detail-list modifiers */
.detail-list--horizontal div {
  grid-template-columns: 140px 1fr;
  gap: 8px;
  align-items: baseline;
}
.detail-list--horizontal dt {
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--muted);
}

.detail-list--divided > div {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.detail-list--divided > div:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.long-text {
  margin: 0;
  color: #334155;
  line-height: 1.5;
  word-break: break-word;
}

.code-block {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  font-size: 12px;
  overflow-x: auto;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #0f172a;
  color: #e2e8f0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 50;
}

.toast[data-variant="error"] {
  background: #991b1b;
}

.toast[data-variant="warning"] {
  background: #92400e;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 1100px) {
  .grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-with-feed {
    grid-template-columns: 1fr;
  }

  .page-activity-feed {
    position: static;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .detail-layout {
    grid-template-columns: 1fr;
  }

  .detail-sidebar {
    position: static;
  }
}

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
  }

  .main {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-field-wide {
    grid-column: span 1;
  }
}

.panel-body {
  display: grid;
  gap: 12px;
}

.wizard-header {
  padding: 2px 0 4px;
  margin-bottom: 4px;
}

.wizard-steps {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0;
  justify-content: space-between;
  width: 100%;
}

.wizard-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  color: var(--muted);
  flex: 1 1 0;
  min-width: 0;
}

.wizard-step.is-active {
  background: var(--accent-weak);
  color: var(--ink);
  border-color: #c7d2fe;
}

.wizard-step.is-complete {
  background: #e2f3ff;
  color: var(--ink);
  border-color: #bae6fd;
}

.wizard-step-index {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e2e8f0;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 13px;
  color: #334155;
}

.wizard-step.is-active .wizard-step-index {
  background: var(--accent);
  color: #fff;
}

.wizard-step.is-complete .wizard-step-index {
  background: #0ea5e9;
  color: #fff;
}

.wizard-step-title {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 2px;
}

.wizard-step-sub {
  font-size: 10px;
  color: inherit;
}

.wizard-step-line {
  height: 2px;
  flex: 1 1 0;
  background: var(--line);
  border-radius: 999px;
}

.wizard-progress {
  display: none;
}

.wizard-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  border-radius: 999px;
}

.progress-bar {
  background: #e5e7eb;
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.progress-bar-fill {
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  width: 100%;
  height: 100%;
}

.progress-bar--indeterminate .progress-bar-fill {
  width: 40%;
  min-width: 80px;
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.hidden { display: none !important; }

.wizard-actions {
  margin-top: 12px;
}

.wizard-actions-split {
  justify-content: space-between;
}

.wizard-actions-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* PO builder step 1: top suppliers as cards */
.po-build-suppliers-section {
  margin-bottom: 24px;
}
.po-build-suppliers-heading {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}
.po-build-suppliers-sub {
  margin: 0 0 12px;
  font-size: 13px;
}
.po-build-supplier-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.po-build-supplier-card-wrap {
  margin: 0;
}
.po-build-supplier-card {
  display: block;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 10px);
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #0f172a);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.po-build-supplier-card:hover {
  background: var(--surface, #f1f5f9);
  border-color: var(--accent, #3b82f6);
}
.po-build-supplier-card-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.po-build-other-suppliers {
  margin-top: 0;
}

.is-hidden {
  display: none !important;
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pill-list li {
  background: #f3f4f6;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}

/* ══════════════════════════════════════════════════════════
   WORKFLOW BUILDER — full-screen canvas mode
   ══════════════════════════════════════════════════════════ */

/* ── full-screen layout when builder is active ──────────── */
body[data-workflow-builder] { background: #fff !important; padding: 0 !important; --shell-gutter: 0px; }
body[data-workflow-builder] .app-rail { display: none !important; }
/* The rail is hidden in builder mode, so the 56px left margin that
   `.super-shell .app-shell` carries (to make room for the rail) leaves
   a 56px gutter showing the body background. Reset it so the canvas
   sits flush against the viewport edge. */
body[data-workflow-builder] .super-shell .app-shell,
body[data-workflow-builder] .app-shell { margin-left: 0 !important; padding: 0 !important; background: #fff; }
body[data-workflow-builder] .sidebar { display: none !important; }
body[data-workflow-builder] .sidebar-corner { display: none !important; }
body[data-workflow-builder] .sidebar-hover-zone { display: none !important; }
body[data-workflow-builder] .app-sidebar-toggle { display: none !important; }
body[data-workflow-builder] .header-bar { display: none !important; }
/* Same treatment for the Builder shell — when the workflow editor
   takes over, the Builder sidebar and page-shell padding must
   collapse so the canvas can run flush to the viewport edges. The
   workflow editor relies on its own `.topbar` content (wf-header
   with Save / Publish / Close), so we deliberately do NOT hide
   .topbar here — the existing `body[data-workflow-builder] .topbar`
   rule below restyles it. */
body[data-workflow-builder] .builder-page-shell { margin-left: 0 !important; padding-top: 0 !important; height: 100vh !important; overflow: hidden; }
body[data-workflow-builder] .builder-shell { grid-template-columns: 1fr !important; border-radius: 0 !important; height: 100vh !important; }
body[data-workflow-builder] .builder-sidebar { display: none !important; }
body[data-workflow-builder] .builder-main { border-radius: 0 !important; background: #fff !important; overflow: hidden !important; }
body[data-workflow-builder] .builder-main > .content { padding: 0 !important; }
body[data-workflow-builder] .main { min-height: 100vh; border-radius: 0 !important; background: #fff; }
body[data-workflow-builder] .content { padding: 0; overflow: hidden; }
body[data-workflow-builder] .topbar { border-bottom: 1px solid #e2e8f0; padding: 0; height: 52px; border-radius: 0; }
body[data-workflow-builder] .flash { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 100; min-width: 300px; }
body[data-workflow-builder] .toast { z-index: 200; }
.toast.wf-toast { display: flex; align-items: center; gap: 7px; pointer-events: auto; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.toast.wf-toast--error { background: #991b1b; }
.toast.wf-toast--success { background: #166534; }

/* ── workflow header bar ────────────────────────────────── */
.wf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 16px;
}
.wf-header__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.wf-header__name {
  font-weight: 600;
  font-size: 14px;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}
.wf-header__name--editable {
  padding: 3px 6px;
  margin: -3px -6px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: text;
  outline: none;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.wf-header__name--editable:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
}
.wf-header__name--editable:focus {
  background: #fff;
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.25);
  overflow: visible;
  text-overflow: clip;
}
.wf-header__badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.wf-header__badge--draft {
  background: #f1f5f9;
  color: #64748b;
}
.wf-header__badge--active {
  background: #dcfce7;
  color: #16a34a;
}
/* Pill that surfaces "you have saved changes that aren't yet
   published" in the workflow / dashboard editors. Amber so the user
   notices it without it screaming "error" — there's nothing wrong,
   the runtime just isn't using these edits yet. */
.wf-header__badge--unpublished {
  background: #fef3c7;
  color: #b45309;
  cursor: help;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wf-header__badge--unpublished::before {
  content: "•";
  color: #d97706;
  font-size: 14px;
  line-height: 1;
}

/* Publish-state pill — three mutually exclusive states (published /
   draft / dirty) that mirror what the Save and Publish buttons can
   actually do right now. The dot color carries the meaning at a
   glance; the label is for full clarity. */
.wf-publish-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.wf-publish-state__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}
.wf-publish-state--published {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}
.wf-publish-state--published .wf-publish-state__dot { background: #16a34a; }
.wf-publish-state--draft {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.wf-publish-state--draft .wf-publish-state__dot { background: #d97706; }
.wf-publish-state--dirty {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}
.wf-publish-state--dirty .wf-publish-state__dot {
  background: #dc2626;
  /* Subtle pulse so unsaved-changes state catches the eye without
     being annoying — kicks in immediately on the first edit. */
  animation: wf-publish-pulse 1.6s ease-in-out infinite;
}
@keyframes wf-publish-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* Disabled state for our outline / primary buttons so the muted
   look is consistent across Save / Publish / Turn on. */
.wf-header__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.wf-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-header__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .12s ease;
}
.wf-header__btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.wf-header__btn--outline { background: #fff; }
.wf-header__btn--primary { background: #18181b; color: #fff; border-color: #18181b; }
.wf-header__btn--primary:hover { background: #27272a; }
.wf-header__btn--green { background: #16a34a; color: #fff; border-color: #16a34a; }
.wf-header__btn--green:hover { background: #15803d; }
.wf-header__btn svg { flex-shrink: 0; }
.wf-header__close {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  color: #64748b;
  text-decoration: none;
  transition: all .12s ease;
}
.wf-header__close:hover { background: #f1f5f9; color: #1e293b; }

/* ── dropdown ───────────────────────────────────────────── */
.wf-header__dropdown { position: relative; }
.wf-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 10px 25px rgba(0,0,0,.1);
  z-index: 50;
}
.wf-dropdown.is-open { display: block; }
.wf-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  font-size: 13px;
  color: #334155;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.wf-dropdown__item:hover { background: #f1f5f9; }
.wf-dropdown__item:disabled { opacity: 0.4; cursor: default; }
.wf-dropdown__item:disabled:hover { background: none; }
.wf-dropdown__item--danger { color: #dc2626; }
.wf-dropdown__item--danger:hover { background: #fef2f2; }
.wf-dropdown__item svg { flex-shrink: 0; }
.wf-dropdown__sep { border: none; border-top: 1px solid #f1f5f9; margin: 4px 0; }

/* ── rename modal ───────────────────────────────────────── */
.wf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.3);
  display: grid;
  place-items: center;
  /* See note on .wf-modal-backdrop — modals always sit above the side
     menu, global header, and takeover overlays. */
  z-index: 2147483600;
}
.wf-modal-overlay.is-hidden { display: none; }
.wf-modal {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.wf-modal h3 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.wf-modal .input { width: 100%; }
.wf-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ── canvas (full-viewport) ─────────────────────────────── */
.wf-canvas {
  position: relative;
  height: calc(100vh - 52px);
  overflow: hidden;
  background:
    radial-gradient(circle, #d4d8dd 0.8px, transparent 0.8px);
  background-size: 20px 20px;
  background-color: #f8fafc;
  cursor: grab;
}
.wf-canvas.is-panning { cursor: grabbing; }
.wf-canvas.is-panning * { cursor: grabbing !important; user-select: none !important; }
.wf-canvas__graph {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 32px 120px;
  min-height: 100%;
  min-width: fit-content;
  will-change: transform;
  user-select: none;
}

/* ── zoom / recenter toolbar (bottom-left of canvas) ──── */
.wf-zoom {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
  z-index: 15;
  user-select: none;
}
.wf-zoom__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: #475569;
  border-radius: 6px;
  cursor: pointer;
  transition: background 80ms, color 80ms;
}
.wf-zoom__btn:hover { background: #f1f5f9; color: #0f172a; }
.wf-zoom__btn:active { background: #e2e8f0; }
.wf-zoom__btn--recenter { margin-left: 4px; border-left: 1px solid #e2e8f0; border-radius: 0 6px 6px 0; padding-left: 6px; }
.wf-zoom__level {
  min-width: 40px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}

/* ── canvas-wide validation issues panel ────────────────
   Floating top-right pill that appears whenever the canvas validator
   detects one or more invalid variable references. Click to expand a
   list grouped by node — each row is clickable and selects that node
   so the user can jump straight to the broken config. */
.wf-canvas-issues {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 15;
  user-select: none;
  max-width: 360px;
}
/* Slide the pill out from under the right-side inspector panel when
   it's open — same trick as `.fl-ai-preview-bar` above. Keeps the
   issues pill visible at all times so the user can always tell at a
   glance whether the canvas is healthy. */
.wf-canvas:has(.wf-panel:not(.is-hidden)) .wf-canvas-issues {
  right: 526px; /* 510 panel width + 16 existing inset */
}
.wf-canvas-issues__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
  transition: background 120ms, border-color 120ms;
}
.wf-canvas-issues__pill:hover { background: #fee2e2; border-color: #fca5a5; }
.wf-canvas-issues__pill svg { color: #ef4444; }
.wf-canvas-issues__chevron { transition: transform 120ms; }
.wf-canvas-issues[aria-expanded="true"] .wf-canvas-issues__chevron { transform: rotate(180deg); }
.wf-canvas-issues__list {
  margin-top: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}
.wf-canvas-issues__group {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 80ms;
}
.wf-canvas-issues__group + .wf-canvas-issues__group { border-top: 1px solid #f1f5f9; }
.wf-canvas-issues__group:hover { background: #fef2f2; }
.wf-canvas-issues__group-title {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.wf-canvas-issues__count {
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.wf-canvas-issues__issue {
  font-size: 11px;
  color: #475569;
  line-height: 1.4;
  margin-top: 3px;
  padding-left: 8px;
  border-left: 2px solid #fecaca;
  word-break: break-all;
}
.wf-canvas-issues__issue code {
  background: #fee2e2;
  color: #b91c1c;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 10.5px;
}

/* Inspector banner — listed at the top of the right-side node panel
   when the currently selected node has validation issues. Mirrors the
   tone of the canvas-wide pill so the language and color are
   consistent across both surfaces. */
.wf-panel__issue-banner {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.wf-panel__issue-banner-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #b91c1c;
  margin-bottom: 6px;
}
.wf-panel__issue-banner-title svg { color: #ef4444; flex-shrink: 0; }
.wf-panel__issue-banner-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wf-panel__issue-banner-list li {
  font-size: 11.5px;
  color: #7f1d1d;
  line-height: 1.4;
}
.wf-panel__issue-banner-list code {
  background: #fee2e2;
  color: #991b1b;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.wf-panel__issue-banner-loc {
  color: #94a3b8;
  font-size: 10.5px;
  margin-left: 4px;
}

/* ── right-side panels ─────────────────────────────────── */
.wf-panel {
  position: fixed;
  top: 52px;
  right: 0;
  width: 510px;
  height: calc(100vh - 52px);
  background: #fff;
  border-left: 1px solid #e2e8f0;
  z-index: 20;
  overflow-y: auto;
  padding: 16px;
  box-shadow: -4px 0 20px rgba(0,0,0,.05);
}
.wf-panel.is-hidden { display: none; }
.wf-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}
.wf-panel__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wf-panel__title { font-size: 15px; font-weight: 600; color: #1e293b; line-height: 1.3; }
.wf-panel__title-row { display: flex; align-items: center; gap: 4px; }
.wf-panel__help { display: inline-flex; align-items: center; }
.wf-panel__help:empty { display: none; }
.wf-panel__close {
  width: 28px; height: 28px;
  border: none; background: none; color: #94a3b8;
  border-radius: 6px; cursor: pointer; display: grid; place-items: center;
  flex: 0 0 auto;
}
.wf-panel__close:hover { background: #f1f5f9; color: #1e293b; }
.wf-panel__desc {
  font-size: 12px; color: #64748b; line-height: 1.4;
}
.wf-panel__desc:empty { display: none; }
.wf-panel__readonly {
  font-size: 13px; color: #1e293b; font-weight: 500;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.wf-panel__hint { font-size: 13px; color: #94a3b8; }

/* ── action catalog (side panel) ──────────────────────── */
.wf-action-catalog {
  position: fixed;
  top: 52px;
  right: 0;
  width: 380px;
  height: calc(100vh - 52px);
  background: #fff;
  border-left: 1px solid #e2e8f0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0,0,0,.06);
}
.wf-action-catalog.is-hidden { display: none; }
.wf-action-catalog .wf-panel__header { padding: 16px; margin: 0; border-bottom: 1px solid #e2e8f0; }
.wf-catalog__search { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; }
.wf-catalog__search .input { width: 100%; }
.wf-catalog__body { flex: 1; overflow-y: auto; padding: 8px; }
.wf-catalog__category {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: none;
  background: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background .1s ease;
}
.wf-catalog__category:hover { background: #f8fafc; }
.wf-catalog__cat-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: #f1f5f9; border-radius: 8px; color: #475569; flex-shrink: 0;
}
.wf-catalog__cat-icon svg { width: 18px; height: 18px; fill: currentColor; }
.wf-catalog__cat-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wf-catalog__cat-name { font-size: 13px; font-weight: 600; color: #1e293b; }
.wf-catalog__cat-count { font-size: 11px; color: #94a3b8; }
.wf-catalog__cat-arrow { width: 16px; height: 16px; fill: #94a3b8; flex-shrink: 0; }
.wf-catalog__back {
  display: flex; align-items: center; gap: 6px;
  border: none; background: none; color: #64748b; font-size: 12px;
  padding: 8px 12px; cursor: pointer; border-radius: 6px; margin-bottom: 4px;
}
.wf-catalog__back:hover { background: #f1f5f9; color: #1e293b; }
.wf-catalog__action {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; padding: 10px 12px; border: none; background: none;
  border-radius: 8px; cursor: pointer; text-align: left; transition: background .1s ease;
}
.wf-catalog__action:hover { background: #f8fafc; }
.wf-catalog__action-name { font-size: 13px; font-weight: 500; color: #1e293b; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wf-catalog__action-desc { font-size: 11px; color: #94a3b8; line-height: 1.4; }
/* Tighten the inline ?-icon inside a catalog row's name. The wrap stops
   click propagation in JS so it doesn't accidentally select the action,
   and we slim the trigger padding so the icon sits flush with the text. */
.wf-catalog__action-name .help-tooltip-wrap { margin-left: 2px; }
.wf-catalog__action-name .help-tooltip-trigger { padding: 0; color: #94a3b8; }
.wf-catalog__action--disabled { opacity: 0.55; cursor: not-allowed !important; }
.wf-catalog__action--disabled:hover { background: transparent; }
.wf-catalog__coming-soon {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: #f59e0b;
  background: #fef3c7;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}
.wf-catalog__empty { text-align: center; color: #94a3b8; font-size: 13px; padding: 32px 16px; }

/* ── schema fields (action config form) ─────────────────── */
.wf-field { margin-bottom: 16px; }
.wf-field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 4px;
}
.wf-field__required { color: #ef4444; }
.wf-field__input {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #1a1a2e;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.wf-field__input:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.12); }
.wf-field__textarea { resize: vertical; min-height: 60px; font-family: inherit; }
/* Read-only inspector value (e.g. dashboard filter type, chosen at
   create time and not editable inline). Mimics __input chrome but
   muted to signal "for reference only". */
.wf-field__readonly {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: 13px;
  color: #475569; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 6px;
  width: 100%; box-sizing: border-box;
}
.wf-field__readonly-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; color: #64748b; flex: 0 0 auto;
}
.wf-field__readonly-icon svg { width: 14px; height: 14px; }
.wf-field__select { appearance: auto; }
.wf-field__hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
}
/* Inline checkbox row. Used when a boolean toggle reads best with its
   label sitting next to the control (e.g. "Required", "Show cancel
   button"). The shared label class drops its bottom margin via the
   `--inline` modifier so the row hugs tight. */
.wf-field--check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  cursor: pointer;
}
.wf-field--check > input[type="checkbox"] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
}
.wf-field__label--inline {
  display: inline;
  margin: 0;
  font-weight: 500;
  color: #1f2937;
}

/* ── column (one per subtree) ───────────────────────────── */
.fl-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── zone: card + add-bar; children outside ─────────────── */
.fl-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* extend hover hit-area so the trash icon (right: -40px) stays reachable */
  padding: 0 48px;
  margin: 0 -48px;
  /* Needed for z-index lift on hover (below). Without position: relative
     the rule has no effect and adjacent zones in tight layouts (parallel
     lanes ship side-by-side with only a 32px gap, so the -48px margin
     causes their hover areas to overlap) steal the hover from the trash
     icon, making it disappear before the cursor reaches it. */
  position: relative;
  z-index: 1;
}
.fl-zone:hover { z-index: 6; }

/* ── card wrap (card + delete) ──────────────────────────── */
.fl-card-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 0;
  margin: -8px 0;
}

/* ── card ────────────────────────────────────────────────── */
.fl-card {
  width: 280px;
  position: relative;
  z-index: 2;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.fl-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.06);
  border-color: #cbd5e1;
}
.fl-card--draggable { cursor: grab; user-select: none; }
.fl-card--draggable:active { cursor: grabbing; }
.fl-card.is-dragging { opacity: .35; }
.fl-drag-ghost {
  background: #fff; border: 1px solid #818cf8; border-radius: 10px;
  padding: 12px 14px; box-shadow: 0 12px 36px rgba(0,0,0,.18), 0 0 0 2px rgba(99,102,241,.25);
}
.fl-pill.is-drop-target { outline: 2px dashed #6366f1; outline-offset: 2px; }
.fl-card-wrap.is-drop-target .fl-card {
  border-color: #818cf8;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.14), 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
}
.fl-card-wrap.is-drop-before::before,
.fl-card-wrap.is-drop-after::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  height: 2px;
  background: #6366f1;
  border-radius: 999px;
  z-index: 1;
}
.fl-card-wrap.is-drop-before::before { top: -4px; }
.fl-card-wrap.is-drop-after::after { bottom: -4px; }
.fl-card-wrap.is-drop-before .fl-card::before {
  content: "Insert above";
  position: absolute;
  top: -20px;
  left: 8px;
  font-size: 10px;
  color: #4f46e5;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 1px 6px;
}
.fl-card-wrap.is-drop-after .fl-card::after {
  content: "Insert below";
  position: absolute;
  bottom: -20px;
  left: 8px;
  font-size: 10px;
  color: #4f46e5;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 1px 6px;
}
.fl-card--trigger { border-top: 3px solid #22c55e; }
.fl-card--condition { border-top: 3px solid #f59e0b; }
.fl-card--action { border-top: 3px solid #6366f1; }
.fl-card--placeholder {
  border: 2px dashed #cbd5e1;
  border-top: 3px solid #22c55e;
  background: #fafafa;
  cursor: pointer;
}
.fl-card--placeholder:hover { border-color: #94a3b8; background: #f1f5f9; }
.fl-card--placeholder .fl-card__title { color: #64748b; }
.fl-card--placeholder .fl-card__sub { color: #94a3b8; }

/* "New action" ghost card shown while the action catalog is open. Same
   dashed treatment as the trigger placeholder but with the action accent
   color and a subtle pulse so the user's eye lands on the insertion
   point even if it scrolled into view from far away. */
.fl-card--placeholder.fl-card--pending {
  border-top: 3px solid #6366f1;
  background: #f5f3ff;
  border-color: #c7d2fe;
  animation: fl-pending-pulse 1.6s ease-in-out infinite;
}
.fl-card--placeholder.fl-card--pending:hover {
  border-color: #a5b4fc;
  background: #ede9fe;
}
.fl-card--placeholder.fl-card--pending .fl-card__title { color: #4338ca; }
.fl-card--placeholder.fl-card--pending .fl-card__sub { color: #6366f1; }
.fl-col--pending-action { opacity: 0.85; }

@keyframes fl-pending-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.12); }
}
@media (prefers-reduced-motion: reduce) {
  .fl-card--placeholder.fl-card--pending { animation: none; }
}

.fl-card__head { display: flex; align-items: flex-start; gap: 10px; }
.fl-card__icon { flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; margin-top: 1px; }
.fl-card__icon svg { width: 18px; height: 18px; }
.fl-card__body { flex: 1; min-width: 0; }
.fl-card__title { font-weight: 600; font-size: 13px; color: #1e293b; line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; }
.fl-card__sub { font-size: 11.5px; color: #94a3b8; line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere; word-break: break-word; white-space: pre-line; }

/* condition badges — full-width row below the head */
.fl-card__badges { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid #f1f5f9; }
.fl-badge { font-size: 11px; color: #64748b; }
.fl-badge--true { color: #16a34a; }
.fl-badge--false { color: #dc2626; }

/* ── real-time validation: per-card issue indicator ──────
   When the canvas validator (workflow_canvas_controller.js#_validateCanvas)
   detects that a node references variables that don't exist (typo'd Liquid
   path, leftover `{{ purchase_order.* }}` after the trigger was changed,
   etc.) we paint the card with a red border and stamp a small badge in the
   top-right corner so the issue surfaces at a glance even without opening
   the inspector. The full list of broken references shows up inside the
   inspector banner once the user clicks the card. */
.fl-card--has-issues {
  border-color: #fca5a5 !important;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, .35), 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
}
.fl-card--has-issues:hover {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, .45), 0 2px 6px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.06);
}
.fl-card__issue-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  z-index: 3;
}
.fl-card__issue-badge svg { width: 11px; height: 11px; fill: currentColor; }

/* ── delete button ──────────────────────────────────────── */
.fl-delete {
  position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid #e2e8f0;
  background: #fff; color: #94a3b8; display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .15s ease; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  z-index: 5;
}
.fl-zone:hover .fl-delete { opacity: 1; pointer-events: auto; }
.fl-delete:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
.fl-delete svg { width: 14px; height: 14px; fill: currentColor; }

.fl-disconnect {
  position: absolute; right: -72px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid #e2e8f0;
  background: #fff; color: #64748b; display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .15s ease; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  z-index: 5;
}
.fl-zone:hover .fl-disconnect { opacity: 1; pointer-events: auto; }
.fl-disconnect:hover { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }
.fl-disconnect svg { width: 16px; height: 16px; stroke: currentColor; }

/* ── connector line ─────────────────────────────────────── */
.fl-connector { width: 2px; height: 28px; background: #94a3b8; position: relative; flex-shrink: 0; }
.fl-connector::after { content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #94a3b8; }

/* ── add-row (action / condition pill) ──────────────────── */
.fl-add-row {
  display: flex; justify-content: center; gap: 12px;
  height: 0; overflow: visible; opacity: 0; pointer-events: none;
  transition: opacity .15s ease, height .15s ease;
  position: relative; z-index: 4;
}
.fl-zone:hover > .fl-add-row { height: 36px; opacity: 1; pointer-events: auto; }
.is-dragging-active .fl-zone:hover > .fl-add-row { height: 0; opacity: 0; pointer-events: none; }
.is-dragging-active .fl-zone:hover .fl-delete,
.is-dragging-active .fl-zone:hover .fl-disconnect { opacity: 0; pointer-events: none; }

.fl-pill { display: inline-flex; align-items: center; gap: 2px; background: #18181b; border-radius: 999px; padding: 3px 4px; box-shadow: 0 4px 12px rgba(0,0,0,.20); transition: padding .12s ease; }
.fl-pill__label { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.5); padding: 0 6px; }
.fl-pill__btn { display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent; color: #fff; font-size: 11px; cursor: pointer; padding: 4px 10px; border-radius: 999px; transition: background .12s ease; white-space: nowrap; }
.fl-pill__btn:hover { background: rgba(255,255,255,.14); }
.fl-pill__btn svg { width: 12px; height: 12px; fill: #fff; }

/* drop-hint: hidden by default, only visible during drag */
.fl-pill__drop-hint {
  display: none;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: #fff; padding: 4px 12px; white-space: nowrap;
}

/* ── drag-active state: reveal & enlarge in-lane branch pills ── */
.is-dragging-active .fl-lane__add .fl-pill {
  min-width: 160px; min-height: 44px;
  justify-content: center; padding: 6px 14px;
  border: 2px dashed rgba(255,255,255,.25);
  transition: all .15s ease;
}
.is-dragging-active .fl-lane__add .fl-pill--true {
  background: #166534; border-color: #22c55e;
}
.is-dragging-active .fl-lane__add .fl-pill--false {
  background: #991b1b; border-color: #ef4444;
}
.is-dragging-active .fl-lane__add .fl-pill--next {
  background: #334155; border-color: #64748b;
}
.is-dragging-active .fl-lane__add .fl-pill--next.is-drop-target {
  background: #475569; border-color: #94a3b8; border-style: solid;
  outline: none; box-shadow: 0 0 0 3px rgba(100,116,139,.35), 0 4px 16px rgba(100,116,139,.25);
  transform: scale(1.06);
}
.is-dragging-active .fl-lane__add .fl-pill__btn { display: none; }
.is-dragging-active .fl-lane__add .fl-pill__label { display: none; }
.is-dragging-active .fl-lane__add .fl-pill__drop-hint { display: inline-flex; }

.is-dragging-active .fl-lane__add .fl-pill--true.is-drop-target {
  background: #16a34a; border-color: #86efac; border-style: solid;
  outline: none; box-shadow: 0 0 0 3px rgba(34,197,94,.35), 0 4px 16px rgba(34,197,94,.25);
  transform: scale(1.06);
}
.is-dragging-active .fl-lane__add .fl-pill--false.is-drop-target {
  background: #dc2626; border-color: #fca5a5; border-style: solid;
  outline: none; box-shadow: 0 0 0 3px rgba(239,68,68,.35), 0 4px 16px rgba(239,68,68,.25);
  transform: scale(1.06);
}

@keyframes fl-branch-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .75; }
}
.is-dragging-active .fl-lane__add .fl-pill {
  animation: fl-branch-pulse 1.5s ease-in-out infinite;
}
.is-dragging-active .fl-lane__add .fl-pill.is-drop-target {
  animation: none;
}

.fl-orphans {
  width: 100%;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px dashed #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.fl-orphans__title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  font-weight: 600;
}

.wf-delete-choice-modal .wf-modal__body { gap: 10px; }
.wf-delete-choice-modal__box { max-width: 560px; }
.wf-delete-choice-modal__options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.wf-delete-choice-modal__option {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  padding: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wf-delete-choice-modal__option strong {
  font-size: 13px;
  color: #0f172a;
}
.wf-delete-choice-modal__option span {
  font-size: 12px;
  color: #64748b;
}
.wf-delete-choice-modal__option:hover {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
}
.wf-delete-choice-modal__option--danger:hover {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12);
}

/* ── branches (condition forks) ─────────────────────────── */
.fl-branches { display: flex; justify-content: center; gap: 32px; position: relative; padding-top: 36px; }
.fl-branches::after { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 12px; background: #94a3b8; transform: translateX(-50%); }
.fl-branches::before { content: ""; position: absolute; top: 12px; left: var(--bar-left, 25%); right: var(--bar-right, 25%); height: 2px; background: #94a3b8; }

.fl-lane { display: flex; flex-direction: column; align-items: center; position: relative; min-width: 200px; }
.fl-lane::before { content: ""; position: absolute; top: -24px; left: 50%; width: 2px; height: 24px; background: #94a3b8; transform: translateX(-50%); }
.fl-lane::after { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #94a3b8; }
.fl-lane-empty { height: 24px; width: 1px; }

/* condition-specific branches: clean Y-fork */
.fl-branches--condition { gap: 24px; }
.fl-branches--condition > .fl-lane { min-width: 180px; }

/* When a condition has a paired condition_end, we layer the
   parallel-style fan-in (merge row + stem + convergence card) on top
   of the condition's two-lane fork. The lanes use the parallel sizing
   floor (so the fan-in bar lines up regardless of which side has a
   body) and the merge row picks up its width / bar geometry from
   sizeBranchBars exactly the same way switch does.

   Override the base condition gap (24px) back to parallel's 32px so
   the lanes line up cell-for-cell with the merge row below — the
   merge container uses 32px gap (it's a .fl-merge--parallel) and any
   mismatch leaves each merge cell's vertical stub offset from its
   lane's center, which reads as the whole fan-in being slightly
   skewed against the trigger / condition column above. */
.fl-branches--condition.fl-branches--parallel {
  gap: 32px;
}
.fl-branches--condition.fl-branches--parallel > .fl-lane {
  min-width: 280px;
}

/* Parallel fan-in: a row of merge cells sits directly below the
   branches row, mirroring its flex layout exactly (same gap, same
   width per cell) so each cell's center aligns 1:1 with the lane
   above it. Each cell paints a vertical stub up into the lane
   bottom; a horizontal bar across the row joins the stubs at the
   bottom; a short stem drops into the paired Join card centered
   below. Both rows are clamped to the card width (280px) so the
   geometry stays consistent regardless of whether a lane has a body
   card (280px wide) or just the empty stub (otherwise 200px wide). */
.fl-branches--parallel {
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}
.fl-branches--parallel > .fl-lane {
  /* min-width sets the floor; lanes grow horizontally when their body
     contains a wider element (e.g. a nested switch with several option
     branches). The matching merge cell below mirrors the post-layout
     width via JS (sizeBranchBars) so the fan-in bar stays aligned. */
  min-width: 280px;
  flex-shrink: 0;
}
/* Empty parallel lanes need a visible vertical stub spanning the
   lane body so the lane label connects continuously down through
   the merge cell into the bottom bar. The base rule sizes the
   spacer at 24px × 1px (invisible), which works fine for symmetric
   condition forks but leaves a body-sized gap here whenever a
   sibling lane has a card and the row stretches to its height.
   Repurpose the spacer as the connector: flex-grow to fill whatever
   vertical space the stretched lane has, and paint a centered
   2px line. */
.fl-branches--parallel > .fl-lane > .fl-lane-empty {
  display: block;
  flex: 1 1 auto;
  width: 2px;
  height: auto;
  min-height: 24px;
  background: #94a3b8;
}
.fl-branches--parallel::before {
  /* JS-driven (sizeBranchBars) — same vars used by every other
     branched container; fall back to 25% if for any reason JS hasn't
     set them yet so the bar at least appears. */
  left: var(--bar-left, 25%);
  right: var(--bar-right, 25%);
}
.fl-merge--parallel {
  display: flex;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
  gap: 32px;
  position: relative;
}
.fl-merge__cell {
  position: relative;
  /* Width is set inline by sizeBranchBars to match the corresponding
     lane's actual rendered width — no fixed default here so an
     un-mirrored cell collapses visibly (helpful in dev) instead of
     silently misaligning. */
  height: 22px;
  flex-shrink: 0;
}
.fl-merge__cell::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: #94a3b8;
}
.fl-merge--parallel::after {
  content: "";
  position: absolute;
  bottom: 0;
  /* JS-driven (sizeBranchBars) — mirrors the lane row's --bar-left /
     --bar-right so the fan-in bar terminates at the centers of the
     outermost lanes regardless of their actual widths. */
  left: var(--bar-left, 25%);
  right: var(--bar-right, 25%);
  height: 2px;
  background: #94a3b8;
}
.fl-merge__stem {
  width: 2px;
  height: 22px;
  background: #94a3b8;
  margin: 0 auto;
}

/* ── Parallel inspector: lane editor ─────────────────── */
.wf-parallel-lanes__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.wf-parallel-lanes__count {
  font-size: 11px; font-weight: 500; color: #64748b;
  letter-spacing: 0.02em;
}

.wf-parallel-lanes__list {
  display: flex; flex-direction: column; gap: 8px;
}

.wf-parallel-lanes__empty {
  border: 1px dashed #cbd5e1; border-radius: 8px;
  padding: 14px 12px; text-align: center;
  font-size: 12px; color: #64748b; background: #f8fafc;
}

.wf-parallel-lane {
  display: flex; align-items: stretch; gap: 10px;
  padding: 10px 10px 10px 8px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.wf-parallel-lane:hover { border-color: #cbd5e1; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.wf-parallel-lane.is-empty { background: #f8fafc; border-style: dashed; }

.wf-parallel-lane__index {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: #ede9fe; color: #6d28d9;
  font-size: 11px; font-weight: 700;
}

.wf-parallel-lane__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wf-parallel-lane__title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-parallel-lane__title { font-size: 13px; font-weight: 600; color: #0f172a; }
.wf-parallel-lane__branch {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; color: #64748b;
  padding: 1px 6px; background: #f1f5f9; border-radius: 4px;
  border: 1px solid #e2e8f0;
}

.wf-parallel-lane__summary {
  font-size: 12px; color: #475569;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-parallel-lane__summary strong { color: #1e293b; font-weight: 600; }
.wf-parallel-lane__summary.is-empty { color: #94a3b8; font-style: italic; }

.wf-parallel-lane__remove {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  margin-top: -2px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: #94a3b8; cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.wf-parallel-lane__remove:hover {
  color: #dc2626; background: #fef2f2; border-color: #fecaca;
}
.wf-parallel-lane__remove:disabled {
  opacity: 0.35; cursor: not-allowed;
}
.wf-parallel-lane__remove:disabled:hover {
  color: #94a3b8; background: transparent; border-color: transparent;
}

.wf-parallel-lanes__add {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 7px 12px;
  background: #fff; border: 1px dashed #cbd5e1;
  border-radius: 6px; color: #475569;
  font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .12s ease;
}
.wf-parallel-lanes__add:hover {
  background: #faf5ff; border-color: #a78bfa; color: #6d28d9;
  border-style: solid;
}
.wf-parallel-lanes__add svg { color: #94a3b8; }
.wf-parallel-lanes__add:hover svg { color: #6d28d9; }


/* Lane head wraps the colored label and the hover-revealed Action/Condition
   pill, so hovering ONE label only reveals that lane's pill. */
.fl-lane__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  /* Roomy hover hit-area so the dropdown pill below the label can be reached
     without the cursor leaving the head and collapsing it. */
  padding: 0 24px 32px;
  margin: 0 -24px -32px;
}

/* Pill anchored just below the colored lane label. Hidden by default; a
   hover on the lane head reveals it (per-lane, so only one expands). */
.fl-lane__add {
  position: absolute;
  top: calc(100% - 28px);
  left: 50%;
  transform: translate(-50%, -4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 6;
}
.fl-lane__head:hover .fl-lane__add {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.is-dragging-active .fl-lane__add {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* lane labels for condition branches */
.fl-lane__label {
  font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 10px; border-radius: 999px; margin-bottom: 4px; position: relative; z-index: 2;
  cursor: pointer;
}
.fl-lane__label--true { color: #16a34a; background: #f0fdf4; border: 1px solid #bbf7d0; }
.fl-lane__label--false { color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; }

/* Continue / Cancel split for user_input & show_message nodes */
.fl-lane__label--next   { color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; }
.fl-lane__label--cancel { color: #b45309; background: #fffbeb; border: 1px solid #fde68a; }

/* Switch (value-based router) lanes — one per option value plus an
   optional "Otherwise" lane. Uses the same amber palette as the
   condition node icon so the family relationship is obvious. */
.fl-lane__label--switch { color: #b45309; background: #fffbeb; border: 1px solid #fde68a; }
.fl-lane__label--else   { color: #475569; background: #f1f5f9; border: 1px solid #cbd5e1; }
.fl-pill--switch        { border-color: rgba(217, 119, 6, 0.45); }
.fl-pill--else          { border-color: rgba(100, 116, 139, 0.4); }
.is-dragging-active .fl-lane__add .fl-pill--switch        { background: #92400e; border-color: #f59e0b; }
.is-dragging-active .fl-lane__add .fl-pill--switch.is-drop-target {
  background: #d97706; border-color: #fcd34d; border-style: solid;
  outline: none; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35), 0 4px 16px rgba(245, 158, 11, 0.25);
  transform: scale(1.06);
}
.is-dragging-active .fl-lane__add .fl-pill--else          { background: #334155; border-color: #94a3b8; }
.is-dragging-active .fl-lane__add .fl-pill--else.is-drop-target {
  background: #475569; border-color: #cbd5e1; border-style: solid;
  outline: none; box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.3), 0 4px 16px rgba(100, 116, 139, 0.22);
  transform: scale(1.06);
}

/* Switch card badges (under the title, above the branches) */
.fl-card__badges--switch { gap: 8px; }
.fl-badge--switch { color: #b45309; }
.fl-badge--else   { color: #64748b; }

/* ── Switch inspector — option repeater ─────────────────── */
.wf-switch-node { display: flex; flex-direction: column; gap: 16px; }
.wf-switch-opts__list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.wf-switch-opts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px;
  gap: 6px;
  align-items: center;
}
.wf-switch-opts__cell input { width: 100%; }
.wf-switch-opts__del {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid #e2e8f0;
  background: #fff; color: #94a3b8; display: grid; place-items: center;
  cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.wf-switch-opts__del:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
.wf-switch-opts__del svg { display: block; }
.wf-switch-opts__add {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 6px 12px; border-radius: 999px;
  border: 1px dashed #cbd5e1; background: #fff; color: #475569;
  font-size: 12px; cursor: pointer; transition: all .12s ease;
}
.wf-switch-opts__add:hover { border-color: #94a3b8; background: #f8fafc; color: #1e293b; }
.wf-switch-opts__add svg { fill: currentColor; }

.fl-pill--cancel { border-color: rgba(245, 158, 11, 0.45); }

.is-dragging-active .fl-lane__add .fl-pill--cancel {
  background: #92400e; border-color: #f59e0b;
}
.is-dragging-active .fl-lane__add .fl-pill--cancel.is-drop-target {
  background: #d97706; border-color: #fcd34d; border-style: solid;
  outline: none; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35), 0 4px 16px rgba(245, 158, 11, 0.25);
  transform: scale(1.06);
}

/* ══════════════════════════════════════════════════════════
   WORKFLOW SHOW PAGE
   ══════════════════════════════════════════════════════════ */

/* ── canvas preview card ──────────────────────────────────── */
.wf-show-canvas-preview {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  background-image: radial-gradient(circle, #d4d8dd 0.8px, transparent 0.8px);
  background-size: 20px 20px;
  background-color: #f8fafc;
}

.wf-show-preview-card {
  width: 280px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
}
.wf-show-preview-card--trigger { border-top: 3px solid #22c55e; }
.wf-show-preview-card--action  { border-top: 3px solid #6366f1; }
.wf-show-preview-card__title {
  font-weight: 600;
  font-size: 13px;
  color: #1e293b;
  line-height: 1.3;
}
.wf-show-preview-card__sub {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
  margin-top: 3px;
}
.wf-show-preview-connector {
  width: 2px;
  height: 24px;
  background: #94a3b8;
  position: relative;
}
.wf-show-preview-connector::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #94a3b8;
}
.wf-show-preview-summary {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  margin-top: 8px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.wf-show-preview-empty {
  text-align: center;
  color: #94a3b8;
  padding: 20px;
}
.wf-show-preview-empty p {
  margin: 8px 0 0;
  font-size: 13px;
}

/* ── runs panel ───────────────────────────────────────────── */
.wf-show-runs {
  padding: 0;
  overflow: hidden;
}
.wf-show-runs .panel-header {
  padding: 20px 24px 16px;
  margin-bottom: 0;
}
.wf-show-runs .panel-header h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.wf-show-runs .panel-header .muted {
  margin: 2px 0 0;
  font-size: 13px;
}
.wf-show-runs .data-table {
  width: 100%;
  border-collapse: collapse;
}
.wf-show-runs .data-table thead th {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  background: #fafbfc;
}
.wf-show-runs .data-table tbody td {
  padding: 12px 16px;
  font-size: 13px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
}
.wf-show-runs .data-table tbody tr:last-child td {
  border-bottom: none;
}
.wf-run-row:hover td {
  background: #fafbfc;
}
.wf-run-event {
  font-weight: 500;
  color: #1e293b;
}

/* error detail row */
.wf-run-error-detail td {
  padding: 0 16px 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.wf-run-error-box {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #991b1b;
  line-height: 1.5;
}
.btn-text-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.btn-text-link:hover {
  color: #1d4ed8;
}

/* empty state */
.wf-show-runs-empty {
  text-align: center;
  padding: 48px 24px 56px;
}
.wf-show-runs-empty__icon {
  margin-bottom: 12px;
}
.wf-show-runs-empty h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 6px;
}
.wf-show-runs-empty .muted {
  font-size: 13px;
  margin: 0;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   WORKFLOW RUN DETAIL PAGE
   ══════════════════════════════════════════════════════════ */

.wf-run-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 800px) {
  .wf-run-detail-summary { grid-template-columns: repeat(2, 1fr); }
}

.wf-run-error-banner {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  color: #991b1b;
  line-height: 1.5;
  margin-bottom: 20px;
}
/* ── "My pending approvals" inbox ────────────────────────── */
.wf-inbox-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #2563eb;
  border-radius: 999px;
  vertical-align: middle;
}

/* The page-level <main class="content"> wrapper applies a 24px flex gap
   between its direct children. On the inbox page that produces a chunky
   strip of grey between the summary, filter chips, select-all toolbar,
   and the card list — all of which are direct children of .content.
   Collapse that gap here so the inbox's own margin/padding can drive
   the rhythm. */
.content:has(.wf-inbox-list),
.content:has(.wf-inbox-empty) {
  gap: 0;
}

.wf-inbox-summary {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.wf-inbox-summary__stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  min-width: 160px;
}

.wf-inbox-summary__stat--danger {
  background: #fef2f2;
  border-color: #fecaca;
}

.wf-inbox-summary__num {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
}
.wf-inbox-summary__stat--danger .wf-inbox-summary__num { color: #b91c1c; }

.wf-inbox-summary__lbl {
  font-size: 13px;
  color: #64748b;
}
.wf-inbox-summary__stat--danger .wf-inbox-summary__lbl { color: #991b1b; }

.wf-inbox-summary__search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 240px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #94a3b8;
}
.wf-inbox-summary__search:focus-within {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.wf-inbox-summary__search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: #0f172a;
  padding: 10px 0;
  min-width: 0;
}

.wf-inbox-filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.wf-inbox-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wf-inbox-filter-group__label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  min-width: 86px;
}

.wf-inbox-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wf-inbox-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s ease;
  line-height: 1.3;
}

.wf-inbox-chip:hover {
  border-color: #cbd5e1;
  color: #0f172a;
}

.wf-inbox-chip.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.wf-inbox-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 600;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 999px;
}

.wf-inbox-chip.is-active .wf-inbox-chip__count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.wf-inbox-empty-filtered {
  text-align: center;
  padding: 32px 20px;
  background: #fff;
  border: 1px dashed #e2e8f0;
  border-radius: 10px;
  color: #64748b;
  font-size: 13px;
}

.wf-inbox-empty-filtered p {
  margin: 0 0 10px;
}

.wf-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wf-inbox-card {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wf-inbox-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.wf-inbox-card--overdue {
  border-color: #fecaca;
  background: linear-gradient(to right, #fff5f5 0, #fff 80px);
}

.wf-inbox-card__gutter {
  flex-shrink: 0;
}

.wf-inbox-card__type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.wf-inbox-card__type-icon--input {
  background: #e0f2fe;
  color: #0369a1;
}

.wf-inbox-card__type-icon--message {
  background: #ede9fe;
  color: #6d28d9;
}

.wf-inbox-card__body {
  flex: 1;
  min-width: 0;
}

.wf-inbox-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.wf-inbox-card__headings {
  min-width: 0;
  flex: 1;
}

.wf-inbox-card__title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 4px;
  line-height: 1.35;
}

.wf-inbox-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.wf-inbox-card__dot {
  color: #cbd5e1;
}

.wf-inbox-card__run-id {
  font-variant-numeric: tabular-nums;
}

.wf-inbox-card__type-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  line-height: 1.4;
}

.wf-inbox-card__type-pill--input {
  background: #e0f2fe;
  color: #0369a1;
}

.wf-inbox-card__type-pill--message {
  background: #ede9fe;
  color: #6d28d9;
}

.wf-inbox-card__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.wf-inbox-card__deadline {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}

.wf-inbox-card__deadline--overdue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #b91c1c;
  font-weight: 600;
}

.wf-inbox-card__respond {
  white-space: nowrap;
}

.wf-inbox-card__desc {
  margin: 8px 0 0;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}

.wf-inbox-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
  font-size: 12px;
  color: #64748b;
}

/* Whole-card click affordance. Pointer is only applied when the card has
   a destination (data-wf-inbox-card-href); cards the current user has no
   read access to fall back to the default cursor so the lack of action
   isn't surprising. */
.wf-inbox-card--clickable {
  cursor: pointer;
}

/* Bottom-right "open run" icon. Pushed to the far right of the footer
   with margin-left:auto so it sits opposite the Waiting / Started-by tags
   regardless of how many tags are present. Kept low-emphasis (icon-only,
   muted color) so it doesn't steal attention from Respond. */
.wf-inbox-card__view-run {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: auto;
  border-radius: 6px;
  color: #64748b;
  background: transparent;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.wf-inbox-card__view-run:hover,
.wf-inbox-card__view-run:focus-visible {
  background: #f1f5f9;
  color: #0f172a;
  text-decoration: none;
  outline: none;
}

.wf-inbox-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wf-inbox-card__tag-label {
  color: #94a3b8;
  margin-right: 2px;
}

.wf-inbox-card__tag--record {
  background: #f1f5f9;
  padding: 3px 9px;
  border-radius: 6px;
}

.wf-inbox-card__tag--record .wf-inbox-card__tag-label {
  color: #475569;
  font-weight: 500;
}

.wf-inbox-empty {
  text-align: center;
  padding: 64px 24px;
  background: #fff;
  border: 1px dashed #e2e8f0;
  border-radius: 12px;
}

.wf-inbox-empty__icon {
  display: inline-flex;
  color: #16a34a;
  opacity: 0.8;
  margin-bottom: 12px;
}

.wf-inbox-empty__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.wf-inbox-empty__body {
  margin: 0 0 4px;
  font-size: 14px;
  color: #475569;
}

.wf-inbox-empty__hint {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
}

/* ── Team-approvals scope toggle (Mine / Team) ───────────────── */
.wf-inbox-scope-toggle {
  display: inline-flex;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 2px;
}

.wf-inbox-scope-toggle__btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.wf-inbox-scope-toggle__btn:hover { color: #0f172a; }

.wf-inbox-scope-toggle__btn.is-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* ── Server-side filter form for the team view ───────────────── */
.wf-inbox-filter-form {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.wf-inbox-filter-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  align-items: end;
}

.wf-inbox-filter-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wf-inbox-filter-form__field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.wf-inbox-filter-form__field select {
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
}

.wf-inbox-filter-form__field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding-top: 18px;
}

.wf-inbox-filter-form__field--checkbox label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wf-inbox-filter-form__actions {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-top: 18px;
}

/* ── Team-view workload roll-ups ─────────────────────────────── */
.wf-inbox-workload {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.wf-inbox-workload__panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
}

.wf-inbox-workload__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.wf-inbox-workload__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}

.wf-inbox-workload__sub { font-size: 11px; }

.wf-inbox-workload__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wf-inbox-workload__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  color: #0f172a;
  border-top: 1px solid #f1f5f9;
}

.wf-inbox-workload__list li:first-child { border-top: 0; }

.wf-inbox-workload__lbl {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
}

.wf-inbox-workload__num {
  font-weight: 600;
  color: #1e293b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 28px;
  text-align: center;
  font-size: 12px;
}

/* Team-view assignee tag (slightly louder than the others) */
.wf-inbox-card__tag--assignee {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #ddd6fe;
}

.wf-inbox-card--team .wf-inbox-card__tag--assignee {
  font-weight: 600;
}

/* ── Bulk-cancel selection ───────────────────────────────────
   The checkbox lives in its own column to the LEFT of the
   type-icon gutter — they're peers, not stacked. The hit area
   matches the type icon's height (36px) so the row reads as
   two balanced glyphs side by side instead of a small dot
   floating above a colored pill. */
.wf-inbox-card__select {
  flex-shrink: 0;
  width: 24px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.12s ease;
}

.wf-inbox-card__select:hover {
  background: #f1f5f9;
}

.wf-inbox-card__select input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: #4338ca;
}

/* Reserve the same column width for non-cancellable rows so the
   type icon, title, and meta still align across the list. */
.wf-inbox-card__select--disabled {
  width: 24px;
  min-height: 36px;
}

/* Subtle highlight when this row is checked, so the active
   selection reads even before the user looks at the bulk bar. */
.wf-inbox-card:has(.wf-inbox-card__select input:checked) {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* Per-row Cancel as a low-emphasis text link rather than a
   second button. button_to wraps it in a <form>; we strip the
   form's block-level layout so it sits flush under Respond. */
.wf-inbox-card__cancel-form {
  margin: 0;
  display: block;
  text-align: right;
  line-height: 1;
}

.wf-inbox-card__cancel-link {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 2px 4px;
  margin: 0;
  font: inherit;
  font-size: 12px;
  color: #b91c1c;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.wf-inbox-card__cancel-link:hover {
  background: #fef2f2;
  color: #991b1b;
  text-decoration: underline;
}

.wf-inbox-card__cancel-link:focus-visible {
  outline: 2px solid #fca5a5;
  outline-offset: 1px;
}

/* Always-visible row above the list with a Select-all toggle.
   Pairs with the sticky bulk-action bar below: this one is always
   present (when any row is cancellable) so users can flip every
   visible card in one click without first selecting one by hand. */
.wf-inbox-select-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 0;
}

.wf-inbox-select-toolbar__toggle {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  font-size: 12px;
  color: #475569;
  text-decoration: underline;
  cursor: pointer;
}

.wf-inbox-select-toolbar__toggle:hover { color: #0f172a; }

.wf-inbox-select-toolbar__toggle:disabled {
  color: #cbd5e1;
  cursor: not-allowed;
  text-decoration: none;
}

/* Sticky toolbar that appears when one or more rows are selected. */
.wf-inbox-bulk-form { margin: 0; }

.wf-inbox-bulk-bar {
  position: sticky;
  top: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: #1e293b;
  color: #f8fafc;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

.wf-inbox-bulk-bar[hidden] { display: none; }

.wf-inbox-bulk-bar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.wf-inbox-bulk-bar__count { font-weight: 600; }

.wf-inbox-bulk-bar__left .link {
  color: #cbd5e1;
  background: transparent;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
  font-size: 12px;
}

.wf-inbox-bulk-bar__left .link:hover { color: #f8fafc; }

.wf-inbox-bulk-bar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wf-inbox-bulk-bar__reason {
  width: 280px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #475569;
  border-radius: 6px;
  background: #0f172a;
  color: #f8fafc;
}

.wf-inbox-bulk-bar__reason::placeholder { color: #94a3b8; }

@media (max-width: 768px) {
  .wf-inbox-bulk-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .wf-inbox-bulk-bar__left,
  .wf-inbox-bulk-bar__right {
    flex-wrap: wrap;
  }

  .wf-inbox-bulk-bar__reason {
    width: 100%;
  }
}

/* Intervened step: subtle accent so admins reviewing the audit trail
   can see at a glance which steps were responded to via "step in". */
.wf-run-step__intervened {
  color: #92400e !important;
}

.wf-run-waiting-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  color: #0369a1;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* ── steps panel ──────────────────────────────────────────── */
.wf-run-detail-steps {
  padding: 0;
  overflow: hidden;
}
.wf-run-detail-steps .panel-header {
  padding: 20px 24px 16px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
}
.wf-run-detail-steps .panel-header h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

/* ── timeline ─────────────────────────────────────────────── */
.wf-run-timeline {
  padding: 20px 24px;
}
.wf-run-step {
  display: flex;
  gap: 14px;
}
.wf-run-step__indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
}
.wf-run-step__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e2e8f0;
  display: grid;
  place-items: center;
  color: #64748b;
  flex-shrink: 0;
}
.wf-run-step__dot--success { background: #dcfce7; color: #16a34a; }
.wf-run-step__dot--failed  { background: #fee2e2; color: #dc2626; }
.wf-run-step__dot--running { background: #fef3c7; color: #f59e0b; }
.wf-run-step__line {
  width: 2px;
  flex: 1;
  min-height: 16px;
  background: #e2e8f0;
}

.wf-run-step__content {
  flex: 1;
  min-width: 0;
  padding-bottom: 20px;
}
.wf-run-step:last-child .wf-run-step__content { padding-bottom: 0; }

.wf-run-step__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.wf-run-step__title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
}
.wf-run-step__type {
  font-size: 12px;
  margin: 1px 0 0;
}
.wf-run-step__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* error box */
.wf-run-step__error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #991b1b;
  line-height: 1.5;
  margin-top: 8px;
}

/* output toggle */
.wf-run-step__output { margin-top: 8px; }
.wf-run-step__output-toggle {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 4px 0;
}
.wf-run-step__output-toggle::-webkit-details-marker { display: none; }
.wf-run-step__output-toggle::before {
  content: "▸ ";
  font-size: 10px;
}
details[open] > .wf-run-step__output-toggle::before {
  content: "▾ ";
}
.wf-run-step__output-json {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-family: "SF Mono", "Fira Code", monospace;
  color: #334155;
  line-height: 1.5;
  overflow-x: auto;
  margin: 6px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* JSON block (event payload, canvas snapshot) */
.wf-run-json-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12px;
  font-family: "SF Mono", "Fira Code", monospace;
  color: #334155;
  line-height: 1.5;
  overflow-x: auto;
  margin: 8px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
}

/* ── Procurement module ────────────────────────────────────────── */

/* Metric strip */
.metric-strip {
  display: flex;
  gap: 12px;
  padding: 20px 24px;
  overflow-x: auto;
}
.metric-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  min-width: 140px;
  flex: 1;
}
.metric-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.metric-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.metric-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.metric-sub {
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 0;
}

/* Legacy procurement layout (kept for backwards compat) */
.procurement-show {
  padding: 0 24px 40px;
}
.procurement-show > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Detail page layout (wide main + narrow sidebar) ─── */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  padding: 0 24px 40px;
  align-items: start;
}
.detail-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.detail-sidebar {
  position: sticky;
  top: 16px;
  z-index: 0;
}
.detail-sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Panel index header (embedded index-style controls) ─ */
.panel-index-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.panel-index-title h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.panel-index-title .muted {
  margin: 2px 0 0;
  font-size: 12px;
}
.panel-index-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}
.panel-index-search-form {
  display: flex;
  align-items: center;
  flex: 1;
}
.panel-index-search-form .search-compact {
  min-width: 200px;
  border: 1px solid var(--line);
  font-size: 13px;
}
.panel-index-filters {
  padding: 8px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}
.panel-index-filters .search {
  background: var(--panel, #fff);
  border: 1px solid var(--line);
}
.panel-index-filters .search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.panel-index-filters .filters-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.panel-index-filters-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.panel-index-filter-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.panel-line-items {
  overflow: visible;
}

/* Line items panel: expand to fullscreen */
.line-items-panel-wrapper {
  position: relative;
}
.line-items-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.line-items-expand-btn:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}
/* Fullscreen via Fullscreen API – browser hides header/sidebar */
.line-items-panel-wrapper:fullscreen {
  background: var(--panel, #fff);
  overflow: auto;
  padding: 0;
  display: block;
}
.line-items-panel-wrapper:fullscreen .panel {
  min-height: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.line-items-panel-wrapper:-webkit-full-screen {
  background: var(--panel, #fff);
  overflow: auto;
  padding: 0;
  display: block;
}
.line-items-panel-wrapper:-webkit-full-screen .panel {
  min-height: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

/* ── Remaining recommendations card (PO show) ── */
.remaining-recs-panel {
  margin-top: 16px;
  border: 1px dashed var(--line, #e2e8f0);
  background: #f8fafc;
}
.remaining-recs-body {
  padding: 16px 20px 20px;
}
.remaining-recs-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 16px;
}
.remaining-recs-stat {
  display: flex;
  flex-direction: column;
  min-width: 90px;
}
.remaining-recs-stat-value {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary, #1e293b);
}
.remaining-recs-stat-label {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
}
.remaining-recs-stat-hint {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  margin-top: 1px;
}
.remaining-recs-stat-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.remaining-recs-stat-link:hover .remaining-recs-stat-value {
  text-decoration: underline;
}
.remaining-recs-stat--warning .remaining-recs-stat-value {
  color: var(--warning, #d97706);
}
.remaining-recs-stat--warning .remaining-recs-stat-link:hover .remaining-recs-stat-value {
  color: var(--warning, #d97706);
}
.remaining-recs-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Review scopes bar (between filters and line items table) */
.panel-index-scopes {
  padding: 6px 16px 8px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}
.panel-index-scopes .scopes-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.panel-index-scopes .scope-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.panel-index-scopes .scope-pill:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #334155;
}
.panel-index-scopes .scope-pill.is-active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
}
.panel-index-scopes .scope-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 600;
  background: #e2e8f0;
  border-radius: 999px;
  color: #475569;
}
.panel-index-scopes .scope-pill.is-active .scope-pill-count {
  background: #bfdbfe;
  color: #1d4ed8;
}

/* View switcher inside panel */
.view-switcher-panel summary {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.view-switcher-panel h2 {
  display: inline;
}

/* ── Sidebar list (compact list of invoices/shipments) ── */
.sidebar-list {
  padding: 0;
}
.sidebar-list-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.sidebar-list-item:last-child {
  border-bottom: none;
}
.sidebar-list-item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}
.sidebar-list-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

/* Small status badge variant */
.status-badge--sm {
  font-size: 10px;
  padding: 1px 6px;
}

/* Small discrepancy badge */
.discrepancy-badge--sm {
  font-size: 10px;
  padding: 1px 6px;
}

/* Small progress bar */
.progress-bar-wrap-sm {
  min-width: 80px;
  font-size: 11px;
}
.progress-bar-wrap-sm .progress-bar {
  height: 4px;
}

/* ── Fulfillment progress bar (metric strip) ─────────── */
.metric-card--wide {
  flex: 2;
  min-width: 240px;
}
.fulfillment-bar-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.fulfillment-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  overflow: hidden;
}
.fulfillment-segment {
  height: 100%;
  transition: width 0.3s ease;
}
.fulfillment-segment--received {
  background: #22c55e;
}
.fulfillment-segment--incoming {
  background: #f59e0b;
}
.fulfillment-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.fulfillment-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
.fulfillment-legend-item strong {
  color: var(--ink);
  font-weight: 600;
}
.fulfillment-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.fulfillment-dot--received {
  background: #22c55e;
}
.fulfillment-dot--incoming {
  background: #f59e0b;
}
.fulfillment-dot--on-order {
  background: #e2e8f0;
}

/* ── PO Show header ──────────────────────────────────── */
.po-topbar-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.po-topbar-heading h1 {
  margin: 0;
  font-size: 18px;
}

/* ── PO Show tabs layout ─────────────────────────────── */
.po-show__tabs {
  min-width: 0;
  margin-top: -24px;
  margin-left: -24px;
  margin-right: -24px;
  width: calc(100% + 48px);
  display: flex;
  flex-direction: column;
}
.po-show__tabs > .tabs__bar {
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
}
.po-show__tabs > .tabs__panel {
  padding-top: 0;
  width: 100%;
  box-sizing: border-box;
}
.po-show__panel--line-items {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
.po-show__panel--line-items > .metric-strip {
  padding-top: 20px;
}
.po-show__panel--line-items > .detail-layout {
  padding-top: 0;
}
.po-show__panel--full {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 40px;
  box-sizing: border-box;
}
.po-show__panel--full > .panel,
.po-show__panel--full > .panel.table-panel {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.po-tab-kpi-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 768px) {
  .po-tab-kpi-row {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* Panel footer row — used in table panels beneath a table */
.panel-footer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
  font-size: 13px;
}
.panel-footer-spacer {
  flex: 1;
}
.panel-footer-meta {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* Hint text below a form field */
.form-hint {
  margin: 6px 0 10px;
}
.po-tab-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .po-tab-two-col {
    grid-template-columns: 1fr 360px;
  }
  .po-tab-two-col--equal {
    grid-template-columns: 1fr 1fr;
  }
}
.po-tab-two-col__wide {
  min-width: 0;
}
.po-tab-two-col__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.po-tab-two-col__side .panel {
  width: 100%;
  max-width: none;
}
.data-table-footer-row td {
  border-top: 2px solid var(--line);
  background: #f8fafc;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 0.85rem;
}
.data-table-footer-row td strong {
  display: block;
  font-size: 0.9rem;
  color: var(--ink);
}

/* ── PO Status stepper ───────────────────────────────── */
.po-stepper-body {
  padding: 12px 16px 16px;
}
.po-stepper-cancelled {
  text-align: center;
  padding: 8px 0;
}
.po-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.po-stepper-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  padding: 6px 0;
}
.po-stepper-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: -6px;
  width: 2px;
  background: #e2e8f0;
}
.po-stepper-step--completed:not(:last-child)::after {
  background: #22c55e;
}
.po-stepper-step--active:not(:last-child)::after {
  background: linear-gradient(to bottom, #3b82f6 0%, #e2e8f0 100%);
}
.po-stepper-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 1;
}
.po-stepper-step--completed .po-stepper-indicator {
  background: #dcfce7;
  color: #16a34a;
}
.po-stepper-step--active .po-stepper-indicator {
  background: #dbeafe;
  color: #2563eb;
}
.po-stepper-step--upcoming .po-stepper-indicator {
  background: #f1f5f9;
  color: #94a3b8;
}
.po-stepper-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.po-stepper-step--active .po-stepper-dot {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.po-stepper-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 2px;
  min-width: 0;
}
.po-stepper-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.po-stepper-step--upcoming .po-stepper-label {
  color: var(--muted);
  font-weight: 500;
}
.po-stepper-date {
  font-size: 11px;
  color: var(--muted);
}
.po-stepper-date--vendor {
  color: var(--ink);
  font-weight: 500;
}

/* ── vi-track: receiving/payment summary rows ─────── */
.vi-track__divider {
  border-top: 1px solid var(--pp-border, #e2e8f0);
  margin: 10px 16px;
}
.vi-track {
  padding: 10px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vi-track__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.vi-track__bar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.vi-track__bar-fill {
  height: 100%;
  background: var(--pp-success, #16a34a);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.vi-track__bar-fill--payment {
  background: var(--pp-info, #2563eb);
}
.vi-track__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vi-track__fraction {
  font-size: 12px;
}
.vi-track__ships {
  font-size: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.vi-track__warning {
  margin: 0;
  font-size: 12px;
  color: var(--pp-warning, #b45309);
  display: flex;
  align-items: center;
  gap: 4px;
}

.po-sidebar-fx-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.po-sidebar-fx-list li {
  margin: 0;
}

/* ── Contextual banner ───────────────────────────────── */
.banner {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
}
.banner p {
  margin: 0;
}
.banner--info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}
.banner--warning {
  background: #fffbeb;
  border: 1px solid #fed7aa;
  color: #92400e;
}
.banner--danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* ── Panel empty state ───────────────────────────────── */
.panel-empty-state {
  padding: 12px 16px;
  font-size: 12px;
}
.panel-empty-state .muted {
  margin: 0 0 4px;
}

/* ── Sidebar resolved flag item ──────────────────────── */
.sidebar-list-item--resolved {
  opacity: 0.5;
}

/* ── Sidebar conversations ───────────────────────────── */
.sidebar-threads {
  padding: 8px 16px 12px;
}
.sidebar-thread-item {
  padding: 4px 0;
  border-bottom: 1px solid var(--soft);
}
.sidebar-thread-link {
  font-size: 12px;
}
.sidebar-thread-date {
  font-size: 11px;
}
.sidebar-threads-footer {
  padding-top: 6px;
}
.sidebar-threads-view-all {
  font-size: 12px;
  color: var(--accent);
}

/* ── Sidebar vendor flag helpers ─────────────────────── */
.sidebar-list-item-meta--stacked {
  flex-direction: column;
  align-items: flex-start;
}
.sidebar-flag-notes {
  font-size: 0.8rem;
  margin: 2px 0;
}
.sidebar-flag-photos {
  font-size: 0.75rem;
  margin: 0;
}
.sidebar-flag-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.sidebar-flag-form {
  display: inline;
}
.sidebar-flag-resolved-label {
  font-size: 0.75rem;
}

/* ── Detail notes (long text in details panel) ───────── */
.detail-notes {
  font-weight: 400;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Activity feed (sidebar timeline) ────────────────── */
.activity-feed-panel .panel-body {
  padding: 12px 16px;
}
.activity-feed {
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity-feed__entry {
  margin: 0;
  padding: 0;
}
.activity-feed__row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.activity-feed__entry:last-child .activity-feed__row {
  border-bottom: none;
}
.activity-feed__avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.activity-feed__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.activity-feed__avatar-icon {
  font-size: 12px;
  opacity: 0.9;
}
.activity-feed__connector {
  width: 2px;
  flex: 1;
  min-height: 12px;
  background: var(--line);
  margin-top: 4px;
}
.activity-feed__entry:last-child .activity-feed__connector {
  display: none;
}
.activity-feed__body {
  flex: 1;
  min-width: 0;
}
.activity-feed__summary {
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text, #0f172a);
}
.activity-feed__meta {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.activity-feed__toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  color: inherit;
}
.activity-feed__toggle:hover {
  color: var(--accent);
}
.activity-feed__detail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  transition: opacity 0.2s ease;
}
.activity-feed-empty {
  margin: 0 0 8px;
  font-size: 13px;
}
.activity-feed-footer {
  margin: 8px 0 0;
  font-size: 12px;
}
.activity-feed-detail__meta {
  margin: 0 0 10px;
  font-size: 12px;
}
.activity-feed-detail__changes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.activity-feed-detail__version {
  font-size: 12px;
  padding: 8px 10px;
  background: var(--surface, #f8fafc);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.activity-feed-detail__record-type {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-weight: 600;
}
.activity-feed-detail__change {
  margin: 2px 0;
  font-size: 12px;
}
.activity-feed-detail__change .audit-old {
  color: var(--muted);
}
.activity-feed-detail__change .audit-new {
  font-weight: 500;
}
.activity-feed-detail__footer {
  margin: 12px 0 0;
  font-size: 12px;
}

/* ── Dashboard checklist ─────────────────────────────────── */
.page-checklist {
  margin-top: 1rem;
}
.page-checklist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.page-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.page-checklist-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.page-checklist-check svg {
  width: 18px;
  height: 18px;
}
.page-checklist-check-empty {
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
}
.page-checklist-item.is-completed .page-checklist-label {
  color: var(--muted);
}
.page-checklist-label.link:hover {
  color: var(--accent);
}

/* ── Warning variant metric strip ────────────────────── */
.metric-strip--warning {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  margin: 0 24px;
}
.metric-card--warning {
  background: #fef3c7;
  border-color: #fcd34d;
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}
.status-badge--draft { background: #f1f5f9; color: #475569; }
.status-badge--pending_approval,
.status-badge--pending_review,
.status-badge--in_review,
.status-badge--pending { background: #fef3c7; color: #92400e; }
.status-badge--approved,
.status-badge--verified,
.status-badge--accepted { background: #dcfce7; color: #166534; }
.status-badge--submitted_to_supplier,
.status-badge--in_transit { background: #dbeafe; color: #1e40af; }
.status-badge--partially_invoiced { background: #e0e7ff; color: #3730a3; }
.status-badge--fully_invoiced { background: #d1fae5; color: #065f46; }
.status-badge--reconciled,
.status-badge--received { background: #d1fae5; color: #065f46; }
.status-badge--disputed { background: #fee2e2; color: #991b1b; }
.status-badge--cancelled { background: #fecaca; color: #991b1b; }
.status-badge--closed { background: #e5e7eb; color: #4b5563; }
.status-badge--paid { background: #d1fae5; color: #065f46; }
.status-badge--unpaid { background: #fef3c7; color: #92400e; }
.status-badge--partially_paid { background: #dbeafe; color: #1e40af; }
.status-badge--partial { background: #fef3c7; color: #92400e; }
.status-badge--arrived { background: #dbeafe; color: #1e40af; }
.status-badge--receiving { background: #fef3c7; color: #92400e; }

/* Bundle type badges (variant show) – colored background so they stand out */
.status-badge--bundle-virtual { background: #c7d2fe; color: #3730a3; }
.status-badge--bundle-assembly { background: #fed7aa; color: #9a3412; }
.status-badge--bundle-multipack { background: #e9d5ff; color: #6b21a8; }

/* Discrepancy badge */
.discrepancy-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: #fef2f2;
  color: #dc2626;
}

/* Text colors */
.text-danger { color: #dc2626; }
.text-success { color: #16a34a; }
.text-warning { color: #d97706; }
.text-sm { font-size: 12px; }

/* Progress bars */
.progress-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}
.progress-bar-wrap .progress-bar {
  height: 6px;
  background: #2563eb;
  border-radius: 3px;
  flex: 1;
  max-width: 80px;
  position: relative;
}
.progress-bar-wrap .progress-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e2e8f0;
  border-radius: 3px;
  z-index: -1;
  width: 80px;
}
.progress-label {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.progress-bar-large-wrap {
  height: 12px;
  background: #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  margin: 12px 20px 16px;
}
.progress-bar-large {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border-radius: 6px;
  transition: width 0.3s ease;
}

/* Panel filter bar */
.panel-filter-bar {
  padding: 10px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}

/* Panel header actions */
.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Panel warning variant */
.panel-warning {
  border: 1px solid #fde68a;
  background: #fffbeb;
}
.panel-warning .panel-header {
  border-bottom-color: #fde68a;
}

/* Panel total secondary */
.panel-total-secondary {
  font-size: 13px;
  margin: 2px 0 0;
}

/* Row highlight variants */
.row-highlight-warning td { background: #fffbeb; }
.row-highlight-info td { background: #eff6ff; }

/* Inline forms */
.inline-form {
  padding: 12px 16px;
}
.inline-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.input-narrow {
  max-width: 80px;
}

/* Upload form */
.upload-form {
  padding: 4px 0;
}

/* Panel body */
.panel-body {
  padding: 12px 16px;
}

/* Reconciliation report */
.reconciliation-report {
  padding: 0 24px 40px;
}
.reconciliation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.recon-stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.recon-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.recon-stat-value {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}
.recon-stat-sub {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
}

/* Inline checkbox */
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.inline-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

/* ── Quick Receive ────────────────────────────────────────── */

/* Positive-quantity badge used in the compact recent-receives list. */
.qr-qty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dcfce7;
  color: #166534;
  font-weight: 600;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 6px;
  min-width: 32px;
  flex-shrink: 0;
}

/* Compact context hint shown below the variant picker after an item is
   selected. Summarises which shipment the item will be received against
   with Expected / Received / Remaining counts. */
.qr-line-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13px;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.4;
}

.qr-line-context__warn {
  color: var(--warn, #b45309);
  font-weight: 500;
}

.qr-line-shipment {
  font-weight: 500;
  color: var(--ink);
}

.qr-line-remaining {
  color: var(--ink);
}

.qr-line-stats {
  color: var(--muted);
}

/* Disambiguation radio list for the case where a variant appears on
   multiple open shipments simultaneously. */
.qr-line-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.qr-line-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: background 0.1s;
}

.qr-line-option:hover {
  background: var(--soft);
}

.qr-line-option input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.qr-line-option__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13px;
}

/* Compact recent-receives strip below the form.
   Inherits the adjust-form's 760px centering so it feels continuous. */
.qr-recent-compact {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 0 32px;
}

.qr-recent-compact__heading {
  margin-bottom: 8px;
}

.qr-recent-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.qr-recent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.qr-recent-row:last-child {
  border-bottom: none;
}

.qr-recent-sku {
  font-weight: 600;
  color: var(--ink);
}

.qr-recent-product {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qr-recent-shipment {
  font-size: 12px;
}

.qr-recent-time {
  font-size: 12px;
  margin-left: auto;
}

/* .row-muted: used by fba_inbound_shipments/restock_recommendations */
.row-muted td {
  opacity: 0.5;
}

@media (max-width: 640px) {
  .qr-recent-row {
    gap: 6px;
  }

  .qr-recent-product {
    flex-basis: 100%;
    white-space: normal;
  }

  .qr-recent-time {
    margin-left: 0;
  }
}

/* ── Receive Mode Toggle ─────────────────────────────────── */

.qr-mode-wrap {
  max-width: 760px;
  margin: 0 auto;
}

.qr-mode-toggle {
  display: flex;
  gap: 0;
  background: var(--pp-surface-2, var(--soft));
  border: 1px solid var(--pp-border, var(--border));
  border-radius: var(--radius, 14px);
  padding: 4px;
  margin-bottom: 16px;
}

.qr-mode-toggle__btn {
  flex: 1;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: calc(var(--radius, 14px) - 4px);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.qr-mode-toggle__btn:hover:not(.qr-mode-toggle__btn--active) {
  background: var(--pp-surface-3, rgba(0, 0, 0, 0.04));
  color: var(--ink);
}

.qr-mode-toggle__btn--active {
  background: var(--pp-surface, var(--surface-1));
  color: var(--ink);
  box-shadow: var(--pp-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

/* ── Continuous Scan Panel ────────────────────────────────── */

.cs-panel {
  width: 100%;
  box-sizing: border-box;
  margin-top: 24px;
}

.cs-panel__card {
  overflow: hidden;
}

.cs-panel__header {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pp-border, var(--border));
}

.cs-panel__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.cs-panel__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.cs-panel__badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--accent-soft, rgba(59, 130, 246, 0.1));
  color: var(--accent, #3b82f6);
  white-space: nowrap;
}

.cs-panel__sub {
  font-size: 13px;
  margin: 0;
}

.cs-panel__setup-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.cs-panel__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-panel__start-btn {
  width: 100%;
}

.cs-panel__scanner-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.cs-panel__scanner-input {
  flex: 1;
  font-size: 18px;
  padding: 12px 16px;
  font-weight: 500;
  border-radius: calc(var(--radius, 14px) - 4px);
}

.cs-panel__status {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
  word-break: break-word;
}

.cs-panel__status--loading {
  background: var(--soft);
  color: var(--ink-muted);
}

.cs-panel__status--success {
  background: var(--green-soft, rgba(34, 197, 94, 0.1));
  color: var(--green, #16a34a);
}

.cs-panel__status--error {
  background: var(--red-soft, rgba(239, 68, 68, 0.1));
  color: var(--red, #dc2626);
}

.cs-panel__feed {
  min-height: 40px;
  background: var(--pp-surface-2, var(--soft));
  border-radius: calc(var(--radius, 14px) - 4px);
  padding: 10px;
}

.cs-panel__feed-empty {
  text-align: center;
  padding: 16px 0;
  font-size: 14px;
  margin: 0;
}

.cs-feed-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  flex-wrap: wrap;
  min-width: 0;
}

.cs-feed-item + .cs-feed-item {
  margin-top: 4px;
}

.cs-feed-item--ok {
  background: var(--green-soft, rgba(34, 197, 94, 0.06));
}

.cs-feed-item--error {
  background: var(--red-soft, rgba(239, 68, 68, 0.06));
}

.cs-feed-item__qty {
  font-weight: 700;
  font-size: 14px;
  color: var(--green, #16a34a);
  min-width: 28px;
}

.cs-feed-item__sku {
  font-weight: 600;
  white-space: nowrap;
}

.cs-feed-item__product {
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.cs-feed-item__bin {
  font-weight: 500;
  color: var(--accent, #3b82f6);
}

.cs-feed-item__putaway {
  width: 100%;
  font-size: 12px;
  padding: 4px 0 0 36px;
  color: var(--accent, #3b82f6);
}

.cs-feed-item__error {
  color: var(--red, #dc2626);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.cs-feed-item__scanned {
  font-size: 12px;
  font-style: italic;
}

.cs-feed-item__time {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-muted, #999);
  white-space: nowrap;
}

.cs-feed-item__remaining {
  font-size: 12px;
}

.cs-feed-item__complete {
  font-size: 12px;
  font-weight: 600;
  color: var(--green, #16a34a);
}

.cs-feed-item--complete {
  background: var(--green-soft, rgba(34, 197, 94, 0.1));
  border-left: 3px solid var(--green, #16a34a);
}

/* ── Session counter ─────────────────────────────────────── */

.cs-session-counter {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted, #666);
  padding: 6px 0;
  margin-bottom: 8px;
}

/* ── Last-scan persistent confirmation ───────────────────── */

.cs-last {
  border-radius: calc(var(--radius, 14px) - 4px);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--green-soft, rgba(34, 197, 94, 0.08));
  border: 1px solid var(--green, #16a34a);
  transition: background 0.2s, border-color 0.2s;
}

.cs-last--complete {
  background: var(--green-soft, rgba(34, 197, 94, 0.14));
  border-color: var(--green, #16a34a);
}

.cs-last--error {
  background: var(--red-soft, rgba(239, 68, 68, 0.08));
  border-color: var(--red, #dc2626);
}

.cs-last__main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
  min-width: 0;
}

.cs-last__qty {
  font-size: 28px;
  font-weight: 800;
  color: var(--green, #16a34a);
  line-height: 1;
}

.cs-last__sku {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}

.cs-last__product {
  font-size: 14px;
  color: var(--ink-muted, #666);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.cs-last__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}

.cs-last__shipment {
  color: var(--ink-muted, #666);
}

.cs-last__bin {
  font-weight: 600;
  color: var(--accent, #3b82f6);
}

.cs-last__remaining {
  font-weight: 500;
  color: var(--ink-muted, #666);
}

.cs-last__complete {
  font-weight: 700;
  font-size: 13px;
  color: var(--green, #16a34a);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--green-soft, rgba(34, 197, 94, 0.15));
}

/* ── Putaway callout (prominent, readable from arm's length) ─ */

.cs-putaway {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--accent-soft, rgba(59, 130, 246, 0.08));
  border: 1px solid var(--accent, #3b82f6);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.cs-putaway__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent, #3b82f6);
}

.cs-putaway__bin {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent, #3b82f6);
  letter-spacing: 0.02em;
}

.cs-putaway__reason {
  font-size: 13px;
  color: var(--ink-muted, #666);
}

@media (max-width: 640px) {
  .cs-panel {
    padding: 14px;
  }

  .cs-panel__setup-row {
    grid-template-columns: 1fr;
  }

  .cs-panel__scanner-input {
    font-size: 16px;
    padding: 10px 12px;
  }

  .qr-mode-toggle__btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .cs-last__qty {
    font-size: 22px;
  }

  .cs-last__sku {
    font-size: 16px;
  }

  .cs-putaway__bin {
    font-size: 18px;
  }
}

/* ── Tags ─────────────────────────────────────────────────── */

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--soft);
  color: var(--ink);
  white-space: nowrap;
}

.tag + .tag {
  margin-left: 4px;
}

.tag-subtle {
  background: var(--soft);
  color: var(--muted);
}

.tag-info {
  background: #dbeafe;
  color: #1e40af;
}

/* ── Button block ─────────────────────────────────────────── */

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

/* ── Toggle Switch ───────────────────────────────────────── */

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch-track {
  width: 44px;
  height: 24px;
  background: var(--line);
  border-radius: 12px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.toggle-switch input:checked + .toggle-switch-track {
  background: var(--accent);
}

.toggle-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-switch-track::after {
  transform: translateX(20px);
}

.toggle-switch-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  user-select: none;
}

/* ══════════════════════════════════════════════════════════
   WORKFLOW CONDITION BUILDER
   ══════════════════════════════════════════════════════════ */

.wf-cond-loading {
  font-size: 12px;
  color: #94a3b8;
  padding: 16px 0;
  text-align: center;
}

.wf-cond__logic {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.wf-cond__logic-label {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
}
.wf-cond__logic-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  transition: all .12s ease;
}
.wf-cond__logic-btn:hover {
  border-color: #a5b4fc;
  color: #4f46e5;
}
.wf-cond__logic-btn.is-active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

.wf-cond__rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
/* Two-line layout: field gets the entire top row so long variable names
   stay readable; operator + value sit on the second row. The remove
   button anchors to the top-right corner of the rule card. */
.wf-cond__rule {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "field field remove"
    "op    value ."
;
  gap: 6px 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fafbfc;
}
.wf-cond__rule:focus-within {
  border-color: #c7d2fe;
  background: #fff;
}
.wf-cond__rule--no-value {
  grid-template-areas:
    "field field remove"
    "op    op    ."
;
}
.wf-cond__field-cell { grid-area: field; }
.wf-cond__op { grid-area: op; }
.wf-cond__value-cell { grid-area: value; }
.wf-cond__remove { grid-area: remove; align-self: start; }
/* Match heights across the field button, operator select, and value input
   so the row reads as a single visual unit. Inputs and selects render at
   slightly different intrinsic heights without an explicit value. */
.wf-cond__op,
.wf-cond__value,
.wf-cond__field-btn {
  height: 30px;
  box-sizing: border-box;
  line-height: 1.3;
}
.wf-cond__op {
  font-size: 12px !important;
  padding: 4px 8px !important;
  min-width: 0;
}
.wf-cond__value {
  font-size: 12px !important;
  padding: 4px 8px !important;
}
.wf-cond__field-cell {
  min-width: 0;
  display: flex;
  align-items: stretch;
}
/* Value cell hosts the input plus an embedded picker button (positioned
   absolutely inside the input's right edge) so the input box's right edge
   aligns with the field button above. */
.wf-cond__value-cell {
  min-width: 0;
  position: relative;
  display: block;
}
.wf-cond__value-cell > .wf-cond__value {
  width: 100%;
}
.wf-cond__value--has-picker {
  padding-right: 28px !important;
}
.wf-cond__value-picker-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  border-radius: 3px;
  line-height: 0;
}
.wf-cond__value-picker-btn:hover {
  color: #6366f1;
  background: #eef2ff;
}

/* Field button: clickable placeholder that opens the variable picker */
.wf-cond__field-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  background: #fff;
  font-size: 12px !important;
  padding: 6px 8px !important;
  line-height: 1.3;
}
.wf-cond__field-btn:hover {
  border-color: #c7d2fe !important;
  background: #f8fafc;
}
.wf-cond__field-btn:hover .wf-cond__field-btn-icon {
  color: #6366f1;
}
.wf-cond__field-btn-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1e293b;
}
.wf-cond__field-btn.is-empty .wf-cond__field-btn-label {
  color: #94a3b8;
  font-style: italic;
}
.wf-cond__field-btn-icon {
  flex-shrink: 0;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
}
.wf-cond__field-btn-clear {
  flex-shrink: 0;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 3px;
}
.wf-cond__field-btn-clear:hover {
  color: #ef4444;
  background: #fee2e2;
}
.wf-cond__remove {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: #94a3b8;
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all .12s ease;
}
.wf-cond__remove svg { width: 14px; height: 14px; fill: currentColor; }
.wf-cond__remove:hover {
  background: #fef2f2;
  color: #dc2626;
}

.wf-cond__add {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed #d1d5db;
  background: none;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  transition: all .12s ease;
}
.wf-cond__add svg { width: 14px; height: 14px; fill: currentColor; }
.wf-cond__add:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: #f5f3ff;
}

/* ══════════════════════════════════════════════════════════
   WORKFLOW SIMULATION
   ══════════════════════════════════════════════════════════ */

.wf-sim__record-type {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

/* Standalone-button trigger banner: replaces the record-type / record-select
   fields when the workflow has no record context, so users see *why* there's
   no picker rather than thinking the panel is broken. Tinted slate to
   match the muted hint styling elsewhere in the simulate panel. */
.wf-sim__standalone-hint {
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
}
.wf-sim__standalone-hint p { font-size: 12px; line-height: 1.45; }

.wf-sim__results-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin: 20px 0 4px;
}
.wf-sim__results-desc {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 14px;
  line-height: 1.5;
}

.wf-sim__timeline {
  display: flex;
  flex-direction: column;
}
.wf-sim__step {
  display: flex;
  gap: 12px;
}
.wf-sim__step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
}
.wf-sim__step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wf-sim__step-dot--trigger { background: #dcfce7; color: #16a34a; }
.wf-sim__step-dot--condition { background: #fef3c7; color: #f59e0b; }
.wf-sim__step-dot--action { background: #e0e7ff; color: #6366f1; }
.wf-sim__step-line {
  width: 2px;
  flex: 1;
  min-height: 14px;
  background: #e2e8f0;
}
.wf-sim__step-content {
  flex: 1;
  min-width: 0;
  padding-bottom: 16px;
}
.wf-sim__step:last-child .wf-sim__step-content { padding-bottom: 0; }

.wf-sim__step-label {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
}
.wf-sim__branch {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 4px;
}
.wf-sim__branch--true { background: #dcfce7; color: #166534; }
.wf-sim__branch--false { background: #fee2e2; color: #991b1b; }

.wf-sim__rule-summary {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
  font-style: italic;
}
.wf-sim__would-run {
  display: block;
  font-size: 11px;
  color: #6366f1;
  margin-top: 4px;
  font-weight: 500;
}
.wf-sim__inputs {
  margin: 12px 0;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.wf-sim__inputs .wf-field__label { font-size: 13px; font-weight: 600; }
.wf-sim__inputs .wf-field__hint { margin-bottom: 8px; }
.wf-sim__error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #991b1b;
  margin-top: 12px;
  line-height: 1.5;
}

/* ── Simulator: Layer 1 + 2 additions ────────────────────── */
.wf-sim__mode {
  display: flex;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
}
.wf-sim__mode-btn {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.wf-sim__mode-btn + .wf-sim__mode-btn { border-left: 1px solid #e2e8f0; }
.wf-sim__mode-btn:hover { background: #eef2f7; color: #1e293b; }
.wf-sim__mode-btn.is-active {
  background: #1e293b;
  color: #f8fafc;
}

.wf-sim__meta {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
}

/* Form preview (user_input) */
.wf-sim__form {
  margin-top: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf-sim__field { display: flex; flex-direction: column; gap: 2px; }
.wf-sim__field-label { font-size: 12px; font-weight: 600; color: #1e293b; }
.wf-sim__field-req { color: #dc2626; }
.wf-sim__field-meta { font-size: 11px; color: #94a3b8; }
.wf-sim__field-value,
.wf-sim__field-options { font-size: 11px; color: #475569; }

/* Show-message blocks preview */
.wf-sim__blocks {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.wf-sim__block {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: #334155;
  line-height: 1.45;
}
.wf-sim__block--heading {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  background: #f1f5f9;
}
.wf-sim__block--table { padding: 0; overflow: hidden; }
.wf-sim__table-caption {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.wf-sim__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.wf-sim__table th,
.wf-sim__table td {
  padding: 6px 10px;
  border-bottom: 1px solid #f1f5f9;
  text-align: left;
}
.wf-sim__table th {
  background: #f8fafc;
  font-weight: 600;
  color: #475569;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Sortable headers in the simulation timeline — same UX grammar as the
   runtime modal but at the timeline's compact scale. */
.wf-sim__th--sortable {
  cursor: pointer;
  user-select: none;
  padding-right: 18px !important;
  position: relative;
}
.wf-sim__th--sortable:hover { background: #eef2f7; color: #1e293b; }
.wf-sim__th--sortable:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: -2px;
}
.wf-sim__th-sort-ind {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: #94a3b8;
  font-weight: 400;
}
.wf-sim__th--sort-asc,
.wf-sim__th--sort-desc {
  background: #eef2ff;
  color: #1e3a8a;
}
.wf-sim__th--sort-asc .wf-sim__th-sort-ind,
.wf-sim__th--sort-desc .wf-sim__th-sort-ind {
  color: #4338ca;
  font-weight: 700;
}

/* Per-column filter row that lives directly under the header row when
   the user enables column_filters on a show_message table. Sized to
   match the compact density of the simulation timeline. */
.wf-sim__table-filter-row th {
  background: #fff;
  text-transform: none;
  letter-spacing: 0;
  padding: 4px 6px;
  font-weight: 400;
}
.wf-sim__table-filter-input {
  width: 100%;
  padding: 3px 6px;
  font-size: 11px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  color: #0f172a;
  box-sizing: border-box;
}
.wf-sim__table-filter-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.wf-sim__table-empty {
  padding: 10px;
  text-align: center;
  color: #94a3b8;
  font-style: italic;
  font-size: 11px;
}

/* Pagination footer — sits inside the table's <tfoot> so it stays visually
   bound to the table even when the simulator card is narrow. */
.wf-sim__table-pager-cell {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 6px 10px;
}
.wf-sim__table-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.wf-sim__table-pager-status {
  font-size: 11px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.wf-sim__table-pager-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wf-sim__table-pager-btn {
  appearance: none;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.4;
}
.wf-sim__table-pager-btn:hover:not(:disabled) {
  background: #f1f5f9;
  color: #1e293b;
}
.wf-sim__table-pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wf-sim__table-pager-page {
  font-size: 11px;
  color: #475569;
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
}

/* CSV download bar — anchored under the table inside the simulator card.
   Visual weight matches the runtime modal's button so the simulation
   really feels like a preview of what users will see. */
.wf-sim__table-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 6px 10px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}
.wf-sim__table-csv-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #1e293b;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.wf-sim__table-csv-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.wf-sim__row--success { background: #f0fdf4; }
.wf-sim__row--warning { background: #fffbeb; }
.wf-sim__row--danger  { background: #fef2f2; }
.wf-sim__row--info    { background: #eff6ff; }
.wf-sim__row--muted   { color: #94a3b8; }
.wf-sim__progress {
  background: #e2e8f0; height: 6px; border-radius: 4px; overflow: hidden;
}
.wf-sim__progress-fill {
  background: #6366f1; height: 100%;
}

/* Chips (badges/tags inside steps) */
.wf-sim__chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #334155;
  margin-top: 4px;
}
.wf-sim__chip--ok       { background: #dcfce7; color: #166534; }
.wf-sim__chip--input    { background: #e0f2fe !important; color: #0369a1 !important; }
.wf-sim__chip--wait     { background: #fef3c7 !important; color: #92400e !important; }
.wf-sim__chip--stop     { background: #fee2e2 !important; color: #991b1b !important; }
.wf-sim__chip--intent-info    { background: #e0f2fe; color: #075985; }
.wf-sim__chip--intent-success { background: #dcfce7; color: #166534; }
.wf-sim__chip--intent-warning { background: #fef3c7; color: #92400e; }
.wf-sim__chip--intent-danger  { background: #fee2e2; color: #991b1b; }
.wf-sim__chip--tone-default { background: #f1f5f9; color: #334155; }
.wf-sim__chip--tone-success { background: #dcfce7; color: #166534; }
.wf-sim__chip--tone-warning { background: #fef3c7; color: #92400e; }
.wf-sim__chip--tone-danger  { background: #fee2e2; color: #991b1b; }
.wf-sim__chip--tone-info    { background: #e0f2fe; color: #075985; }
.wf-sim__chip--tone-muted   { background: #f8fafc; color: #94a3b8; }
.wf-sim__chip--attr   { background: #ede9fe; color: #5b21b6; }
.wf-sim__chip--before { background: #f1f5f9; color: #475569; text-decoration: line-through; opacity: 0.85; }
.wf-sim__chip--after  { background: #dcfce7; color: #166534; }

/* Branch pair (show_message) */
.wf-sim__branches {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.wf-sim__branch-col {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
  min-width: 0;
}
.wf-sim__branch-col--proceed { border-left: 3px solid #16a34a; }
.wf-sim__branch-col--cancel  { border-left: 3px solid #dc2626; }
.wf-sim__branch-head {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.wf-sim__branch-empty {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}

/* Foreach iterations */
.wf-sim__iterations {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.wf-sim__iteration {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
  background: #f8fafc;
}
.wf-sim__iteration-head {
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Action diff/preview cards */
.wf-sim__preview {
  margin-top: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f8fafc;
}
.wf-sim__preview-head {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 6px;
}
.wf-sim__diff { display: flex; flex-direction: column; gap: 4px; }
.wf-sim__diff-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 11px;
}
.wf-sim__diff-row.is-changed { font-weight: 600; }
.wf-sim__diff-arrow { color: #94a3b8; }
.wf-sim__kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 10px;
  font-size: 11px;
  margin: 0;
}
.wf-sim__kv dt { color: #64748b; font-weight: 600; }
.wf-sim__kv dd { color: #334155; margin: 0; word-break: break-word; }

/* transform_data live preview — pipeline summary, stat chips, and sample
   tables. Designed to feel like a mini "before/after" view of the data so
   users can confirm their pipeline is doing what they expect. */
.wf-sim__preview--tdata { background: #f0f9ff; border-color: #bae6fd; }
.wf-sim__tdata-pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #0c4a6e;
  margin-bottom: 8px;
}
.wf-sim__tdata-pipeline code {
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 3px;
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: #0c4a6e;
}
.wf-sim__tdata-sep { color: #7dd3fc; font-weight: 700; }

.wf-sim__tdata-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.wf-sim__tdata-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-size: 11px;
  color: #475569;
}
.wf-sim__tdata-stat.is-output {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.wf-sim__tdata-stat.is-warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.wf-sim__tdata-stat-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 9.5px;
  opacity: 0.85;
}
.wf-sim__tdata-stat-value { font-weight: 600; }

.wf-sim__tdata-sample {
  margin-top: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}
.wf-sim__tdata-sample-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.wf-sim__tdata-sample-title {
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wf-sim__tdata-sample-sub {
  font-size: 10.5px;
  color: #94a3b8;
}
.wf-sim__tdata-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
.wf-sim__tdata-table thead { background: #f8fafc; }
.wf-sim__tdata-table th {
  text-align: left;
  padding: 4px 8px;
  font-weight: 600;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.wf-sim__tdata-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  vertical-align: top;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-sim__tdata-table tbody tr:last-child td { border-bottom: none; }
.wf-sim__tdata-table td.is-empty { color: #cbd5e1; }

.wf-sim__tdata-empty {
  padding: 8px 10px;
  font-size: 11px;
  color: #64748b;
  text-align: center;
  font-style: italic;
}
.wf-sim__tdata-error {
  margin-top: 6px;
  padding: 6px 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #991b1b;
  font-size: 11px;
}

/* Step-through controls */
.wf-sim__try-other {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #1e293b;
  cursor: pointer;
}
.wf-sim__try-other:hover { background: #f1f5f9; }

/* Step-through modal */
.wf-sim-modal__overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: grid; place-items: center;
  z-index: 1000;
  padding: 24px;
}
.wf-sim-modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .35);
}
.wf-sim-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
}
.wf-sim-modal__title { margin: 0; font-size: 16px; font-weight: 700; color: #0f172a; }
.wf-sim-modal__close {
  background: none; border: none;
  font-size: 22px; line-height: 1;
  color: #64748b; cursor: pointer;
  padding: 0 4px;
}
.wf-sim-modal__close:hover { color: #1e293b; }
.wf-sim-modal__tag {
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 18px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Simulator step-through preview that wraps the real .wf-modal chrome
   around the shared interaction renderer. Reuses every runtime modal
   style as-is; the only deltas live here:
   – a small "preview" tag and assignee row above the rendered body
   – a slightly bumped z-index so the preview sits above the workflow
     simulator pane without colliding with the real run modal.        */
.wf-sim-runtime-modal { z-index: 100050; }
.wf-sim-runtime-modal .wf-modal__body { padding-top: 0; }
.wf-sim-runtime-modal__tag {
  align-self: flex-start;
  display: inline-block;
  margin: 12px 0 10px;
  padding: 4px 10px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 999px;
}
.wf-sim-runtime-modal__assignee {
  font-size: 12px;
  color: #475569;
  margin-bottom: 12px;
}
.wf-sim-modal__meta {
  font-size: 12px;
  color: #475569;
  padding: 8px 18px 0;
}
.wf-sim-modal__desc {
  font-size: 13px; color: #334155; margin: 0 0 12px;
}
.wf-sim-modal__body {
  padding: 16px 18px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.wf-sim-modal__form { display: flex; flex-direction: column; gap: 12px; }
.wf-sim-modal__field { display: flex; flex-direction: column; gap: 4px; }
.wf-sim-modal__label { font-size: 12px; font-weight: 600; color: #1e293b; }
.wf-sim-modal__foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

/* Highlight the step that the modal is paused on. */
.wf-sim__step.is-awaiting {
  background: #fffbeb;
  border-radius: 8px;
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

/* "Reached the end" footer in step-through mode. */
.wf-sim__complete {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.wf-sim__complete-msg { color: #14532d; font-size: 13px; font-weight: 600; }

/* ── Button trigger panel ─────────────────────────────── */
/* The button trigger panel now reuses the show_message panel chrome —
   .wf-show-message-node + .wf-sm-section/.wf-sm-header — so most layout
   comes from those rules. The styles below are scoped overrides for the
   header preview and a few small content tweaks specific to triggers. */
.wf-btn-trigger { display: flex; flex-direction: column; }
.wf-btn-trigger__visibility,
.wf-btn-trigger__inputs { margin-top: 4px; }

.wf-btn-trigger__intro {
  margin: 0 0 10px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.wf-btn-trigger__header {
  /* Lighter header than show_message; the live preview is already a
     visual anchor so we don't need additional chrome. */
  background: linear-gradient(180deg, #fafbff 0%, #f4f6ff 100%);
}

.wf-btn-trigger__preview {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

/* The preview is a non-interactive snapshot of how the button renders on
   a record page — colored to match our standard primary action button. */
.wf-btn-trigger__preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #4f46e5;
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-btn-trigger__preview-icon { display: inline-flex; line-height: 0; }
.wf-btn-trigger__preview-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf-btn-trigger__preview-meta {
  font-size: 12px;
  color: #64748b;
  font-style: italic;
}

/* ── Run detail: parent/child lineage ──────────────── */
.wf-run-lineage {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin: 0 0 16px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 8px; font-size: 13px; color: #334155;
}
.wf-run-lineage svg { color: #64748b; flex-shrink: 0; }
.wf-run-lineage code {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 4px; padding: 1px 5px; font-size: 12px;
}

.wf-run-detail-children { margin-bottom: 16px; }
.wf-run-children-list { display: flex; flex-direction: column; }
.wf-run-children-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
}
.wf-run-children-row:last-child { border-bottom: none; }
.wf-run-children-row__main { font-size: 14px; color: #1e293b; min-width: 0; }
.wf-run-children-row__meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Trigger-workflow action panel ─────────────────── */
/* "+ Add" buttons used inside the trigger-workflow panel (and a handy
   shared style for any future config panel that wants the same look). */
.wf-field__add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 6px 12px;
  background: #fff; border: 1px dashed #cbd5e1;
  border-radius: 6px; color: #475569;
  font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.12s ease;
}
.wf-field__add-btn:hover {
  background: #f8fafc; border-color: #94a3b8; color: #1e293b;
  border-style: solid;
}
.wf-field__add-btn:active {
  background: #f1f5f9;
}
.wf-field__add-btn svg { flex-shrink: 0; color: #94a3b8; }
.wf-field__add-btn:hover svg { color: #475569; }

/* Read-only rows showing records auto-forwarded from the parent's
   own trigger. Visually distinct from editable rows so authors can
   see at a glance that these are "automatic". */
.wf-trigger-inherited {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 6px; margin-bottom: 10px;
}
.wf-trigger-inherited__row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  font-size: 13px;
}
.wf-trigger-inherited__badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  background: #0369a1; color: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.wf-trigger-inherited__label {
  color: #0c4a6e; font-weight: 600;
}
.wf-trigger-inherited__key {
  margin-left: auto;
  padding: 2px 7px;
  background: #fff;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #0369a1;
}

.wf-trigger-bindings,
.wf-trigger-inputs {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 6px;
}
.wf-trigger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 28px;
  gap: 6px; align-items: center;
}
.wf-trigger-row__key,
.wf-trigger-row__value { min-width: 0; }
.wf-trigger-row__key {
  text-overflow: ellipsis;
}
.wf-trigger-row__value-wrap {
  position: relative;
  min-width: 0;
}
.wf-trigger-row__value-wrap .wf-trigger-row__value {
  width: 100%;
  padding-right: 30px;
}
.wf-trigger-row__picker {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  cursor: pointer; color: #64748b;
  padding: 0;
}
.wf-trigger-row__picker:hover {
  background: #e2e8f0; color: #334155;
}
.wf-trigger-row__remove {
  background: none; border: 1px solid #e2e8f0;
  border-radius: 6px; height: 32px; width: 28px;
  cursor: pointer; color: #94a3b8;
  display: flex; align-items: center; justify-content: center;
}
.wf-trigger-row__remove:hover {
  border-color: #fca5a5; color: #dc2626;
}

/* ── Advanced options toggle ──────────────────────────── */
.wf-adv-toggle {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: #64748b;
  padding: 4px 0; margin-top: 2px;
}
.wf-adv-toggle:hover { color: #334155; }
.wf-adv-toggle__icon { transition: transform 0.15s; }
.wf-adv-toggle__icon.is-open { transform: rotate(90deg); }
.wf-adv-panel { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.wf-adv-panel.is-hidden { display: none; }

/* ── Icon picker (legacy grid — kept for back-compat) ── */
.wf-icon-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wf-icon-picker__btn {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #e2e8f0; border-radius: 6px; background: #fff;
  color: #64748b; cursor: pointer; transition: all 0.15s;
}
.wf-icon-picker__btn:hover { border-color: #cbd5e1; color: #334155; background: #f8fafc; }
.wf-icon-picker__btn.is-active { border-color: #6366f1; background: #eef2ff; color: #4f46e5; }

/* ── Heroicons searchable dropdown (button-trigger icon) ── */
.wf-icon-select { position: relative; margin-top: 4px; }
.wf-icon-select__trigger {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
  color: #334155; font-size: 13px; cursor: pointer; transition: all 0.15s;
  text-align: left;
}
.wf-icon-select__trigger:hover { border-color: #cbd5e1; background: #f8fafc; }
.wf-icon-select__trigger[aria-expanded="true"] {
  border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.wf-icon-select__current {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; color: #4f46e5; flex-shrink: 0;
}
.wf-icon-select__label { flex: 1; color: #334155; text-transform: capitalize; }
.wf-icon-select__chevron {
  display: inline-flex; align-items: center; justify-content: center;
  color: #94a3b8; flex-shrink: 0; transition: transform 0.15s;
}
.wf-icon-select__trigger[aria-expanded="true"] .wf-icon-select__chevron {
  transform: rotate(180deg);
}

/* Positioning is applied inline by the JS (viewport-aware, portaled to
   <body>) so the dropdown can escape the sidebar's overflow clipping and
   flip above when near the bottom of the screen. */
.wf-icon-select__panel {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.12);
  z-index: 1000;
  display: flex; flex-direction: column; max-height: 340px; overflow: hidden;
}
.wf-icon-select__panel.is-hidden { display: none; }

.wf-icon-select__search {
  position: relative; padding: 8px; border-bottom: 1px solid #f1f5f9; background: #fff;
}
.wf-icon-select__search-icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; pointer-events: none;
}
.wf-icon-select__search-input {
  width: 100%; padding: 7px 10px 7px 30px;
  border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc;
  font-size: 13px; color: #0f172a; outline: none; transition: border-color 0.15s, background 0.15s;
}
.wf-icon-select__search-input:focus { border-color: #6366f1; background: #fff; }
.wf-icon-select__search-input::placeholder { color: #94a3b8; }

.wf-icon-select__grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  padding: 8px; overflow-y: auto; min-height: 80px;
}
.wf-icon-select__cell {
  width: 100%; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: #64748b; cursor: pointer; transition: all 0.1s;
}
.wf-icon-select__cell:hover { background: #f1f5f9; color: #0f172a; }
.wf-icon-select__cell.is-active {
  background: #eef2ff; border-color: #6366f1; color: #4f46e5;
}

.wf-icon-select__loading,
.wf-icon-select__empty {
  grid-column: 1 / -1;
  padding: 24px 12px; text-align: center;
  color: #94a3b8; font-size: 12px; margin: 0;
}
.wf-icon-select__empty.is-hidden { display: none; }

/* ── Input fields builder ─────────────────────────────── */
.wf-input-fields { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.wf-input-field-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  position: relative;
}
.wf-input-field-row .wf-cond__remove {
  position: absolute;
  top: 8px;
  right: 8px;
}
.wf-input-field__label { font-size: 13px; }
.wf-input-field__key { font-size: 12px; color: #64748b; font-family: monospace; }
.wf-input-field__meta {
  display: flex;
  gap: 8px;
  align-items: center;
}
.wf-input-field__type { font-size: 12px; flex: 1; }
.wf-input-field__req { font-size: 12px; color: #64748b; white-space: nowrap; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.wf-input-field__req input { width: 14px; height: 14px; }
.wf-input-field__default-wrap .wf-input-field__default { font-size: 13px; width: 100%; box-sizing: border-box; }

/* ── Schedule trigger panel ───────────────────────────── */
.wf-schedule-trigger { display: flex; flex-direction: column; gap: 14px; }
.wf-schedule__freq { display: flex; gap: 8px; align-items: center; }
.wf-schedule__freq-val { width: 70px; text-align: center; }
.wf-schedule__freq-unit { flex: 1; }

/* ── Field hint (used in trigger panels) ──────────────── */
.wf-field__hint {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 0 6px 0;
  line-height: 1.4;
}

/* ── Liquid hint for action config ────────────────────── */
.wf-liquid-hint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
  font-family: monospace;
}

/* ── Update record action rows ────────────────────────── */
.wf-update-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.wf-update-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  gap: 6px;
  align-items: start;
}
.wf-update-row .wf-field__textarea { min-height: 36px; resize: vertical; }

/* ── Workflow button on show pages ────────────────────── */
.wf-buttons-menu { display: inline-flex; }
.wf-buttons-menu__panel { min-width: 220px; }
.wf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
}
.wf-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.wf-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wf-btn--loading { color: #94a3b8; }
.wf-btn svg { width: 14px; height: 14px; }

/* ── Workflow button input modal ──────────────────────── */
/* Modals must always sit on top of the side menu, the global header,
   and the workflow takeover overlays. Use a value just below the
   formula-popup ceiling (2147483700) so any inline pickers that the
   modal hosts can still float above its own body. */
.wf-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 2147483600;
  display: flex; align-items: center; justify-content: center;
}
.wf-modal {
  background: #fff; border-radius: 12px; width: 440px; max-width: 95vw;
  max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
/* Input modals (workflow triggers): wider shell, no outer padding — body/header/footer handle spacing */
.wf-modal-backdrop .wf-modal {
  width: min(560px, 95vw);
  padding: 0;
}
.wf-modal-overlay .wf-modal {
  width: 400px;
  padding: 24px;
}
.wf-modal__header {
  padding: 16px 20px; border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.wf-modal__header h3 { margin: 0; font-size: 15px; font-weight: 600; }
/* Wrapper around the title + optional help text inside the header so
   the close (X) button stays right-aligned via flex space-between
   while the description text stacks neatly under the title. */
.wf-modal__header-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.wf-modal__title-desc {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}
/* Tint the help text with the intent color so it sits comfortably
   inside the colored header band. */
.wf-modal--intent-info    .wf-modal__title-desc { color: #1e3a8a; }
.wf-modal--intent-success .wf-modal__title-desc { color: #166534; }
.wf-modal--intent-warning .wf-modal__title-desc { color: #92400e; }
.wf-modal--intent-danger  .wf-modal__title-desc { color: #991b1b; }
.wf-modal__close {
  background: none; border: none; cursor: pointer; color: #94a3b8;
  padding: 4px; border-radius: 4px;
}
.wf-modal__close:hover { color: #334155; background: #f1f5f9; }
.wf-modal__body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.wf-modal__field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; color: #334155; }
.wf-modal__field label .wf-modal__req { color: #ef4444; }
.wf-modal__field input,
.wf-modal__field textarea,
.wf-modal__field select {
  width: 100%; padding: 8px 10px; font-size: 13px; border: 1px solid #e2e8f0;
  border-radius: 6px; background: #fff;
}
.wf-modal__field textarea { resize: vertical; min-height: 60px; }
.wf-modal__select-multi {
  min-height: 100px;
  padding: 6px 8px;
}
.wf-modal__bool-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  font-size: 13px;
  color: #334155;
}
.wf-modal__bool-row input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
}
.wf-modal__bool-caption { font-weight: 500; }

/* Radio groups (user input & trigger modals) */
.wf-modal__radio-group {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0;
}
.wf-modal__radio-group--error .wf-modal__radio {
  border-color: #fca5a5;
}
.wf-modal__radio {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  margin: 0; padding: 11px 14px; border-radius: 10px;
  border: 1.5px solid #e2e8f0; background: #fff;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  position: relative;
}
.wf-modal__radio:hover {
  border-color: #a5b4fc; background: #f8f9ff;
}
.wf-modal__radio:has(input:checked) {
  border-color: #6366f1; background: #eef2ff;
  box-shadow: 0 0 0 1px #6366f1;
}
.wf-modal__radio input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.wf-modal__radio-text {
  font-size: 13.5px; line-height: 1.45; color: #1e293b; font-weight: 450;
}
.wf-modal__radio:has(input:checked) .wf-modal__radio-text {
  color: #3730a3;
}

.wf-modal__footer {
  padding: 12px 20px; border-top: 1px solid #e2e8f0;
  display: flex; justify-content: flex-end; gap: 8px;
  background: #f1f5f9;
}
.wf-modal__btn {
  padding: 8px 18px; font-size: 13px; font-weight: 500; border-radius: 6px;
  border: 1px solid #e2e8f0; cursor: pointer; transition: all 0.15s;
}
.wf-modal__btn--primary { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.wf-modal__btn--primary:hover { background: #4338ca; }
.wf-modal__btn--cancel { background: #fff; color: #64748b; }
.wf-modal__btn--cancel:hover { background: #f1f5f9; }
.wf-modal__btn--loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wf-modal__btn--loading .wf-btn-spinner {
  flex-shrink: 0;
}
.wf-modal__body--locked {
  opacity: 0.72;
}
#wf-unified-modal[data-wf-busy="1"] {
  cursor: progress;
}

/* ── Workflow create landing page ─────────────────────── */
.wf-create { max-width: 560px; margin: 60px auto 40px; padding: 0 20px; }
.wf-create__hero { text-align: center; margin-bottom: 28px; }
.wf-create__hero-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 20px; background: #f1f5f9; }
.wf-create__ai { margin-bottom: 20px; }
.wf-create__ai-input-wrap {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 8px 10px 8px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wf-create__ai-input-wrap:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.wf-create__ai-input-wrap.is-loading { opacity: 0.6; pointer-events: none; }
.wf-create__ai-icon { color: #6366f1; flex-shrink: 0; }
.wf-create__ai-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; color: #0f172a; padding: 6px 0;
}
.wf-create__ai-input::placeholder { color: #94a3b8; }
.wf-create__ai-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: #6366f1; color: #fff; cursor: pointer; flex-shrink: 0;
  transition: background 0.15s;
}
.wf-create__ai-btn:hover { background: #4f46e5; }
.wf-create__ai-btn:disabled { background: #a5b4fc; cursor: default; }
.wf-create__ai-status {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  margin-top: 10px; font-size: 13px; color: #6366f1;
}
.wf-create__ai-status.is-hidden { display: none; }

.wf-create__divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; color: #94a3b8; font-size: 13px;
}
.wf-create__divider::before, .wf-create__divider::after {
  content: ""; flex: 1; height: 1px; background: #e2e8f0;
}

.wf-create__options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wf-create__card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 24px 16px; border: 1px solid #e2e8f0; border-radius: 12px;
  background: #fff; text-decoration: none; color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wf-create__card:hover { border-color: #6366f1; box-shadow: 0 2px 8px rgba(99,102,241,.1); }
.wf-create__card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px;
  background: #f1f5f9; color: #6366f1; margin-bottom: 12px;
}
.wf-create__card h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: #0f172a; }
.wf-create__card p { font-size: 12px; color: #64748b; margin: 0; line-height: 1.4; }

/* ── Workflow template library ────────────────────────── */
.wf-tpl { max-width: 960px; margin: 0 auto; padding: 32px 20px; }
.wf-tpl__header { margin-bottom: 24px; }
.wf-tpl__header h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.wf-tpl__header p { font-size: 13px; color: #64748b; margin: 0; }

.wf-tpl__filters { display: flex; gap: 10px; margin-bottom: 20px; }
.wf-tpl__search {
  flex: 1; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 13px; outline: none; background: #fff;
}
.wf-tpl__search:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,.1); }
.wf-tpl__cat-select {
  padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 13px; background: #fff; cursor: pointer;
}

.wf-tpl__count { font-size: 12px; color: #94a3b8; margin-bottom: 14px; }
.wf-tpl__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

.wf-tpl__card {
  display: flex; flex-direction: column; padding: 18px; border: 1px solid #e2e8f0;
  border-radius: 10px; background: #fff; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s; text-decoration: none; color: inherit;
}
.wf-tpl__card:hover { border-color: #6366f1; box-shadow: 0 2px 8px rgba(99,102,241,.1); }
.wf-tpl__card-name { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: #0f172a; }
.wf-tpl__card-desc { font-size: 12px; color: #64748b; margin: 0 0 12px; line-height: 1.5; flex: 1; }
.wf-tpl__card-footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wf-tpl__tag {
  display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 8px;
  border-radius: 4px; background: #f1f5f9; color: #475569;
}
.wf-tpl__card--empty { grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: #94a3b8; font-size: 13px; }

/* ── Template preview modal ──────────────────────────── */
.tpl-preview-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.tpl-preview-overlay.is-active { opacity: 1; pointer-events: auto; }

.tpl-preview-modal {
  background: #fff; border-radius: 14px;
  width: 90vw; max-width: 860px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(12px); transition: transform .2s ease;
}
.tpl-preview-overlay.is-active .tpl-preview-modal { transform: translateY(0); }

.tpl-preview-modal__header {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 24px 16px; border-bottom: 1px solid #f1f5f9;
}
.tpl-preview-modal__info { flex: 1; min-width: 0; }
.tpl-preview-modal__title { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0 0 4px; }
.tpl-preview-modal__desc { font-size: 13px; color: #64748b; margin: 0; line-height: 1.5; }
.tpl-preview-modal__close {
  flex-shrink: 0; width: 32px; height: 32px;
  border: none; background: #f1f5f9; border-radius: 8px;
  font-size: 20px; color: #64748b; cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s;
}
.tpl-preview-modal__close:hover { background: #e2e8f0; color: #334155; }

.tpl-preview-modal__canvas {
  flex: 1; overflow: auto;
  background:
    radial-gradient(circle, #d4d8dd 0.8px, transparent 0.8px);
  background-size: 20px 20px;
  background-color: #f8fafc;
  min-height: 280px;
}
.tpl-preview-graph {
  display: flex; flex-direction: column; align-items: center;
  padding: 36px 24px 60px;
  min-height: 100%; min-width: fit-content;
}
.tpl-preview-zone { padding: 0; margin: 0; }
.tpl-preview-zone .fl-add-row { display: none; }
.tpl-preview-zone .fl-delete { display: none; }
.tpl-preview-card { cursor: default !important; pointer-events: none; }
.tpl-preview-modal__empty { text-align: center; padding: 60px 20px; color: #94a3b8; font-size: 13px; }

.tpl-preview-modal__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 24px; border-top: 1px solid #f1f5f9;
}

/* ── Bulk edit modal ────────────────────────────────── */
.bulk-edit-table {
  width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px;
}
.bulk-edit-table thead th {
  text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted, #64748b); padding: 6px 8px;
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.bulk-edit-th-check { width: 28px; }
.bulk-edit-th-field { width: 35%; }
.bulk-edit-th-value { }
.bulk-edit-row td { padding: 8px 8px; border-bottom: 1px solid var(--line, #f1f5f9); vertical-align: middle; }
.bulk-edit-row:last-child td { border-bottom: none; }
.bulk-edit-td-check { width: 28px; text-align: center; }
.bulk-edit-td-check input[type="checkbox"] { margin: 0; cursor: pointer; }
.bulk-edit-td-field { font-weight: 500; color: var(--text, #0f172a); white-space: nowrap; }
.bulk-edit-td-field label { cursor: pointer; display: block; }
.bulk-edit-td-value { }
.bulk-edit-input { width: 100%; }
.bulk-edit-placeholder { color: var(--text-muted, #cbd5e1); font-size: 13px; }
.bulk-edit-hint { display: block; font-size: 11px; color: var(--text-muted, #94a3b8); margin-top: 2px; }
.bulk-edit-section-row td {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  color: var(--text-muted, #64748b); padding: 12px 8px 6px; border-bottom: 1px solid var(--line, #e2e8f0);
  background: var(--surface, #f8fafc);
}

/* ── PO bulk line item actions ─────────────────────── */
.po-bulk-actions-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.po-bulk-actions-bar .btn-sm {
  padding: 4px 10px; font-size: 12px; border-radius: 8px;
}
.po-bulk-actions-bar .btn-danger-outline {
  color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); background: transparent;
}
.po-bulk-actions-bar .btn-danger-outline:hover {
  background: var(--danger, #ef4444); color: #fff;
}
.bulk-line-item-modal { width: min(680px, 94vw); }
.bulk-line-item-modal .modal-body { max-height: 60vh; overflow-y: auto; }

/* Recommendations bulk qty override follow-up */
.repl-bulk-resolution-fieldset { border: 0; padding: 0; margin: 1rem 0 0; }
.repl-bulk-resolution-fieldset legend { margin-bottom: 0.35rem; }
.repl-bulk-resolution-fieldset .radio-label {
  display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; line-height: 1.35;
}
.repl-bulk-failed-wrap { margin-top: 1rem; max-height: min(40vh, 320px); overflow: auto; }

.move-target-list {
  display: flex; flex-direction: column; gap: 4px; margin-top: 8px;
}
.move-target-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 10px;
  cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.move-target-option:hover {
  border-color: var(--accent, #6366f1); background: #f8faff;
}
.move-target-option input[type="radio"] { margin: 0; flex-shrink: 0; }
.move-target-option:has(input:checked) {
  border-color: var(--accent, #6366f1); background: #f0f0ff;
}
.move-target-label {
  display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.4;
}
.move-target-label strong { font-weight: 600; }
.move-target-divider {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  color: var(--text-muted, #94a3b8); padding: 10px 0 4px;
}

/* ── Info popover (hover card on icon) ───────────────── */
.info-popover-wrap {
  position: relative; display: inline-flex; align-items: center;
}
.info-popover-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--line, #e2e8f0); background: var(--bg, #fff);
  color: var(--text-muted, #94a3b8); cursor: pointer; transition: all 0.12s;
}
.info-popover-trigger:hover {
  background: var(--surface, #f1f5f9); color: var(--text, #0f172a);
  border-color: #cbd5e1;
}
.info-popover {
  display: none; position: absolute; bottom: calc(100% + 8px); right: -8px;
  z-index: 120; width: 260px;
  background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 12px 14px;
  font-size: 12px; line-height: 1.5;
}
.info-popover-wrap:hover .info-popover { display: block; }
.info-popover__title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted, #64748b);
  margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line, #e2e8f0);
}
.info-popover__dl {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
}
.info-popover__dl dt {
  font-weight: 500; color: var(--text-muted, #64748b); white-space: nowrap;
}
.info-popover__dl dd {
  margin: 0; color: var(--text, #0f172a); font-weight: 500; text-align: right;
}

/* ── Policy meta bar ──────────────────────────────────── */
/* ── Replenishment recommendations page ─────────────── */

/* KPI summary cards */
.repl-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.repl-kpi-card {
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  padding: 16px 20px;
  transition: box-shadow 0.15s ease;
}
.repl-kpi-card:hover {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.repl-kpi-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text, #0f172a);
  line-height: 1.1;
}
.repl-kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.repl-kpi-card--danger .repl-kpi-value { color: #dc2626; }
.repl-kpi-card--danger { border-color: #fecaca; background: #ffffff; }
.repl-kpi-meta {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  text-align: right;
  margin-top: -4px;
}
@media (max-width: 768px) {
  .repl-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Replenishment stat bar (compact alternative to kpi cards) ── */
.repl-stat-bar {
  display: flex;
  align-items: center;
  gap: 0;
  /* Bleed to full width while sitting flush below the topbar with a small gap */
  margin: -18px -24px 24px;
  padding: 12px 24px;
  background: #f8fafc;
  border-top: 1px solid var(--line, #e5e7eb);
  border-bottom: 1px solid var(--line, #e5e7eb);
  flex-wrap: wrap;
}

.repl-stat-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 24px;
  margin-right: 24px;
  border-right: 1px solid var(--line, #e5e7eb);
}

.repl-stat-item:last-of-type {
  border-right: none;
}

.repl-stat-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink, #1f2933);
  line-height: 1.15;
}

.repl-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.repl-stat-item--danger .repl-stat-value {
  color: #dc2626;
}

.repl-stat-item--warning .repl-stat-value {
  color: #b45309;
}

.repl-stat-link {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
  color: inherit;
}

.repl-stat-link:hover .repl-stat-value {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.repl-stat-meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted, #94a3b8);
  white-space: nowrap;
  align-self: center;
}

@media (max-width: 640px) {
  .repl-stat-bar { gap: 12px; padding: 10px 16px; margin-left: -16px; margin-right: -16px; }
  .repl-stat-item { border-right: none; padding-right: 0; margin-right: 0; }
  .repl-stat-meta { margin-left: 0; width: 100%; }
}


/* Used by variant, product, vendor show pages (and any future record page). */

/* Break out of .content padding so tabs span full width like the header */
.entity-show {
  margin-top: -24px;
  margin-left: -24px;
  margin-right: -24px;
  width: calc(100% + 48px);
}
/* Override base .tabs row flex — stack everything vertically */
.entity-show__tabs.tabs {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
}
.entity-show__tabs > .tabs__bar {
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
.entity-show__tabs .tabs__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  box-sizing: border-box;
  width: 100%;
}
.entity-show__tabs .tabs__panel .panel,
.entity-show__tabs .tabs__panel .panel.table-panel {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* "Add tab" affordance — rendered as the trailing item in an entity
   show page's tab bar, opening a dropdown of pinnable pages. */
.tabs__add {
  display: inline-flex;
  align-items: stretch;
}
.tabs__add-tab {
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.tabs__add-tab[aria-expanded="true"],
.tabs__add-tab:hover {
  color: var(--accent);
  background: var(--soft);
}
.tabs__add-menu {
  text-align: left;
  max-height: 320px;
  overflow-y: auto;
}
.dropdown-section-label {
  padding: 6px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Removable embed tab: tab label + inline "×" un-embed control. */
.tabs__tab-group {
  display: inline-flex;
  align-items: stretch;
}
.tabs__tab--removable {
  padding-right: 6px;
}
.tabs__tab-remove-form {
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.tabs__tab-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: auto 10px auto 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.tabs__tab-remove:hover {
  opacity: 1;
  background: var(--danger-weak, #fef2f2);
  color: var(--danger, #dc2626);
}

/* At-a-glance KPI row below tabs — always visible, horizontally padded to match panels */
.entity-show__glance.repl-kpi-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 16px 24px;
  width: 100%;
  box-sizing: border-box;
}
.entity-show__glance .repl-kpi-card { min-width: 0; }
@media (max-width: 900px) {
  .entity-show__glance.repl-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .entity-show__glance.repl-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Overview: 2-column grid for detail panels */
.entity-show__overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.entity-show__overview-grid > .panel { min-width: 0; }
.entity-show__overview-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.entity-show__overview-col > .panel { min-width: 0; }
@media (max-width: 768px) {
  .entity-show__overview-grid { grid-template-columns: 1fr; }
}

/* Metric-cards spanning full available width inside tabs */
.entity-show__tabs .metric-cards {
  margin-bottom: 0;
  grid-template-columns: repeat(3, 1fr);
}

/* ── Variant show page ──────────────────────────────────── */
/* Structural rules inherited from .entity-show above */

/* Variant-specific rules */
.variant-show__block-reason { font-size: 11px; line-height: 1.3; margin-top: 6px; }

/* ── Reservation breakdown (committed stock drill-down) ── */
.rsv-trigger {
  color: var(--pp-accent);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dashed var(--pp-accent);
}
.rsv-trigger:hover { color: var(--pp-accent-hover); border-bottom-style: solid; }

.rsv-empty {
  text-align: center;
  padding: 24px 16px;
}

/* ── Product show page ──────────────────────────────────── */
/* Structural rules inherited from .entity-show above */

/* Product-specific rules */
.product-show__images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
}
.prod-listings-notes {
  margin: 0;
  padding-left: 1.1rem;
}
/* ── Channel listing show page ─────────────────────────── */
.channel-listing-show {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
}
.channel-listing-show__avatar {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.channel-listing-show__kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
@media (max-width: 900px) {
  .channel-listing-show__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.channel-listing-show__grid {
  align-items: stretch;
}
.channel-listing-show__subhead {
  font-size: 13px;
  font-weight: 600;
  margin: 1.25rem 0 0.35rem;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.channel-listing-show__sync-note {
  margin: 0 0 0.75rem;
  line-height: 1.4;
}
.channel-listing-show__description {
  max-height: 14rem;
  overflow: auto;
}
.channel-listing-show__list {
  margin: 0;
  padding-left: 1.15rem;
}
.channel-listing-show__list li {
  margin: 0.2rem 0;
}
.channel-listing-show__json {
  margin: 0;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
}
.channel-listing-show__details {
  margin-bottom: 0.75rem;
}
.channel-listing-show__details summary {
  cursor: pointer;
  font-weight: 500;
  padding: 0.35rem 0;
}
.channel-listing-show__pre {
  margin: 0.5rem 0 0;
  padding: 12px 14px;
  font-size: 11px;
  line-height: 1.45;
  border-radius: 8px;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  overflow: auto;
  max-height: 20rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.channel-listing-show__raw .panel-header {
  margin-bottom: 0.5rem;
}

/* ── Channel listings index (.chl-*) ───────────────────── */
.chl-row { display: flex; align-items: center; gap: 6px; }
.chl-listing-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chl-listing-cell__title { font-weight: 500; color: var(--pp-text); min-width: 0; }
.chl-listing-cell__channel { min-width: 0; }
.chl-channel-label { font-size: 12px; color: var(--pp-text-muted); font-weight: 500; }
.chl-linked-name { min-width: 0; font-weight: 500; }

/* Truncated listing / product names — tooltip only when ellipsis clips text */
.chl-truncate-wrap {
  display: block;
  min-width: 0;
  max-width: 100%;
}
.chl-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.data-table td[data-column-id="listing"] .chl-truncate-wrap { max-width: 260px; }
.data-table td[data-column-id="linked"] .chl-truncate-wrap { max-width: 220px; }
.chl-truncate-tooltip { max-width: 360px; }
.chl-skus { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chl-status-stack { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.chl-ext-link { display: inline-flex; align-items: center; gap: 4px; }
.chl-ext-link svg { flex-shrink: 0; }

/* SKU pills link to the variant; drop the leading status dot. */
.chl-sku-pill { text-decoration: none; color: inherit; }
.chl-sku-pill::before { display: none; }
.chl-sku-pill:hover { color: var(--pp-accent); }
.chl-sku-pill--unmapped { cursor: help; }

.chl-link-modal__parity,
.chl-link-modal__confirm { margin-top: 16px; }
.chl-link-modal__parity-message { margin: 6px 0 0; }

/* Channel name/logo links to the channel's listing editor. */
.chl-channel-link { text-decoration: none; color: inherit; }
.chl-channel-link:hover .chl-channel-label { color: var(--pp-accent); }

/* Link-to-product modal */
.chl-link-modal__skus { margin-top: 12px; }
.chl-link-modal__sku-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chl-link-modal__recommended {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--pp-bg-subtle, #f8fafc);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 10px;
}
.chl-link-modal__recommended-header { margin-bottom: 10px; }
.chl-link-modal__recommended-body {
  display: flex;
  align-items: center;
  gap: 12px;
}
.chl-link-modal__recommended-thumb {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--pp-bg-muted, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text-muted);
}
.chl-link-modal__recommended-thumb img { width: 100%; height: 100%; object-fit: cover; }
.chl-link-modal__recommended-info { flex: 1 1 auto; min-width: 0; }
.chl-link-modal__recommended-title { font-weight: 600; margin: 0; }

/* Product picker (.pp-*) — reuses collection picker row/dropdown styles */
.pp-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.pp-field { display: flex; align-items: center; gap: 6px; }
.pp-input { flex: 1 1 auto; min-width: 0; }
.pp-card { display: flex; align-items: center; gap: 10px; }
.pp-picker .clp-selected-card__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--pp-bg-subtle, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text-muted, #64748b);
}
.pp-picker .clp-selected-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pp-help { margin: 0; }

/* Tooltip-wrapped status pills + icon action buttons in the table.
   Reset the help-tooltip trigger so it doesn't reskin the wrapped element.
   The base trigger sets line-height:0 which collapses pill text — restore it here. */
.chl-status-stack .help-tooltip-wrap,
.chl-row-actions .help-tooltip-wrap { margin-left: 0; }
.chl-status-stack .help-tooltip-trigger,
.chl-row-actions .help-tooltip-trigger {
  padding: 0;
  border-radius: 0;
  color: inherit;
  line-height: normal;
}
.chl-status-stack .help-tooltip-trigger { cursor: help; }
.chl-status-stack .help-tooltip-trigger:hover,
.chl-status-stack .help-tooltip-trigger:focus { color: inherit; }

/* ── Row controls column: sync switch + actions menu, grouped together ── */
.chl-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.chl-controls .help-tooltip-wrap { margin-left: 0; }
.chl-controls .help-tooltip-trigger {
  padding: 0;
  border-radius: 0;
  color: inherit;
  line-height: normal;
  cursor: pointer;
}
.chl-controls .help-tooltip-trigger:hover,
.chl-controls .help-tooltip-trigger:focus { color: inherit; }
/* button_to wraps its <button> in a <form>; keep it inline within the flex row. */
.chl-controls .chl-sync-switch-form { display: inline-flex; margin: 0; }

/* Sync on/off switch — color reflects STATE (on = accent, off = grey),
   not the action. Rendered as a button_to that PATCHes toggle_managed. */
.chl-sync-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 2px;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.chl-sync-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: var(--pp-border, #cbd5e1);
  transition: background 0.15s ease;
}
.chl-sync-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
  transition: transform 0.15s ease;
}
.chl-sync-switch__label {
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
  line-height: 1;
}
.chl-sync-switch.is-on .chl-sync-switch__track { background: var(--pp-success, #16a34a); }
.chl-sync-switch.is-on .chl-sync-switch__thumb { transform: translateX(12px); }
.chl-sync-switch.is-on .chl-sync-switch__label { color: var(--pp-success, #16a34a); }
.chl-sync-switch:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; border-radius: 6px; }

/* Row action menus must escape the table's overflow clipping, so the panel
   is positioned with position:fixed (coordinates set by row-actions-menu). */
.action-menu--fixed .view-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
}

/* ── Connected-channels rail (above the listings table) ── */
.chl-channel-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.chl-channel-rail__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.chl-channel-rail__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted);
}
.chl-channel-rail__summary {
  font-size: 12px;
  color: var(--pp-text-subtle);
}
.chl-channel-rail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chl-channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--pp-border);
  border-radius: 999px;
  background: var(--pp-surface);
  color: var(--pp-text);
  text-decoration: none;
  transition: border-color 0.15s var(--pp-ease), background 0.15s var(--pp-ease);
}
.chl-channel-chip:hover {
  border-color: var(--pp-border-strong);
  background: var(--pp-surface-2);
}
.chl-channel-chip.is-active {
  border-color: var(--pp-accent);
  background: var(--pp-accent-soft);
}
.chl-channel-chip__logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}
.chl-channel-chip__logo--letter {
  display: grid;
  place-items: center;
  background: var(--pp-surface-2);
  font-size: 10px;
  font-weight: 600;
  color: var(--pp-text-muted);
}
.chl-channel-chip__label {
  font-size: 13px;
  font-weight: 500;
}
.chl-channel-chip__domain {
  color: var(--pp-text-muted);
  font-weight: 400;
}
.chl-channel-chip__domain::before {
  content: " · ";
  color: var(--pp-text-subtle);
}

/* Channel chip tooltip wrapper — undo help-tooltip-trigger resets so the chip
   keeps its own link + pill styling unchanged. */
.chl-channel-chip-tt { margin-left: 0; }
.chl-channel-chip-tt .help-tooltip-trigger {
  padding: 0;
  color: inherit;
  border-radius: 999px;
  cursor: pointer;
  line-height: normal;
}
.chl-channel-chip-tt .help-tooltip-trigger:hover,
.chl-channel-chip-tt .help-tooltip-trigger:focus { color: inherit; }
.help-tooltip-link { color: #93c5fd; text-decoration: underline; }
.help-tooltip-link:hover { color: #fff; }

/* Color-coded icon buttons for row actions */
.icon-button-success {
  background: var(--pp-success-soft);
  color: var(--pp-success);
  border-color: transparent;
}
.icon-button-success:hover { background: #bbf7d0; }
.icon-button-danger {
  background: var(--pp-danger-soft);
  color: var(--pp-danger);
  border-color: transparent;
}
.icon-button-danger:hover { background: #fecaca; }

/* ── Channel listings show page tabs ─────────────────────── */
.chl-show { display: flex; flex-direction: column; gap: 0; }
.chl-show .tabs__panel { padding-bottom: 24px; }
.chl-push-error {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--pp-danger-soft);
  border: 1px solid var(--pp-danger);
  border-radius: 6px;
  font-size: 13px;
  color: var(--pp-danger);
  word-break: break-word;
}

.product-show__image-item {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line, #e2e8f0);
  aspect-ratio: 1;
}
.product-show__image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Vendor show page ──────────────────────────────────── */
/* Structural rules inherited from .entity-show above */
.vendor-show__glance.repl-kpi-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .vendor-show__glance.repl-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Header thumbnail */
.variant-topbar-media {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line, #e2e8f0);
  background: var(--panel, #fff);
}
.variant-topbar-media__img { width: 100%; height: 100%; object-fit: cover; }
.variant-topbar-media__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  color: var(--muted, #64748b);
  background: var(--soft, #f1f5f9);
}

/* Header title hierarchy: product title large, SKU small */
h1.variant-topbar-title { font-size: 18px; font-weight: 700; line-height: 1.2; margin: 0; }
.variant-topbar-sku { font-size: 13px; margin: 2px 0 0; color: var(--muted, #64748b); }

/* (bulk actions live inside the table selection-bar via selection-bar__actions) */

/* Tab pill count badges */
.tab-pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
}
.tab-pill.is-active .tab-pill__count {
  background: rgba(255, 255, 255, 0.2);
}

/* Run meta bar */
.run-meta-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px 16px; margin-bottom: 16px;
  background: var(--bg, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 8px;
  font-size: 13px;
}
.run-meta-bar__info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.run-meta-bar__label { font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em; color: var(--text-muted, #64748b); }
.run-meta-bar__value { color: var(--text, #0f172a); }
.run-meta-bar__sep { color: var(--text-muted, #64748b); }
.run-meta-bar__tabs { display: flex; gap: 4px; }
.tab-pill {
  display: inline-flex; align-items: center; padding: 4px 12px;
  border-radius: 999px; font-size: 12px; font-weight: 500;
  background: transparent; border: 1px solid var(--line, #e2e8f0);
  color: var(--text-muted, #64748b); cursor: pointer; text-decoration: none;
  transition: all 0.15s ease; gap: 2px;
}
.tab-pill:hover { background: var(--bg-hover, #f1f5f9); color: var(--text, #0f172a); }
.tab-pill.is-active {
  background: var(--text, #0f172a); color: #fff; border-color: var(--text, #0f172a);
}

/* ── Facet bar (quick filters, inline in utility bar) ── */
.facet-bar-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.facet-bar-inline::after {
  content: "";
  width: 1px;
  height: 20px;
  background: var(--line, #e2e8f0);
  margin-left: 2px;
}

.facet-dropdown {
  position: relative;
}

.facet-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  background: var(--bg, #fff);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.4;
}
.facet-trigger:hover {
  border-color: var(--text-muted, #94a3b8);
  color: var(--text, #0f172a);
}
.facet-trigger.is-active {
  border-color: var(--primary, #3b82f6);
  background: #eff6ff;
  color: var(--primary, #3b82f6);
}

.facet-trigger__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.facet-trigger__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary, #3b82f6);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.facet-trigger__badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary, #3b82f6);
}

.facet-trigger__caret {
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform 0.15s ease;
}
.facet-dropdown.is-open .facet-trigger__caret {
  transform: rotate(180deg);
}

.facet-trigger__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  color: var(--primary, #3b82f6);
  cursor: pointer;
  transition: background 0.1s ease;
}
.facet-trigger__clear:hover {
  background: rgba(59, 130, 246, 0.15);
}

.facet-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-width: 220px;
  max-width: 300px;
  background: var(--bg, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.facet-menu.facet-menu--fixed {
  position: fixed;
  z-index: 120;
  top: auto;
  left: auto;
}
.facet-dropdown.is-open .facet-menu {
  display: block;
}
.facet-menu--compact {
  min-width: 180px;
}

.facet-menu__search-wrap {
  padding: 8px 8px 4px;
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.facet-menu__search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  background: var(--bg, #fff);
  color: var(--text, #0f172a);
  transition: border-color 0.15s ease;
}
.facet-menu__search:focus {
  border-color: var(--primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}
.facet-menu__search::placeholder {
  color: var(--text-muted, #94a3b8);
}

.facet-menu__options {
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}

.facet-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  color: var(--text, #0f172a);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}
.facet-option:hover {
  background: var(--bg-hover, #f1f5f9);
}

.facet-option__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--line, #cbd5e1);
  border-radius: 4px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.facet-option__check svg {
  opacity: 0;
  transition: opacity 0.1s ease;
}
.facet-option.is-selected .facet-option__check {
  background: var(--primary, #3b82f6);
  border-color: var(--primary, #3b82f6);
}
.facet-option.is-selected .facet-option__check svg {
  opacity: 1;
  stroke: #fff;
}

.facet-option__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facet-menu__empty {
  padding: 16px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
}

.facet-clear-all {
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.facet-clear-all:hover {
  color: var(--text, #0f172a);
  background: var(--bg-hover, #f1f5f9);
}

/* ── Richer product thumbnail ── */
.product-thumb--lg {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.product-thumb__avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  letter-spacing: 0.02em;
}

/* ── Clickable rows & hover affordance ── */
.repl-row {
  cursor: pointer;
  position: relative;
  transition: background 0.1s ease;
  outline: none;
}
.repl-row:hover {
  background: #f1f5f9;
}
.repl-row:hover td:first-child {
  box-shadow: inset 3px 0 0 0 var(--accent, #6366f1);
}
.repl-row:focus-visible {
  background: #eef2ff;
}
.repl-row:focus-visible td:first-child {
  box-shadow: inset 3px 0 0 0 #6366f1;
}

/* ── Numeric column alignment ── */
.col-numeric { text-align: right; }
th.col-numeric .table-sort { justify-content: flex-end; }

/* ── Select column ── */
.col-select { width: 36px; padding-left: 12px !important; padding-right: 4px !important; }

/* ── Item details title ── */
.item-details__title {
  font-weight: 500;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Vendor label ── */
.vendor-label {
  font-size: 13px;
  max-width: 140px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Stock on hand indicator ── */
.stock-indicator { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.stock-indicator__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.stock-indicator--critical .stock-indicator__dot { background: #dc2626; }
.stock-indicator--low .stock-indicator__dot { background: #f59e0b; }
.stock-indicator--adequate .stock-indicator__dot { background: #22c55e; }
.stock-indicator--high .stock-indicator__dot { background: #16a34a; }

/* ── Stockout cell ── */
.stockout-cell { display: flex; flex-direction: column; gap: 1px; }
.stockout-cell__days { font-weight: 600; font-size: 13px; }
.stockout-cell--critical .stockout-cell__days { color: #dc2626; }
.stockout-cell--danger .stockout-cell__days { color: #dc2626; }
.stockout-cell--warning .stockout-cell__days { color: #d97706; }
.stockout-cell--ok .stockout-cell__days { color: var(--text, #0f172a); }
.stockout-cell__date { font-size: 11px; }

/* ── Small text utility ── */
.text-xs { font-size: 11px; }

/* ── Column header with tooltip ── */
.table-header-plain { display: inline; }
th .help-tooltip-wrap { margin-left: 3px; vertical-align: middle; }
th .help-tooltip-trigger { vertical-align: middle; }

/* ── Sticky header + first columns ── */
.data-table thead { position: sticky; top: 0; z-index: 5; }
.data-table thead th { background: #f8fafc; }
/* Sticky first columns: only apply image/item offsets when a select column exists (see PO line items vs vendor invoice line items). */
.data-table:has(th[data-column-id="select"]) td[data-column-id="select"],
.data-table:has(th[data-column-id="select"]) th[data-column-id="select"],
.data-table:has(th[data-column-id="select"]) td[data-column-id="image"],
.data-table:has(th[data-column-id="select"]) th[data-column-id="image"],
.data-table:has(th[data-column-id="select"]) td[data-column-id="item"],
.data-table:has(th[data-column-id="select"]) th[data-column-id="item"] {
  position: sticky;
  z-index: 3;
  background: #fff;
}
.data-table:has(th[data-column-id="select"]) th[data-column-id="select"],
.data-table:has(th[data-column-id="select"]) th[data-column-id="image"],
.data-table:has(th[data-column-id="select"]) th[data-column-id="item"] {
  background: #f8fafc;
  z-index: 6;
}
.data-table:has(th[data-column-id="select"]) td[data-column-id="select"],
.data-table:has(th[data-column-id="select"]) th[data-column-id="select"] { left: 0; }
.data-table:has(th[data-column-id="select"]) td[data-column-id="image"],
.data-table:has(th[data-column-id="select"]) th[data-column-id="image"] { left: 36px; }
.data-table:has(th[data-column-id="select"]) td[data-column-id="item"],
.data-table:has(th[data-column-id="select"]) th[data-column-id="item"] { left: 80px; }
.repl-row:hover td[data-column-id="select"],
.repl-row:hover td[data-column-id="image"],
.repl-row:hover td[data-column-id="item"] {
  background: #f1f5f9;
}
.data-table td[data-column-id="item"]::after,
.data-table th[data-column-id="item"]::after {
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  bottom: 0;
  width: 6px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(15, 23, 42, 0.04), transparent);
}

.po-line-filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Replenishment view tabs ── */
.repl-view-tabs {
  display: flex;
  gap: 2px;
  margin: 16px 0 0;
  border-bottom: 2px solid var(--line);
}

.repl-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.repl-view-tab:hover {
  color: var(--ink);
  background: var(--soft);
}

.repl-view-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: none;
}

.repl-view-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 5px;
  height: 18px;
  font-size: 11px;
  font-weight: 600;
  background: var(--soft);
  color: var(--muted);
  border-radius: 9px;
}

.repl-view-tab.is-active .repl-view-tab__count {
  background: var(--accent-weak);
  color: var(--accent);
}

.picking-exceptions-tabs-wrap {
  margin: -24px -24px 4px;
  padding: 0 24px;
}

.picking-exceptions-tabs {
  width: 100%;
  margin: 0;
}

/* ── Picking exceptions — floating bulk toolbar ── */

.picking-exceptions-bulk-form {
  position: relative;
}

.picking-exceptions-bulk-form .bulk-bar {
  position: sticky;
  bottom: 16px;
  z-index: 50;
  margin: 0 8px 8px;
  animation: bulk-bar-in 0.18s ease-out;
}

@keyframes bulk-bar-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.picking-exceptions-bulk-form .bulk-bar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
}

.picking-exceptions-bulk-form .bulk-bar__left {
  flex-shrink: 0;
  white-space: nowrap;
}

.picking-exceptions-bulk-form .bulk-bar__count {
  font-size: 13px;
  color: var(--text);
}

.picking-exceptions-bulk-form .bulk-bar__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}

.picking-exceptions-bulk-form .bulk-bar__field {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.picking-exceptions-bulk-form .bulk-bar__field--notes {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.picking-exceptions-bulk-form .bulk-bar__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.picking-exceptions-bulk-form .bulk-bar__hint {
  font-size: 11px;
  color: var(--warning);
}

.picking-exceptions-bulk-form .bulk-bar .input-sm {
  min-height: 32px;
  padding: 5px 8px;
  font-size: 13px;
}

.picking-exceptions-bulk-form .bulk-bar .btn {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .picking-exceptions-tabs-wrap {
    margin: -12px -12px 4px;
    padding: 0 12px;
  }

  .picking-exceptions-bulk-form .bulk-bar {
    margin: 0 4px 8px;
    bottom: 8px;
  }

  .picking-exceptions-bulk-form .bulk-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
  }

  .picking-exceptions-bulk-form .bulk-bar__controls {
    flex-direction: column;
    align-items: stretch;
  }

  .picking-exceptions-bulk-form .bulk-bar__field {
    width: 100%;
  }

  .picking-exceptions-bulk-form .bulk-bar .input-sm,
  .picking-exceptions-bulk-form .bulk-bar .btn {
    width: 100%;
  }
}

/* ── Replenishment vendor table ── */
.repl-vendor-table {
  table-layout: auto;
}

.repl-vendor-row {
  cursor: default;
}

.repl-vendor-row:hover td {
  background: #f8fafc;
}

.repl-vendor-name-cell {
  padding-top: 10px;
  padding-bottom: 10px;
}

.repl-vendor-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.font-medium {
  font-weight: 500;
}

.repl-vendor-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  font-size: 11.5px;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}

.repl-vendor-expand-btn:hover {
  background: var(--line);
  color: var(--ink);
}

.repl-vendor-expand-icon {
  transition: transform 0.15s;
  flex-shrink: 0;
}

.repl-vendor-expand-icon.is-open {
  transform: rotate(180deg);
}

.repl-vendor-expand-label {
  line-height: 1;
}

.repl-vendor-actions {
  text-align: right;
  padding-right: 16px;
}

.repl-vendor-build-form {
  display: inline;
}

.repl-vendor-stockout-risk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #dc2626;
  font-weight: 600;
  font-size: 13px;
}

.repl-vendor-est-cost-cell {
  white-space: nowrap;
}

.repl-vendor-est-cost {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
}

/* Uses shared .help-tooltip-* (fixed positioning) so the tip is not swallowed by .table-wrap overflow-x */
.repl-vendor-cost-warning.help-tooltip-wrap {
  margin-left: 0;
}

.repl-vendor-cost-warning .help-tooltip-trigger {
  cursor: pointer;
  color: #d97706;
  border-radius: 4px;
  text-decoration: none;
}

.repl-vendor-cost-warning .help-tooltip-trigger:visited {
  color: #d97706;
}

.repl-vendor-cost-warning .help-tooltip-trigger:hover,
.repl-vendor-cost-warning .help-tooltip-trigger:focus {
  color: #b45309;
}

.repl-vendor-cost-warning .help-tooltip-trigger svg {
  display: block;
}

/* ── Expanded vendor lines ── */
.repl-vendor-expanded-row > td {
  padding: 0 !important;
  border-top: none;
}

.repl-vendor-expanded-inner {
  background: #f8fafc;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.repl-vendor-lines-table {
  margin: 0;
  background: transparent;
}

.repl-vendor-lines-table thead th {
  background: #f1f5f9;
  font-size: 11px;
  color: var(--muted);
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
}

.repl-vendor-lines-table tbody td {
  padding: 8px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.repl-vendor-lines-table tbody tr:last-child td {
  border-bottom: none;
}

.repl-vendor-line-row {
  cursor: pointer;
}

.repl-vendor-line-row:hover td {
  background: #f0f4ff;
}

.repl-vendor-lines-loading {
  padding: 16px 24px;
  font-size: 13px;
}

.repl-vendor-lines-footer {
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: var(--soft);
}

.item-details--compact .item-details__title {
  font-size: 13px;
  line-height: 1.3;
}

.btn-xs {
  font-size: 11.5px;
  padding: 2px 8px;
  height: 24px;
}

/* Empty state inline variant */
.empty-state--inline {
  padding: 32px 24px;
  text-align: center;
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-top: 12px;
}



.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 24px; text-align: center;
}
.empty-state__icon { margin-bottom: 16px; color: var(--text-muted, #64748b); opacity: 0.5; }
.empty-state h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.empty-state-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.empty-state p { margin: 0 0 20px; }
.empty-state .btn { margin-top: 4px; }
.policy-empty-state .muted { max-width: 440px; margin-left: auto; margin-right: auto; }
.policy-empty-state--hero { text-align: center; padding: 48px 24px; }
.policy-empty-state__title { margin: 0 0 12px; font-size: 24px; font-weight: 600; }
.policy-empty-state__desc { margin: 0 0 24px; color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 480px; margin-left: auto; margin-right: auto; }
.policy-empty-state__cta { margin: 0 0 16px; }
.policy-empty-state__cta .btn-lg { padding: 12px 24px; font-size: 16px; }
.policy-empty-state__sub { margin: 0; font-size: 14px; max-width: 440px; margin-left: auto; margin-right: auto; }

.text-danger { color: #dc2626; }

.policy-meta-bar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 10px 16px; margin-bottom: 16px;
  background: var(--bg, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 8px;
  font-size: 13px;
}
.policy-meta-bar__item {
  display: flex; align-items: center; gap: 6px;
}
.policy-meta-bar__item .muted { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.policy-meta-bar__source { flex: 1; min-width: 0; }
.policy-meta-bar__source .truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px; display: inline-block; vertical-align: middle;
}

.policy-show-runs {
  margin-top: 24px;
}

/* Global defaults: category spacing and table typography */
.policy-defaults-panel {
  padding-bottom: 20px;
}
.policy-overrides-filter {
  margin-top: 6px;
  font-size: 14px;
}
.policy-overrides-filter .link {
  margin-left: 8px;
}
.policy-defaults-panel .policy-defaults-category-header {
  padding-left: 16px;
}
.policy-defaults-panel > .table-wrap {
  padding-left: 16px;
}
.policy-defaults-panel .policy-defaults-category-title {
  margin-top: 1.5rem;
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
}
.policy-defaults-panel .policy-defaults-category-desc {
  margin: 0 0 0.75rem;
  font-size: 13px;
}
.policy-defaults-panel .policy-defaults-category-header:first-of-type .policy-defaults-category-title {
  margin-top: 0.75rem;
}
.policy-defaults-table.data-table-compact th,
.policy-defaults-table.data-table-compact td {
  font-size: 15px;
  padding: 10px 14px;
}
.policy-defaults-table.data-table-compact th {
  font-size: 12px;
}
.policy-defaults-table .policy-defaults-desc {
  font-size: 13px;
  margin-top: 2px;
}
.policy-defaults-panel .policy-defaults-subgroups {
  padding-left: 16px;
  padding-right: 16px;
  margin-top: 4px;
}
.policy-defaults-subgroup-details {
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 6px);
  margin-bottom: 8px;
  overflow: hidden;
}
.policy-defaults-subgroup-details:last-child {
  margin-bottom: 0;
}
.policy-defaults-subgroup-summary {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #64748b);
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--soft, #f8fafc);
  user-select: none;
}
.policy-defaults-subgroup-summary-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.policy-defaults-subgroup-summary .policy-defaults-subgroup-title {
  color: inherit;
}
.policy-defaults-subgroup-summary .policy-defaults-subgroup-desc {
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--muted, #64748b);
  opacity: 0.9;
}
.policy-defaults-subgroup-summary::-webkit-details-marker,
.policy-defaults-subgroup-summary::marker {
  display: none;
}
.policy-defaults-subgroup-summary::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.2s ease;
  opacity: 0.7;
}
.policy-defaults-subgroup-details[open] .policy-defaults-subgroup-summary::before {
  transform: rotate(90deg);
}
.policy-defaults-subgroup-summary:hover {
  background: #f1f5f9;
  color: #475569;
}
.policy-defaults-subgroup-summary:hover .policy-defaults-subgroup-desc {
  color: #64748b;
}
.policy-defaults-subgroup-details .table-wrap {
  padding: 0;
}
.policy-defaults-subgroup-details .policy-defaults-table {
  margin: 0;
}
.policy-defaults-subgroup-details .policy-defaults-table thead th {
  border-top: none;
}
.policy-defaults-value-inline {
  margin-right: 8px;
}
.policy-default-save--hidden {
  display: none;
}

/* ── Reusable tabs (horizontal bar + panels) ───────────────────── */
.tabs {
  margin-bottom: 0;
}
.tabs__bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 2px solid var(--line);
  margin-bottom: 0;
  background: var(--panel);
  padding: 0 4px 0 0;
  min-height: 44px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.tabs__tab {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  font-family: inherit;
}
.tabs__tab:hover {
  color: var(--ink);
  background: var(--soft);
}
.tabs__tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--soft);
}
.tabs__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tabs__panel {
  padding-top: 20px;
}
.tabs__panel[hidden] {
  display: none !important;
}
.tabs__meta {
  margin-top: 16px;
  margin-bottom: 4px;
}
.tabs__meta .policy-impact-bar {
  margin-top: 12px;
}

.policy-impact-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--soft);
  border-radius: var(--radius);
  font-size: 14px;
}
.policy-impact-bar__label {
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 11px;
}
.policy-impact-bar__item { margin: 0; }
.policy-impact-bar__link { margin-left: auto; font-weight: 500; }
.policy-simulate-cta {
  padding: 16px 20px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--accent-weak) 0%, #f5f3ff 100%);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}
.policy-simulate-cta__text {
  margin: 0 0 12px;
  font-size: 14px;
}
.policy-no-rules-empty--hero {
  text-align: center;
  padding: 32px 24px;
}
.policy-no-rules-empty__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}
.policy-no-rules-empty__desc { margin: 0 0 12px; font-size: 14px; }
.policy-no-rules-empty__examples {
  margin: 0 0 20px;
  padding-left: 24px;
  text-align: left;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.policy-no-rules-empty__examples li { margin-bottom: 8px; }
.policy-no-rules-empty__or { margin-top: 16px; font-size: 13px; }
.policy-rules-intro {
  margin: 4px 0 0;
  font-size: 13px;
  max-width: 560px;
}
.policy-simulate-prompt { }
.policy-runs-explainer { }
.simulate-dialog-intro {
  margin: -4px 0 12px;
  font-size: 13px;
}
.policy-no-rules-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
}

/* New policy: template cards */
.policy-new-templates {
  margin-bottom: 24px;
}
.policy-new-templates-heading {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}
.policy-new-templates-sub {
  margin: 0 0 16px;
  font-size: 13px;
}
.policy-new-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.policy-template-card {
  padding: 16px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 10px);
  background: var(--panel, #fff);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.policy-template-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.policy-template-card__desc {
  margin: 0;
  font-size: 13px;
  flex: 1;
}
.policy-template-card__preview {
  margin: 6px 0 10px;
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}
.policy-new-divider {
  text-align: center;
  margin: 24px 0 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line, #e2e8f0);
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.policy-new-divider .muted { font-size: 13px; }

/* Pilot Dates landing page */
.pilot-dates-landing {
  padding: 4px 0;
}
.pilot-dates-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.pilot-dates-card {
  display: block;
  padding: 20px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 10px);
  background: var(--panel, #fff);
  transition: border-color 0.15s, background 0.15s;
  text-decoration: none;
  color: inherit;
}
.pilot-dates-card:hover {
  border-color: var(--accent, #3b82f6);
  background: var(--surface, #f8fafc);
}
.pilot-dates-card__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.pilot-dates-card__desc {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
}
.pilot-dates-card__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent, #3b82f6);
}
.pilot-dates-other {
  padding-top: 20px;
  border-top: 1px solid var(--line, #e2e8f0);
}
.pilot-dates-other__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
}
.pilot-dates-other__desc {
  margin: 0 0 12px;
  font-size: 13px;
}
.pilot-dates-other__list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
}
.pilot-dates-other__list li {
  margin-bottom: 10px;
}
.pilot-dates-other__list li:last-child {
  margin-bottom: 0;
}

/* Pilot overview (home) */
.pilot-overview {
  max-width: 100%;
}
.pilot-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.pilot-overview-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.pilot-overview-card__title {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.pilot-overview-card__name {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
}
.pilot-overview-card__value {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
}
.pilot-overview-card__meta {
  margin: 0 0 12px;
  font-size: 13px;
}
.pilot-overview-card__meta:last-of-type {
  margin-bottom: 0;
}
.pilot-overview-card > .btn,
.pilot-overview-card > .btn-sm,
.pilot-overview-card > form,
.pilot-overview-card > .pilot-overview-card__actions {
  margin-top: auto;
  padding-top: 12px;
}
.pilot-overview-card > .btn,
.pilot-overview-card > .btn-sm {
  align-self: flex-start;
}
.pilot-overview-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pilot-overview-cta {
  background: var(--accent-weak);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}
.pilot-overview-cta__text {
  margin: 0 0 12px;
  font-size: 14px;
}
.pilot-overview-empty {
  text-align: center;
  padding: 48px 24px;
  max-width: 560px;
  margin: 0 auto 32px;
}
.pilot-overview-empty__title {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 600;
}
.pilot-overview-empty__desc {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.pilot-overview-empty__actions .btn {
  margin-bottom: 4px;
}

.pilot-overview .table-panel .table-wrap {
  margin-bottom: 0;
}
.pilot-overview-view-all {
  margin: 6px 0 0;
  padding: 0;
  font-size: 14px;
}

.th-with-help {
  cursor: help;
  border-bottom: 1px dotted var(--text-muted, #94a3b8);
}

/* ── Reusable help tooltip (question mark / info icon with hover) ── */
.help-tooltip-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
}
.help-tooltip-trigger {
  appearance: none;
  background: none;
  border: none;
  cursor: help;
  padding: 2px;
  color: var(--muted, #6b7280);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.help-tooltip-trigger:hover,
.help-tooltip-trigger:focus {
  color: var(--accent, #2563eb);
  outline: none;
}
.help-tooltip-icon {
  display: block;
}
.help-tooltip-content {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
  max-width: 320px;
  min-width: 180px;
  width: max-content;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  background: var(--ink, #1f2933);
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 99999;
  white-space: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.help-tooltip-content.is-visible {
  visibility: visible;
  opacity: 1;
  /* Above fixed overlays (e.g. rule picker dropdown at 99999) when tooltip is portaled to body */
  z-index: 200000;
}
.help-tooltip-divider {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 5px 0 4px;
}

/* Quantiles under projected sales (P10/P50/P90 on own lines, muted) */
.projected-quantiles {
  font-size: 11px;
  color: var(--muted, #6b7280);
  margin-top: 4px;
  line-height: 1.5;
}
.projected-quantiles div {
  margin: 0;
}

.scope-filters-label {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin-right: 6px;
  align-self: center;
}

/* ── Policy sidebar (Sidekick-style chat) ────────────── */
.policy-sidebar {
  position: fixed; top: 48px; right: 0; bottom: 0; width: 380px;
  background: #fff;
  border-left: 1px solid var(--line, #e2e8f0);
  border-top-left-radius: 12px;
  display: flex; flex-direction: column;
  z-index: 90;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.policy-sidebar--open { transform: translateX(0); }

/* Push main content over when sidebar is open */
.main { transition: margin-right 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.main.policy-sidebar-push { margin-right: 380px; }

.policy-sidebar__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line, #e2e8f0);
  flex-shrink: 0;
}
.policy-sidebar__title {
  font-size: 14px; font-weight: 600; color: var(--text, #0f172a);
  display: flex; align-items: center; gap: 6px;
}
.policy-sidebar__icon {
  font-size: 16px; color: var(--accent, #3b82f6);
}
.policy-sidebar__close {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 6px; cursor: pointer;
  color: var(--text-muted, #64748b); font-size: 15px; transition: background 0.15s;
}
.policy-sidebar__close:hover { background: var(--surface, #f1f5f9); }

.policy-sidebar__messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
  background: #fff;
}

.policy-sidebar__input {
  display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--line, #e2e8f0); flex-shrink: 0;
  background: #fff;
}
.policy-sidebar__input .input { flex: 1; min-width: 0; }
.policy-sidebar__input .btn {
  width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0;
}

/* Chat message styles (used inside sidebar) */
.policy-chat-message { display: flex; flex-direction: column; gap: 2px; }
.policy-chat-message--user { align-items: flex-end; }
.policy-chat-message--assistant { align-items: flex-start; }
.policy-chat-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8); padding: 0 4px;
}
.policy-chat-bubble {
  max-width: 92%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.55;
}
.policy-chat-message--user .policy-chat-bubble {
  background: var(--accent, #3b82f6); color: #fff; border-bottom-right-radius: 3px;
}
.policy-chat-message--assistant .policy-chat-bubble {
  background: var(--surface, #f1f5f9); color: var(--text, #0f172a); border-bottom-left-radius: 3px;
}
/* Rich text inside chat bubbles */
.policy-chat-bubble p { margin: 0 0 6px; }
.policy-chat-bubble p:last-child { margin-bottom: 0; }
.policy-chat-bubble strong { font-weight: 600; }
.policy-chat-bubble em { font-style: italic; }
.policy-chat-bubble ol, .policy-chat-bubble ul {
  margin: 6px 0; padding-left: 18px; font-size: 13px;
}
.policy-chat-bubble ol { list-style: decimal; }
.policy-chat-bubble ul { list-style: disc; }
.policy-chat-bubble li { margin-bottom: 3px; line-height: 1.5; }
.policy-chat-bubble li:last-child { margin-bottom: 0; }
.policy-chat-bubble code {
  font-family: monospace; font-size: 12px; background: rgba(0,0,0,0.06);
  padding: 1px 4px; border-radius: 3px;
}
.policy-chat-message--user .policy-chat-bubble code {
  background: rgba(255,255,255,0.2);
}
.policy-chat-actions {
  margin: 8px 0 0; padding-left: 16px; font-size: 12px; list-style: disc;
}
.policy-chat-actions li { margin-top: 2px; opacity: 0.85; }
.policy-chat-errors {
  margin: 8px 0 0; padding-left: 16px; font-size: 12px; list-style: disc; color: #ef4444;
}
.policy-chat-loading {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
}
.policy-chat-loading.hidden { display: none; }
.policy-chat-spinner {
  width: 14px; height: 14px; border: 2px solid var(--line, #e2e8f0);
  border-top-color: var(--accent, #3b82f6); border-radius: 50%;
  animation: policy-chat-spin 0.6s linear infinite;
}
@keyframes policy-chat-spin { to { transform: rotate(360deg); } }

/* Active toggle button state */
.btn--active { background: var(--accent, #3b82f6) !important; color: #fff !important; }

/* ── Scope filter pills ──────────────────────────────── */
.scope-filters {
  display: flex; align-items: center; gap: 6px; padding: 10px 16px;
  border-bottom: 1px solid var(--line, #e2e8f0); flex-wrap: wrap;
}
.scope-filter-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line, #e2e8f0);
  background: var(--bg, #fff); color: var(--text-muted, #64748b);
  font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.12s ease;
  white-space: nowrap;
}
.scope-filter-pill:hover { background: var(--surface, #f1f5f9); color: var(--text, #0f172a); }
.scope-filter-pill.is-active {
  background: var(--accent, #3b82f6); color: #fff;
  border-color: var(--accent, #3b82f6);
}
.scope-filter-pill__count {
  font-size: 11px; font-weight: 600; opacity: 0.7;
}

/* Responsive: narrower sidebar on small screens */
@media (max-width: 640px) {
  .policy-sidebar { width: 100%; }
  .main.policy-sidebar-push { margin-right: 0; }
}

/* ── Bundle form ─────────────────────────── */
.variant-search-field {
  position: relative;
}
.search-results-dropdown {
  position: absolute;
  z-index: 100;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e2e4e9);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-top: 2px;
}
.search-result-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light, #f0f0f3);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover {
  background: var(--bg-hover, #f6f7f9);
}
.bom-panel { margin-top: 1.5rem; }
.bom-table td { vertical-align: middle; }
.bom-table .input { margin: 0; }
.bom-col-qty { width: 100px; }
.bom-col-wastage { width: 110px; }
.bom-col-actions { width: 80px; text-align: right; }

/* ── Category & condition tags ──────────── */
.tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap;
}
.tag--demand { background: #ede9fe; color: #6d28d9; }
.tag--replenishment { background: #dbeafe; color: #1d4ed8; }
.tag--order_constraints { background: #fef3c7; color: #92400e; }
.tag--invoice_approval { background: #e0e7ff; color: #3730a3; }
.tag--flag { background: #fce7f3; color: #9d174d; }
.tag--vendor_threshold { background: #fef3c7; color: #92400e; } /* legacy, kept for existing data until migration */
.tag--condition { background: #f0fdf4; color: #166534; }
.tag--success { background: #dcfce7; color: #166534; }
.tag--warning { background: #fef3c7; color: #92400e; }
.tag--danger  { background: #fee2e2; color: #991b1b; }
.tag--info    { background: #dbeafe; color: #1e40af; }
.tag--light   { background: var(--soft); color: var(--muted); }
.scope-filter-pill--secondary {
  font-size: 11px; padding: 3px 10px;
  border-color: var(--line-light, #f1f5f9);
}

/* ── Condition builder rows ──────────────── */
.condition-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-light, #f1f5f9);
}
.condition-row:last-child { border-bottom: none; }
.condition-remove { flex-shrink: 0; }
.form-grid-3 {
  grid-template-columns: 1fr 1fr 1fr auto;
}

/* ── Blackout picker chips ──────────────── */
.blackout-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.blackout-chip {
  cursor: pointer;
  user-select: none;
}
.blackout-chip input[type="checkbox"] {
  display: none;
}
.blackout-chip__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 6px 12px;
  border: 1.5px solid var(--line, #e2e8f0);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-light, #64748b);
  background: var(--surface, #fff);
  transition: all 0.15s ease;
}
.blackout-chip input:checked + .blackout-chip__label {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
  font-weight: 600;
}
.blackout-chip:hover .blackout-chip__label {
  border-color: #94a3b8;
}
.blackout-chip input:checked + .blackout-chip__label:hover {
  border-color: #f87171;
}

/* Sortable table header links */
.th-sort-link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.th-sort-link:hover {
  color: var(--link);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING WIZARD
   ═══════════════════════════════════════════════════════════════ */

body.pp-body.onboarding-body {
  background: #f6f7f9;
  padding: 0;
}

/* ─── Shell layout ─────────────────────────────────────────── */

.ob {
  display: flex;
  min-height: 100vh;
}

/* ─── Left sidebar ─────────────────────────────────────────── */

.ob-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  background: #fff;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  z-index: 10;
}

.ob-sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 36px;
}
.ob-logo-mark {
  height: 36px;
  width: auto;
}

/* ─── Step navigation ──────────────────────────────────────── */

.ob-steps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ob-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.ob-step:hover {
  background: var(--soft);
}
.ob-step.is-active {
  background: var(--accent-weak);
}

/* Connecting line between steps */
.ob-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 40px;
  width: 2px;
  height: calc(100% - 14px);
  background: var(--line);
  border-radius: 1px;
}
.ob-step.is-completed:not(:last-child)::after {
  background: var(--accent);
}

.ob-step-indicator {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  border: 2px solid var(--line);
  color: var(--muted);
  background: #fff;
  transition: all 0.2s;
}
.ob-step.is-active .ob-step-indicator {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.ob-step.is-completed .ob-step-indicator {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.ob-step-number {
  line-height: 1;
}
.ob-step.is-completed .ob-step-number {
  display: none;
}
.ob-step-check {
  width: 16px;
  height: 16px;
  display: none;
}
.ob-step.is-completed .ob-step-check {
  display: block;
}

.ob-step-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 2px;
}
.ob-step-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.ob-step.is-upcoming .ob-step-label {
  color: var(--muted);
}
.ob-step-desc {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.3;
}

/* ─── Progress bar ─────────────────────────────────────────── */

.ob-sidebar-progress {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-top: 12px;
}
.ob-progress-bar {
  height: 6px;
  background: var(--soft);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ob-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.ob-progress-label {
  font-size: 11.5px;
  color: var(--muted);
}

/* ─── Main content area ────────────────────────────────────── */

.ob-main {
  flex: 1;
  margin-left: 300px;
  position: relative;
}

.ob-panel {
  display: none;
  flex-direction: column;
  min-height: 100vh;
}
.ob-panel.is-active {
  display: flex;
}

.ob-panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 48px 48px 120px;
}

.ob-panel-content {
  margin: 0 auto;
}
.ob-panel-narrow {
  max-width: 580px;
}
.ob-panel-wide {
  max-width: 760px;
}
.ob-panel-centered {
  text-align: center;
}
.ob-panel-centered .ob-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* ─── Footer (prev/next) ──────────────────────────────────── */

.ob-footer {
  position: fixed;
  bottom: 0;
  left: 300px;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 16px 48px;
  z-index: 5;
}
.ob-footer-inner {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ─── Typography ───────────────────────────────────────────── */

.ob-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 8px;
}
.ob-subtitle {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 32px;
  max-width: 540px;
}

/* ─── Greeting (step 1) ───────────────────────────────────── */

.ob-greeting {
  text-align: center;
  margin-bottom: 36px;
}
.ob-greeting .ob-subtitle {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.ob-greeting-wave {
  font-size: 40px;
  display: block;
  margin-bottom: 12px;
}

/* ─── Cards ────────────────────────────────────────────────── */

.ob-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.ob-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.ob-card-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent);
}
.ob-card-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.ob-card-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* ─── Form fields ──────────────────────────────────────────── */

.ob-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 18px;
}
.ob-field:last-child {
  margin-bottom: 0;
}
.ob-field-grow {
  flex: 1;
}

.ob-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.ob-input {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s;
  outline: none;
}
.ob-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.ob-input-narrow {
  width: 120px;
}
.ob-input-tiny {
  width: 72px;
  text-align: center;
}

.ob-input-group {
  display: flex;
  align-items: center;
}
.ob-input-group .ob-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.ob-input-suffix {
  font-size: 13px;
  color: var(--muted);
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--soft);
  white-space: nowrap;
}

.ob-form-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.ob-field-remove {
  display: flex;
  align-items: center;
  padding-bottom: 0;
  margin-bottom: 18px;
  height: 38px;
}

.ob-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 16px 0;
}

/* ─── Choice cards (radio selectors) ───────────────────────── */

.ob-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ob-choice input {
  display: none;
}
.ob-choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.ob-choice-card:hover {
  border-color: #cbd5e1;
  background: var(--soft);
}
.ob-choice input:checked + .ob-choice-card {
  border-color: var(--accent);
  background: var(--accent-weak);
}
.ob-choice-icon {
  width: 28px;
  height: 28px;
  color: var(--muted);
}
.ob-choice input:checked + .ob-choice-card .ob-choice-icon {
  color: var(--accent);
}
.ob-choice-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.ob-choice-hint {
  font-size: 11.5px;
  color: var(--muted);
}

/* ─── Connect store options ────────────────────────────────── */

.ob-connect-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ob-connect-option input {
  display: none;
}

.ob-connect-card {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.ob-connect-card:hover {
  border-color: #cbd5e1;
}
.ob-connect-option input:checked + .ob-connect-card {
  border-color: var(--accent);
  background: #fafbff;
}

.ob-connect-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ob-connect-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ob-connect-logo svg {
  width: 24px;
  height: 24px;
}
.ob-connect-logo-shopify {
  background: #e8f5e9;
  color: #5c8a3e;
}
.ob-connect-logo-csv {
  background: #e3f2fd;
  color: var(--accent);
}
.ob-connect-logo-manual {
  background: var(--soft);
  color: var(--muted);
}

.ob-connect-card-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.ob-connect-card-desc {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.ob-connect-card-detail {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.ob-connect-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.ob-badge {
  font-size: 11.5px;
  color: var(--muted);
  background: var(--soft);
  padding: 3px 10px;
  border-radius: 999px;
}

.ob-btn-shopify {
  background: #5c8a3e;
  color: #fff;
  border-color: #4a7032;
}
.ob-btn-shopify:hover {
  background: #4a7032;
}

/* ─── Upload zone ──────────────────────────────────────────── */

.ob-upload-zone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.ob-upload-zone:hover {
  border-color: var(--accent);
  background: var(--accent-weak);
}
.ob-upload-icon {
  width: 32px;
  height: 32px;
  color: var(--muted);
  margin: 0 auto 8px;
  display: block;
}
.ob-upload-text {
  font-size: 13.5px;
  color: var(--ink);
  display: block;
}
.ob-upload-text strong {
  color: var(--accent);
  cursor: pointer;
}
.ob-upload-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  display: block;
}

/* ─── Buttons ──────────────────────────────────────────────── */

.ob-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  line-height: 1.3;
}
.ob-btn:hover {
  background: var(--soft);
}

.ob-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.ob-btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.ob-btn-lg {
  padding: 13px 28px;
  font-size: 15px;
}

.ob-btn-ghost {
  background: none;
  border-color: transparent;
  color: var(--muted);
}
.ob-btn-ghost:hover {
  background: var(--soft);
  color: var(--ink);
}

.ob-btn-compact {
  padding: 7px 14px;
  font-size: 13px;
  margin-top: 12px;
}

.ob-btn-arrow, .ob-btn-arrow-left {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ob-btn-icon-left {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ob-link {
  color: var(--accent);
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.ob-link:hover {
  color: #1d4ed8;
}

/* ─── Mode toggle ──────────────────────────────────────────── */

.ob-mode-toggle {
  display: flex;
  gap: 4px;
  background: #e2e6ec;
  padding: 4px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  width: fit-content;
}
.ob-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: none;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.15s;
}
.ob-mode-btn:hover {
  color: var(--ink);
}
.ob-mode-btn.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04);
}

/* ─── Map from Shopify vendor source ───────────────────────── */

.ob-shopify-vendor-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.ob-shopify-vendor-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 2px;
}
.ob-shopify-vendor-desc {
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0;
}
.ob-vendor-intro {
  margin: 0 0 1.25rem;
  font-size: 13px;
  line-height: 1.5;
  max-width: 520px;
}
.ob-vendor-source-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 1rem;
}
@media (max-width: 520px) {
  .ob-vendor-source-cards { grid-template-columns: 1fr; }
}
.ob-vendor-source-card {
  cursor: pointer;
  margin: 0;
}
.ob-vendor-source-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ob-vendor-source-card-inner {
  display: block;
  padding: 1rem 1.1rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.ob-vendor-source-card:hover .ob-vendor-source-card-inner {
  border-color: var(--muted);
}
.ob-vendor-source-card input:checked + .ob-vendor-source-card-inner {
  border-color: var(--accent);
  background: #f0f4ff;
  box-shadow: 0 0 0 1px var(--accent);
}
.ob-vendor-source-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--soft);
  margin-bottom: 8px;
  color: var(--muted);
}
.ob-vendor-source-card input:checked + .ob-vendor-source-card-inner .ob-vendor-source-card-icon {
  background: var(--accent-weak);
  color: var(--accent);
}
.ob-vendor-source-card-title {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 4px;
}
.ob-vendor-source-card-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.ob-vendor-source-config {
  margin-top: 0.5rem;
  padding: 1.25rem;
  background: var(--soft);
  border-radius: var(--radius);
}
.ob-vendor-source-config .ob-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 13px;
  font-weight: 600;
}
.ob-vendor-hint {
  margin: 0 0 0.75rem;
  font-size: 12px;
  line-height: 1.45;
}
.ob-vendor-tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.ob-vendor-segmented {
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px;
}
.ob-vendor-segmented-option {
  margin: 0;
  cursor: pointer;
  font-size: 13px;
}
.ob-vendor-segmented-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ob-vendor-segmented-option span {
  display: block;
  padding: 6px 14px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  font-weight: 500;
}
.ob-vendor-segmented-option input:checked + span {
  background: var(--accent);
  color: #fff;
}
.ob-vendor-tag-value-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 200px;
}
.ob-vendor-tag-value {
  width: 100%;
}
.ob-vendor-tag-example-wrap {
  margin-top: 1rem;
}
.ob-vendor-tag-example-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
.ob-vendor-tag-example-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}
.ob-vendor-tag-example-flow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ob-tag-pill {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent-weak);
  border-radius: 4px;
  font-size: 12px;
  font-family: "SF Mono", "Fira Code", monospace;
  color: var(--accent);
}

/* ─── Manual vendor rows ───────────────────────────────────── */

.ob-manual-vendors {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ob-manual-vendor-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.ob-manual-vendor-row:first-child {
  padding-top: 0;
}
.ob-manual-vendor-row:last-child {
  border-bottom: none;
}
.ob-remove-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}
.ob-remove-row-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* ─── AI-assisted sections ─────────────────────────────────── */

.ob-ai-spark {
  color: #7c3aed;
  font-size: 14px;
}
.ob-ai-spark-lg {
  font-size: 24px;
  color: #7c3aed;
}

.ob-ai-card {
  background: #fff;
  border: 1px solid #e0d4f5;
  border-radius: var(--radius);
  padding: 24px;
}

.ob-ai-header {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
}
.ob-ai-header-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.ob-ai-header-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.ob-ai-textarea {
  width: 100%;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--ink);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.ob-ai-textarea::placeholder {
  color: #94a3b8;
}
.ob-ai-textarea:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
  background: #fff;
}

.ob-ai-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.ob-ai-hint {
  font-size: 12px;
  color: var(--muted);
}

.ob-btn-ai {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}
.ob-btn-ai:hover {
  background: #6d28d9;
  border-color: #6d28d9;
}
.ob-btn-ai .ob-ai-spark {
  color: rgba(255,255,255,0.85);
}

/* ─── AI results preview ───────────────────────────────────── */

.ob-ai-results {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.ob-ai-results-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #faf5ff;
  border-bottom: 1px solid #e0d4f5;
  font-size: 13.5px;
  color: var(--ink);
}

.ob-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ob-preview-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.ob-preview-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.ob-preview-table tr:last-child td {
  border-bottom: none;
}

.ob-inline-input {
  font-family: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}
.ob-inline-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-weak);
}
.ob-inline-narrow {
  width: 56px;
  text-align: center;
}
.ob-inline-select {
  font-family: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

.ob-remove-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.ob-remove-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}

/* ─── Strategy quick-prompts ───────────────────────────────── */

.ob-strategy-prompts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.ob-strategy-revise-hint {
  margin-top: 12px;
  font-size: 13px;
}
.ob-strategy-prompts-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.ob-prompt-chip {
  font-family: inherit;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #e0d4f5;
  background: #faf5ff;
  color: #7c3aed;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}
.ob-prompt-chip:hover {
  background: #ede9fe;
  border-color: #7c3aed;
}

/* ─── Policy rules preview ─────────────────────────────────── */

.ob-policy-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
.ob-policy-rule {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.ob-policy-rule-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.ob-policy-rule-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
}
.ob-policy-rule-badge-replenishment {
  background: #dcfce7;
  color: #166534;
}
.ob-policy-rule-badge-vendor {
  background: #fef3c7;
  color: #92400e;
}
.ob-policy-rule-badge-demand {
  background: #e0e7ff;
  color: #3730a3;
}
.ob-policy-rule-scope {
  font-size: 12.5px;
  color: var(--muted);
  flex: 1;
}
.ob-policy-rule-body {
  padding: 14px;
}
.ob-policy-rule-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.ob-policy-rule-value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.ob-policy-rule-unit {
  color: var(--muted);
  font-weight: 400;
}
.ob-policy-rule-row {
  display: flex;
  gap: 32px;
}

/* ─── Toggle switch ────────────────────────────────────────── */

.ob-toggle {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.ob-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ob-toggle-track {
  width: 36px;
  height: 20px;
  background: #d1d5db;
  border-radius: 10px;
  position: relative;
  transition: background 0.2s;
}
.ob-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.ob-toggle input:checked + .ob-toggle-track {
  background: var(--accent);
}
.ob-toggle input:checked + .ob-toggle-track::after {
  transform: translateX(16px);
}

/* ─── Preferences grid ─────────────────────────────────────── */

.ob-prefs-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ob-pref-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ob-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink);
}
.ob-pref-label-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ob-pref-input-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.ob-pref-auto {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

.ob-abc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
}
.ob-abc-a {
  background: #dcfce7;
  color: #166534;
}
.ob-abc-b {
  background: #fef3c7;
  color: #92400e;
}
.ob-abc-c {
  background: var(--soft);
  color: var(--muted);
}

/* ─── All-Set step ─────────────────────────────────────────── */

.ob-done {
  margin-bottom: 28px;
}
.ob-done-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.ob-done-icon svg {
  width: 36px;
  height: 36px;
}

.ob-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  margin-bottom: 32px;
}
.ob-summary-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.ob-summary-item-done {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.ob-summary-check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #16a34a;
}
.ob-summary-check svg {
  width: 22px;
  height: 22px;
}
.ob-summary-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.ob-summary-detail {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* ─── Next steps grid ──────────────────────────────────────── */

.ob-next-steps {
  text-align: left;
  margin-bottom: 32px;
}
.ob-next-steps-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}
.ob-next-steps-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ob-next-step-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  text-decoration: none;
  transition: all 0.15s;
}
.ob-next-step-card:hover {
  border-color: var(--accent);
  background: #fafbff;
}
.ob-next-step-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-weak);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ob-next-step-icon svg {
  width: 20px;
  height: 20px;
}
.ob-next-step-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ob-next-step-text strong {
  font-size: 13.5px;
  color: var(--ink);
}
.ob-next-step-text span {
  font-size: 12.5px;
  color: var(--muted);
}
.ob-next-step-arrow {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
}

.ob-done-cta {
  margin-top: 8px;
}

/* ─── Skip hint ────────────────────────────────────────────── */

.ob-skip-hint {
  margin-top: 24px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* ─── Spinner ──────────────────────────────────────────────── */

.ob-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ob-spin 0.6s linear infinite;
}
@keyframes ob-spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════
   Policy Simulator Modal
   ══════════════════════════════════════════ */

/* Override for hidden attribute when CSS sets explicit display */
.simulate-modal [hidden] { display: none !important; }

.simulate-modal { max-width: 860px; width: 90vw; }
.simulate-modal__content { max-height: 85vh; overflow-y: auto; }

/* ── Variant search ── */
.simulate-search__results {
  max-height: 280px;
  overflow-y: auto;
  margin-top: 8px;
}
.simulate-variant-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--line-light, #f1f5f9);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 0.1s;
}
.simulate-variant-option:last-child { border-bottom: none; }
.simulate-variant-option:hover { background: var(--surface-hover, #f8fafc); }
.simulate-variant-option__sku {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  min-width: 100px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.simulate-variant-option__name {
  color: var(--ink-light, #64748b);
  font-size: 13px;
}

/* ── Loading spinner ── */
.simulate-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  gap: 12px;
}
.simulate-loading__spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--line, #e2e8f0);
  border-top-color: var(--link, #3b82f6);
  border-radius: 50%;
  animation: simulate-spin 0.7s linear infinite;
}
@keyframes simulate-spin { to { transform: rotate(360deg); } }

/* ── Results header ── */
.simulate-results__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.simulate-results__header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 2px;
}

/* ── Summary cards ── */
.simulate-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 700px) {
  .simulate-summary { grid-template-columns: repeat(2, 1fr); }
}
.simulate-card {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--line, #e2e8f0);
  background: var(--surface, #fff);
}
.simulate-card__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-light, #64748b);
  margin-bottom: 4px;
}
.simulate-card__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.simulate-card__meta {
  font-size: 12px;
  color: var(--ink-light, #64748b);
  margin-top: 4px;
}

/* ── Sections ── */
.simulate-section {
  margin-bottom: 20px;
  border-top: 1px solid var(--line-light, #f1f5f9);
  padding-top: 16px;
}
.simulate-section h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
}

/* ── Detail table ── */
.simulate-detail-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}
.simulate-detail-table td {
  padding: 5px 0;
  vertical-align: top;
}
.simulate-detail-table td:first-child {
  width: 180px;
  font-weight: 500;
  padding-right: 12px;
  white-space: nowrap;
}

/* ── Forecast chips ── */
.simulate-forecast-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  background: var(--surface-hover, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  margin-right: 6px;
  margin-bottom: 4px;
}

/* ── Rules trace ── */
.simulate-rules-group { margin-bottom: 16px; }
.simulate-rules-group__title { margin: 0 0 8px; }
.simulate-rules-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.simulate-rule {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--line-light, #f1f5f9);
  font-size: 13px;
  transition: background 0.1s;
}
.simulate-rule:hover { background: var(--surface-hover, #f8fafc); }
.simulate-rule--default {
  opacity: 0.65;
}
.simulate-rule--active {
  border-left: 3px solid var(--link, #3b82f6);
}
.simulate-rule__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.simulate-rule__name {
  font-weight: 600;
  color: var(--ink);
}
.simulate-rule__value {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
}
.simulate-rule__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-light, #64748b);
}
.simulate-rule__candidates {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line-light, #f1f5f9);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.simulate-rule__candidate {
  font-size: 11px;
  color: var(--ink-light, #64748b);
  padding: 2px 0;
}
.simulate-rule__candidate--winner {
  color: var(--ink);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   Export CSV modal
   ═══════════════════════════════════════════════════════════════ */

.export-modal {
  width: min(560px, 92vw);
  padding: 0;
  display: flex;
  flex-direction: column;
  height: min(680px, 80vh);
  max-height: 80vh;
  overflow: hidden;
}

/* Ensure the dialog itself doesn't fight the layout */
dialog.modal:has(.export-modal) {
  max-height: 90vh;
  overflow: visible;
}

.export-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 0;
  flex-shrink: 0;
}

.export-modal-header-text h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.export-modal-header-text .muted {
  margin: 2px 0 0;
  font-size: 13px;
}

/* ── Toolbar ── */

.export-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.export-search-wrap {
  flex: 1;
  position: relative;
}

.export-search-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.export-search-input {
  width: 100%;
  padding: 7px 10px 7px 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  background: var(--panel);
  color: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.export-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-weak);
}

.export-search-input::placeholder {
  color: var(--muted);
}

.export-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.export-link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.12s;
}

.export-link-btn:hover {
  background: var(--accent-weak);
}

.export-toolbar-divider {
  width: 1px;
  height: 16px;
  background: var(--line);
}

/* ── Column body ── */

.export-columns-body {
  overflow-y: auto;
  flex: 1 1 0;
  min-height: 0;
  padding: 4px 0;
}

/* ── Group ── */

.export-group {
  border-bottom: 1px solid var(--line);
}

.export-group:last-child {
  border-bottom: none;
}

.export-group[hidden] {
  display: none;
}

.export-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: inherit;
  transition: background 0.1s;
}

.export-group-header:hover {
  background: #f8fafc;
}

.export-group-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.export-group-name {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.export-group-count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.export-chevron {
  transition: transform 0.15s ease;
  flex-shrink: 0;
  color: var(--muted);
}

.export-group--collapsed .export-chevron {
  transform: rotate(-90deg);
}

.export-group--collapsed .export-group-body {
  display: none;
}

/* ── Column items ── */

.export-group-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2px 0;
  padding: 0 20px 10px;
}

.export-col-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 13px;
}

.export-col-label:hover {
  background: #f1f5f9;
}

.export-col-label[hidden] {
  display: none;
}

.export-checkbox {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}

.export-col-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Footer ── */

.export-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: #f9fafb;
  flex-shrink: 0;
}

/* ── State indicators on groups ── */

.export-group--none .export-group-count {
  color: #ef4444;
}

.export-group--all .export-group-count {
  color: var(--accent);
}

/* ── Compact stacked form (used in sidebars) ─────────────────── */

.form-stack-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-stack-compact .form-field {
  margin-bottom: 0;
}
.form-stack-compact .form-label {
  font-size: 12px;
  margin-bottom: 2px;
}
.form-stack-compact .input-compact {
  font-size: 13px;
}

.data-table--compact th,
.data-table--compact td {
  padding: 6px 8px;
  font-size: 12px;
}

.text-xs { font-size: 11px; }
.text-warning { color: #d97706; }

/* ── Auth pages ─────────────────────────────────────────── */
.auth-body {
  margin: 0;
  font-family: "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: #1a1a2e;
  background: #f5f6f8;
  -webkit-font-smoothing: antialiased;
}
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.auth-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 24px rgba(0,0,0,.04);
  padding: 40px 36px;
  width: 100%;
  max-width: 440px;
}
.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  justify-content: center;
}
.auth-logo-mark {
  height: 36px;
  width: auto;
}
.auth-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 6px;
  text-align: center;
}
.auth-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 24px;
  text-align: center;
}
.auth-form .form-group {
  margin-bottom: 16px;
}
.auth-form .form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 5px;
}
.auth-form .form-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.auth-form .form-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.auth-form .form-input-code {
  font-size: 22px;
  letter-spacing: 6px;
  text-align: center;
  font-family: monospace;
}
.auth-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.auth-form .form-actions {
  margin-top: 24px;
}
.auth-form .form-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #b91c1c;
}
.auth-form .form-errors p {
  margin: 2px 0;
}
.btn-full {
  width: 100%;
  display: block;
  text-align: center;
}
.auth-links {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
}
.auth-link {
  color: #6366f1;
  text-decoration: none;
}
.auth-link:hover {
  text-decoration: underline;
}
.auth-link-sep {
  color: #d1d5db;
  margin: 0 6px;
}
.auth-link-note {
  color: #6b7280;
}

/* ── Account switcher ─────────────────────────────────── */
.account-switcher {
  position: relative;
}
.account-switcher-pill {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 10px;
  list-style: none;
}
.account-switcher-pill:hover {
  background: #e5e7eb;
}
.account-switcher-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  min-width: 200px;
  z-index: 50;
  padding: 4px;
}
.account-switcher-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: #374151;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.account-switcher-item:hover {
  background: #f3f4f6;
}
.account-switcher-item.is-current {
  font-weight: 600;
  color: #6366f1;
}

/* ── User menu enhancements ─────────────────────────── */
.user-menu-name {
  display: block;
  padding: 8px 12px 2px;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
}
.user-menu-email {
  display: block;
  padding: 0 12px 8px;
  font-size: 12px;
  color: #6b7280;
}
.user-menu-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 4px 0;
}
.user-menu-item-danger {
  color: #dc2626 !important;
}

/* ── Impersonation banner ─────────────────────────── */
.impersonation-banner {
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.impersonation-stop-btn {
  background: #92400e;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}

/* Company-admin impersonation banner — amber/orange, distinct from super-admin yellow */
.impersonation-banner--company {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
}
.impersonation-banner-expiry {
  opacity: 0.75;
  font-size: 11px;
}
.impersonation-stop-btn--company {
  background: #9a3412;
}

/* Impersonation confirm card */
.impersonation-confirm-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 560px;
}
.impersonation-confirm-target {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.impersonation-confirm-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-weak);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}
.impersonation-confirm-target-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.impersonation-confirm-description {
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.5;
}
.impersonation-confirm-security-notes {
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 24px;
}
.impersonation-confirm-security-notes ul {
  margin: 0;
  padding-left: 20px;
  color: #78350f;
  font-size: 13px;
  line-height: 1.6;
}
.impersonation-confirm-form .form-field {
  margin-bottom: 20px;
}
.impersonation-confirm-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.btn-warning {
  background: #d97706;
  color: #fff;
  border-color: #d97706;
  box-shadow: 0 1px 2px rgba(217, 119, 6, 0.18);
}
.btn-warning:hover {
  background: #b45309;
  border-color: #b45309;
  color: #fff;
}
.btn-warning:active {
  background: #92400e;
  border-color: #92400e;
  box-shadow: none;
  transform: scale(0.97);
}
.btn-warning:focus-visible {
  outline: 2px solid #d97706;
  outline-offset: 2px;
}
.table-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Admin portal ─────────────────────────────────────── */
.admin-body {
  margin: 0;
  font-family: "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: #1a1a2e;
  background: #f0f1f3;
  -webkit-font-smoothing: antialiased;
}
.admin-shell { min-height: 100vh; }
.admin-header {
  background: #1a1a2e;
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 52px;
  gap: 32px;
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.admin-brand .header-logo-mark { height: 24px; }
.admin-brand-text {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.admin-nav { display: flex; gap: 4px; flex: 1; }
.admin-nav-link {
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
}
.admin-nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.admin-nav-link.is-active { color: #fff; background: rgba(255,255,255,.12); }
.admin-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-user-badge {
  background: #6366f1;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}
.admin-page { }
.admin-page-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 20px;
}
.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.admin-page-header .admin-page-title { margin: 0; }

/* Metrics */
.admin-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.admin-metric-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  text-align: center;
}
.admin-metric-value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #1a1a2e;
}
.admin-metric-label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}
.admin-metric-card-link {
  display: block;
  padding: 20px;
  margin: -20px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.admin-metric-card-link:hover {
  background: rgba(0,0,0,.03);
}
.admin-metric-value--small {
  font-size: 16px;
  font-weight: 600;
}

/* Background jobs filters */
.admin-filters {
  background: #fff;
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  margin-bottom: 24px;
}
.admin-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}
.admin-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-filter-group--actions {
  flex-direction: row;
  align-items: center;
}
.admin-filter-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}
.admin-filter-select,
.admin-filter-input {
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
  min-width: 180px;
}
.admin-filter-input {
  min-width: 220px;
}
.admin-filter-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}
.admin-filter-details summary {
  cursor: pointer;
  font-size: 13px;
  color: #6b7280;
}

/* Tables */
.admin-tables-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.admin-table-section {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  margin-bottom: 24px;
}
.admin-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 12px;
}
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  padding: 0;
  list-style: none;
}
.admin-tab-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 6px 6px 0 0;
}
.admin-tab-link:hover {
  color: var(--ink);
  background: var(--soft);
}
.admin-tab-link.is-active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.admin-tab-count {
  font-size: 12px;
  opacity: 0.9;
}
.admin-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.admin-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 400px;
}
.admin-search-form .form-input { flex: 1; min-width: 0; }

/* Admin form controls (inputs, selects, labels) */
.admin-content .form-input,
.admin-content .form-select,
.admin-content input[type="text"],
.admin-content input[type="email"],
.admin-content input[type="password"],
.admin-content input[type="number"] {
  width: 100%;
  max-width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #1a1a2e;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-content .form-input:focus,
.admin-content .form-select:focus,
.admin-content input[type="text"]:focus,
.admin-content input[type="email"]:focus,
.admin-content input[type="password"]:focus,
.admin-content input[type="number"]:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.admin-content .form-select {
  cursor: pointer;
  appearance: auto;
}
.admin-content .form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}
.admin-content .form-field {
  margin-bottom: 0;
}
.admin-content .form-hint {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}
.admin-content .form-errors {
  padding: 12px 16px;
  margin-bottom: 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 13px;
  color: #b91c1c;
}
.admin-content .form-errors p {
  margin: 2px 0;
}
.admin-content .form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.admin-content .form-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.admin-content .form-stack .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Detail cards */
.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.admin-detail-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.admin-detail-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 12px;
}
.admin-dl { margin: 0; }
.admin-dl dt {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}
.admin-dl dd {
  font-size: 13px;
  color: #374151;
  margin: 2px 0 0;
}

/* Pagination */
.admin-pagination {
  display: flex;
  gap: 4px;
  margin-top: 16px;
  justify-content: center;
}
.admin-page-link, .admin-page-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  font-size: 13px;
  border-radius: 6px;
  text-decoration: none;
}
.admin-page-link {
  color: #374151;
  background: #fff;
  border: 1px solid #e5e7eb;
}
.admin-page-link:hover { background: #f3f4f6; }
.admin-page-current {
  color: #fff;
  background: #6366f1;
  font-weight: 600;
}

/* Settings extras */
.settings-section {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  margin-bottom: 20px;
}
.settings-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 16px;
}
.settings-section-description {
  font-size: 13px;
  margin: -8px 0 16px;
}
.invite-member-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}
.invite-member-form .form-field {
  margin: 0;
}
.invite-member-form__email {
  flex: 1;
  min-width: 200px;
}
.invite-member-form__email .input {
  width: 100%;
  min-width: 0;
}
.invite-member-form__role {
  width: 140px;
}
.invite-member-form__role .input {
  width: 100%;
}
.invite-member-form__submit .label {
  visibility: hidden;
}

/* Profile & Security */
.profile-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.profile-form__grid .form-field-wide {
  grid-column: span 2;
}
.profile-form__actions,
.password-form__actions {
  margin-top: 8px;
}
.settings-2fa-block {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.settings-2fa-block .settings-status {
  margin: 0;
}
.settings-2fa-block .btn {
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .profile-form__grid {
    grid-template-columns: 1fr;
  }
  .profile-form__grid .form-field-wide {
    grid-column: span 1;
  }
}
.settings-backup-codes__title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
}
.settings-status {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 12px;
}
.settings-status-ok { color: #059669; }
.settings-backup-codes {
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}
.backup-codes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.backup-code {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  text-align: center;
}
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.settings-2fa-required-banner {
  background: #fef3c7;
  color: #92400e;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}
/* Switch-style toggle (only when it contains .toggle-slider, e.g. settings/team) */
.toggle:has(.toggle-slider) {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}
.toggle:has(.toggle-slider) input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 22px;
  cursor: pointer;
  transition: .2s;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .2s;
}
.toggle:has(.toggle-slider) input:checked + .toggle-slider {
  background: #6366f1;
}
.toggle:has(.toggle-slider) input:checked + .toggle-slider::before {
  transform: translateX(18px);
}
.form-inline-row { display: flex; gap: 8px; align-items: flex-end; }
.inline-form { display: inline; }
.role-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.role-type-badge--system {
  background: var(--bg-muted, #f3f4f6);
  color: var(--text-muted, #6b7280);
}
.role-type-badge--custom {
  background: #e0e7ff;
  color: #4338ca;
}
.role-permissions-cell { max-width: 320px; }
.role-permissions-details { margin: 0; }
.role-permissions-summary {
  cursor: pointer;
  font-size: 13px;
  list-style: none;
}
.role-permissions-summary::-webkit-details-marker { display: none; }
.role-permissions-summary::marker { content: ""; }
.role-permissions-list {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  line-height: 1.5;
}
.role-permissions-list li { margin-bottom: 2px; }

.section-header--with-action {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.section-header--with-action .settings-section-title { margin-bottom: 4px; }
.section-header--with-action .settings-section-description { margin-bottom: 0; }

.permissions-by-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.permissions-group {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--bg-subtle, #fafafa);
}
.permissions-group__title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.permissions-group__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}
.form-stack--spaced .form-field + .form-field { margin-top: 24px; }

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
}
.two-factor-qr {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.two-factor-qr svg { width: 200px; height: 200px; }

/* Badges */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.badge-success { background: #d1fae5; color: #065f46; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-create { background: #dbeafe; color: #1e40af; }
.badge-update { background: #e0e7ff; color: #3730a3; }
.badge-destroy { background: #fee2e2; color: #991b1b; }
.badge-info { background: #dbeafe; color: #1e40af; }
/* Neutral + colour aliases (many views use these alongside the names above) */
.badge-muted { background: #f1f5f9; color: #475569; }
.badge-secondary { background: #e2e8f0; color: #475569; }
.badge-light { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
.badge-green { background: #d1fae5; color: #065f46; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-purple { background: #ede9fe; color: #5b21b6; }
.badge-gray { background: #f1f5f9; color: #64748b; }
.badge-warn { background: #fef3c7; color: #92400e; }

/* "From: <App Name>" attribution badge — distinct gradient so the
   AI-built badge stands apart from generic info badges. Always wraps
   a link to the AI App Builder hub. */
.badge-app-attribution {
  background: linear-gradient(135deg, #ede9fe 0%, #fce7f3 100%);
  color: #6d28d9;
  text-decoration: none;
  border: 1px solid rgba(109, 40, 217, 0.18);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.badge-app-attribution::before {
  content: "✦";
  font-size: 10px;
  line-height: 1;
}
a.badge-app-attribution:hover {
  background: linear-gradient(135deg, #ddd6fe 0%, #fbcfe8 100%);
  color: #5b21b6;
}

/* Audit log */
.audit-change {
  font-size: 12px;
  margin-bottom: 2px;
}
.audit-old {
  color: #dc2626;
  text-decoration: line-through;
}
.audit-new {
  color: #059669;
}

/* Billing */
.billing-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.billing-plan-option {
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: 24px;
  text-align: center;
}
.billing-plan-option.is-current { border-color: #6366f1; }
.billing-plan-option h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.billing-plan-price { font-size: 24px; font-weight: 700; color: #1a1a2e; }
.billing-plan-price span { font-size: 14px; color: #6b7280; font-weight: 400; }
.billing-plan-card {
  background: #f3f4f6;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}
.billing-plan-status {
  font-size: 13px;
  font-weight: 600;
}
.status-active { color: #059669; }
.status-trialing { color: #6366f1; }
.status-past_due { color: #d97706; }
.status-canceled { color: #dc2626; }

.billing-manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.billing-manage-actions form {
  margin: 0;
  display: inline-block;
}

/* Forecast decision callout */
.forecast-decision-callout {
  margin-top: 0;
}
.forecast-decision-callout p {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  color: #334155;
  margin: 0;
}
.forecast-decision-meta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.forecast-meta-item {
  font-size: 12px;
  color: #6b7280;
}

/* Forecast Intelligence page */
.forecast-accuracy-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.forecast-accuracy-green { color: #059669; }
.forecast-accuracy-amber { color: #d97706; }
.forecast-accuracy-red   { color: #dc2626; }

/* Forecasting metric cards — clearer hierarchy and readability */
.metric-cards--forecasting {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1100px) {
  .metric-cards--forecasting {
    grid-template-columns: repeat(2, 1fr);
  }
  .metric-cards--forecasting .metric-card--primary {
    grid-column: 1 / -1;
  }
}
@media (max-width: 520px) {
  .metric-cards--forecasting {
    grid-template-columns: 1fr;
  }
}

.metric-cards--forecasting .metric-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--panel, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  min-width: 0;
}

.metric-cards--forecasting .metric-card--primary {
  background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
  border-color: var(--line, #e2e8f0);
  padding: 22px 24px;
}

.metric-cards--forecasting .metric-card-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #64748b);
  margin: 0;
}

.metric-cards--forecasting .metric-card-value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink, #0f172a);
  margin: 0;
  letter-spacing: -0.02em;
}

.metric-cards--forecasting .metric-card--primary .metric-card-value {
  font-size: 26px;
}

.metric-cards--forecasting .metric-card-value-muted {
  font-weight: 500;
  color: var(--muted, #64748b);
  font-size: 0.95em;
}

.metric-cards--forecasting .metric-card-sublabel {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #64748b);
  margin: 0;
}

.metric-cards--forecasting .forecast-accuracy-value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.metric-cards--forecasting .metric-card--primary .forecast-accuracy-value {
  font-size: 36px;
}

/* Accuracy breakdown — own card below metric row */
.accuracy-breakdown-card {
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--panel, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.accuracy-breakdown-card__header {
  margin-bottom: 14px;
}
.accuracy-breakdown-card__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #0f172a);
}
.accuracy-breakdown-card__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  max-width: 56em;
}
.accuracy-breakdown-card__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.accuracy-breakdown-card__segments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.accuracy-breakdown-segment {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--soft, #f8fafc);
  border: 1px solid var(--line, #e5e7eb);
}
.accuracy-breakdown-segment__label {
  font-size: 12px;
  color: var(--muted, #64748b);
}
.accuracy-breakdown-segment__value {
  font-size: 16px;
  font-weight: 700;
}
.accuracy-breakdown-segment__value.forecast-accuracy-green { color: #059669; }
.accuracy-breakdown-segment__value.forecast-accuracy-amber { color: #d97706; }
.accuracy-breakdown-segment__value.forecast-accuracy-red { color: #dc2626; }
.accuracy-breakdown-card__foot {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

/* Forecasting panels — card + single-line filters */
.forecasting-panel {
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--line, #e5e7eb);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.forecasting-panel-header {
  padding: 16px 20px 0;
  margin-bottom: 12px;
}
.forecasting-panel-header h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #0f172a);
}
.forecasting-panel-header .muted {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  max-width: 56em;
}
.forecasting-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 12px 20px;
  margin: 0 0 12px;
  background: var(--soft, #f8fafc);
  border-top: 1px solid var(--line, #e5e7eb);
  border-bottom: 1px solid var(--line, #e5e7eb);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 900px) {
  .forecasting-filters {
    flex-wrap: wrap;
  }
}
.forecasting-filters__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.forecasting-filters__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #64748b);
  margin: 0;
}
.forecasting-filters__input,
.forecasting-filters__select {
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  min-width: 0;
  border-radius: 6px;
  border: 1px solid var(--line, #e2e8f0);
  background: #fff;
}
.forecasting-filters__input {
  width: 160px;
}
.forecasting-filters__select {
  min-width: 100px;
  width: 120px;
  max-width: 160px;
  cursor: pointer;
}
.forecasting-filters__submit {
  flex-shrink: 0;
  margin-left: 4px;
}
.forecasting-panel-meta {
  margin: 0 20px 10px;
  font-size: 12px;
}
.forecasting-panel-table-wrap {
  margin: 0 20px 20px;
}
.forecasting-panel-table-wrap .data-table {
  margin: 0;
}
.forecasting-panel-pagination {
  margin: 12px 20px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Method × demand pattern pivot table */
.forecasting-pivot-panel .panel-header {
  margin-bottom: 12px;
}
.forecasting-pivot-wrap {
  min-width: 0;
}
.forecasting-pivot-table {
  margin: 0;
}
.forecasting-pivot-th {
  white-space: nowrap;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #64748b);
}
.forecasting-pivot-cell {
  padding: 8px 12px;
  font-size: 13px;
}
.forecasting-pivot-total-row {
  border-top: 2px solid var(--line, #e5e7eb);
  background: var(--soft, #f8fafc);
}
.forecasting-pivot-total-row td {
  padding: 10px 12px;
}

/* Topbar forecast status (status + progress left of Run button) */
.toolbar-row--forecasting .topbar-left {
  flex: 0 1 auto;
}
.topbar-forecast-status {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
}
.forecast-header-status {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e5e7eb);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  max-width: 100%;
}
.forecast-header-status--complete {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-color: #a7f3d0;
}
.forecast-header-status--running {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-color: #c7d2fe;
}
.forecast-header-status--error {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #fca5a5;
}
.forecast-header-status--empty .forecast-header-status-meta {
  font-size: 13px;
}
.forecast-header-status-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  white-space: nowrap;
}
.forecast-header-status-meta {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #64748b);
}
.forecast-header-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.forecast-header-progress-bar {
  width: 100px;
  height: 6px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.forecast-header-progress-fill {
  height: 100%;
  background: #4f46e5;
  border-radius: 4px;
  transition: width 0.4s ease;
  min-width: 0;
}
.forecast-header-progress-text {
  font-size: 12px;
  color: var(--ink, #0f172a);
  white-space: nowrap;
  font-weight: 500;
}
.forecast-header-phase.muted {
  font-size: 11px;
  color: var(--muted, #64748b);
}

/* Demand & replenishment run progress bar (header) */
.demand-replenishment-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  margin: 0 -4px 0 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border: 1px solid #c7d2fe;
  font-size: 12px;
}
.demand-replenishment-progress__bar-wrap {
  width: 120px;
  height: 6px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.demand-replenishment-progress__fill {
  height: 100%;
  background: #4f46e5;
  border-radius: 4px;
  transition: width 0.35s ease;
  min-width: 0;
}
.demand-replenishment-progress__phase {
  color: var(--muted, #64748b);
  white-space: nowrap;
}

/* Demand & replenishment run progress in main content (flash-style banner) */
.demand-replenishment-banner {
  margin-bottom: 16px;
}
.demand-replenishment-banner__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.demand-replenishment-banner__bar-wrap {
  width: 180px;
  height: 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.demand-replenishment-banner__fill {
  height: 100%;
  background: #4f46e5;
  border-radius: 4px;
  transition: width 0.35s ease;
  min-width: 0;
}
.demand-replenishment-banner__text {
  font-weight: 500;
  color: var(--ink, #0f172a);
}
.demand-replenishment-banner__phase.muted {
  font-size: 12px;
  color: var(--muted, #64748b);
}

.forecast-status-banner {
  padding: 12px 20px 20px;
}
.forecast-intelligence-card .panel-header-tight {
  margin-bottom: 0;
}
.forecast-intelligence-card .forecast-status-banner {
  padding-top: 0;
  padding: 0 20px 20px;
}

.forecast-progress-wrap {
  margin-top: 16px;
}
.forecast-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}
.forecast-progress-phase {
  font-weight: 600;
  color: #334155;
}
.forecast-progress-eta {
  color: #6b7280;
  font-size: 12px;
}
.forecast-progress-bar {
  width: 100%;
  height: 10px;
  background: #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}
.forecast-progress-fill {
  height: 100%;
  background: #6366f1;
  border-radius: 6px;
  transition: width 0.4s ease;
  min-width: 0;
}
.forecast-progress-text {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
}

/* ═══════════════════════════════════════════════════
   AI Chatbar — Shopify Sidekick-style panel
   ═══════════════════════════════════════════════════ */

.header-ai-chat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.header-ai-chat-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.header-ai-chat-btn svg {
  width: 20px;
  height: 20px;
}
.header-ai-chat-btn.is-active {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.ai-chatbar {
  position: fixed;
  top: 48px;
  right: 0;
  bottom: 0;
  z-index: 40;
  pointer-events: none;
}

.ai-chatbar-panel {
  position: absolute;
  top: 0;
  right: var(--shell-gutter, 12px);
  bottom: 0;
  width: 380px;
  background: #fff;
  border-left: 1px solid var(--line, #e2e8f0);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: flex;
  flex-direction: column;
  transform: translateX(calc(100% + var(--shell-gutter, 12px)));
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  overflow: hidden;
}
.ai-chatbar-panel--open {
  transform: translateX(0);
  pointer-events: auto;
}
.ai-chatbar-panel--expanded {
  width: 700px;
}

body:has(.ai-chatbar-panel--open) .app-shell {
  margin-right: calc(380px + var(--shell-gutter, 12px));
}
body:has(.ai-chatbar-panel--expanded) .app-shell {
  margin-right: calc(700px + var(--shell-gutter, 12px));
}
body:has(.ai-chatbar-panel--open) .header-bar {
  right: calc(380px + var(--shell-gutter, 12px) + var(--shell-gutter, 12px));
}
body:has(.ai-chatbar-panel--expanded) .header-bar {
  right: calc(700px + var(--shell-gutter, 12px) + var(--shell-gutter, 12px));
}

/* ── Header ── */

.ai-chatbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  flex-shrink: 0;
}
.ai-chatbar-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.ai-chatbar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-chatbar-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.ai-chatbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  transition: background 0.15s;
}
.ai-chatbar-icon-btn:hover {
  background: var(--surface, #f1f5f9);
  color: var(--text, #0f172a);
}
.ai-chatbar-icon-btn.is-active {
  background: var(--surface, #f1f5f9);
  color: var(--accent, #3b82f6);
}

/* ── History dropdown popup ── */

.ai-chatbar-history-dropdown {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 10;
  display: flex;
  flex-direction: column;
}
.ai-chatbar-history-dropdown.hidden {
  display: none;
}
.ai-chatbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  flex-shrink: 0;
}
.ai-chatbar-search svg {
  flex-shrink: 0;
  color: var(--text-muted, #64748b);
}
.ai-chatbar-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text, #0f172a);
}
.ai-chatbar-search input::placeholder {
  color: var(--text-muted, #64748b);
}
.ai-chatbar-conversation-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.ai-chatbar-conv-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
}
.ai-chatbar-conv-item:hover {
  background: var(--surface, #f1f5f9);
}
.ai-chatbar-conv-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-chatbar-conv-preview {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-chatbar-conv-date {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
}
.ai-chatbar-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-muted, #64748b);
  font-size: 13px;
}

/* ── Chat View ── */

.ai-chatbar-chat-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ── Welcome screen ── */

.ai-chatbar-welcome {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ai-chatbar-welcome.hidden {
  display: none;
}
.ai-chatbar-welcome-icon {
  margin-bottom: 12px;
  color: var(--accent, #3b82f6);
}
.ai-chatbar-welcome h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #0f172a);
  margin: 0 0 20px 0;
}
.ai-chatbar-welcome h3 span:empty { display: none; }

/* ── Skills / Quick Actions ── */

.ai-chatbar-skills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 320px;
}
.ai-chatbar-skill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line, #e2e8f0);
  background: #fff;
  color: var(--text, #0f172a);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.ai-chatbar-skill:hover {
  background: var(--surface, #f1f5f9);
  border-color: var(--accent, #3b82f6);
}
.ai-chatbar-skill-icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* ── Messages ── */

.ai-chatbar-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-chatbar-msg {
  display: flex;
  gap: 8px;
  max-width: 92%;
}
.ai-chatbar-msg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.ai-chatbar-msg--assistant {
  align-self: flex-start;
}

.ai-chatbar-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  margin-top: 2px;
}

.ai-chatbar-msg-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.ai-chatbar-msg--user .ai-chatbar-msg-bubble {
  background: var(--accent, #3b82f6);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-chatbar-msg--assistant .ai-chatbar-msg-bubble {
  background: var(--surface, #f1f5f9);
  color: var(--text, #0f172a);
  border-bottom-left-radius: 4px;
}
.ai-chatbar-msg-bubble p {
  margin: 0 0 6px 0;
}
.ai-chatbar-msg-bubble p:last-child {
  margin-bottom: 0;
}
.ai-chatbar-msg-bubble ul,
.ai-chatbar-msg-bubble ol {
  margin: 4px 0 6px 0;
  padding-left: 18px;
}
.ai-chatbar-msg-bubble li {
  margin-bottom: 2px;
}
.ai-chatbar-msg-bubble code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12px;
}
.ai-chatbar-msg--user .ai-chatbar-msg-bubble code {
  background: rgba(255, 255, 255, 0.2);
}
.ai-chatbar-msg-bubble strong {
  font-weight: 600;
}

/* ── Action pills ── */

.ai-chatbar-msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.ai-chatbar-action-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent, #3b82f6);
  font-size: 11px;
  font-weight: 500;
}

.ai-chatbar-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--line, #e2e8f0);
  background: transparent;
  color: var(--accent, #3b82f6);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.ai-chatbar-nav-btn:hover {
  background: rgba(37, 99, 235, 0.08);
}

/* ── Entity cards ── */

.ai-chatbar-entity-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.ai-chatbar-entity-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  min-height: 72px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--line, #e2e8f0);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
  overflow: hidden;
}
.ai-chatbar-entity-card:hover {
  border-color: var(--accent, #3b82f6);
  background: #fafbff;
}
.ai-chatbar-entity-card-thumb {
  width: 56px;
  min-width: 56px;
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}
.ai-chatbar-entity-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ai-chatbar-entity-card-thumb .ai-chatbar-entity-card-icon {
  font-size: 22px;
}
.ai-chatbar-entity-card-body {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-chatbar-entity-card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ai-chatbar-entity-card-sku {
  font-size: 11px;
  color: var(--text-muted, #64748b);
}
.ai-chatbar-entity-card-fields {
  width: 100%;
  flex-basis: 100%;
  background: rgba(0, 0, 0, 0.02);
  padding: 8px 12px 10px;
  box-sizing: border-box;
}
.ai-chatbar-entity-card-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.ai-chatbar-entity-card-field:last-child {
  border-bottom: none;
}
.ai-chatbar-entity-card-field-label {
  color: var(--text-muted, #64748b);
  flex-shrink: 0;
}
.ai-chatbar-entity-card-field-value {
  font-weight: 600;
  text-align: right;
  min-width: 0;
}

/* ── Typing indicator ── */

.ai-chatbar-typing {
  padding: 8px 16px;
  display: flex;
  align-items: center;
}
.ai-chatbar-typing.hidden {
  display: none;
}
.ai-chatbar-typing-dots {
  display: flex;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--surface, #f1f5f9);
}
.ai-chatbar-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted, #64748b);
  animation: ai-chatbar-bounce 1.4s ease-in-out infinite;
}
.ai-chatbar-typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.ai-chatbar-typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes ai-chatbar-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* ── Plus menu ── */

.ai-chatbar-plus-menu,
.ai-chatbar-skills-popup,
.ai-chatbar-mention-popup {
  position: absolute;
  bottom: 100%;
  left: 12px;
  right: 12px;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
  z-index: 5;
  padding: 6px 0;
  margin-bottom: 4px;
}
.ai-chatbar-plus-menu.hidden,
.ai-chatbar-skills-popup.hidden,
.ai-chatbar-mention-popup.hidden {
  display: none;
}

.ai-chatbar-plus-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text, #0f172a);
  text-align: left;
  transition: background 0.15s;
}
.ai-chatbar-plus-menu-item:hover {
  background: var(--surface, #f1f5f9);
}
.ai-chatbar-plus-menu-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--surface, #f1f5f9);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  flex-shrink: 0;
}
.ai-chatbar-plus-menu-label {
  flex: 1;
}
.ai-chatbar-plus-menu-hint {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  background: var(--surface, #f1f5f9);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

/* ── Popup back button ── */

.ai-chatbar-popup-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  border-bottom: 1px solid var(--line, #e2e8f0);
  margin-bottom: 4px;
}
.ai-chatbar-popup-back:hover {
  color: var(--text, #0f172a);
}

/* ── Skills popup items ── */

.ai-chatbar-skills-popup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text, #0f172a);
  text-align: left;
  transition: background 0.15s;
}
.ai-chatbar-skills-popup-item:hover {
  background: var(--surface, #f1f5f9);
}
.ai-chatbar-skills-popup-item span:first-child {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.ai-chatbar-skills-section {
  padding: 4px 0 0;
}
.ai-chatbar-skills-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted, #64748b);
  padding: 6px 14px 4px;
}
.ai-chatbar-skills-custom-list {
  max-height: 160px;
  overflow-y: auto;
}
.ai-chatbar-skills-empty {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  padding: 6px 14px;
}
.ai-chatbar-skill-custom-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 14px 2px 8px;
}
.ai-chatbar-skill-custom-run {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text, #0f172a);
  text-align: left;
  border-radius: 6px;
  transition: background 0.15s;
}
.ai-chatbar-skill-custom-run:hover {
  background: var(--surface, #f1f5f9);
}
.ai-chatbar-skill-custom-edit,
.ai-chatbar-skill-custom-delete {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted, #64748b);
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.ai-chatbar-skill-custom-edit:hover,
.ai-chatbar-skill-custom-delete:hover {
  color: var(--text, #0f172a);
  background: var(--surface, #f1f5f9);
}
.ai-chatbar-skill-custom-delete:hover {
  color: #b91c1c;
}
.ai-chatbar-skill-form {
  padding: 10px 14px;
  border-top: 1px solid var(--line, #e2e8f0);
  margin: 4px 0 0;
}
.ai-chatbar-skill-form-name,
.ai-chatbar-skill-form-prompt {
  width: 100%;
  display: block;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}
.ai-chatbar-skill-form-prompt {
  resize: vertical;
  min-height: 52px;
}
.ai-chatbar-skill-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.ai-chatbar-skill-form-btn {
  padding: 6px 12px;
  border: 1px solid var(--line, #e2e8f0);
  background: #fff;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text, #0f172a);
}
.ai-chatbar-skill-form-btn.primary {
  background: var(--primary, #2d457f);
  color: #fff;
  border-color: var(--primary, #2d457f);
}
.ai-chatbar-skill-new {
  margin-top: 4px;
  border-top: 1px dashed var(--line, #e2e8f0);
}

/* ── Mention popup ── */

.ai-chatbar-mention-popup-results {
  max-height: 200px;
  overflow-y: auto;
}
.ai-chatbar-search--inline {
  border-bottom: none;
  padding: 6px 14px;
}
.ai-chatbar-search--inline input {
  font-size: 12px;
}

/* ── Input area ── */

.ai-chatbar-input-area {
  border-top: 1px solid var(--line, #e2e8f0);
  padding: 12px 16px;
  flex-shrink: 0;
  position: relative;
  background: #fff;
}
.ai-chatbar-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  background: var(--surface, #f1f5f9);
  border-radius: 12px;
  padding: 4px 4px 4px 8px;
}
.ai-chatbar-input-row textarea {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  line-height: 1.5;
  padding: 6px 4px;
  resize: none;
  color: var(--text, #0f172a);
  max-height: 120px;
  font-family: inherit;
}
.ai-chatbar-input-row textarea::placeholder {
  color: var(--text-muted, #64748b);
}
.ai-chatbar-attach-btn,
.ai-chatbar-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
  background: transparent;
  color: var(--text-muted, #64748b);
}
.ai-chatbar-attach-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text, #0f172a);
}
.ai-chatbar-attach-btn.is-active {
  color: var(--accent, #3b82f6);
}
.ai-chatbar-send-btn {
  background: var(--accent, #3b82f6);
  color: #fff;
}
.ai-chatbar-send-btn:hover {
  opacity: 0.9;
}
.ai-chatbar-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Mentions dropdown ── */

.ai-chatbar-mentions-dropdown {
  position: absolute;
  bottom: 100%;
  left: 16px;
  right: 16px;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}
.ai-chatbar-mentions-dropdown.hidden {
  display: none;
}
.ai-chatbar-mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text, #0f172a);
  text-align: left;
  transition: background 0.15s;
}
.ai-chatbar-mention-item:hover {
  background: var(--surface, #f1f5f9);
}
.ai-chatbar-mention-item.highlighted {
  background: var(--surface, #e2e8f0);
}
.ai-chatbar-mention-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.ai-chatbar-mention-type {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted, #64748b);
  text-transform: capitalize;
}

/* Forecast / replenishment recommendation attached to Pilot AI chat */
.ai-chatbar-rec-context {
  padding: 0 0 6px;
}
.ai-chatbar-rec-context.hidden {
  display: none;
}
.ai-chatbar-rec-context-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(14, 165, 233, 0.1));
  border: 1px solid rgba(99, 102, 241, 0.25);
  font-size: 12px;
  line-height: 1.3;
  max-width: 100%;
}
.ai-chatbar-rec-context-icon {
  display: inline-flex;
  color: var(--accent, #6366f1);
  flex-shrink: 0;
}
.ai-chatbar-rec-context-link {
  color: var(--text, #0f172a);
  text-decoration: none;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(100%, 220px);
}
.ai-chatbar-rec-context-link:hover {
  text-decoration: underline;
  color: var(--accent, #6366f1);
}
.ai-chatbar-rec-context-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #6366f1);
  background: rgba(99, 102, 241, 0.12);
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
.ai-chatbar-rec-context-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}
.ai-chatbar-rec-context-remove:hover {
  color: var(--text, #0f172a);
  background: rgba(15, 23, 42, 0.06);
}

.ai-chatbar-mention-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
}
.ai-chatbar-mention-pills:empty {
  display: none;
}
.ai-chatbar-mention-pills:not(:empty) {
  padding-bottom: 6px;
}
.ai-chatbar-mention-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent, #3b82f6);
  font-size: 12px;
}
.ai-chatbar-mention-pill button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: transparent;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.ai-chatbar-mention-pill button:hover {
  color: var(--text, #0f172a);
}
.ai-chatbar-mention-pill-link {
  color: inherit;
  text-decoration: none;
}
.ai-chatbar-mention-pill-link:hover {
  text-decoration: underline;
}

/* Mention pills shown inside user message bubbles */
/* User message: attachment filenames (when file was uploaded) */
.ai-chatbar-msg-attachments {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
}
.ai-chatbar-msg-attachments-label {
  font-weight: 500;
}
.ai-chatbar-msg-attachments-names {
  word-break: break-all;
}

.ai-chatbar-msg-mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.ai-chatbar-mention-pill--in-msg {
  padding: 3px 8px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.ai-chatbar-mention-pill--in-msg:hover {
  background: rgba(255, 255, 255, 0.35);
}
.ai-chatbar-msg-mentions a.ai-chatbar-mention-pill--in-msg {
  color: inherit;
  text-decoration: none;
}
.ai-chatbar-msg-mentions a.ai-chatbar-mention-pill--in-msg:hover {
  text-decoration: underline;
}

/* Attachment pills (below mentions, above input) */
.ai-chatbar-attachment-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  min-height: 0;
}
.ai-chatbar-attachment-pills.hidden {
  display: none;
}
.ai-chatbar-attachment-pills:not(.hidden):not(:empty) {
  padding-bottom: 6px;
}
.ai-chatbar-attachment-pill,
.ai-chatbar-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent, #3b82f6);
  font-size: 12px;
}
.ai-chatbar-pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: transparent;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.ai-chatbar-pill-remove:hover {
  color: var(--text, #0f172a);
}

/* ── Budget & Purchase Plans ─────────────────── */

.budget-setup-method-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.budget-setup-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.budget-setup-card:hover {
  border-color: var(--accent);
  background: rgba(37, 99, 235, 0.02);
}

.budget-setup-card:has(input:checked) {
  border-color: var(--accent);
  background: rgba(37, 99, 235, 0.04);
}

.budget-setup-card input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.budget-setup-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.budget-setup-card-body strong {
  font-size: 14px;
}

.budget-setup-card-body .muted {
  font-size: 12px;
}

.budget-setup-card-body .pill {
  margin-top: 4px;
  width: fit-content;
}

.budget-setup-params {
  margin-bottom: 24px;
}

.budget-setup-period {
  margin-bottom: 24px;
}

.budget-setup-period h3 {
  margin-bottom: 8px;
}

.budget-setup-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.budget-setup-advanced {
  margin-bottom: 24px;
}

.budget-setup-advanced summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 13px;
  margin-bottom: 12px;
}

.budget-preview-section {
  margin-bottom: 24px;
}

.budget-preview-section h3 {
  margin-bottom: 8px;
}

.btn-group {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.btn-group-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  border-right: 1px solid var(--line);
  transition: background 0.15s ease;
}

.btn-group-item:last-child {
  border-right: none;
}

.btn-group-item:hover {
  background: var(--bg);
}

.btn-group-item:has(input:checked) {
  background: var(--accent);
  color: #fff;
}

.btn-group-item input[type="radio"] {
  display: none;
}

/* Budget fit bar */
.budget-fit-panel {
  padding: 16px;
}

.budget-fit-bar {
  display: flex;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
  margin-bottom: 8px;
}

.budget-fit-segment {
  transition: width 0.5s ease;
  position: relative;
}

.budget-fit-segment:hover {
  opacity: 0.85;
}

.budget-fit-prior { background: #94a3b8; }
.budget-fit-must { background: #ef4444; }
.budget-fit-should { background: #2563eb; }
.budget-fit-consol { background: #14b8a6; }
.budget-fit-remaining { background: #e2e8f0; }

.budget-fit-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}

.budget-fit-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.budget-fit-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.budget-fit-dot.budget-fit-prior { background: #94a3b8; }
.budget-fit-dot.budget-fit-must { background: #ef4444; }
.budget-fit-dot.budget-fit-should { background: #2563eb; }
.budget-fit-dot.budget-fit-consol { background: #14b8a6; }
.budget-fit-dot.budget-fit-remaining { background: #e2e8f0; }

/* Why this plan panel */
.budget-why-panel {
  border-left: 4px solid var(--accent);
}

.budget-why-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.budget-why-body li {
  padding: 6px 0;
  font-size: 14px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.budget-why-body li:last-child {
  border-bottom: none;
}

.budget-warning-text {
  color: var(--danger, #ef4444);
}

/* Vendor alerts */
.budget-vendor-alerts .budget-vendor-alert {
  padding: 8px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}

.budget-vendor-alerts .budget-vendor-alert:last-child {
  border-bottom: none;
}

/* Plan comparison bar */
.budget-comparison-bar {
  margin-bottom: 16px;
}
.budget-comparison-bar .btn-group-link {
  display: block;
  padding: 6px 14px;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
}
.budget-comparison-bar .btn-group-link.is-active {
  background: var(--accent);
  color: #fff;
}

/* Plan items table — scrollable container; allow dropdown to show above next section */
.plan-vendor-group {
  position: relative;
}
.plan-vendor-group[open] {
  z-index: 10;
}
.plan-vendor-group .dropdown-menu {
  z-index: 100;
}

.plan-vendor-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.plan-vendor-table-wrap .data-table {
  min-width: 800px;
}

/* Data table group header */
.data-table-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

/* Collapsible vendor groups */
.plan-vendor-group summary.data-table-group-header {
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.plan-vendor-group summary.data-table-group-header::-webkit-details-marker { display: none; }
.plan-vendor-group summary.data-table-group-header::marker { display: none; content: ""; }

.plan-vendor-toggle {
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.15s ease;
  display: inline-block;
}
.plan-vendor-group[open] .plan-vendor-toggle {
  transform: rotate(90deg);
}

/* Plan item reason column — allow wrapping */
.data-table td.plan-reason-col {
  white-space: normal;
  max-width: 280px;
  word-break: break-word;
}

/* Plan item info button (why this recommendation) */
.plan-item-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 5px 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  border-radius: 6px;
  vertical-align: middle;
  font-size: 0.875rem;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.plan-item-info-btn:hover {
  color: var(--accent);
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.plan-item-info-btn:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Plan item explanation modal */
/* Deferred section: hidden when no deferred items (JS can show and append) */
#deferred-items-section.is-empty {
  display: none;
}

.plan-item-explanation-content {
  width: min(520px, 92vw);
}
.plan-item-explanation-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 2px;
}
.plan-item-explanation-sku {
  font-size: 0.875rem;
  margin: 0;
}
.plan-item-explanation-section {
  margin-bottom: 20px;
}
.plan-item-explanation-section:last-child {
  margin-bottom: 0;
}
.plan-item-explanation-section h3 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin: 0 0 8px;
}
.plan-item-explanation-reason {
  margin: 8px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #475569;
}
.plan-item-explanation-dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 24px;
  margin: 0;
  font-size: 0.9rem;
}
.plan-item-explanation-dl dt {
  margin: 0;
  color: #64748b;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.plan-item-explanation-dl dd {
  margin: 0;
  text-align: right;
}

/* Action bar */
.budget-action-bar {
  position: sticky;
  bottom: 0;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

.budget-action-bar .actions {
  display: flex;
  gap: 8px;
}

/* Budget utilization labels */
.budget-util-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-top: 4px;
}

/* Utility colors */
.text-success { color: #16a34a; }
.text-warning { color: #d97706; }
.text-danger { color: #ef4444; }

/* Info pill variant */
.pill-info {
  background: #dbeafe;
  color: #1e40af;
}

/* Grid 5 column */
.grid.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

/* Grid 3 column */
.grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Form grid 2 col */
.form-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Dashboard budget widget */
.budget-widget {
  margin-top: 16px;
}

.budget-widget-prompt {
  padding: 12px 16px;
  border-left: 4px solid var(--accent);
  background: rgba(37, 99, 235, 0.03);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* PO budget badge */
.po-budget-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #dbeafe;
  color: #1e40af;
}


/* Simple mode (LLM-first policy) */
.policy-simple-mode {
  max-width: min(1440px, calc(100vw - 64px));
}
.policy-simple-hero,
.policy-simple-global-card,
.policy-simple-overrides-panel,
.policy-simple-editor {
  margin-bottom: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line, #e5e7eb);
  background: var(--panel, #fff);
  padding: 20px;
}
.policy-simple-hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto;
  gap: 20px 28px;
  align-items: start;
}
.policy-simple-hero__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #2563eb);
}
.policy-simple-hero__title {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.15;
}
.policy-simple-hero__copy {
  margin: 0;
  max-width: 720px;
  color: var(--muted, #6b7280);
  line-height: 1.6;
}
.policy-simple-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
  width: 100%;
}
.policy-simple-stat {
  padding: 14px 16px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  background: var(--soft, #f1f5f9);
}
.policy-simple-stat__value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink, #1f2933);
}
.policy-simple-stat__label {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.policy-simple-hero__actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.policy-simple-layout {
  display: block;
}
.policy-simple-main {
  min-width: 0;
  max-width: 1240px;
}
.policy-simple-presets-panel,
.policy-guided-workbench,
.policy-guided-trust-panel {
  margin-bottom: 24px;
}
.policy-simple-overview {
  margin-bottom: 24px;
}
.policy-simple-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  gap: 20px;
  margin-top: 12px;
}
.policy-simple-step__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #2563eb);
}
.policy-simple-presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.policy-preset-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 180px;
  padding: 18px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.policy-preset-card.is-active {
  border-color: #93c5fd;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}
.policy-preset-card__eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #2563eb);
}
.policy-preset-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.policy-simple-document-shell {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(280px, 1fr);
  gap: 20px;
  margin-top: 12px;
}
.policy-simple-document {
  min-width: 0;
}
.policy-simple-document__content {
  min-height: 320px;
  padding: 24px 28px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.policy-simple-summary-card {
  align-self: start;
  padding: 18px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  background: var(--soft, #f8fafc);
}
.policy-simple-summary-card__eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
}
.policy-simple-summary { margin-top: 8px; }
.policy-simple-summary p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
}
.policy-simple-summary p:last-child { margin-bottom: 0; }
.policy-simple-summary-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #e5e7eb);
  font-size: 13px;
  color: var(--muted, #6b7280);
}
.policy-simple-support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.policy-simple-link-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.policy-simple-link-card p {
  margin: 0;
}
.policy-simple-link-card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
}
.policy-simple-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.policy-simple-disclosure {
  margin-top: 18px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  background: #fbfdff;
}
.policy-simple-disclosure[open] {
  background: #fff;
}
.policy-simple-disclosure--spacious {
  margin-top: 0;
}
.policy-simple-disclosure__summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  font-weight: 600;
}
.policy-simple-disclosure__summary::-webkit-details-marker {
  display: none;
}
.policy-simple-disclosure__summary::after {
  content: "+";
  float: right;
  color: var(--muted, #6b7280);
}
.policy-simple-disclosure[open] .policy-simple-disclosure__summary::after {
  content: "-";
}
.policy-simple-disclosure__body {
  padding: 0 18px 18px;
}
.policy-simple-document__content--compact {
  min-height: 0;
  margin: 0 18px 18px;
  padding: 18px 20px;
}
.policy-guided-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.policy-guided-section {
  height: 100%;
}
.policy-guided-section__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #1f2933);
}
.policy-guided-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.policy-guided-fields--bridge {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.policy-guided-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1f2933);
}
.policy-guided-form__actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.policy-guided-section__empty {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--line, #e5e7eb);
  border-radius: 12px;
  background: var(--soft, #f8fafc);
}
.policy-guided-settings-bridge {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  background: #fbfdff;
}
.policy-guided-settings-bridge__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
}
.policy-guided-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.policy-guided-trust-card {
  padding: 16px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.policy-guided-trust-card__label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7280);
}
.policy-exception-form {
  margin: 8px 0 18px;
  padding: 18px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  background: #fbfdff;
}
.policy-exception-grid,
.policy-exception-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.policy-exception-fields {
  margin-top: 14px;
}
.policy-simple-overrides-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.policy-simple-empty {
  padding: 24px;
  border: 1px dashed var(--line, #e5e7eb);
  border-radius: 12px;
  background: var(--soft, #f1f5f9);
}
.policy-simple-empty h3 {
  margin: 0 0 8px;
  font-size: 16px;
}
.policy-simple-empty p {
  margin: 0;
}
.policy-simple-empty--document {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.policy-simple-editor {
  margin-top: 20px;
  padding: 24px;
  background: #f8fbff;
}
.policy-simple-editor__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent, #2563eb);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.policy-simple-editor__field {
  display: block;
  margin-top: 12px;
}
.policy-simple-rich-text {
  min-height: 360px;
  margin-top: 8px;
  border: 1px solid var(--line, #e5e7eb);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 18px 20px;
  background: #fff;
  font-size: 15px;
  line-height: 1.65;
}
.policy-simple-editor trix-toolbar {
  margin-top: 0;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 0 0 12px 12px;
  background: #fff;
  padding: 6px 8px 8px;
}
.policy-simple-editor trix-toolbar .trix-button-row {
  margin-bottom: 0;
}
.policy-simple-editor trix-toolbar .trix-button-group {
  border: none;
  box-shadow: none;
  background: transparent;
}
.policy-simple-editor trix-toolbar .trix-button {
  border: none;
  background: transparent;
}
.policy-simple-editor trix-toolbar .trix-button-group--file-tools {
  display: none;
}
.policy-simple-editor__tips {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--soft, #f1f5f9);
}
.policy-simple-editor__tips p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.policy-simple-input-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.policy-simple-proposed-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line, #e5e7eb);
}
.policy-simple-footnote {
  margin-top: 4px;
}

/* Override card */
.policy-override-card {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  padding: 18px;
  background: var(--panel, #fff);
  box-shadow: var(--shadow, 0 1px 2px rgba(15, 23, 42, 0.05));
}
.policy-override-card__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.policy-override-card__eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #6b7280);
}
.policy-override-card__summary { font-size: 14px; margin-bottom: 12px; }
.policy-override-card__summary p { margin: 0 0 6px; line-height: 1.6; color: var(--ink, #1f2933); }
.policy-override-card__summary p:last-child { margin-bottom: 0; }
.policy-override-card__meta { font-size: 12px; }
.policy-override-card__actions { display: flex; gap: 8px; }
.policy-override-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.policy-override-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--soft, #f1f5f9);
  color: var(--muted, #6b7280);
  font-size: 11px;
  font-weight: 600;
}

/* Proposed changes confirmation */
.policy-proposed-changes {
  padding: 14px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #f8fbff;
}
.policy-proposed-changes__title { font-size: 15px; margin: 0 0 8px; }
.policy-proposed-changes__preview { margin: 0 0 12px; font-size: 14px; }
.policy-proposed-changes__list {
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
}
.policy-proposed-changes__list li { margin-bottom: 4px; }
.policy-proposed-changes__actions { display: flex; gap: 8px; }

@media (max-width: 1080px) {
  .policy-simple-document-shell {
    grid-template-columns: 1fr;
  }

  .policy-simple-overview__grid,
  .policy-simple-support-grid {
    grid-template-columns: 1fr;
  }

  .policy-guided-section-grid,
  .policy-guided-fields,
  .policy-guided-fields--bridge,
  .policy-guided-trust-grid,
  .policy-exception-grid,
  .policy-exception-fields {
    grid-template-columns: 1fr;
  }

  .policy-simple-mode {
    max-width: calc(100vw - 32px);
  }
}

@media (max-width: 720px) {
  .policy-simple-mode {
    max-width: calc(100vw - 24px);
  }

  .policy-simple-hero {
    grid-template-columns: 1fr;
  }

  .policy-simple-hero__stats {
    grid-template-columns: 1fr;
  }

  .policy-simple-overrides-list {
    grid-template-columns: 1fr;
  }

  .policy-simple-link-row {
    flex-direction: column;
    gap: 8px;
  }

  .policy-simple-document__content,
  .policy-simple-empty--document,
  .policy-simple-rich-text {
    min-height: 240px;
  }
}

/* ── Policy show (simplified) ──────────────────────────── */
.policy-show { max-width: none; }
.policy-show__preset-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: var(--accent-weak, #e0e7ff);
  color: var(--accent, #2563eb);
}
.policy-show__preset-badge--custom {
  background: var(--soft, #f1f5f9);
  color: var(--muted, #6b7280);
}
/* ── Policy hero / intro card ── */
.policy-hero {
  background: linear-gradient(135deg, #f0f5ff 0%, #f8fafc 50%, #ecfdf5 100%);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.policy-hero__visual {
  flex-shrink: 0;
}
.policy-hero__icon-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  color: #2563eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.policy-hero__text {
  flex: 1;
  min-width: 0;
}
.policy-hero__tagline {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink, #1f2933);
  margin: 0 0 6px;
  line-height: 1.35;
}
.policy-hero__text p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-light, #475569);
  margin: 0;
}
.policy-hero__text p:last-child {
  margin-bottom: 0;
}
.policy-hero__text strong {
  color: var(--ink, #1f2933);
}
@media (max-width: 720px) {
  .policy-hero {
    flex-direction: column;
    text-align: center;
    padding: 20px;
    gap: 16px;
  }
}

.policy-show__sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.policy-show__card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 20px;
  position: relative;
  transition: box-shadow 0.15s ease;
}
.policy-show__card--editing {
  box-shadow: 0 0 0 2px var(--accent, #2563eb);
}
.policy-show__card h3 { margin: 0 0 4px; font-size: 15px; }
.policy-show__card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
}
.policy-show__edit-btn {
  flex-shrink: 0;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--muted, #6b7280);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.policy-show__card:hover .policy-show__edit-btn { opacity: 1; }
.policy-show__edit-btn:hover { color: var(--accent, #2563eb); }
.policy-show__card-fields { display: grid; gap: 10px; }
.policy-show__field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  gap: 12px;
}
.policy-show__field--editing {
  flex-direction: column;
  gap: 4px;
}
.policy-show__field-label { color: var(--muted); }
.policy-show__field-value { font-weight: 600; text-align: right; }
.policy-show__field-input { width: 100%; }
.policy-show__field-input .input--sm {
  height: 32px;
  padding: 4px 8px;
  font-size: 13px;
}
.policy-show__field-hint { display: block; font-size: 11px; margin-top: 2px; }
.policy-show__inline-form { display: contents; }
.policy-show__inline-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e5e7eb);
}

.policy-show__exceptions {
  margin-top: 24px;
}
.policy-show__exceptions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.policy-show__exceptions-header h3 { margin: 0 0 2px; }
.policy-show__exceptions-header p { margin: 0; }
/* Rules card scope bar — same pattern as PO line items “Review” scopes */
.policy-show__exceptions .policy-show__rules-scope-bar.panel-index-scopes {
  margin: 0 -16px 14px -16px;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
.policy-show__exceptions .panel-index-scopes button.scope-pill {
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-align: left;
}
.policy-exception-row.policy-exception-row--filtered-out {
  display: none !important;
}
.policy-show__rules-filter-empty {
  margin: 0 0 12px;
  font-size: 13px;
}
.policy-show__exceptions-list { display: grid; gap: 10px; }
.policy-show__exceptions-empty {
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}
.policy-exception-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-size: 13px;
}
.policy-exception-row__type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  display: block;
  margin-bottom: 2px;
}
.policy-exception-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.policy-exception-row__tag {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--soft);
  font-size: 12px;
  color: var(--muted);
}
.policy-show__links {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Exception modal */
.policy-exception-modal .modal-content { max-width: 780px; width: 90vw; }
.policy-exception-modal__scope { display: grid; gap: 14px; margin-bottom: 18px; }
.policy-exception-modal__fields { margin-bottom: 18px; }
.policy-exception-modal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
  margin-top: 10px;
}
.policy-exception-modal__actions { display: flex; gap: 8px; }

/* ── Rule modal (unified Add/Edit rule) ─────────────── */
dialog.modal.rule-modal { overflow: visible; }
.rule-modal .modal-content {
  max-width: 920px;
  width: 94vw;
  max-height: 92vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.rule-modal .modal-header {
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  margin-bottom: 0;
}
.rule-modal .modal-header h2 {
  font-size: 16px;
  margin: 0;
}
.rule-modal__form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.rule-modal__scrollable {
  flex: 1;
  overflow-y: auto;
  overflow-x: visible;
  padding: 0 20px;
}
.rule-modal__section {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.rule-modal__section:last-child { border-bottom: none; }
.rule-modal__section--scope { padding-top: 16px; padding-bottom: 12px; }
.rule-modal__section--conditions { padding-bottom: 16px; }
.rule-modal__section-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 8px;
}
.rule-modal__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Scope pills */
.rule-modal__scope-pills {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
}
.rule-modal__scope-pill {
  padding: 6px 14px;
  border: none;
  background: var(--panel);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all 120ms ease;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.rule-modal__scope-pill:last-child { border-right: none; }
.rule-modal__scope-pill:hover { background: var(--soft); color: var(--ink); }
.rule-modal__scope-pill.is-active {
  background: var(--accent, #2563eb);
  color: #fff;
  font-weight: 600;
}
.rule-modal__scope-pill:disabled:not(.is-active) {
  opacity: 0.4;
  cursor: default;
}
.rule-modal__scope-pill.is-restricted {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
}
.rule-modal__scope-warning {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #92400e;
  background: #fef3c7;
  border-radius: 6px;
  border: 1px solid #fde68a;
}
.rule-modal__scope-identifier { margin-top: 10px; }
.rule-modal__scope-identifier .form-field { max-width: 340px; }

/* Picker dropdown — two-panel drill-down, position:fixed to escape overflow clipping */
.rule-modal__picker-wrap { position: relative; }
.rule-modal__picker-dropdown {
  position: fixed;
  z-index: 99999;
  width: 360px;
  max-height: 460px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.18);
  padding: 0;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
}
.rule-modal__picker-dropdown.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ── Picker panel (shared) ── */
.picker-panel { padding: 6px; }
.picker-panel__header {
  position: sticky;
  top: 0;
  background: var(--panel, #fff);
  z-index: 1;
  padding: 4px 4px 6px;
}
.picker-panel__search {
  width: 100%;
  font-size: 13px;
}
.picker-panel__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.picker-panel__empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--muted, #6b7280);
  font-size: 13px;
}

/* ── Category list ── */
.picker-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 8px;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 80ms ease;
}
.picker-cat:hover { background: var(--soft, #f8fafc); }
.picker-cat--dimmed { opacity: 0.4; pointer-events: none; }
.picker-cat__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.picker-cat__icon--sm { width: 24px; height: 24px; border-radius: 6px; }
.picker-cat__icon--sm svg { width: 14px; height: 14px; }
.picker-cat__text { flex: 1; min-width: 0; }
.picker-cat__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1f2933);
  line-height: 1.3;
}
.picker-cat__desc {
  display: block;
  font-size: 11px;
  color: var(--muted, #6b7280);
  line-height: 1.3;
  margin-top: 1px;
}
.picker-cat__count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #6b7280);
  background: var(--soft, #f1f5f9);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.picker-cat__chevron {
  flex-shrink: 0;
  color: var(--muted, #94a3b8);
}

/* ── Back button ── */
.picker-panel__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent, #2563eb);
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 6px;
  transition: background 80ms ease;
}
.picker-panel__back:hover { background: var(--soft, #f1f5f9); }

/* ── Category title bar in items view ── */
.picker-panel__cat-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #1f2933);
  padding: 4px 10px 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Item row ── */
.picker-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 80ms ease;
}
.picker-item:hover:not(:disabled) { background: var(--soft, #f8fafc); }
.picker-item__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #1f2933);
  display: flex;
  align-items: center;
  gap: 6px;
}
.picker-item__hint {
  font-size: 11px;
  color: var(--muted, #6b7280);
  line-height: 1.35;
}
.picker-item__cat-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.picker-item--added {
  opacity: 0.4;
  cursor: default;
}
.picker-item--added .picker-item__label { text-decoration: line-through; }
.picker-item--restricted {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Added rules list — compact horizontal layout */
.rule-modal__added-rules {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rule-modal__empty-state {
  text-align: center;
  padding: 20px 10px;
}
.rule-modal__empty-state p { margin: 8px 0 0; font-size: 13px; }
.rule-modal__added-rule {
  padding: 8px 12px;
  background: var(--soft);
  border-radius: 8px;
  border: 1px solid var(--line);
  animation: ruleSlideIn 180ms ease;
}
@keyframes ruleSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rule-modal__rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rule-modal__rule-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.rule-modal__rule-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.rule-modal__rule-controls .input--sm { width: 140px; }
.rule-modal__category-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.rule-modal__rule-label {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rule-modal__rule-default {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.rule-modal__rule-remove {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  padding: 2px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 80ms ease;
}
.rule-modal__rule-remove:hover { color: var(--error, #ef4444); }
.rule-modal__sub-field {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.rule-modal__sub-field .input--sm { max-width: 220px; margin-top: 2px; }

/* Conditions */
.rule-modal__conditions-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 120ms ease;
}
.rule-modal__conditions-toggle:hover { color: var(--ink); }
.rule-modal__conditions-toggle svg { transition: transform 150ms ease; }
.rule-modal__conditions { margin-top: 10px; }
.rule-modal__conditions .condition-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  animation: ruleSlideIn 150ms ease;
}
.rule-modal__conditions-op-wrap { font-size: 13px; color: var(--muted); }

/* Sticky footer */
.rule-modal__validation-error {
  padding: 8px 20px;
  font-size: 13px;
  line-height: 1.4;
  color: #991b1b;
  background: #fef2f2;
  border-top: 1px solid #fecaca;
  flex-shrink: 0;
}
.rule-modal__footer {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.tag--conditions {
  background: #ede9fe;
  color: #6d28d9;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}

/* Policy rules list — conditional badge is the tooltip trigger */
.policy-rules-cond-tooltip {
  margin-left: 0;
}
.policy-rules-cond-tooltip .tag.tag--conditions.help-tooltip-trigger {
  appearance: none;
  border: none;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  cursor: help;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  white-space: nowrap;
}
.policy-rules-cond-tooltip .help-tooltip-trigger:hover,
.policy-rules-cond-tooltip .help-tooltip-trigger:focus {
  color: #6d28d9;
  outline: none;
  filter: brightness(0.97);
}

/* ── Strategy wizard ──────────────────────────────────── */
.wizard-shell { max-width: 720px; margin: 0 auto; }
.wizard-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
  overflow-x: auto;
}
.wizard-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 72px;
  flex-shrink: 0;
}
.wizard-progress__dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--line);
  color: var(--muted);
  background: var(--panel);
}
.wizard-progress__step--active .wizard-progress__dot {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.wizard-progress__step--completed .wizard-progress__dot {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
}
.wizard-progress__label {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}
.wizard-progress__step--active .wizard-progress__label {
  color: var(--ink);
  font-weight: 600;
}
.wizard-progress__line {
  flex: 1;
  height: 2px;
  background: var(--line);
  min-width: 20px;
  margin-top: -18px;
}
.wizard-progress__line--done { background: var(--accent-weak); }

.wizard-card {
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
}
.wizard-card h2 { margin: 0 0 8px; font-size: 22px; }
.wizard-card__step-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0 0 8px;
}
.wizard-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.wizard-preset-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.wizard-preset-card.is-active {
  border-color: #93c5fd;
  box-shadow: 0 0 0 1px rgba(37,99,235,0.12);
}
.wizard-preset-card h3 { margin: 0 0 6px; font-size: 17px; }
.wizard-preset-card--custom {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.wizard-preset-card--custom div { flex: 1; }
.wizard-preset-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--accent-weak);
  color: var(--accent);
}
.wizard-fields { display: grid; gap: 20px; margin: 20px 0 0; }
.wizard-field { }
.wizard-field__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.wizard-field__hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.wizard-notice {
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--soft);
  margin-bottom: 16px;
}
.wizard-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
}

@media (max-width: 720px) {
  .policy-show__sections { grid-template-columns: 1fr; }
  .policy-exception-row { grid-template-columns: 1fr; }
  .policy-exception-modal__grid { grid-template-columns: 1fr; }
  .rule-modal__scope-pills { flex-wrap: wrap; }
  .rule-modal__picker-dropdown { width: 300px; }
  .rule-modal__rule-row { flex-direction: column; align-items: stretch; }
  .rule-modal__rule-controls { justify-content: flex-end; }
  .rule-modal__conditions .condition-row { grid-template-columns: 1fr; }
  .wizard-presets { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE RESPONSIVE — max-width: 768px
   All rules below are additive and only apply on mobile.
   Desktop layout is untouched.
   ============================================================ */

/* ── Mobile hamburger button in global header ──────────────── */
.header-mobile-menu-btn {
  display: none;
}

.mobile-primary-nav {
  display: none;
}

@media (max-width: 768px) {
  /* Zero out the shell gutter so there's no dark body padding visible on mobile */
  body.pp-body {
    --shell-gutter: 0px;
    padding: 0;
    background: #f6f7f9;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  /* Clip any sidebar overflow so it can't bleed into view */
  .super-shell {
    overflow-x: hidden;
  }

  /* Sidebar: fully hidden off-screen by default on mobile */
  .sidebar {
    visibility: hidden;
  }

  /* Header: show hamburger, compress search */
  .header-mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: rgba(248, 250, 252, 0.1);
    border: none;
    border-radius: 8px;
    color: #f8fafc;
    cursor: pointer;
    padding: 0;
    margin-right: 4px;
  }
  .header-mobile-menu-btn svg {
    width: 20px;
    height: 20px;
  }
  .header-mobile-menu-btn:hover {
    background: rgba(248, 250, 252, 0.2);
  }

  .mobile-primary-nav {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line, #e2e8f0);
    background: #fff;
  }

  .mobile-primary-nav-dropdown {
    display: block;
  }

  .mobile-primary-nav-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    background: #f8fafc;
    color: var(--text, #0f172a);
    cursor: pointer;
    user-select: none;
  }

  .mobile-primary-nav-summary::-webkit-details-marker {
    display: none;
  }

  .mobile-primary-nav-title {
    display: block;
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
  }

  .mobile-primary-nav-current {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #0f172a);
  }

  .mobile-primary-nav-chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--text-muted, #64748b);
    transition: transform 0.18s ease;
  }

  .mobile-primary-nav-dropdown[open] .mobile-primary-nav-chevron {
    transform: rotate(180deg);
  }

  .mobile-primary-nav-list {
    display: grid;
    gap: 4px;
    margin-top: 8px;
  }

  .mobile-primary-nav-form {
    margin: 0;
  }

  .mobile-primary-nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text, #0f172a);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .mobile-primary-nav-item:hover {
    background: #f1f5f9;
  }

  .mobile-primary-nav-item.is-active {
    background: #e0e7ff;
    color: #1e3a8a;
  }

  .mobile-primary-nav-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
  }

  .mobile-primary-nav-icon svg {
    width: 18px;
    height: 18px;
  }

  .mobile-primary-nav-label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-primary-nav-badge {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #ede9fe;
    color: #5b21b6;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
  }

  /* Collapse search to a 36px icon-only button on mobile */
  .header-search {
    min-width: 0;
    max-width: none;
    width: 36px;
    height: 36px;
    padding: 0;
    flex: 0 0 auto;
    cursor: pointer;
    justify-content: center;
  }

  .header-search input,
  .header-search-shortcut {
    display: none;
  }

  .header-search-icon {
    width: 36px;
    height: 36px;
    cursor: pointer;
  }

  /* Expanded state: stretches full-width, hides hamburger/brand/actions */
  .header-search.is-mobile-expanded {
    flex: 1;
    width: auto;
    height: auto;
    padding: 6px 10px;
  }

  .header-search.is-mobile-expanded .header-search-icon {
    width: 16px;
    height: 16px;
    cursor: default;
  }

  .header-search.is-mobile-expanded input {
    display: block;
  }

  .header-search.is-mobile-expanded .header-search-back {
    display: flex;
    margin-left: auto;
  }

  .header-bar.has-search-expanded .header-mobile-menu-btn,
  .header-bar.has-search-expanded .header-brand,
  .header-bar.has-search-expanded .header-actions {
    display: none;
  }

  /* Floor-mode toggle: fixed pill below the header bar */
  .mobile-floor-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    top: 52px;
    right: 12px;
    z-index: 34;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    background: #4f46e5;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
    transition: background 0.15s, box-shadow 0.15s;
  }

  .mobile-floor-toggle:hover,
  .mobile-floor-toggle:active {
    background: #4338ca;
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.5);
  }

  .mobile-floor-toggle svg {
    flex-shrink: 0;
  }

  /* Hide the toggle when search is expanded */
  .header-bar.has-search-expanded ~ .mobile-floor-toggle {
    display: none;
  }

  /* Hide keyboard shortcut hints */
  .header-ai-chat-btn {
    display: none;
  }

  /* Shrink account switcher text to save space */
  .account-switcher-pill {
    font-size: 11px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── App rail: hide on mobile (navigation lives in sidebar drawer) ── */
  .app-rail {
    display: none;
  }

  /* ── App shell: full width, no left offset ── */
  .app-shell {
    padding-left: 0 !important;
  }

  /* Header: full width (no shell-gutter offset) */
  .header-bar {
    left: 0;
    right: 0;
  }

  /* ── Sidebar: mobile drawer ── */
  .sidebar {
    left: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    top: 0;
    height: 100vh;
    padding: 0;
    gap: 0;
    overflow-y: auto;
    border-radius: 0;
  }
  .sidebar > .sidebar-content {
    padding: 18px 16px;
  }

  /* Sidebar open state */
  .app-shell.is-mobile-open .sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  /* Sidebar backdrop overlay */
  .sidebar-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 199;
    cursor: pointer;
  }
  .app-shell.is-mobile-open .sidebar-mobile-backdrop {
    display: block;
  }

  .builder-page-shell.is-mobile-open .sidebar-mobile-backdrop,
  .settings-page-shell.is-mobile-open .sidebar-mobile-backdrop,
  .inbox-page-shell.is-mobile-open .sidebar-mobile-backdrop {
    display: block;
  }

  .builder-page-shell .builder-sidebar,
  .settings-page-shell .settings-sidebar,
  .inbox-page-shell .inbox-shell > .inbox-filter-sidebar {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 86vw);
    height: 100vh;
    max-height: none;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    border-radius: 0;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: 12px 0 32px -12px rgba(15, 23, 42, 0.28);
  }

  .builder-page-shell.is-mobile-open .builder-sidebar,
  .settings-page-shell.is-mobile-open .settings-sidebar,
  .inbox-page-shell.is-mobile-open .inbox-shell > .inbox-filter-sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  /* Ensure the sidebar corner decoration doesn't show */
  .sidebar-corner {
    display: none;
  }
  .sidebar-hover-zone {
    display: none !important;
  }

  /* The desktop sidebar toggle is irrelevant on mobile (the rail is
     hidden and the header hamburger owns sidebar visibility). */
  .app-sidebar-toggle {
    display: none !important;
  }

  /* Desktop collapsed state overrides: always show sidebar normally on mobile when open */
  .app-shell.is-collapsed .sidebar {
    transform: translateX(-100%);
    visibility: hidden;
  }
  .app-shell.is-collapsed.is-mobile-open .sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  .app-shell.is-collapsed {
    padding-left: 0 !important;
  }
  .app-shell.is-collapsed .main {
    margin-left: 0;
  }

  /* ── Main content area ── */
  .main {
    min-width: 0;
    margin-left: 0 !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-radius: 0;
    min-height: 100vh;
  }

  /* ── Topbar: allow wrapping of toolbar-row on very narrow screens ── */
  .topbar {
    height: auto;
    min-height: 52px;
  }
  .toolbar-row {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ── AI chatbar: full-screen overlay on mobile, don't push content ── */
  body:has(.ai-chatbar-panel--open) .app-shell,
  body:has(.ai-chatbar-panel--expanded) .app-shell {
    margin-right: 0 !important;
  }
  body:has(.ai-chatbar-panel--open) .header-bar,
  body:has(.ai-chatbar-panel--expanded) .header-bar {
    right: 0 !important;
  }
  .ai-chatbar-panel {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
  }
}

/* ============================================================
   MOBILE RESPONSIVE — Phase 3: Data Tables
   ============================================================ */

@media (max-width: 768px) {
  /* Safety net: ensure all table containers scroll horizontally */
  .table-wrap,
  .table-panel,
  .data-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Slightly tighter table cells on small screens */
  .data-table th,
  .data-table td {
    padding: 10px 10px;
    font-size: 13px;
  }

  .data-table-compact th,
  .data-table-compact td {
    padding: 7px 8px;
    font-size: 12px;
  }

  /* Content pages with page padding: reduce it */
  .content {
    padding: 12px;
  }
  .topbar + .content {
    padding-top: 12px;
  }

  /* Reduce panel padding on mobile */
  .panel {
    border-radius: 10px;
  }
  .panel-header {
    padding: 12px 14px;
  }
}

/* ============================================================
   MOBILE RESPONSIVE — Phase 4: Grids, Dashboard, Topbar
   ============================================================ */

@media (max-width: 768px) {
  /* Grid: go single column on phones (< 768px) */
  .grid.grid-5,
  .grid-5,
  .grid-4,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  /* Dashboard: single column */
  .page-with-feed {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .page-activity-feed {
    position: static;
  }

  /* Topbar: reduce padding */
  .topbar {
    padding: 10px 12px;
  }
  .topbar-title {
    min-width: 0;
  }
  .topbar-title h1 {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Toolbar row: let items wrap */
  .toolbar-row {
    gap: 8px;
  }

  /* Topbar actions: wrap and smaller gap */
  .topbar-actions {
    gap: 8px;
    flex-wrap: wrap;
  }
  .topbar-controls {
    gap: 8px;
    flex-wrap: wrap;
  }

  /* Detail layout: single column on mobile */
  .detail-layout {
    grid-template-columns: 1fr;
    padding: 0 12px 24px;
    gap: 12px;
  }
  .detail-sidebar {
    position: static;
  }

  /* KPI rows and metric cards */
  .repl-kpi-row,
  .po-tab-kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   MOBILE RESPONSIVE — Phase 5: Additional touch-ups
   ============================================================ */

@media (max-width: 768px) {
  /* Modals: full-width on mobile */
  .modal-panel {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0;
    margin: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .modal-overlay {
    align-items: flex-end;
  }

  /* Auth card: tighter padding */
  .auth-card {
    padding: 28px 20px;
    margin: 12px;
    border-radius: 16px;
  }

  /* Onboarding: single column steps */
  .ob-vendor-source-cards {
    grid-template-columns: 1fr;
  }

  /* Forecasting: reduce padding on filter bar */
  .forecasting-filters {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Settings nav: smaller */
  .settings-nav {
    gap: 4px;
  }

  /* Report builder: reduce padding */
  .report-chart-wrap {
    min-height: 200px;
  }

  /* Workflow run detail: already has @media at 800px, but also shrink cards */
  .wf-run-detail-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Entity show overview grid: single column */
  .entity-show__overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .header-bar {
    justify-content: flex-start;
    gap: 8px;
    padding: 0 10px;
  }

  .header-actions {
    margin-left: auto;
  }

  .header-brand,
  .header-actions {
    min-width: 0;
  }

  .header-actions {
    gap: 6px;
    flex-shrink: 1;
  }

  /* Chips: icon-only on tablets and phones — hide text label and caret */
  .location-chip-label,
  .location-chip-caret,
  .station-chip-label,
  .station-chip-caret {
    display: none;
  }

  .location-chip-pill,
  .station-chip-pill {
    padding: 5px 7px;
    gap: 0;
  }

  .impersonation-banner {
    max-width: 180px;
    min-width: 0;
    padding: 4px 8px;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .impersonation-banner form,
  .impersonation-stop-btn {
    flex-shrink: 0;
  }

  .toolbar-row {
    align-items: flex-start;
  }

  .topbar-left,
  .topbar-controls,
  .topbar-actions {
    width: 100%;
  }

  .topbar-left {
    flex-wrap: wrap;
  }

  .topbar-controls {
    flex: 1 1 100%;
  }

  .topbar-actions {
    justify-content: flex-start;
  }

  .topbar-actions > * {
    flex-shrink: 0;
  }

  .utility-bar {
    align-items: flex-start;
    padding: 10px 12px 8px;
    margin: 0 -12px -12px;
  }

  .utility-bar .filters-inline {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }

  .utility-label,
  .filter-builder-list {
    width: 100%;
  }

  .facet-bar-inline {
    width: 100%;
    gap: 8px;
  }

  .facet-bar-inline::after {
    display: none;
  }

  .repl-stat-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    padding: 12px;
    margin: -12px -12px 16px;
  }

  .repl-stat-item {
    min-width: 0;
    padding-right: 0;
    margin-right: 0;
    border-right: none;
  }

  .repl-stat-label {
    white-space: normal;
  }

  .repl-stat-meta {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0;
  }

  .repl-view-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .repl-view-tab {
    flex: 0 0 auto;
    padding: 10px 12px;
  }

  .repl-vendor-name {
    flex-wrap: wrap;
  }

  .pagination {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .per-page-form,
  .per-page-label {
    justify-content: center;
  }

  .pagination .muted,
  .pagination-page {
    text-align: center;
  }

  .pagination-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 520px) {
  /* Hide lower-priority header actions — accessible via their own pages */
  .pj-popover-wrap,
  .quick-create {
    display: none;
  }

  .account-switcher-pill {
    max-width: 64px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .impersonation-banner {
    max-width: 140px;
    font-size: 11px;
  }

  .topbar-actions {
    gap: 6px;
  }

  .topbar-actions .favorite-toggle {
    display: none;
  }

  .repl-stat-value {
    font-size: 18px;
  }

  .pagination-actions .btn {
    flex: 1 1 0;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .toolbar-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    overflow: visible;
  }

  .topbar-left,
  .topbar-actions,
  .topbar-right {
    width: auto;
  }

  .topbar-left {
    flex: 1 1 0;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    gap: 10px;
  }

  .topbar-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  .topbar-title h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-actions,
  .topbar-right {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
  }

  .topbar-controls {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
  }

  .filters-inline-main {
    flex: 0 0 auto;
    width: auto;
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .page-header .actions,
  .panel-header .actions,
  .panel-header-actions,
  .filter-row {
    width: 100%;
  }

  .settings-layout {
    flex-direction: column;
    gap: 16px;
  }

  .settings-nav {
    width: 100%;
    position: static;
  }

  .row-actions,
  .ship-row .row-actions {
    flex-wrap: wrap;
    white-space: normal;
  }

  .filters-inline-main .search {
    position: relative;
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    flex: 0 0 32px;
    gap: 0;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
    border-color: var(--line);
    border-radius: 8px;
    transition: width 0.16s ease, max-width 0.16s ease, padding 0.16s ease;
  }

  .mobile-search-trigger {
    width: 32px;
    height: 32px;
    pointer-events: auto;
    cursor: pointer;
  }

  .mobile-search-trigger .search-icon-svg {
    pointer-events: none;
  }

  .filters-inline-main .search input {
    width: 0;
    min-width: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
  }

  .filters-inline-main .search.is-mobile-open,
  .filters-inline-main .search:focus-within {
    width: min(220px, 46vw);
    max-width: min(220px, 46vw);
    height: 32px;
    gap: 10px;
    justify-content: flex-start;
    padding: 8px 12px;
  }

  .filters-inline-main .search.is-mobile-open input,
  .filters-inline-main .search:focus-within input {
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    cursor: text;
  }

  .utility-bar {
    overflow: visible;
  }

  .utility-bar .filter-builder {
    width: 100%;
    min-width: 0;
  }

  .utility-bar .filters-inline {
    width: 100%;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .utility-label,
  .facet-bar-inline,
  .filter-builder-list,
  .filter-builder-row,
  .filter-builder-group,
  .filter-field-picker,
  .filter-field-picker > summary,
  .filters-inline > .btn {
    flex: 0 0 auto;
  }

  .utility-label,
  .filter-builder-list {
    width: auto;
  }

  .facet-bar-inline,
  .filter-builder-list {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  .repl-stat-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
    margin: -12px -12px 16px;
  }

  .repl-stat-item {
    flex: 0 0 auto;
    min-width: 132px;
    padding-right: 16px;
    margin-right: 16px;
    border-right: 1px solid var(--line, #e5e7eb);
  }

  .repl-stat-label {
    white-space: nowrap;
  }

  .repl-stat-meta {
    flex: 0 0 auto;
    width: auto;
    margin-left: 0;
    padding-left: 4px;
    align-self: center;
  }

  .column-controls-label {
    display: none;
  }

  .column-controls > summary {
    min-width: 32px;
    width: 32px;
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
  }

  .column-controls .btn-icon-box {
    width: 14px;
    margin-right: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   Invoice File Upload — multi-format upload hints
   ═══════════════════════════════════════════════════════════ */

.invoice-upload-hints {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 16px;
}

.invoice-upload-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.invoice-upload-hint svg {
  flex-shrink: 0;
  color: var(--muted);
}

.invoice-upload-file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
}

.invoice-upload-file-name {
  font-weight: 500;
  color: var(--ink);
}

.invoice-upload-file-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #e0e7ff;
  color: #3730a3;
}

.invoice-upload-file-badge.is-pdf { background: #fee2e2; color: #991b1b; }
.invoice-upload-file-badge.is-image { background: #dcfce7; color: #166534; }
.invoice-upload-file-badge.is-csv { background: #dbeafe; color: #1e40af; }

/* ═══════════════════════════════════════════════════════════
   Invoice Extraction — processing / success / error states
   ═══════════════════════════════════════════════════════════ */

.invoice-extraction-spinner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
}

.invoice-extraction-spinner-ring {
  width: 40px;
  height: 40px;
  border: 3px solid var(--line);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: invoice-spin 0.9s linear infinite;
  flex-shrink: 0;
}

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

.invoice-extraction-spinner-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

.invoice-extraction-success {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 0;
  font-size: 14px;
}

.invoice-extraction-success div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.invoice-extraction-error {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 0;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   Inbox: Import as Invoice — file summary card
   ═══════════════════════════════════════════════════════════ */

.invoice-import-file-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
}

.invoice-import-file-icon {
  width: 44px;
  height: 44px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════
   Validation — partial import warning + btn-warning
   ═══════════════════════════════════════════════════════════ */

.validate-import-partial-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: #fef9c3;
  border: 1px solid #facc15;
  border-radius: 8px;
  font-size: 13px;
  color: #713f12;
  margin-bottom: 12px;
  width: 100%;
}

.validate-import-partial-warning svg {
  flex-shrink: 0;
  color: #a16207;
  margin-top: 1px;
}

.btn-warning {
  background: #f59e0b;
  color: #fff;
  border-color: #d97706;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.18);
}

.btn-warning:hover {
  background: #d97706;
  border-color: #b45309;
  color: #fff;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.25);
}

.btn-warning:active {
  background: #b45309;
  border-color: #92400e;
  box-shadow: none;
}

/* Invoicing status tooltip — badge is the trigger, undo help-tooltip-trigger resets */
.inv-status-tooltip { margin-left: 0; }
.inv-status-tooltip .status-badge.help-tooltip-trigger {
  appearance: none;
  border: none;
  cursor: default;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}
.inv-status-tooltip .status-badge--disputed.help-tooltip-trigger { background: #fee2e2; color: #991b1b; }
.inv-status-tooltip .status-badge--accepted.help-tooltip-trigger { background: #dcfce7; color: #166534; }
.inv-status-tooltip .status-badge--pending.help-tooltip-trigger  { background: #fef3c7; color: #92400e; }
.inv-status-tooltip .help-tooltip-trigger:hover,
.inv-status-tooltip .help-tooltip-trigger:focus { color: inherit; }

/* Row-level qty over-invoiced warning */
.row--qty-warning {
  background: #fef9c310;
}
.row--qty-warning td {
  border-bottom-color: #facc1540;
}

/* ═══════════════════════════════════════════════════════════════
   Variant Similarity — modal tab, index badge, settings
   ═══════════════════════════════════════════════════════════════ */

/* ── Tab count badge ── */
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 5px;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-surface-muted, #e5e7eb);
  color: var(--color-text-secondary, #6b7280);
  border-radius: 9px;
  vertical-align: middle;
}
.tab-button.is-active .tab-count {
  background: var(--color-primary-pale, #dbeafe);
  color: var(--color-primary, #2563eb);
}

/* ── Similar variants list (modal) ── */
.similar-variants-header {
  margin-bottom: 12px;
}
.similar-variants-subtitle {
  font-size: 13px;
}
.similar-variants-empty {
  padding: 32px 0;
  text-align: center;
}
.similar-variants-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.similar-variant-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  transition: border-color 0.15s;
}
.similar-variant-card:hover {
  border-color: var(--color-border-hover, #d1d5db);
}
.similar-variant-card__image {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
}
.similar-variant-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
}
.product-thumb__avatar--sm {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.similar-variant-card__body {
  flex: 1;
  min-width: 0;
}
.similar-variant-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.similar-variant-card__name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.similar-variant-card__product {
  font-weight: 600;
}

/* ── Match score badge ── */
.similar-match-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  white-space: nowrap;
}
.similar-match-badge--high   { background: #dcfce7; color: #15803d; }
.similar-match-badge--medium { background: #fef9c3; color: #92400e; }
.similar-match-badge--low    { background: #f3f4f6; color: #6b7280; }

/* ── Metrics row ── */
.similar-variant-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.similar-metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
}
.similar-metric__label {
  color: var(--color-text-tertiary, #9ca3af);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.similar-metric__value {
  font-weight: 600;
  font-size: 13px;
}

/* ── ABC badge inside similar variants ── */
.abc-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.abc-badge--a { background: #dcfce7; color: #15803d; }
.abc-badge--b { background: #fef9c3; color: #92400e; }
.abc-badge--c { background: #f3f4f6; color: #6b7280; }

/* ── Why similar? expandable ── */
.similar-why-details {
  font-size: 12px;
  margin-top: 2px;
}
.similar-why-summary {
  cursor: pointer;
  color: var(--color-primary, #2563eb);
  font-size: 12px;
  user-select: none;
  list-style: none;
}
.similar-why-summary::-webkit-details-marker { display: none; }
.similar-why-summary::before { content: "▸ "; font-size: 10px; }
details[open] .similar-why-summary::before { content: "▾ "; }
.similar-why-body {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: var(--color-surface-muted, #f9fafb);
  border-radius: 6px;
}
.similar-factor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.similar-factor-label {
  width: 110px;
  flex-shrink: 0;
  color: var(--color-text-secondary, #6b7280);
  font-size: 11px;
}
.similar-factor-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--color-border, #e5e7eb);
  border-radius: 3px;
  overflow: hidden;
}
.similar-factor-bar {
  height: 100%;
  background: var(--color-primary, #2563eb);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.similar-factor-pct {
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Action column ── */
.similar-variant-card__action {
  flex-shrink: 0;
  align-self: center;
}

/* ── Similar variants callout (overview tab) ── */
.similar-callout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-info-bg, #eff6ff);
  border: 1px solid var(--color-info-border, #bfdbfe);
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
}
.similar-callout__icon {
  flex-shrink: 0;
  color: var(--color-primary, #2563eb);
}
.similar-callout__text {
  flex: 1;
}
.similar-callout__link {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
}

/* ── Cluster badge (index row) ── */
.similar-cluster-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  font-size: 11px;
  color: var(--color-primary, #2563eb);
  background: var(--color-primary-pale, #dbeafe);
  border-radius: 9px;
  vertical-align: middle;
  margin-left: 4px;
  text-decoration: none;
}
.similar-cluster-badge:hover {
  background: var(--color-primary-pale-hover, #bfdbfe);
}
.similar-cluster-badge__count {
  font-weight: 700;
  font-size: 11px;
}

/* ── Similarity Settings ─────────────────────────────────── */

/* Panel layout */
.sim-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sim-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.sim-panel__header-text {
  flex: 1;
  min-width: 0;
}
.sim-panel__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--ink);
}
.sim-panel__desc {
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

/* Toggle row (enable switch & advanced settings rows) */
.sim-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 0;
  border-top: 1px solid var(--line, #e5e7eb);
}
.sim-toggle-row:first-of-type {
  border-top: none;
  padding-top: 0;
}
.sim-toggle-row__info {
  flex: 1;
  min-width: 0;
}
.sim-toggle-row__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.sim-toggle-row__desc {
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}
.sim-num-input {
  width: 80px;
  flex-shrink: 0;
}

/* Status bar */
.sim-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line, #e5e7eb);
  margin-top: 4px;
}
.sim-status-bar--error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 10px 14px;
  margin-top: 8px;
  border-top: 1px solid #fca5a5;
}
.sim-error-msg {
  color: #b91c1c;
  font-size: 13px;
  font-weight: 500;
}
.sim-status-stats {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  font-size: 13px;
}
.sim-stat {
  font-size: 13px;
  color: var(--ink);
}
.sim-stat strong {
  font-weight: 600;
}
.sim-stat-sep {
  margin: 0 8px;
  color: var(--ink-faint, #9ca3af);
}

/* Weight factor table */
.sim-weights-table {
  margin-top: 0;
}
.sim-weights-table__factor-col {
  width: 200px;
}
.sim-weights-table__enabled-col {
  width: 56px;
  text-align: center;
}
.sim-weights-table__toggle-cell {
  text-align: center;
  vertical-align: middle;
}
.sim-weights-table__row--no-data {
  opacity: 0.55;
}
.sim-weights-table__row--disabled td:not(.sim-weights-table__toggle-cell) {
  opacity: 0.4;
}
.sim-weights-table__row--disabled .sim-factor-name {
  text-decoration: line-through;
  text-decoration-color: var(--ink-faint, #6b7280);
}
.sim-weights-table__row--disabled .sim-slider-wrap {
  pointer-events: none;
}
.sim-weights-table__row--disabled .sim-weight-slider {
  opacity: 0.35;
  cursor: not-allowed;
}
.toggle-switch--sm {
  transform: scale(0.75);
  transform-origin: center;
}
.pill-muted {
  background: var(--bg-subtle, #f3f4f6);
  color: var(--ink-faint, #6b7280);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.sim-weights-table__group-header td {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint, #6b7280);
  padding-top: 14px;
  padding-bottom: 4px;
  border-bottom: none;
}
.sim-factor-name {
  font-weight: 500;
  font-size: 13px;
}

/* Auto-calibrated bar */
.sim-weight-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sim-weight-bar {
  height: 7px;
  background: var(--accent, #2563eb);
  border-radius: 4px;
  min-width: 3px;
  max-width: 200px;
  transition: width 0.3s ease;
}
.sim-weight-pct {
  font-size: 12px;
  color: var(--ink-faint, #6b7280);
  white-space: nowrap;
  min-width: 40px;
}

/* Override slider */
.sim-slider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sim-weight-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 6px;
  border-radius: 3px;
  background: var(--line, #e5e7eb);
  outline: none;
  cursor: pointer;
}
.sim-weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent, #2563eb);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.sim-weight-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent, #2563eb);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.sim-slider-pct {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint, #6b7280);
  min-width: 36px;
  text-align: right;
}

/* Priority pills (read-only) */
.sim-priority-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}
.sim-priority-pill--high {
  background: var(--green-50, #ecfdf5);
  color: var(--green-700, #047857);
}
.sim-priority-pill--medium {
  background: var(--blue-50, #eff6ff);
  color: var(--blue-700, #1d4ed8);
}
.sim-priority-pill--low {
  background: var(--gray-100, #f3f4f6);
  color: var(--ink-faint, #6b7280);
}

/* Segmented toggle buttons (override mode) */
.sim-seg-toggle {
  display: inline-flex;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  overflow: hidden;
}
.sim-seg-toggle--disabled {
  opacity: 0.35;
  pointer-events: none;
}
.sim-seg-toggle__btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface, #fff);
  color: var(--ink-faint, #6b7280);
  border: none;
  border-right: 1px solid var(--border, #d1d5db);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  line-height: 1.4;
}
.sim-seg-toggle__btn:last-child {
  border-right: none;
}
.sim-seg-toggle__btn:hover:not(:disabled) {
  background: var(--gray-50, #f9fafb);
}
.sim-seg-toggle__btn--active {
  background: var(--accent, #2563eb);
  color: #fff;
}
.sim-seg-toggle__btn--active:hover:not(:disabled) {
  background: var(--accent-hover, #1d4ed8);
  color: #fff;
}
.sim-seg-toggle__btn:disabled {
  cursor: not-allowed;
}

/* Progress bar */
.sim-progress-bar-wrap {
  padding: 16px 0 12px;
}
.sim-progress-bar-track {
  width: 100%;
  height: 8px;
  background: var(--gray-100, #f3f4f6);
  border-radius: 4px;
  overflow: hidden;
}
.sim-progress-bar-fill {
  height: 100%;
  background: var(--accent, #2563eb);
  border-radius: 4px;
  transition: width 0.5s ease;
  min-width: 0;
}
.sim-progress-bar-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
}
.sim-progress-bar-step {
  font-weight: 600;
  color: var(--ink, #111827);
}
.sim-progress-bar-detail {
  flex: 1;
}
.sim-progress-bar-pct {
  font-weight: 600;
  color: var(--accent, #2563eb);
  min-width: 36px;
  text-align: right;
}

/* Panel actions (button row) */
.sim-panel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
}

/* ── Auto-draft runs ────────────────────────────────────── */
.skip-reasons-list {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.6;
}

.skip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.auto-draft-summary-grid {
  margin-bottom: 1rem;
}

.auto-draft-skipped-panel {
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
}

.auto-draft-skipped-heading {
  margin: 0 0 8px;
}

.card-value--sm {
  font-size: 16px !important;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FBA Inbound Wizard
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wizard Header ────────────────────────────────────────────────────────── */
.inbound-wizard-header {
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.inbound-wizard-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  flex-wrap: wrap;
  background: var(--surface-secondary, #f9fafb);
}

.inbound-wizard-steps {
  display: flex;
  overflow-x: auto;
  padding: 0;
}

.inbound-wizard-steps .wizard-step {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  position: relative;
}

.inbound-wizard-steps .wizard-step-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  width: 100%;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}

.inbound-wizard-steps .wizard-step.is-active .wizard-step-inner {
  background: var(--primary-light, #eff6ff);
}

.inbound-wizard-steps .wizard-step.is-complete .wizard-step-inner {
  opacity: 0.7;
}

.inbound-wizard-steps .wizard-step-inner:hover {
  background: var(--surface-hover, #f3f4f6);
}

.wizard-step-index {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--border-color, #e5e7eb);
  color: var(--text-muted, #6b7280);
}

.wizard-step.is-active .wizard-step-index {
  background: var(--primary, #3b82f6);
  color: #fff;
}

.wizard-step.is-complete .wizard-step-index {
  background: var(--success, #10b981);
  color: #fff;
}

.wizard-step-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wizard-step-title {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard-step-sub {
  font-size: 0.7rem;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard-step-line {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 50%;
  background: var(--border-color, #e5e7eb);
}

/* ── Option Cards (Packing / Placement / Transportation) ──────────────────── */
.inbound-option-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.inbound-option-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--panel-bg, #fff);
}

.inbound-option-card:hover {
  border-color: var(--primary, #3b82f6);
  background: var(--primary-light, #eff6ff);
}

.inbound-option-card:has(.inbound-option-radio:checked) {
  border-color: var(--primary, #3b82f6);
  background: var(--primary-light, #eff6ff);
}

.inbound-option-card-free:has(.inbound-option-radio:checked) {
  border-color: var(--success, #10b981);
  background: #f0fdf4;
}

.inbound-option-radio {
  margin-top: 2px;
  flex-shrink: 0;
}

.inbound-option-card-body {
  flex: 1;
  min-width: 0;
}

.inbound-option-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.inbound-option-title {
  font-weight: 700;
  font-size: 0.925rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Fee / Discount Badges ─────────────────────────────────────────────────── */
.fee-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #fee2e2;
  color: #991b1b;
}

.discount-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #dcfce7;
  color: #166534;
}

/* ── Packing Group Items ────────────────────────────────────────────────────── */
.inbound-packing-group {
  border-top: 1px solid var(--border-color, #e5e7eb);
  margin-top: 0.6rem;
  padding-top: 0.4rem;
}

.inbound-group-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.inbound-group-items li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

/* ── Placement shipment rows ────────────────────────────────────────────────── */
.placement-shipments {
  margin-top: 0.5rem;
}

.placement-shipment-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0;
  font-size: 0.85rem;
}

/* ── Box Builder ────────────────────────────────────────────────────────────── */
.box-card {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.box-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: var(--surface-secondary, #f9fafb);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.box-card-title {
  font-weight: 600;
  font-size: 0.875rem;
}

.box-card-body {
  padding: 0.75rem 1rem;
}

.box-dimensions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.box-dimensions-row .form-field {
  min-width: 90px;
}

.box-dimensions-row .input {
  width: 90px;
}

.box-items-section {
  border-top: 1px solid var(--border-color, #e5e7eb);
  padding-top: 0.6rem;
  margin-top: 0.4rem;
}

.box-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.box-item-row .input-compact {
  height: 32px;
  padding: 0 0.5rem;
  font-size: 0.85rem;
}

/* ── Async Operation Spinner ────────────────────────────────────────────────── */
.inbound-operation-spinner {
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  margin-bottom: 1.25rem;
  padding: 2rem;
  text-align: center;
}

.inbound-spinner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.operation-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-color, #e5e7eb);
  border-top-color: var(--primary, #3b82f6);
  border-radius: 50%;
  animation: inbound-spin 0.8s linear infinite;
}

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

/* ── FBA Shipment Show Page ─────────────────────────────────────────────────── */

.fba-meta-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  margin-bottom: 12px;
  background: var(--soft, #f8fafc);
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
}

.fba-meta-strip code {
  font-size: 12px;
  background: var(--panel, #fff);
  padding: 1px 5px;
  border-radius: 4px;
}

.fba-meta-sep {
  color: var(--border-color, #d1d5db);
  margin: 0 2px;
}

/* Override .data-table td { white-space: nowrap } so SKU/MSKU/ASIN/FNSKU can wrap */
.data-table td.fba-item-product-cell {
  white-space: normal;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/*
 * Without fixed layout + min-width:0 on the first column, the table grows to fit the
 * full metadata line and it visually spills into Qty Shipped (nowrap on .data-table td
 * was only part of the issue).
 */
.fba-inbound-show-items-table {
  table-layout: fixed;
  width: 100%;
}

.fba-inbound-show-items-table th:first-child,
.fba-inbound-show-items-table td:first-child {
  width: 48%;
  min-width: 0;
}

.fba-item-product-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  vertical-align: top;
}

.fba-item-thumb {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.fba-item-product-text {
  min-width: 0;
  flex: 1;
}

.fba-item-product-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fba-item-product-title.link {
  font-weight: 600;
}

.fba-item-ids {
  font-size: 0.78rem;
  line-height: 1.45;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fba-item-ids .link {
  font-weight: 500;
  overflow-wrap: inherit;
}

.fba-error-banner {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fba-show-grid {
  display: grid;
  grid-template-columns: 5fr 2fr;
  gap: 12px;
  align-items: start;
}

@media (max-width: 900px) {
  .fba-show-grid {
    grid-template-columns: 1fr;
  }
}

.fba-show-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fba-show-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fba-panel-tight {
  padding: 12px;
}

.fba-panel-tight > .panel-header {
  margin-bottom: 10px;
}

.fba-panel-tight > .panel-header h4 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted, #6b7280);
}

.fba-panel-body {
  font-size: 0.875rem;
  line-height: 1.5;
}

.fba-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fba-panel-actions .muted {
  font-size: 0.82rem;
  margin: 0;
}

.fba-tracking-summary {
  font-size: 0.875rem;
  margin-bottom: 8px;
}

.fba-form-compact .form-field {
  margin-bottom: 0;
}

.fba-form-compact .form-field .muted {
  font-size: 0.78rem;
}

.pill-xs {
  font-size: 0.7rem;
  padding: 1px 7px;
}

.fba-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.fba-prep-count {
  font-size: 0.8rem;
}

.fba-prep-notice {
  padding: 8px 12px 0;
  font-size: 0.82rem;
}

.fba-prep-footer {
  padding: 8px 12px 10px;
}

.fba-prep-checkbox {
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Def list for key/value pairs ────────────────────────────────────────────── */
.def-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1rem;
  font-size: 0.875rem;
}

.def-list dt {
  color: var(--text-muted, #6b7280);
  font-weight: 500;
}

.def-list dd {
  margin: 0;
}

/* ── Modal overlay ──────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  /* See note on .wf-modal-backdrop — modals always sit above the side
     menu, global header, and takeover overlays. */
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-dialog {
  background: var(--panel-bg, #fff);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.modal-header h3 {
  margin: 0;
  font-size: 1rem;
}

.modal-footer {
  border-top: 1px solid var(--border-color, #e5e7eb);
}

/* ── Wizard action row ────────────────────────────────────────────────────────── */
.wizard-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* ── Pill status colors (additional) ─────────────────────────────────────────── */
.pill-submitted  { background: #dbeafe; color: #1e40af; }
.pill-working    { background: #fef9c3; color: #854d0e; }
.pill-shipped    { background: #dcfce7; color: #166534; }
.pill-receiving  { background: #ede9fe; color: #4c1d95; }
.pill-closed     { background: #d1fae5; color: #065f46; }
.pill-cancelled  { background: #fee2e2; color: #991b1b; }
.pill-error      { background: #fee2e2; color: #991b1b; }
.pill-warning    { background: #fef3c7; color: #92400e; }
.pill-info       { background: #dbeafe; color: #1e40af; }
.pill-success    { background: #dcfce7; color: #166534; }

/* ── Input compact ────────────────────────────────────────────────────────────── */
.input-compact {
  height: 30px;
  padding: 0 0.5rem;
  font-size: 0.82rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FBA Inbound Create Page (Step 1 — New Shipment)
   ═══════════════════════════════════════════════════════════════════════════ */

.inbound-create-page {
  width: 100%;
  max-width: none;
}

/* Outer wrapper: stretch to main content area */
.page-content:has(> .inbound-create-page) {
  width: 100%;
  max-width: none;
}

/* ── Stepper (horizontal progress bar) ──────────────────────────────────────── */
.inbound-create-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius, 10px);
  padding: 14px 20px;
  margin-bottom: 20px;
}

.inbound-stepper-step {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.inbound-stepper-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--soft, #f1f5f9);
  color: var(--muted, #6b7280);
  flex-shrink: 0;
  border: 2px solid transparent;
}

.inbound-stepper-num.is-current {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 3px var(--accent-weak, #e0e7ff);
}

.inbound-stepper-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.inbound-stepper-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1f2933);
}

.inbound-stepper-step:not(.is-current) .inbound-stepper-title {
  color: var(--muted, #6b7280);
}

.inbound-stepper-sub {
  font-size: 11px;
  color: var(--muted, #6b7280);
}

.inbound-stepper-connector {
  flex: 1;
  height: 2px;
  min-width: 12px;
  background: var(--line, #e5e7eb);
  margin: 0 10px;
}

/* ── Two-column row (Ship From + Marketplace) ──────────────────────────────── */
.inbound-create-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .inbound-create-row {
    grid-template-columns: 1fr;
  }
}

.inbound-create-panel {
  margin-bottom: 0;
}

.inbound-create-panel-body {
  padding: 12px 20px 20px;
}

/* ── Empty location state ──────────────────────────────────────────────────── */
.inbound-empty-location {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 0 4px;
  gap: 4px;
}

.inbound-empty-location svg {
  margin-bottom: 4px;
  opacity: 0.5;
}

.inbound-empty-location p {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #6b7280);
}

.inbound-empty-location .link {
  color: var(--accent, #2563eb);
  text-decoration: underline;
}

/* ── Items panel ──────────────────────────────────────────────────────────── */
.inbound-items-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inbound-restock-banner {
  padding: 10px 20px;
  background: #eff6ff;
  border-bottom: 1px solid #bfdbfe;
  font-size: 13px;
  color: #1e40af;
}

.inbound-items-table th.num-col,
.inbound-items-table td.num-col {
  width: 110px;
  text-align: right;
}

.inbound-items-table th.action-col,
.inbound-items-table td.action-col {
  width: 40px;
  text-align: center;
  padding-left: 0;
  padding-right: 4px;
}

.inbound-items-table td {
  vertical-align: middle;
  padding-top: 6px;
  padding-bottom: 6px;
}

.inbound-items-table .input-compact {
  width: 100%;
}

.inbound-items-table td.num-col .input-compact {
  text-align: right;
}

.btn-icon-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted, #6b7280);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-icon-remove:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #dc2626;
}

.inbound-items-footer {
  padding: 10px 16px 14px;
}

/* FBA inbound new form: catalog search + read-only line details */
/* .table-wrap defaults to overflow-x: auto, which clips absolutely positioned dropdowns */
.inbound-create-page .inbound-items-table-wrap {
  overflow: visible;
}

.fba-item-picker-cell {
  min-width: 280px;
  overflow: visible;
  position: relative;
}

.fba-catalog-picker {
  position: relative;
}

.fba-catalog-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 100;
  max-height: 240px;
  overflow-y: auto;
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.fba-catalog-results-empty {
  padding: 10px 12px;
  font-size: 13px;
}

.fba-catalog-result-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--line, #e5e7eb);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.fba-catalog-result-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: #f3f4f6;
}

.fba-catalog-result-thumb--empty {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: #e5e7eb;
  flex-shrink: 0;
}

.fba-catalog-result-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.fba-catalog-result-item:last-child {
  border-bottom: none;
}

.fba-catalog-result-item:hover {
  background: #f3f4f6;
}

.fba-catalog-result-item.is-active {
  background: #eff6ff;
  outline: 1px solid #bfdbfe;
  outline-offset: -1px;
}

.fba-catalog-result-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #111827);
  line-height: 1.35;
}

.fba-catalog-result-meta {
  font-size: 12px;
  color: var(--muted, #6b7280);
}

.fba-item-readonly {
  font-size: 13px;
  color: var(--text, #111827);
  display: inline-block;
  padding: 6px 0;
  line-height: 1.35;
}

.fba-item-row.is-locked td:not(.num-col):not(.action-col) {
  background: #f9fafb;
}

.inbound-items-table--product .fba-item-product-cell {
  min-width: 260px;
}

.fba-item-product {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.fba-item-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: #f3f4f6;
}

.fba-item-thumb--empty {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #e5e7eb;
  flex-shrink: 0;
}

.fba-item-product-text {
  min-width: 0;
}

.fba-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #111827);
  line-height: 1.35;
}

.fba-item-ids {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 4px;
}

.fba-item-qty-cell {
  vertical-align: top;
}

.fba-item-qty-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.fba-qty-hint {
  max-width: 220px;
  text-align: right;
}

.fba-qty-hint-btn.link {
  font-size: 12px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent, #2563eb);
  text-decoration: underline;
  text-align: right;
  line-height: 1.35;
}

.fba-qty-hint-btn.link:hover {
  color: #1d4ed8;
}

/* Bulk add modal */
.fba-bulk-modal.modal,
.fba-bulk-result-modal.modal {
  max-width: min(1120px, 96vw);
  width: 100%;
}

.fba-bulk-modal-content.modal-content,
.fba-bulk-result-content.modal-content {
  max-width: none;
  width: 100%;
}

.fba-bulk-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.fba-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.fba-bulk-toolbar .fba-bulk-search {
  flex: 1;
  min-width: 200px;
}

.fba-bulk-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}

.fba-bulk-table-wrap {
  max-height: min(420px, 55vh);
  overflow: auto;
  margin-bottom: 8px;
}

.fba-bulk-col-check {
  width: 40px;
  text-align: center;
}

.fba-bulk-product {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fba-bulk-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  background: #f3f4f6;
  flex-shrink: 0;
}

.fba-bulk-thumb--empty {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #e5e7eb;
}

.fba-bulk-product-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.fba-bulk-product-meta {
  font-size: 12px;
  margin-top: 2px;
}

.fba-bulk-pagination-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0;
}

.fba-bulk-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e5e7eb);
}

.fba-bulk-result-body p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
}

.fba-bulk-result-body .fba-result-warn {
  color: #b45309;
}

/* ── Sticky action bar ────────────────────────────────────────────────────── */
.inbound-create-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 16px 0 8px;
  margin-top: 8px;
  border-top: 1px solid var(--line, #e5e7eb);
  position: sticky;
  bottom: 0;
  background: var(--bg, #f6f7f9);
  z-index: 5;
}

/*
 * Cancel is an <a> and Create Draft is a <button>; the arrow in the label can
 * change line-box metrics so the two controls no longer share one height.
 * Fix: one fixed block size + no vertical padding (content centered by .btn flex).
 */
.inbound-create-actions > .btn {
  min-height: 2.25rem;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  line-height: 1.2;
}

/* ── Panel spacing for stacked panels on the create page ─────────────────── */
.inbound-create-page > form > .panel {
  margin-bottom: 16px;
}

.inbound-create-page > form > .panel:last-of-type {
  margin-bottom: 0;
}

/* ── Workflow AI + User Input node styles ──────────────────────────────────── */

/* AI action output reference banner */
.wf-ai-output-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 12px;
  color: #1d4ed8;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.wf-ai-output-banner code {
  background: #dbeafe;
  padding: 1px 4px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 11px;
}

.wf-ai-attachments__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
.wf-ai-attachments__empty {
  font-size: 12px;
  color: #64748b;
  font-style: italic;
}
.wf-ai-attachments__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 8px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  font-size: 12px;
  color: #3730a3;
  max-width: 240px;
}
.wf-ai-attachments__chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-ai-attachments__chip-remove {
  background: transparent;
  border: 0;
  color: #6366f1;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 999px;
}
.wf-ai-attachments__chip-remove:hover { background: #e0e7ff; color: #312e81; }
.wf-ai-attachments__add {
  background: #fff;
  border: 1px dashed #cbd5e1;
  color: #334155;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.wf-ai-attachments__add:hover { background: #f1f5f9; border-color: #94a3b8; }
.wf-ai-attachments__menu {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  padding: 4px;
  min-width: 220px;
  max-width: 360px;
  max-height: 260px;
  overflow-y: auto;
}
.wf-ai-attachments__menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-ai-attachments__menu-item:hover:not(:disabled) { background: #f1f5f9; }
.wf-ai-attachments__menu-item:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}
.wf-ai-attachments__menu-group {
  padding: 6px 10px 2px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}
.wf-ai-attachments__menu-group:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid #f1f5f9;
  padding-top: 8px;
}

/* Code-style textarea for JSON schema */
.wf-field__code {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.5;
  background: #0f172a;
  color: #e2e8f0;
  border-color: #334155;
  resize: vertical;
}
.wf-field__code::placeholder { color: #64748b; }

/* Liquid hint with variable picker button */
.wf-liquid-hint {
  margin-top: 4px;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
}
.wf-liquid-hint code {
  background: rgba(148,163,184,0.15);
  padding: 1px 3px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 10px;
}
.wf-var-picker-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  color: #6366f1;
  cursor: pointer;
  text-decoration: underline;
  font-weight: 500;
}
.wf-var-picker-btn:hover { color: #4f46e5; }

/* Inline variable-picker wrapper — used by attachInlineVariablePicker() to
   pin a small "Insert variable" button inside the right edge of any text
   input or textarea whose value is Liquid-rendered at runtime. */
.wf-input-with-picker {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
}
.wf-input-with-picker > .wf-field__input,
.wf-input-with-picker > input,
.wf-input-with-picker > textarea,
.wf-input-with-picker > select {
  width: 100%;
  padding-right: 32px;
}
.wf-input-with-picker__btn {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  padding: 0;
  z-index: 1;
}
.wf-input-with-picker__btn:hover {
  background: #e2e8f0;
  color: #334155;
}
/* Single-line inputs: vertically center the button. Textareas keep it
   pinned to the top so it doesn't drift when the user types many lines. */
.wf-input-with-picker:not(.wf-input-with-picker--textarea) > .wf-input-with-picker__btn {
  top: 50%;
  transform: translateY(-50%);
}

/* Variable picker popup — Shopify-style drill-down */
.wf-var-picker-popup {
  position: absolute;
  /* Must outrank the unified-builder takeover (z-index 2147483600).
     Without this, opening "Rows from list" inside the table editor
     while the takeover is mounted produces a popup that paints
     underneath the dimmer and is invisible to the user. */
  z-index: 2147483700;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.06);
  width: 460px;
  max-width: calc(100vw - 16px);
  height: 520px;
  max-height: calc(100vh - 16px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wf-var-picker-popup__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #e5e7eb;
  min-height: 48px;
}
.wf-var-picker-popup__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  color: #374151;
  flex-shrink: 0;
  padding: 0;
}
.wf-var-picker-popup__back:hover { background: #f3f4f6; }
.wf-var-picker-popup__title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-var-picker-popup__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  color: #6b7280;
  flex-shrink: 0;
  padding: 0;
  margin-left: auto;
}
.wf-var-picker-popup__close:hover { background: #f3f4f6; color: #111827; }
.wf-var-picker-popup__search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 12px 6px;
  padding: 8px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.15s;
}
.wf-var-picker-popup__search-wrap:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.wf-var-picker-popup__search-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.wf-var-picker-popup__search {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13px;
  color: #111827;
  background: transparent;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.wf-var-picker-popup__search::placeholder { color: #9ca3af; }
.wf-var-picker-popup__list {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0 8px;
}

/* Object row — drillable item (model / step group) */
.wf-var-picker-popup__object-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid #f3f4f6;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.1s;
}
.wf-var-picker-popup__object-row:hover { background: #f9fafb; }
.wf-var-picker-popup__object-row:last-child { border-bottom: none; }
.wf-var-picker-popup__object-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.wf-var-picker-popup__object-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 1px;
}
.wf-var-picker-popup__object-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wf-var-picker-popup__object-name {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wf-var-picker-popup__object-desc {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wf-var-picker-popup__chevron {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.wf-var-picker-popup__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

/* Group header inside a drilled-in view */
.wf-var-picker-popup__group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
}
.wf-var-picker-popup__group-icon {
  display: flex;
  align-items: center;
}

/* Leaf row — insertable variable */
.wf-var-picker-popup__leaf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid #f9fafb;
  padding: 8px 16px 8px 24px;
  cursor: pointer;
  transition: background 0.1s;
}
.wf-var-picker-popup__leaf-row:hover { background: #f0f1ff; }
.wf-var-picker-popup__leaf-row:last-child { border-bottom: none; }
.wf-var-picker-popup__leaf-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.wf-var-picker-popup__leaf-name {
  font-size: 13px;
  color: #111827;
  font-weight: 400;
}
.wf-var-picker-popup__leaf-desc {
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wf-var-picker-popup__type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.wf-var-picker-popup__type-badge--bool {
  background: #ecfdf5;
  color: #059669;
}
.wf-var-picker-popup__type-badge--array {
  background: #eef2ff;
  color: #4338ca;
}
.wf-var-picker-popup__empty {
  font-size: 13px;
  color: #9ca3af;
  padding: 32px 16px;
  text-align: center;
}

/* User input node panel */
.wf-user-input-node { display: flex; flex-direction: column; gap: 12px; }

/* Node card color for user_input */
.fl-card--user_input { border-top: 3px solid #0ea5e9; }

/* ── For-each loop node ──────────────────────────────────── */
.fl-card--foreach { border-top: 3px solid #14b8a6; }

.wf-foreach-node { display: flex; flex-direction: column; gap: 12px; }

.wf-foreach-limits {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 6px;
}
.wf-foreach-limits strong { color: #78350f; }

/* Lane labels / pills for the Perform-on-each (iteration) + After-complete (next) split */
.fl-lane__label--iteration { color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4; }
.fl-pill--iteration { border-color: rgba(20, 184, 166, 0.45); }

.is-dragging-active .fl-lane__add .fl-pill--iteration {
  background: #115e59; border-color: #14b8a6;
}
.is-dragging-active .fl-lane__add .fl-pill--iteration.is-drop-target {
  background: #0d9488; border-color: #5eead4; border-style: solid;
  outline: none; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.35), 0 4px 16px rgba(20, 184, 166, 0.25);
  transform: scale(1.06);
}

/* Dashed loop-back treatment on the Body lane so the repetition is obvious */
.fl-branches--foreach > .fl-lane--iteration::before { background: repeating-linear-gradient(to bottom, #14b8a6 0 4px, transparent 4px 8px); }
.fl-branches--foreach > .fl-lane--iteration::after { border-top-color: #14b8a6; }

/* Hybrid array-source picker (pill + custom-expression escape hatch) */
.wf-foreach-source { display: flex; flex-direction: column; gap: 6px; }
.wf-foreach-source__pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
.wf-foreach-source__pill:hover { background: #f1f5f9; border-color: #94a3b8; }
.wf-foreach-source__pill--selected {
  background: #ecfdf5;
  border-style: solid;
  border-color: #5eead4;
}
.wf-foreach-source__pill--selected:hover { background: #d1fae5; border-color: #14b8a6; }
.wf-foreach-source__pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #ccfbf1;
  flex-shrink: 0;
}
.wf-foreach-source__pill-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wf-foreach-source__pill-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-foreach-source__pill-sub {
  font-size: 11.5px;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-foreach-source__pill-chev { flex-shrink: 0; color: #94a3b8; }

.wf-foreach-source__toggle { margin: 0; font-size: 12px; color: #64748b; }
.wf-foreach-source__toggle-link {
  background: none;
  border: none;
  padding: 0;
  color: #4f46e5;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}
.wf-foreach-source__toggle-link:hover { color: #4338ca; }
.wf-foreach-source__custom { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* Run status badge next to workflow button */
.wf-run-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
}
.wf-run-status-badge--running { background: #fef9c3; color: #a16207; }
.wf-run-status-badge--waiting { background: #e0f2fe; color: #0369a1; }
.wf-run-status-badge--success { background: #dcfce7; color: #166534; }
.wf-run-status-badge--failed  { background: #fee2e2; color: #991b1b; }

/* Checkpoint modal description */
.wf-modal__desc {
  font-size: 13px;
  color: #475569;
  margin: 0 0 12px;
  line-height: 1.5;
}

/* ── Unified modal morph transitions ─────────────────────────────────── */
.wf-modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 16px;
}
.wf-modal-loading__spinner {
  width: 34px;
  height: 34px;
  border: 3px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: wf-modal-spin 0.75s linear infinite;
}
@keyframes wf-modal-spin {
  to { transform: rotate(360deg); }
}
.wf-modal-loading__text {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  font-weight: 500;
}

/* ── Show message modal ──────────────────────────────────────────────── */
.wf-modal--message {
  max-width: 600px;
  width: 100%;
}
.wf-msg-blocks-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px;
}
/* Unified-interaction runtime host: stacks the rendered element tree
   (inputs + presentational blocks interleaved) inside the modal body
   with the same comfortable spacing the legacy `wf-msg-blocks-container`
   uses, so the runtime modal looks like the in-builder preview. */
.wf-int-runtime-host {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wf-int-runtime-host .wf-int--column { display: flex; flex-direction: column; gap: 10px; }
.wf-msg-block--heading {
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
  line-height: 1.4;
}
.wf-msg-block--text {
  font-size: 14px;
  color: #374151;
  margin: 0;
  line-height: 1.65;
}
.wf-msg-block--stat-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.wf-msg-stat {
  flex: 1 1 100px;
  min-width: 90px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 16px;
}
.wf-msg-stat__value {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
.wf-msg-stat__label {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.wf-msg-block--alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: 500;
}
.wf-msg-block--alert::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-top: 1px;
}
.wf-msg-block--alert-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.wf-msg-block--alert-info::before { background: #3b82f6; }
.wf-msg-block--alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.wf-msg-block--alert-success::before { background: #22c55e; }
.wf-msg-block--alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.wf-msg-block--alert-warning::before { background: #f59e0b; }
.wf-msg-block--alert-danger  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.wf-msg-block--alert-danger::before { background: #ef4444; }
.wf-msg-block--divider {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 4px 0;
}

/* Table block in the rendered modal */
.wf-msg-block--table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wf-msg-table__caption {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wf-msg-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: #0f172a;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.wf-msg-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.wf-msg-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
  line-height: 1.5;
}
.wf-msg-table tbody tr:last-child td {
  border-bottom: none;
}
.wf-msg-table tbody tr:nth-child(even) td {
  background: #fafbfc;
}
.wf-msg-table__empty {
  text-align: center;
  color: #94a3b8;
  font-style: italic;
  padding: 14px 12px !important;
}

/* Table cell alignment helpers */
.wf-msg-table__cell--left   { text-align: left; }
.wf-msg-table__cell--right  { text-align: right; font-variant-numeric: tabular-nums; }
.wf-msg-table__cell--center { text-align: center; }

/* Repeating rows (input_repeater).
   Rendered as a table with per-row editable inputs. Visually close
   to wf-msg-table so the "grid of data" metaphor carries, but with
   tighter vertical rhythm so long/tall inputs (textarea, many rows)
   don't balloon the modal. Ghost rows used in the builder preview
   are faded so the designer understands they're not submittable. */
.wf-msg-block--repeater {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wf-int__repeater-label {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.wf-msg-table--repeater tbody td {
  padding: 6px 8px;
  vertical-align: middle;
}
.wf-msg-table--repeater tbody tr.wf-msg-table__row--ghost td {
  opacity: 0.45;
  font-style: italic;
  color: #64748b;
}
.wf-repeater-cell__input {
  width: 100%;
  min-width: 0;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  color: #0f172a;
  background: #fff;
  box-sizing: border-box;
}
.wf-repeater-cell__input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.wf-repeater-cell__check {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}
textarea.wf-repeater-cell__input {
  font-family: inherit;
  resize: vertical;
  min-height: 32px;
}

/* Inspector editor for input_repeater. Organized into stacked groups
   so the Field key / Source / Row variable / Columns sections read
   top-to-bottom without feeling crowded. */
.page-inspector__validation-hint {
  color: var(--pp-warning, #b45309) !important;
  font-weight: 500;
}

.wf-builder-inspector__repeater {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wf-builder-inspector__subgroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fafbfc;
}
.wf-builder-inspector__repeater-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.wf-builder-inspector__repeater-columns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wf-builder-inspector__repeater-col {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wf-builder-inspector__repeater-col-top {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: end;
}
.wf-builder-inspector__repeater-col-top .wf-builder-inspector__option-del {
  margin-bottom: 2px;
}
.wf-builder-inspector__repeater-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Row tones (conditional styling).
   Selectors are intentionally over-qualified (`.wf-msg-table tbody tr.…`)
   so they beat the zebra-stripe rule above (`.wf-msg-table tbody
   tr:nth-child(even) td`, specificity 0,2,2). Without this, every other
   toned row was getting wiped back to the zebra background. */
.wf-msg-table tbody tr.wf-msg-table__row--success td { background: #f0fdf4; }
.wf-msg-table tbody tr.wf-msg-table__row--warning td { background: #fffbeb; }
.wf-msg-table tbody tr.wf-msg-table__row--danger  td { background: #fef2f2; }
.wf-msg-table tbody tr.wf-msg-table__row--info    td { background: #eff6ff; }
.wf-msg-table tbody tr.wf-msg-table__row--muted   td { background: #f8fafc; color: #64748b; }

/* Summary footer */
.wf-msg-table__summary {
  text-align: right;
  font-size: 11px;
  color: #64748b;
  font-style: italic;
  background: #fafbfc;
  padding: 6px 12px !important;
  border-top: 1px solid #e2e8f0;
}

/* Sortable column headers (toggleable). When the show_message author has
   "Allow clicking column headers to sort" enabled, each header gains a
   button affordance and a sort indicator on the right (⇅ neutral, ↑ asc,
   ↓ desc). Active column is bolded and tinted so the current sort is
   immediately legible at a glance. */
.wf-msg-table__th--sortable {
  cursor: pointer;
  user-select: none;
  padding-right: 24px !important;
  position: relative;
}
.wf-msg-table__th--sortable:hover { background: #eef2f7; color: #1e293b; }
.wf-msg-table__th--sortable:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}
.wf-msg-table__th--sortable .wf-msg-table__th-label { display: inline-block; }
.wf-msg-table__th-sort-ind {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #94a3b8;
  font-weight: 400;
}
.wf-msg-table__th--sort-asc,
.wf-msg-table__th--sort-desc {
  background: #eef2ff;
  color: #1e3a8a;
}
.wf-msg-table__th--sort-asc .wf-msg-table__th-sort-ind,
.wf-msg-table__th--sort-desc .wf-msg-table__th-sort-ind {
  color: #4338ca;
  font-weight: 700;
}

/* Per-column filter row (toggleable). Sits directly under the header row and
   visually leans on the same surface so it reads as part of the header strip. */
.wf-msg-table__filter-row th {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 4px 8px;
  font-weight: 400;
}
.wf-msg-table__filter-input {
  width: 100%;
  padding: 4px 8px;
  font-size: 12px;
  color: #0f172a;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.wf-msg-table__filter-input::placeholder { color: #94a3b8; font-style: italic; }
.wf-msg-table__filter-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Pagination controls (toggleable). Lives in <tfoot> so it sticks with the
   table even when surrounding modal content is scrolled. */
.wf-msg-table__pager-cell {
  padding: 8px 12px !important;
  background: #fafbfc;
  border-top: 1px solid #e2e8f0;
}
.wf-msg-table__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.wf-msg-table__pager-status {
  font-size: 11px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.wf-msg-table__pager-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wf-msg-table__pager-btn {
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  font-size: 13px;
  line-height: 1;
  color: #334155;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.wf-msg-table__pager-btn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.wf-msg-table__pager-btn:disabled {
  color: #cbd5e1;
  background: #f8fafc;
  cursor: not-allowed;
}
.wf-msg-table__pager-page {
  font-size: 11px;
  color: #475569;
  margin: 0 6px;
  font-variant-numeric: tabular-nums;
}
.wf-msg-table__pager-note {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}

/* CSV download bar (toggleable). Sits below the table; right-aligned so it
   doesn't visually compete with the table data. */
.wf-msg-table__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.wf-msg-table__csv-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.wf-msg-table__csv-btn:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}
.wf-msg-table__csv-btn svg { flex-shrink: 0; }

/* Editor — Display & interaction toggles */
.wf-block-display-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fafbfc;
}
.wf-block-display-toggle + .wf-block-display-toggle { margin-top: 8px; }
.wf-block-display-toggle__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
  cursor: pointer;
  margin: 0;
}
.wf-block-display-toggle__label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
  accent-color: #2563eb;
}
.wf-block-display-toggle__text { line-height: 1.3; }
.wf-block-display-toggle__hint {
  margin: 0 0 0 22px;
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
}
.wf-block-display-toggle__dependent {
  margin: 4px 0 0 22px;
}
.wf-block-display-toggle__dependent[hidden] { display: none !important; }
.wf-block-display-pageSize__input { max-width: 120px; }

/* List block */
.wf-msg-block--list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wf-msg-list__caption {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.wf-msg-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: #0f172a;
  line-height: 1.6;
}
.wf-msg-list--bullet { list-style-type: disc; }
.wf-msg-list--numbered { list-style-type: decimal; }
.wf-msg-list__item {
  padding: 2px 0;
}
.wf-msg-list__empty {
  font-size: 13px;
  color: #94a3b8;
  font-style: italic;
  margin: 0;
}
.wf-msg-list__summary {
  font-size: 11px;
  color: #64748b;
  font-style: italic;
  margin: 2px 0 0;
}

/* Cell kinds: badge / link / boolean / progress */

/* ── Set Variable & Transform Data panel styles ──────────────────────────── */
.wf-action-output-banner {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: #166534;
  margin-bottom: 12px;
  line-height: 1.5;
}
.wf-action-output-banner code {
  background: #dcfce7;
  border-radius: 3px;
  padding: 1px 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ─── Set variable: card-style assignment editor ─────────────────────
   The inspector sidebar is narrow (~340px). Trying to render every
   field of an assignment in a single horizontal grid (the prior
   `.wf-setvar-row` layout) squished both the value cell and its
   variable-picker icons to ~80px. We instead render each assignment
   as a CARD with a compact metadata strip on top and a full-width
   expression area below. */
.wf-setvar-panel { display: flex; flex-direction: column; gap: 10px; }
.wf-setvar-assignments { display: flex; flex-direction: column; gap: 10px; }

.wf-setvar-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.wf-setvar-card:focus-within {
  border-color: #c7d2fe;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.wf-setvar-card__remove {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  color: #94a3b8; border-radius: 4px;
  cursor: pointer;
}
.wf-setvar-card__remove:hover { background: #f1f5f9; color: #ef4444; }

/* Two-column meta strips. The primary strip pads its right edge so the
   absolute remove (×) button doesn't overlap the Op control. */
.wf-setvar-card__meta {
  display: grid;
  gap: 8px;
  align-items: end;
}
.wf-setvar-card__meta--primary   { grid-template-columns: minmax(0, 1fr) minmax(120px, 150px); padding-right: 24px; }
.wf-setvar-card__meta--secondary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.wf-setvar-card__field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wf-setvar-card__label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wf-setvar-card__input { width: 100%; }
/* Tighten select height so it lines up cleanly with the name input. */
select.wf-setvar-card__input { padding-right: 24px; }

/* Inline name validation: red border + warning pill below the strip. */
.wf-setvar-card__input--invalid { border-color: #f87171 !important; background: #fef2f2; }
.wf-setvar-card__warn {
  font-size: 11px; line-height: 1.35; color: #b45309;
  background: #fef3c7; border-radius: 4px; padding: 4px 8px;
  display: none;
}
.wf-setvar-card__warn:not(:empty) { display: block; }

/* Expression area — full card width, with the JSON-literal toggle
   docked to the right of the label so we don't waste a grid row. */
.wf-setvar-card__expr {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 8px;
}
.wf-setvar-card__expr-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.wf-setvar-card__json-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; user-select: none;
  white-space: nowrap;
}
.wf-setvar-card__json-toggle input { margin: 0; transform: translateY(0.5px); }

textarea.wf-setvar-card__expr-input {
  width: 100%;
  min-height: 56px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.45;
}
textarea.wf-setvar-card__expr-input.wf-setvar-card__expr-input--json {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #1e293b;
  line-height: 1.4;
  tab-size: 2;
}
textarea.wf-setvar-card__expr-input.wf-setvar-card__expr-input--json::placeholder { color: #64748b; }

.wf-setvar-card__expr-hint { margin: 2px 0 0; font-size: 11px; line-height: 1.4; }

/* Format action template input gets the same monospace treatment as
   the set_variable expression for consistency. */
textarea.wf-format-template {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.45;
  min-height: 56px;
  resize: vertical;
}

/* Transform data panel */
.wf-tdata-panel { display: flex; flex-direction: column; gap: 10px; }

/* Sticky-style header: step label on top (full width), outputs badge below.
   Vertical stacking keeps the input readable instead of squeezing it next to
   the (often long) output reference chip. */
.wf-tdata-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.wf-tdata-header__label-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.wf-tdata-header__label-text {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wf-tdata-header__label-input {
  font-weight: 600;
  font-size: 13px;
  width: 100%;
}
.wf-tdata-header__output {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  font-size: 11px;
  color: #166534;
  cursor: help;
  align-self: flex-start;
  max-width: 100%;
  min-width: 0;
}
.wf-tdata-header__output-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 9.5px;
  opacity: 0.8;
  flex-shrink: 0;
}
.wf-tdata-header__output code {
  background: #dcfce7;
  border-radius: 3px;
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #166534;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Pipeline summary chip — gives an at-a-glance read of the whole transform */
.wf-tdata-pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: #334155;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  line-height: 1.5;
}
.wf-tdata-pipeline span { display: inline-flex; align-items: center; gap: 4px; }
.wf-tdata-pipeline span.is-muted { color: #94a3b8; font-style: italic; }
.wf-tdata-pipeline code {
  background: #f1f5f9;
  border-radius: 3px;
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #0f172a;
}
.wf-tdata-pipeline__sep { color: #cbd5e1; font-weight: 600; }

/* Computed-fields and aggregations lists */
.wf-tdata-fields-list,
.wf-tdata-agg-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}
.wf-tdata-kv-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(180px, 2fr) 28px;
  gap: 6px;
  align-items: center;
}
.wf-tdata-agg-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 140px minmax(110px, 1fr) 28px;
  gap: 6px;
  align-items: center;
}

/* Header row that labels each column above the editable rows */
.wf-tdata-list-header {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  padding: 0 2px 2px;
}

/* Empty-state shown when a list has no entries yet */
.wf-tdata-list-empty {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
}

/* "Add ..." button alignment inside a section body */
.wf-tdata-add-btn { align-self: flex-start; }

/* Subtle hint that an aggregation field is optional for this op */
.wf-field__input--muted::placeholder { color: #cbd5e1; font-style: italic; }

/* Shared secondary / small buttons */
.wf-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.wf-btn-secondary:hover { background: #f1f5f9; border-color: #cbd5e1; }
.wf-btn-sm { padding: 4px 8px; font-size: 11px; }

/* Checkbox wrap for foreach collect_results */
.wf-field__checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #0f172a;
}
.wf-field__checkbox-wrap input[type=checkbox] { width: 14px; height: 14px; cursor: pointer; }

.wf-msg-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: capitalize;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}
.wf-msg-badge--default { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.wf-msg-badge--success { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.wf-msg-badge--warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.wf-msg-badge--danger  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.wf-msg-badge--info    { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.wf-msg-badge--muted   { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; }

.wf-msg-link {
  color: #4f46e5;
  text-decoration: underline;
  word-break: break-word;
}
.wf-msg-link:hover { color: #4338ca; }

.wf-msg-bool {
  display: inline-flex;
  font-weight: 600;
  font-size: 14px;
}
.wf-msg-bool--true  { color: #16a34a; }
.wf-msg-bool--false { color: #cbd5e1; }

.wf-msg-progress {
  display: inline-block;
  width: 100%;
  max-width: 140px;
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  vertical-align: middle;
}
.wf-msg-progress__fill {
  height: 100%;
  background: linear-gradient(to right, #6366f1, #8b5cf6);
  transition: width 0.2s;
}
.wf-msg-progress__label {
  font-size: 11px;
  color: #64748b;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* Image cell — used in show_message tables. The default sizing is just a
   sensible upper bound; the column's max_width / max_height (set in the
   editor) override it via inline styles so each column can size its own
   thumbnails. The placeholder variant is used by the editor preview. */
.wf-msg-img {
  display: inline-block;
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  background: #f8fafc;
  vertical-align: middle;
}
.wf-msg-img--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  border: 1px dashed #cbd5e1;
}

/* Simulation timeline thumbnail — kept tighter so dense traces remain
   compact; runtime dimensions use the editor-configured values. */
.wf-sim__img {
  display: inline-block;
  max-width: 60px;
  max-height: 60px;
  object-fit: contain;
  border-radius: 4px;
  background: #f8fafc;
  vertical-align: middle;
}

/* ── Block builder (canvas side panel) ──────────────────────────────── */
.wf-block-builder {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wf-block-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.wf-block-row {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.wf-block-row__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
  user-select: none;
}
.wf-block-row:not(.is-open) > .wf-block-row__header {
  border-bottom-color: transparent;
}
.wf-block-row__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: transform 0.15s ease;
}
.wf-block-row.is-open > .wf-block-row__header > .wf-block-row__chevron {
  transform: rotate(90deg);
}
/* Body + nested sections are collapsed when the row isn't open. */
.wf-block-row:not(.is-open) > .wf-block-row__body,
.wf-block-row:not(.is-open) > details.wf-visible-when {
  display: none;
}
.wf-block-type-badge {
  font-size: 11px;
  font-weight: 600;
  color: #7c3aed;
  background: #ede9fe;
  border-radius: 4px;
  padding: 2px 7px;
  text-transform: capitalize;
  flex: 1;
}
.wf-block-move-btn,
.wf-block-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
}
.wf-block-move-btn:hover { color: #475569; background: #e2e8f0; }
.wf-block-remove-btn:hover { color: #ef4444; background: #fee2e2; }
.wf-block-row__body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf-block-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wf-block-field__label {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wf-block-stats-builder {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wf-block-stat-row-builder {
  display: flex;
  gap: 6px;
  align-items: center;
}
.wf-block-stat-row-builder .wf-field__input {
  flex: 1;
}
.wf-block-stat-remove-btn {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
}
.wf-block-stat-remove-btn:hover {
  color: #dc2626;
  background: #fef2f2;
  border-color: #fecaca;
}
.wf-block-add-stat-btn {
  font-size: 11px;
  color: #6366f1;
  background: none;
  border: 1px dashed #c7d2fe;
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
  text-align: left;
}
.wf-block-add-stat-btn:hover { background: #eef2ff; }

/* Table block builder (side panel) */
.wf-block-columns-builder {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.wf-block-column-head {
  display: grid;
  grid-template-columns: 1fr 1.6fr 48px;
  gap: 6px;
  align-items: center;
  padding: 2px 2px 0;
}
.wf-block-column-head__cell {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wf-block-column-head__spacer { width: 48px; }
.wf-block-column-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr 48px;
  gap: 6px;
  align-items: center;
}
.wf-block-column-row__actions {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
  align-items: center;
}
.wf-block-col-picker-btn,
.wf-block-col-remove-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px;
  cursor: pointer;
  color: #94a3b8;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wf-block-col-picker-btn:hover { color: #6366f1; background: #eef2ff; border-color: #c7d2fe; }
.wf-block-col-remove-btn:hover { color: #ef4444; background: #fee2e2; border-color: #fecaca; }
.wf-block-add-column-btn {
  font-size: 11px;
  color: #6366f1;
  background: none;
  border: 1px dashed #c7d2fe;
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
  text-align: left;
  margin-top: 2px;
  align-self: flex-start;
}
.wf-block-add-column-btn:hover { background: #eef2ff; }

/* Column advanced (Format & style) per-column section */
.wf-block-column-advanced {
  grid-column: 1 / -1;
  margin: 2px 0 6px 0;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fafbfc;
}
.wf-block-column-advanced[open] {
  background: #fff;
}
.wf-block-column-advanced__summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  user-select: none;
  position: relative;
  padding-left: 22px;
}
.wf-block-column-advanced__summary::-webkit-details-marker { display: none; }
.wf-block-column-advanced__summary::before {
  content: "▸";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.15s;
  font-size: 9px;
  color: #94a3b8;
}
.wf-block-column-advanced[open] .wf-block-column-advanced__summary::before {
  transform: translateY(-50%) rotate(90deg);
}
.wf-block-column-advanced__body {
  padding: 8px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #f1f5f9;
}
.wf-block-column-extras { display: flex; flex-direction: column; gap: 8px; }
.wf-block-column-format-extras { display: flex; flex-direction: column; gap: 6px; }

/* Table transforms & row-style sections */
.wf-block-table-section {
  margin: 10px 0;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fafbfc;
}
.wf-block-table-section[open] { background: #fff; }
.wf-block-table-section__summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  position: relative;
  padding-left: 26px;
  user-select: none;
}
.wf-block-table-section__summary::-webkit-details-marker { display: none; }
.wf-block-table-section__summary::before {
  content: "▸";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.15s;
  font-size: 10px;
  color: #94a3b8;
}
.wf-block-table-section[open] > .wf-block-table-section__summary::before {
  transform: translateY(-50%) rotate(90deg);
}
.wf-block-table-section__body {
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #f1f5f9;
}

/* Rule row (shared by filter + row styling) */
.wf-block-rules-builder {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wf-block-rule-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 28px;
  gap: 6px;
  align-items: center;
}
.wf-block-rule-row--with-tone {
  grid-template-columns: 1fr 1fr 1fr 90px 28px;
}
.wf-block-add-rule-btn {
  font-size: 11px;
  color: #6366f1;
  background: none;
  border: 1px dashed #c7d2fe;
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
}
.wf-block-add-rule-btn:hover { background: #eef2ff; }

/* Rule row with field picker — squeezes the picker button next to the field input */
.wf-block-rule-row--with-picker {
  grid-template-columns: 1.2fr 1fr 1fr 28px;
}
.wf-block-rule-row--with-picker.wf-block-rule-row--with-tone {
  grid-template-columns: 1.2fr 1fr 1fr 90px 28px;
}
.wf-block-rule-field-with-picker {
  display: flex;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}
.wf-block-rule-field-with-picker > .wf-field__input { flex: 1; min-width: 0; }

/* Button-style field rule (table row-style + filter): the attribute button
   takes the full top row, while operator/value/(tone)/remove sit on the
   second row. Uses named grid areas so the JS keeps appending children in
   their existing order without needing per-child wrapper changes. */
.wf-block-rule-row--button-field {
  row-gap: 6px;
  align-items: center;
}
.wf-block-rule-row--button-field.wf-block-rule-row--with-tone {
  grid-template-columns: 1fr 1fr 90px 28px;
  grid-template-areas:
    "field field field  field"
    "op    value tone   remove";
}
.wf-block-rule-row--button-field:not(.wf-block-rule-row--with-tone) {
  grid-template-columns: 1fr 1fr 28px;
  grid-template-areas:
    "field field  field"
    "op    value  remove";
}
.wf-block-rule-row--button-field > .wf-block-rule__field-cell { grid-area: field; }
.wf-block-rule-row--button-field > select[data-rule-field='operator'] { grid-area: op; }
.wf-block-rule-row--button-field > input[data-rule-field='value'] { grid-area: value; }
/* When withValuePicker is on, attachInlineVariablePicker swaps the bare
   value <input> for a .wf-input-with-picker wrapper. The wrapper must be
   the grid item that lands in the "value" cell — otherwise it falls out
   of the named-area layout and the picker button is misplaced. */
.wf-block-rule-row--button-field > .wf-input-with-picker { grid-area: value; min-width: 0; }
.wf-block-rule-row--button-field > select[data-rule-field='tone'] { grid-area: tone; }
.wf-block-rule-row--button-field > .wf-block-col-remove-btn { grid-area: remove; }

/* ── Drag-to-reorder for tone rules ────────────────────────────────────
   When a rule row opts in via the .wf-block-rule-row--draggable modifier,
   we prepend a .wf-block-rule-row__handle as the FIRST child. The CSS
   below extends the named-area grids with a leading "handle" column so
   the handle sits to the left of the rule and spans both grid rows. */
.wf-block-rule-row--draggable.wf-block-rule-row--button-field.wf-block-rule-row--with-tone {
  grid-template-columns: 18px 1fr 1fr 90px 28px;
  grid-template-areas:
    "handle field field field  field"
    "handle op    value tone   remove";
}
.wf-block-rule-row--draggable.wf-block-rule-row--button-field:not(.wf-block-rule-row--with-tone) {
  grid-template-columns: 18px 1fr 1fr 28px;
  grid-template-areas:
    "handle field field  field"
    "handle op    value  remove";
}
/* Single-row variants (non-button-field) — slot the handle in by widening
   the column track. The remaining children follow auto placement, so the
   leading column is naturally consumed by the handle. */
.wf-block-rule-row--draggable:not(.wf-block-rule-row--button-field) {
  grid-template-columns: 18px 1fr 1fr 1fr 28px;
}
.wf-block-rule-row--draggable:not(.wf-block-rule-row--button-field).wf-block-rule-row--with-tone {
  grid-template-columns: 18px 1fr 1fr 1fr 90px 28px;
}
.wf-block-rule-row--draggable:not(.wf-block-rule-row--button-field).wf-block-rule-row--with-picker {
  grid-template-columns: 18px 1.2fr 1fr 1fr 28px;
}
.wf-block-rule-row--draggable:not(.wf-block-rule-row--button-field).wf-block-rule-row--with-picker.wf-block-rule-row--with-tone {
  grid-template-columns: 18px 1.2fr 1fr 1fr 90px 28px;
}

.wf-block-rule-row__handle {
  grid-area: handle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  color: #cbd5e1;
  cursor: grab;
  padding: 0 1px;
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
  /* Leave the handle in normal flow so it stretches over both grid rows
     of the button-field variant. align-self: stretch above + the grid
     "handle" area definition together pin it to the full row height. */
}
.wf-block-rule-row__handle:hover { color: #6366f1; background: #eef2ff; }
.wf-block-rule-row__handle:active { cursor: grabbing; }
.wf-block-rule-row.is-dragging { opacity: 0.4; }
.wf-block-rule-row.is-drop-target {
  outline: 2px solid #6366f1;
  outline-offset: -2px;
  border-radius: 4px;
}

/* visible_when panel: match (AND/OR) toggle inside the details body */
.wf-cond-logic {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
.wf-cond-logic__label {
  font-size: 11px;
  color: #64748b;
  margin-right: 4px;
}
.wf-cond-logic__btn {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wf-cond-logic__btn.is-active {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}
.wf-cond-logic__btn:hover:not(.is-active) {
  background: #f8fafc;
}

/* Small "this block is conditional" eye indicator on the block header */
.wf-block-visibility-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  color: #6366f1;
  background: #eef2ff;
  margin-left: 4px;
}

/* visible_when section: subtle purple accent so it's visually distinct from
   table transforms (which are neutral gray). Appended outside the block body,
   so it needs its own margin to align with the body padding. */
details.wf-visible-when {
  border-color: #e0e7ff;
  background: #fbfbff;
  margin: 0 10px 10px;
}
details.wf-visible-when[open] {
  background: #fdfcff;
}
details.wf-visible-when > .wf-block-table-section__summary {
  color: #4338ca;
}

/* In the user_input form-field builder rows (which already use a tighter
   vertical rhythm) the panel needs slightly less breathing room. */
.wf-input-field-row > details.wf-visible-when {
  margin: 6px 0 0;
}

/* Textarea styling for badge map / similar */
.wf-field__textarea {
  resize: vertical;
  min-height: 60px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.4;
}
.wf-field__select { appearance: auto; background: #fff; }

.wf-block-divider-hint {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  margin: 0;
}
.wf-block-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.wf-block-type-select {
  flex: 1;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 5px 8px;
  color: #374151;
  background: #fff;
}
.wf-block-add-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #6366f1;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.wf-block-add-btn:hover { background: #e0e7ff; }

/* Two-column field row */
.wf-field-row {
  display: flex;
  gap: 10px;
}
.wf-field--half {
  flex: 1;
}

/* ── AI Schema Generator widget ─────────────────────────────────────────── */
.wf-schema-gen {
  margin-top: 6px;
}
.wf-schema-gen__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #6366f1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
}
.wf-schema-gen__trigger:hover,
.wf-schema-gen__trigger--active {
  color: #4338ca;
}
.wf-schema-gen__form {
  margin-top: 10px;
  padding: 12px 14px;
  background: #f8f7ff;
  border: 1px solid #e0e0ff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf-schema-gen__label {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}
.wf-schema-gen__input {
  width: 100%;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  resize: vertical;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.wf-schema-gen__input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.wf-schema-gen__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-schema-gen__cancel {
  font-size: 12px;
  color: #6b7280;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.wf-schema-gen__cancel:hover { color: #374151; }
.wf-schema-gen__error {
  font-size: 12px;
  color: #dc2626;
  margin: 0;
}

/* ── Run-script inspector ────────────────────────────────────────────────
   Custom panel for the run_script workflow action. The source textarea
   lives inside .wf-script-editor with an absolutely-positioned toolbar
   pinned to its top-right corner (inputs reference + AI helper). */
.wf-script-source { margin-top: 0.75rem; }
.wf-script-editor {
  position: relative;
}
.wf-script-editor__textarea {
  /* Reserve space on the right edge so corner-mounted controls don't
     overlap the user's typing. */
  padding-right: 9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
}
.wf-script-editor__toolbar {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.wf-script-toolbar__group { display: inline-flex; }
.wf-script-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  color: #374151;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.wf-script-toolbar__btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}
.wf-script-toolbar__btn svg { opacity: 0.75; }
.wf-script-toolbar__btn--ai {
  color: #6d28d9;
  border-color: #ddd6fe;
  background: linear-gradient(180deg, #faf5ff 0%, #f5f3ff 100%);
}
.wf-script-toolbar__btn--ai:hover {
  background: #f3e8ff;
  border-color: #c4b5fd;
}

/* Inputs reference popup — opens beneath the "inputs" toolbar button.
   Lists every key the author has declared in the inputs editor, click
   inserts `inputs.<key>` at the caret. */
.wf-script-inputs-popup {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  min-width: 220px;
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.wf-script-inputs-popup__empty {
  padding: 10px 12px;
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}
.wf-script-inputs-popup__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  font-size: 12.5px;
  color: #111827;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.wf-script-inputs-popup__item:hover { background: #f3f4f6; }
.wf-script-inputs-popup__item code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #1d4ed8;
}

/* "Ask AI" generator popup — collapsed form anchored to the AI button. */
.wf-script-ai-popup {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  width: 360px;
  padding: 12px;
}
.wf-script-ai-popup__title {
  margin: 0 0 6px 0;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
.wf-script-ai-popup__textarea {
  width: 100%;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  resize: vertical;
}
.wf-script-ai-popup__hint {
  margin: 6px 0 0 0;
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}
.wf-script-ai-popup__actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Collapsible Advanced disclosure for limits — keeps the common
   case (just write the script) uncluttered. */
.wf-script-advanced {
  margin-top: 0.85rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fafafa;
}
.wf-script-advanced__summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  list-style: none;
  user-select: none;
}
.wf-script-advanced__summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  color: #6b7280;
  transition: transform 0.15s ease;
}
.wf-script-advanced[open] > .wf-script-advanced__summary::before {
  transform: rotate(90deg);
}
.wf-script-advanced__hint {
  margin-top: 0.5rem;
}
.wf-script-advanced__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.wf-script-advanced__col { margin: 0; }

/* ── HTTP Request action panel ────────────────────────────────────────── */
.wf-http-method-url-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.wf-http-method-wrap { flex: 0 0 auto; }
.wf-http-method-select { width: 110px; font-family: var(--pp-font-mono, monospace); font-size: 0.8125rem; }
.wf-http-url-wrap { flex: 1 1 auto; min-width: 0; }
.wf-http-url-input { width: 100%; }
.wf-field__label--sr { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden; }

/* Body type tab strip */
.wf-http-body-type-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 0.5rem;
  background: var(--pp-surface-sunken, #f4f4f5);
  border-radius: 6px;
  padding: 3px;
}
.wf-http-body-tab {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--pp-text-muted, #6b7280);
  transition: background 0.1s, color 0.1s;
}
.wf-http-body-tab:hover { background: var(--pp-surface-2, #fff); }
.wf-http-body-tab--active {
  background: var(--pp-surface-2, #fff);
  color: var(--pp-text, #111827);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.wf-http-body-sublabel {
  font-size: 0.75rem;
  color: var(--pp-text-muted, #6b7280);
  margin: 0.5rem 0 0.25rem;
  font-weight: 500;
}

/* Test request strip */
.wf-http-test-wrap {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.wf-http-test-btn { white-space: nowrap; }
.wf-http-test-status {
  font-size: 0.8125rem;
  color: var(--pp-text-muted, #6b7280);
}
.wf-http-test-status--ok { color: var(--pp-success, #16a34a); }
.wf-http-test-status--error { color: var(--pp-danger, #dc2626); }

/* AI discovery row */
.wf-http-discover-wrap {
  margin-top: 1rem;
  border-top: 1px solid var(--pp-border, #e5e7eb);
  padding-top: 1rem;
}
.wf-http-discover-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.wf-http-discover-input { flex: 1 1 auto; resize: vertical; min-height: 2.5rem; }
.wf-http-discover-btn { flex: 0 0 auto; white-space: nowrap; }
.wf-http-discover-citations {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--pp-text-muted, #6b7280);
}

/* ── Unified workflow modal: size + intent modifiers ──────────────────── */
/* Size modifiers apply to #wf-unified-modal__box and override the default
   width on both .wf-modal and .wf-modal--message. Use !important sparingly
   — here it's warranted because existing utility classes (.wf-modal--message)
   set their own max-width, and we want admin-configured size to win. */
.wf-modal--sm { max-width: 420px !important; width: 100% !important; }
.wf-modal--md { max-width: 600px !important; width: 100% !important; }
.wf-modal--lg { max-width: 880px !important; width: 100% !important; }
/* Extra large — for dashboards / dense tables that benefit from more
   horizontal room. Caps just under typical 1280px viewports so it still
   has breathing room on smaller laptops. */
.wf-modal--xl { max-width: 1200px !important; width: 100% !important; }

/* Intent (show_message): soft tinted header bar. Targets the direct h3 inside
   .wf-modal__header rather than a dedicated .wf-modal__title class. */
.wf-modal--intent-info    .wf-modal__header { background: #eff6ff; border-bottom-color: #dbeafe; }
.wf-modal--intent-info    .wf-modal__header h3 { color: #1d4ed8; }
.wf-modal--intent-success .wf-modal__header { background: #ecfdf5; border-bottom-color: #d1fae5; }
.wf-modal--intent-success .wf-modal__header h3 { color: #047857; }
.wf-modal--intent-warning .wf-modal__header { background: #fffbeb; border-bottom-color: #fde68a; }
.wf-modal--intent-warning .wf-modal__header h3 { color: #b45309; }
.wf-modal--intent-danger  .wf-modal__header { background: #fef2f2; border-bottom-color: #fecaca; }
.wf-modal--intent-danger  .wf-modal__header h3 { color: #b91c1c; }
.wf-modal--intent-danger  .wf-modal__btn--primary {
  background: #dc2626; border-color: #b91c1c;
}
.wf-modal--intent-danger  .wf-modal__btn--primary:hover:not(:disabled) {
  background: #b91c1c;
}

/* Typed confirmation gate (show_message) */
.wf-modal__confirm-gate {
  margin: 14px 24px 0;
  padding: 12px 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  font-size: 13px;
  color: #9a3412;
}
.wf-modal__confirm-gate label {
  display: block;
  margin-bottom: 6px;
}
.wf-modal__confirm-gate code {
  background: #fff;
  border: 1px solid #fed7aa;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
}
.wf-modal__confirm-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
}
.wf-modal__confirm-input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

/* Countdown badge (timeout_at) */
.wf-modal__countdown {
  display: inline-block;
  margin: 14px 24px 0;
  padding: 6px 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.01em;
}

/* Field help text */
.wf-modal__field-help {
  margin: 4px 0 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

/* Third-width field for three-up timeout row */
.wf-field--third { flex: 1; min-width: 0; }

/* Checkpoint options section in editor panels */
.wf-checkpoint-options {
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
  margin-top: 20px;
}
.wf-field__section-label {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 10px;
}
.wf-checkpoint-options__notify-details {
  margin-top: 10px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

/* Per-field validation panel */
.wf-input-field__validation-wrap {
  border-top: 1px dashed #e5e7eb;
  padding-top: 10px;
  margin-top: 6px;
}

/* ────────────────────────────────────────────────────────────
   Pending-approval alert bar (rendered below the page header on
   record show pages when the current user has a checkpoint waiting
   on them tied to that record). One bar per approval.
   ──────────────────────────────────────────────────────────── */
.pending-approval-alerts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* On pages that use negative-margin tab containers (po-show, entity-show),
   the tabs bar and panels restore the 24px gutter themselves — apply the
   same gutter to our alerts so they align with tabs + metric-strip + panels,
   and use padding (not margin) so spacing below flows naturally into the
   panel's own top padding. */
.po-show__tabs > .pending-approval-alerts,
.entity-show__tabs > .pending-approval-alerts {
  padding: 10px 24px 0;
}

.pending-approval-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  color: #92400e;
  font-size: 13px;
  line-height: 1.4;
  min-height: 36px;
}

.pending-approval-alert--overdue {
  background: #fef2f2;
  border-color: #fecaca;
  border-left-color: #ef4444;
  color: #991b1b;
}

.pending-approval-alert__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b45309;
  opacity: 0.9;
}

.pending-approval-alert__icon svg {
  width: 16px;
  height: 16px;
}

.pending-approval-alert--overdue .pending-approval-alert__icon {
  color: #b91c1c;
}

.pending-approval-alert__body {
  flex: 1 1 auto;
  min-width: 0;
}

.pending-approval-alert__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-weight: 500;
  color: inherit;
  font-size: 13px;
}

.pending-approval-alert__title strong {
  font-weight: 600;
}

.pending-approval-alert__title .link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.pending-approval-alert__sep {
  opacity: 0.45;
}

.pending-approval-alert__desc {
  margin: 1px 0 0;
  color: inherit;
  opacity: 0.8;
  font-size: 12.5px;
}

.pending-approval-alert__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pending-approval-alert__deadline {
  font-size: 11.5px;
  font-weight: 500;
  color: inherit;
  opacity: 0.8;
  white-space: nowrap;
}

.pending-approval-alert__deadline--overdue {
  color: #991b1b;
  opacity: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.pending-approval-alert__cta {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12.5px;
  line-height: 1.3;
  min-height: 26px;
}

.pending-approval-alert__cta svg {
  width: 11px;
  height: 11px;
}

/* ── "Stepping in" variant (admins viewing someone else's task) ──
   Indigo treatment so it reads as informational/admin-context, not
   "this is your task". The eyebrow + softer CTA do most of the
   communicative work; the color shift is a subtle reinforcement so
   it's distinguishable from a real assigned alert at a glance. */
.pending-approval-alert--intervene {
  background: #eef2ff;
  border-color: #c7d2fe;
  border-left-color: #4f46e5;
  color: #3730a3;
}

/* When a row is BOTH overdue AND intervene-only, overdue (red) wins
   on the left border to keep the visual urgency, but the body keeps
   the indigo background so the admin context isn't lost. */
.pending-approval-alert--intervene.pending-approval-alert--overdue {
  background: #eef2ff;
  border-color: #c7d2fe;
  border-left-color: #ef4444;
  color: #3730a3;
}

.pending-approval-alert--intervene .pending-approval-alert__icon {
  color: #4f46e5;
}

.pending-approval-alert__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4338ca;
  margin-bottom: 1px;
  opacity: 0.85;
}

.pending-approval-alert__eyebrow strong {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  color: #312e81;
}

/* Secondary-style CTA: outlined indigo rather than filled, so the
   admin's "Step in" doesn't look as prescriptive as the assignee's
   filled-blue "Respond" button. */
.pending-approval-alert__cta--intervene {
  background: #fff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

.pending-approval-alert__cta--intervene:hover {
  background: #eef2ff;
  border-color: #a5b4fc;
  color: #312e81;
}

/* Cancel link inside the alert — same low-emphasis treatment as the
   inbox card cancel. button_to wraps it in a <form>; we strip the
   form's block-level layout so it sits inline next to the CTA. */
.pending-approval-alert__cancel-form {
  margin: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.pending-approval-alert__cancel-link {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  margin: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #b91c1c;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.pending-approval-alert__cancel-link:hover {
  background: #fef2f2;
  color: #991b1b;
  text-decoration: underline;
}

.pending-approval-alert__cancel-link:focus-visible {
  outline: 2px solid #fca5a5;
  outline-offset: 1px;
}

/* ───────────────────────────────────────────────────────────────────────
   Show-message panel — collapsible sections, chips, preview, etc.
   See workflow_canvas_controller.js #renderShowMessagePanel.
   ─────────────────────────────────────────────────────────────────────── */

.wf-show-message-node { display: flex; flex-direction: column; gap: 12px; }

/* Unified interaction (Screen) node panel: stack the mini preview tile and
   the collapsible behavior/assignee/notify sections with the same rhythm
   the show_message panel uses so the sidebar feels consistent. */
.wf-interaction-node { display: flex; flex-direction: column; gap: 12px; }

/* Sticky-ish panel header with intent chips + preview button + summary */
.wf-sm-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fafbff 0%, #f1f5fb 100%);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.wf-sm-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.wf-sm-header__summary {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}
.wf-sm-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #4338ca;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, transform 0.12s ease;
}
.wf-sm-preview-btn:hover { background: #e0e7ff; transform: translateY(-1px); }

/* Intent chips (color-coded radio group) */
.wf-sm-intent-chips {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wf-sm-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}
.wf-sm-chip input { position: absolute; opacity: 0; pointer-events: none; }
.wf-sm-chip__dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
}
.wf-sm-chip:hover { background: #f8fafc; }
.wf-sm-chip.is-selected { color: #fff; box-shadow: 0 1px 2px rgba(15,23,42,0.08); }
.wf-sm-chip.is-selected .wf-sm-chip__dot { opacity: 1; background: rgba(255,255,255,0.85); }

.wf-sm-chip--info             { color: #1e40af; }
.wf-sm-chip--info.is-selected { background: #3b82f6; border-color: #3b82f6; }
.wf-sm-chip--success          { color: #166534; }
.wf-sm-chip--success.is-selected { background: #16a34a; border-color: #16a34a; }
.wf-sm-chip--warning          { color: #92400e; }
.wf-sm-chip--warning.is-selected { background: #d97706; border-color: #d97706; }
.wf-sm-chip--danger           { color: #991b1b; }
.wf-sm-chip--danger.is-selected { background: #dc2626; border-color: #dc2626; }

/* Panel-level Liquid legend */
.wf-sm-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 10px;
  font-size: 11px;
  color: #475569;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
}
.wf-sm-legend svg { color: #f59e0b; flex-shrink: 0; }

/* Collapsible section card */
.wf-sm-section {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.wf-sm-section[open] { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); }
.wf-sm-section__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  background: #f8fafc;
  transition: background 0.12s ease;
}
.wf-sm-section__summary::-webkit-details-marker { display: none; }
.wf-sm-section__summary:hover { background: #f1f5f9; }
.wf-sm-section__title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.wf-sm-section__sub {
  flex: 1;
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.wf-sm-section__chev {
  display: inline-flex;
  color: #94a3b8;
  transition: transform 0.15s ease;
}
.wf-sm-section[open] > .wf-sm-section__summary > .wf-sm-section__chev {
  transform: rotate(-180deg);
}
.wf-sm-section__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid #e2e8f0;
}

/* Indentation under a parent toggle (e.g. cancel button label under the
   "Show cancel" toggle). */
.wf-sm-indent {
  margin-top: 8px;
  margin-left: 22px;
  padding-left: 10px;
  border-left: 2px solid #e2e8f0;
}

/* Empty-state card for the block builder */
.wf-sm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 18px 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #475569;
}
.wf-sm-empty__title { font-size: 13px; font-weight: 600; color: #0f172a; }
.wf-sm-empty__sub { margin: 0 0 6px 0; font-size: 12px; color: #64748b; }
.wf-sm-empty__starters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}
.wf-sm-empty__starter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
}
.wf-sm-empty__starter:hover {
  border-color: #6366f1;
  background: #eef2ff;
  transform: translateY(-1px);
}
.wf-sm-empty__starter-label { font-size: 12px; font-weight: 600; color: #0f172a; }
.wf-sm-empty__starter-desc  { font-size: 11px; color: #64748b; }

/* Type-pill add row (replaces the type select + Add btn) */
.wf-sm-add-row {
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 4px 0;
}
.wf-sm-add-row__label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.wf-sm-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.wf-sm-type-pill__plus { font-size: 14px; line-height: 1; color: #6366f1; }
.wf-sm-type-pill:hover {
  border-color: #6366f1;
  background: #eef2ff;
  color: #4338ca;
  transform: translateY(-1px);
}

/* Block row tweaks: hover affordance on collapsed header + drag handle +
   per-type colored badge + summary preview. */
.wf-block-row__header { transition: background 0.12s ease; }
.wf-block-row:not(.is-open) > .wf-block-row__header:hover { background: #eef2ff; }
.wf-block-row__handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  cursor: grab;
  padding: 0 1px;
}
.wf-block-row__handle:hover { color: #64748b; }
.wf-block-row.is-dragging { opacity: 0.4; }
.wf-block-row.is-drop-target {
  outline: 2px solid #6366f1;
  outline-offset: -2px;
}
.wf-block-row__summary {
  flex: 1;
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  margin-left: 4px;
}

/* Per-type badge color coding so each block is visually distinct in a
   long stack. The default purple-on-violet badge is overridden per type. */
.wf-block-row--heading  .wf-block-type-badge { color: #1e40af; background: #dbeafe; }
.wf-block-row--text     .wf-block-type-badge { color: #475569; background: #e2e8f0; }
.wf-block-row--stat_row .wf-block-type-badge { color: #166534; background: #dcfce7; }
.wf-block-row--alert    .wf-block-type-badge { color: #b45309; background: #fef3c7; }
.wf-block-row--table    .wf-block-type-badge { color: #6d28d9; background: #ede9fe; }
.wf-block-row--divider  .wf-block-type-badge { color: #64748b; background: #f1f5f9; }

.wf-block-type-badge { flex: 0 0 auto; }

/* Preview overlay (separate from the runtime modal so we don't clash with
   the production wf-modal-backdrop on this page). */
.wf-sm-preview-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  /* See note on .wf-modal-backdrop — modals always sit above the side
     menu, global header, and takeover overlays. */
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: wf-sm-preview-fade 0.18s ease;
}
@keyframes wf-sm-preview-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.wf-sm-preview-backdrop > .wf-modal {
  position: relative;
  animation: wf-sm-preview-slide 0.22s ease;
  /* Reset the editor-canvas .wf-modal defaults (padding: 24px, width: 400px)
     so the preview matches the runtime modal: header/body/footer handle their
     own spacing, and the wf-modal--sm/md/lg size classes drive the width. */
  padding: 0;
  width: auto;
}
@keyframes wf-sm-preview-slide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wf-sm-preview-empty {
  margin: 0;
  padding: 20px;
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
  font-style: italic;
}
.wf-sm-preview-badge {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #fff;
  background: rgba(15, 23, 42, 0.65);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Adjust the existing add-row layout to accommodate the new label + pills */
.wf-block-add-row.wf-sm-add-row { display: flex; align-items: center; }

/* ─────────────────────────────────────────────────────────────────────
   Transform-Data: live Liquid evaluator strip
   Sits flush under each compute-field expression / aggregation row and
   shows the resolved value for the currently selected sample record.
   ───────────────────────────────────────────────────────────────────── */
.wf-tdata-kv-wrap, .wf-tdata-agg-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 8px;
}

.wf-tdata-eval {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  margin: -1px 0 0;
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: #f8fafc;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  color: #475569;
  min-height: 24px;
  overflow: hidden;
}

.wf-tdata-eval__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
}
.wf-tdata-eval[data-state="ok"]            .wf-tdata-eval__dot { background: #10b981; }
.wf-tdata-eval[data-state="empty"]         .wf-tdata-eval__dot { background: #f59e0b; }
.wf-tdata-eval[data-state="loading"]       .wf-tdata-eval__dot { background: #60a5fa; animation: wfTdataEvalPulse 1s ease-in-out infinite; }
.wf-tdata-eval[data-state="error"]         .wf-tdata-eval__dot,
.wf-tdata-eval[data-state="syntax_error"]  .wf-tdata-eval__dot,
.wf-tdata-eval[data-state="source_error"]  .wf-tdata-eval__dot { background: #ef4444; }

@keyframes wfTdataEvalPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.wf-tdata-eval__label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  flex-shrink: 0;
}
.wf-tdata-eval[data-state="error"] .wf-tdata-eval__label,
.wf-tdata-eval[data-state="syntax_error"] .wf-tdata-eval__label,
.wf-tdata-eval[data-state="source_error"] .wf-tdata-eval__label { color: #b91c1c; }

.wf-tdata-eval__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
  font-weight: 500;
}
.wf-tdata-eval[data-state="muted"] .wf-tdata-eval__value,
.wf-tdata-eval[data-state="empty"] .wf-tdata-eval__value,
.wf-tdata-eval[data-state="empty_source"] .wf-tdata-eval__value,
.wf-tdata-eval[data-state="no_record"] .wf-tdata-eval__value {
  color: #94a3b8;
  font-style: italic;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
}
.wf-tdata-eval[data-state="error"] .wf-tdata-eval__value,
.wf-tdata-eval[data-state="syntax_error"] .wf-tdata-eval__value,
.wf-tdata-eval[data-state="source_error"] .wf-tdata-eval__value {
  color: #b91c1c;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────────
   Transform-Data: quick-starter chips (empty-state for compute fields)
   ───────────────────────────────────────────────────────────────────── */
.wf-tdata-list-empty__title {
  margin-bottom: 8px;
}
.wf-tdata-starters {
  margin-top: 6px;
  font-style: normal;
}
.wf-tdata-starters__label {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wf-tdata-starters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wf-tdata-starter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.wf-tdata-starter-chip:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}
.wf-tdata-starter-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────
   Formula / filter picker (the "ƒx" chip + popover)
   ───────────────────────────────────────────────────────────────────── */
.wf-formula-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 5px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #b45309;
  cursor: pointer;
  font-family: ui-serif, "Cambria Math", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  transition: background 0.12s, border-color 0.12s;
}
.wf-formula-chip:hover {
  background: #fde68a;
  border-color: #f59e0b;
}
.wf-formula-chip__glyph {
  display: inline-block;
  letter-spacing: -0.02em;
}

.wf-formula-popup {
  display: flex;
  flex-direction: column;
  width: 380px;
  max-height: 460px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
  /* Must outrank the unified-builder takeover (z-index 2147483600).
     Without this, clicking the ƒx chip on a Liquid input inside the
     takeover inspector creates the popup but paints it underneath the
     dimmer overlay — invisible to the user and impossible to click.
     Mirrors the .wf-var-picker-popup z-index for the same reason. */
  z-index: 2147483700;
  overflow: hidden;
  font-size: 12px;
}
.wf-formula-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.wf-formula-popup__title {
  font-weight: 600;
  font-size: 12px;
  color: #0f172a;
}
.wf-formula-popup__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 4px;
}
.wf-formula-popup__close:hover { color: #1e293b; background: #e2e8f0; }

.wf-formula-popup__tabs {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
}
.wf-formula-popup__tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.wf-formula-popup__tab:hover { color: #1e293b; background: #f8fafc; }
.wf-formula-popup__tab.is-active {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
  background: #ffffff;
}

.wf-formula-popup__search {
  width: calc(100% - 16px);
  margin: 8px;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
}
.wf-formula-popup__search:focus { outline: 2px solid #93c5fd; outline-offset: -1px; border-color: #60a5fa; }

.wf-formula-popup__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 4px 8px;
}
.wf-formula-popup__group { margin-top: 4px; }
.wf-formula-popup__group-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 80%, transparent 100%);
}

.wf-formula-popup__recipe,
.wf-formula-popup__filter {
  display: flex;
  width: calc(100% - 8px);
  margin: 0 4px 2px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}
.wf-formula-popup__recipe:hover,
.wf-formula-popup__filter:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.wf-formula-popup__recipe-left,
.wf-formula-popup__filter-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
}
.wf-formula-popup__recipe-name,
.wf-formula-popup__filter-name {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
}
.wf-formula-popup__filter-name code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: #1d4ed8;
  background: transparent;
  padding: 0;
}
.wf-formula-popup__recipe-desc,
.wf-formula-popup__filter-desc {
  font-size: 11px;
  color: #64748b;
}
.wf-formula-popup__recipe-code,
.wf-formula-popup__filter-example {
  margin-top: 3px;
  padding: 3px 6px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  color: #334155;
  background: #f1f5f9;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf-formula-popup__empty {
  padding: 24px 12px;
  text-align: center;
  color: #94a3b8;
  font-style: italic;
  font-size: 12px;
}

/* ──────────────────────────────────────────────────────────────────────
   Unified Screen Builder — full-screen takeover overlay
   ──────────────────────────────────────────────────────────────────── */

.wf-builder-takeover {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.86);
  /* Sit above the app sidebar / header chrome (which use z-index up to
     ~900 in the existing layout). The controller also portals this
     element onto <body> at connect time so no ancestor stacking
     context can keep the modal painted underneath the global rail.
     The very high z-index defends against any future fixed overlays
     that try to compete; only system-level toasts should beat it. */
  z-index: 2147483600;
  display: none;
}
.wf-builder-takeover--open { display: block; }
/* When the takeover is open we lock body scroll so the workflow
   canvas underneath doesn't accept stray wheel events. */
body.wf-builder-takeover-open { overflow: hidden; }

.wf-builder-takeover__chrome {
  position: absolute;
  inset: 16px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32);
}

.wf-builder-takeover__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.wf-builder-takeover__title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}
.wf-builder-takeover__topbar-actions { display: flex; gap: 8px; }

.wf-builder-takeover__grid {
  flex: 1;
  min-height: 0;
  display: grid;
  /* Wider inspector (was 320px) to fit the tabbed table editor and the
     "Rows from list" picker without horizontal scrollbars. */
  grid-template-columns: 240px 1fr 400px;
}

/* Palette (left) */
.wf-builder-takeover__palette {
  border-right: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 16px;
  overflow-y: auto;
}
.wf-builder-palette__section + .wf-builder-palette__section { margin-top: 20px; }
.wf-builder-palette__section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 8px;
}
.wf-builder-palette__grid {
  display: grid;
  /* auto-fill with a 120px min lets pills keep 2 columns at the
     current 240px sidebar width while allowing labels like
     "Multi-select" / "Repeating rows" to wrap to 2 lines instead of
     getting clipped by ellipsis. */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}
.wf-builder-palette__pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 6px;
  cursor: grab;
  text-align: left;
  color: #1e293b;
  transition: border-color 120ms, background 120ms, box-shadow 120ms;
}
.wf-builder-palette__pill:hover {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.12);
}
.wf-builder-palette__pill:active,
.wf-builder-palette__pill--dragging { cursor: grabbing; opacity: 0.6; }

.wf-builder-palette__icon {
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
}
.wf-builder-palette__icon svg { width: 18px; height: 18px; }
.wf-builder-palette__pill:hover .wf-builder-palette__icon { color: #2563eb; }
.wf-builder-palette__label {
  flex: 1 1 auto;
  line-height: 1.2;
  overflow-wrap: break-word;
}

/* Canvas (center) */
.wf-builder-takeover__canvas {
  background: #f1f5f9;
  overflow: auto;
  padding: 24px;
}
.wf-builder-canvas__inner {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 24px;
  min-height: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wf-builder-canvas__empty {
  color: #94a3b8;
  font-style: italic;
  text-align: center;
  padding: 64px 0;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
}
.wf-builder-canvas__elements { display: flex; flex-direction: column; gap: 12px; }

/* Element wrappers */
.wf-builder-el {
  position: relative;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.wf-builder-el:hover           { border-color: #93c5fd; background: rgba(219, 234, 254, 0.4); }
.wf-builder-el--selected       { border-color: #2563eb !important; background: rgba(219, 234, 254, 0.6) !important; }
.wf-builder-el--dragging       { opacity: 0.4; }

/* Drop zones */
.wf-drop-zone {
  border: 2px dashed transparent;
  border-radius: 6px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
  padding: 8px;
  transition: all 120ms;
}
.wf-builder-canvas__drop-tail {
  border-color: #e2e8f0;
  margin-top: 12px;
}
.wf-drop-zone--active {
  border-color: #2563eb !important;
  background: #eff6ff;
  color: #2563eb;
}

/* Drag handle */
.wf-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: grab;
}
.wf-drag-handle:hover { color: #475569; }
.wf-drag-handle:active { cursor: grabbing; }

/* Inspector (right) */
.wf-builder-takeover__inspector {
  border-left: 1px solid #e2e8f0;
  background: #fff;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wf-builder-inspector__empty {
  color: #94a3b8;
  text-align: center;
  font-style: italic;
  padding: 32px 0;
}
.wf-builder-inspector__heading {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 8px;
}
.wf-builder-inspector__hint {
  color: #64748b;
  font-size: 12px;
  font-style: italic;
}
.wf-builder-inspector__tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 8px;
}
.wf-builder-inspector__tab {
  background: none;
  border: 0;
  padding: 6px 10px;
  font-size: 12px;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.wf-builder-inspector__tab.is-active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}
.wf-builder-inspector__pane { display: flex; flex-direction: column; gap: 10px; }

/* Tabbed legacy editor — used by the table inspector to break the long
   single-column form (caption, source, columns, pagination, transforms,
   row tones, ...) into a small set of named tabs so the inspector
   doesn't feel like a wall of fields. */
.wf-builder-inspector__legacy-table { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.wf-builder-inspector__legacy-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
}
.wf-builder-inspector__legacy-tab {
  background: none;
  border: 0;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.wf-builder-inspector__legacy-tab:hover { color: #334155; }
.wf-builder-inspector__legacy-tab.is-active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}
.wf-builder-inspector__legacy-panes { padding-top: 6px; }
.wf-builder-inspector__legacy-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* When the legacy table carrier is mounted as an inspector pane (the
   new tabbed-via-inspector flow), strip the wrapping chrome so it
   visually melts into the inspector. The four panes are descendants
   of the inner .wf-block-row (so the collector's per-row queries
   keep working) and the inspector tab strip drives which one is
   visible. */
.wf-builder-table-host.wf-builder-inspector__pane {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wf-builder-table-host > .wf-block-row {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wf-builder-table-host > .wf-block-row > .wf-block-row__body { display: none !important; }
.wf-builder-table-host > .wf-block-row > .wf-block-type-badge { display: none !important; }
/* ── DEPRECATED inspector field tokens ────────────────────────────────
   These rules predate the unified `.wf-field*` family (see
   .cursor/rules/workflow-field-primitives.mdc). New code MUST emit
   `.wf-field`, `.wf-field__label`, `.wf-field__input`, `.wf-field__hint`
   instead. The rules below are kept ONLY because:

   • The compact grid editors (table/option/list/stat rows) still use
     `.wf-builder-inspector__input` for cells where the larger
     `.wf-field__input` baseline would overflow the grid.
   • A handful of legacy markup paths in show_message templates may
     still emit the older field/check classes; removing the rules
     would visually break those without a coordinated sweep.

   Don't add new emissions of these classes. When refactoring an editor
   that uses them, switch to the canonical tokens. The whole block
   below should be deletable once nothing emits it. */
.wf-builder-inspector__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.wf-builder-inspector__field--check { flex-direction: row; align-items: center; gap: 6px; }
.wf-builder-inspector__field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.wf-builder-inspector__input {
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  width: 100%;
}
.wf-builder-inspector__input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
/* ── end deprecated block ───────────────────────────────────────────── */
.wf-builder-inspector__options-list { display: flex; flex-direction: column; gap: 4px; }
.wf-builder-inspector__option-row {
  display: grid;
  grid-template-columns: 1fr 1fr 24px;
  gap: 4px;
  align-items: center;
}
.wf-builder-inspector__option-del {
  background: none;
  border: 0;
  color: #ef4444;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.wf-builder-inspector__option-add {
  margin-top: 4px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  color: #475569;
  cursor: pointer;
}
.wf-builder-inspector__actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}

/* Generic interaction layout primitives — used by both runtime and builder */
.wf-int--columns { display: grid; gap: 16px; }
.wf-int--section { padding: 8px; border: 1px dashed #e2e8f0; border-radius: 6px; }
.wf-int--column  { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.wf-int__section-title { font-size: 13px; font-weight: 600; color: #0f172a; margin: 0 0 4px; }
.wf-int__section-desc  { color: #64748b; font-size: 12px; margin: 0 0 8px; }

/* ── Builder: modal preview frame ─────────────────────────────────── */
/* The canvas pane wraps the user's element tree in a faux modal frame
   so designers see the actual chrome (header / footer / proceed
   button) the end user will see at runtime. Clicking on the frame's
   whitespace clears element selection and pops up the modal-settings
   inspector pane. */
.wf-builder-stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100%;
  padding: 24px 0;
}
.wf-builder-modal {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  width: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer; /* hints clickable whitespace = open modal settings */
}
.wf-builder-modal--small  { max-width: 420px; }
.wf-builder-modal--medium { max-width: 640px; }
.wf-builder-modal--large  { max-width: 880px; }
.wf-builder-modal--xlarge { max-width: 1100px; }

/* Match the runtime modal header chrome (padding, border, title size) so
   the in-builder preview is byte-for-byte the same shape as what users
   will eventually see at runtime. */
.wf-builder-modal__header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}
.wf-builder-modal__title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
}
.wf-builder-modal__title--placeholder { color: #94a3b8; font-style: italic; font-weight: 500; }
.wf-builder-modal__desc { color: #64748b; font-size: 13px; margin: 6px 0 0; }

.wf-builder-modal__body {
  padding: 16px 20px;
  flex: 1 1 auto;
  cursor: default; /* body elements aren't whitespace */
}

.wf-builder-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.wf-builder-modal__btn {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
}
.wf-builder-modal__btn--ghost   { background: #fff; border-color: #cbd5e1; color: #334155; }
.wf-builder-modal__btn--primary { background: #2563eb; color: #fff; }

/* Tweak: in the modal preview, the existing canvas-elements styles
   provide the actual element layout. We zero out the redundant inner
   white box that wf-builder-canvas__inner used to draw. */
.wf-builder-modal__body .wf-builder-canvas__elements { gap: 12px; }

/* ── Builder: drop slots between siblings ─────────────────────────── */
/* Idle slots are razor-thin so the canvas reads like the runtime modal;
   they expand into a clearly-visible drop bar only while a drag is
   in progress (and grow further when actively hovered). The parent
   flex `gap` provides the everyday breathing room between elements. */
.wf-builder-slot {
  height: 2px;
  border-radius: 3px;
  margin: 0;
  background: transparent;
  transition: background 120ms, height 120ms, border-color 120ms, margin 120ms;
  border: 1px dashed transparent;
}
.wf-builder-canvas__elements--dragging .wf-builder-slot {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.4);
  height: 28px;
  margin: 4px 0;
}
.wf-builder-slot--active {
  background: rgba(37, 99, 235, 0.18) !important;
  border-color: #2563eb !important;
  height: 44px !important;
  margin: 6px 0 !important;
}
/* When a slot is the only child of an empty container, show a friendly
   "Drop here" affordance even when no drag is in progress. */
.wf-builder-slot--empty-host {
  height: 60px;
  background: #f8fafc;
  border-color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #94a3b8;
}
.wf-builder-slot--empty-host::before { content: "Drop content here"; }
/* The tighter, runtime-matched spacing between sibling elements. */
.wf-builder-modal__body .wf-builder-canvas__elements { gap: 12px; }
.wf-int--column .wf-builder-canvas__elements { gap: 8px; }

/* ── Builder: column cells ────────────────────────────────────────── */
.wf-builder-el--column {
  border: 1px dashed #cbd5e1;
  background: #fafbfc;
  padding: 8px;
  border-radius: 6px;
  cursor: default;
  min-height: 80px;
}
.wf-builder-el--column:hover { border-color: #cbd5e1; background: #fafbfc; } /* skip the blue hover halo */
.wf-builder-column__tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 6px;
}
/* Existing canvas-elements gap rule already spaces nested elements;
   columns get a smaller intra-column gap so multiple items stack
   tightly. */
.wf-int--column .wf-builder-canvas__elements,
.wf-int__column-children { display: flex; flex-direction: column; gap: 6px; }

/* ── Builder: modal intent variations ─────────────────────────────── */
/* Tints the proceed button + a thin top accent on the modal frame so
   designers can see the visual difference between info/success/
   warning/danger intents at a glance from the preview canvas.
   Matches the runtime modal's intent palette so what you build is
   what users see. */
/* Mirror the runtime modal's intent palette exactly: tint the header
   background + title color per intent, plus the primary button. The
   thin top accent + leading dot are builder-only flourishes that
   help designers see the intent at-a-glance from the canvas. */
.wf-builder-modal--intent-info    { border-top: 3px solid #2563eb; }
.wf-builder-modal--intent-success { border-top: 3px solid #16a34a; }
.wf-builder-modal--intent-warning { border-top: 3px solid #d97706; }
.wf-builder-modal--intent-danger  { border-top: 3px solid #dc2626; }
.wf-builder-modal--intent-info    .wf-builder-modal__header { background: #eff6ff; border-bottom-color: #dbeafe; }
.wf-builder-modal--intent-info    .wf-builder-modal__title  { color: #1d4ed8; }
.wf-builder-modal--intent-success .wf-builder-modal__header { background: #ecfdf5; border-bottom-color: #d1fae5; }
.wf-builder-modal--intent-success .wf-builder-modal__title  { color: #047857; }
.wf-builder-modal--intent-warning .wf-builder-modal__header { background: #fffbeb; border-bottom-color: #fde68a; }
.wf-builder-modal--intent-warning .wf-builder-modal__title  { color: #b45309; }
.wf-builder-modal--intent-danger  .wf-builder-modal__header { background: #fef2f2; border-bottom-color: #fecaca; }
.wf-builder-modal--intent-danger  .wf-builder-modal__title  { color: #b91c1c; }
.wf-builder-modal--intent-info    .wf-builder-modal__btn--primary { background: #2563eb; }
.wf-builder-modal--intent-success .wf-builder-modal__btn--primary { background: #16a34a; }
.wf-builder-modal--intent-warning .wf-builder-modal__btn--primary { background: #d97706; }
.wf-builder-modal--intent-danger  .wf-builder-modal__btn--primary { background: #dc2626; }
/* Note: the colored ::before "intent dot" used to live on the title,
   but the colored header tint already conveys the intent (matching
   the runtime modal's chrome) so the dot was redundant visual noise.
   The thin border-top accent above + the tinted header alone are
   enough. */
/* Tint the contenteditable hover/focus haze to match the active intent
   so the rectangle behind the title doesn't flash bright blue when the
   modal is e.g. warning/danger. */
.wf-builder-modal--intent-success .wf-builder-modal__title[contenteditable]:hover,
.wf-builder-modal--intent-success .wf-builder-modal__desc[contenteditable]:hover  { background: rgba(22, 163, 74, 0.08); }
.wf-builder-modal--intent-success .wf-builder-modal__title[contenteditable]:focus,
.wf-builder-modal--intent-success .wf-builder-modal__desc[contenteditable]:focus  { background: rgba(22, 163, 74, 0.12); box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2); }
.wf-builder-modal--intent-warning .wf-builder-modal__title[contenteditable]:hover,
.wf-builder-modal--intent-warning .wf-builder-modal__desc[contenteditable]:hover  { background: rgba(217, 119, 6, 0.08); }
.wf-builder-modal--intent-warning .wf-builder-modal__title[contenteditable]:focus,
.wf-builder-modal--intent-warning .wf-builder-modal__desc[contenteditable]:focus  { background: rgba(217, 119, 6, 0.12); box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2); }
.wf-builder-modal--intent-danger  .wf-builder-modal__title[contenteditable]:hover,
.wf-builder-modal--intent-danger  .wf-builder-modal__desc[contenteditable]:hover  { background: rgba(220, 38, 38, 0.08); }
.wf-builder-modal--intent-danger  .wf-builder-modal__title[contenteditable]:focus,
.wf-builder-modal--intent-danger  .wf-builder-modal__desc[contenteditable]:focus  { background: rgba(220, 38, 38, 0.12); box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2); }

/* Editable modal title / help text / button labels in the preview.
   Show a subtle dotted underline on focus and a placeholder when
   empty, otherwise look identical to the runtime modal. */
.wf-builder-modal__title[contenteditable],
.wf-builder-modal__desc[contenteditable] {
  cursor: text;
  outline: none;
  border-radius: 4px;
  padding: 2px 4px;
  margin-left: -4px;
  transition: background 120ms;
}
.wf-builder-modal__title[contenteditable]:hover,
.wf-builder-modal__desc[contenteditable]:hover { background: rgba(37, 99, 235, 0.06); }
.wf-builder-modal__title[contenteditable]:focus,
.wf-builder-modal__desc[contenteditable]:focus { background: rgba(37, 99, 235, 0.10); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }
.wf-builder-modal__title--placeholder::before,
.wf-builder-modal__desc--placeholder::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  font-style: italic;
}
.wf-builder-modal__title--placeholder,
.wf-builder-modal__desc--placeholder { color: transparent; }
.wf-builder-modal__title--placeholder::before { font-style: italic; font-weight: 500; }
/* Hide the placeholder once the contenteditable is focused so the
   caret doesn't sit awkwardly behind the placeholder text. */
.wf-builder-modal__title--placeholder:focus::before,
.wf-builder-modal__desc--placeholder:focus::before { content: ""; }
.wf-builder-modal__title--placeholder:focus,
.wf-builder-modal__desc--placeholder:focus { color: #0f172a; }

.wf-builder-modal__btn[contenteditable] {
  cursor: text;
  outline: none;
  min-width: 60px;
}
.wf-builder-modal__btn[contenteditable]:focus { box-shadow: 0 0 0 2px rgba(255,255,255,0.6) inset; }

/* The drop slot styles live above (search ".wf-builder-slot {") so we
   keep a single source of truth for slot sizing/affordance. */
.wf-builder-canvas__elements--dragging .wf-builder-slot--empty-host {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.45);
  color: #1e3a8a;
}

/* ── Builder: per-element hover toolbar (top-right) ───────────────── */
.wf-builder-el { position: relative; }
.wf-builder-el__toolbar {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  gap: 4px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 2px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  z-index: 5;
}
.wf-builder-el:hover > .wf-builder-el__toolbar,
.wf-builder-el--selected > .wf-builder-el__toolbar { display: inline-flex; }
.wf-builder-el__toolbar-btn {
  background: transparent;
  border: 0;
  padding: 4px;
  border-radius: 4px;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wf-builder-el__toolbar-btn:hover { background: #eef2ff; color: #1e3a8a; }
.wf-builder-el__toolbar-btn--delete:hover { background: #fee2e2; color: #b91c1c; }

/* ── Builder: variable-picker button next to inspector inputs ─────
   Mirrors the legacy `.wf-input-with-picker__btn` aesthetic (small,
   pinned to the right edge of the input, soft slate look) so the
   button reads as a native part of the input rather than a floating
   chip. */
.wf-builder-inspector__input-row {
  position: relative;
  display: block;
}
.wf-builder-inspector__input-row .wf-builder-inspector__input {
  width: 100%;
  padding-right: 32px;
}
.wf-builder-inspector__picker-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  z-index: 1;
}
.wf-builder-inspector__picker-btn:hover {
  background: #e2e8f0;
  color: #334155;
}
.wf-builder-inspector__picker-btn svg { width: 13px; height: 13px; }

/* ── Builder: table editor ────────────────────────────────────────── */
.wf-builder-inspector__table-editor { display: flex; flex-direction: column; gap: 6px; }
.wf-builder-inspector__table-headers { display: flex; flex-direction: column; gap: 4px; }
.wf-builder-inspector__table-header-row {
  display: grid;
  grid-template-columns: 1fr 24px;
  gap: 4px;
  align-items: center;
}
.wf-builder-inspector__table-rows { display: flex; flex-direction: column; gap: 4px; }
.wf-builder-inspector__table-row {
  display: grid;
  gap: 4px;
  align-items: center;
}
.wf-builder-inspector__option-row--single {
  grid-template-columns: 1fr 24px;
}

/* ── Canvas sidebar: mini modal preview tile (replaces the
   "Edit screen layout" black button) ─────────────────────────────── */
.wf-screen-preview-field { margin-bottom: 12px; }
.wf-screen-preview-tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.wf-screen-preview {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: box-shadow 120ms, border-color 120ms;
}
.wf-screen-preview-tile:hover .wf-screen-preview {
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
}
.wf-screen-preview--intent-info    { border-top: 2px solid #2563eb; }
.wf-screen-preview--intent-success { border-top: 2px solid #16a34a; }
.wf-screen-preview--intent-warning { border-top: 2px solid #d97706; }
.wf-screen-preview--intent-danger  { border-top: 2px solid #dc2626; }
.wf-screen-preview__head {
  padding: 8px 10px 6px;
  border-bottom: 1px solid #f1f5f9;
}
.wf-screen-preview__title {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-screen-preview__title--placeholder { color: #94a3b8; font-style: italic; font-weight: 500; }
.wf-screen-preview__desc {
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-screen-preview__body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 60px;
}
/* Live preview surface: hosts the actual interaction renderer output
   inside the small sidebar tile. We scale the rendered tree down so
   it fits in the tile, lock interactions away with pointer-events,
   and clip overflow so wide tables/columns don't escape the card. */
.wf-screen-preview__live {
  position: relative;
  overflow: hidden;
  width: 100%;
  pointer-events: none;
  user-select: none;
}
.wf-screen-preview__live-inner {
  transform: scale(0.6);
  transform-origin: top left;
  width: calc(100% / 0.6);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Soften any inputs the renderer mounts so they read like a preview
   rather than something the designer would try to type into. */
.wf-screen-preview__live-inner input,
.wf-screen-preview__live-inner textarea,
.wf-screen-preview__live-inner select,
.wf-screen-preview__live-inner button { pointer-events: none; }
.wf-screen-preview__row {
  font-size: 10px;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 3px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-screen-preview__row.is-divider {
  height: 1px;
  background: #e2e8f0;
  border: 0;
  padding: 0;
  margin: 2px 0;
}
.wf-screen-preview__row--input-text,
.wf-screen-preview__row--input-textarea,
.wf-screen-preview__row--input-number,
.wf-screen-preview__row--input-email,
.wf-screen-preview__row--input-url,
.wf-screen-preview__row--input-date,
.wf-screen-preview__row--input-time,
.wf-screen-preview__row--input-datetime,
.wf-screen-preview__row--input-select,
.wf-screen-preview__row--input-multi-select,
.wf-screen-preview__row--input-radio,
.wf-screen-preview__row--input-boolean { background: #eef2ff; border-color: #c7d2fe; color: #1e3a8a; }
.wf-screen-preview__empty {
  font-size: 10px;
  color: #94a3b8;
  font-style: italic;
  text-align: center;
  padding: 14px 0;
}
.wf-screen-preview__more {
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
}
.wf-screen-preview__foot {
  padding: 6px 10px 8px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  background: #fafbfc;
}
.wf-screen-preview__btn {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  pointer-events: none;
}
.wf-screen-preview__btn--ghost   { background: #fff; border-color: #cbd5e1; color: #334155; }
.wf-screen-preview__btn--primary { background: #2563eb; color: #fff; }
.wf-screen-preview--intent-success .wf-screen-preview__btn--primary { background: #16a34a; }
.wf-screen-preview--intent-warning .wf-screen-preview__btn--primary { background: #d97706; }
.wf-screen-preview--intent-danger  .wf-screen-preview__btn--primary { background: #dc2626; }

.wf-screen-preview__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 140ms;
  pointer-events: none;
}
.wf-screen-preview-tile:hover .wf-screen-preview__overlay { opacity: 1; }
.wf-screen-preview__edit-btn {
  background: #fff;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
}

/* ── Workflow interaction: input_file (drop zone + uploaded file list) ── */
.wf-modal__file-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf-modal__file-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  text-align: center;
}
.wf-modal__file-zone:hover,
.wf-modal__file-zone.is-drag-over {
  border-color: #6366f1;
  background: #eef2ff;
}
.wf-modal__file-zone--preview {
  border-style: dotted;
  background: #fafafa;
}
.wf-modal__file-zone-preview-note {
  font-size: 11px;
  font-style: italic;
  color: #94a3b8;
  margin-top: 2px;
}
.wf-modal__file-row.is-preview {
  opacity: 0.85;
}
.wf-modal__file-row.is-preview .wf-modal__file-row-name::after {
  content: " (preview)";
  color: #94a3b8;
  font-style: italic;
}
.wf-modal__file-zone-icon {
  color: #6366f1;
}
.wf-modal__file-zone-caption {
  font-size: 13px;
  font-weight: 500;
}
.wf-modal__file-zone-accept {
  font-size: 11px;
  color: #64748b;
}
.wf-modal__file-native {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.wf-modal__file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wf-modal__file-row {
  display: grid;
  grid-template-columns: 1fr auto 120px 28px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f1f5f9;
  border-radius: 6px;
  font-size: 12px;
}
.wf-modal__file-row.is-error {
  background: #fef2f2;
  color: #b91c1c;
}
.wf-modal__file-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.wf-modal__file-row-size {
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.wf-modal__file-row-progress {
  height: 4px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.wf-modal__file-row-progress.is-done .wf-modal__file-row-bar {
  background: #10b981;
}
.wf-modal__file-row-bar {
  height: 100%;
  width: 0%;
  background: #6366f1;
  transition: width 200ms linear;
}
.wf-modal__file-row-remove {
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.wf-modal__file-row-remove:hover { color: #ef4444; }
.wf-modal__file-row-error {
  grid-column: 1 / -1;
  font-size: 11px;
}

/* ── Workflow interaction: input_audio (mic + transcript textarea) ── */
.wf-modal__audio-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf-modal__audio-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wf-modal__audio-mic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: border-color 150ms, background 150ms, color 150ms, box-shadow 150ms;
  flex-shrink: 0;
}
.wf-modal__audio-mic-btn:hover {
  border-color: #6366f1;
  color: #6366f1;
}
.wf-modal__audio-mic-btn.is-recording {
  border-color: #ef4444;
  background: #fef2f2;
  color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
  animation: wf-audio-pulse 1.2s ease-in-out infinite;
}
@keyframes wf-audio-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
  50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.08); }
}
.wf-modal__audio-mic-btn svg {
  width: 20px;
  height: 20px;
}
.wf-modal__audio-status {
  font-size: 13px;
  color: #64748b;
}
.wf-modal__audio-transcript {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}
.wf-modal__audio-transcript:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.wf-modal__audio-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
}
.wf-modal__audio-mic-icon {
  display: inline-flex;
  color: #6366f1;
}
.wf-modal__audio-mic-icon svg {
  width: 20px;
  height: 20px;
}
.wf-modal__audio-preview-label {
  font-size: 13px;
  font-weight: 500;
}

/* Builder inspector: accept-list chips + presets for input_file */
.wf-builder-inspector__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.wf-builder-inspector__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 8px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wf-builder-inspector__chip-remove {
  border: 0;
  background: transparent;
  color: #4338ca;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 2px;
}
.wf-builder-inspector__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  align-items: center;
}
.wf-builder-inspector__row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.wf-builder-inspector__row .wf-builder-inspector__input { flex: 1; }

/* Builder inspector: curated file-type checkbox list for input_file */
.wf-builder-inspector__file-categories {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.wf-builder-inspector__checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #1f2937;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.wf-builder-inspector__checkbox-row:hover { background: #f3f4f6; }
.wf-builder-inspector__checkbox-row input[type="checkbox"] { margin: 0; }
.wf-builder-inspector__checkbox-label { line-height: 1.3; }

/* ── AI helper chip ─────────────────────────────────────────────
   Third pill button (next to Action / Condition) that opens a
   natural-language composer. Violet-tinted so users can tell at a
   glance it's the AI affordance, not another manual option. */
.fl-pill__btn--ai {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(99, 102, 241, 0.9));
  color: #fff;
  font-weight: 600;
}
.fl-pill__btn--ai:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 1), rgba(99, 102, 241, 1));
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25);
}
.fl-pill__btn--ai svg { fill: #fff; }

/* ── AI-pending card state ──────────────────────────────────────
   Nodes the AI helper just generated but the user hasn't accepted
   yet. A dashed violet border + subtle tint signals "this isn't
   permanent yet". A small "AI" ribbon in the top-right corner makes
   the origin obvious. */
.fl-card-wrap--ai-pending { position: relative; }
.fl-card--ai-pending {
  border: 2px dashed #a78bfa !important;
  background: linear-gradient(180deg, #f5f3ff 0%, #faf5ff 100%) !important;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.12) !important;
  position: relative;
}
.fl-card--ai-pending::after {
  content: "AI";
  position: absolute;
  top: -10px;
  right: 12px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}

/* ── AI composer popover ────────────────────────────────────────
   Floating panel anchored near the pill that was clicked. Fixed
   position so it sits on top of the canvas regardless of scroll /
   pan offset. */
.fl-ai-composer {
  position: fixed;
  z-index: 1200;
  width: 360px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.18), 0 4px 10px rgba(17, 24, 39, 0.08);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: inherit;
  color: #111827;
}
.fl-ai-composer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fl-ai-composer__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4c1d95;
}
.fl-ai-composer__title svg { width: 14px; height: 14px; fill: #7c3aed; }
.fl-ai-composer__close {
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fl-ai-composer__close:hover { background: #f3f4f6; color: #111827; }
.fl-ai-composer__input {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: #111827;
  background: #fafafa;
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.fl-ai-composer__input:focus {
  border-color: #8b5cf6;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}
.fl-ai-composer__input:disabled { opacity: 0.6; cursor: not-allowed; }
.fl-ai-composer__hint {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}
.fl-ai-composer__error {
  font-size: 12px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 6px 10px;
}
.fl-ai-composer__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.fl-ai-composer__cancel,
.fl-ai-composer__submit {
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.fl-ai-composer__cancel {
  background: #f3f4f6;
  color: #374151;
}
.fl-ai-composer__cancel:hover { background: #e5e7eb; }
.fl-ai-composer__cancel:disabled { opacity: 0.5; cursor: not-allowed; }
.fl-ai-composer__submit {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #ffffff;
}
.fl-ai-composer__submit:hover { box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); }
.fl-ai-composer__submit:disabled {
  background: #c4b5fd;
  cursor: wait;
  box-shadow: none;
}

/* ── AI composer progress UI ────────────────────────────────────
   Shown inside the composer popover after the user clicks Generate.
   Replaces the textarea + actions block with a phase message,
   determinate progress bar, elapsed timer and Cancel button.
   Works in tandem with the polling status endpoint —
   `wf_canvas_controller#submitAiComposer`. */
.fl-ai-progress {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 0;
}
.fl-ai-progress__heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #4338ca;
}
.fl-ai-progress__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #e0e7ff;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: fl-ai-progress-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes fl-ai-progress-spin {
  to { transform: rotate(360deg); }
}
.fl-ai-progress__message {
  font-size: 12px;
  color: #374151;
  min-height: 16px;
  line-height: 1.4;
}
.fl-ai-progress__bar {
  position: relative;
  height: 6px;
  background: #ede9fe;
  border-radius: 999px;
  overflow: hidden;
}
.fl-ai-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
  border-radius: 999px;
  transition: width 0.4s ease;
}
/* Indeterminate shimmer used while we're still waiting for the
   first phase update from the server (queued in Sidekiq). */
.fl-ai-progress__bar--indeterminate .fl-ai-progress__fill {
  width: 35%;
  animation: fl-ai-progress-shimmer 1.4s ease-in-out infinite;
}
@keyframes fl-ai-progress-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(285%); }
}
.fl-ai-progress__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #6b7280;
}
.fl-ai-progress__cancel {
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: #6b7280;
  cursor: pointer;
}
.fl-ai-progress__cancel:hover { background: #f9fafb; color: #374151; }
.fl-ai-progress__cancel:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── AI preview sticky bar ──────────────────────────────────────
   Appears above the canvas when one or more AI-generated nodes are
   staged. Clicking Accept keeps them as normal nodes; Discard
   reverts the splice. */
.fl-ai-preview-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #ede9fe, #e0e7ff);
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  margin: 10px 14px 6px;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.15);
  color: #1e1b4b;
  font-size: 13px;
}
/* When the right-hand node settings panel is open it's `position: fixed`
   over the canvas (510px wide). Without this rule the AI preview bar
   spans the full canvas width — visually correct on its own, but it
   slips UNDER the panel and partially obscures the topmost sidebar
   fields (label input, output banner). Push the bar's right edge in
   by the panel width so it never overlaps the sidebar. */
.wf-canvas:has(.wf-panel:not(.is-hidden)) .fl-ai-preview-bar {
  margin-right: 524px; /* 510 panel width + 14 existing inset */
}
.fl-ai-preview-bar__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.fl-ai-preview-bar__label svg { width: 14px; height: 14px; fill: #6d28d9; }
.fl-ai-preview-bar__actions { display: inline-flex; gap: 8px; }
.fl-ai-preview-bar__btn {
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}
.fl-ai-preview-bar__btn--discard {
  background: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
}
.fl-ai-preview-bar__btn--discard:hover { background: #f9fafb; color: #111827; }
.fl-ai-preview-bar__btn--accept {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #ffffff;
}
.fl-ai-preview-bar__btn--accept:hover { box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); }


/* ====================================================================
   Dashboard builder + runtime
   ==================================================================== */

/* The dashboard editor reuses `body[data-workflow-builder]` to drop
   the global rail/header/gutter (see line ~8322). The builder root
   itself fills the remaining viewport so everything scrolls inside
   the three-pane layout instead of in the page chrome. */
.page-builder {
  display: grid;
  /* Topbar row keeps its 56px baseline for the common (title + description)
     case but grows to fit a third line — e.g. the "From: <app>" badge on
     AI/app-built forms & pages — instead of clipping it off the top. */
  grid-template-rows: minmax(56px, auto) 1fr;
  height: 100vh;
  min-height: 0;
  background: #f8fafc;
}

/* Topbar — modeled on `.wf-header` ---------------------------------- */
.page-builder__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  gap: 12px;
  min-width: 0;
}
.page-builder__topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.page-builder__topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.page-builder__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #64748b;
  text-decoration: none;
  flex-shrink: 0;
}
.page-builder__back:hover { background: #f1f5f9; color: #0f172a; }

.page-builder__title-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.page-builder__title-display {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  outline: none;
  border-radius: 4px;
  padding: 2px 6px;
  margin: -2px -6px;
  cursor: text;
  min-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.page-builder__title-display:hover { background: #f1f5f9; }
.page-builder__title-display:focus { background: #fff; box-shadow: 0 0 0 2px rgba(99,102,241,0.18); }

.page-builder__desc-display {
  font-size: 12px;
  color: #64748b;
  outline: none;
  border-radius: 4px;
  padding: 1px 6px;
  margin: 0 -6px;
  cursor: text;
  min-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.page-builder__desc-display:hover { background: #f1f5f9; }
.page-builder__desc-display:focus { background: #fff; box-shadow: 0 0 0 2px rgba(99,102,241,0.18); }
.page-builder__desc-display:empty::before {
  content: attr(data-placeholder);
  color: #cbd5e1;
  font-style: italic;
}

.wf-header__btn--danger {
  background: #fff;
  color: #b91c1c;
  border-color: #fecaca;
}
.wf-header__btn--danger:hover { background: #fef2f2; border-color: #f87171; }

/* Three-pane layout ------------------------------------------------- */
.page-builder__layout {
  display: grid;
  grid-template-columns: 220px 1fr 380px;
  min-height: 0;
  overflow: hidden;
}
.page-builder__sidebar {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.page-builder__sidebar-section {
  padding: 16px;
  overflow-y: auto;
  min-height: 0;
}
/* Palette flexes to take up the available vertical space; outline
 * caps at ~45% and scrolls so deep trees don't push the palette
 * off-screen. */
.page-builder__sidebar-section:first-child { flex: 1 1 auto; }
.page-builder__sidebar-section--outline {
  flex: 0 1 auto;
  max-height: 45%;
  border-top: 1px solid #e2e8f0;
  background: #f1f5f9;
}
.page-builder__canvas-wrap {
  background: #f1f5f9;
  overflow: auto;
  padding: 24px;
  min-width: 0;
}
.page-builder__canvas-inner {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
  min-height: calc(100vh - 56px - 48px);
}
.page-builder__canvas {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-builder__empty-canvas {
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  color: #94a3b8;
  padding: 64px 32px;
  text-align: center;
  font-style: italic;
}

/* Inspector sidebar (right) — mirrors wf-builder-takeover__inspector */
.page-builder__inspector {
  border-left: 1px solid #e2e8f0;
  background: #fff;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Palette ----------------------------------------------------------- */
.page-palette__group { margin-bottom: 20px; }
.page-palette__group-title {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 8px;
  letter-spacing: 0.06em;
}
.page-palette__pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
  cursor: grab;
  font-size: 13px;
  user-select: none;
  color: #1e293b;
  transition: border-color 120ms, background 120ms, box-shadow 120ms;
}
.page-palette__pill:hover {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.12);
}
.page-palette__pill:active { cursor: grabbing; opacity: 0.6; }
.page-palette__icon { display: inline-flex; width: 18px; height: 18px; color: #475569; }
.page-palette__icon svg { width: 100%; height: 100%; }
.page-palette__pill:hover .page-palette__icon { color: #2563eb; }
.page-palette__label { font-weight: 500; flex: 1; }

/* Outline / Layers tree ------------------------------------------ */
.page-outline__empty {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  padding: 4px 0;
}
.page-outline__tree {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-outline__tree .page-outline__tree {
  margin: 0;
  padding: 0;
  /* Subtle guide line so authors can read the parent/child
   * relationship at a glance. */
  border-left: 1px dashed rgba(148, 163, 184, 0.45);
  margin-left: 14px;
}
.page-outline__node { margin: 0; }
.page-outline__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  color: #1e293b;
  transition: background-color 100ms ease, color 100ms ease;
}
.page-outline__row:hover { background: rgba(148, 163, 184, 0.18); }
.page-outline__row.is-selected {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 500;
}
.page-outline__icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: #475569;
  flex: 0 0 auto;
}
.page-outline__icon svg { width: 100%; height: 100%; }
.page-outline__row.is-selected .page-outline__icon { color: #1d4ed8; }
.page-outline__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-outline__actions {
  display: none;
  gap: 2px;
  flex: 0 0 auto;
}
.page-outline__row:hover .page-outline__actions,
.page-outline__row.is-selected .page-outline__actions { display: inline-flex; }
.page-outline__actions button {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 2px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  color: #64748b;
  cursor: pointer;
}
.page-outline__actions button:hover { background: rgba(255, 255, 255, 0.7); color: #0f172a; }
.page-outline__actions button.is-danger:hover { background: #fef2f2; color: #b91c1c; }

/* Selection breadcrumb (above canvas) --------------------------- */
.page-builder__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 auto 8px;
  max-width: 1100px;
  font-size: 12px;
  color: #475569;
  min-height: 26px;
  padding: 4px 0;
}
.page-builder__breadcrumb.is-empty {
  display: none;
}
.page-builder__breadcrumb-segment {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 2px 6px;
  border-radius: 4px;
  font: inherit;
  color: #2563eb;
  cursor: pointer;
  transition: background-color 100ms ease;
}
.page-builder__breadcrumb-segment:hover { background: #eff6ff; }
.page-builder__breadcrumb-segment.is-current {
  color: #0f172a;
  cursor: default;
  font-weight: 500;
}
.page-builder__breadcrumb-segment.is-current:hover { background: transparent; }
.page-builder__breadcrumb-segment--root {
  color: #64748b;
}
.page-builder__breadcrumb-sep {
  color: #cbd5e1;
  font-size: 13px;
  user-select: none;
}

/* Right-click context menu (canvas elements) ------------------- */
.page-builder__ctx-menu {
  position: fixed;
  z-index: 2147483640;
  min-width: 180px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08);
  padding: 4px;
  font-size: 13px;
  color: #1e293b;
  user-select: none;
}
.page-builder__ctx-item {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  line-height: 1.3;
  transition: background-color 100ms ease, color 100ms ease;
}
.page-builder__ctx-item:hover:not(:disabled) { background: #f1f5f9; }
.page-builder__ctx-item:disabled { color: #cbd5e1; cursor: not-allowed; }
.page-builder__ctx-item.is-danger:hover:not(:disabled) { background: #fef2f2; color: #b91c1c; }
.page-builder__ctx-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #64748b;
}
.page-builder__ctx-item:hover:not(:disabled) .page-builder__ctx-icon { color: #1e293b; }
.page-builder__ctx-item.is-danger:hover:not(:disabled) .page-builder__ctx-icon { color: #b91c1c; }
.page-builder__ctx-label { flex: 1 1 auto; }
.page-builder__ctx-sep {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 0;
}

/* Drop zone slots inside the canvas --------------------------------
 *
 * Two modes:
 *   • IDLE      → slots collapse to zero so they take no layout
 *                 space at all. The user sees the canvas at the same
 *                 spacing it has on the live `dashboards/show` page.
 *   • DRAGGING  → `.lc-dragging` is added to the layout root by
 *                 `attachDnd` for the duration of any element- or
 *                 palette-drag. Slots expand to a 4-6px target.
 *   • EMPTY HOST → the only slot rendered when a container has no
 *                 children. Always visible so authors can drop a
 *                 first child into an empty section/column. */
.wf-builder-slot {
  min-height: 0;
  margin: 0;
  border-radius: 4px;
  transition: min-height 80ms ease, margin 80ms ease, background 0.1s ease, border 0.1s ease;
  border: 2px dashed transparent;
}
.lc-dragging .wf-builder-slot {
  min-height: 6px;
  margin: 2px 0;
}
.wf-builder-slot--empty-host {
  min-height: 60px;
  border-color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 12px;
  margin: 4px 0;
}
.wf-builder-slot--empty-host::after { content: "Drop here"; }
.wf-drop-zone--active {
  border-color: #2563eb !important;
  background: #eff6ff;
  color: #2563eb;
  min-height: 36px !important;
}

/* Element halos + selection actions -------------------------------
 *
 * Halo is rendered with `outline` (not `border`) so it does NOT
 * affect layout — eliminates the compounding inset that otherwise
 * makes every nesting level look 12-16px more padded than the live
 * page. `outline-offset: -1px` paints it just inside the element's
 * bounding box (so adjacent halos don't visually overlap when two
 * elements are flush).
 *
 * Hover lights up only the *innermost* hovered element via
 * `:not(:has(...))` — without this, hovering a deeply-nested card
 * would simultaneously highlight itself + every ancestor under the
 * cursor. */
.lc-element--builder {
  position: relative;
  padding: 0;
  border-radius: 4px;
  outline: 1px solid transparent;
  outline-offset: -1px;
  cursor: pointer;
  transition: outline-color 120ms ease, background-color 120ms ease;
}
.lc-element--builder:hover:not(:has(.lc-element--builder:hover)) {
  outline-color: #93c5fd;
  background: rgba(219, 234, 254, 0.18);
}
.lc-element--selected {
  outline-color: #2563eb !important;
  outline-width: 2px !important;
  background: rgba(219, 234, 254, 0.28) !important;
}

/* Selection toolbar (duplicate / delete) — appears ONLY on the
 * selected element, never on hover. Hover gets the halo and the
 * drag handle but no buttons, so deeply-nested elements stop
 * stacking three overlapping toolbars under the cursor. */
.lc-element__actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  gap: 2px;
  z-index: 5;
  padding: 2px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.lc-element--selected > .lc-element__actions { display: inline-flex; }

.lc-element__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #475569;
  cursor: pointer;
}
.lc-element__action:hover { background: #f1f5f9; color: #0f172a; }
.lc-element__action--danger:hover { background: #fef2f2; color: #b91c1c; }

/* Drag handle in the left gutter ---------------------------------
 *
 * Replaces the previous "whole element is draggable" pattern. Hidden
 * by default; revealed on hover/select of the element. Sits OUTSIDE
 * the element's left edge (negative left) so it doesn't push content
 * around or fight nested form controls for the cursor. */
.lc-element__handle {
  position: absolute;
  top: 4px;
  left: -18px;
  width: 16px;
  height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: #94a3b8;
  cursor: grab;
  z-index: 5;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.lc-element__handle:hover { color: #2563eb; border-color: #93c5fd; background: #eff6ff; }
.lc-element__handle:active { cursor: grabbing; }
.lc-element__handle:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }

/* Show the handle on innermost-hovered + on selected. Same `:has()`
 * trick as the halo so ancestors don't crowd the gutter. */
.lc-element--builder:hover:not(:has(.lc-element--builder:hover)) > .lc-element__handle,
.lc-element--selected > .lc-element__handle { display: inline-flex; }

/* While dragging, force-show every handle so the user can see drop
 * trajectories, and dim the dragged element via its outline. */
.lc-dragging .lc-element__handle { display: inline-flex; opacity: 0.4; }

/* The dashboard canvas masks overflow on its inner card; add a tiny
 * bit of left padding to keep the gutter handle from being clipped. */
.page-builder__canvas { padding-left: 22px; }

/* Settings modal --------------------------------------------------- */
.wf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.wf-modal-overlay.is-hidden { display: none; }
.page-builder__settings-modal {
  background: #fff;
  border-radius: 10px;
  padding: 20px 22px;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-builder__settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.page-builder__settings-header h3 { margin: 0; font-size: 16px; }
.page-builder__settings-section {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}
.page-builder__settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}
.page-builder__access-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}
.page-builder__access-row {
  display: grid;
  grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 28px;
  gap: 8px;
  align-items: center;
}
.page-builder__access-target select {
  width: 100%;
}

/* GUI filter builder (used in inspector) --------------------------- */
.page-builder__filter-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.page-builder__filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1fr) 28px;
  gap: 6px;
  align-items: center;
}
.page-builder__filter-row .wf-field__input { font-size: 12px; padding: 6px 8px; }
.page-builder__filter-row .wf-builder-inspector__option-del {
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-builder__filter-row .wf-builder-inspector__option-del:hover { background: #fef2f2; color: #b91c1c; }

/* Chart filter builder (cfg.filters Hash, per dataset allowlist) --- */
.page-builder__filter-spacer {
  /* Keeps the grid columns aligned for value-less operators
     (present / blank) so the remove button doesn't jump rows. */
  min-height: 1px;
}
.page-builder__filter-remove {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.page-builder__filter-remove:hover { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.page-builder__filter-remove:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }

.page-builder__filter-add {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px dashed #cbd5e1;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.page-builder__filter-add:hover:not(:disabled) { background: #eff6ff; border-color: #93c5fd; }
.page-builder__filter-add:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.page-builder__filter-add:disabled { color: #94a3b8; cursor: not-allowed; border-style: solid; }

/* Inspector chips + footer actions --------------------------------- */
.page-inspector__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.page-inspector__chip {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  color: #1e293b;
}
.page-inspector__chip:hover { background: #e0e7ff; border-color: #6366f1; }

.wf-builder-inspector__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid #e2e8f0;
}

/* Column picker (search + grouped + scrollable) -------------------- */
.page-column-picker__search {
  width: 100%;
  margin-bottom: 8px;
}
.page-column-picker__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
}
.page-column-picker__counter {
  color: #64748b;
  font-weight: 500;
}
.page-column-picker__spacer { flex: 1; }
.page-column-picker__link {
  background: transparent;
  border: 0;
  color: #2563eb;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.page-column-picker__link:hover { background: #eff6ff; }

.page-column-picker__list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  padding: 4px 0;
}
.page-column-picker__group-head {
  font-size: 10px;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 600;
  padding: 8px 10px 4px;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  border-bottom: 1px solid #f1f5f9;
}
.page-column-picker__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 13px;
  border-radius: 4px;
  margin: 1px 4px;
}
.page-column-picker__row:hover { background: #f8fafc; }
.page-column-picker__row input[type="checkbox"] { margin: 0; }
.page-column-picker__label {
  flex: 1;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-column-picker__tag {
  font-size: 10px;
  color: #6366f1;
  background: #eef2ff;
  border-radius: 3px;
  padding: 1px 6px;
  font-weight: 500;
  flex-shrink: 0;
}
.page-column-picker__empty {
  color: #94a3b8;
  font-style: italic;
  font-size: 12px;
  padding: 12px;
  text-align: center;
}

/* Selected-columns DnD list inside the column picker. The selected
   panel renders chip-like rows with a drag handle on the left, a
   small position badge, the label, an optional "Custom" tag, and a
   remove button. Drag affordances follow the workflow editor's
   stronger shadow / dashed drop-target conventions. */
.page-column-picker__list--selected {
  background: #f8fafc;
  max-height: 240px;
}
.page-column-picker__group-head--sub {
  position: static;
  background: transparent;
  border-bottom: 0;
  padding-top: 4px;
}
.page-column-picker__row--selected {
  cursor: grab;
  background: #fff;
  border: 1px solid #e2e8f0;
  margin: 4px 6px;
  padding: 6px 8px;
  user-select: none;
}
.page-column-picker__row--selected:hover { background: #fff; border-color: #cbd5e1; }
.page-column-picker__row--selected.is-dragging {
  opacity: 0.55;
  cursor: grabbing;
}
.page-column-picker__row--selected.is-drop-target {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb inset;
}
.page-column-picker__drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
  cursor: grab;
}
.page-column-picker__row--selected:hover .page-column-picker__drag { color: #475569; }
.page-column-picker__position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 600;
  padding: 0 6px;
  flex-shrink: 0;
}
.page-column-picker__remove {
  margin-left: auto;
}

/* Segmented pill toggle (visibility rule AND/OR + filter mode) ---- */
.page-builder__visibility-op {
  display: inline-flex;
  align-items: stretch;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  margin: 4px 0 10px;
  width: max-content;
  max-width: 100%;
}
.page-builder__visibility-op-btn {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  line-height: 1.2;
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.page-builder__visibility-op-btn:hover:not([data-active="true"]) {
  background: #e2e8f0;
  color: #1e293b;
}
.page-builder__visibility-op-btn:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}
.page-builder__visibility-op-btn[data-active="true"] {
  background: #fff;
  color: #1d4ed8;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px #cbd5e1;
}
.page-builder__visibility-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.page-builder__visibility-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  gap: 6px;
  align-items: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px;
}
.page-builder__visibility-row select,
.page-builder__visibility-row input[type="text"] {
  width: 100%;
}
.page-builder__visibility-static {
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: #94a3b8;
  font-size: 12px;
  padding: 0 6px;
}

/* Action buttons builder (inspector) ------------------------------- */
.page-builder__action-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.page-builder__action-card {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  overflow: hidden;
}
.page-builder__action-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}
.page-builder__action-headlabel {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-builder__action-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(15, 23, 42, 0.12);
}
.page-builder__action-dot--default { background: #fff; }
.page-builder__action-dot--primary { background: #2563eb; }
.page-builder__action-dot--success { background: #16a34a; }
.page-builder__action-dot--warning { background: #f59e0b; }
.page-builder__action-dot--danger  { background: #dc2626; }
.page-builder__action-dot--neutral { background: #64748b; }

.page-builder__action-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-builder__action-body .wf-field { margin: 0; }
.page-builder__action-body .wf-field__input { font-size: 12px; padding: 6px 8px; }

/* Per-row action buttons rendered inside the table widget --------- */
.page-widget__actions-th {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.page-widget__actions-cell {
  text-align: right;
  white-space: nowrap;
}
.page-widget__row-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}
.page-action-form {
  display: inline;
  margin: 0;
}
.page-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  background: #fff;
  color: #1e293b;
  line-height: 1.4;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.page-action-btn:hover { transform: translateY(-0.5px); }
.page-action-btn--default { border-color: #cbd5e1; color: #1e293b; background: #fff; }
.page-action-btn--default:hover { background: #f1f5f9; border-color: #94a3b8; }
.page-action-btn--primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.page-action-btn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.page-action-btn--success { background: #16a34a; color: #fff; border-color: #16a34a; }
.page-action-btn--success:hover { background: #15803d; border-color: #15803d; }
.page-action-btn--warning { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.page-action-btn--warning:hover { background: #d97706; border-color: #d97706; }
.page-action-btn--danger  { background: #dc2626; color: #fff; border-color: #dc2626; }
.page-action-btn--danger:hover  { background: #b91c1c; border-color: #b91c1c; }
.page-action-btn--neutral { background: #64748b; color: #fff; border-color: #64748b; }
.page-action-btn--neutral:hover { background: #475569; border-color: #475569; }

/* Layout containers (shared by builder + runtime) ------------------
 *
 * Builder-only chrome (faint background, dashed border) is added via
 * the `.lc-element--builder` class. The base styles below match what
 * the runtime `dashboards/show` page renders, so authors see the
 * exact spacing they're going to ship. */

.lc-section { padding: 12px; border: 1px solid var(--line); border-radius: 6px; margin: 8px 0; }
.lc-section__title { margin: 0 0 4px 0; }
.lc-section__desc  { margin: 0 0 8px 0; color: var(--muted); }
.lc-section__children, .lc-column__children { display: flex; flex-direction: column; gap: 4px; }
.lc-columns { display: grid; gap: 16px; align-items: start; }

/* Builder-mode container chrome — slim down so nesting stops
 * compounding visible whitespace. The inner section padding stays
 * (it's part of the live design), but the outer `--builder` halo on
 * a section/column no longer adds its own border + background tint
 * on top of the section's own border + padding. Empty
 * sections/columns get a subtle dashed outline so they're discoverable. */
.lc-element--builder.lc-section { margin: 4px 0; }
.lc-element--builder.lc-column,
.lc-element--builder.lc-columns { margin: 0; }

/* When a section/column/columns container is empty, give it a
 * faint dashed background hint so authors can still see the
 * landing zone. The empty-host drop slot inside it provides the
 * "Drop here" copy. */
.lc-element--builder.lc-section:has(> .lc-section__children > .wf-builder-slot--empty-host:only-child),
.lc-element--builder.lc-column:has(> .lc-column__children > .wf-builder-slot--empty-host:only-child) {
  background: rgba(241, 245, 249, 0.5);
}
@media (max-width: 1024px) {
  .lc-columns[data-lc-grid="12"] > * { grid-column: span 12 !important; }
}
@media (max-width: 640px) {
  .lc-columns:not([data-lc-grid="12"]) { grid-template-columns: 1fr !important; }
}

/* Runtime widgets --------------------------------------------------- */

.page-list { display: flex; flex-direction: column; gap: 8px; }
.page-list__item {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px;
}
.page-list__title { font-weight: 600; font-size: 15px; color: var(--ink); }
.page-list__desc  { color: var(--muted); margin: 4px 0 0; font-size: 13px; }
.page-list__meta  { margin-top: 6px; }
.page-list__actions { display: flex; gap: 6px; }
.page-list__item--link-only { display: block; }

@media (max-width: 640px) {
  .page-list__item {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .page-list__actions {
    flex-wrap: wrap;
  }

  .page-list__actions .btn,
  .page-list__actions form,
  .page-list__actions .button_to {
    flex: 1 1 auto;
  }
}

.page-show__layout { display: flex; flex-direction: column; gap: 16px; }
.page-grid { display: grid; gap: 16px; align-items: start; }
@media (max-width: 1024px) {
  .page-grid[data-lc-grid="12"] > .page-grid__cell { grid-column: span 12 !important; }
}
@media (max-width: 640px) {
  .page-grid:not([data-lc-grid="12"]) { grid-template-columns: 1fr !important; }
}
.page-section { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 18px; }
.page-section__title { margin: 0 0 14px; font-size: 16px; line-height: 1.3; }
.page-section__title + .page-section__desc { margin-top: -10px; }
.page-section__desc  { color: var(--muted); margin: 0 0 14px; font-size: 13px; line-height: 1.45; }
.page-section__body  { display: flex; flex-direction: column; gap: 12px; }
.page-divider { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.page-alert { padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.page-alert--info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.page-alert--success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.page-alert--warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.page-alert--danger  { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.page-image__placeholder {
  background: var(--soft); color: var(--muted); border: 1px dashed var(--line);
  padding: 32px; text-align: center; border-radius: var(--radius);
}

/* Widget envelope --------------------------------------------------- */

.page-widget {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow);
}
.page-widget--builder { background: var(--soft); }
.page-widget--loading .page-widget__skeleton {
  height: 60px; background: linear-gradient(90deg, #f3f4f6, #e5e7eb, #f3f4f6);
  background-size: 200% 100%; animation: dashboard-skel 1.2s linear infinite;
  border-radius: 6px; margin-top: 8px;
}
@keyframes dashboard-skel {
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}
.page-widget__title { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.page-widget__hint  { font-size: 11px; color: var(--muted); margin-top: 8px; }
.page-widget__empty { color: var(--muted); padding: 16px; text-align: center; font-size: 13px; }
.page-widget__error { color: var(--danger); padding: 12px; font-size: 13px; }
.page-widget__placeholder { background: #fff; border: 1px dashed var(--line); border-radius: 6px; padding: 16px; }
.page-widget__placeholder--metric { font-size: 36px; font-weight: 700; color: var(--muted); text-align: center; }
.page-widget__placeholder--chart  { height: 200px; background: #fff; padding: 8px; box-sizing: border-box; }

/* Chart-preview Stimulus controller --------------------------------- */
.page-chart-preview { position: relative; display: flex; flex-direction: column; }
.page-chart-preview__canvas-wrap { flex: 1 1 auto; position: relative; min-height: 0; }
.page-chart-preview__canvas-wrap > canvas { width: 100% !important; height: 100% !important; }
.page-chart-preview__badge {
  position: absolute; top: 6px; right: 8px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
  color: #64748b; background: rgba(241, 245, 249, 0.9);
  border: 1px solid #e2e8f0; border-radius: 999px; padding: 2px 8px;
  pointer-events: none;
}
.page-chart-preview__empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 120px; color: #94a3b8; font-size: 12px;
  text-align: center; padding: 0 16px;
}
.page-chart-preview__table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.page-chart-preview__table th,
.page-chart-preview__table td {
  padding: 4px 8px; border-bottom: 1px solid #f1f5f9; text-align: left;
}
.page-chart-preview__table th { color: #64748b; font-weight: 600; font-size: 11px; }
.page-chart-preview__table td.is-numeric,
.page-chart-preview__table th.is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.page-chart-preview__summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px;
  padding: 6px 4px;
}
.page-chart-preview__summary-tile {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px;
}
.page-chart-preview__summary-value { font-size: 18px; font-weight: 600; color: #0f172a; line-height: 1.1; }
.page-chart-preview__summary-label { font-size: 11px; color: #64748b; margin-top: 2px; }

/* Chart inspector chip picker --------------------------------------- */
.page-chip-picker {
  display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px;
  padding: 6px; border: 1px dashed #e2e8f0; border-radius: 8px;
  background: #f8fafc;
}
.page-chip-picker__empty {
  font-size: 12px; color: #94a3b8; padding: 2px 4px;
}
.page-chip-picker__chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 999px;
  padding: 3px 4px 3px 10px; font-size: 12px; color: #1e293b;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
}
.page-chip-picker__chip-label { padding-right: 4px; }
.page-chip-picker__btn {
  appearance: none; border: 0; background: transparent;
  width: 18px; height: 18px; padding: 0; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #64748b; cursor: pointer;
}
.page-chip-picker__btn:hover:not(:disabled) { background: #e2e8f0; color: #0f172a; }
.page-chip-picker__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.page-chip-picker__btn--remove:hover { background: #fee2e2; color: #b91c1c; }
.page-chip-picker__add { margin-top: 6px; }
.page-widget__placeholder--row { height: 12px; background: var(--soft); border-radius: 4px; margin-bottom: 6px; }
.page-widget__table-wrap { overflow-x: auto; }
.page-widget__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.page-widget__table th, .page-widget__table td {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.page-widget__table tr.is-clickable { cursor: pointer; }
.page-widget__table tr.is-clickable:hover { background: var(--soft); }
.page-widget__footer {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.page-widget__count { color: var(--muted); }

.page-pager__controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.page-pager__btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
}
.page-pager__btn:hover { background: var(--soft); border-color: var(--accent); }
.page-pager__btn--disabled {
  color: #cbd5e1;
  cursor: not-allowed;
  background: #fafafa;
}
.page-pager__btn--disabled:hover { background: #fafafa; border-color: var(--line); }
.page-pager__page { font-size: 12px; color: var(--muted); padding: 0 4px; }

.page-widget--metric .page-metric__value {
  font-size: 28px; font-weight: 700; color: var(--ink); margin-top: 4px;
}
.page-metric__link { text-decoration: none; color: inherit; }
.page-metric__link:hover .page-metric__value { color: var(--accent); }

.page-chart { width: 100%; height: 220px; position: relative; }

/* Filter bar --------------------------------------------------------
   The dashboard show-page filter bar. Modeled after `.utility-bar` on
   the index pages so it reads as the same affordance: a thin
   horizontal strip directly under the topbar with a white background
   and hairline borders. Negative margins pull it flush with the
   topbar (defeating the .content padding) and let it span the full
   page width. Filter chips render inline (label + input on the same
   row) rather than stacked, since the bar is short and we have a
   lot of horizontal real estate. */

.page-filter-bar {
  /* Pull flush with topbar (.content has padding: 24px) and span
     edge-to-edge. -24px on the bottom collapses .content's gap so
     the bar reads as part of the header rather than a floating card. */
  margin: -24px -24px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 44px;
  transition: opacity 120ms ease;
}
.page-filter-bar.is-busy {
  opacity: 0.55;
  pointer-events: none;
}
.page-filter-bar__loading { color: var(--ink-muted); font-size: 12px; }

/* Each field is a self-contained pill: subtle hairline frame around
   label + input. When the field has a value (`.is-active`), we tint
   the frame and label with the accent color so the user can see at
   a glance which filters are doing work. */
.page-filter-bar__field {
  display: inline-flex; align-items: center; gap: 6px; position: relative;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 4px 2px 10px;
  min-height: 30px;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.page-filter-bar__field:hover {
  border-color: color-mix(in srgb, var(--ink) 18%, var(--line));
}
.page-filter-bar__field.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, #ffffff);
}
.page-filter-bar__label {
  font-size: 12px; color: var(--ink-muted); font-weight: 500; white-space: nowrap;
  letter-spacing: 0.01em;
}
.page-filter-bar__field.is-active .page-filter-bar__label {
  color: color-mix(in srgb, var(--accent) 75%, var(--ink));
}

/* Inputs sit inside the pill: no extra border, transparent background
   so the pill provides the visual frame. The pill's :focus-within state
   draws the accent ring rather than each input doing it individually. */
.page-filter-bar__input {
  background: transparent; border: none; border-radius: 999px;
  padding: 2px 8px; font-size: 13px; color: var(--ink); min-height: 26px;
  line-height: 1.4;
  min-width: 80px;
}
.page-filter-bar__input:focus {
  outline: none;
}
.page-filter-bar__field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.page-filter-bar__actions {
  display: inline-flex; gap: 6px; margin-left: auto; align-items: center;
}
.page-filter-bar__clear-all {
  background: transparent; border: none; padding: 4px 8px;
  font-size: 12px; color: var(--ink-muted); cursor: pointer;
  border-radius: 6px;
}
.page-filter-bar__clear-all:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

/* Model picker — async typeahead used by the model_picker filter
   type. The picker has three concentric pieces:
   • __picker         — wraps the trigger button + clear button +
                        floating panel. position: relative so the
                        panel can absolutely-position against it.
   • __picker-trigger — the always-visible button that shows the
                        currently picked label (or placeholder).
                        Styled to mimic a select control so it
                        sits next to text/date inputs without
                        looking out of place.
   • __picker-panel   — the floating popover that opens on click.
                        Absolutely positioned against __picker so
                        it never pushes the next filter around;
                        contains the search box, the result list,
                        and a status line under the list. */
/* Model picker — async typeahead used by the model_picker filter
   type. The picker is a select-shaped trigger button + a floating
   popover panel containing search + scrollable list. We set explicit
   colors on both the trigger and the row buttons because there are
   global `button { ... }` rules elsewhere in the sheet that would
   otherwise inherit a faded color and make the rows unreadable. */
.page-filter-bar__picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
/* The picker trigger sits inside the field pill, so it has no border
   of its own. We use a caret on the right and rely on the parent
   pill's hover/focus/active states for chrome. */
.page-filter-bar__picker-trigger {
  background: transparent !important;
  color: var(--ink) !important;
  border: none; border-radius: 999px;
  padding: 2px 22px 2px 4px; font-size: 13px;
  min-height: 26px; min-width: 120px; max-width: 220px;
  text-align: left; cursor: pointer; position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}
.page-filter-bar__field--model_picker:not(.is-active) .page-filter-bar__picker-trigger {
  color: var(--ink-muted) !important;
  font-weight: 400;
}
.page-filter-bar__field--model_picker.is-active .page-filter-bar__picker-trigger {
  color: color-mix(in srgb, var(--accent) 80%, var(--ink)) !important;
}
.page-filter-bar__picker-trigger:focus { outline: none; }
.page-filter-bar__picker-trigger::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 0; height: 0; margin-top: -2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--ink-muted);
}
.page-filter-bar__picker-clear {
  background: transparent; border: none; border-radius: 999px;
  width: 22px; height: 22px; padding: 0; cursor: pointer; color: var(--ink-muted);
  font-size: 16px; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center;
  margin-right: 2px;
}
.page-filter-bar__picker-clear:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
.page-filter-bar__picker-panel {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: #ffffff;
  border: 1px solid var(--line); border-radius: 6px;
  width: 260px; max-width: 90vw;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 100;
  padding: 6px;
}
.page-filter-bar__picker-search {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 8px; font-size: 13px; min-height: 30px;
  width: 100%; box-sizing: border-box; margin-bottom: 6px;
  display: block;
}
.page-filter-bar__picker-search:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.page-filter-bar__picker-list {
  max-height: 220px; overflow-y: auto;
  min-height: 32px;
}
/* Each result is rendered as a <button>. Because page-wide button
   resets give buttons a transparent or muted color, we have to be
   explicit here or the rows render invisible against the white panel. */
.page-filter-bar__picker-row {
  display: block; width: 100%;
  background: #ffffff !important;
  color: #111827 !important;
  border: none; border-radius: 4px;
  padding: 7px 8px; font-size: 13px; line-height: 1.3;
  text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 400;
}
.page-filter-bar__picker-row:hover,
.page-filter-bar__picker-row:focus {
  background: color-mix(in srgb, var(--accent) 12%, #ffffff) !important;
}
.page-filter-bar__picker-status {
  padding: 6px 8px 2px; font-size: 11px; color: var(--ink-muted);
  border-top: 1px solid var(--line); margin-top: 4px;
}

/* date_range — single trigger that opens a popover with relative
   presets on the left and a custom range picker at the bottom.
   Uses the picker-trigger / picker-panel chrome so the chip looks
   consistent with the model picker. */
.page-filter-bar__date-range {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.page-filter-bar__field--date_range:not(.is-active) .page-filter-bar__date-range-trigger {
  color: var(--ink-muted) !important;
  font-weight: 400;
}
.page-filter-bar__field--date_range.is-active .page-filter-bar__date-range-trigger {
  color: color-mix(in srgb, var(--accent) 80%, var(--ink)) !important;
}
.page-filter-bar__date-range-trigger.is-empty {
  color: var(--ink-muted) !important;
  font-weight: 400;
}

.page-filter-bar__date-range-panel {
  width: 320px; padding: 6px; display: flex; flex-direction: column; gap: 4px;
}
.page-filter-bar__date-range-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
}
.page-filter-bar__date-range-preset {
  background: #ffffff !important;
  color: #111827 !important;
  border: none; border-radius: 4px;
  padding: 6px 8px; font-size: 12.5px; line-height: 1.3;
  text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 400;
}
.page-filter-bar__date-range-preset:hover,
.page-filter-bar__date-range-preset:focus {
  background: color-mix(in srgb, var(--accent) 12%, #ffffff) !important;
}
.page-filter-bar__date-range-preset.is-selected {
  background: color-mix(in srgb, var(--accent) 18%, #ffffff) !important;
  color: color-mix(in srgb, var(--accent) 75%, var(--ink)) !important;
  font-weight: 500;
}

.page-filter-bar__date-range-custom {
  border-top: 1px solid var(--line);
  margin-top: 2px;
  padding: 6px 4px 2px;
}
.page-filter-bar__date-range-custom.is-selected {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 4px;
}
.page-filter-bar__date-range-custom-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-muted); margin-bottom: 4px; padding: 0 4px;
}
.page-filter-bar__date-range-custom-row {
  display: flex; align-items: center; gap: 4px;
}
.page-filter-bar__date-range-input {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px;
  padding: 4px 6px; font-size: 12.5px; min-height: 28px;
  flex: 1 1 0; min-width: 0;
}
.page-filter-bar__date-range-input:focus {
  outline: none; border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.page-filter-bar__date-range .page-filter-bar__sep {
  color: var(--ink-muted); font-size: 11px; padding: 0 2px;
}

/* Native select arrows are noisy in a pill, so collapse the chevron
   visually and use the pill's caret instead. Also tighten padding. */
.page-filter-bar__field--select .page-filter-bar__input,
.page-filter-bar__field--boolean .page-filter-bar__input {
  padding-right: 18px;
}

/* The JS wraps all field columns + actions in this row container so
   the actions cluster can float to the right via margin-left:auto on
   .page-filter-bar__actions. */
.page-filter-bar__row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%;
}

/* Dashboard filter bar (builder mode) — horizontal strip rendered
   above the canvas card. Hosts draggable filter pills that each
   represent one global filter. The bar accepts drops from the
   "Filters" palette group at the left; pills can be reordered by
   dragging within the bar. Selecting a pill opens its editor in
   the right inspector (replaces the old Settings-modal editor).

   Layout intent: the bar sits inside .page-builder__canvas-wrap
   above .page-builder__canvas-inner, sharing the same max-width
   so the two cards line up visually. The bar uses a softer panel
   colour than the canvas card to read as a secondary surface. */
.page-builder__filter-bar {
  max-width: 1100px;
  margin: 0 auto 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  min-height: 48px;
  display: flex;
  align-items: center;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.page-builder__filter-bar--empty {
  border-style: dashed;
  background: color-mix(in srgb, var(--ink) 2%, #ffffff);
}
.page-builder__filter-bar-empty {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-muted); font-size: 12.5px;
  padding: 6px 4px;
}
.page-builder__filter-bar-empty svg {
  color: var(--ink-muted);
}
.page-builder__filter-bar-inner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0; row-gap: 4px;
  width: 100%;
}

/* While a filter palette pill is being dragged, hint that the
   whole canvas-wrap will accept the drop. The filter bar gets a
   stronger accent ring so it remains the primary target even
   though the entire area accepts the drop. */
.page-builder--filter-dragging .page-builder__filter-bar {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, #ffffff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.page-builder--filter-dragging .page-builder__canvas-inner {
  outline: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset: -2px;
}

/* Filter pills — each represents one global filter. Pill icon shows
   the filter type (text / date / picker / ...), label shows the
   author-defined label, and a small × removes the filter. The whole
   pill is draggable for reorder; clicking selects it for editing. */
.page-builder__filter-pill {
  display: inline-flex; align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 6px 4px 10px;
  cursor: grab;
  user-select: none;
  font-size: 13px;
  color: var(--ink);
  min-height: 30px;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}
.page-builder__filter-pill:hover {
  border-color: color-mix(in srgb, var(--ink) 22%, var(--line));
}
.page-builder__filter-pill:active {
  cursor: grabbing;
}
.page-builder__filter-pill.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, #ffffff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.page-builder__filter-pill-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.page-builder__filter-pill.is-selected .page-builder__filter-pill-icon {
  color: var(--accent);
}
.page-builder__filter-pill-label {
  font-weight: 500;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden; text-overflow: ellipsis;
}
.page-builder__filter-pill-type {
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: lowercase;
  background: color-mix(in srgb, var(--ink) 5%, #ffffff);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0.01em;
}
.page-builder__filter-pill-del {
  background: transparent; border: none;
  width: 20px; height: 20px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; cursor: pointer;
  color: var(--ink-muted);
  padding: 0;
}
.page-builder__filter-pill-del:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}

/* Drop zones live between (and at the ends of) every pill. Default
   width is a hairline (so they don't push pills apart visually);
   on dragover they expand into a clear accent gutter so the author
   can see exactly where the new pill will land.

   The flanking zones at the very start and end stretch a bit so
   authors can drop "to the side" without aiming precisely. */
.page-builder__filter-dropzone {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  transition: width 100ms ease, background-color 100ms ease;
  flex-shrink: 0;
}
.page-builder__filter-dropzone--flank {
  width: 8px;
}
.page-builder--filter-dragging .page-builder__filter-dropzone {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.page-builder__filter-dropzone.is-active {
  width: 28px;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Filters palette group — sits at the top of the left sidebar.
   Filter pills here are visually identical to the layout palette
   pills (so the affordance reads consistently) but use a different
   data attribute + drag mime type so layout DnD ignores them. */
.page-palette__group--filters .page-palette__pill--filter {
  cursor: grab;
}
.page-palette__group--filters .page-palette__pill--filter:active {
  cursor: grabbing;
}

/* Model-field palette group ----------------------------------------
   Pages bound to a record get a special bottom palette section
   listing the bound model's writable fields. Visually distinguished
   from the generic "Inputs / Content / Layout" groups via a tinted
   panel + dashed border + a "BOUND" pill in the group title, so
   authors can tell at a glance which pills will *write to the
   record's columns* (model-field pills) versus which will just sit
   in the inputs hash for workflow / Liquid use (generic input pills).
   Pills inside this group also pick up an indigo accent that pairs
   with the matching inspector hint (`forms-bound-input-hint`). */
.page-palette__group--model {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.07), rgba(99, 102, 241, 0.02));
  padding: 10px 10px 6px 10px;
  border: 1px dashed rgba(99, 102, 241, 0.35);
  border-radius: 8px;
}
.page-palette__group--model .page-palette__group-title {
  color: #4338ca;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.page-palette__group--model .page-palette__group-title::after {
  content: "WRITES TO RECORD";
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: #4338ca;
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
}
.page-palette__group--model .page-palette__pill {
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(255, 255, 255, 0.85);
}
.page-palette__group--model .page-palette__pill:hover {
  border-color: #4338ca;
  background: #eef2ff;
  box-shadow: 0 1px 2px rgba(67, 56, 202, 0.18);
}
.page-palette__group--model .page-palette__pill .page-palette__icon {
  color: #6366f1;
}
.page-palette__group--model .page-palette__pill:hover .page-palette__icon {
  color: #4338ca;
}

/* Bound-input inspector hint --------------------------------------
   Rendered above an input element's editable-fields list when the
   form is bound to a record. Tells the author exactly where the
   value of this input flows on submit (a column write, a workflow
   payload, or nowhere if the active mode's submit kind is `none`).
   Four visual modes — `--mapped` (green check, value writes a
   column), `--workflow` (indigo arrow, value goes to the workflow),
   `--unmapped` (amber warn, value is collected but discarded), and
   `--display` (slate, no submit action wired up yet). */
.forms-bound-input-hint {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 4px 0 12px 0;
  border: 1px solid transparent;
}
.forms-bound-input-hint__icon {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 13px;
}
.forms-bound-input-hint__body { flex: 1; min-width: 0; }
.forms-bound-input-hint code {
  font-size: 11px;
  background: rgba(15, 23, 42, 0.06);
  padding: 1px 4px;
  border-radius: 3px;
}
.forms-bound-input-hint--mapped {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.forms-bound-input-hint--workflow {
  background: #eef2ff;
  border-color: rgba(99, 102, 241, 0.4);
  color: #3730a3;
}
.forms-bound-input-hint--unmapped {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.forms-bound-input-hint--display {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

/* Form runtime shell (inside the regular app layout) ------------------
   The authenticated `/f/:slug` runtime renders inside the regular app
   layout (sidebar + header), unlike the public `/r/f/:token` flow which
   uses the standalone `external` layout. The runtime view loads
   `external.css` so all the `ext-*` classes the renderer emits keep
   styling the form body and inputs identically — this shell just
   centers the form card within the wider app content area so authors
   and end users see the same polished card chrome the public flow
   provides, only without the form taking over the entire page. */
.forms-runtime-shell {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 0 60px;
}

/* Forms lifecycle editor (inspector → Form settings → Lifecycle) -----
   Mode tabs at the top, then a vertical pipeline of slots:
     on_open → on_validate → submit → on_success → on_failure
   Each slot has a header (label + add button) and a list of action
   editors. Submit is a special slot rendered inline (no add/remove)
   since there's exactly one submit action per mode. */
.forms-lifecycle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.forms-lifecycle__tabs {
  display: flex;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.forms-lifecycle__tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px 6px 0 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}
.forms-lifecycle__tab:hover {
  color: #1e293b;
  background: #f1f5f9;
}
.forms-lifecycle__tab.is-active {
  color: #1e293b;
  background: #fff;
  border-color: var(--line, #e5e7eb);
  border-bottom-color: #fff;
  position: relative;
  top: 1px;
}
.forms-lifecycle__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.forms-lifecycle__slot {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}
.forms-lifecycle__slot--submit {
  background: #fafafa;
  border-color: #cbd5e1;
}
.forms-lifecycle__slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.forms-lifecycle__slot-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #475569;
}
.forms-lifecycle__add {
  appearance: none;
  background: transparent;
  border: 1px dashed #94a3b8;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  padding: 2px 8px;
  cursor: pointer;
}
.forms-lifecycle__add:hover {
  border-color: #4338ca;
  color: #4338ca;
  background: #eef2ff;
}
.forms-lifecycle__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.forms-lifecycle__empty {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  padding: 4px 0;
}
.forms-lifecycle__action {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  padding: 8px;
  background: #f8fafc;
}
.forms-lifecycle__action-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.forms-lifecycle__action-row .forms-lifecycle__kind {
  flex: 1;
}
.forms-lifecycle__remove {
  appearance: none;
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 6px;
}
.forms-lifecycle__remove:hover {
  color: #b91c1c;
}
.forms-lifecycle__action-body .wf-field {
  margin-bottom: 6px;
}
.forms-lifecycle__action-body .wf-field:last-child {
  margin-bottom: 0;
}

/* Bindings editor — per-widget repeater inside the inspector. Each
   row is a flex strip so the source / target / params controls stay
   on one line on wide inspectors and wrap gracefully on narrow ones.
   Mirrors the layout used by .page-builder__filter-row above. */
.page-builder__bindings-list {
  display: flex; flex-direction: column; gap: 6px;
}
.page-builder__binding-detail {
  display: flex; gap: 6px; flex: 1 1 200px; flex-wrap: wrap;
}
.page-builder__binding-detail .wf-builder-inspector__select {
  flex: 1 1 100px; min-width: 80px;
}
.page-builder__binding-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 8px;
}
.page-builder__binding-row .wf-field { margin: 0; flex: 1 1 140px; min-width: 100px; }
.page-builder__binding-row .wf-field__input { font-size: 12px; padding: 6px 8px; }
.page-builder__binding-row .wf-field__label { font-size: 10px; }
.page-builder__binding-row .wf-builder-inspector__option-del {
  background: transparent; border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 6px; cursor: pointer; color: var(--ink-muted); align-self: end;
}
.page-builder__binding-row .wf-builder-inspector__option-del:hover {
  background: #fef2f2; color: #b91c1c;
}
.page-builder__bindings-empty {
  font-size: 12px; color: var(--ink-muted); padding: 6px 0;
}

/* ── Liquid pill editor ─────────────────────────────────────────────────
   Pill-based replacement for raw {{ ... }} text inputs. The wrapper
   reuses .wf-input-with-picker so existing grid-layout call sites
   (like rule rows) keep working — the pill editor adds an inner
   contenteditable surface and a multi-chip strip on the right.

   Two visual states:
     • pill mode — .wf-liquid-editor__zone--pill is shown (contenteditable),
       the original input is hidden via .wf-liquid-editor__hidden-input
     • advanced mode — .wf-liquid-editor__zone--pill is gone, the
       original input is exposed via .wf-liquid-editor__textarea

   Type-tinted pills use --string/--number/--date/--array/--boolean
   modifiers so number/date pills stand out from plain string ones at
   a glance. */
.wf-liquid-editor {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
}
.wf-liquid-editor__hidden-input {
  position: absolute;
  inset: 0;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  /* Keep tab order so screen readers can still find the form input
     even though the visual editor is the contenteditable above. */
}
.wf-liquid-editor__textarea {
  /* In advanced mode the original input is brought back as the visible
     editing surface. Reserve enough right padding for all four chips
     (⚡ ƒx ✨ <>) so typed text never slides under them. */
  padding-right: 112px !important;
  min-height: 36px;
}
.wf-liquid-editor--multiline .wf-liquid-editor__textarea {
  min-height: 80px;
  resize: vertical;
}

.wf-liquid-editor__zone {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 7px 96px 7px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  color: #0f172a;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.wf-liquid-editor__zone:hover { border-color: #cbd5e1; }
.wf-liquid-editor__zone:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.wf-liquid-editor__zone--single {
  white-space: nowrap;
  overflow-x: auto;
}
.wf-liquid-editor--multiline .wf-liquid-editor__zone { min-height: 80px; }
.wf-liquid-editor__zone:empty::before {
  /* Lightweight placeholder shown when the field is empty AND not
     focused. Mirrors the default placeholder styling used elsewhere. */
  content: attr(data-placeholder);
  color: #94a3b8;
  pointer-events: none;
}

/* Pill ─────────────────────────────────────────────────────────────── */
.wf-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 4px 1px 6px;
  margin: 0 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: #1e293b;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  vertical-align: baseline;
  /* Stop selection from extending into the pill character-by-character.
     contenteditable=false on the span gives us atomic selection but
     some browsers still flicker a caret without this. */
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-pill:hover { filter: brightness(0.97); }
.wf-pill:focus-within,
.wf-pill--active {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}
.wf-pill__icon {
  display: inline-flex;
  align-items: center;
  color: #0284c7;
  flex-shrink: 0;
}
.wf-pill__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18ch;
}
.wf-pill__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  color: #0c4a6e;
  background: rgba(255,255,255,0.7);
  border-radius: 8px;
  flex-shrink: 0;
}
.wf-pill__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-left: 2px;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: #475569;
  cursor: pointer;
  flex-shrink: 0;
}
.wf-pill__remove:hover { background: rgba(0,0,0,0.08); color: #0f172a; }

/* Type-tinted variants */
.wf-pill--number {
  background: #dcfce7;
  border-color: #bbf7d0;
}
.wf-pill--number .wf-pill__icon { color: #16a34a; }
.wf-pill--number .wf-pill__badge { color: #14532d; }

.wf-pill--date {
  background: #fef3c7;
  border-color: #fde68a;
}
.wf-pill--date .wf-pill__icon { color: #b45309; }
.wf-pill--date .wf-pill__badge { color: #78350f; }

.wf-pill--array {
  background: #ede9fe;
  border-color: #ddd6fe;
}
.wf-pill--array .wf-pill__icon { color: #7c3aed; }
.wf-pill--array .wf-pill__badge { color: #4c1d95; }

.wf-pill--boolean {
  background: #fce7f3;
  border-color: #fbcfe8;
}
.wf-pill--boolean .wf-pill__icon { color: #be185d; }
.wf-pill--boolean .wf-pill__badge { color: #831843; }

/* Chip strip ──────────────────────────────────────────────────────────
   Sits absolutely on the right edge of the editor wrapper. Uses small
   square buttons for ⚡ ✨ <> with a ƒx button hidden in pill mode
   and revealed in advanced mode. */
.wf-liquid-editor__chips {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  z-index: 1;
}
.wf-liquid-editor--multiline .wf-liquid-editor__chips { top: 4px; }
.wf-liquid-editor__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
}
.wf-liquid-editor__chip:hover { background: #e2e8f0; color: #334155; }
.wf-liquid-editor__chip--ai { color: #7c3aed; }
.wf-liquid-editor__chip--ai:hover { background: #ede9fe; color: #5b21b6; }
.wf-liquid-editor__chip--mode { color: #475569; font-family: ui-monospace, SFMono-Regular, monospace; }
.wf-liquid-editor__chip--mode.wf-liquid-editor__chip--active {
  background: #1e293b;
  color: #f8fafc;
  border-color: #1e293b;
}
.wf-liquid-editor__chip--mode.wf-liquid-editor__chip--locked {
  cursor: not-allowed;
  opacity: 0.55;
}
.wf-liquid-editor__chip--fx .wf-formula-chip__glyph {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-style: italic;
  font-weight: 600;
  font-size: 12px;
}

/* Pill popover ────────────────────────────────────────────────────────
   Anchored to a clicked pill. Shows variable / filter management and
   (separately) the AI helper prompt. Kept above takeover overlays via
   the same z-index trick used by .wf-var-picker-popup. */
.wf-pill-popover {
  position: fixed;
  z-index: 2147483700;
  width: 320px;
  max-width: calc(100vw - 16px);
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.06);
  padding: 12px;
  font-size: 13px;
  color: #0f172a;
}
.wf-pill-popover__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.wf-pill-popover__title {
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-pill-popover__path {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}
.wf-pill-popover__actions {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.wf-pill-popover__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  cursor: pointer;
}
.wf-pill-popover__action:hover { background: #e2e8f0; }
.wf-pill-popover__action--danger {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}
.wf-pill-popover__action--danger:hover { background: #fee2e2; }
.wf-pill-popover__section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin: 4px 0 6px;
}
.wf-pill-popover__filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.wf-pill-popover__empty {
  font-size: 12px;
  color: #64748b;
  font-style: italic;
}
.wf-pill-popover__filter {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 8px;
  background: #f8fafc;
}
.wf-pill-popover__filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.wf-pill-popover__filter-name {
  font-weight: 500;
  font-size: 12px;
  color: #0f172a;
}
.wf-pill-popover__filter-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: #64748b;
  cursor: pointer;
}
.wf-pill-popover__filter-remove:hover { background: #e2e8f0; color: #0f172a; }
.wf-pill-popover__arg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.wf-pill-popover__arg-label {
  font-size: 11px;
  color: #475569;
  min-width: 60px;
}
.wf-pill-popover__arg-input {
  flex: 1;
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
}
.wf-pill-popover__arg-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.wf-pill-popover__add { margin-top: 4px; }
.wf-pill-popover__add-select {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  background: #fff;
}

/* AI helper variant — same shell, slightly different chrome to
   communicate "AI" without screaming for attention. */
.wf-pill-popover--ai { width: 340px; }
.wf-pill-popover__desc {
  margin: 0 0 8px;
  font-size: 12px;
  color: #475569;
  line-height: 1.4;
}
.wf-pill-popover__ai-input {
  width: 100%;
  min-height: 56px;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  background: #fff;
  resize: vertical;
}
.wf-pill-popover__ai-input:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
.wf-pill-popover__note {
  margin: 6px 0 0;
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}

/* ── Dashboard buttons ──────────────────────────────────────────────
   Action buttons users can drop onto a dashboard. Rendered in two
   places: inline inside the body layout, and right-aligned in the
   topbar (header_elements bucket). The runtime show page emits real
   <a> / <button> tags using these classes; the builder preview
   reuses them with pointer-events disabled so the canvas keeps
   ownership of click/drag. */
.page-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 100ms ease, box-shadow 100ms ease, transform 80ms ease;
  white-space: nowrap;
}
.page-button:hover  { filter: brightness(0.95); }
.page-button:active { transform: translateY(1px); }
.page-button--primary   { background: #2563eb; color: #fff; border-color: #2563eb; }
.page-button--success   { background: #16a34a; color: #fff; border-color: #16a34a; }
.page-button--warning   { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.page-button--danger    { background: #dc2626; color: #fff; border-color: #dc2626; }
.page-button--secondary { background: #475569; color: #fff; border-color: #475569; }
.page-button--neutral   { background: #fff;    color: #0f172a; border-color: #cbd5e1; }
.page-button--neutral:hover { background: #f1f5f9; }
.page-button--disabled  {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.page-button__icon {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  line-height: 1;
}
.page-button-wrap {
  /* Builder preview wrapper — keep the canvas in charge of selection
     and DnD so clicks on the preview button don't navigate. */
  display: inline-block;
}
.page-button-wrap .page-button { pointer-events: none; }

/* ── Dashboard builder: header drop zone ───────────────────────────
   Sits between the title stack and the topbar action area. Authors
   drop button palette pills here to pin a button to the live
   dashboard's right-aligned topbar.

   The group wrapper carries the authoring chrome (label + tinted
   container + persistent dashed border) so the zone reads as a
   distinct surface even when populated — without it, header buttons
   blur into the builder's own action buttons (Settings / Save / ✕).
   A divider on `.page-builder__topbar-right` separates the two
   visually. */
.page-builder__header-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px;
  padding: 4px 10px 4px 8px;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--ink) 18%, var(--line));
  background: color-mix(in srgb, var(--ink) 3%, #ffffff);
  transition: border-color 120ms ease, background-color 120ms ease,
              box-shadow 120ms ease;
}
.page-builder__header-group:has(.page-builder__header-zone.is-drop-target) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #ffffff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.page-builder__header-group-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  user-select: none;
}
.page-builder__header-group-label svg {
  opacity: 0.75;
}

/* Vertical divider between the header drop group and the builder's
   own action buttons — without this the dashed authoring container
   abuts the chrome buttons and reads as one cluster. */
.page-builder__topbar-right {
  border-left: 1px solid var(--line);
  padding-left: 12px;
  margin-left: 4px;
}

.page-builder__header-zone {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  flex-wrap: wrap;
}
.page-builder__header-zone-empty {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
}
.page-builder__header-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 8px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}
.page-builder__header-pill:hover {
  border-color: color-mix(in srgb, var(--ink) 22%, var(--line));
}
.page-builder__header-pill.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, #ffffff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.page-builder__header-pill-color {
  width: 10px; height: 10px; border-radius: 999px;
  background: #2563eb;
  flex-shrink: 0;
}
.page-builder__header-pill-color--success   { background: #16a34a; }
.page-builder__header-pill-color--warning   { background: #f59e0b; }
.page-builder__header-pill-color--danger    { background: #dc2626; }
.page-builder__header-pill-color--secondary { background: #475569; }
.page-builder__header-pill-color--neutral   { background: #cbd5e1; }
.page-builder__header-pill-label {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-builder__header-pill-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink-muted);
}
.page-builder__header-pill-del:hover {
  background: #f1f5f9;
  color: #b91c1c;
}

/* ── Dashboard widget: realistic table preview in the builder ──────
   Used by the index-table widget renderer in dashboard_registry.js.
   We're not loading real data here; the goal is just to show the
   user the column layout + actions they've configured so they can
   reason about how the live dashboard will look. */
.page-widget__table-preview {
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
}
.page-widget__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.page-widget__table th,
.page-widget__table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.page-widget__table th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.page-widget__table tbody tr:last-child td { border-bottom: none; }
.page-widget__table-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.page-widget__table-actions-col { width: 1%; }
.page-widget__table-action {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: #e2e8f0;
  color: #0f172a;
}
.page-widget__table-action--primary  { background: #dbeafe; color: #1d4ed8; }
.page-widget__table-action--success  { background: #dcfce7; color: #166534; }
.page-widget__table-action--warning  { background: #fef3c7; color: #92400e; }
.page-widget__table-action--danger   { background: #fee2e2; color: #991b1b; }
.page-widget__table-action--workflow { background: #ede9fe; color: #6d28d9; }
.page-widget__table-action--view     { background: #e0f2fe; color: #075985; }
.page-widget__table-action--edit     { background: #fef9c3; color: #854d0e; }
.page-widget__table-action--delete   { background: #fee2e2; color: #991b1b; }

/* ── Page widget: record detail (widget_record_detail) ──────────── */
.page-detail__grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; padding: 0; }
.page-detail__row  { display: contents; }
.page-detail__label { font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 0; white-space: nowrap; }
.page-detail__value { font-size: 13px; color: var(--text); padding: 6px 0; word-break: break-word; }

/* ── Page widget: metric card (widget_metric_card) ──────────────── */
.page-metric__value { font-size: 36px; font-weight: 700; line-height: 1.1; color: var(--text); }
.page-metric__period { margin-top: 6px; font-size: 12px; }
.page-metric__link  { text-decoration: none; color: inherit; }
.page-metric__link:hover .page-metric__value { color: var(--accent); }

/* ── Page widget: kanban (widget_kanban) ─────────────────────────── */
.page-kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.page-kanban--ready { /* JS has connected */ }
.page-kanban__column { flex: 0 0 260px; background: var(--soft); border-radius: 8px; padding: 10px; }
.page-kanban__column-header { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 8px; }
.page-kanban__column-body { display: flex; flex-direction: column; gap: 6px; }
.page-kanban__card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 13px; cursor: default; }

/* ── Page widget: calendar (widget_calendar) ─────────────────────── */
.page-calendar { padding: 4px 0; }
.page-calendar__empty { color: var(--muted); font-size: 13px; padding: 12px 0; }
.page-calendar__list { display: flex; flex-direction: column; gap: 8px; }
.page-calendar__day { display: flex; gap: 10px; align-items: flex-start; }
.page-calendar__date { font-size: 11px; font-weight: 600; color: var(--muted); width: 72px; flex-shrink: 0; padding-top: 3px; }
.page-calendar__events { display: flex; flex-wrap: wrap; gap: 4px; }
.page-calendar__event { display: inline-block; background: var(--accent-light, #dbeafe); color: var(--accent); border-radius: 4px; padding: 2px 8px; font-size: 12px; text-decoration: none; }
.page-calendar__event:hover { filter: brightness(0.95); }
.page-calendar__event-title { font-weight: 500; }

/* ── Page widget: gallery (widget_gallery) ───────────────────────── */
.page-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 4px 0; }
.page-gallery__card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; }
.page-gallery__card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.page-gallery__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.page-gallery__img-placeholder { width: 100%; aspect-ratio: 4/3; background: var(--soft); display: block; }
.page-gallery__card-title { font-size: 12px; font-weight: 500; padding: 6px 8px; color: var(--text); }

.page-binding-field { display: flex; }
.page-binding-field__btn {
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.page-binding-field__btn:hover { border-color: var(--accent); background: var(--soft); }
.page-binding-field__btn--empty { color: var(--muted); font-style: italic; }

/* ── Version-history drawer ───────────────────────────────────────
   Right-side slide-in used by the workflow + dashboard editors.
   Mounted at the page root; portaled wherever the History button
   lives. The backdrop swallows clicks but the drawer itself stops
   propagation so it stays open while the user reads through it. */
.cv-drawer {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  pointer-events: none;
}
.cv-drawer.is-hidden { display: none; }
.cv-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
  pointer-events: auto;
  animation: cvFadeIn 120ms ease-out;
}
.cv-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background: #ffffff;
  box-shadow: -12px 0 32px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  animation: cvSlideIn 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes cvFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cvSlideIn {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.cv-drawer__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #e2e8f0;
}
.cv-drawer__title-stack { flex: 1; min-width: 0; }
.cv-drawer__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}
.cv-drawer__subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}
.cv-drawer__close {
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: inline-flex;
}
.cv-drawer__close:hover { background: #f1f5f9; color: #0f172a; }

.cv-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 20px;
}
.cv-drawer__loading,
.cv-drawer__empty,
.cv-drawer__error {
  padding: 32px 16px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
}
.cv-drawer__empty p { margin: 0; }
.cv-drawer__empty-hint { margin-top: 6px; font-size: 12px; color: #94a3b8; }
.cv-drawer__error { color: #b91c1c; }

.cv-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cv-drawer__item {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cv-drawer__item:hover { border-color: #cbd5e1; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04); }
.cv-drawer__item--current {
  border-color: #93c5fd;
  background: #eff6ff;
}
.cv-drawer__item-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.cv-drawer__item-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cv-drawer__item-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cv-drawer__item-label {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.cv-drawer__badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #2563eb;
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 999px;
}
/* "Published" badge — green so users immediately know which version
   their viewers / runtime are seeing right now. Distinct from the
   blue "Latest" badge so the two can show on the same row when the
   user has only ever published once. */
.cv-drawer__badge--published {
  background: #16a34a;
  color: #ffffff;
}
.cv-drawer__item--published {
  background: #f0fdf4;
}
.cv-drawer__item-meta {
  font-size: 12px;
  color: #64748b;
}
.cv-drawer__item-meta--restored { color: #6d28d9; }
.cv-drawer__item-note {
  font-size: 12px;
  color: #1f2937;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 4px;
  white-space: pre-wrap;
}

.cv-drawer__item-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.cv-drawer__btn {
  appearance: none;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.cv-drawer__btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.cv-drawer__btn:disabled { opacity: 0.6; cursor: progress; }
.cv-drawer__btn--primary {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
}
.cv-drawer__btn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* ── Preview-mode banner ──────────────────────────────────────────
   Shown across the top of the workflow/dashboard editor when the
   user is viewing a historical version via `?preview_version=N`.
   Sticky-on-top so it can't be scrolled away while the user makes
   the call to restore. */
.cv-preview-banner {
  position: sticky;
  top: 0;
  z-index: 2147483550;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: #fef3c7;
  border-bottom: 1px solid #fcd34d;
  color: #78350f;
  font-size: 13px;
}
.cv-preview-banner__icon {
  display: inline-flex;
  flex-shrink: 0;
}
.cv-preview-banner__text { flex: 1; }
.cv-preview-banner__text strong { color: #6b3204; }
.cv-preview-banner__pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: 1px;
}
.cv-preview-banner__pill--published {
  background: #16a34a;
  color: #ffffff;
}
.cv-preview-banner__pill--draft {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fcd34d;
}
.cv-preview-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cv-preview-banner__btn {
  appearance: none;
  border: 1px solid #f59e0b;
  background: #ffffff;
  color: #78350f;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cv-preview-banner__btn:hover { background: #fef3c7; }
.cv-preview-banner__btn--primary {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}
.cv-preview-banner__btn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* When the dashboard editor is in preview mode, the form's own
   topbar is replaced by just the banner — strip the wrapper's flex
   chrome so the banner spans edge-to-edge instead of sitting in a
   centered row. */
.page-builder__topbar--preview {
  display: block;
  padding: 0;
  border-bottom: 0;
  background: transparent;
}

/* ===== Record picker (input_record_picker) ============================
 *
 * Used in the workflow builder canvas (sample preview) AND on the
 * runtime interaction modal that end-users actually fill in. Same DOM,
 * same styles — `is-builder` variants tweak chrome only where the
 * design surface needs to look different from the live picker.
 */
.wf-int__record-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
}
.wf-int__record-picker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.wf-int__record-picker-titlecol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wf-int__record-picker-label {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}
.wf-int__record-picker-help {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}
.wf-int__record-picker-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 0 0 auto;
}
.wf-int__record-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #dbeafe;
}
.wf-int__record-picker-chip--muted {
  background: #f3f4f6;
  color: #4b5563;
  border-color: #e5e7eb;
}
.wf-int__record-picker-counter {
  font-size: 11px;
  color: #6b7280;
  text-align: right;
}

/* ── Search box ────────────────────────────────────────────────────── */
.wf-int__record-picker-searchwrap {
  position: relative;
  display: flex;
  align-items: center;
}
.wf-int__record-picker-searchicon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  display: inline-flex;
}
.wf-int__record-picker-search {
  width: 100%;
  padding: 8px 12px 8px 32px;
  font-size: 13px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  color: #111827;
  outline: none;
  transition: border-color 120ms, background 120ms, box-shadow 120ms;
}
.wf-int__record-picker-search:focus {
  border-color: #93c5fd;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* ── Empty / placeholder states ────────────────────────────────────── */
.wf-int__record-picker-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px 16px;
  text-align: center;
  border: 1px dashed #e5e7eb;
  background: #fafbfc;
  border-radius: 10px;
  color: #6b7280;
}
.wf-int__record-picker-empty-title {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.wf-int__record-picker-empty-body {
  font-size: 12px;
  color: #6b7280;
}
.wf-int__record-picker-builder-section {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: #94a3b8;
  margin-top: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #f1f5f9;
}

/* ── Dropdown (typeahead combobox) ──────────────────────────────────
 *
 * The dropdown format is a search input that opens a floating result
 * panel only while focused AND there's a query that matches at least
 * one record. When the input loses focus or the query is cleared, the
 * panel collapses entirely — i.e. it behaves like a real search box,
 * not a permanently-open list.
 */
.wf-int__record-picker-combobox {
  position: relative;
  width: 100%;
}
.wf-int__record-picker-combobox-field {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 10px 6px 10px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: text;
  transition: border-color 120ms, box-shadow 120ms;
  min-height: 38px;
}
.wf-int__record-picker-combobox-field:hover { border-color: #cbd5e1; }
.wf-int__record-picker-combobox.is-open .wf-int__record-picker-combobox-field,
.wf-int__record-picker-combobox-field:focus-within {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.wf-int__record-picker-combobox-chips {
  display: contents;
}
.wf-int__record-picker-combobox-input {
  flex: 1 1 120px;
  min-width: 80px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: #111827;
  padding: 4px 0;
}
.wf-int__record-picker-combobox-input::placeholder { color: #9ca3af; }
.wf-int__record-picker-combobox-input:disabled {
  color: #9ca3af;
  cursor: not-allowed;
}
.wf-int__record-picker-combobox-caret {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: #9ca3af;
  pointer-events: none;
  transition: transform 120ms;
}
.wf-int__record-picker-combobox.is-open .wf-int__record-picker-combobox-caret {
  transform: rotate(180deg);
  color: #2563eb;
}

/* Floating result panel. Absolutely positioned just below the input. */
.wf-int__record-picker-combobox-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}
.wf-int__record-picker-combobox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: #1f2937;
  cursor: pointer;
  border-radius: 6px;
}
.wf-int__record-picker-combobox-row:hover,
.wf-int__record-picker-combobox-row.is-active {
  background: #eff6ff;
  color: #1e3a8a;
}
.wf-int__record-picker-combobox-row.is-selected {
  background: #f5f8ff;
  font-weight: 500;
}
.wf-int__record-picker-combobox-row-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-int__record-picker-combobox-row-mark {
  background: #fef3c7;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}
.wf-int__record-picker-combobox-row-tick {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: #2563eb;
}
.wf-int__record-picker-combobox-empty {
  padding: 12px 10px;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}
.wf-int__record-picker-combobox-builder-hint {
  margin-top: 6px;
  padding: 8px 10px;
  font-size: 12px;
  color: #6b7280;
  background: #fafbfc;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
}

/* Selected-record chips inside the multi combobox + (legacy) inside
 * other multi-select pickers if any are still using the picker chip
 * styling. */
.wf-int__record-picker-pickedchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 4px 3px 9px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e3a8a;
  border: 1px solid #dbeafe;
  font-weight: 500;
  flex: 0 0 auto;
}
.wf-int__record-picker-pickedchip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: #1e40af;
  cursor: pointer;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
}
.wf-int__record-picker-pickedchip-x:hover { background: #c7d2fe; }

/* ── Table format ──────────────────────────────────────────────────── */
.wf-int__record-picker-tablewrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
}
.wf-int__record-picker-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.wf-int__record-picker-table-th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 9px 12px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.wf-int__record-picker-table-th--right  { text-align: right; }
.wf-int__record-picker-table-th--center { text-align: center; }
.wf-int__record-picker-table-td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #1f2937;
  vertical-align: top;
}
.wf-int__record-picker-table-td--right  { text-align: right; font-variant-numeric: tabular-nums; }
.wf-int__record-picker-table-td--center { text-align: center; }
.wf-int__record-picker-table-row {
  cursor: pointer;
  transition: background 120ms;
}
.wf-int__record-picker-table-row:hover { background: #f8fafc; }
.wf-int__record-picker-table-row.is-selected { background: #eff6ff; }
.wf-int__record-picker-table-row.is-selected td { color: #1e3a8a; }
.wf-int__record-picker-table-row:last-child td { border-bottom: 0; }
.wf-int__record-picker-table-sel {
  width: 36px;
  padding: 10px 0 10px 12px;
  text-align: center;
}
.wf-int__record-picker-table-sel input {
  accent-color: #2563eb;
  cursor: pointer;
  width: 16px;
  height: 16px;
}

/* ── Cards format ──────────────────────────────────────────────────── */
.wf-int__record-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.wf-int__record-picker-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 160ms, transform 160ms, background 120ms;
  min-height: 80px;
}
.wf-int__record-picker-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
.wf-int__record-picker-card.is-selected {
  border-color: #2563eb;
  background: #f5f8ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.wf-int__record-picker-card-sel {
  position: absolute;
  inset: 0 0 auto auto;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
/* Visible "checkmark dot" indicator that swaps with the card's selected state. */
.wf-int__record-picker-card-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid #d1d5db;
  background: #ffffff;
  color: transparent;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.wf-int__record-picker-card.is-selected .wf-int__record-picker-card-indicator {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
.wf-int__record-picker-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  /* Reserve space so the indicator never overlaps the heading */
  padding-right: 22px;
}
.wf-int__record-picker-card-label {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

/* ── Builder-only: card design surface ─────────────────────────────── */
.wf-int__record-picker-card-builder {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #fafbfc;
}
.wf-int__record-picker-card-builder-hint {
  font-size: 11px;
  color: #6b7280;
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wf-int__record-picker-card-builder-hint::before {
  content: "✎";
  font-size: 12px;
  color: #94a3b8;
}
.wf-int__record-picker-card--builder {
  border-style: dashed;
  border-color: #c7d2fe;
  background: #ffffff;
  cursor: default;
}
.wf-int__record-picker-card--builder:hover {
  transform: none;
  box-shadow: none;
  border-color: #93c5fd;
}
.wf-int__record-picker-card-body--builder {
  min-height: 90px;
  padding-right: 0;
}

/* ===== Inspector: dashboards-style table-columns editor ===============
 *
 * Mirrors the "Selected columns" cards from the dashboard column picker.
 * Each column is a small panel with a drag handle, position, and remove
 * button; cards reorder via native HTML5 drag and drop.
 */
.wf-builder-inspector__columns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf-builder-inspector__columns-empty {
  font-size: 12px;
  color: #6b7280;
  padding: 12px;
  background: #fafbfc;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
  text-align: center;
}
.wf-builder-inspector__column-card {
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  transition: border-color 120ms, box-shadow 120ms;
}
.wf-builder-inspector__column-card.is-dragging {
  opacity: 0.6;
  border-color: #93c5fd;
}
.wf-builder-inspector__column-card.is-drop-target {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}
.wf-builder-inspector__column-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 6px;
  background: #f9fafb;
  border-bottom: 1px solid #f1f5f9;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.wf-builder-inspector__column-drag {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: grab;
  border-radius: 4px;
}
.wf-builder-inspector__column-drag:hover { background: #eef2f7; color: #475569; }
.wf-builder-inspector__column-card.is-dragging .wf-builder-inspector__column-drag { cursor: grabbing; }
.wf-builder-inspector__column-pos {
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  background: #e2e8f0;
  border-radius: 999px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.wf-builder-inspector__column-title {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-builder-inspector__column-remove {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.wf-builder-inspector__column-remove:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}
.wf-builder-inspector__column-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}
.wf-builder-inspector__columns-add {
  align-self: flex-start;
  border: 1px dashed #cbd5e1;
  background: #ffffff;
  color: #2563eb;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.wf-builder-inspector__columns-add:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

/* ---------- Custom object definition form ---------- */

.custom-object-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.custom-object-form__panel {
  padding: 20px;
}

.custom-object-form__basics {
  display: grid;
  grid-template-columns: 80px minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.custom-object-form__basics .custom-object-form__description {
  grid-column: 1 / -1;
}

.custom-object-form__icon-input {
  text-align: center;
  font-size: 22px;
  min-width: 0;
  width: 100%;
  padding: 8px;
}

.custom-object-form__slug-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

@media (max-width: 720px) {
  .custom-object-form__basics {
    grid-template-columns: 1fr;
  }
}

/* Segmented (used for status) */
.segmented {
  display: inline-flex;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  width: max-content;
}
.segmented__option {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.segmented__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.segmented__option:hover {
  color: #1e293b;
}
.segmented__option.is-active {
  background: #ffffff;
  color: #1d4ed8;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px #cbd5e1;
}

/* Field list */
.custom-object-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.custom-object-fields__empty {
  border: 1px dashed var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  background: #f8fafc;
}

.custom-object-field {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.custom-object-field:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.custom-object-field__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.custom-object-field__handle {
  color: #94a3b8;
  cursor: grab;
  font-size: 14px;
  letter-spacing: -2px;
  user-select: none;
}
.custom-object-field__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.custom-object-field__name {
  font-weight: 600;
  font-size: 14px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-object-field__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted, #64748b);
  font-size: 12px;
}
.custom-object-field__key-display {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: #eef2ff;
  color: #3730a3;
  padding: 1px 6px;
  border-radius: 4px;
}
.custom-object-field__type-pill {
  display: inline-flex;
  align-items: center;
  background: #ecfeff;
  color: #155e75;
  border: 1px solid #cffafe;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.custom-object-field__flag {
  display: inline-flex;
  background: #fef3c7;
  color: #854d0e;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
}

.custom-object-field__actions {
  display: flex;
  gap: 6px;
}
.custom-object-field__remove {
  color: #b91c1c;
  border-color: #fecaca;
  background: #ffffff;
}
.custom-object-field__remove:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}
.custom-object-field__restore {
  display: none;
}

.custom-object-field__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.custom-object-field__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 900px) {
  .custom-object-field__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.custom-object-field__key-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.custom-object-field__flags {
  flex-direction: column;
  gap: 4px;
}
.custom-object-field__flags-label {
  font-size: 13px;
  color: var(--muted, #64748b);
  margin-bottom: 2px;
}
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.checkbox-inline input[type="checkbox"] {
  margin: 0;
}

.custom-object-field__section {
  background: #f8fafc;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  padding: 12px;
}
.custom-object-field__section[hidden] {
  display: none !important;
}
.custom-object-field__section-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.custom-object-field__more {
  border-top: 1px dashed var(--line, #e5e7eb);
  padding-top: 10px;
}
.custom-object-field__more > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted, #64748b);
  list-style: none;
  user-select: none;
}
.custom-object-field__more > summary::-webkit-details-marker {
  display: none;
}
.custom-object-field__more > summary::before {
  content: "▶ ";
  font-size: 9px;
  margin-right: 4px;
  opacity: 0.7;
}
.custom-object-field__more[open] > summary::before {
  content: "▼ ";
}
.custom-object-field__more > .custom-object-field__grid {
  margin-top: 12px;
}

/* Soft-deleted state */
.custom-object-field__removed-banner {
  display: none;
  padding: 8px 14px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 13px;
  border-top: 1px solid #fecaca;
}
.custom-object-field--removed .custom-object-field__body,
.custom-object-field--removed .custom-object-field__header {
  opacity: 0.45;
  pointer-events: none;
}
.custom-object-field--removed .custom-object-field__removed-banner {
  display: block;
}
.custom-object-field--removed .custom-object-field__remove {
  display: none;
}
.custom-object-field--removed .custom-object-field__actions {
  pointer-events: auto;
}
.custom-object-field--removed .custom-object-field__restore {
  display: inline-flex;
  pointer-events: auto;
}

/* Advanced disclosure */
.custom-object-form__advanced > summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  list-style: none;
  user-select: none;
  padding: 4px 0;
}
.custom-object-form__advanced > summary::-webkit-details-marker {
  display: none;
}
.custom-object-form__advanced > summary::before {
  content: "▶";
  font-size: 10px;
  color: var(--muted, #64748b);
  margin-right: 4px;
}
.custom-object-form__advanced[open] > summary::before {
  content: "▼";
}
.custom-object-form__advanced-title {
  font-weight: 600;
  font-size: 14px;
  color: #0f172a;
}
.custom-object-form__advanced-grid {
  margin-top: 16px;
}

/* Sticky save bar */
.custom-object-form__actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.04);
}

/* ---------- Custom records (data) pages ---------- */

.custom-records-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.custom-records-table-panel {
  padding: 0;
  overflow: hidden;
}
.custom-records-table {
  width: 100%;
  border-collapse: collapse;
}
.custom-records-table thead th {
  background: #f8fafc;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.custom-records-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  color: #0f172a;
  vertical-align: middle;
}
.custom-records-table tbody tr:last-child td {
  border-bottom: 0;
}
.custom-records-table tbody tr:hover {
  background: #f8fafc;
}
.custom-records-table .actions-col {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.custom-records-table .actions-col .btn + .btn,
.custom-records-table .actions-col .btn + form,
.custom-records-table .actions-col form + .btn,
.custom-records-table .actions-col form + form {
  margin-left: 6px;
}
.custom-records-table__title {
  color: #1d4ed8;
  font-weight: 500;
  text-decoration: none;
}
.custom-records-table__title:hover {
  text-decoration: underline;
}
.custom-records-page__limit {
  padding: 10px 16px;
  margin: 0;
  border-top: 1px solid var(--line, #e5e7eb);
  font-size: 12px;
  background: #f8fafc;
}
.inline-form {
  display: inline;
}

/* Status pills (records list) */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #e2e8f0;
  color: #334155;
  text-transform: capitalize;
}
.status-pill--open,
.status-pill--active,
.status-pill--in-progress,
.status-pill--doing,
.status-pill--pending {
  background: #dbeafe;
  color: #1e40af;
}
.status-pill--done,
.status-pill--complete,
.status-pill--completed,
.status-pill--closed {
  background: #dcfce7;
  color: #166534;
}
.status-pill--blocked,
.status-pill--rejected,
.status-pill--cancelled,
.status-pill--canceled,
.status-pill--archived {
  background: #fee2e2;
  color: #991b1b;
}
.status-pill--review,
.status-pill--on-hold {
  background: #fef3c7;
  color: #854d0e;
}

/* Empty state */
.custom-records-empty {
  text-align: center;
  padding: 56px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.custom-records-empty__icon {
  font-size: 40px;
  line-height: 1;
}
.custom-records-empty h2 {
  margin: 0;
  font-size: 18px;
}
.custom-records-empty p {
  margin: 0;
  max-width: 36em;
}

/* Custom record form */
.custom-record-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.custom-record-form__panel {
  padding: 20px;
}
.custom-record-form__json {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  min-height: 110px;
}
.custom-record-form__required-hint {
  color: #b45309;
  font-size: 12px;
  margin: 0;
}
.custom-record-form__actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.04);
}

/* Custom record show */
.custom-record-show {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.custom-record-show__panel {
  padding: 20px 24px;
}
.custom-record-show__grid {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  row-gap: 14px;
  column-gap: 28px;
  margin: 0;
}
.custom-record-show__row {
  display: contents;
}
.custom-record-show__row dt {
  margin: 0;
  padding-top: 2px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #64748b);
}
.custom-record-show__row dd {
  margin: 0;
  font-size: 14px;
  color: #0f172a;
  line-height: 1.5;
  word-break: break-word;
  min-width: 0;
}
.custom-record-show__row dd .muted {
  color: var(--muted, #94a3b8);
}
.custom-record-show__row + .custom-record-show__row dt,
.custom-record-show__row + .custom-record-show__row dd {
  border-top: 1px solid #f1f5f9;
  padding-top: 14px;
}
.custom-record-show__json {
  margin: 0;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow: auto;
}
.custom-record-show__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.custom-record-show__chip {
  display: inline-block;
  padding: 2px 10px;
  background: #eef2ff;
  color: #3730a3;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}
.custom-record-show__owner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.custom-record-show__owner-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 600;
}
.custom-record-show__ref-link {
  color: #1d4ed8;
  text-decoration: none;
}
.custom-record-show__ref-link:hover {
  text-decoration: underline;
}
@media (max-width: 720px) {
  .custom-record-show__grid {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .custom-record-show__row + .custom-record-show__row dt {
    border-top: 1px solid #f1f5f9;
    padding-top: 14px;
    margin-top: 6px;
  }
  .custom-record-show__row + .custom-record-show__row dd {
    border-top: 0;
    padding-top: 4px;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════
   BUILDER section — gutter rail mode for "build the system"
   surfaces (workflows, dashboards, pages, custom objects, etc).
   Mirrors the Inbox shell pattern: app rail on the far left,
   then a dedicated sidebar tuned to *artifacts* (with counts and
   a "+ New" affordance) instead of business feature areas.
   ════════════════════════════════════════════════════════════ */

body.pp-body-builder {
  padding-left: 0;
  padding-right: var(--shell-gutter);
  /* Same slate-900 chrome as the rest of the app — the Builder body
     supplies the right-edge gutter strip; the rail covers the left. */
  background: #0f172a;
}

.builder-page-shell {
  margin-left: 56px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
  padding-top: 48px;
  overflow: hidden;
}

.pp-body-builder .builder-page-shell .builder-shell {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 240px 1fr;
  background: var(--bg);
  border-radius: 16px;
  overflow: hidden;
}

.builder-sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}

.builder-sidebar-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
  /* Positioning context for the "+ New" dropdown — using the header
     instead of the small trigger button means the dropdown can be
     sized in terms of the full sidebar width (with `left`/`right`
     constraints) rather than fighting its 28px-wide trigger parent. */
  position: relative;
}

.builder-sidebar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.builder-sidebar-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #0f172a);
  letter-spacing: -0.01em;
}

/* "+ New" trigger — uses native <details> so we get a free
   click-outside-to-close without any JS. The positioning context for
   the dropdown lives on `.builder-sidebar-header` (not here), so the
   menu can be sized in terms of the sidebar's full inner width. */
.builder-sidebar-create {
  position: static;
}

.builder-sidebar-create-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.builder-sidebar-create-trigger::-webkit-details-marker { display: none; }
.builder-sidebar-create-trigger:hover { background: #1d4ed8; }
.builder-sidebar-create-trigger svg { width: 16px; height: 16px; }

.builder-sidebar-create-menu {
  /* Anchored to `.builder-sidebar-header` — drops below the header
     and stretches between the header's left and right padding so the
     menu sits cleanly inside the sidebar without poking under the
     app rail (the previous `right: 0; min-width: 240px` setup was
     wider than the sidebar's 240px frame and overflowed left). */
  position: absolute;
  top: calc(100% + 4px);
  left: 16px;
  right: 16px;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  padding: 6px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.builder-sidebar-create-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text, #0f172a);
}

.builder-sidebar-create-item:hover { background: #f1f5f9; }

.builder-sidebar-create-item-label {
  font-size: 13px;
  font-weight: 600;
}

.builder-sidebar-create-item-desc {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

.builder-sidebar-create-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  text-align: center;
}

.builder-sidebar-nav {
  padding: 12px 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.builder-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.builder-sidebar-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  margin: 4px 8px 6px;
}

.builder-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text, #0f172a);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.builder-sidebar-item:hover {
  background: #f1f5f9;
}

.builder-sidebar-item.is-active {
  background: #e0e7ff;
  color: #1e3a8a;
  font-weight: 600;
}

.builder-sidebar-item.is-disabled {
  color: var(--text-muted, #94a3b8);
  cursor: not-allowed;
}

.builder-sidebar-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-sidebar-item-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  background: #f1f5f9;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}

.builder-sidebar-item.is-active .builder-sidebar-item-count {
  background: #c7d2fe;
  color: #1e3a8a;
}

.builder-sidebar-item-pill {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #92400e;
  background: #fef3c7;
  padding: 1px 6px;
  border-radius: 999px;
}

/* "Builder home" sits above the first group title. We give it a thin
   divider underneath (rather than a group heading above it) so it
   reads as the section's primary anchor link. */
.builder-sidebar-group--home {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  margin-bottom: 6px;
}

.builder-sidebar-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--text-muted, #64748b);
}

.builder-sidebar-item-icon svg {
  width: 16px;
  height: 16px;
}

.builder-sidebar-item.is-active .builder-sidebar-item-icon {
  color: #1e3a8a;
}

/* ── Builder main pane ────────────────────────────────────── */

.builder-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  background: var(--bg);
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

.builder-main > .topbar {
  position: sticky;
  top: 0;
  /* Above sticky .data-table thead (z-index: 5) so facet/filter dropdowns
     in the utility bar aren't covered by the table header. */
  z-index: 30;
}

.builder-main > .content {
  /* See `.builder-main > .content::after` rule near the top of the
     file. padding-bottom on this element is silently dropped by the
     browser (flex + overflow:auto bug); the pseudo reserves the
     trailing space in normal flow instead. */
  padding: 24px 32px 0;
  min-height: 0;
}

/* ── Builder landing page ─────────────────────────────────── */

.builder-landing {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.builder-landing-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.builder-landing-hero-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text, #0f172a);
  letter-spacing: -0.02em;
}

.builder-landing-hero-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted, #64748b);
  max-width: 56em;
  line-height: 1.5;
}

.builder-landing-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.builder-landing-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #64748b);
}

.builder-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.builder-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text, #0f172a);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
  position: relative;
}

.builder-tile:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}

.builder-tile:active {
  transform: translateY(1px);
}

.builder-tile.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.builder-tile-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: #2563eb;
}

.builder-tile-icon svg {
  width: 20px;
  height: 20px;
}

.builder-tile-label {
  font-size: 14px;
  font-weight: 600;
}

.builder-tile-desc {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  line-height: 1.4;
}

.builder-tile-pill {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #92400e;
  background: #fef3c7;
  padding: 2px 6px;
  border-radius: 999px;
  vertical-align: middle;
}

.builder-recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.builder-recent-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text, #0f172a);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.builder-recent-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 12px rgba(37, 99, 235, 0.06);
}

.builder-recent-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2563eb;
}

.builder-recent-title {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-recent-meta {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

/* ── Mobile: collapse builder sidebar to a top nav strip ── */
@media (max-width: 768px) {
  .pp-body-builder .builder-page-shell {
    margin-left: 0;
    padding-top: 48px;
  }
  .pp-body-builder .builder-page-shell .builder-shell {
    grid-template-columns: 1fr;
    border-radius: 0;
  }
  .builder-sidebar {
    border-radius: 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
    max-height: 220px;
  }
  .builder-main > .content { padding: 16px; }
  .builder-tile-grid,
  .builder-recent-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   SETTINGS section — modeled directly after the Builder shell
   so the two "system" surfaces (build artifacts vs. configure
   account) feel like siblings. Same chrome (slate-900 backdrop,
   rounded inner panel, dedicated sidebar) but distinct class
   names so each section can evolve independently.
   ════════════════════════════════════════════════════════════ */

body.pp-body-settings {
  padding-left: 0;
  padding-right: var(--shell-gutter);
  background: #0f172a;
}

.settings-page-shell {
  margin-left: 56px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
  padding-top: 48px;
  overflow: hidden;
}

.pp-body-settings .settings-page-shell .settings-shell {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 240px 1fr;
  background: var(--bg);
  border-radius: 16px;
  overflow: hidden;
}

.settings-sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}

.settings-sidebar-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.settings-sidebar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.settings-sidebar-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #0f172a);
  letter-spacing: -0.01em;
}

.settings-sidebar-nav {
  padding: 12px 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-sidebar-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  margin: 4px 8px 6px;
}

/* ── Collapsible groups (details/summary) ─────────────────────────────── */

/* The <details> element naturally handles show/hide; we override display
   so flex doesn't break the native open/closed behaviour. */
details.settings-sidebar-group {
  display: block;
}

/* Remove the native disclosure triangle in all browsers */
.settings-sidebar-group-summary {
  list-style: none;
}
.settings-sidebar-group-summary::-webkit-details-marker {
  display: none;
}

/* Group header layout — icon · title · chevron */
.settings-sidebar-group-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 6px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  /* Prevent the group title's default margin from adding space here */
}
.settings-sidebar-group-summary:hover {
  background: #f1f5f9;
}

/* Title text lives inside <summary> — zero out the margin from the
   standalone-heading context so it aligns neatly with the icon. */
.settings-sidebar-group-summary .settings-sidebar-group-title {
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* Small icon to the left of the group title */
.settings-sidebar-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--text-muted, #64748b);
}
.settings-sidebar-group-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Animated chevron — points down when closed, up when open */
.settings-sidebar-group-chevron {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  color: var(--text-muted, #64748b);
  transition: transform 0.2s ease;
}
details.settings-sidebar-group[open] > .settings-sidebar-group-summary .settings-sidebar-group-chevron {
  transform: rotate(180deg);
}

/* Items container — replaces the old direct-child flex layout */
.settings-sidebar-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 0;
}

.settings-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text, #0f172a);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.settings-sidebar-item:hover {
  background: #f1f5f9;
}

.settings-sidebar-item.is-active {
  background: #e0e7ff;
  color: #1e3a8a;
  font-weight: 600;
}

.settings-sidebar-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Settings home" anchor at the top of the sidebar — same divider
   treatment as Builder's "Builder home" so the two sections feel
   visually consistent. */
.settings-sidebar-group--home {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  margin-bottom: 6px;
}

.settings-sidebar-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--text-muted, #64748b);
}

.settings-sidebar-item-icon svg {
  width: 16px;
  height: 16px;
}

.settings-sidebar-item.is-active .settings-sidebar-item-icon {
  color: #1e3a8a;
}

/* ── Settings main pane ───────────────────────────────────── */

.settings-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  background: var(--bg);
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

.settings-main > .topbar {
  position: sticky;
  top: 0;
  /* Above sticky .data-table thead (z-index: 5) so facet/filter dropdowns
     in the utility bar aren't covered by the table header. */
  z-index: 30;
}

.settings-main > .content {
  /* The bottom padding here is intentionally 0 — see the
     `.settings-main > .content::after` rule near the top of the file
     for why padding-bottom on this element is silently dropped by
     the browser (flex + overflow:auto bug). The pseudo-element
     reserves 32px of trailing space inside the normal flow so the
     scroll viewport actually grows to include it. */
  padding: 24px 32px 0;
  min-height: 0;
}

/* ── Mobile: collapse settings sidebar to a top nav strip ── */
@media (max-width: 768px) {
  .pp-body-settings .settings-page-shell {
    margin-left: 0;
    padding-top: 48px;
  }
  .pp-body-settings .settings-page-shell .settings-shell {
    grid-template-columns: 1fr;
    border-radius: 0;
  }
  .settings-sidebar {
    border-radius: 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
    max-height: 220px;
  }
  .settings-main > .content { padding: 16px; }
}

/* ══════════════════════════════════════════════════════════
   DOCUMENT TEMPLATE BUILDER (new/edit form)
   Full-bleed two-column layout: monospace HTML editor on the
   left with a floating AI Assistant popover, compact sidebar
   with settings, click-to-insert variables, and a server-side
   searchable preview record picker on the right. Sticky action
   bar at the bottom keeps Save in reach without scrolling.
   ══════════════════════════════════════════════════════════ */
.dt-page {
  /* Use the full builder content width. The default settings-layout
     wrapper is intentionally skipped on these pages so the editor and
     sidebar can stretch as wide as the screen allows. */
  width: 100%;
  max-width: none;
  margin: 0;
}

.dt-builder-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 84px;
}

.dt-form-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 12px 16px;
  color: #991b1b;
}
.dt-form-errors h2 { margin: 0 0 6px; font-size: 14px; }
.dt-form-errors ul { margin: 0; padding-left: 18px; font-size: 13px; }
.dt-form-errors li { margin: 2px 0; }

.dt-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}

.dt-builder__main { min-width: 0; }

.dt-builder__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 16px;
  min-width: 0;
}

/* ─── Editor panel ─────────────────────────────────────── */
.dt-editor-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

/* Anchor for the floating AI Assistant popover and the inline
   variable autocomplete menu. */
.dt-editor-wrap {
  position: relative;
}

/* ─── Inline variable autocomplete menu ───────────────────────── */
/* Floats next to the textarea caret when the user types `{{` (or
   clicks the toolbar's "Insert variable" button). Position is set
   inline by JS via a mirror-div caret-coords measurement. */
.dt-varmenu {
  position: absolute;
  z-index: 40;
  min-width: 220px;
  max-width: 320px;
  max-height: 260px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 14px 32px -10px rgba(15, 23, 42, 0.25), 0 4px 8px rgba(15, 23, 42, 0.08);
  padding: 4px;
  animation: dt-varmenu-in 100ms ease;
}
.dt-insert-var-anchor {
  position: relative;
}
.dt-insert-var-anchor .dt-varmenu--palette {
  top: calc(100% + 4px);
  left: 0;
  right: auto;
}
.dt-varmenu--autocomplete {
  position: fixed;
}
@keyframes dt-varmenu-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dt-varmenu__item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 6px 8px;
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 80ms ease;
}
.dt-varmenu__item:hover,
.dt-varmenu__item.is-active {
  background: #eef2ff;
}
.dt-varmenu__brace {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: #94a3b8;
  flex-shrink: 0;
}
.dt-varmenu__token {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: #1e293b;
  background: transparent;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.dt-varmenu__token mark {
  background: #fef08a;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}
.dt-varmenu__more {
  font-size: 11px;
  color: var(--muted, #94a3b8);
  padding: 6px 8px 4px;
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
  font-style: italic;
}
.dt-varmenu__empty {
  font-size: 12px;
  color: var(--muted, #94a3b8);
  padding: 12px 10px;
  text-align: center;
}
.dt-editor-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dt-editor-toolbar__title h2 { margin: 0; font-size: 16px; }
.dt-editor-toolbar__title .muted { margin: 4px 0 0; font-size: 12px; }
.dt-editor-toolbar__meta { display: flex; align-items: center; gap: 8px; }

/* Inline keyboard-style hint (e.g. for `{{`) used in helper copy. */
.dt-kbd {
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--line, #e2e8f0);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #fff;
  color: #334155;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.dt-kbd--sm { font-size: 10.5px; padding: 0 5px; }

.dt-insert-var-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
}
.dt-insert-var-btn svg { color: #6d28d9; }
.dt-insert-var-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 5px;
  height: 16px;
  font-size: 10.5px;
  font-weight: 600;
  color: #5b21b6;
  background: #ede9fe;
  border-radius: 9px;
  letter-spacing: 0.02em;
}
.dt-counter {
  font-size: 12px;
  color: var(--muted, #64748b);
  font-variant-numeric: tabular-nums;
  background: var(--soft, #f1f5f9);
  border-radius: 999px;
  padding: 3px 10px;
}

.dt-editor-textarea {
  width: 100%;
  min-height: 520px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
  color: #0f172a;
  background: #fafafa;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  white-space: pre;
  overflow: auto;
  tab-size: 2;
  -moz-tab-size: 2;
}
.dt-editor-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.dt-editor-hint {
  margin: 0;
  font-size: 12px;
}
.dt-editor-hint code {
  background: var(--soft, #f1f5f9);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* ─── Sidebar panels ──────────────────────────────────── */
.dt-side-panel { padding: 14px 16px; }
.dt-side-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.dt-side-panel__head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}

.dt-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--soft, #f1f5f9);
  color: #475569;
}
.dt-badge--standard { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }
.dt-badge--beta     { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }

/* ─── Sidebar fields ──────────────────────────────────── */
.dt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.dt-field:last-child { margin-bottom: 0; }
.dt-field label,
.dt-field-label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
.dt-help {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted, #64748b);
  line-height: 1.45;
}
.dt-help--block { margin: 0 0 10px; }
.dt-help-inline { font-weight: 400; color: var(--muted, #64748b); }

.input--static {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--soft, #f1f5f9);
  color: #1f2937;
  font-weight: 500;
  cursor: not-allowed;
}
.dt-locked-icon { font-size: 12px; opacity: 0.7; }

/* ─── Default-template toggle ─────────────────────────── */
.dt-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--soft, #f8fafc);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 12px;
}
.dt-toggle input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}
.dt-toggle strong { display: block; font-size: 13px; color: #0f172a; }
.dt-toggle .dt-help { display: block; margin-top: 2px; }

/* ─── Width × Height inline ───────────────────────────── */
.dt-dimensions {
  display: grid;
  /* `minmax(0, 1fr)` lets cells shrink below their intrinsic size so
     the inputs never overflow the sidebar (which is what we saw before
     — the unit label badge was pushing the whole grid past 100%). */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.dt-dimensions__cell {
  position: relative;
  min-width: 0;
}
.dt-dimensions__cell .input {
  padding-right: 28px;
  width: 100%;
  min-width: 0;
}
.dt-dimensions__label {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--muted, #94a3b8);
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dt-dimensions__sep { color: var(--muted, #94a3b8); font-size: 13px; }

/* ─── Floating AI Assistant ───────────────────────────── */
.dt-ai-floater {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
}
.dt-ai-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35), 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.dt-ai-trigger:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4), 0 2px 4px rgba(15, 23, 42, 0.08);
}
.dt-ai-trigger:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 2px;
}
.dt-ai-trigger svg {
  flex-shrink: 0;
}

.dt-ai-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(15, 23, 42, 0.08);
  padding: 14px;
  z-index: 50;
  animation: dt-pop-in 140ms ease;
}
@keyframes dt-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dt-ai-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.dt-ai-popover__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6d28d9;
}
.dt-ai-popover__close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 6px;
}
.dt-ai-popover__close:hover { background: #f1f5f9; color: #0f172a; }
.dt-ai-popover__hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted, #64748b);
}

.dt-ai-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
  background: #f8fafc;
  padding: 4px;
  border-radius: 10px;
}
.dt-ai-mode__opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  transition: background 120ms ease;
}
.dt-ai-mode__opt input[type="radio"] {
  margin-top: 2px;
  accent-color: #7c3aed;
}
.dt-ai-mode__opt strong {
  display: block;
  font-size: 12.5px;
  color: #0f172a;
}
.dt-ai-mode__opt small {
  display: block;
  font-size: 11px;
  color: var(--muted, #64748b);
  line-height: 1.35;
  margin-top: 1px;
}
.dt-ai-mode__opt:has(input[type="radio"]:checked) {
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 0 0 1px #ddd6fe;
}

.dt-ai-instructions {
  width: 100%;
  resize: vertical;
  font-size: 13px;
  margin-bottom: 10px;
}

.dt-ai-popover__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dt-ai-run { min-width: 130px; justify-content: center; }
.dt-ai-popover__keyhint {
  font-size: 11px;
  color: var(--muted, #94a3b8);
  font-variant-numeric: tabular-nums;
}

.dt-ai-status {
  margin-top: 10px;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}
.dt-ai-status[data-state="loading"] { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.dt-ai-status[data-state="error"]   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.dt-ai-status[data-state="success"] { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }

.btn[data-loading="true"] {
  opacity: 0.7;
  cursor: progress;
  pointer-events: none;
}

/* ─── Live preview canvas ─────────────────────────────── */
/* The canvas is a paper-styled box whose aspect ratio is locked to
   the chosen page dimensions; the iframe inside is rendered at the
   "natural" 96 dpi page size and then transform-scaled to fit, so
   proportions are preserved exactly regardless of panel width. */
.dt-canvas-panel { padding: 14px 16px; }
.dt-canvas {
  position: relative;
  width: 100%;
  /* aspect-ratio is set inline by JS from width_in / height_in */
  aspect-ratio: 8.5 / 11;
  background:
    linear-gradient(135deg, #fafafa 25%, transparent 25%) -8px 0 / 16px 16px,
    linear-gradient(225deg, #fafafa 25%, transparent 25%) -8px 0 / 16px 16px,
    #ffffff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px -8px rgba(15, 23, 42, 0.18);
}
.dt-canvas__frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  background: #fff;
  /* width/height/transform are set inline by JS so the page renders
     at its natural 96 dpi size and then scales down to fit. */
}
.dt-canvas-info {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted, #64748b);
  font-variant-numeric: tabular-nums;
  background: var(--soft, #f1f5f9);
  border-radius: 999px;
  padding: 2px 8px;
  text-transform: none;
  letter-spacing: 0;
}

/* ─── Preview record search (server-side, scales to 20k+) ── */
.record-search {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}
.record-search__field {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.record-search__field:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.record-search__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}
.record-search__input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 13px;
  padding: 8px 32px 8px 32px;
  outline: none;
  color: #0f172a;
  min-width: 0;
}
.record-search__clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 6px;
}
.record-search__clear:hover { background: #f1f5f9; color: #0f172a; }

.record-search__menu {
  /* Positioned via JS (`position: fixed`) so the dropdown floats above
     any sticky page chrome regardless of stacking context. The high
     z-index keeps it on top of the builder's footer CTA bar. */
  position: fixed;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 14px 32px -10px rgba(15, 23, 42, 0.22), 0 4px 8px rgba(15, 23, 42, 0.06);
  z-index: 9999;
  padding: 4px;
}
.record-search__hint {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted, #64748b);
}
.record-search__hint--error { color: #b91c1c; }

.record-search__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 10px;
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
  color: #0f172a;
  transition: background 90ms ease;
}
.record-search__item:hover,
.record-search__item.is-active {
  background: #eff6ff;
}
.record-search__main {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  grid-row: 1;
  grid-column: 1;
  /* Truncate so long record labels don't blow out the dropdown. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.record-search__sub {
  font-size: 11.5px;
  color: var(--muted, #64748b);
  grid-row: 2;
  grid-column: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.record-search__id {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #94a3b8;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 2px 6px;
}

.dt-preview-btn { width: 100%; justify-content: center; }

/* ─── Sticky action bar ──────────────────────────────── */
/* Breaks out of the .builder-main > .content padding (24px 32px 48px)
   via negative margins so the bar visually spans the full builder
   pane — from the right edge of the builder sidebar to the right
   edge of the page. The padding inside the bar restores the 32px
   horizontal gutter for its contents. */
.dt-actions-bar {
  position: sticky;
  bottom: 0;
  margin: 0 -32px -48px;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid var(--line, #e5e7eb);
  /* Round the bottom corners to match .builder-main's radius so the
     bar tucks neatly into the bottom of the pane. */
  border-bottom-right-radius: 16px;
  z-index: 20;
}
.dt-actions-bar__left,
.dt-actions-bar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .dt-builder {
    grid-template-columns: 1fr;
  }
  .dt-builder__side {
    position: static;
  }
  .dt-editor-textarea { min-height: 380px; }
  .dt-ai-popover {
    width: min(360px, calc(100vw - 64px));
  }
}
@media (max-width: 640px) {
  .dt-actions-bar { flex-wrap: wrap; }
  .dt-ai-trigger span { display: none; }
  .dt-ai-trigger { padding: 8px; }
}

/* Custom document template inputs editor + generate flow */
[data-document-template-ai-target="customInputsPanel"] {
  margin-top: 16px;
}
.dt-inputs-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.dt-inputs-panel__title h2 {
  margin: 0 0 4px;
}
.dt-inputs-panel__title p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}
.dt-inputs-panel__count {
  flex-shrink: 0;
  font-size: 12px;
}
.dt-inputs-panel__mode {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2, #f5f5f5);
}
.dt-inputs-panel__mode-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #666);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.dt-inputs-panel__mode-btn.is-active {
  background: var(--surface, #fff);
  color: var(--text, #111);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.dt-inputs-panel__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.dt-input-empty {
  padding: 24px 16px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-2, #fafafa);
}
.dt-input-empty p {
  margin: 0;
}
.dt-input-empty p + p {
  margin-top: 4px;
  font-size: 13px;
}
.dt-input-field {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface, #fff);
}
.dt-input-field__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.dt-input-field__index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--surface-2, #f0f0f0);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #666);
  flex-shrink: 0;
}
.dt-input-field__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.dt-input-field__title strong {
  font-size: 14px;
}
.dt-input-field__actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.dt-input-field__grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.dt-inputs-panel__add {
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.dt-inputs-panel__add-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #666);
  margin-bottom: 8px;
}
.dt-inputs-panel__palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.dt-inputs-panel__palette-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2, #fafafa);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.dt-inputs-panel__palette-btn:hover {
  border-color: var(--accent, #2563eb);
  background: var(--surface, #fff);
}
.dt-inputs-panel__palette-icon {
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
}
.dt-inputs-panel__json {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  width: 100%;
}
.dt-input-repeater-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.dt-input-repeater-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) auto;
  gap: 8px;
  align-items: end;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.dt-input-repeater-cols {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dt-input-repeater-col {
  display: grid;
  grid-template-columns: 1fr 1fr 120px auto;
  gap: 6px;
}
.dt-gen-page .dt-gen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}
.dt-gen-print-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Generate document modal */
.dt-gen-modal__content {
  width: min(560px, 94vw);
  padding: 0;
  overflow: hidden;
}
.dt-gen-modal__titlebar {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.dt-gen-modal__identity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.dt-gen-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--pp-accent-soft, #eef2ff);
  color: var(--pp-accent, #4f46e5);
  flex-shrink: 0;
}
.dt-gen-modal__subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--pp-text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-gen-modal__body {
  padding: 0;
  max-height: min(72vh, 680px);
  overflow-y: auto;
}
.dt-gen-modal__callout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 18px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--pp-warning-soft, #fffbeb);
  border: 1px solid color-mix(in srgb, var(--pp-warning, #d97706) 25%, transparent);
}
.dt-gen-modal__callout-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--pp-warning, #d97706);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.dt-gen-modal__callout strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}
.dt-gen-modal__callout p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--pp-text-muted, #64748b);
}
.dt-gen-modal__content-slot {
  min-height: 48px;
}
.dt-gen-modal__loading {
  padding: 24px 18px;
  text-align: center;
  font-size: 13px;
}
.dt-gen-modal__form {
  display: flex;
  flex-direction: column;
}
.dt-gen-modal__fields {
  padding: 16px 18px;
}
.dt-gen-modal__section-label {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-text-muted, #64748b);
}
.dt-gen-modal__fields .dt-gen-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--pp-surface-2, #f8fafc);
}
.dt-gen-modal__fields .dt-field--full,
.dt-gen-modal__fields .dt-toggle {
  grid-column: 1 / -1;
}
.dt-gen-modal__fields .dt-field > span,
.dt-gen-modal__fields .dt-toggle > span {
  font-size: 13px;
  font-weight: 500;
}
.dt-gen-modal__fields .input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.dt-gen-modal__empty {
  margin: 16px 18px;
  padding: 20px 16px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--pp-surface-2, #f8fafc);
}
.dt-gen-modal__empty p {
  margin: 0;
}
.dt-gen-modal__empty p + p {
  margin-top: 4px;
  font-size: 13px;
}
.dt-gen-modal__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  margin: 0;
  border-top: 1px solid var(--line);
  background: var(--pp-surface, #fff);
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.06);
}
.dt-gen-modal__print {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dt-gen-modal__footer-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pp-text-muted, #64748b);
  flex-shrink: 0;
}
.dt-gen-modal__print-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dt-gen-modal__printer-select {
  min-width: 140px;
  max-width: 180px;
}
.dt-gen-modal__copies .input {
  width: 56px;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}
.dt-gen-modal__pdf-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.dt-gen-modal__pdf-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 520px) {
  .dt-gen-modal__fields .dt-gen-form {
    grid-template-columns: 1fr;
  }
  .dt-gen-modal__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .dt-gen-modal__print {
    flex-direction: column;
    align-items: stretch;
  }
  .dt-gen-modal__print-controls {
    width: 100%;
  }
  .dt-gen-modal__printer-select {
    flex: 1;
    max-width: none;
  }
  .dt-gen-modal__pdf-actions {
    margin-left: 0;
    width: 100%;
  }
  .dt-gen-modal__pdf-actions .btn {
    flex: 1;
    justify-content: center;
  }
}
.dt-attached-docs .detail-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* =====================================================================
 * Workspaces builder
 * =====================================================================
 *
 * Shared visual chrome for the workspace metadata pickers (used by
 * both the simple "new workspace" form and the editor sidebar) and
 * the full editor's three-pane layout (settings | tree | preview).
 */

/* Topbar breadcrumbs (used on workspaces/new and similar) ----------- */
.workspace-new__crumbs {
  flex-direction: row !important;
  align-items: center;
  gap: 0 !important;
  font-size: 18px;
  margin: 0;
}
.topbar-crumb {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}
.topbar-crumb:hover { color: var(--ink); }
.topbar-crumb-sep {
  color: var(--line);
  margin: 0 8px;
  font-weight: 400;
}

/* "New workspace" page --------------------------------------------- */
.workspace-new {
  max-width: 720px;
  margin: 32px auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--shadow);
}
.workspace-new__header { margin-bottom: 24px; }
.workspace-new__header h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.workspace-new__lede {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.workspace-new__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.workspace-new__errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px 14px;
  color: #991b1b;
  font-size: 13px;
}
.workspace-new__errors strong { display: block; margin-bottom: 6px; }
.workspace-new__errors ul { margin: 0; padding-left: 18px; }
.workspace-new__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.workspace-new__hint {
  margin: 0;
  font-size: 12px;
  text-align: right;
}

/* Shared metadata chrome (icon picker, color swatches, radios) ----- */
.workspace-meta {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.workspace-meta__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.workspace-meta__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.workspace-meta__text,
.workspace-meta__textarea,
.workspace-meta__select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  transition: border-color 120ms, box-shadow 120ms;
}
.workspace-meta__text:focus,
.workspace-meta__textarea:focus,
.workspace-meta__select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.workspace-meta__textarea { resize: vertical; min-height: 56px; }

/* Visual icon picker — chip grid */
.workspace-meta__icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
}
.workspace-meta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  color: #475569;
  transition: border-color 120ms, background 120ms, color 120ms, transform 80ms;
  padding: 0;
}
.workspace-meta__icon:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
}
.workspace-meta__icon.is-selected {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.workspace-meta__icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------------------------------------------------
   Searchable icon picker
   ---------------------------------------------------------------------- */
.workspace-icon-picker {
  position: relative;
  width: 100%;
}

.workspace-icon-picker__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  transition: border-color 120ms, background 120ms;
}
.workspace-icon-picker__trigger:hover { border-color: #cbd5e1; background: #f8fafc; }
.workspace-icon-picker__trigger[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.workspace-icon-picker__trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--accent-weak);
  color: var(--accent);
  flex: 0 0 auto;
}
.workspace-icon-picker__trigger-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workspace-icon-picker__trigger-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.workspace-icon-picker__trigger-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.workspace-icon-picker__trigger-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workspace-icon-picker__chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--muted);
}

/* The panel is `position: fixed` so it escapes the workspace builder's
   `overflow: hidden` sidebar (which would otherwise clip the popover
   to the narrow settings column). The Stimulus controller writes
   top/left/width inline on every open from the trigger's bounding
   rect, and may also set `data-flipped="true"` to render upward when
   there isn't enough room below. */
.workspace-icon-picker__panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  max-height: 380px;
  overflow: hidden;
}
.workspace-icon-picker__panel[hidden] { display: none; }

.workspace-icon-picker__search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
  flex: 0 0 auto;
}
.workspace-icon-picker__search-icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex: 0 0 auto;
}
.workspace-icon-picker__search {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--ink);
  padding: 2px 0;
}
.workspace-icon-picker__search::placeholder { color: var(--muted); }

.workspace-icon-picker__results {
  overflow-y: auto;
  padding: 6px 8px 10px;
  flex: 1;
}

.workspace-icon-picker__group { padding: 6px 0 4px; }
.workspace-icon-picker__group[hidden] { display: none; }
.workspace-icon-picker__group-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 6px;
  padding: 0 2px;
}

.workspace-icon-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 4px;
}

.workspace-icon-picker__option {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  color: #475569;
  padding: 0;
  transition: background 100ms, color 100ms, border-color 100ms;
}
.workspace-icon-picker__option:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.workspace-icon-picker__option.is-selected {
  background: var(--accent-weak);
  color: var(--accent);
  border-color: var(--accent);
}
.workspace-icon-picker__option[hidden] { display: none; }
.workspace-icon-picker__option svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workspace-icon-picker__empty {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  padding: 18px 8px;
  margin: 0;
}

/* Visual color picker — round swatches */
.workspace-meta__colors {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.workspace-meta__color {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  outline: 1px solid var(--line);
  outline-offset: 1px;
  transition: transform 100ms;
}
.workspace-meta__color:hover { transform: scale(1.08); }
.workspace-meta__color.is-selected {
  border-color: #fff;
  outline-color: var(--ink);
  outline-width: 2px;
}
.workspace-meta__color--indigo { background: #6366f1; }
.workspace-meta__color--blue   { background: #3b82f6; }
.workspace-meta__color--green  { background: #10b981; }
.workspace-meta__color--amber  { background: #f59e0b; }
.workspace-meta__color--red    { background: #ef4444; }
.workspace-meta__color--purple { background: #a855f7; }
.workspace-meta__color--slate  { background: #64748b; }

/* Visibility radio cards */
.workspace-meta__radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.workspace-meta__radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  transition: border-color 120ms, background 120ms;
}
.workspace-meta__radio:hover { border-color: #cbd5e1; background: #f8fafc; }
.workspace-meta__radio:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-weak);
}
.workspace-meta__radio input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
}
.workspace-meta__radio span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.35;
}
.workspace-meta__radio strong { font-weight: 600; }
.workspace-meta__radio em {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}

/* Sidebar settings panels (in editor) ------------------------------ */
.workspace-builder__settings {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.workspace-builder__panel {
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.workspace-builder__panel:last-child { border-bottom: 0; }
.workspace-builder__panel-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.workspace-builder__panel-help {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.workspace-builder__system-tag { margin-left: 8px; }

/* Access grants ---------------------------------------------------- */
.workspace-builder__access {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.workspace-builder__access-title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.workspace-builder__access-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.workspace-builder__access-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.workspace-builder__access-row--new { border-style: dashed; background: #f8fafc; }
.workspace-builder__access-row-grants { display: flex; flex-direction: column; gap: 6px; }
.workspace-builder__access-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}
.workspace-builder__access-default,
.workspace-builder__access-remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* Canvas (tree editor) --------------------------------------------- */
.workspace-builder__toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.workspace-builder__canvas-title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.workspace-builder__canvas-sub {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.workspace-builder__toolbar-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.workspace-builder__tree {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.workspace-builder__empty {
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  padding: 40px 24px;
  text-align: center;
  color: #64748b;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.workspace-builder__empty svg { color: #94a3b8; }
.workspace-builder__empty h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #334155;
}
.workspace-builder__empty p {
  margin: 0;
  font-size: 13px;
  max-width: 360px;
  line-height: 1.45;
}
.workspace-builder__readonly-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 20px 24px;
  color: #0c4a6e;
}
.workspace-builder__readonly-notice svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #0284c7;
}
.workspace-builder__readonly-notice strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.workspace-builder__readonly-notice p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #075985;
}
.workspace-builder__tree--readonly {
  margin-top: 16px;
}
.workspace-builder__tree--readonly .workspace-builder__section {
  pointer-events: none;
  user-select: none;
}
.workspace-builder__tree--readonly .workspace-builder__section:hover {
  border-color: var(--line);
}
.workspace-builder__section-icon-btn--static,
.workspace-builder__item-drag--static {
  cursor: default;
}
.workspace-builder__section-label-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.workspace-builder__item-drag--static {
  width: 16px;
  flex-shrink: 0;
}

/* Section card */
.workspace-builder__section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 120ms, box-shadow 120ms;
}
.workspace-builder__section:hover { border-color: #cbd5e1; }
.workspace-builder__section.is-hidden { opacity: 0.55; }
.workspace-builder__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.workspace-builder__section-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.workspace-builder__section-name input[type="text"] {
  flex: 1;
  border: 1px solid transparent;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 4px 6px;
  border-radius: 6px;
  min-width: 0;
}
.workspace-builder__section-name input[type="text"]:hover { background: #fff; border-color: var(--line); }
.workspace-builder__section-name input[type="text"]:focus {
  background: #fff;
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.workspace-builder__section-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Inline icon-trigger button shown to the left of every section's
   name in the builder. Clicking opens the singleton section-icon
   picker (positioned: fixed) the workspace_builder controller owns.
   The glyph SVG itself is cloned from the picker grid on each render
   so the JS never needs to know Heroicon path data. */
.workspace-builder__section-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  color: #475569;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.workspace-builder__section-icon-btn:hover {
  background: #f1f5f9;
  color: #1f2933;
  border-color: #cbd5e1;
}
.workspace-builder__section-icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.workspace-builder__section-icon-glyph {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
}
.workspace-builder__section-icon-glyph svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Singleton section-icon picker popover. Position is computed by
   workspace_builder_controller#positionSectionIconPicker; we just
   define the fixed-positioned shell + grid styles here. */
.workspace-builder__icon-picker {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  max-height: 380px;
  overflow: hidden;
}
.workspace-builder__icon-picker[hidden] { display: none; }
.workspace-builder__icon-picker-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: #64748b;
}
.workspace-builder__icon-picker-search svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.workspace-builder__icon-picker-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
  color: var(--ink);
}
.workspace-builder__icon-picker-results {
  overflow-y: auto;
  padding: 8px 4px 12px;
}
.workspace-builder__icon-picker-group { padding: 4px 8px 8px; }
.workspace-builder__icon-picker-group[hidden] { display: none; }
.workspace-builder__icon-picker-group-title {
  margin: 6px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.workspace-builder__icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
}
.workspace-builder__icon-picker-option {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #475569;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.workspace-builder__icon-picker-option[hidden] { display: none; }
.workspace-builder__icon-picker-option svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.workspace-builder__icon-picker-option:hover {
  background: #f1f5f9;
  color: #1f2933;
}
.workspace-builder__icon-picker-option.is-selected {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}
.workspace-builder__icon-picker-empty {
  padding: 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
}
.workspace-builder__section-actions .btn {
  padding: 4px 8px;
  font-size: 12px;
  min-width: 26px;
}

.workspace-builder__items {
  display: flex;
  flex-direction: column;
  padding: 4px;
}
.workspace-builder__items .muted { padding: 8px 12px; font-size: 13px; }

.workspace-builder__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 100ms;
}
.workspace-builder__item:hover { background: #f8fafc; }
.workspace-builder__item-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.workspace-builder__item-name input[type="text"] {
  flex: 1;
  border: 1px solid transparent;
  background: transparent;
  font-size: 13px;
  color: var(--ink);
  padding: 4px 6px;
  border-radius: 4px;
  min-width: 0;
}
.workspace-builder__item-name input[type="text"]:hover { background: #fff; border-color: var(--line); }
.workspace-builder__item-name input[type="text"]:focus {
  background: #fff;
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.workspace-builder__item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.workspace-builder__item-actions .btn {
  padding: 3px 7px;
  font-size: 12px;
  min-width: 24px;
}

.workspace-builder__section-foot {
  padding: 6px 12px 10px;
  border-top: 1px solid #f1f5f9;
  background: #fbfcfd;
}

/* Live preview (right pane) ---------------------------------------- */
.workspace-preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #0f172a;
  border-radius: 10px;
  padding: 14px 10px;
  margin-top: 8px;
}
.workspace-preview__section { display: flex; flex-direction: column; gap: 4px; }
.workspace-preview__section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  padding: 0 8px;
}
.workspace-preview__item {
  font-size: 13px;
  color: #cbd5e1;
  padding: 6px 10px;
  border-radius: 6px;
  background: transparent;
}
.workspace-preview__item.muted {
  color: #64748b;
  font-style: italic;
  font-size: 11px;
}

/* Picker modal ----------------------------------------------------- */
.workspace-builder__modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}
.workspace-builder__modal[hidden] { display: none; }
.workspace-builder__modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.workspace-builder__modal-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  overflow: hidden;
}
.workspace-builder__modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.workspace-builder__modal-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.workspace-builder__modal-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.workspace-builder__modal-close:hover { color: var(--ink); }
.workspace-builder__modal-tabs {
  display: flex;
  gap: 2px;
  padding: 4px 12px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
}
.workspace-builder__modal-tab {
  background: transparent;
  border: 0;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.workspace-builder__modal-tab:hover { color: var(--ink); }
.workspace-builder__modal-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.workspace-builder__modal-body {
  padding: 14px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.workspace-builder__modal-body .form-field { margin-bottom: 10px; }
.workspace-builder__picker-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  width: 100%;
}
.workspace-builder__picker-row:hover {
  border-color: var(--accent);
  background: var(--accent-weak);
}
.workspace-builder__picker-label {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────
 * ElementKit inspector — shared styling used by every builder
 *
 * The kit (lib/inspector_schema.js + lib/elements/field_kinds.js)
 * paints inspector groups as <details class="wf-sm-section"> so they
 * pick up the dashboard's polished collapsible chrome out of the box.
 * The classes below cover the kit-specific helpers (panels, rule
 * rows, pill toggles, category grids, micro labels) so dashboards,
 * forms, and workflow screens all render consistently.
 * ───────────────────────────────────────────────────────────────────── */

.wf-builder-inspector__kit {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wf-builder-inspector__group--flat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wf-field__row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.wf-field__row > .wf-field { margin: 0; }

.wf-field--panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.wf-field__panel-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.wf-field__label--micro {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  text-transform: none;
  letter-spacing: 0;
}

.wf-field__visibility-toggle {
  display: flex;
  gap: 6px;
}
.wf-field__pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  background: #fff;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.wf-field__pill:hover { background: #f1f5f9; }
.wf-field__pill.is-active {
  background: #1e293b;
  color: #fff;
  border-color: #1e293b;
}

.wf-field__rule {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 28px;
  gap: 6px;
  align-items: center;
}
.wf-field__rule-del {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: transparent;
  color: #94a3b8;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.wf-field__rule-del:hover {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}

.wf-field__category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}
.wf-field__category-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #334155;
  cursor: pointer;
}

.wf-field__pill-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wf-field__pill-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  background: #fff;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
}
.wf-field__pill-chip:hover {
  background: #f8fafc;
  color: #1e293b;
}

.wf-field__hint--standalone {
  padding: 6px 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.wf-field__hint[data-tone="warn"] {
  color: #b45309;
}
.wf-field__divider {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin: 4px 0;
}
.wf-field__static {
  font-size: 12.5px;
  color: #475569;
}
.wf-field__passthrough-host {
  display: contents;
}

/* ============================================================
 * AI App Builder — three-pane shell at /builder/apps/:id
 * ============================================================ */

.ai-app-builder-shell {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.4fr) minmax(280px, 1fr);
  gap: 16px;
  height: calc(100vh - 120px);
  padding: 16px;
}

.ai-app-builder-pane {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.ai-app-builder-pane-header {
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: #f8fafc;
}

.ai-app-builder-pane-title {
  font-weight: 600;
  font-size: 13px;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ai-app-builder-pane-hint {
  font-size: 12px;
  color: #64748b;
  margin-left: auto;
}

.ai-app-builder-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Per-status color variants. A small dot before the label gives the
   pill a clear "live indicator" feel without needing extra markup. */
.ai-app-builder-status-pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  background: currentColor;
  opacity: 0.7;
}

.ai-app-builder-status-pill-discovery {
  background: #f1f5f9; color: #475569; border-color: #e2e8f0;
}
.ai-app-builder-status-pill-plan_ready {
  background: #ede9fe; color: #5b21b6; border-color: #ddd6fe;
}
.ai-app-builder-status-pill-building {
  background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe;
}
.ai-app-builder-status-pill-building::before {
  animation: ai-app-builder-status-pulse 1.2s ease-in-out infinite;
}
.ai-app-builder-status-pill-ready {
  background: #d1fae5; color: #065f46; border-color: #a7f3d0;
}
.ai-app-builder-status-pill-failed {
  background: #fee2e2; color: #991b1b; border-color: #fca5a5;
}
.ai-app-builder-status-pill-undone {
  background: #f1f5f9; color: #64748b; border-color: #e2e8f0;
}

@keyframes ai-app-builder-status-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* Chat pane */
.ai-app-builder-templates {
  padding: 12px 16px;
  border-bottom: 1px dashed #e2e8f0;
  background: #fafafa;
}
.ai-app-builder-templates-hint {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 8px;
}
.ai-app-builder-template-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ai-app-builder-template-chip {
  text-align: left;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ai-app-builder-template-chip:hover {
  border-color: #6366f1;
  background: #eef2ff;
  color: #4338ca;
}
.ai-app-builder-template-chip-name {
  font-weight: 500;
  font-size: 12px;
  color: inherit;
  white-space: nowrap;
}

.ai-app-builder-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-app-builder-message {
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.45;
}

.ai-app-builder-message-role {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.ai-app-builder-message-user {
  background: #eef2ff;
  color: #1e1b4b;
  align-self: flex-end;
  max-width: 85%;
}

.ai-app-builder-message-assistant {
  background: #f1f5f9;
  color: #0f172a;
  align-self: flex-start;
  max-width: 95%;
}

.ai-app-builder-composer {
  border-top: 1px solid #e2e8f0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fafafa;
}

.ai-app-builder-composer textarea {
  resize: vertical;
  min-height: 60px;
}

.ai-app-builder-composer-actions {
  display: flex;
  justify-content: flex-end;
}

/* Plan pane */
.ai-app-builder-plan {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.ai-app-builder-plan-empty {
  color: #64748b;
  font-size: 13px;
  text-align: center;
  margin-top: 24px;
}

.ai-app-builder-plan-summary { margin-bottom: 16px; }

.ai-app-builder-plan-name {
  font-size: 18px;
  margin: 0 0 4px;
  color: #0f172a;
}

.ai-app-builder-plan-blurb {
  font-size: 13px;
  color: #475569;
  margin: 0;
}

.ai-app-builder-plan-section {
  margin-bottom: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
}

.ai-app-builder-plan-section-title {
  font-weight: 600;
  font-size: 13px;
  color: #0f172a;
  cursor: pointer;
}

.ai-app-builder-plan-section-count {
  display: inline-block;
  background: #f1f5f9;
  color: #475569;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11px;
  margin-left: 6px;
}

.ai-app-builder-plan-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-app-builder-plan-item {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-left: 3px solid #cbd5e1;
  background: #fafafa;
  border-radius: 4px;
}

.ai-app-builder-plan-item-name {
  font-weight: 600;
  color: #0f172a;
}

.ai-app-builder-plan-item-desc {
  font-size: 12px;
  color: #475569;
}

.ai-app-builder-plan-fields {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 12px;
  color: #475569;
}

.ai-app-builder-plan-field-type {
  display: inline-block;
  background: #e2e8f0;
  color: #334155;
  padding: 0 6px;
  border-radius: 4px;
  margin-left: 4px;
  font-size: 10px;
}

.ai-app-builder-plan-trigger {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  padding: 1px 6px;
  border-radius: 4px;
  margin-top: 4px;
  font-size: 11px;
  width: fit-content;
}

.ai-app-builder-issues {
  border-top: 1px solid #e2e8f0;
  padding: 8px 16px;
  background: #fef9c3;
}

.ai-app-builder-issue {
  font-size: 12px;
  padding: 4px 0;
}

.ai-app-builder-issue-error { color: #991b1b; }
.ai-app-builder-issue-warning { color: #92400e; }

.ai-app-builder-plan-actions {
  border-top: 1px solid #e2e8f0;
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  background: #f8fafc;
}

/* Status pane */
.ai-app-builder-progress {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.ai-app-builder-artifacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-app-builder-artifact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  background: #f1f5f9;
  border-radius: 6px;
  font-size: 12px;
  align-items: center;
}

.ai-app-builder-artifact-type {
  font-weight: 600;
  color: #0f172a;
}

.ai-app-builder-artifact-id {
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.ai-app-builder-artifact-notes {
  color: #475569;
  flex-basis: 100%;
}

.ai-app-builder-summary {
  border-top: 1px solid #e2e8f0;
  padding: 12px 16px;
  background: #ecfdf5;
  color: #064e3b;
}

.ai-app-builder-summary h4 {
  margin: 0 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #047857;
}

.ai-app-builder-summary p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* "Built by AI" banner shown on workspace pages whose workspace
   was created by the AI App Builder. */
.builder-built-by-ai-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #eef2ff;
  border-bottom: 1px solid #c7d2fe;
  color: #312e81;
  font-size: 13px;
}

.builder-built-by-ai-banner strong { color: #1e1b4b; }

.builder-built-by-ai-banner-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* AI App Builder hero on /builder */
.builder-ai-hero {
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding: 24px 28px;
  margin-bottom: 32px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 55%, #8b5cf6 100%);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(67, 56, 202, 0.25);
}
.builder-ai-hero-text { flex: 1; min-width: 0; }
.builder-ai-hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.builder-ai-hero-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #ffffff;
  line-height: 1.2;
}
.builder-ai-hero-subtitle {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 60ch;
}
.builder-ai-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.builder-ai-hero-actions .btn-primary {
  background: #ffffff;
  color: #4338ca;
  border-color: #ffffff;
}
.builder-ai-hero-actions .btn-primary:hover {
  background: #f5f3ff;
  color: #3730a3;
}
.builder-ai-hero-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}
.builder-ai-hero-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.builder-ai-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.85);
}
.builder-ai-hero-visual svg { width: 96px; height: 96px; }

@media (max-width: 720px) {
  .builder-ai-hero { flex-direction: column; }
  .builder-ai-hero-visual { width: 100%; justify-content: flex-start; }
}

/* Designer questions + options inside an assistant chat bubble */
.ai-app-builder-message-questions {
  list-style: disc inside;
  margin: 8px 0 0;
  padding-left: 4px;
  font-size: 12.5px;
  color: #475569;
}
.ai-app-builder-message-questions li { margin: 2px 0; }

.ai-app-builder-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.ai-app-builder-option {
  text-align: left;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.ai-app-builder-option:hover {
  border-color: #6366f1;
  background: #eef2ff;
}
.ai-app-builder-option-name {
  font-weight: 600;
  font-size: 13px;
  color: #0f172a;
  padding-right: 56px;
}
.ai-app-builder-option-summary {
  font-size: 12px;
  color: #475569;
  line-height: 1.4;
  padding-right: 56px;
}
.ai-app-builder-option-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.ai-app-builder-option-counts span {
  display: inline-block;
  background: #f1f5f9;
  color: #334155;
  font-size: 10.5px;
  padding: 1px 8px;
  border-radius: 999px;
}
.ai-app-builder-option-pick {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 11px;
  font-weight: 600;
  color: #4338ca;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #e0e7ff;
  border-radius: 6px;
  padding: 3px 8px;
}

/* ── Builder chat polish ───────────────────────────────────── */

/* Make the message list breathe a bit and read more naturally. */
.ai-app-builder-messages {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  scroll-behavior: smooth;
}
.ai-app-builder-message {
  font-size: 13.5px;
  line-height: 1.55;
  padding: 10px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ai-app-builder-message-content {
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-app-builder-message-user {
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
}
.ai-app-builder-message-assistant {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

/* Composer */
.ai-app-builder-composer {
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 12px 14px;
  gap: 10px;
}
.ai-app-builder-composer-input {
  width: 100%;
  resize: vertical;
  min-height: 64px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.ai-app-builder-composer-input::placeholder { color: #94a3b8; }
.ai-app-builder-composer-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.ai-app-builder-composer-input:disabled {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}
.ai-app-builder-composer.is-busy .ai-app-builder-composer-input {
  background: #f8fafc;
}
.ai-app-builder-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ai-app-builder-composer-hint {
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 0.02em;
}
.ai-app-builder-send-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Typing indicator */
.ai-app-builder-typing {
  align-self: flex-start;
  padding: 0 4px;
}
.ai-app-builder-typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 6px 12px;
  font-size: 12px;
  color: #475569;
}
.ai-app-builder-typing-label { font-weight: 500; }
.ai-app-builder-typing-dots {
  display: inline-flex;
  gap: 3px;
}
.ai-app-builder-typing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
  animation: ai-app-builder-typing-bounce 1.2s infinite ease-in-out both;
}
.ai-app-builder-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-app-builder-typing-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes ai-app-builder-typing-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1.0); opacity: 1.0; }
}

/* Build banner + spinner (right pane) */
.ai-app-builder-build-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 16px 0;
  padding: 12px 14px;
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  color: #1e1b4b;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(67, 56, 202, 0.08);
}
.ai-app-builder-build-banner.is-success {
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #6ee7b7;
  color: #065f46;
}
.ai-app-builder-build-banner.is-failed {
  background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #fca5a5;
  color: #7f1d1d;
}
.ai-app-builder-build-banner strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}
.ai-app-builder-build-banner-sub {
  font-size: 12px;
  color: inherit;
  opacity: 0.85;
}
.ai-app-builder-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid #c7d2fe;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: ai-app-builder-spin 0.8s linear infinite;
  flex-shrink: 0;
}
.ai-app-builder-build-banner.is-success .ai-app-builder-spinner,
.ai-app-builder-build-banner.is-failed  .ai-app-builder-spinner {
  display: none;
}
@keyframes ai-app-builder-spin {
  to { transform: rotate(360deg); }
}

/* Build button busy state */
.ai-app-builder-build-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.is-building .ai-app-builder-build-btn {
  position: relative;
  padding-left: 32px;
}
.is-building .ai-app-builder-build-btn::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: ai-app-builder-spin 0.8s linear infinite;
}

/* Wrap so we can absolutely position a delete button per-card. */
.builder-recent-card-wrap {
  position: relative;
}
.builder-recent-card-wrap.is-deleting { opacity: 0.5; pointer-events: none; }

.builder-recent-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
  z-index: 2;
}
.builder-recent-card-wrap:hover .builder-recent-card-delete {
  opacity: 1;
}
.builder-recent-card-delete:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.builder-recent-card-delete:focus {
  opacity: 1;
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

/* ── Designer clarifying questions ─────────────────────────── */

/* Container for one or more questions inside an assistant bubble. */
.ai-app-builder-questions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.ai-app-builder-question {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
}

.ai-app-builder-question-prompt {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
  line-height: 1.4;
}

.ai-app-builder-question-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ai-app-builder-choice {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  color: #1e293b;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
  font-family: inherit;
}
.ai-app-builder-choice:hover:not(:disabled) {
  background: #eef2ff;
  border-color: #818cf8;
  color: #3730a3;
}
.ai-app-builder-choice.is-selected {
  background: #4f46e5;
  border-color: #4338ca;
  color: #ffffff;
}
.ai-app-builder-choice:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ai-app-builder-choice-submit {
  margin-left: 4px;
  padding: 5px 14px;
  font-size: 12.5px;
}
.ai-app-builder-choice-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Free-text answer for open-ended questions (the planner emitted a
   plain-string question with no `choices`). Rendered inline under the
   prompt so the user doesn't have to scroll back to the main composer. */
.ai-app-builder-question-text {
  width: 100%;
  resize: vertical;
  min-height: 48px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #0f172a;
  box-sizing: border-box;
}
.ai-app-builder-question-text:focus {
  outline: none;
  border-color: #6366f1;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

/* Inline "Other" input for choice questions where the planner allowed
   the user to type a custom answer alongside the chips. */
.ai-app-builder-question-other {
  flex: 1 1 140px;
  min-width: 120px;
  padding: 5px 10px;
  font-size: 12.5px;
  font-family: inherit;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
}
.ai-app-builder-question-other:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

/* One submit row at the bottom of the questions block. We use this
   instead of per-question submits so the user can answer every
   question in the assistant turn before sending one consolidated
   reply (much less back-and-forth for multi-question discoveries). */
.ai-app-builder-questions-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.ai-app-builder-questions-submit {
  padding: 6px 16px;
  font-size: 13px;
}
.ai-app-builder-questions-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── AI App Builder: build modal ─────────────────────────── */

.ai-app-builder-build-modal::backdrop {
  background: rgba(15, 23, 42, 0.45);
}
.ai-app-builder-build-modal .modal-content {
  width: min(560px, 92vw);
}

/* Confirmation summary list */
.ai-app-builder-build-modal-summary {
  margin: 4px 0 16px;
}
.ai-app-builder-build-modal-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.ai-app-builder-build-modal-summary-list li {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #334155;
}
.ai-app-builder-build-modal-summary-list strong {
  font-size: 16px;
  color: #0f172a;
  margin-right: 4px;
}

/* Progress bar */
.ai-app-builder-build-modal-progress {
  margin: 8px 0 4px;
}
.ai-app-builder-progress-bar {
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.ai-app-builder-progress-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%);
  transition: width 0.4s ease;
  border-radius: 999px;
  position: relative;
}
/* Subtle moving stripe so the bar feels alive even between ticks. */
.ai-app-builder-progress-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,0.18) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.18) 75%, transparent 75%, transparent
  );
  background-size: 14px 14px;
  animation: ai-app-builder-progress-stripe 0.8s linear infinite;
  border-radius: inherit;
}
.ai-app-builder-progress-bar-fill.is-failed {
  background: linear-gradient(90deg, #ef4444 0%, #b91c1c 100%);
}
.ai-app-builder-progress-bar-fill.is-failed::after { animation: none; opacity: 0; }
@keyframes ai-app-builder-progress-stripe {
  to { background-position: 14px 0; }
}

.ai-app-builder-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #64748b;
  margin-top: 8px;
}
.ai-app-builder-progress-current {
  margin-top: 6px;
  font-size: 13px;
  color: #0f172a;
  font-weight: 500;
  min-height: 18px;
}

/* Step list (one row per planned artifact) */
.ai-app-builder-progress-steps {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}
.ai-app-builder-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ai-app-builder-step-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #e2e8f0;
  border: 2px solid #cbd5e1;
  position: relative;
}
.ai-app-builder-step-kind {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.ai-app-builder-step-label {
  color: #334155;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pending */
.ai-app-builder-step.is-pending { color: #94a3b8; }
.ai-app-builder-step.is-pending .ai-app-builder-step-label { color: #94a3b8; }

/* Active (currently being built) */
.ai-app-builder-step.is-active {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.ai-app-builder-step.is-active .ai-app-builder-step-icon {
  background: #ffffff;
  border-color: #4f46e5;
  border-style: dashed;
  animation: ai-app-builder-spin 1.4s linear infinite;
}
.ai-app-builder-step.is-active .ai-app-builder-step-kind {
  background: #e0e7ff;
  color: #3730a3;
}
.ai-app-builder-step.is-active .ai-app-builder-step-label {
  color: #1e1b4b;
  font-weight: 500;
}

/* Done */
.ai-app-builder-step.is-done .ai-app-builder-step-icon {
  background: #10b981;
  border-color: #059669;
}
.ai-app-builder-step.is-done .ai-app-builder-step-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg);
}
.ai-app-builder-step.is-done .ai-app-builder-step-kind {
  background: #d1fae5;
  color: #065f46;
}
.ai-app-builder-step.is-done .ai-app-builder-step-label { color: #0f172a; }

/* Modal-level success / failure tints */
[data-app-builder-target="progressView"].is-success .modal-header h3 { color: #065f46; }
[data-app-builder-target="progressView"].is-failed  .modal-header h3 { color: #991b1b; }

/* ───────────────────────────────────────────────────────────────────
 * Form-builder canvas previews (page-input-preview__*)
 *
 * These styles polish the schematic input renderers in
 * lib/interaction_registry.js so the Forms drag-and-drop builder
 * reads with the same level of finish as Dashboards. The shape is
 * intentionally minimal — a labelled card with a disabled field
 * preview — so the canvas mirrors what a viewer sees at runtime
 * without re-implementing the full Forms::Renderer chrome.
 *
 * Used by the Form builder canvas. Dashboards continue to render
 * widgets via dashboard_registry.js (which has its own richer
 * preview styling) and don't share these classes.
 * ─────────────────────────────────────────────────────────────── */

.page-input-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  /* Match dashboard widget shadow so the cards read as the same kind
   * of object as a chart card. */
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.page-input-preview__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.page-input-preview__label {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}

.page-input-preview__required {
  color: #dc2626;
  margin-left: 2px;
}

.page-input-preview__key {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

.page-input-preview__field {
  width: 100%;
  font-size: 13px;
  color: #1e293b;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 10px;
  /* Disabled placeholder fields shouldn't look like they failed
   * validation — neutral grey, full opacity. */
  opacity: 1;
  cursor: default;
}
.page-input-preview__field:disabled { color: #475569; }
.page-input-preview__field--textarea {
  resize: none;
  min-height: 64px;
  font-family: inherit;
}
.page-input-preview__field::placeholder { color: #94a3b8; }

/* Multi-select chips */
.page-input-preview__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.page-input-preview__chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1.3;
}
.page-input-preview__chip-more {
  font-size: 12px;
  color: #64748b;
  align-self: center;
}

/* Radio group */
.page-input-preview__radios {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-input-preview__radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #334155;
  cursor: default;
}

/* Boolean — iOS-style toggle so the field reads as boolean at a glance */
.page-input-preview__bool {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #334155;
}
.page-input-preview__toggle {
  position: relative;
  width: 36px;
  height: 20px;
  background: #cbd5e1;
  border-radius: 999px;
  transition: background 0.15s ease;
  flex: 0 0 auto;
}
.page-input-preview__toggle.is-on { background: #3b82f6; }
.page-input-preview__toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  transition: transform 0.15s ease;
}
.page-input-preview__toggle.is-on .page-input-preview__toggle-thumb {
  transform: translateX(16px);
}
.page-input-preview__bool-label { font-weight: 500; }

/* Audio input — mic icon + textarea preview */
.page-input-preview__audio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.page-input-preview__audio-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  color: #6366f1;
  flex-shrink: 0;
  margin-top: 2px;
}
.page-input-preview__audio .page-input-preview__field {
  flex: 1;
}

/* File input — render as a "Choose file" button + filename slot */
.page-input-preview__file {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.page-input-preview__file-btn {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 500;
}
.page-input-preview__file-meta { color: #64748b; }

/* Repeater — block with a colored corner so it reads as a "group" */
.page-input-preview__repeater {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-input-preview__repeater-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.page-input-preview__repeater-meta {
  font-size: 12px;
  color: #64748b;
}

/* Record picker — simulated search box */
.page-input-preview__picker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 10px;
}
.page-input-preview__picker-icon { font-size: 14px; opacity: 0.7; }
.page-input-preview__picker-text { color: #475569; }

.page-input-preview__hint {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

/* Empty paragraph in the form canvas — placeholder copy in muted
 * italic so it doesn't pretend to be real content. */
.page-text--empty { color: #94a3b8; font-style: italic; }

/* ============================================================
 * AI App Builder — post-build "hub" view (status: ready).
 * Lives at the same URL as the 3-pane discovery shell but
 * uses a top-down vertical layout instead of side-by-side panes.
 * ============================================================ */

.ai-app-builder-shell--hub {
  display: block;
  height: auto;
  padding: 24px;
  max-width: 1240px;
  margin: 0 auto;
}

.hub-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #faf5ff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 16px;
}
.hub-header__left { flex: 1; min-width: 0; }
.hub-header__open-app {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.hub-header__open-app-icon { font-size: 14px; }
.hub-header__summary {
  margin: 0;
  color: #475569;
  line-height: 1.5;
  max-width: 720px;
}
.hub-header__metrics {
  display: flex;
  gap: 24px;
  flex-shrink: 0;
}
.hub-header__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.hub-header__metric-num {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
}
.hub-header__metric-label {
  font-size: 11px;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.hub-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.hub-section {
  margin-bottom: 32px;
}

.hub-group {
  margin-bottom: 28px;
}
.hub-group__header {
  margin-bottom: 12px;
}
.hub-group__title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hub-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: #e2e8f0;
  color: #475569;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 600;
}
.hub-group__subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: #64748b;
}
.hub-group__empty {
  font-size: 13px;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 6px;
}

.hub-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.hub-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.hub-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.hub-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hub-card__type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #ede9fe;
  color: #6d28d9;
  border-radius: 6px;
  font-size: 14px;
  flex-shrink: 0;
}
.hub-card__title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  min-width: 0;
}
.hub-card__title-link {
  color: #1e293b;
  text-decoration: none;
}
.hub-card__title-link:hover { color: #6d28d9; }
.hub-card__desc {
  margin: 0;
  font-size: 13px;
  color: #475569;
  line-height: 1.4;
}
.hub-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  flex-wrap: wrap;
}
.hub-card__slug {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  color: #475569;
}
.hub-card__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.hub-connections__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hub-connections__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid #f1f5f9;
}
.hub-connections__item:last-child { border-bottom: none; }
.hub-connections__node {
  color: #1e293b;
  text-decoration: none;
  font-weight: 500;
}
.hub-connections__node:hover { color: #6d28d9; text-decoration: underline; }
.hub-connections__arrow {
  color: #94a3b8;
  font-size: 12px;
  font-style: italic;
  white-space: nowrap;
}

.hub-chat-drawer {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 120px);
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  z-index: 60;
}
.hub-chat-drawer[hidden] { display: none; }
.hub-chat-drawer__header {
  position: relative;
  padding: 12px 40px 12px 16px;
  border-bottom: 1px solid #e2e8f0;
}
.hub-chat-drawer__header strong { font-size: 14px; }
.hub-chat-drawer__header p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
}
.hub-chat-drawer__header .icon-button {
  position: absolute;
  top: 8px;
  right: 8px;
}
.hub-chat-drawer__messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  min-height: 200px;
  max-height: 50vh;
}
.hub-chat-drawer__composer {
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
}

.hub-plan-details {
  margin-top: 24px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.hub-plan-details summary {
  cursor: pointer;
  font-weight: 600;
  color: #475569;
  font-size: 13px;
}
.hub-plan-details__content { margin-top: 12px; }

/* Tucked-away meta line under the title in the form/dashboard
 * builder topbar — used to surface the AI App Builder badge. */
.page-builder__title-meta {
  margin-top: 4px;
  display: flex;
  gap: 6px;
}

/* =========================================================================
   2026 MODERNIZATION LAYER  (added 2026-04-20)
   -------------------------------------------------------------------------
   Single appended block that retunes the visual language of the app to
   feel current (Linear / Vercel / Cron era) without changing markup,
   layout, or Stimulus controllers. Override-only — to revert, delete
   everything from this banner to EOF.
   ========================================================================= */

:root {
  /* New token names used by the 2026 layer */
  --pp-page-bg: #f7f7f9;
  --pp-surface: #ffffff;
  --pp-surface-2: #f4f4f5;
  --pp-surface-3: #ececef;
  --pp-border: #ebecef;
  --pp-border-strong: #dcdde1;
  --pp-text: #18181b;
  --pp-text-muted: #71717a;
  --pp-text-subtle: #a1a1aa;
  --pp-accent: #4f46e5;
  --pp-accent-hover: #4338ca;
  --pp-accent-soft: rgba(79, 70, 229, 0.10);
  --pp-success: #15803d;
  --pp-success-soft: rgba(22, 163, 74, 0.12);
  --pp-warning: #b45309;
  --pp-warning-soft: rgba(245, 158, 11, 0.14);
  --pp-danger: #b91c1c;
  --pp-danger-soft: rgba(220, 38, 38, 0.10);
  --pp-info: #1d4ed8;
  --pp-info-soft: rgba(37, 99, 235, 0.10);
  --pp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --pp-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.04);
  --pp-shadow-lg: 0 4px 24px rgba(15, 23, 42, 0.08);
  --pp-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Remap a few legacy tokens onto the modern palette so any rule
     referencing --bg/--line/--soft/--muted/--ink/--shadow inherits the
     new look without us having to touch thousands of selectors. */
  --bg: var(--pp-page-bg);
  --line: var(--pp-border);
  --soft: var(--pp-surface-2);
  --muted: var(--pp-text-muted);
  --ink: var(--pp-text);
  --shadow: var(--pp-shadow-sm);
  --radius: 12px;
}

body.pp-body {
  --pp-shell-bg: #0f172a;
  --pp-shell-fg: #f8fafc;
  --pp-shell-muted: #cbd5e1;
  --pp-shell-hover: rgba(248, 250, 252, 0.10);
  --pp-shell-active: rgba(248, 250, 252, 0.14);
  --pp-inner-shell-outline: transparent;
  --pp-sidebar-bg: #f8f9fb;
  --pp-sidebar-hover: rgba(15, 23, 42, 0.04);
  --pp-sidebar-active: rgba(15, 23, 42, 0.06);
  --pp-sidebar-text: #374151;
  --pp-sidebar-muted: #9ca3af;
  --pp-sidebar-active-text: #111827;
  --pp-rail-accent: var(--pp-accent);
  --primary: var(--pp-accent);
  --primary-light: var(--pp-accent-soft);
  --surface: var(--pp-surface);
  --surface-2: var(--pp-surface-2);
  --surface-secondary: var(--pp-surface-2);
  --surface-hover: var(--pp-surface-2);
  --text: var(--pp-text);
  --text-muted: var(--pp-text-muted);
  --accent: var(--pp-accent);
  --accent-weak: var(--pp-accent-soft);
  background: var(--pp-shell-bg);
}

body.pp-body[data-ui-theme="pilot_classic"] {
  --pp-accent: #2563eb;
  --pp-accent-hover: #1d4ed8;
  --pp-accent-soft: #dbeafe;
  --pp-shell-bg: #0f172a;
  --pp-sidebar-bg: #f8f9fb;
  --pp-sidebar-hover: rgba(15, 23, 42, 0.04);
  --pp-sidebar-active: rgba(15, 23, 42, 0.06);
}

body.pp-body[data-ui-theme="graphite"] {
  --pp-accent: #f97316;
  --pp-accent-hover: #ea580c;
  --pp-accent-soft: #ffedd5;
  --pp-info: #0369a1;
  --pp-shell-bg: #050505;
  --pp-sidebar-bg: #171717;
  --pp-sidebar-hover: rgba(248, 250, 252, 0.06);
  --pp-sidebar-active: rgba(249, 115, 22, 0.18);
  --pp-sidebar-text: #a1a1aa;
  --pp-sidebar-muted: #52525b;
  --pp-sidebar-active-text: #fdba74;
}

body.pp-body[data-ui-theme="noir"] {
  --pp-accent: #7c3aed;
  --pp-accent-hover: #6d28d9;
  --pp-accent-soft: #ede9fe;
  --pp-info: #6d28d9;
  --pp-shell-bg: #050505;
  --pp-sidebar-bg: #171717;
  --pp-sidebar-hover: rgba(248, 250, 252, 0.06);
  --pp-sidebar-active: rgba(124, 58, 237, 0.18);
  --pp-sidebar-text: #a1a1aa;
  --pp-sidebar-muted: #52525b;
  --pp-sidebar-active-text: #c4b5fd;
}

body.pp-body[data-ui-theme="paper"] {
  --pp-accent: #2563eb;
  --pp-accent-hover: #1d4ed8;
  --pp-accent-soft: #dbeafe;
  --pp-info: #1d4ed8;
  --pp-shell-bg: #ffffff;
  --pp-shell-fg: #111827;
  --pp-shell-muted: #475569;
  --pp-shell-hover: rgba(15, 23, 42, 0.06);
  --pp-shell-active: rgba(37, 99, 235, 0.12);
  --pp-inner-shell-outline: rgba(15, 23, 42, 0.10);
  --pp-sidebar-bg: #f9fafb;
  --pp-sidebar-hover: rgba(15, 23, 42, 0.04);
  --pp-sidebar-active: rgba(37, 99, 235, 0.08);
  --pp-sidebar-active-text: #1e40af;
}

body.pp-body[data-ui-theme="sand"] {
  --pp-accent: #d97706;
  --pp-accent-hover: #b45309;
  --pp-accent-soft: #fef3c7;
  --pp-info: #b45309;
  --pp-shell-bg: #fffbeb;
  --pp-shell-fg: #1f2937;
  --pp-shell-muted: #57534e;
  --pp-shell-hover: rgba(120, 53, 15, 0.07);
  --pp-shell-active: rgba(217, 119, 6, 0.14);
  --pp-inner-shell-outline: rgba(120, 53, 15, 0.12);
  --pp-sidebar-bg: #fefce8;
  --pp-sidebar-hover: rgba(120, 53, 15, 0.05);
  --pp-sidebar-active: rgba(217, 119, 6, 0.1);
  --pp-sidebar-active-text: #92400e;
}

body.pp-body[data-ui-theme="steel"] {
  --pp-accent: #0891b2;
  --pp-accent-hover: #0e7490;
  --pp-accent-soft: #cffafe;
  --pp-info: #0e7490;
  --pp-shell-bg: #111827;
  --pp-sidebar-bg: #f0fdfa;
  --pp-sidebar-hover: rgba(15, 23, 42, 0.04);
  --pp-sidebar-active: rgba(8, 145, 178, 0.1);
  --pp-sidebar-active-text: #0e7490;
}

body.pp-body[data-ui-theme="forest"] {
  --pp-accent: #16a34a;
  --pp-accent-hover: #15803d;
  --pp-accent-soft: #dcfce7;
  --pp-info: #047857;
  --pp-shell-bg: #052e16;
  --pp-sidebar-bg: #f0fdf4;
  --pp-sidebar-hover: rgba(15, 23, 42, 0.04);
  --pp-sidebar-active: rgba(22, 163, 74, 0.1);
  --pp-sidebar-active-text: #166534;
}

body.pp-body[data-ui-theme="ember"] {
  --pp-accent: #dc2626;
  --pp-accent-hover: #b91c1c;
  --pp-accent-soft: #fee2e2;
  --pp-info: #b91c1c;
  --pp-shell-bg: #18181b;
  --pp-sidebar-bg: #fef2f2;
  --pp-sidebar-hover: rgba(15, 23, 42, 0.04);
  --pp-sidebar-active: rgba(220, 38, 38, 0.08);
  --pp-sidebar-active-text: #991b1b;
}

body.pp-body[data-ui-theme="ocean"] {
  --pp-accent: #0284c7;
  --pp-accent-hover: #0369a1;
  --pp-accent-soft: #e0f2fe;
  --pp-info: #0369a1;
  --pp-shell-bg: #082f49;
  --pp-sidebar-bg: #0c4a6e;
  --pp-sidebar-hover: rgba(248, 250, 252, 0.06);
  --pp-sidebar-active: rgba(2, 132, 199, 0.25);
  --pp-sidebar-text: #bae6fd;
  --pp-sidebar-muted: #0369a1;
  --pp-sidebar-active-text: #e0f2fe;
}

body.pp-body .header-bar,
body.pp-body .sidebar-corner {
  background: var(--pp-shell-bg);
}

body.pp-body .header-brand,
body.pp-body .header-mobile-menu-btn {
  color: var(--pp-shell-fg);
}

body.pp-body[data-ui-theme="paper"] .header-logo-mark--light,
body.pp-body[data-ui-theme="sand"] .header-logo-mark--light {
  display: none;
}

body.pp-body[data-ui-theme="paper"] .header-logo-mark--dark,
body.pp-body[data-ui-theme="sand"] .header-logo-mark--dark {
  display: block;
}

body.pp-body .header-search {
  background: color-mix(in oklab, var(--pp-shell-fg) 10%, transparent);
  border-color: color-mix(in oklab, var(--pp-shell-fg) 20%, transparent);
  color: var(--pp-shell-fg);
}

body.pp-body .header-search input::placeholder,
body.pp-body .header-search-icon {
  color: var(--pp-shell-muted);
}

body.pp-body .sidebar,
body.pp-body .builder-sidebar,
body.pp-body .settings-sidebar,
body.pp-body .inbox-filter-sidebar {
  background: var(--pp-sidebar-bg);
  color: var(--pp-sidebar-text);
}

body.pp-body .main,
body.pp-body .settings-shell,
body.pp-body .builder-shell {
  position: relative;
}

body.pp-body .main::after,
body.pp-body .settings-shell::after,
body.pp-body .builder-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--pp-inner-shell-outline);
  border-radius: inherit;
  pointer-events: none;
  z-index: 8;
}

body.pp-body .nav-parent,
body.pp-body .nav-item,
body.pp-body .nav-nested-toggle,
body.pp-body .nav-mini-item,
body.pp-body .builder-sidebar-item,
body.pp-body .settings-sidebar-item,
body.pp-body .settings-sidebar-group-summary {
  color: var(--pp-sidebar-text);
}

body.pp-body .nav-icon,
body.pp-body .nav-mini-title,
body.pp-body .builder-sidebar-group-title,
body.pp-body .settings-sidebar-group-title,
body.pp-body .settings-sidebar-group-icon {
  color: var(--pp-sidebar-muted);
}

body.pp-body .nav-parent:hover,
body.pp-body .nav-item:hover,
body.pp-body .nav-nested-toggle:hover,
body.pp-body .nav-mini-item:hover,
body.pp-body .builder-sidebar-item:hover,
body.pp-body .settings-sidebar-item:hover,
body.pp-body .settings-sidebar-group-summary:hover {
  background: var(--pp-sidebar-hover);
  color: var(--pp-sidebar-active-text);
}

body.pp-body .nav-section-single .nav-parent.is-active,
body.pp-body .nav-item.is-active,
body.pp-body .builder-sidebar-item.is-active,
body.pp-body .settings-sidebar-item.is-active {
  background: var(--pp-sidebar-active);
  color: var(--pp-sidebar-active-text);
}

body.pp-body .nav-section-single .nav-parent.is-active .nav-icon,
body.pp-body .builder-sidebar-item.is-active .builder-sidebar-item-icon,
body.pp-body .settings-sidebar-item.is-active .settings-sidebar-item-icon {
  color: var(--pp-sidebar-active-text);
}

body.pp-body .nav-parent:hover .nav-icon,
body.pp-body .nav-section-single .nav-parent.is-active .nav-icon {
  color: var(--pp-sidebar-active-text);
}

/* Modern OpenType features + tabular numerals on data surfaces */
.pp-body { font-feature-settings: "cv11", "ss01", "ss03"; }
.data-table tbody,
.repl-kpi-value,
.metric-value,
.pill,
.status-badge,
.card-value { font-variant-numeric: tabular-nums; }

/* === Page surface ====================================================== */
.main { background: var(--pp-page-bg); }

/* === Topbar / page header ============================================== */
.topbar {
  background: var(--pp-surface);
  border-bottom: 1px solid var(--pp-border);
  padding: 14px 24px;
}
.topbar-title h1,
.variant-topbar-title,
.page-header h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--pp-text);
  line-height: 1.2;
  margin: 2px 0;
}
.eyebrow {
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pp-text-muted);
}
.eyebrow .link { color: var(--pp-text-muted); }
.eyebrow .link:hover {
  color: var(--pp-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.variant-topbar-sku {
  color: var(--pp-text-muted);
  font-size: 13px;
}
.topbar-actions { gap: 8px; }
.variant-topbar-media__img,
.variant-topbar-media__placeholder,
.page-header-media {
  border-radius: 10px;
  border: 1px solid var(--pp-border);
}

/* === Buttons ========================================================== */
.btn {
  border-radius: 8px;
  font-size: 13.5px;
  min-height: 32px;
  padding: 6px 12px;
  font-weight: 500;
  border-color: var(--pp-border-strong);
  box-shadow: none;
  background: var(--pp-surface);
  color: var(--pp-text);
  transition: background 0.15s var(--pp-ease), border-color 0.15s var(--pp-ease), color 0.15s var(--pp-ease);
}
.btn:hover {
  background: var(--pp-surface-2);
  border-color: var(--pp-border-strong);
  box-shadow: none;
}
.btn:active {
  background: var(--pp-surface-3);
  transform: none;
}
.btn:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--pp-accent-soft);
}
.btn-primary {
  background: var(--pp-accent);
  color: #ffffff;
  border-color: var(--pp-accent);
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.18);
}
.btn-primary:hover {
  background: var(--pp-accent-hover);
  border-color: var(--pp-accent-hover);
}
.btn-primary:active {
  background: #3730a3;
  border-color: #3730a3;
}
.btn-danger {
  background: var(--pp-danger);
  border-color: var(--pp-danger);
  color: #ffffff;
}
.btn-danger:hover {
  background: #991b1b;
  border-color: #991b1b;
}
.icon-button {
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.15s var(--pp-ease);
}
.icon-button:hover { background: var(--pp-surface-2); }

/* === Tabs (calmer, modern) ============================================ */
.tabs__bar {
  background: transparent;
  border-bottom: 1px solid var(--pp-border);
  box-shadow: none;
  gap: 2px;
  padding: 6px 4px 0;
  min-height: 40px;
  /* Many tabs / small screens: keep a single row and let it scroll
     horizontally instead of wrapping or clipping. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--pp-border-strong) transparent;
}
/* Soften only the edge(s) that actually have more tabs out of view, so a
   partially-scrolled bar reads as "there's more" without fading content
   when everything already fits. Toggled by the tabs Stimulus controller. */
.tabs__bar--scroll-left.tabs__bar--scroll-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.tabs__bar--scroll-left:not(.tabs__bar--scroll-right) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px);
  mask-image: linear-gradient(to right, transparent 0, #000 16px);
}
.tabs__bar--scroll-right:not(.tabs__bar--scroll-left) {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 16px);
  mask-image: linear-gradient(to left, transparent 0, #000 16px);
}
.tabs__bar::-webkit-scrollbar {
  height: 6px;
}
.tabs__bar::-webkit-scrollbar-thumb {
  background: var(--pp-border-strong);
  border-radius: 999px;
}
.tabs__bar::-webkit-scrollbar-track {
  background: transparent;
}
.tabs__tab {
  padding: 8px 12px;
  margin: 0 2px;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--pp-text-muted);
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  transition: color 0.15s var(--pp-ease), background 0.15s var(--pp-ease), border-color 0.15s var(--pp-ease);
  /* Never shrink or wrap a tab label — the bar scrolls instead. */
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tabs__attention-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.tabs__attention-badge[hidden] {
  display: none !important;
}

.form-field--needs-attention > label::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-radius: 50%;
  background: #dc2626;
  vertical-align: middle;
  transform: translateY(-1px);
}

.form-field--needs-attention > .input,
.form-field--needs-attention .input-group > .input,
.form-field--needs-attention .cfd-form-field__main > .input,
.form-field--needs-attention .cfd-form-field__main > textarea.input,
.form-field--needs-attention .cfd-form-field__main > select.input {
  border-color: #f87171;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.12);
}
.tabs__tab:hover {
  color: var(--pp-text);
  background: var(--pp-surface-2);
}
.tabs__tab--active,
.tabs__tab[aria-selected="true"] {
  color: var(--pp-text);
  background: transparent;
  border-bottom-color: var(--pp-accent);
}
/* Removable embed tab + the trailing "Add tab" control must also keep
   their intrinsic size inside the scrolling bar. */
.tabs__tab-group,
.tabs__add {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
/* Tighten the gap between an embedded tab's label and its × control.
   (Placed after `.tabs__tab` so it wins the cascade.) */
.tabs__tab--removable {
  padding-right: 2px;
}
/* A touch more breathing room between the + glyph and "Add tab". */
.tabs__add-tab {
  gap: 6px;
}

/* === Panels =========================================================== */
.panel {
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: 14px;
  box-shadow: var(--pp-shadow-sm);
  padding: 18px 20px;
}
.panel.table-panel {
  padding: 0;
}
.panel-header h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--pp-text);
}
.panel-header .muted,
.panel-header-stacked .muted {
  font-size: 13px;
  color: var(--pp-text-muted);
}

/* === Status badges (quiet, dot + tint) ================================ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  background: var(--pp-surface-2);
  color: var(--pp-text);
  border: 1px solid transparent;
}
.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}
.status-badge--draft         { background: rgba(100,116,139,0.10); color: #475569; }
.status-badge--pending,
.status-badge--pending_review,
.status-badge--in_review,
.status-badge--pending_approval,
.status-badge--unpaid,
.status-badge--partial,
.status-badge--receiving     { background: var(--pp-warning-soft); color: var(--pp-warning); }
.status-badge--approved,
.status-badge--verified,
.status-badge--accepted,
.status-badge--paid,
.status-badge--reconciled,
.status-badge--received,
.status-badge--fully_invoiced,
.status-badge--active        { background: var(--pp-success-soft); color: var(--pp-success); }
.status-badge--in_transit,
.status-badge--submitted_to_supplier,
.status-badge--arrived,
.status-badge--partially_paid,
.status-badge--info          { background: var(--pp-info-soft); color: var(--pp-info); }
.status-badge--partially_invoiced { background: rgba(99,102,241,0.12); color: #4338ca; }
.status-badge--disputed,
.status-badge--cancelled     { background: var(--pp-danger-soft); color: var(--pp-danger); }
.status-badge--closed        { background: rgba(100,116,139,0.10); color: #475569; }
.status-badge--neutral       { background: rgba(100,116,139,0.10); color: #475569; }
.status-badge--success       { background: var(--pp-success-soft); color: var(--pp-success); }
.status-badge--warning       { background: var(--pp-warning-soft); color: var(--pp-warning); }
.status-badge--danger        { background: var(--pp-danger-soft); color: var(--pp-danger); }

/* === Pills ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 8px;
  border-radius: 999px;
  background: var(--pp-surface-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--pp-text);
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}
.pill-success  { background: var(--pp-success-soft); color: var(--pp-success); }
.pill-warning  { background: var(--pp-warning-soft); color: var(--pp-warning); }
.pill-danger   { background: var(--pp-danger-soft); color: var(--pp-danger); }
/* Shopify brand green */
.pill-shopify  { background: #d4edda; color: #2a7a3b; }

/* === KPI cards =======================================================
   Individual rounded cards — handles row wrapping cleanly. We tried a
   "single connected strip" using gap-as-divider, but the variant /
   product show pages have 6 cards in a 5-col grid, and the wrapped
   row left ugly grey "empty cell" rectangles on the right. Individual
   cards = no wrapping artifact. */
.repl-kpi-row {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  gap: 8px;
  overflow: visible;
  box-shadow: none;
}
.repl-kpi-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: var(--pp-shadow-sm);
  transition: background 0.15s var(--pp-ease), border-color 0.15s var(--pp-ease);
}
.repl-kpi-card:hover {
  background: var(--pp-surface);
  border-color: var(--pp-border-strong);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.repl-kpi-value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--pp-text);
  line-height: 1.1;
}
.repl-kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--pp-text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 6px;
}
/* Glance strip: tighter top/bottom margin, hugs panels below.
   `auto-fit` (instead of the legacy `repeat(5, …)`) means the row
   adapts to however many cards a given page emits — products & variants
   both have 6 cards, but other entity-show pages may have 4 or 5. On a
   typical desktop (~1024px content width) all 6 fit on one row. */
.entity-show__glance.repl-kpi-row {
  margin: 0 24px 12px;
  width: calc(100% - 48px);
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
}
/* When the glance strip lives INSIDE a tab panel (so it only shows on
   that tab) the panel already provides the 24px gutter — drop our own
   side margins so it aligns with sibling panels. */
.tabs__panel > .repl-kpi-row {
  margin: 0 0 12px;
  width: 100%;
}
/* Reduce the empty gap above panels rendered below the glance strip */
.entity-show__tabs .tabs__panel {
  padding-top: 16px;
  gap: 14px;
}
/* Workflow / approval alert needs breathing room before the KPI strip
   below it. The base styles use padding-top + zero padding-bottom and
   rely on the next element's top margin — but the new tighter glance
   row sits flush. Add explicit bottom padding here. */
.entity-show__tabs > .pending-approval-alerts,
.po-show__tabs > .pending-approval-alerts {
  padding-bottom: 12px;
}

/* Plain metric-card grid (Purchasing & demand etc.) */
.metric-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--pp-shadow-sm);
}
.metric-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--pp-text-muted);
  margin-bottom: 4px;
}
.metric-value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* === Tables ========================================================== */
.data-table { font-size: 13.5px; }
.data-table thead th {
  background: var(--pp-surface);
  border-bottom: 1px solid var(--pp-border);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--pp-text-muted);
  padding: 10px 14px;
}
.data-table tbody td {
  border-bottom: 1px solid var(--pp-border);
  padding: 12px 14px;
  color: var(--pp-text);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr {
  transition: background 0.12s var(--pp-ease);
}
.data-table tbody tr:hover { background: var(--pp-surface-2); }

/* Sticky thead inside scrollable table-wrap */
.table-wrap { position: relative; }
.table-wrap .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--pp-surface);
}
.data-table th.is-pinned { background: var(--pp-surface-2); }

/* Opt-in: numeric columns. Add data-numeric to <th>/<td> for right-aligned tabular nums. */
.data-table td[data-numeric],
.data-table th[data-numeric] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Table panel rounded outer edge */
.table-panel {
  border-radius: 14px;
  overflow: hidden;
}

/* === Sidebar refinements (light sidebar) =============================
   Clean, airy light sidebar that doesn't compete with the main
   content. Active states use the accent color + a left-edge bar on
   the active leaf item, inspired by Stripe/Vercel. */
.sidebar { background: #f8f9fb; }

.nav-section-single .nav-parent.is-active {
  background: rgba(15, 23, 42, 0.05);
  color: #111827;
  font-weight: 600;
}
.nav-section-single .nav-parent.is-active .nav-icon { color: #111827; }

.nav-section:not(.nav-section-single) > .nav-parent.is-active {
  background: rgba(15, 23, 42, 0.04);
  color: #111827;
  font-weight: 600;
}
.nav-section:not(.nav-section-single):has(.nav-item.is-active) > .nav-parent.is-active {
  background: transparent;
  color: #6b7280;
  font-weight: 500;
}
.nav-item {
  font-weight: 400;
  color: #4b5563;
  border-radius: 6px;
}
.nav-item:hover {
  background: rgba(15, 23, 42, 0.04);
  color: #111827;
}
.nav-item.is-active {
  background: rgba(15, 23, 42, 0.05);
  color: #111827;
  font-weight: 500;
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 0 3px 3px 0;
  background: var(--pp-accent, #3b82f6);
}
.nav-mini-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
}

/* === Header (dark slate) tweaks ===================================== */
.header-search {
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.08);
  border-color: rgba(248, 250, 252, 0.14);
  font-size: 13px;
}
.header-search:hover { border-color: rgba(248, 250, 252, 0.22); }
.header-search-shortcut {
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(248, 250, 252, 0.08);
  border: 1px solid rgba(248, 250, 252, 0.14);
  color: #cbd5f5;
  margin-left: 4px;
}
.account-switcher-pill {
  border-radius: 8px;
  font-size: 12.5px;
}
.user-pill {
  width: 32px;
  height: 32px;
  font-size: 12px;
  background: rgba(248, 250, 252, 0.10);
  color: #f8fafc;
  border: 1px solid rgba(248, 250, 252, 0.14);
}

/* === Toast =========================================================== */
.toast {
  background: #18181b;
  color: #fafafa;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10);
}

/* === Dropdown menus ================================================= */
.dropdown-menu {
  border-radius: 10px;
  border: 1px solid var(--pp-border);
  box-shadow: var(--pp-shadow-md);
  padding: 4px;
}
.dropdown-item {
  border-radius: 6px;
  font-size: 13.5px;
  padding: 6px 10px;
  color: var(--pp-text);
}
.dropdown-item:hover { background: var(--pp-surface-2); }
.dropdown-item--danger { color: var(--pp-danger); }
.dropdown-item--danger:hover {
  background: var(--pp-danger-soft);
  color: var(--pp-danger);
}

/* === Detail list (dt/dd) ============================================ */
.detail-list dt {
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--pp-text-muted);
}
.detail-list dd {
  font-size: 13.5px;
  color: var(--pp-text);
}
.long-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--pp-text);
}

/* === Universal focus rings ========================================== */
:focus-visible {
  outline-color: var(--pp-accent);
  outline-offset: 2px;
}

/* === KPI Stat Strip variant ========================================
   A tighter, more space-efficient alternative to the individual KPI
   cards. Apply `repl-kpi-row--strip` to the row. Single unified
   surface with thin vertical dividers between stats — Linear /
   Vercel / Stripe dashboard style.

   The original card layout still works (just don't add the modifier),
   so this is purely opt-in per page.
   ----------------------------------------------------------------- */
.repl-kpi-row.repl-kpi-row--strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  box-shadow: var(--pp-shadow-sm);
  /* No overflow:hidden — items have transparent backgrounds, so the
     rounded corners read clean without clipping, and tooltips
     anchored to children can escape the strip. */
  grid-template-columns: none;
}

.repl-kpi-row.repl-kpi-row--strip .repl-kpi-card {
  flex: 1 1 140px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--pp-border);
  border-radius: 0;
  box-shadow: none;
}

.repl-kpi-row.repl-kpi-row--strip .repl-kpi-card:first-child {
  border-left: 0;
}

/* Label sits ABOVE the value in strip mode — reads naturally
   left-to-right like a sentence, e.g. "Variants 17 · On order 0 · …".
   Uses `order` so we don't have to change the HTML. */
.repl-kpi-row.repl-kpi-row--strip .repl-kpi-label {
  order: -1;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--pp-text-muted);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}

.repl-kpi-row.repl-kpi-row--strip .repl-kpi-value {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--pp-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  /* Truncate gracefully if a value (e.g. a long pill) overflows. */
  min-width: 0;
}

/* Danger state — soften the visual: red value text + a small dot,
   instead of the full red background that would clash with the
   shared surface. */
.repl-kpi-row.repl-kpi-row--strip .repl-kpi-card--danger {
  background: transparent;
}
.repl-kpi-row.repl-kpi-row--strip .repl-kpi-card--danger .repl-kpi-value {
  color: #b91c1c;
}
.repl-kpi-row.repl-kpi-row--strip .repl-kpi-card--danger .repl-kpi-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ef4444;
  margin-right: 6px;
  vertical-align: middle;
}

/* When items wrap onto a new row on narrow screens, the leftmost
   item of the new row will still show its left border. Hide it via
   a small trick: items at the start of a row tend to have an x
   offset of 0. We can't detect that in pure CSS, so we accept the
   subtle line — it reads as a continuous grid and looks fine. */

/* Note on inline tooltips:
   The app's canonical inline-tooltip pattern is the `shared/help_tooltip`
   partial (`.help-tooltip-wrap` / `.help-tooltip-trigger` /
   `.help-tooltip-content`), powered by app/javascript/products_grid.js.
   Use that partial — do NOT introduce a new tooltip flavor. */

/* End of 2026 modernization layer */

/* ───────────────────────────────────────────────────────────────────────────
   Variant Picker (shared/_variant_picker · variant_combobox_controller)
   See .cursor/rules/variant-picker.mdc for usage.
   Class prefix: .vp-* (intentionally distinct from legacy .variant-dropdown).
   ─────────────────────────────────────────────────────────────────────────── */

.vp-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.vp-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vp-input {
  width: 100%;
  flex: 1;
}

.vp-counter {
  font-size: 12px;
  white-space: nowrap;
}

.vp-done {
  flex: none;
}

.vp-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: -2px;
}

.vp-token {
  background: var(--pp-bg-subtle, #f1f5f9);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--pp-text-muted, #475569);
}

.vp-token strong {
  color: var(--pp-text, #0f172a);
  font-weight: 600;
}

/* ─── Chips (multi-select) ─── */

.vp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}

.vp-chips:empty {
  display: none;
}

.vp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: var(--pp-bg-subtle, #f1f5f9);
  border: 1px solid var(--pp-line, #e2e8f0);
  font-size: 12px;
  max-width: 320px;
}

.vp-chip__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vp-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--pp-text-muted, #475569);
  cursor: pointer;
}

.vp-chip__remove:hover {
  background: var(--pp-line, #e2e8f0);
  color: var(--pp-text, #0f172a);
}

.vp-chips__overflow {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--pp-surface-2, #f1f5f9);
  border: 1px dashed var(--pp-line, #e2e8f0);
  font-size: 12px;
  font-weight: 500;
  color: var(--pp-text-muted, #475569);
  cursor: pointer;
}

.vp-chips__overflow:hover {
  background: var(--pp-line, #e2e8f0);
  color: var(--pp-text, #0f172a);
}

/* ─── Dropdown ─── */

.vp-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--panel, #fff);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 12px;
  box-shadow: var(--pp-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.12));
  z-index: 1100;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
}

.vp-dropdown[hidden] {
  display: none;
}

.vp-dropdown--fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: auto;
}

.vp-heading {
  padding: 6px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted, #64748b);
  font-weight: 600;
}

/* ─── Row ─── */

.vp-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

.vp-row:hover,
.vp-row.is-active {
  background: var(--pp-bg-subtle, #f1f5f9);
}

.vp-row.is-active {
  outline: 2px solid var(--pp-accent, #3b82f6);
  outline-offset: -2px;
}

.vp-row__media {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--pp-bg-subtle, #f1f5f9);
  overflow: hidden;
  flex: none;
}

.vp-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vp-row__placeholder {
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text-muted, #64748b);
}

.vp-row__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vp-row__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vp-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--pp-text-muted, #64748b);
  font-variant-numeric: tabular-nums;
}

.vp-row__sku {
  font-family: var(--pp-mono-font, ui-monospace, SFMono-Regular, monospace);
  color: var(--pp-text, #0f172a);
}

.vp-row__barcode {
  font-family: var(--pp-mono-font, ui-monospace, SFMono-Regular, monospace);
}

.vp-row__opts {
  font-size: 11px;
}

.vp-row__badges {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.vp-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.vp-badge--recent {
  background: var(--pp-info-bg, #dbeafe);
  color: var(--pp-info-text, #1d4ed8);
}

.vp-badge--bundle {
  background: #fef3c7;
  color: #92400e;
}

.vp-row__stock {
  text-align: right;
  font-size: 12px;
  color: var(--pp-text-muted, #475569);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vp-row__stock-num strong {
  font-size: 13px;
  color: var(--pp-text, #0f172a);
}

.vp-row__bins {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 4px;
  max-width: 200px;
}

.vp-bin {
  font-size: 10px;
  background: var(--pp-bg-subtle, #f1f5f9);
  border: 1px solid var(--pp-line, #e2e8f0);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ─── States ─── */

.vp-state {
  padding: 14px;
  font-size: 13px;
  color: var(--pp-text-muted, #64748b);
  text-align: center;
}

.vp-state--loading::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 8px;
  border: 2px solid var(--pp-line, #e2e8f0);
  border-top-color: var(--pp-accent, #3b82f6);
  border-radius: 50%;
  animation: vp-spin 0.7s linear infinite;
  vertical-align: -2px;
}

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

.vp-state--error {
  color: var(--pp-danger-text, #b91c1c);
}

.vp-link {
  background: none;
  border: none;
  color: var(--pp-accent, #3b82f6);
  cursor: pointer;
  font: inherit;
  margin-left: 8px;
  text-decoration: underline;
}

/* ─── Hover preview popover ─── */

.vp-preview {
  position: fixed;
  z-index: 1300;
  width: 280px;
  background: var(--panel, #fff);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 12px;
  box-shadow: var(--pp-shadow-lg, 0 16px 40px rgba(15, 23, 42, 0.18));
  padding: 12px;
  display: flex;
  gap: 10px;
  pointer-events: none;
}

.vp-preview[hidden] {
  display: none;
}

.op-preview,
.fp-preview {
  flex-direction: column;
  width: 300px;
  gap: 0;
}

.vp-preview__photo {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 8px;
  background: var(--pp-bg-subtle, #f1f5f9);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vp-preview__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vp-preview__placeholder {
  font-size: 24px;
  font-weight: 600;
  color: var(--pp-text-muted, #64748b);
}

.vp-preview__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.vp-preview__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  line-height: 1.2;
}

.vp-preview__sku {
  font-family: var(--pp-mono-font, ui-monospace, SFMono-Regular, monospace);
  font-size: 11px;
}

.vp-preview__price {
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
}

.vp-preview__opts {
  margin-top: 4px;
  font-size: 11px;
  color: var(--pp-text-muted, #64748b);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.vp-preview__stock,
.vp-preview__pos {
  margin-top: 4px;
  font-size: 12px;
  color: var(--pp-text, #0f172a);
}

.vp-help code {
  background: var(--pp-bg-subtle, #f1f5f9);
  padding: 0 4px;
  border-radius: 4px;
  font-size: 11px;
}

/* ─── Variant Picker: selected card (single-mode, non-compact) ─── */

.vp-selected-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--panel, #fff);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 12px;
  box-shadow: var(--pp-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
}

.vp-selected-card[hidden] {
  display: none;
}

.vp-selected-card__media {
  width: 56px;
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--pp-bg-subtle, #f1f5f9);
  overflow: hidden;
}

.vp-selected-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vp-selected-card__placeholder {
  font-size: 16px;
  font-weight: 600;
  color: var(--pp-text-muted, #64748b);
}

.vp-selected-card__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vp-selected-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.vp-selected-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
  font-variant-numeric: tabular-nums;
}

.vp-selected-card__sku,
.vp-selected-card__barcode {
  font-family: var(--pp-mono-font, ui-monospace, SFMono-Regular, monospace);
}

.vp-selected-card__sku {
  color: var(--pp-text, #0f172a);
}

.vp-selected-card__stock {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 8px;
  background: var(--pp-bg-subtle, #f1f5f9);
  border-radius: 999px;
  color: var(--pp-text, #0f172a);
}

.vp-selected-card__stock strong {
  font-weight: 600;
}

.vp-selected-card__change {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--pp-text-muted, #64748b);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.vp-selected-card__change:hover,
.vp-selected-card__change:focus-visible {
  background: var(--pp-bg-subtle, #f1f5f9);
  border-color: var(--pp-line, #e2e8f0);
  color: var(--pp-text, #0f172a);
  outline: none;
}

/* When a card is showing, the dropdown should still position itself relative
   to the picker container (the input is hidden but offsetParent is the picker). */
.vp-picker--has-selection .vp-dropdown:not([hidden]) {
  /* dropdown only opens after Change is clicked, so this is mostly a no-op */
}

/* ───────────────────────────────────────────────────────────────────────────
   Variant picker — barcode scan button (in-field) + camera overlay
   ─────────────────────────────────────────────────────────────────────────── */

/* Anchor the field so the absolutely-positioned scan button can sit on top
   of the input's right edge without disturbing layout. */
.vp-field {
  position: relative;
}

/* ─── Scope toggle (right-edge in-field button, twin of .vp-scan-btn) ─── */
.vp-input--with-scope {
  padding-right: 156px;
}

.vp-field .vp-scope-wrap.help-tooltip-wrap {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  margin-left: 0;
  z-index: 1;
}

.vp-field .vp-scope-wrap .vp-scope-toggle.help-tooltip-trigger {
  appearance: none;
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--pp-line, #e2e8f0);
  background: var(--pp-bg-subtle, #f8fafc);
  color: var(--pp-text, #0f172a);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.vp-field .vp-scope-wrap .vp-scope-toggle.help-tooltip-trigger:hover,
.vp-field .vp-scope-wrap .vp-scope-toggle.help-tooltip-trigger:focus-visible {
  background: #fff;
  border-color: var(--pp-accent, #3b82f6);
  color: var(--pp-accent, #1d4ed8);
  outline: none;
}

.vp-field .vp-scope-wrap .vp-scope-toggle.help-tooltip-trigger:active {
  transform: scale(0.97);
}

.vp-scope-toggle--active {
  background: color-mix(in srgb, var(--pp-accent, #3b82f6) 10%, #fff) !important;
  border-color: color-mix(in srgb, var(--pp-accent, #3b82f6) 45%, var(--pp-line, #e2e8f0)) !important;
  color: var(--pp-accent, #1d4ed8) !important;
}

.vp-scope-hint {
  margin-top: 4px;
}

/* Stack scope left of scan / photo when those buttons are visible. */
.vp-field:has(.vp-scan-btn:not([hidden])) .vp-scope-wrap { right: 82px; }
.vp-field:has(.vp-identify-btn:not([hidden])):not(:has(.vp-scan-btn:not([hidden]))) .vp-scope-wrap { right: 82px; }
.vp-field:has(.vp-scan-btn:not([hidden])):has(.vp-identify-btn:not([hidden])) .vp-scope-wrap { right: 158px; }

.vp-input--with-scope.vp-input--with-scan { padding-right: 234px; }
.vp-input--with-scope.vp-input--with-identify:not(.vp-input--with-scan) { padding-right: 234px; }
.vp-input--with-scope.vp-input--with-scan.vp-input--with-identify { padding-right: 312px; }

@media (max-width: 480px) {
  .vp-input--with-scope { padding-right: 132px; }
  .vp-input--with-scope.vp-input--with-scan { padding-right: 182px; }
  .vp-input--with-scope.vp-input--with-identify:not(.vp-input--with-scan) { padding-right: 182px; }
  .vp-input--with-scope.vp-input--with-scan.vp-input--with-identify { padding-right: 232px; }
  .vp-field:has(.vp-scan-btn:not([hidden])) .vp-scope-wrap { right: 50px; }
  .vp-field:has(.vp-identify-btn:not([hidden])):not(:has(.vp-scan-btn:not([hidden]))) .vp-scope-wrap { right: 50px; }
  .vp-field:has(.vp-scan-btn:not([hidden])):has(.vp-identify-btn:not([hidden])) .vp-scope-wrap { right: 94px; }
}

@media (pointer: coarse) {
  .vp-field .vp-scope-wrap .vp-scope-toggle.help-tooltip-trigger {
    height: 40px;
    padding: 0 12px;
  }
}

/* Reserve room on the right of the input so the scan button doesn't sit on
   top of typed text. The class is only applied when allow_scan is true. */
.vp-input--with-scan {
  padding-right: 80px;
}

.vp-scan-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--pp-line, #e2e8f0);
  background: var(--pp-bg-subtle, #f8fafc);
  color: var(--pp-text, #0f172a);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.vp-scan-btn:hover,
.vp-scan-btn:focus-visible {
  background: #fff;
  border-color: var(--pp-accent, #3b82f6);
  color: var(--pp-accent, #1d4ed8);
  outline: none;
}
.vp-scan-btn:active {
  transform: translateY(-50%) scale(0.97);
}
.vp-scan-btn__icon {
  display: block;
  flex: 0 0 auto;
}

/* On phones the input shrinks; collapse to icon-only to save horizontal room. */
@media (max-width: 480px) {
  .vp-input--with-scan {
    padding-right: 56px;
  }
  .vp-scan-btn__label {
    display: none;
  }
  .vp-scan-btn {
    padding: 0;
    width: 40px;
    justify-content: center;
  }
}

/* Bigger touch target on touch devices (Apple HIG: ≥44pt). */
@media (pointer: coarse) {
  .vp-scan-btn {
    height: 40px;
    padding: 0 12px;
  }
  .vp-scan-btn .vp-scan-btn__icon {
    width: 22px;
    height: 22px;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Variant picker — advanced-search button (in-field, twin of scan)
   ───────────────────────────────────────────────────────────────────────────
   The advanced trigger used to live in a help-text row below every picker,
   which cost a permanent strip of vertical real estate even when the help
   text was suppressed. It now sits inside .vp-field as a compact icon
   button so it costs zero layout space, and relocates to the LEFT of the
   scan button when scan is actually visible (`:has()` rule below). */

.vp-input--with-advanced {
  /* Reserve room for the icon button (~36px + 10px breathing room). */
  padding-right: 46px;
}

/* When BOTH affordances are reserved on the input, stack their footprints
   (advanced ~36px + gap 6px + scan ~80px ≈ 124px). The :has() shift below
   handles the runtime case where scan stays hidden because the device
   doesn't support BarcodeDetector. */
.vp-input--with-scan.vp-input--with-advanced {
  padding-right: 124px;
}

.vp-advanced-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--pp-line, #e2e8f0);
  background: var(--pp-bg-subtle, #f8fafc);
  color: var(--pp-text-muted, #64748b);
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.vp-advanced-btn:hover,
.vp-advanced-btn:focus-visible {
  background: #fff;
  border-color: var(--pp-accent, #3b82f6);
  color: var(--pp-accent, #1d4ed8);
  outline: none;
}
.vp-advanced-btn:active {
  transform: translateY(-50%) scale(0.97);
}
.vp-advanced-btn__icon { display: block; flex: 0 0 auto; }

/* When the scan button is actually visible, slide the advanced button left
   so the two don't overlap. :has() lets us key off live DOM state, which
   matters because .vp-scan-btn is rendered hidden by default and only
   revealed if the device supports BarcodeDetector + camera access. */
.vp-field:has(.vp-scan-btn:not([hidden])) .vp-advanced-btn {
  right: 88px; /* scan button width (~80) + gap (~8) */
}

@media (max-width: 480px) {
  .vp-input--with-scan.vp-input--with-advanced {
    padding-right: 100px;
  }
  .vp-field:has(.vp-scan-btn:not([hidden])) .vp-advanced-btn {
    right: 50px; /* compact scan width (40) + gap (10) */
  }
}

@media (pointer: coarse) {
  .vp-advanced-btn {
    height: 40px;
    width: 40px;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Variant picker — sticky in-dropdown advanced trigger
   ───────────────────────────────────────────────────────────────────────────
   Recovery affordance for the user who's mid-search. Pinned to the bottom
   of .vp-dropdown so it remains in view while results scroll. Two tones:
   "subtle" for the loading/results/error states, "prominent" for the empty
   state where escalating to advanced is the most useful next action. */

.vp-dropdown__footer {
  position: sticky;
  bottom: -4px; /* counteract .vp-dropdown's 4px padding so it hugs the edge */
  margin: 4px -4px -4px;
  padding: 6px 8px;
  background: var(--panel, #fff);
  border-top: 1px solid var(--pp-line, #e2e8f0);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 1;
}

.vp-dropdown__footer-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px dashed transparent;
  background: transparent;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--pp-text-muted, #475569);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.vp-dropdown__footer-btn:hover,
.vp-dropdown__footer-btn:focus-visible {
  background: var(--pp-bg-subtle, #f1f5f9);
  border-color: var(--pp-line, #e2e8f0);
  color: var(--pp-text, #0f172a);
  outline: none;
}
.vp-dropdown__footer-btn strong { color: var(--pp-accent, #1d4ed8); font-weight: 600; }
.vp-dropdown__footer-icon { color: var(--pp-text-muted, #64748b); flex: 0 0 auto; }

/* The "prominent" tone fires for empty-state to nudge the user toward the
   modal — dashed border + slightly heavier framing. */
.vp-dropdown__footer--prominent .vp-dropdown__footer-btn {
  border-color: var(--pp-line, #cbd5e1);
  background: var(--pp-bg-subtle, #f8fafc);
}

/* Toast for scan errors (camera denied, no support, etc). */
.vp-scan-toast {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -36px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #1e293b;
  color: #f8fafc;
  font-size: 12px;
  text-align: center;
  z-index: 60;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
  animation: vp-scan-toast-in 160ms ease-out;
}
@keyframes vp-scan-toast-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Full-screen camera overlay ─── */

.vp-scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  background: #000;
  /* Respect notch/home-indicator on iOS. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.vp-scan-overlay__stage {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vp-scan-overlay__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Viewfinder reticle: a centred rectangle with four corner brackets, no fill,
   so the live camera feed shows through. Sized to be roughly the aspect of a
   1D barcode but works for QR codes too. */
.vp-scan-overlay__viewfinder {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(75vw, 320px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  border-radius: 12px;
}

.vp-scan-overlay__viewfinder-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 3px solid #fff;
}
.vp-scan-overlay__viewfinder-corner--tl {
  top: -2px; left: -2px;
  border-right: none; border-bottom: none;
  border-top-left-radius: 10px;
}
.vp-scan-overlay__viewfinder-corner--tr {
  top: -2px; right: -2px;
  border-left: none; border-bottom: none;
  border-top-right-radius: 10px;
}
.vp-scan-overlay__viewfinder-corner--bl {
  bottom: -2px; left: -2px;
  border-right: none; border-top: none;
  border-bottom-left-radius: 10px;
}
.vp-scan-overlay__viewfinder-corner--br {
  bottom: -2px; right: -2px;
  border-left: none; border-top: none;
  border-bottom-right-radius: 10px;
}

.vp-scan-overlay__chrome {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 20px;
  background: rgba(0, 0, 0, 0.85);
  color: #f8fafc;
}

.vp-scan-overlay__hint {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.01em;
}

.vp-scan-overlay__cancel {
  appearance: none;
  background: #fff;
  color: #0f172a;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  min-height: 48px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  width: min(320px, 100%);
}
.vp-scan-overlay__cancel:hover,
.vp-scan-overlay__cancel:focus-visible {
  background: #e2e8f0;
  outline: none;
}

/* ─── Visual identify button (twin of .vp-scan-btn) ───
   Styled to be visually identical to .vp-scan-btn so the Photo and Scan
   affordances read as a matched pair. Keep these properties in sync with
   .vp-scan-btn above. */
.vp-identify-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--pp-line, #e2e8f0);
  background: var(--pp-bg-subtle, #f8fafc);
  color: var(--pp-text, #0f172a);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.vp-identify-btn:hover,
.vp-identify-btn:focus-visible {
  background: #fff;
  border-color: var(--pp-accent, #3b82f6);
  color: var(--pp-accent, #1d4ed8);
  outline: none;
}
.vp-identify-btn:active { transform: translateY(-50%) scale(0.97); }
.vp-identify-btn__icon { display: block; flex: 0 0 auto; }

/* When both scan + identify buttons are visible, stack them. The reservation
   accounts for scan (~74px) + identify (~76px) + a small gap. */
.vp-input--with-scan.vp-input--with-identify { padding-right: 168px; }
.vp-input--with-identify:not(.vp-input--with-scan) { padding-right: 80px; }

/* Position identify btn to the left of the scan btn when both visible, with
   only a small gap between the two so they read as a tight pair. */
.vp-field:has(.vp-scan-btn:not([hidden])) .vp-identify-btn { right: 82px; }
.vp-field:has(.vp-identify-btn:not([hidden])) .vp-scan-btn { right: 6px; }

/* On phones collapse to icon-only to save horizontal room (matches scan). */
@media (max-width: 480px) {
  .vp-identify-btn__label { display: none; }
  .vp-identify-btn { padding: 0; width: 40px; justify-content: center; }
  .vp-field:has(.vp-scan-btn:not([hidden])) .vp-identify-btn { right: 50px; }
}

/* Bigger touch target on touch devices (matches scan). */
@media (pointer: coarse) {
  .vp-identify-btn { height: 40px; padding: 0 12px; }
  .vp-identify-btn .vp-identify-btn__icon { width: 22px; height: 22px; }
}

/* ─── Identify overlay (extends scan overlay chrome) ─── */
.vp-identify-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  display: flex;
  flex-direction: column;
}
.vp-identify-overlay__hint { color: #f8fafc; text-align: center; }
.vp-identify-overlay__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.vp-identify-overlay__shutter {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vp-identify-overlay__shutter-ring {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid rgba(255,255,255,0.5);
  outline: 3px solid rgba(255,255,255,0.9);
  transition: transform 80ms;
}
.vp-identify-overlay__shutter:active .vp-identify-overlay__shutter-ring {
  transform: scale(0.9);
}
.vp-identify-overlay__shutter:disabled .vp-identify-overlay__shutter-ring {
  opacity: 0.4;
}

/* ─── Visual identify result heading ─── */
.vp-heading--visual {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pp-accent, #1d4ed8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vp-heading__icon { flex: 0 0 auto; color: currentColor; }

/* ─── Match score badges ─── */
.vp-badge--visual {
  font-variant-numeric: tabular-nums;
}
.vp-badge--visual-high {
  background: var(--pp-success-bg, #dcfce7);
  color: var(--pp-success-text, #166534);
}
.vp-badge--visual-mid {
  background: var(--pp-warning-bg, #fef9c3);
  color: var(--pp-warning-text, #854d0e);
}
.vp-badge--visual-low {
  background: var(--pp-surface-2, #f1f5f9);
  color: var(--pp-text-muted, #64748b);
}

/* ───────────────────────────────────────────────────────────────────────────
   Variant picker — Advanced search modal (.vp-advanced-*)
   Singleton <dialog> rendered once per page when any picker on the page
   opts in via `advanced: true`. Two-pane layout: filter rail on the left,
   live result list on the right.
   ─────────────────────────────────────────────────────────────────────────── */

.vp-advanced {
  width: min(960px, 96vw);
  max-width: 960px;
  height: min(720px, 90vh);
  padding: 0;
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 14px;
  background: var(--panel, #fff);
  color: var(--pp-text, #0f172a);
  box-shadow: var(--pp-shadow-lg, 0 24px 60px rgba(15, 23, 42, 0.22));
  overflow: hidden;
}
.vp-advanced::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.vp-advanced[open] {
  animation: vp-advanced-in 140ms ease-out;
}
@keyframes vp-advanced-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.vp-advanced__form {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

.vp-advanced__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--pp-line, #e2e8f0);
}
.vp-advanced__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.vp-advanced__close {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
  color: var(--pp-text-muted, #64748b);
  cursor: pointer;
}
.vp-advanced__close:hover,
.vp-advanced__close:focus-visible {
  background: var(--pp-bg-subtle, #f1f5f9);
  border-color: var(--pp-line, #e2e8f0);
  color: var(--pp-text, #0f172a);
  outline: none;
}

.vp-advanced__body {
  display: grid;
  grid-template-columns: 280px 1fr;
  flex: 1 1 auto;
  min-height: 0;
}

/* ─── Filter rail ─── */
.vp-advanced__rail {
  border-right: 1px solid var(--pp-line, #e2e8f0);
  padding: 14px 14px 18px;
  overflow-y: auto;
  background: var(--pp-bg-subtle, #f8fafc);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vp-advanced__search .input { width: 100%; }
.vp-advanced__search-input {
  /* Bigger touch target — this is the primary affordance the eye lands
     on when the modal opens. */
  height: 38px;
  font-size: 14px;
}
.vp-advanced__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text-muted, #475569);
  letter-spacing: 0.01em;
}
.vp-advanced__facets {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Collapsible facet: a single 36px-tall row by default, expands inline
   when the user opens it. The visual weight of the rail stays low even
   with 8+ facets present. */
.vp-advanced__facet {
  background: var(--panel, #fff);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 8px;
  overflow: hidden;
}
.vp-advanced__facet[hidden] { display: none; }
.vp-advanced__facet[open] {
  background: var(--panel, #fff);
}
.vp-advanced__facet-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  list-style: none;
  user-select: none;
}
.vp-advanced__facet-summary::-webkit-details-marker { display: none; }
.vp-advanced__facet-summary:hover {
  background: var(--pp-bg-subtle, #f8fafc);
}
.vp-advanced__facet-label {
  flex: 1 1 auto;
  min-width: 0;
}
.vp-advanced__facet-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pp-info-bg, #dbeafe);
  color: var(--pp-info-text, #1d4ed8);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vp-advanced__facet-count[hidden] { display: none; }
.vp-advanced__facet-chevron {
  color: var(--pp-text-muted, #94a3b8);
  font-size: 16px;
  line-height: 1;
  transition: transform 120ms ease;
}
.vp-advanced__facet[open] > .vp-advanced__facet-summary .vp-advanced__facet-chevron {
  transform: rotate(90deg);
}
.vp-advanced__facet-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 12px 12px;
  border-top: 1px solid var(--pp-line, #e2e8f0);
}
.vp-advanced__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.vp-advanced__pair {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vp-advanced__pair .input { width: 100%; }
.vp-advanced__range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: center;
}
.vp-advanced__range .vp-advanced__label {
  grid-column: 1 / -1;
}
.vp-advanced__range--inline {
  grid-template-columns: 1fr auto 1fr;
}
.vp-advanced__range-sep {
  text-align: center;
  color: var(--pp-text-muted, #64748b);
  font-size: 12px;
}
.vp-advanced__rail-actions {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

/* ─── Results pane ─── */
.vp-advanced__results {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.vp-advanced__results-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pp-line, #e2e8f0);
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
}
.vp-advanced__count {
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.vp-advanced__results-state {
  flex: 1 1 auto;
  font-style: italic;
}
.vp-advanced__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.vp-advanced__sort .input {
  height: 28px;
  padding: 0 22px 0 8px;
  font-size: 12px;
}
.vp-advanced__rows {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px;
}
.vp-advanced__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
}
/* Inner .vp-row uses its own grid (40px media | 1fr main | auto stock) — it
   must fill the remaining width inside .vp-advanced__row so the stock chip
   stays right-aligned. Without min-width:0 the inner main column refuses
   to shrink and long titles push the stock chip off-screen. */
.vp-advanced__row > .vp-row {
  cursor: inherit;
  flex: 1 1 auto;
  min-width: 0;
}
.vp-advanced__row:hover {
  background: var(--pp-bg-subtle, #f1f5f9);
}
.vp-advanced__row[aria-selected="true"] {
  background: var(--pp-info-bg, #dbeafe);
}
.vp-advanced__row[aria-selected="true"] > .vp-row {
  background: transparent;
}
.vp-advanced__row-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.vp-advanced__row.is-selected {
  background: var(--pp-info-bg, #dbeafe);
}
.vp-advanced__row.is-selected > .vp-row,
.vp-advanced__row.is-selected > .bp-row { background: transparent; }
.vp-advanced__checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0 8px 0 0;
  pointer-events: none;
  accent-color: var(--pp-info, #3b82f6);
}

.vp-advanced__pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--pp-line, #e2e8f0);
}
.vp-advanced__pager[hidden] { display: none; }

.vp-advanced__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--pp-line, #e2e8f0);
  background: var(--pp-bg-subtle, #f8fafc);
}
.vp-advanced__footer-actions {
  display: flex;
  gap: 8px;
}

/* The trigger that opens the modal lives in the picker's help line. It's
   styled like .vp-link but with a tiny arrow affordance to hint the modal. */
.vp-advanced-trigger {
  margin-left: 8px;
  font-weight: 600;
}
.vp-advanced-trigger::after {
  content: " →";
  letter-spacing: 0.02em;
}

/* Responsive: collapse to a single column on narrow screens. */
@media (max-width: 720px) {
  .vp-advanced {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .vp-advanced__body {
    grid-template-columns: 1fr;
  }
  .vp-advanced__rail {
    border-right: none;
    border-bottom: 1px solid var(--pp-line, #e2e8f0);
    max-height: 50vh;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Inventory adjust form — compact, single-panel, stepper-driven.
   ─────────────────────────────────────────────────────────────────────────── */

.adjust-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  margin: 24px auto;
  width: 100%;
}

.adjust-form__panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
}

.adjust-form__item-picker {
  width: 100%;
}

/* Mobile-only scan-first item step. Desktop keeps the normal picker visible. */
.adjust-form__scan-first {
  display: none;
}

.adjust-form__scan-first[hidden] {
  display: none !important;
}

.inventory-count-form__intro {
  display: flex;
  align-items: center;
  gap: 14px;
}

.inventory-count-form__intro h2 {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--pp-text, #0f172a);
}

.inventory-count-form__intro p {
  margin: 0;
  font-size: 14px;
}

.inventory-count-form__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--pp-accent, #3b82f6);
  background: var(--pp-bg-subtle, #f8fafc);
  border: 1px solid var(--pp-line, #e2e8f0);
}

.inventory-count-form__icon svg {
  width: 28px;
  height: 28px;
}

.inventory-count-form__location {
  width: fit-content;
}

.inventory-count-form__missing-location {
  border: 1px solid #fbbf24;
  background: #fffbeb;
  color: #92400e;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}

/* Short intro copy at top of bin-empty / similar single-purpose adjust forms */
.adjust-form__lede {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Read-only preview (e.g. Move all stock) — sits below primary actions in the same column */
.adjust-form__preview-panel {
  padding: 16px 20px;
}

.adjust-form__preview-head {
  margin-bottom: 12px;
}

.adjust-form__preview-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
}

.adjust-form__preview-panel .data-table {
  font-size: 13px;
}

.adjust-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.adjust-form__row--variant {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.adjust-form__row--change {
  /* Top-align so the live "After: X → Y" hint can grow the qty column
     downwards without dragging the stepper itself up out of line with
     the direction toggle and at-location caption. */
  align-items: flex-start;
}

.adjust-form__row--change > .adjust-form__field {
  flex: 0 0 auto;
}

/* Normalize the three controls in this row to a single 40px band so
   the row reads as a clean toolbar. Scoped to this row to avoid
   touching the segmented / at-location-caption shared styles. */
.adjust-form__row--change .segmented {
  height: 40px;
  padding: 4px;
}
.adjust-form__row--change .segmented__option {
  height: 100%;
  padding: 0 14px;
}
.adjust-form__row--change .at-location-caption {
  height: 40px;
  padding: 0 12px;
  box-sizing: border-box;
}
.adjust-form__row--change select.input {
  height: 40px;
}

/* Side-by-side bin pickers for transfer_bins_form. Top-aligned so the
   "After: X → Y" caption hangs cleanly below each picker, and grows
   to share remaining space evenly. Stacks on phones via the wrap. */
.adjust-form__row--bins {
  align-items: flex-start;
}
.adjust-form__row--bins > .adjust-form__field {
  flex: 1 1 240px;
}

.adjust-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.adjust-form__field--grow {
  flex: 1 1 220px;
}

.adjust-form__field--full {
  grid-column: 1 / -1;
}

.adjust-form__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text-muted, #475569);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

/* ─── Quantity stepper ─── */

.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel, #fff);
  height: 40px;
}

.qty-stepper__btn {
  border: none;
  background: var(--pp-bg-subtle, #f8fafc);
  width: 40px;
  font-size: 18px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease;
  user-select: none;
}

.qty-stepper__btn:hover,
.qty-stepper__btn:focus-visible {
  background: var(--pp-line, #e2e8f0);
  outline: none;
}

.qty-stepper__btn:active {
  background: var(--pp-line, #cbd5e1);
}

.qty-stepper__input {
  border: none;
  border-left: 1px solid var(--pp-line, #e2e8f0);
  border-right: 1px solid var(--pp-line, #e2e8f0);
  width: 72px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--panel, #fff);
  color: var(--pp-text, #0f172a);
  -moz-appearance: textfield;
}

.qty-stepper__input:focus {
  outline: 2px solid var(--pp-accent, #3b82f6);
  outline-offset: -2px;
}

.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Brief green pulse on a line-item row whose quantity got bumped via
   the duplicate-variant merge (scan-again) shortcut. We background
   the cells (not the <tr>) because tr backgrounds render unevenly
   across browsers, and we let the animation run to completion so a
   rapid second merge into the same row still re-flashes (the
   controller toggles the class off→on with a layout flush in between). */
.line-merged-flash > td {
  animation: line-merged-flash 0.9s ease-out;
}
@keyframes line-merged-flash {
  0%   { background-color: #bbf7d0; }
  60%  { background-color: #ecfdf5; }
  100% { background-color: transparent; }
}

/* ─── More options disclosure ─── */

.adjust-form__more {
  border-top: 1px dashed var(--pp-line, #e2e8f0);
  padding-top: 14px;
  margin-top: 2px;
}

.adjust-form__more-summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}

.adjust-form__more-summary::-webkit-details-marker { display: none; }

.adjust-form__more-summary::before {
  content: "▸";
  font-size: 11px;
  color: var(--pp-text-muted, #64748b);
  transition: transform 0.15s ease;
}

.adjust-form__more[open] > .adjust-form__more-summary::before {
  transform: rotate(90deg);
}

.adjust-form__more-hint {
  font-weight: 400;
  font-size: 12px;
}

.adjust-form__more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-top: 14px;
}

@media (max-width: 640px) {
  .adjust-form {
    margin-top: 16px;
  }

  .adjust-form__panel {
    padding: 16px;
    gap: 20px;
  }

  .adjust-form__row--item:has(.adjust-form__scan-first:not([hidden])) .adjust-form__item-label {
    display: none;
  }

  .adjust-form:has(.adjust-form__scan-first:not([hidden])) .adjust-form__panel > :not(.adjust-form__row--item),
  .adjust-form:has(.adjust-form__scan-first:not([hidden])) .adjust-form__actions {
    display: none;
  }

  .adjust-form__scan-first:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 24px 8px 18px;
    min-height: min(420px, 52vh);
    justify-content: center;
  }

  .adjust-form__scan-art {
    width: 124px;
    height: 124px;
    border-radius: 32px;
    display: grid;
    place-items: center;
    color: var(--pp-accent, #3b82f6);
    background:
      radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.18), transparent 34%),
      var(--pp-bg-subtle, #f8fafc);
    border: 1px solid var(--pp-line, #e2e8f0);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
  }

  .adjust-form__scan-art svg {
    width: 82px;
    height: 82px;
  }

  .adjust-form__scan-title {
    margin: 18px 0 8px;
    font-size: 22px;
    line-height: 1.15;
    color: var(--pp-text, #0f172a);
  }

  .adjust-form__scan-copy {
    max-width: 320px;
    margin: 0;
    color: var(--pp-text-muted, #64748b);
    font-size: 14px;
    line-height: 1.45;
  }

  .adjust-form__scan-actions {
    width: 100%;
    display: grid;
    gap: 10px;
    margin-top: 22px;
  }

  .adjust-form__scan-actions .btn {
    min-height: 48px;
    justify-content: center;
  }

  .adjust-form__scan-hint {
    margin: 12px 0 0;
    font-size: 12px;
  }

  .adjust-form__item-picker--scan-first {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(50%);
  }

  .adjust-form__row--change {
    flex-direction: column;
    align-items: stretch;
  }

  .adjust-form__row--change > .adjust-form__field,
  .adjust-form__field--grow {
    width: 100%;
    flex-basis: auto;
  }

  .adjust-form__row--change .segmented {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto;
  }

  .adjust-form__row--change .segmented__option {
    justify-content: center;
    min-height: 48px;
  }

  .adjust-form__row--change .qty-stepper {
    width: 100%;
    height: 52px;
  }

  .adjust-form__row--change .qty-stepper__btn {
    width: 56px;
  }

  .adjust-form__row--change .qty-stepper__input {
    flex: 1 1 auto;
    width: auto;
    font-size: 20px;
  }

  .adjust-form__row--change .at-location-caption {
    width: 100%;
    min-height: 48px;
    height: auto;
    justify-content: center;
    text-align: center;
  }

  .adjust-form__more-grid {
    grid-template-columns: 1fr;
  }

  .inventory-count-form__intro {
    flex-direction: column;
    text-align: center;
    padding: 12px 8px 4px;
  }

  .inventory-count-form__icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
  }

  .inventory-count-form__icon svg {
    width: 40px;
    height: 40px;
  }

  .inventory-count-form__intro h2 {
    font-size: 22px;
  }

  .inventory-count-form__desktop-optional {
    display: none;
  }

  .inventory-count-form__scope select.input {
    min-height: 52px;
    font-size: 16px;
  }

  .inventory-count-form__location {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    text-align: center;
  }
}

/* ─── Segmented control: react to :checked even without JS ─── */

.segmented__option:has(input:checked) {
  background: var(--panel, #fff);
  color: var(--pp-accent, #1d4ed8);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px var(--pp-line, #cbd5e1);
}

.segmented__option:focus-within {
  outline: 2px solid var(--pp-accent, #3b82f6);
  outline-offset: 2px;
}

/* ─── Live "After: X → Y" balance hint ─── */

.qty-stepper__after {
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  min-height: 1em;
}
.qty-stepper__after strong {
  color: var(--pp-text, #0f172a);
  font-weight: 600;
}
.qty-stepper__after--warn strong {
  color: #b45309;
}
.qty-stepper__after-warn {
  color: #b45309;
  font-weight: 600;
  margin-left: 6px;
}

/* ─── Recently-used reason chips ─── */

.adjust-form__recent-reasons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.adjust-form__recent-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.adjust-form__recent-chip {
  appearance: none;
  border: 1px solid var(--pp-line, #e2e8f0);
  background: var(--pp-bg-subtle, #f8fafc);
  color: var(--pp-text, #0f172a);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  line-height: 1.4;
}
.adjust-form__recent-chip:hover,
.adjust-form__recent-chip:focus-visible {
  background: #fff;
  border-color: var(--pp-accent, #3b82f6);
  color: var(--pp-accent, #1d4ed8);
  outline: none;
}
.adjust-form__recent-chip.is-active {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

/* ─── Sticky action bar on phones ─── */

.adjust-form__actions {
  /* Default (desktop / iPad landscape): keep the existing right-aligned row. */
  margin-top: 12px;
}

@media (max-width: 640px) {
  .adjust-form {
    /* Reserve room so the sticky bar never covers the last field. */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .adjust-form__actions {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--panel, #fff);
    border-top: 1px solid var(--pp-line, #e2e8f0);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    margin: 16px -16px 0;
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    gap: 10px;
  }
  .adjust-form__actions-submit {
    flex: 1 1 auto;
    min-height: 48px;
    font-size: 15px;
  }
  .adjust-form__actions-cancel {
    flex: 0 0 auto;
    min-height: 48px;
  }
}

/* ─── Touch targets: bump to ≥44px on coarse pointers (touch screens).
       Apple HIG calls for 44pt; Material for 48dp. We split the difference
       and keep visual density tighter on mouse/trackpad. ─── */

@media (pointer: coarse) {
  .qty-stepper {
    height: 48px;
  }
  .qty-stepper__btn {
    width: 48px;
    font-size: 20px;
  }
  .qty-stepper__input {
    font-size: 17px;
    width: 84px;
  }
  .segmented__option {
    padding: 10px 16px;
    min-height: 44px;
    font-size: 14px;
  }
  .adjust-form__more-summary {
    min-height: 44px;
    padding: 10px 0;
    font-size: 14px;
  }
  .adjust-form__recent-chip {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* ── Global location chip (header) ───────────────────────
 * Lives next to .account-switcher in _global_header.html.erb.
 * Mirrors that pattern (HTML <details> + CSS-only panel) so we
 * don't introduce another JS controller for a one-shot menu.
 */
.location-chip {
  position: relative;
}
.location-chip-pill {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 8px 4px 8px;
  list-style: none;
  max-width: 220px;
}
.location-chip-pill::-webkit-details-marker { display: none; }
.location-chip-pill:hover { background: #e5e7eb; }
.location-chip-pill--unset {
  color: #b45309;
  background: #fffbeb;
  border-color: #fde68a;
}
.location-chip-pill--unset:hover { background: #fef3c7; }
.location-chip-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.location-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.location-chip-caret {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  opacity: .65;
}
.location-chip-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 240px;
  z-index: 50;
  padding: 6px;
}
.location-chip-panel-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
  margin: 4px 8px 4px;
}
.location-chip-form { margin: 0; }
.location-chip-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 8px 10px;
  font-size: 13px;
  color: #374151;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.location-chip-item:hover { background: #f3f4f6; }
.location-chip-item.is-current {
  font-weight: 600;
  color: #6366f1;
  background: #eef2ff;
}
.location-chip-item-check { font-size: 12px; }
.location-chip-item--muted {
  color: #6b7280;
  font-size: 12px;
}
.location-chip-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 6px 0;
}

/* ── Station check-in chip ─────────────────────────────────────── */
.station-chip {
  position: relative;
}
.station-chip-pill {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 4px 8px;
  list-style: none;
  max-width: 220px;
}
.station-chip-pill::-webkit-details-marker { display: none; }
.station-chip-pill:hover { background: #dcfce7; }
.station-chip-pill--unset {
  color: #b45309;
  background: #fffbeb;
  border-color: #fde68a;
}
.station-chip-pill--unset:hover { background: #fef3c7; }
.station-chip-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.station-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.station-chip-caret {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  opacity: .65;
}
.station-chip-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 240px;
  z-index: 50;
  padding: 6px;
}
.station-chip-panel-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
  margin: 4px 8px 4px;
}
.station-chip-form { margin: 0; }
.station-chip-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 8px 10px;
  font-size: 13px;
  color: #374151;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  gap: 8px;
}
.station-chip-item:hover { background: #f3f4f6; }
.station-chip-item.is-current {
  font-weight: 600;
  color: #059669;
  background: #ecfdf5;
}
.station-chip-item-name { flex: 1; }
.station-chip-item-meta {
  font-size: 11px;
  color: #9ca3af;
  text-align: right;
  flex-shrink: 0;
}
.station-chip-item-check { font-size: 12px; }
.station-chip-item--muted {
  color: #6b7280;
  font-size: 12px;
}
.station-chip-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 6px 0;
}

/* ── Inline "operating at <X> · Change" caption used inside forms
 * when Current.location supplies the default and we want to hide
 * the explicit Location <select>. Aligns with .field/.input rhythm.
 */
.at-location-caption {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4b5563;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  padding: 6px 10px;
  border-radius: 8px;
}
.at-location-caption strong { color: #111827; }
.at-location-caption .at-location-change {
  margin-left: 4px;
  font-size: 12px;
  color: #6366f1;
}
.at-location-caption .at-location-change:hover { text-decoration: underline; }

/* ─── Bin picker (shared/_bin_picker) ─────────────────────────────────────
   Sibling of .vp-picker (variant_combobox). Tighter rows, no media column,
   and direction-aware suggestion section.                                 */
.bp-picker { position: relative; display: block; }
.bp-picker--readonly { display: block; }
.bp-readonly-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 12px; border: 1px solid #e5e7eb;
  border-radius: 10px; background: #f9fafb;
}
.bp-readonly-card__main { display: flex; align-items: baseline; gap: 8px; }
.bp-readonly-card__code { font-weight: 600; color: #111827; }
.bp-readonly-card__name { font-size: 13px; }
.bp-readonly-card__link { font-size: 12px; color: #6366f1; }
.bp-readonly-card__link:hover { text-decoration: underline; }

.bp-input { width: 100%; }
.bp-help { margin-top: 6px; font-size: 12px; }

/* Selected card (single-mode, non-compact) — flatter than the variant
   picker since bins don't have media. */
.bp-selected-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; border: 1px solid #e5e7eb;
  border-radius: 10px; background: #ffffff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.bp-selected-card__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bp-selected-card__title { font-weight: 600; color: #111827; font-size: 15px; }
.bp-selected-card__meta { font-size: 12px; color: #6b7280; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bp-selected-card__stock { color: #047857; font-weight: 500; }
.bp-selected-card__stock.muted { color: #6b7280; font-weight: 400; }
.bp-selected-card__change {
  border: none; background: transparent; cursor: pointer; color: #9ca3af;
  font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.bp-selected-card__change:hover { background: #f3f4f6; color: #ef4444; }

/* Dropdown / listbox */
.bp-dropdown {
  position: absolute; z-index: 60; top: 100%; left: 0; right: 0; margin-top: 4px;
  background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  max-height: 360px; overflow-y: auto; padding: 6px;
}
.bp-dropdown--fixed { position: fixed; right: auto; }

.bp-heading {
  font-size: 11px; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 8px 10px 4px;
}

.bp-state {
  padding: 14px 12px; font-size: 13px; color: #6b7280; text-align: center;
}
.bp-state--error { color: #b91c1c; }
.bp-link { background: none; border: none; color: #6366f1; cursor: pointer; padding: 0 4px; }
.bp-link:hover { text-decoration: underline; }

/* Rows */
.bp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent;
}
.bp-row:hover, .bp-row.is-active { background: #f5f5ff; border-color: #c7d2fe; }
.bp-row--suggested { background: #f0fdf4; }
.bp-row--suggested:hover, .bp-row--suggested.is-active { background: #dcfce7; border-color: #86efac; }
.bp-row--virtual { background: #fffbeb; align-items: flex-start; }
.bp-row--virtual:hover, .bp-row--virtual.is-active { background: #fef3c7; border-color: #fcd34d; }

.bp-row__main { flex: 1 1 auto; min-width: 0; }
.bp-row__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bp-row__code { font-weight: 600; color: #111827; font-size: 14px; }
.bp-row__kind {
  display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: #eef2ff; color: #4338ca; font-weight: 500;
}
.bp-row__kind--virtual { background: #fef3c7; color: #92400e; }
.bp-row__kind--create  { background: #dcfce7; color: #166534; }
.bp-badge {
  display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 999px;
  background: #e0e7ff; color: #3730a3; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bp-badge--suggested { background: #dcfce7; color: #166534; }
.bp-row__meta {
  font-size: 12px; color: #6b7280; margin-top: 2px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.bp-row__name { color: #4b5563; }
.bp-row__constraints { color: #b45309; }
.bp-row__hint { color: #6b7280; font-size: 12px; }
.bp-row__stock { flex: 0 0 auto; text-align: right; }
.bp-row--virtual .bp-row__stock { flex: 0 1 auto; max-width: 50%; }
.bp-row--virtual .bp-row__hint { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bp-row__stock-num { font-size: 13px; color: #111827; }
.bp-row__stock-num.muted { color: #6b7280; }

/* When the selected-card view is showing, suppress the dropdown so the
   dropdown doesn't accidentally open over a hidden input. The Stimulus
   controller also closes on selection but this is belt + suspenders. */
.bp-picker--has-selection .bp-dropdown:not([hidden]) { display: none; }

/* ─── Bin picker: did-you-mean + inline create sheet ─────────────────── */
.bp-heading--warn { color: #b45309; }
.bp-row--didmean {
  background: #fef3c7;
  border-color: #fcd34d;
}
.bp-row--didmean:hover, .bp-row--didmean.is-active {
  background: #fde68a;
  border-color: #f59e0b;
}
.bp-badge--didmean { background: #fef3c7; color: #92400e; }

.bp-create-sheet {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px; border-radius: 12px;
  background: #f0fdf4; border: 1px solid #86efac;
  margin: 4px;
}
.bp-create-sheet__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: #14532d;
}
.bp-create-sheet__code { font-size: 16px; font-weight: 700; color: #052e16; }
.bp-create-sheet__hint { font-size: 12px; }
.bp-create-sheet__field { border: none; padding: 0; margin: 0; }
.bp-create-sheet__label {
  font-size: 11px; font-weight: 600; color: #4b5563;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 6px; padding: 0;
}
.bp-create-sheet__kinds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
}
.bp-create-sheet__kind {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid #d1fae5; border-radius: 8px;
  background: #ffffff; font-size: 13px; color: #1f2937; cursor: pointer;
}
.bp-create-sheet__kind:hover { border-color: #6ee7b7; }
.bp-create-sheet__kind input { accent-color: #16a34a; }
.bp-create-sheet__kind:has(input:checked) {
  border-color: #16a34a; background: #dcfce7;
  box-shadow: 0 0 0 2px #bbf7d0 inset;
}
.bp-create-sheet__check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #1f2937;
}
.bp-create-sheet__check input { accent-color: #16a34a; }
.bp-create-sheet__actions {
  display: flex; justify-content: flex-end; gap: 8px;
}
.bp-create-sheet__cancel,
.bp-create-sheet__submit { font-size: 13px; padding: 6px 14px; }

/* ─── Bin picker: advanced search button + dropdown footer ────────────── */
.bp-field { position: relative; }
.bp-input--with-advanced { padding-right: 48px; }

.bp-advanced-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--pp-line, #e2e8f0);
  background: var(--pp-bg-subtle, #f8fafc);
  color: var(--pp-text-muted, #64748b);
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.bp-advanced-btn:hover,
.bp-advanced-btn:focus-visible {
  background: #fff;
  border-color: var(--pp-accent, #3b82f6);
  color: var(--pp-accent, #1d4ed8);
  outline: none;
}
.bp-advanced-btn:active {
  transform: translateY(-50%) scale(0.97);
}
.bp-advanced-btn__icon { display: block; flex: 0 0 auto; }

@media (pointer: coarse) {
  .bp-advanced-btn {
    height: 40px;
    width: 40px;
  }
}

.bp-dropdown__footer {
  position: sticky;
  bottom: -6px;
  margin: 4px -6px -6px;
  padding: 6px 8px;
  background: var(--panel, #fff);
  border-top: 1px solid var(--pp-line, #e2e8f0);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 1;
}

.bp-dropdown__footer-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.bp-dropdown__footer-btn:hover {
  color: var(--pp-accent, #3b82f6);
  background: var(--pp-bg-subtle, #f0f4ff);
}
.bp-dropdown__footer--prominent .bp-dropdown__footer-btn {
  color: var(--pp-text, #1e293b);
  font-weight: 500;
}
.bp-dropdown__footer-icon { flex: 0 0 auto; }

/* ─────────────────────────────────────────────────────────────────
 * Bin Layout Wizard
 *
 * Lives at /locations/:id/bins/layout/new. Everything in here uses
 * the `bw-` prefix so it can't collide with the rest of the app's
 * cascading-naming-soup. Built on the existing --pp-* design tokens
 * so the whole thing inherits dark-mode + accent-colour overrides
 * for free.
 *
 * Layout concepts:
 *   .bw-steps       — top progress strip (1 Template / 2 Layout / …)
 *   .bw-step        — one full step screen, only one is visible
 *   .bw-template-*  — Step 1 picker cards
 *   .bw-step2       — Step 2 split view (editor | live preview)
 *   .bw-segment-*   — One segment row inside the editor
 *   .bw-preview-*   — Live preview right-rail
 *   .bw-toggle-*    — Step 3 toggle rows
 *   .bw-summary-*   — Step 4 summary cards
 *   .bw-empty       — Bin index empty-state CTA card
 * ───────────────────────────────────────────────────────────────── */

/* ── Step indicator ─────────────────────────────────────────────── */
.bw-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0 0 24px;
  padding: 8px;
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: 14px;
  box-shadow: var(--pp-shadow-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--pp-text-muted);
  overflow-x: auto;
}
.bw-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.bw-steps li.is-current {
  background: var(--pp-accent-soft);
  color: var(--pp-accent);
  font-weight: 600;
}
.bw-steps li.is-done { color: var(--pp-text); }
.bw-steps li.is-done .bw-steps__num {
  background: var(--pp-text);
  color: #fff;
}
.bw-steps li.is-done .bw-steps__num::after {
  content: "✓";
  font-size: 12px;
  font-weight: 700;
}
.bw-steps li.is-done .bw-steps__num span,
.bw-steps__num { display: inline-flex; align-items: center; justify-content: center; }
.bw-steps__num {
  width: 22px; height: 22px;
  background: var(--pp-surface-2);
  color: var(--pp-text-muted);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}
.bw-steps li.is-current .bw-steps__num {
  background: var(--pp-accent);
  color: #fff;
}
.bw-steps li.is-done .bw-steps__num {
  font-size: 0; /* hide number, ::after shows ✓ */
}

/* ── Step containers ─────────────────────────────────────────────── */
.bw-step { animation: bwFade 240ms ease both; }
@keyframes bwFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bw-step__header { margin-bottom: 18px; }
.bw-step__header h2 { margin: 0 0 4px; font-size: 22px; line-height: 1.25; }
.bw-step__header p  { margin: 0; max-width: 60ch; }
.bw-step__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--pp-border);
}
.bw-step__actions .btn-primary { margin-left: auto; }

/* ── Generic panel (lighter than the global .panel) ─────────────── */
.bw-panel {
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: 14px;
  box-shadow: var(--pp-shadow-sm);
  overflow: hidden;
}
.bw-panel + .bw-panel { margin-top: 16px; }
.bw-panel__header {
  padding: 16px 18px 4px;
}
.bw-panel__header h3 { margin: 0; font-size: 15px; }
.bw-panel__header .small { display: block; margin-top: 2px; }
.bw-panel__body { padding: 16px 18px 18px; }

/* ── Step 1: template picker ─────────────────────────────────────── */
.bw-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.bw-template-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--pp-surface);
  border: 1.5px solid var(--pp-border);
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease,
              background 0.15s ease, box-shadow 0.2s ease;
}
.bw-template-card:hover {
  border-color: var(--pp-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--pp-shadow-md);
}
.bw-template-card.is-suggested {
  border-color: var(--pp-accent);
  border-style: dashed;
}
.bw-template-card.is-selected {
  border-color: var(--pp-accent);
  border-style: solid;
  background: var(--pp-accent-soft);
  box-shadow: 0 0 0 4px var(--pp-accent-soft), var(--pp-shadow-md);
}
.bw-template-card:focus-visible {
  outline: none;
  border-color: var(--pp-accent);
  box-shadow: 0 0 0 4px var(--pp-accent-soft);
}
.bw-template-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  background: var(--pp-surface-2);
  border-radius: 10px;
  padding: 6px;
}
.bw-template-card.is-selected .bw-template-card__preview {
  background: rgba(255,255,255,0.65);
}
.bw-template-icon { width: 100%; height: 100%; max-height: 72px; }
.bw-template-icon rect,
.bw-template-icon line { stroke: var(--pp-border-strong); fill: var(--pp-surface); stroke-width: 1; }
.bw-template-icon__bin    { fill: var(--pp-surface-3); stroke: var(--pp-border-strong); }
.bw-template-icon__rack   { fill: var(--pp-surface-2); stroke: var(--pp-border-strong); }
.bw-template-icon__pallet { fill: var(--pp-surface-3); stroke: var(--pp-border-strong); }
.bw-template-icon__path   { stroke: var(--pp-text-subtle); stroke-dasharray: 3 3; }
.bw-template-icon__frame  { fill: none; stroke: var(--pp-border-strong); }
.bw-template-icon__label  { font-size: 8px; fill: var(--pp-text-muted); font-family: ui-sans-serif, system-ui, sans-serif; }
.bw-template-card.is-selected .bw-template-icon rect,
.bw-template-card.is-selected .bw-template-icon line { stroke: var(--pp-accent); }
.bw-template-card.is-selected .bw-template-icon__bin,
.bw-template-card.is-selected .bw-template-icon__rack,
.bw-template-card.is-selected .bw-template-icon__pallet { fill: var(--pp-accent-soft); }

.bw-template-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bw-template-card__title-row strong { font-size: 15px; color: var(--pp-text); }
.bw-template-card__tagline {
  margin: 4px 0 0;
  color: var(--pp-text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.bw-template-card__example {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--pp-text-subtle);
}
.bw-template-card__example code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  background: var(--pp-surface-2);
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--pp-text);
}
.bw-template-card.is-selected .bw-template-card__example code {
  background: rgba(255,255,255,0.7);
}
.bw-template-card__check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pp-surface);
  border: 1.5px solid var(--pp-border-strong);
  color: var(--pp-surface);
  transition: all 0.15s ease;
}
.bw-template-card.is-selected .bw-template-card__check {
  background: var(--pp-accent);
  border-color: var(--pp-accent);
  color: #fff;
  transform: scale(1.05);
}
.bw-template-card__check svg { width: 12px; height: 12px; }

.bw-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bw-pill--accent {
  background: var(--pp-accent);
  color: #fff;
}

/* ── Step 2: split editor / preview ──────────────────────────────── */
.bw-step2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  align-items: flex-start;
}
@media (max-width: 960px) {
  .bw-step2 { grid-template-columns: 1fr; }
}

.bw-step2__editor { display: flex; flex-direction: column; gap: 16px; }
.bw-inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .bw-inline-fields { grid-template-columns: 1fr; } }

/* Segments */
.bw-segments { display: flex; flex-direction: column; gap: 10px; }
.bw-segment {
  background: var(--pp-surface-2);
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  padding: 12px;
  transition: border-color 0.15s ease;
}
.bw-segment:focus-within {
  border-color: var(--pp-accent);
  background: var(--pp-surface);
}
.bw-segment__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.bw-segment__num {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pp-surface);
  border: 1px solid var(--pp-border-strong);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text-muted);
}
.bw-segment__label-input {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 8px;
  border-radius: 6px;
}
.bw-segment__label-input:hover { border-color: var(--pp-border); background: var(--pp-surface); }
.bw-segment__label-input:focus { border-color: var(--pp-accent); background: var(--pp-surface); }
.bw-segment__remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--pp-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.bw-segment__remove:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}
.bw-segment__body {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 10px;
}
@media (max-width: 720px) { .bw-segment__body { grid-template-columns: 1fr 1fr; } }
.bw-segment__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--pp-text-muted);
  font-weight: 500;
}
.bw-segment__field .input { font-size: 14px; padding: 6px 10px; }
.bw-segment__summary {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--pp-border);
  font-size: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bw-segment__summary-label { color: var(--pp-text-muted); font-weight: 500; }
.bw-segment__summary-tokens {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--pp-text);
  word-break: break-word;
}
.bw-add-segment {
  margin-top: 10px;
  width: 100%;
  border-style: dashed;
  color: var(--pp-text-muted);
}
.bw-add-segment:hover { color: var(--pp-accent); border-color: var(--pp-accent); }
.bw-add-segment[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Live preview */
.bw-step2__preview { position: sticky; top: 16px; }
.bw-preview {
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--pp-shadow-md);
  transition: transform 0.15s ease;
}
.bw-preview--shake { animation: bwShake 500ms ease; }
@keyframes bwShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.bw-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.bw-preview__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-text-muted);
}
.bw-preview__total {
  font-size: 18px;
  font-weight: 700;
  color: var(--pp-accent);
  font-feature-settings: "tnum";
  transition: color 0.2s ease;
}
.bw-preview__total--error { color: #dc2626; }

.bw-preview__section { margin-bottom: 14px; }
.bw-preview__section:last-of-type { margin-bottom: 0; }
.bw-preview__caption {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--pp-text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bw-preview__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bw-preview__list li code {
  display: inline-block;
  padding: 4px 10px;
  background: var(--pp-surface-2);
  border: 1px solid var(--pp-border);
  border-radius: 8px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--pp-text);
}
.bw-preview__empty { color: var(--pp-text-subtle); font-size: 12px; }

.bw-preview__notices { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.bw-preview__notice {
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--pp-surface-2);
  color: var(--pp-text);
  line-height: 1.5;
}
.bw-preview__notice ul { margin: 4px 0 0; padding-left: 16px; }
.bw-preview__notice strong { display: block; margin-bottom: 2px; }
.bw-preview__notice--warn { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.bw-preview__notice--error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* ── Step 3: behaviour ───────────────────────────────────────────── */
.bw-behaviour { display: flex; flex-direction: column; }
.bw-field-row, .bw-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pp-border);
}
.bw-field-row:last-of-type, .bw-toggle-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.bw-field-row:first-of-type, .bw-toggle-row:first-of-type { padding-top: 0; }
.bw-field-row__label, .bw-toggle-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.bw-field-row__label strong, .bw-toggle-row__text strong { font-size: 14px; }
.bw-field-row__control { max-width: 240px; }

.bw-switch { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.bw-switch input { position: absolute; opacity: 0; pointer-events: none; }
.bw-switch__track {
  width: 40px;
  height: 22px;
  background: var(--pp-surface-3);
  border-radius: 999px;
  position: relative;
  transition: background 0.15s ease;
}
.bw-switch__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.18s ease;
}
.bw-switch input:checked ~ .bw-switch__track { background: var(--pp-accent); }
.bw-switch input:checked ~ .bw-switch__track .bw-switch__thumb { transform: translateX(18px); }
.bw-switch input:focus-visible ~ .bw-switch__track {
  box-shadow: 0 0 0 4px var(--pp-accent-soft);
}

/* ── Step 4: confirm ─────────────────────────────────────────────── */
.bw-confirm { display: flex; flex-direction: column; gap: 16px; }
.bw-confirm__name { max-width: 520px; }

.bw-confirm__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.bw-summary-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: 14px;
  box-shadow: var(--pp-shadow-sm);
}
.bw-summary-card__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-text-muted);
}
.bw-summary-card__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--pp-accent);
  font-feature-settings: "tnum";
  line-height: 1.2;
}
.bw-summary-card__value--muted { color: var(--pp-text); }
.bw-summary-card__sub { font-size: 12px; color: var(--pp-text-muted); }

.bw-sample-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) { .bw-sample-grid { grid-template-columns: 1fr; } }
.bw-sample-grid__caption {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted);
  margin-bottom: 6px;
}
.bw-confirm__warnings { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.bw-confirm__warning {
  padding: 10px 12px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.bw-confirm__warning code {
  background: rgba(255,255,255,0.6);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}
.bw-confirm__warning--error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.bw-confirm__warning ul { margin: 6px 0 0; padding-left: 18px; }

.bw-generate-btn {
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 18px;
}
.bw-generate-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.bw-generate-btn__icon { font-size: 14px; }

/* ── Bin index empty state CTA ───────────────────────────────────── */
.bw-empty {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--pp-surface) 0%, var(--pp-accent-soft) 100%);
  border: 1px solid var(--pp-border);
  border-radius: 18px;
  margin-bottom: 18px;
  box-shadow: var(--pp-shadow-md);
}
.bw-empty__icon {
  flex-shrink: 0;
  width: 88px; height: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  color: var(--pp-accent);
  box-shadow: var(--pp-shadow-sm);
}
.bw-empty__icon svg { width: 48px; height: 48px; }
.bw-empty__body { flex: 1; min-width: 0; }
.bw-empty__body h2 { margin: 0 0 6px; font-size: 20px; }
.bw-empty__body p { margin: 0; max-width: 60ch; }
.bw-empty__actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.bw-empty__hint { margin-top: 10px; }
.btn-lg { padding: 10px 20px; font-size: 15px; min-height: 2.5rem; }

@media (max-width: 720px) {
  .bw-empty { flex-direction: column; align-items: flex-start; padding: 22px; }
  .bw-empty__icon { width: 64px; height: 64px; }
  .bw-empty__icon svg { width: 36px; height: 36px; }
}

/* ── Bin Wizard: Landing purpose selector ───────────────────────── */
.bw-purpose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
@media (max-width: 700px) { .bw-purpose-grid { grid-template-columns: 1fr; } }

.bw-purpose-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: var(--pp-surface);
  border: 1.5px solid var(--pp-border);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease,
              box-shadow 0.2s ease, background 0.15s ease;
}
.bw-purpose-card:hover {
  border-color: var(--pp-accent);
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px var(--pp-accent-soft), var(--pp-shadow-md);
  background: var(--pp-accent-soft);
}
.bw-purpose-card:focus-visible {
  outline: none;
  border-color: var(--pp-accent);
  box-shadow: 0 0 0 4px var(--pp-accent-soft);
}
.bw-purpose-card__icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--pp-surface-2);
  border: 1px solid var(--pp-border);
  color: var(--pp-text-muted);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.bw-purpose-card:hover .bw-purpose-card__icon {
  color: var(--pp-accent);
  background: var(--pp-surface);
  border-color: var(--pp-accent);
}
.bw-purpose-card__icon svg { width: 38px; height: 38px; }
.bw-purpose-card__body { flex: 1; min-width: 0; }
.bw-purpose-card__body strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--pp-text);
  margin-bottom: 4px;
}
.bw-purpose-card__body p { margin: 0; line-height: 1.45; }
.bw-purpose-card__arrow {
  flex-shrink: 0;
  color: var(--pp-text-subtle);
  transition: color 0.15s ease, transform 0.15s ease;
}
.bw-purpose-card:hover .bw-purpose-card__arrow {
  color: var(--pp-accent);
  transform: translateX(3px);
}

/* ── Bin Utility Wizard: kind selector ──────────────────────────── */
.bw-util-kind-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bw-util-kind-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--pp-surface);
  border: 1.5px solid var(--pp-border);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.bw-util-kind-btn:hover {
  border-color: var(--pp-border-strong);
  background: var(--pp-surface-2);
}
.bw-util-kind-btn.is-selected {
  border-color: var(--pp-accent);
  background: var(--pp-accent-soft);
  box-shadow: 0 0 0 3px var(--pp-accent-soft);
}
.bw-util-kind-btn:focus-visible {
  outline: none;
  border-color: var(--pp-accent);
  box-shadow: 0 0 0 3px var(--pp-accent-soft);
}
.bw-util-kind-btn__dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--pp-border-strong);
  background: var(--pp-surface);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.bw-util-kind-btn.is-selected .bw-util-kind-btn__dot {
  border-color: var(--pp-accent);
  background: var(--pp-accent);
  box-shadow: inset 0 0 0 3px var(--pp-surface);
}
.bw-util-kind-btn__label { display: flex; flex-direction: column; gap: 2px; }
.bw-util-kind-btn__label strong { font-size: 14px; color: var(--pp-text); }
.bw-util-kind-btn__label .small { line-height: 1.4; }

/* ── Bin Utility Wizard: naming fields ──────────────────────────── */
.bw-util-naming {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr;
  gap: 12px;
  align-items: flex-end;
}
@media (max-width: 720px) {
  .bw-util-naming { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .bw-util-naming { grid-template-columns: 1fr; }
}

/* ── Bin Utility Wizard: behaviour chip in preview ──────────────── */
.bw-util-behaviour-chip {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--pp-surface-2);
  border: 1px solid var(--pp-border);
  border-radius: 10px;
}
.bw-util-behaviour-chip__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text);
  margin-bottom: 3px;
}
.bw-util-behaviour-chip__flags {
  display: block;
  font-size: 12px;
  color: var(--pp-text-muted);
  line-height: 1.4;
}

/* ── Bins page tabs (Bins / Racks) ─────────────────────────────── */
.bins-page__tabs { width: 100%; }
.bins-page__tabs > .tabs__bar { width: 100%; }
.bins-page__tabs > .tabs__panel { padding-top: 16px; width: 100%; }
.bins-page__tabs .panel.table-panel {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.bins-page__search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.bins-page__search .input { min-width: 220px; }

.bins-page__kind-filters {
  margin: 0 0 12px;
}

.bins-page__kind-filters a.wf-inbox-chip {
  text-decoration: none;
  box-sizing: border-box;
}

/* Links would otherwise inherit body text color and beat `.wf-inbox-chip.is-active` contrast. */
.bins-page__kind-filters a.wf-inbox-chip:not(.is-active) {
  color: #475569;
}

.bins-page__kind-filters a.wf-inbox-chip.is-active,
.bins-page__kind-filters a.wf-inbox-chip.is-active .wf-inbox-chip__count {
  color: #fff;
}

.bins-page__kind-filters a.wf-inbox-chip.is-active .wf-inbox-chip__count {
  background: rgba(255, 255, 255, 0.22);
}

/* Select-all-across-pages banner inside selection bars */
.select-all-banner {
  text-align: center;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--pp-text-muted, var(--muted));
  border-top: 1px solid var(--pp-border, var(--line));
  background: var(--pp-surface-2, var(--soft));
}
.select-all-banner[hidden] { display: none; }
.select-all-banner a {
  font-weight: 500;
  color: var(--pp-accent, var(--accent));
  cursor: pointer;
  text-decoration: none;
}
.select-all-banner a:hover { text-decoration: underline; }
.select-all-banner[data-state="offer"] > [data-state="active"],
.select-all-banner[data-state="active"] > [data-state="offer"] { display: none; }
.select-all-banner[data-state="offer"] > [data-state="offer"],
.select-all-banner[data-state="active"] > [data-state="active"] { display: inline; }

/* ── Form helpers shared by the wizard ──────────────────────────── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text);
}
.form-label .small { font-weight: 400; color: var(--pp-text-muted); }

/* ════════════════════════════════════════════════════════════════════
   Bin layout batches — index strip, filter banner, summary, formats.
   Lives next to the wizard styles because it's the read-side
   complement: same prefix, same visual language.
   ════════════════════════════════════════════════════════════════════ */

/* ── Recent-batches strip on the bins index ─────────────────────── */
.bw-batches-strip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.bw-batches-strip__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.bw-batches-strip__header h3 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
}
.bw-batches-strip__header p { margin: 0; }

.bw-batches-strip__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.bw-batch-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, transform .12s ease, background .12s ease;
}
.bw-batch-chip:hover {
  border-color: var(--pp-accent, #6366f1);
  background: #ffffff;
  transform: translateY(-1px);
}
.bw-batch-chip__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bw-batch-chip__meta {
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
}
.bw-batch-chip__time { font-size: 11px; }

/* ── Filter banner: "Showing only batch X" ─────────────────────── */
.bw-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.bw-filter-banner__body {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.bw-filter-banner__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pp-accent, #6366f1);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bw-filter-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Ghost pill (e.g. template label on batches index) ──────────── */
.bw-pill--ghost {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

/* ── Batch detail page ─────────────────────────────────────────── */
.bw-batch-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.bw-batch-format {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.bw-batch-format__chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 120px;
}
.bw-batch-format__caption {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted, #64748b);
}
.bw-batch-format__chip code {
  font-size: 14px;
  color: var(--pp-text, #0f172a);
}

.bw-batch-segments .data-table--compact th,
.bw-batch-segments .data-table--compact td {
  padding: 8px 12px;
}

.bw-batch-beh {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 0;
}
.bw-batch-beh > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bw-batch-beh dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted, #64748b);
  font-weight: 600;
  margin: 0;
}
.bw-batch-beh dd {
  margin: 0;
  font-size: 14px;
  color: var(--pp-text, #0f172a);
}

/* ════════════════════════════════════════════════════════════════════
   Shared row-actions + table tweaks used by the bins / batches tables.
   Inlines Edit/Archive into a single horizontal cluster (instead of the
   default `button_to` form which wraps each in its own block) and
   right-aligns the actions column.
   ════════════════════════════════════════════════════════════════════ */
.row-actions:not(td) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

td.row-actions {
  display: table-cell;
  width: 1%;
}
.row-actions form,
.row-actions .button_to {
  display: inline-block;
  margin: 0;
}

/* Table cell variant of row-actions (link_to + button_to on one line). */
.cell-actions {
  white-space: nowrap;
  text-align: right;
}
.cell-actions form,
.cell-actions .button_to {
  display: inline-block;
  margin: 0;
}
.cell-actions .btn + form,
.cell-actions form + .btn,
.cell-actions form + form {
  margin-left: 6px;
}

@media (max-width: 768px) {
  .row-actions:not(td) {
    flex-wrap: wrap;
    white-space: normal;
  }

  td.row-actions {
    white-space: normal;
  }
}

/* `actions-col` shrinks the column to its content so the rest of the
   table can claim the leftover horizontal space. Right-aligning the
   buttons keeps them visually anchored to the row's edge. */
.data-table th.actions-col,
.data-table td.actions-col {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* Right-align numeric columns ("SKUs in bin", "On hand") so they
   read as a stack of digits, not a left-padded blob. */
.data-table th.num,
.data-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.link-strong {
  color: var(--pp-text, #0f172a);
  font-weight: 600;
  text-decoration: none;
}
.link-strong:hover {
  color: var(--pp-accent, #6366f1);
  text-decoration: underline;
}

/* Danger-zone variant of .panel for the batch-undo affordance. */
.panel.danger-zone {
  border-color: rgba(220, 38, 38, 0.25);
  background: rgba(254, 242, 242, 0.5);
}
.panel.danger-zone .panel-header h2 { color: #b91c1c; }

/* ═══════════════════════════════════════════════════
   Quick-create ("+") menu — global header
   See app/views/shared/_quick_create_menu.html.erb +
   app/javascript/controllers/quick_create_controller.js
   ═══════════════════════════════════════════════════ */

.quick-create {
  position: relative;
}

.quick-create > summary {
  list-style: none;
  cursor: pointer;
}
.quick-create > summary::-webkit-details-marker {
  display: none;
}

/* Trigger matches the AI-chat button so the right-side header cluster
   reads as a coherent row of icon-only controls. */
.quick-create-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  transition: background 0.15s, color 0.15s;
}
.quick-create-trigger:hover {
  background: rgba(255, 255, 255, 0.15);
}
.quick-create[open] > .quick-create-trigger {
  background: rgba(255, 255, 255, 0.2);
}
.quick-create-trigger svg {
  width: 18px;
  height: 18px;
}

/* Panel anchors to the trigger; sized to fit a two-line label per row. */
.quick-create-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  min-width: 280px;
  z-index: 50;
  padding: 6px;
  display: none;
}
.quick-create[open] .quick-create-panel {
  display: block;
}

.quick-create-heading {
  display: block;
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

.quick-create-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: #0f172a;
  font-size: 13px;
}
.quick-create-item:hover,
.quick-create-item:focus {
  background: #f1f5f9;
  outline: none;
}
.quick-create-item:focus-visible {
  /* Make keyboard focus visible without losing the soft hover look. */
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}

.quick-create-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #475569;
}
.quick-create-icon svg {
  width: 16px;
  height: 16px;
}
.quick-create-item:hover .quick-create-icon {
  background: #e0e7ff;
  color: #4338ca;
}

.quick-create-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-weight: 500;
}
.quick-create-sub {
  font-size: 11.5px;
  font-weight: 400;
  color: #6b7280;
}

.quick-create-footer {
  display: block;
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
  padding: 8px 10px 4px;
  font-size: 11px;
  color: #6b7280;
}
.quick-create-kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border: 1px solid #d1d5db;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #f9fafb;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #374151;
  text-align: center;
}

/* Per-item keyboard shortcut badge in the quick-create dropdown */
.quick-create-item {
  grid-template-columns: 28px 1fr auto;
}
.quick-create-item-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid #e5e7eb;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #f9fafb;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  color: #9ca3af;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.quick-create-item:hover .quick-create-item-kbd,
.quick-create-item:focus .quick-create-item-kbd {
  opacity: 1;
  color: #6366f1;
  border-color: #c7d2fe;
}

/* Modal-type items in quick-create need to match link styling */
button.quick-create-item {
  width: 100%;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* ─── Print Label modal ────────────────────────────────────────── */

dialog.plm-dialog {
  overflow: visible;
}
.plm-content {
  width: min(480px, 92vw);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.plm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.plm-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
}
.plm-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.plm-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Segmented label-type control */
.plm-type-bar {
  display: flex;
  gap: 6px;
  padding: 12px 20px 0;
}
.plm-type-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
}
.plm-type-btn:hover {
  border-color: #c7d2fe;
  color: #4338ca;
  background: #f5f3ff;
}
.plm-type-btn.is-active {
  border-color: #6366f1;
  background: #eef2ff;
  color: #4338ca;
  font-weight: 600;
  box-shadow: 0 0 0 1px #6366f1;
}
.plm-type-btn svg {
  flex-shrink: 0;
}

/* Body / pickers area */
.plm-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.plm-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.plm-no-location {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  font-size: 13px;
  color: #92400e;
  margin: 0;
}
.plm-no-location svg {
  flex-shrink: 0;
  color: #d97706;
}

/* Options row */
.plm-options {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.plm-copies {
  flex-shrink: 0;
}
.plm-copies-stepper {
  display: flex;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.plm-stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: #f9fafb;
  color: #475569;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
}
.plm-stepper-btn:hover {
  background: #e5e7eb;
}
.plm-stepper-btn:active {
  background: #d1d5db;
}
.plm-copies-input {
  width: 40px;
  height: 32px;
  border: none;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  background: #fff;
  -moz-appearance: textfield;
}
.plm-copies-input::-webkit-inner-spin-button,
.plm-copies-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.plm-printer {
  flex: 1;
  min-width: 0;
}

/* Status messages */
.plm-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.plm-status--success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.plm-status--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Footer */
.plm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--line, #e5e7eb);
  background: #fafbfc;
  border-radius: 0 0 var(--radius, 10px) var(--radius, 10px);
}
.plm-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.plm-print-btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}
.plm-print-btn svg {
  flex-shrink: 0;
}

/* Picker overrides inside the modal — ensure dropdowns render above dialog */
.plm-dialog .vp-dropdown--fixed,
.plm-dialog .bc-dropdown--fixed {
  z-index: 10001;
}
.plm-dialog .printer-picker-dropdown {
  z-index: 10001;
  bottom: calc(100% + 4px);
  top: auto;
  right: auto;
  left: 0;
}

/* Printer picker inside modal — constrain to available width */
.plm-printer .printer-picker-bar {
  flex-wrap: wrap;
}
.plm-printer .printer-picker-device {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 160px;
}
.plm-printer .printer-picker-details {
  flex-shrink: 0;
}


/* ─── Order form ──────────────────────────────────────────────── */

.order-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Two-column layout: roomy main column (line items, fulfillments) and
   a narrower right sidebar for metadata (customer, addresses, details,
   tags, notify). Collapses to a single column on narrow viewports. */
.order-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}
.order-form-main,
.order-form-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.order-form-side {
  position: sticky;
  top: 16px;
}
/* Sidebar is narrow (340px) — force every form-grid inside it to a
   single column so address inputs, customer fields, and order details
   don't get squished into ~150px. */
.order-form-side .form-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.order-form-side .form-field {
  grid-column: 1 / -1;
}
.order-form-side .panel {
  padding: 14px 16px;
}
.order-form-side .panel-header {
  margin-bottom: 10px;
}
.order-form-side .panel-header h2 {
  font-size: 14px;
}
.order-form-side .section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin: 12px 0 8px;
}
@media (max-width: 1100px) {
  .order-form-layout {
    grid-template-columns: 1fr;
  }
  .order-form-side {
    position: static;
  }
  /* On narrow screens the sidebar becomes a normal stack — restore
     the default 2-column form-grid for the address fields. */
  .order-form-side .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .order-form-side .form-field {
    grid-column: auto;
  }
}

/* ─── Order SHOW page layout ─────────────────────────────────────
   Same dimensions as `.order-form-layout` so operators don't have
   to retrain their eyes between viewing and editing an order, but
   without the form-only overrides (which target nested form-grids
   the show page never renders). Sidebar collects the at-a-glance
   reference (totals, customer, addresses, metadata) so the main
   column can lead with the work-in-progress (line items, then
   fulfillments). */
.order-show-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
  /* No explicit margin-top: `.content` is a flex column with
     `gap: 24px`, so the gap below the CTA banner is owned by the
     parent container. Adding `margin-top: 16px` here on top of
     that gap was producing a noticeably-too-tall ~40px stripe
     between the CTA and the line items table. */
}
.order-show-main,
.order-show-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.order-show-side {
  position: sticky;
  top: 16px;
}
.order-show-side .panel {
  padding: 14px 16px;
}
.order-show-side .panel-header {
  margin-bottom: 10px;
}
.order-show-side .panel-header h2 {
  font-size: 14px;
}
.order-show-side .detail-list {
  margin: 0;
}
.order-show-side .detail-list > div {
  padding: 6px 0;
  border-bottom: 1px dashed #f1f5f9;
  font-size: 13px;
}
.order-show-side .detail-list > div:last-child {
  border-bottom: none;
}
.order-show-side .section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin: 12px 0 8px;
}
@media (max-width: 1100px) {
  .order-show-layout {
    grid-template-columns: 1fr;
  }
  .order-show-side {
    position: static;
  }
}

/* ─── Bin SHOW — main column + sticky context rail ─────────────────── */
.bin-show-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bin-show-page__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 24px;
  align-items: start;
}
.bin-show-page__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.bin-show-page__rail {
  position: sticky;
  top: 24px;
  min-width: 0;
}
.bin-show-rail-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bin-show-rail__panel .panel-header h2 {
  font-size: 15px;
}
.bin-show-rail__panel-body {
  padding: 0 16px 16px;
}
.bin-show-rail__map-hint {
  margin: 4px 0 0;
  font-size: 12px;
}
.bin-show-rail__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.bin-show-rail__kpi {
  text-align: center;
  padding: 8px 6px;
  border-radius: 8px;
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  min-width: 0;
}
.bin-show-rail__kpi-value {
  display: block;
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.bin-show-rail__kpi-label {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
}
.bin-show-rail__details.detail-list {
  margin: 0 0 14px;
}
.bin-show-rail__details.detail-list > div {
  padding: 6px 0;
  border-bottom: 1px dashed var(--line, #e2e8f0);
  font-size: 13px;
}
.bin-show-rail__details.detail-list > div:last-child {
  border-bottom: none;
}
.bin-show-rail__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e2e8f0);
}
.bin-show-rail__action-form {
  display: block;
  width: 100%;
  margin: 0;
}
.bin-show-rail__action-btn {
  width: 100%;
}
.bin-show-rail__panel--map .bin-route-preview-slot--rail {
  padding: 0 12px 12px;
  max-width: none;
}
.bin-show-rail__panel--map .picking-route-map__svg {
  max-height: min(38vh, 260px);
  width: 100%;
  height: auto;
}
@media (max-width: 960px) {
  .bin-show-page__body {
    grid-template-columns: 1fr;
  }
  .bin-show-page__rail {
    position: static;
    order: 2;
  }
  .bin-show-page__main {
    order: 1;
  }
}

/* Title row holds the order number + status pills inline so the
   page identity ("Order #1042 — paid, fulfilled") reads as a
   single phrase. Wraps to the next line on narrow viewports
   instead of overflowing the toolbar. */
.order-show-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}
.order-show-status {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.order-show-meta {
  /* Sub-headline line under the order number — channel · placed
     date · external id. Sized down from the topbar's default 14px
     <p> so it reads as supplementary metadata, not a second
     headline. */
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
  line-height: 1.4;
}
.order-show-meta code {
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: #475569;
}

/* Status-pill modifiers for Order's enum values. The view emits
   class names from the enum string (with underscores → dashes),
   so adding a new state means appending one rule here — no Ruby
   helper to update. Greens = "money in / shipped"; yellows =
   "in progress / partial"; reds = "money out / void"; blue =
   "authorized but uncaptured". */
.status-pill--paid,
.status-pill--fulfilled {
  background: #dcfce7;
  color: #166534;
}
.status-pill--authorized {
  background: #dbeafe;
  color: #1e40af;
}
.status-pill--unfulfilled,
.status-pill--partially-paid,
.status-pill--partially-fulfilled,
.status-pill--partially-refunded {
  background: #fef3c7;
  color: #854d0e;
}
.status-pill--refunded,
.status-pill--voided {
  background: #fee2e2;
  color: #991b1b;
}

/* Totals card — the headline figure of the page lives at the top
   of the sidebar. Tabular numerals so the right column lines up
   even with mixed digit widths ("$1,234.56" vs "$95.00"). The
   "grand" row is bumped one type-step and gets a hairline border
   to separate it from the breakdown above. */
.order-totals-card .totals-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.order-totals-card .totals-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: #475569;
  font-variant-numeric: tabular-nums;
  padding: 0;
  border: none;
}
.order-totals-card .totals-list > div dt {
  font-weight: 500;
  color: inherit;
  margin: 0;
}
.order-totals-card .totals-list > div dd {
  margin: 0;
  color: #0f172a;
  font-weight: 500;
}
.order-totals-card .totals-list .totals-list__grand {
  border-top: 1px solid #e5e7eb;
  margin-top: 6px;
  padding-top: 8px;
  font-size: 16px;
}
.order-totals-card .totals-list .totals-list__grand dt,
.order-totals-card .totals-list .totals-list__grand dd {
  color: #0f172a;
  font-weight: 700;
}

/* Compact customer card in the sidebar — initial-avatar + name
   + contact lines. Lighter weight than a full Polaris card; we
   only need to confirm "yes, this is the right person" at a
   glance, with deeper info one click away on customer_path. */
.customer-card-mini {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.customer-card-mini__avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.customer-card-mini__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  word-break: break-word;
}
.customer-card-mini__name {
  font-weight: 600;
  font-size: 14px;
}
.customer-card-mini__meta {
  font-size: 12px;
  color: #64748b;
}

/* Address blocks in the sidebar — keep the natural multi-line
   <p> shape but drop the default top margin and tighten the
   leading so they don't hog vertical space. */
.address-block {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #1f2937;
}

/* Tag chips arranged in a flex stack (instead of a single <p>)
   so that long tag lists wrap cleanly inside the narrow sidebar. */
.tag-chip-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ─── Order show — line items table tweaks ─────────────────── */
.line-items-show-table th.num,
.line-items-show-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.line-items-show-table th:last-child,
.line-items-show-table td:last-child {
  text-align: left;
}
/* Line-item cell on the order show page: thumbnail (44px) + body
   (product title, optional variant subtitle, mono SKU). The thumb
   reuses the global .product-thumb pattern (see PO line items) so
   visuals stay consistent across pages — we just enlarge it from
   the default 36px to 44px because the order show table has more
   vertical room and operators benefit from a bigger product cue. */
.line-item-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.line-item-cell__thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 6px;
}
.line-item-cell__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.line-item-cell__title {
  font-weight: 500;
  color: #0f172a;
  line-height: 1.3;
}
.line-item-cell__variant {
  font-size: 12px;
  line-height: 1.3;
}
.line-item-cell__sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.3;
}
/* Stacked unit price with strike-through original above the
   discounted final, mirroring the in-form discount editor's
   live preview. Keeps the math visible without a tooltip. */
.line-price-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  line-height: 1.2;
}
.line-price-cell__strike {
  text-decoration: line-through;
  color: #94a3b8;
  font-size: 12px;
}
.line-stock-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ─── Address card (order create/edit form) ───────────────────
   The order form's sidebar is narrow (340px), so showing the full
   nine-input address form for both shipping AND billing pushes the
   line items panel down half a screen. The address-card collapses
   each address into a 4-line preview + an "Edit" link that pops
   the actual inputs in a modal — same data, ~80% less vertical
   real estate, and the edit interaction is localized so accidental
   clicks elsewhere on the form can't blow away in-progress edits. */
.address-card {
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fafbfc;
}
.address-card + .address-card,
.address-mirror-toggle + [data-address-mirror-target="billingBlock"] .address-card {
  margin-top: 0;
}
.address-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.address-card__title {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  font-weight: 600;
}
.address-card__edit {
  /* Reset button defaults so it sits flush right of the title. */
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  cursor: pointer;
}
.address-card__preview {
  font-size: 13px;
  line-height: 1.45;
  color: #1f2937;
  word-break: break-word;
}
.address-card__empty {
  font-size: 12px;
}
/* Spacing between the shipping card, the "same as shipping" toggle,
   and the (optional) billing card. The mirror controller toggles
   billingBlock's `hidden` attribute, so when the operator hides
   billing the toggle still sits at a sensible distance. */
.address-mirror-toggle {
  margin: 12px 0;
  font-size: 13px;
  color: #475569;
}
.address-mirror-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
/* Address-edit modal: wider than the default 640px so all eight
   address inputs can sit on a normal 2-column grid (recipient |
   company, etc.) without wrapping each label awkwardly. */
.address-card__dialog .modal-content {
  width: min(680px, 92vw);
}
.address-card__dialog .form-grid {
  /* Restore the form's default 2-col grid even when the address
     card lives inside `.order-form-side` (which forces single-col
     for the at-a-glance sidebar layout). The modal has full
     desktop width, so the original 2-col rhythm is appropriate. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.address-card__dialog .form-field-wide {
  grid-column: 1 / -1;
}

/* Compact sticky totals bar — single row with inline cells. */
.totals-strip {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 12px 16px;
  margin-top: 16px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 -2px 6px rgba(15, 23, 42, 0.04);
}
.totals-strip-compact {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 8px 14px;
  margin-top: 8px;
}
.totals-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.totals-cell .totals-label {
  margin: 0;
}
.totals-input {
  width: 90px;
  padding: 4px 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.totals-cell-grand {
  padding-left: 14px;
  margin-left: 4px;
  border-left: 1px solid #e5e7eb;
}
.totals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
}
.totals-label {
  color: #475569;
  font-size: 13px;
}
.totals-value {
  color: #0f172a;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.totals-row-grand {
  border-top: 1px dashed #e5e7eb;
  margin-top: 6px;
  padding-top: 8px;
}
.totals-grand {
  font-weight: 600;
  font-size: 15px;
}

.panel-nested {
  margin-top: 12px;
  padding: 12px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.panel-nested + .panel-nested {
  margin-top: 8px;
}
.panel-nested .panel-header {
  margin-bottom: 0;
}
.panel-nested .panel-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.panel-nested .panel-header p.muted.small {
  margin: 1px 0 0;
  line-height: 1.3;
}

.combobox-dropdown {
  position: absolute;
  z-index: 20;
  margin: 4px 0 0;
  padding: 4px 0;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  min-width: 280px;
}
.combobox-dropdown li {
  padding: 6px 12px;
  cursor: pointer;
}
.combobox-dropdown li:hover,
.combobox-dropdown li[aria-selected="true"] {
  background: #f1f5f9;
}
.combobox-dropdown li.combobox-dropdown-empty {
  color: #6b7280;
  cursor: default;
}
.combobox-dropdown li.combobox-dropdown-create {
  color: #2563eb;
  font-weight: 500;
}

.tag-chip {
  display: inline-block;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
  background: #eef2ff;
  color: #3730a3;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.row-over-allocated {
  background: #fef2f2;
}

/* ─────────────────────────────────────────────────────────────────
   Policy show — v2 (vertical inline-edit layout)
   Scoped under .psv2-page so it does not collide with the legacy
   .policy-show styles still used by other partials.
   ───────────────────────────────────────────────────────────────── */

.psv2-page { max-width: none; }

.psv2-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.psv2-shell--wide-rail {
  grid-template-columns: minmax(0, 1fr) 400px;
}

@media (max-width: 1180px) {
  .psv2-shell { grid-template-columns: 1fr; }
}

.psv2-main { min-width: 0; }

/* ── Status strip ──────────────────────────────────────────────── */
.psv2-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-light, #e5e7eb);
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.psv2-status__cell {
  padding: 14px 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.psv2-status__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}
.psv2-status__value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  display: flex;
  align-items: center;
  gap: 8px;
}
.psv2-status__badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.psv2-status__badge--warn {
  background: #fef3c7;
  color: #92400e;
}

@media (max-width: 720px) {
  .psv2-status { grid-template-columns: repeat(2, 1fr); }
}

/* ── Stale banner ──────────────────────────────────────────────── */
.psv2-stale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  border-radius: 10px;
  margin-bottom: 16px;
}
.psv2-stale__body { font-size: 14px; }
.psv2-stale__body strong { color: #78350f; margin-right: 6px; }

/* ── Sections ──────────────────────────────────────────────────── */
.psv2-section {
  background: #fff;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.psv2-section__header {
  padding: 16px 20px 4px;
}
.psv2-section__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.psv2-section__sub {
  margin: 2px 0 0;
  font-size: 12px;
}
.psv2-section__rows { padding: 6px 0; }
.psv2-section__rows--advanced {
  padding-top: 0;
  border-top: 1px dashed var(--line-light, #e5e7eb);
  margin-top: 4px;
}

/* ── Row ───────────────────────────────────────────────────────── */
.psv2-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 16px;
  padding: 10px 20px;
  border-top: 1px solid #f3f4f6;
  transition: background 200ms ease;
}
.psv2-section__rows > .psv2-row:first-child { border-top: 0; }
.psv2-row--child {
  padding-left: 44px;
  background: #fafafa;
}
.psv2-row--disabled .psv2-row__label,
.psv2-row--disabled .psv2-row__hint { opacity: 0.45; }
.psv2-row--just-saved {
  background: #ecfdf5;
}

.psv2-row__main {
  display: contents;
}
.psv2-row__label-wrap { min-width: 0; }
.psv2-row__label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary, #0f172a);
  line-height: 1.4;
}
.psv2-row__hint {
  font-size: 12px;
  margin-top: 2px;
  line-height: 1.45;
}
.psv2-row__control-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  justify-content: flex-end;
}
.psv2-row__control {
  width: 160px;
  max-width: 100%;
}
input.psv2-row__control[type="number"] { text-align: right; }
.psv2-row__status {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  background: #eef2ff;
  color: #3730a3;
}
.psv2-row__status--ok { background: #d1fae5; color: #065f46; }
.psv2-row__status--err { background: #fee2e2; color: #991b1b; }

.psv2-row__meta {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  margin-top: -2px;
}
.psv2-row__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
}
.psv2-row__chip--overrides {
  background: #fef3c7;
  color: #92400e;
}
.psv2-row__chip--overrides:hover { background: #fde68a; }
.psv2-row__why {
  background: none;
  border: 0;
  padding: 0;
  color: var(--brand-600, #4f46e5);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}
.psv2-row__why:hover { text-decoration: underline; }

/* ── Advanced disclosure ───────────────────────────────────────── */
.psv2-advanced {
  border-top: 1px solid var(--line-light, #e5e7eb);
}
.psv2-advanced__summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  user-select: none;
}
.psv2-advanced__summary::-webkit-details-marker { display: none; }
.psv2-advanced__summary::before {
  content: "›";
  display: inline-block;
  transition: transform 150ms ease;
  font-size: 14px;
  line-height: 1;
}
.psv2-advanced[open] > .psv2-advanced__summary::before {
  transform: rotate(90deg);
}
.psv2-advanced__count { font-size: 11px; }

/* ── Scoped overrides (rules list) ─────────────────────────────── */
.psv2-rules {
  background: #fff;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
}
.psv2-rules__header {
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #f3f4f6;
}
.psv2-rules__title { margin: 0; font-size: 15px; font-weight: 600; }
.psv2-rules__sub { margin: 4px 0 0; font-size: 12px; max-width: 600px; }

.psv2-rules__toolbar {
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #f3f4f6;
  background: #fafafa;
}
.psv2-rules__search { flex: 1; min-width: 200px; }
.psv2-rules__search .input { width: 100%; }
.psv2-rules__scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.psv2-rules__pill {
  background: #fff;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 150ms ease;
}
.psv2-rules__pill:hover { border-color: #cbd5e1; }
.psv2-rules__pill.is-active {
  background: var(--text-primary, #0f172a);
  color: #fff;
  border-color: var(--text-primary, #0f172a);
}
.psv2-rules__pill-count {
  font-size: 11px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.psv2-rules__pill.is-active .psv2-rules__pill-count { opacity: 0.85; }

.psv2-rules__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.psv2-rules__empty {
  padding: 16px 20px;
  margin: 0;
  font-size: 13px;
}
.psv2-rules__zero {
  padding: 32px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Rule row */
.psv2-rule {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid #f3f4f6;
}
.psv2-rules__list > .psv2-rule:first-child { border-top: 0; }
.psv2-rule.policy-exception-row--filtered-out,
.psv2-rule--search-hidden { display: none; }

.psv2-rule__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.psv2-rule__scope-tag {
  display: inline-block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  white-space: nowrap;
}
.psv2-rule__scope-tag--vendor     { background: #ede9fe; color: #5b21b6; }
.psv2-rule__scope-tag--collection { background: #dbeafe; color: #1e40af; }
.psv2-rule__scope-tag--tag        { background: #fce7f3; color: #9d174d; }
.psv2-rule__scope-tag--abc_class  { background: #fef3c7; color: #92400e; }
.psv2-rule__scope-tag--variant    { background: #d1fae5; color: #065f46; }
.psv2-rule__scope-tag--product    { background: #cffafe; color: #155e75; }

.psv2-rule__name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.psv2-rule__deltas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.psv2-rule__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f1f5f9;
  border: 1px solid transparent;
  font-size: 11.5px;
  color: #475569;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.psv2-rule__chip--changed {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #78350f;
}
.psv2-rule__chip--more { background: transparent; color: var(--text-muted, #64748b); }
.psv2-rule__chip-label { opacity: 0.8; }
.psv2-rule__chip-value { font-weight: 600; }

.psv2-rule__actions { display: flex; gap: 6px; }

@media (max-width: 900px) {
  .psv2-rule {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .psv2-rule__actions { justify-content: flex-end; }
}

/* ── Simulator rail ────────────────────────────────────────────── */
.psv2-rail {
  position: sticky;
  top: 16px;
  background: #fff;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.psv2-rail__header { display: flex; flex-direction: column; gap: 2px; }
.psv2-rail__title { margin: 0; font-size: 14px; font-weight: 600; }
.psv2-rail__hint { margin: 0; font-size: 12px; }

.psv2-rail__picker { position: relative; }
.psv2-rail__picker .vp-input { font-size: 12.5px; padding: 7px 10px; }

.psv2-rail__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 12px;
}
.psv2-rail__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #e5e7eb;
  border-top-color: var(--brand-600, #4f46e5);
  border-radius: 50%;
  animation: psv2-spin 700ms linear infinite;
}
@keyframes psv2-spin { to { transform: rotate(360deg); } }

.psv2-rail__placeholder {
  text-align: center;
  padding: 20px 8px;
  border: 1px dashed var(--line-light, #e5e7eb);
  border-radius: 8px;
}
.psv2-rail__placeholder-icon {
  font-size: 22px;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 6px;
}
.psv2-rail__placeholder p { margin: 0; font-size: 12px; }

.psv2-rail__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.psv2-rail__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  background: #f8fafc;
  border-radius: 6px;
  gap: 2px;
}
.psv2-rail__metric--warn { background: #fef2f2; }
.psv2-rail__metric-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}
.psv2-rail__metric-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}

.psv2-rail__trace { display: flex; flex-direction: column; gap: 6px; }
.psv2-rail__trace-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}
.psv2-rail__trace-rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
}
.psv2-rail__trace-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11.5px;
  border-top: 1px solid #f3f4f6;
  align-items: center;
}
.psv2-rail__trace-rows > .psv2-rail__trace-row:first-child { border-top: 0; }
.psv2-rail__trace-row.is-overridden { background: #fffbeb; }
.psv2-rail__trace-row.is-flash {
  animation: psv2RailFlash 1.6s ease-out;
  box-shadow: inset 0 0 0 2px var(--brand-500, #2563eb);
}
@keyframes psv2RailFlash {
  0%   { background: #dbeafe; }
  60%  { background: #eff6ff; }
  100% { background: transparent; }
}
.psv2-rail__trace-cell--name {
  color: var(--text-primary, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.psv2-rail__trace-cell--value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.psv2-rail__trace-cell--src {
  font-size: 10.5px;
  color: var(--text-muted, #64748b);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.psv2-rail__trace-source {
  font-weight: 500;
  color: #4338ca;
}

/* ── Topbar icon button ────────────────────────────────────────── */
/* Topbar icon button. Uses min-* + auto width so that the same
   class works for both icon-only triggers (e.g. share/info icon
   buttons in the topbar) AND icon + label triggers like the
   Columns dropdown — without that, a fixed 36x36 box squashes the
   "Columns" label out of the visible area on the index headers. */
.btn.btn-icon {
  min-width: 36px;
  min-height: 36px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Order form: line-item inventory chips ─────────────────────── */
/* Rendered by line_inventory_controller into the variant cell.
   Goal: at-a-glance "where can I fulfill this from?" without
   requiring a save. Total chip on the left summarizes; per-loc
   chips fan out beside it. Tones map to fulfillability. */
.line-stock-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  align-items: center;
}
.line-stock-empty {
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
  font-style: italic;
}
.line-stock-total {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
}
.line-stock-total.ok      { background: #dcfce7; color: #15803d; }
.line-stock-total.partial { background: #fef9c3; color: #92400e; }
.line-stock-total.out     { background: #fee2e2; color: #b91c1c; }
.line-stock-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.line-stock-chip.ok      { background: #ecfdf5; color: #15803d; border-color: #bbf7d0; }
.line-stock-chip.partial { background: #fefce8; color: #a16207; border-color: #fde68a; }
.line-stock-chip.out     { background: #fafafa; color: #94a3b8; border-color: #e5e7eb; }
.line-stock-current {
  font-size: 9px;
  color: #f59e0b;
  margin-right: 1px;
}

/* ── Order form: collapsible ancillary panels ──────────────────── */
/* Notes / tags / custom fields collapse by default so the form
   opens with the operator's eye on line items. <details>/<summary>
   keeps the markup semantic and accessible. */
.panel.panel-collapse {
  padding: 0;
}
.panel.panel-collapse > details {
  padding: 16px;
}
.panel.panel-collapse > details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  user-select: none;
}
.panel.panel-collapse > details > summary::-webkit-details-marker { display: none; }
.panel.panel-collapse > details > summary::after {
  content: "▸";
  color: #94a3b8;
  font-size: 12px;
  transition: transform 120ms ease;
}
.panel.panel-collapse > details[open] > summary::after {
  transform: rotate(90deg);
}
.panel-collapse-title {
  font-weight: 600;
  font-size: 14px;
  color: #0f172a;
}

/* ── Order show: prominent fulfillment CTA ─────────────────────── */
/* High-contrast banner that lives at the top of the show page when
   any line items are still unfulfilled. Single primary CTA leads
   into the fulfillment composer. */
.order-fulfill-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #eef2ff, #e0f2fe);
  border: 1px solid #c7d2fe;
  /* No bottom margin — `.content`'s flex `gap: 24px` already spaces
     this banner from whatever follows. The previous 16px margin
     was stacking on top of that gap. */
}
.order-fulfill-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.order-fulfill-cta__title {
  font-weight: 600;
  font-size: 14px;
  color: #1e293b;
}
.order-fulfill-cta__detail {
  font-size: 12.5px;
  color: #475569;
}
.order-fulfill-cta__action {
  flex-shrink: 0;
}

/* ── Fulfillment composer ──────────────────────────────────────── */
.fulfill-composer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px) {
  .fulfill-composer-grid { grid-template-columns: minmax(0, 1fr); }
}
.fulfill-allocation-table input.input-compact {
  width: 90px;
  text-align: right;
}
.fulfill-allocation-row.over-allocated input { border-color: #ef4444; }
.fulfill-allocation-row.over-allocated .fulfill-allocation-cap { color: #b91c1c; font-weight: 600; }
.fulfill-allocation-cap {
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
  font-variant-numeric: tabular-nums;
}
.fulfill-summary {
  font-size: 13px;
  color: #334155;
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 10px 16px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}
.fulfill-summary strong { font-weight: 600; }
.fulfill-summary .warn { color: #b91c1c; }
.fulfill-summary .ok   { color: #15803d; }
.fulfill-suggestion-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 12.5px;
  margin-bottom: 12px;
  gap: 12px;
}

/* Status pills for fulfillment lifecycle states the existing
   palette doesn't already cover. Shipped/delivered borrow the
   "complete" green tones; in-progress reuses the pending blue. */
.status-pill--shipped,
.status-pill--delivered {
  background: #dcfce7;
  color: #166534;
}

/* Compact action buttons for inline row actions on the order
   show page (mark shipped / edit / cancel). Lives next to the
   existing .btn family. */
.btn-small {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
}
.row-actions-inline form {
  display: inline;
}

/* ── Order form: line items table layout ───────────────────────── */
/* Tightened to 5 columns: Item / Qty / Price / Tax / ×. Variant
   column has no fixed width so it stretches to absorb slack. All
   inputs in this table override the global .input min-width — that
   default (140–180px) is wider than our compact columns and would
   force inputs to overflow into neighbouring cells. */
.line-items-table { table-layout: fixed; width: 100%; }
.line-items-table th,
.line-items-table td {
  vertical-align: top;
  padding: 10px 8px;
}
.line-items-table th { font-size: 12px; color: #475569; font-weight: 600; }

/* Critical: kill the global .input min-width inside the table so
   inputs respect their cell's column width. Box-sizing keeps the
   100% width inclusive of padding/border. The variant picker keeps
   its native height; we just align all inputs to the cell top via
   `vertical-align: top`. */
.line-items-table input.input,
.line-items-table input.input-compact,
.line-items-table .vp-input {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.line-items-table .cell-variant { padding-right: 12px; }
.line-items-table .cell-tax input { text-align: right; }
.line-items-table .cell-actions {
  text-align: center;
  padding: 10px 4px;
}

/* The price cell anchors a floating popover. */
.line-items-table .cell-price { position: relative; overflow: visible; }
/* Let the popover (and the variant picker dropdown) escape the
   table wrapper. The default .table-wrap sets overflow-x: auto,
   which would clip both. The table is already laid out to fit
   without horizontal scroll for our 5 fixed-width columns. */
.order-form-line-items.table-wrap { overflow: visible; }

/* ── Quantity stepper ──────────────────────────────────────────── */
/* Segmented control: [−] [number input] [+]. The input keeps its
   name/value so order-totals and line-inventory see it as a normal
   input. We pin everything to a single 32px height and zero out the
   input's vertical padding — that way both the flex-centered button
   glyphs and the input's native text rendering land in the same
   vertical band, eliminating the off-by-a-pixel misalignment that
   different font sizes/line-boxes otherwise cause. */
.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.qty-stepper__btn {
  appearance: none;
  background: #f8fafc;
  border: 0;
  padding: 0;
  width: 28px;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  color: #334155;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.qty-stepper__btn:hover  { background: #e2e8f0; }
.qty-stepper__btn:active { background: #cbd5e1; }
.qty-stepper__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center;
  padding: 0 !important;
  background: transparent;
  font-size: 14px;
  line-height: 1;
}
/* Hide native number-input spinners — the +/- buttons replace them. */
.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.qty-stepper__input { -moz-appearance: textfield; appearance: textfield; }

/* ── Click-to-edit price + inline discount editor ──────────────── */
/* Default state: a borderless button that *looks* like text. Click
   reveals the editor below. The display can show a single price or
   a strikethrough original + final when a discount applies. */
.line-price-trigger {
  appearance: none;
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 6px;
  padding: 6px 8px;
  width: 100%;
  text-align: left;
  font-size: 13px;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.line-price-trigger:hover,
.line-price-trigger:focus-visible {
  border-color: #cbd5e1;
  background: #f8fafc;
  outline: none;
}
.line-price-display { font-weight: 600; }
.line-price-discounted {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
}
.line-price-strike {
  text-decoration: line-through;
  color: #94a3b8;
  font-weight: 400;
  font-size: 12px;
}
.line-price-final {
  color: #15803d;
  font-weight: 600;
}
.line-price-hint {
  font-size: 11px;
  color: #6366f1;
}

/* Floating popover that escapes the price cell. Sized for breathing
   room: the discount value input gets a sane min-width that the
   cramped inline version couldn't afford. The cell itself sets
   `position: relative` and `overflow: visible` so we anchor here. */
.line-price-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  width: 280px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.18),
              0 4px 10px -2px rgba(15, 23, 42, 0.08);
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.line-price-popover__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.line-price-popover__label {
  font-size: 12px;
  color: #475569;
  font-weight: 500;
  width: 64px;
  flex-shrink: 0;
}
.line-price-popover__price,
.line-price-popover__discount {
  flex: 1;
  min-width: 0;
}
/* Stronger specificity to beat the table-wide width:100% rule, so
   the discount value input sits next to the $/% toggle without
   getting pushed out of view. */
.line-items-table .line-price-popover input.input-compact {
  width: auto;
  min-width: 0;
  flex: 1;
}
.line-price-popover__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 2px;
}

/* The Price row is rendered in two states inside one slot:
   collapsed (read-only "$24.99 Edit") and expanded (input visible).
   Keeping both elements always in the layout means the popover
   doesn't jump in height when the operator clicks Edit. */
.line-price-popover__row--price {
  min-height: 28px;
}
.line-price-popover__price-display {
  flex: 1;
  font-weight: 600;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.line-price-popover__edit-link {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 2px 4px;
  color: #6366f1;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
}
.line-price-popover__edit-link:hover,
.line-price-popover__edit-link:focus-visible {
  background: #eef2ff;
  outline: none;
}

/* Live preview block: unit math on the first row, line total on the
   second. Padded section with a soft tint so it reads as "computed
   output", distinct from the editable rows above. */
.line-price-popover__preview {
  margin-top: 4px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #334155;
  font-variant-numeric: tabular-nums;
}
.line-price-popover__preview-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.line-price-popover__preview-row strong {
  color: #0f172a;
  font-size: 13px;
}
.line-price-popover__preview-row--total strong {
  font-size: 14px;
}
.line-price-popover__per {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
}
.line-price-popover__strike {
  text-decoration: line-through;
  color: #94a3b8;
  font-weight: 400;
}
.line-price-popover__delta {
  margin-left: auto;
  color: #15803d;
  font-weight: 600;
}

/* ── Bottom-center transient toast (line-merge confirmation) ───── */
/* Pinned to viewport via fixed positioning so the form's scroll
   container can't clip it. Single shared node — repeated merges
   replace the text + replay the entrance animation rather than
   stacking pills on top of each other. */
.pp-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 1100;
  background: #0f172a;
  color: #f8fafc;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.32),
              0 4px 10px -2px rgba(15, 23, 42, 0.18);
  opacity: 0;
  transform: translate(-50%, 20px);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  max-width: min(560px, calc(100vw - 32px));
  text-align: center;
}
.pp-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.discount-type-toggle {
  display: inline-flex;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  overflow: hidden;
}
.discount-type-btn {
  appearance: none;
  background: #fff;
  border: 0;
  padding: 4px 8px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  font-weight: 600;
  min-width: 28px;
}
.discount-type-btn + .discount-type-btn { border-left: 1px solid #cbd5e1; }
.discount-type-btn.is-active {
  background: #1e293b;
  color: #fff;
}

/* ── Tax + taxable combined cell ──────────────────────────────── */
.tax-cluster {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tax-cluster .input-compact { width: 100%; text-align: right; }
.tax-cluster .input-compact.is-disabled {
  background: #f8fafc;
  color: #94a3b8;
}
.tax-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #475569;
  cursor: pointer;
  user-select: none;
}
.tax-toggle input[type="checkbox"] { margin: 0; }

/* ============================================================================
   Customer picker (.cp-*) — see app/views/shared/_customer_picker.html.erb
   and .cursor/rules/customer-picker.mdc. Sibling of .vp-* / bin-picker.
   ========================================================================= */

.cp-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.cp-field {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-input {
  width: 100%;
  padding-left: 34px;          /* room for the leading search glyph */
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
}
/* type="search" adds a vendor clear-X on Chrome/Safari that clashes with
   our leading icon and our own × Change button on the selected card. Hide
   it — the dropdown's "Use new customer" / Esc / blur close already give
   the operator clear escape hatches. */
.cp-input::-webkit-search-cancel-button,
.cp-input::-webkit-search-decoration,
.cp-input::-webkit-search-results-button,
.cp-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.cp-input__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pp-text-muted, #71717a);
  display: inline-flex;
  pointer-events: none;
}

/* ─── Dropdown ─── */

.cp-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  background: var(--pp-surface, #ffffff);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 12px;
  box-shadow: var(--pp-shadow-md, 0 6px 24px rgba(15, 23, 42, 0.10));
  list-style: none;
  z-index: 1100;
  max-height: 360px;
  overflow-y: auto;
  font-size: 13.5px;
}

.cp-dropdown[hidden] { display: none; }

.cp-dropdown--fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: auto;
}

.cp-heading {
  padding: 8px 10px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted, #71717a);
  font-weight: 600;
  cursor: default;
}

/* ─── Row ─── */

.cp-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

.cp-row:hover,
.cp-row.is-active,
.cp-row[aria-selected="true"] {
  background: var(--pp-surface-2, #f4f4f5);
}

.cp-row.is-active {
  outline: 2px solid var(--pp-accent, #4f46e5);
  outline-offset: -2px;
}

.cp-row--empty {
  cursor: default;
  background: transparent;
}
.cp-row--empty:hover { background: transparent; }

.cp-row--create {
  color: var(--pp-accent, #4f46e5);
  font-weight: 500;
  border-top: 1px solid var(--pp-border, #ebecef);
  margin-top: 4px;
  padding-top: 10px;
  border-radius: 0 0 8px 8px;
}
.cp-row--create:hover {
  background: var(--pp-accent-soft, rgba(79, 70, 229, 0.08));
}

.cp-row__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cp-row__title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--pp-text, #18181b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.cp-row__title mark {
  background: rgba(79, 70, 229, 0.15);
  color: inherit;
  padding: 0;
  border-radius: 2px;
}

.cp-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--pp-text-muted, #71717a);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.cp-row__meta > * { white-space: nowrap; }
.cp-row__email { font-feature-settings: "tnum"; }
.cp-row__phone::before {
  content: "·";
  margin-right: 6px;
  color: var(--pp-text-subtle, #a1a1aa);
}
.cp-row__count {
  margin-left: auto;
  color: var(--pp-text-subtle, #a1a1aa);
}

.cp-row__media--ghost {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pp-accent-soft, rgba(79, 70, 229, 0.10));
  color: var(--pp-accent, #4f46e5);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

/* ─── Avatar (initials bubble) ─── */

.cp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pp-accent-soft, rgba(79, 70, 229, 0.10));
  color: var(--pp-accent, #4f46e5);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex: none;
}
.cp-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 11.5px;
}

/* ─── Selected card ─── */

.cp-selected-card {
  display: grid;
  grid-template-columns: 36px 1fr 28px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--pp-surface, #ffffff);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 12px;
  box-shadow: var(--pp-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
}

.cp-selected-card__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cp-selected-card__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pp-text, #18181b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.cp-selected-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--pp-text-muted, #71717a);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.cp-selected-card__phone::before {
  content: "·";
  margin-right: 6px;
  color: var(--pp-text-subtle, #a1a1aa);
}
.cp-selected-card__count { margin-left: auto; color: var(--pp-text-subtle, #a1a1aa); }

.cp-selected-card__change {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--pp-text-muted, #71717a);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s var(--pp-ease, ease), color 0.15s var(--pp-ease, ease);
}
.cp-selected-card__change:hover {
  background: var(--pp-surface-2, #f4f4f5);
  color: var(--pp-text, #18181b);
}
.cp-selected-card__change:focus-visible {
  outline: 2px solid var(--pp-accent, #4f46e5);
  outline-offset: 2px;
}

/* ─── Inline-create panel ─── */

.cp-inline-panel {
  margin-top: 8px;
  padding: 12px;
  background: var(--pp-surface-2, #f4f4f5);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 12px;
}

.cp-inline-panel[hidden] { display: none; }

.cp-inline-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cp-inline-panel__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text-muted, #71717a);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cp-inline-panel__cancel {
  background: transparent;
  border: none;
  color: var(--pp-text-muted, #71717a);
  font-size: 12.5px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.cp-inline-panel__cancel:hover {
  background: var(--pp-surface-3, #ececef);
  color: var(--pp-text, #18181b);
}

.cp-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--pp-text, #18181b);
  cursor: pointer;
}
.cp-checkbox input[type="checkbox"] { margin: 0; }

.cp-status:empty { display: none; }

.cp-help {
  margin: 0;
  color: var(--pp-text-muted, #71717a);
}
.cp-help code {
  font-size: 11.5px;
  padding: 1px 5px;
  background: var(--pp-surface-2, #f4f4f5);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 4px;
  color: var(--pp-text, #18181b);
}

/* ─── Tag chip (used in rows + selected card) ─── */

.cp-row__tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}
.cp-row__tag {
  display: inline-block;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--pp-surface-2, #f4f4f5);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 999px;
  color: var(--pp-text, #18181b);
}

/* ─── Parsed token chips (above the dropdown) ─── */

.cp-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.cp-tokens[hidden] { display: none; }
.cp-token {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11.5px;
  background: var(--pp-accent-soft, rgba(79, 70, 229, 0.10));
  color: var(--pp-accent, #4f46e5);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.cp-token strong { color: var(--pp-accent-hover, #4338ca); font-weight: 600; }

/* ─── Multi-mode chip rail ─── */

.cp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.cp-chips:empty { display: none; }
.cp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  background: var(--pp-surface-2, #f4f4f5);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--pp-text, #18181b);
  max-width: 100%;
}
.cp-chip__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pp-accent-soft, rgba(79, 70, 229, 0.10));
  color: var(--pp-accent, #4f46e5);
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.cp-chip__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.cp-chip__remove {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--pp-text-muted, #71717a);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cp-chip__remove:hover {
  background: var(--pp-surface-3, #ececef);
  color: var(--pp-text, #18181b);
}

/* ─── Fuzzy-match heading ─── */

.cp-heading--fuzzy {
  color: var(--pp-warning, #b45309);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
  padding: 6px 10px 4px;
}

/* ─── Did-you-mean / duplicate banner (inline-create) ─── */

.cp-dup-banner {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--pp-warning-soft, rgba(245, 158, 11, 0.14));
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: 10px;
  color: var(--pp-text, #18181b);
}
.cp-dup-banner[hidden] { display: none; }
.cp-dup-banner__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  margin-bottom: 8px;
}
.cp-dup-banner__head .muted { color: var(--pp-text-muted, #71717a); }
.cp-dup-banner__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-dup-banner__row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  background: var(--pp-surface, #ffffff);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 8px;
}
.cp-dup-banner__main { min-width: 0; }
.cp-dup-banner__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #18181b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-dup-banner__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11.5px;
  color: var(--pp-text-muted, #71717a);
}
.cp-dup-banner__reason {
  color: var(--pp-warning, #b45309);
  font-weight: 500;
}

/* ─── Hover-card preview popover ─── */

.cp-preview {
  position: fixed;
  width: 320px;
  background: var(--pp-surface, #ffffff);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 12px;
  box-shadow: var(--pp-shadow-lg, 0 4px 24px rgba(15, 23, 42, 0.10));
  padding: 14px;
  z-index: 1200;
  font-size: 13px;
  color: var(--pp-text, #18181b);
}
.cp-preview[hidden] { display: none; }
.cp-preview__head {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pp-border, #ebecef);
}
.cp-preview__main { min-width: 0; }
.cp-preview__title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-preview__sub {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--pp-text-muted, #71717a);
}
.cp-preview__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.cp-preview__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin: 10px 0;
  font-variant-numeric: tabular-nums;
}
.cp-preview__stat {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cp-preview__stat-label {
  font-size: 11px;
  color: var(--pp-text-muted, #71717a);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.cp-preview__stat-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pp-text, #18181b);
}
.cp-preview__stat-value--warn { color: var(--pp-warning, #b45309); }

.cp-preview__orders {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--pp-border, #ebecef);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-preview__order {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-preview__order-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pp-accent, #4f46e5);
  text-decoration: none;
}
.cp-preview__order-name:hover { text-decoration: underline; }
.cp-preview__order-meta {
  font-size: 11.5px;
  color: var(--pp-text-muted, #71717a);
  font-variant-numeric: tabular-nums;
}

/* ─── Inline-create panel: collapsible default-shipping section ─── */

.cp-inline-panel__addr {
  grid-column: 1 / -1;
  border: 1px dashed var(--pp-border, #ebecef);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--pp-surface, #ffffff);
}
.cp-inline-panel__addr > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--pp-text, #18181b);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.cp-inline-panel__addr > summary::-webkit-details-marker { display: none; }
.cp-inline-panel__addr > summary::before {
  content: "▸";
  font-size: 10px;
  color: var(--pp-text-muted, #71717a);
  transition: transform 120ms ease-out;
}
.cp-inline-panel__addr[open] > summary::before { transform: rotate(90deg); }
.cp-inline-panel__addr > .form-grid {
  margin-top: 10px;
}

/* ─── Address autocomplete (inline-create panel + address modal) ─── */

.cp-address-autocomplete {
  /* Span both columns of the form-grid so the typeahead headline is
     never cramped to half-width when the address modal is wide. */
  grid-column: 1 / -1;
}
.cp-address-autocomplete__field {
  position: relative;
}
/* Brief highlight on inputs the autocomplete just filled. */
.input.is-autofilled {
  background: var(--pp-success-soft, rgba(16, 185, 129, 0.12));
  transition: background-color 1200ms ease-out;
}
.cp-address-autocomplete__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  padding: 4px;
  background: var(--pp-surface, #ffffff);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 10px;
  box-shadow: var(--pp-shadow-md, 0 6px 24px rgba(15, 23, 42, 0.10));
  list-style: none;
  z-index: 1100;
  max-height: 280px;
  overflow-y: auto;
  font-size: 13px;
}
.cp-address-autocomplete__dropdown[hidden] { display: none; }
.cp-address-autocomplete__row {
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.cp-address-autocomplete__row:hover,
.cp-address-autocomplete__row.is-active,
.cp-address-autocomplete__row[aria-selected="true"] {
  background: var(--pp-surface-2, #f4f4f5);
}
.cp-address-autocomplete__primary {
  font-size: 13px;
  font-weight: 500;
  color: var(--pp-text, #18181b);
}
.cp-address-autocomplete__secondary {
  font-size: 11.5px;
  color: var(--pp-text-muted, #71717a);
}


/* ─── User picker (.up-*) ──────────────────────────────────── */

.up-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.up-field {
  position: relative;
  display: flex;
  align-items: center;
}

.up-input {
  width: 100%;
  padding-left: 34px;
  font-size: 14px;
}

.up-input__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pp-text-muted, #71717a);
  display: inline-flex;
  pointer-events: none;
}

/* ── Dropdown ── */

.up-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  background: var(--pp-surface, #ffffff);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 12px;
  box-shadow: var(--pp-shadow-md, 0 6px 24px rgba(15, 23, 42, 0.10));
  list-style: none;
  z-index: 1100;
  max-height: 360px;
  overflow-y: auto;
  font-size: 13.5px;
}

.up-dropdown[hidden] { display: none; }

.up-dropdown--fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: auto;
}

.up-heading {
  padding: 8px 10px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted, #71717a);
  font-weight: 600;
  cursor: default;
}

/* ── Rows ── */

.up-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

.up-row:hover,
.up-row.is-active,
.up-row[aria-selected="true"] {
  background: var(--pp-surface-2, #f4f4f5);
}

.up-row.is-active {
  outline: 2px solid var(--pp-accent, #4f46e5);
  outline-offset: -2px;
}

.up-row--empty {
  cursor: default;
  grid-template-columns: 1fr;
  background: transparent;
}
.up-row--empty:hover { background: transparent; }

.up-row--deactivated {
  opacity: 0.55;
}
.up-row--deactivated .up-row__title {
  text-decoration: line-through;
}

.up-row__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.up-row__title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--pp-text, #18181b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.up-row__title mark {
  background: var(--pp-accent-soft, rgba(79, 70, 229, 0.14));
  color: inherit;
  border-radius: 2px;
}

.up-row__meta {
  font-size: 12px;
  color: var(--pp-text-muted, #71717a);
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.up-row__email { font-feature-settings: "tnum"; }

.up-row__location {
  font-size: 11px;
  color: var(--pp-text-subtle, #a1a1aa);
}
.up-row__location::before {
  content: "·";
  margin-right: 4px;
}

.up-row__deactivated {
  font-size: 11px;
  color: var(--pp-danger, #dc2626);
  font-weight: 500;
}

.up-row__role {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pp-surface-2, #f4f4f5);
  color: var(--pp-text-muted, #71717a);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Avatar ── */

.up-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pp-accent-subtle, #eff6ff);
  color: var(--pp-accent, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.up-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.up-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.up-avatar__initials {
  line-height: 1;
}

/* ── Selected card ── */

.up-selected-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 10px;
  background: var(--pp-surface, #ffffff);
}

.up-selected-card[hidden] { display: none; }

.up-selected-card__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.up-selected-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-text, #18181b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.up-selected-card__meta {
  font-size: 12px;
  color: var(--pp-text-muted, #71717a);
  display: flex;
  gap: 8px;
  align-items: center;
}

.up-selected-card__email {
  font-feature-settings: "tnum";
}

.up-selected-card__role {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--pp-surface-2, #f4f4f5);
  color: var(--pp-text-muted, #71717a);
}

.up-selected-card__change {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--pp-border, #ebecef);
  background: var(--pp-surface, #ffffff);
  color: var(--pp-text-muted, #71717a);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 120ms, color 120ms;
}

.up-selected-card__change:hover {
  background: var(--pp-surface-2, #f4f4f5);
  color: var(--pp-text, #18181b);
}

.up-selected-card__change:focus-visible {
  outline: 2px solid var(--pp-accent, #4f46e5);
  outline-offset: 2px;
}

/* ── Chips (multi mode) ── */

.up-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 4px;
}
.up-chips:empty { display: none; }

.up-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 4px;
  border-radius: 999px;
  border: 1px solid var(--pp-border, #ebecef);
  background: var(--pp-surface, #ffffff);
  font-size: 12.5px;
  line-height: 1.2;
}

.up-chip__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pp-accent-subtle, #eff6ff);
  color: var(--pp-accent, #2563eb);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.up-chip__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.up-chip__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.up-chip__remove {
  appearance: none;
  background: none;
  border: none;
  padding: 0 4px;
  font-size: 14px;
  line-height: 1;
  color: var(--pp-text-muted, #71717a);
  cursor: pointer;
}
.up-chip__remove:hover {
  color: var(--pp-danger, #dc2626);
}

/* ── Help / status ── */

.up-status:empty { display: none; }

.up-help {
  margin-top: 2px;
  font-size: 12px;
  color: var(--pp-text-muted, #71717a);
}


/* ─── Order lifecycle UI (Phase 1+) ────────────────────────── */

/* Cancelled-order banner. Sits between the topbar and the page
   body. Uses the existing danger token (no new variables) so a
   future theme tweak ripples through automatically. */
.order-cancelled-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  margin: 0 0 12px;
  border: 1px solid var(--pp-danger, #b91c1c);
  background: color-mix(in oklab, var(--pp-danger, #b91c1c) 8%, white);
  color: var(--pp-text, #18181b);
  border-radius: 8px;
  font-size: 13px;
}
.order-cancelled-banner__body { display: flex; gap: 8px; align-items: baseline; }
.order-cancelled-banner__action { flex: 0 0 auto; }
.order-cancelled-banner__action form { margin: 0; }

/* Generic alert--danger so future banners can reuse it without
   re-rolling the token math. Layered after the bespoke class so a
   page can mix them safely. */
.alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.alert--danger {
  border: 1px solid var(--pp-danger, #b91c1c);
  background: color-mix(in oklab, var(--pp-danger, #b91c1c) 8%, white);
  color: var(--pp-text, #18181b);
}

/* Cancel-order modal layout. Stack form rows vertically; modal-actions
   is right-aligned per existing convention. */
.cancel-order-modal .modal-content { max-width: 480px; }
.cancel-order-modal .stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.cancel-order-modal .form-row { display: flex; flex-direction: column; gap: 4px; }
.cancel-order-modal .form-row > label { font-weight: 500; font-size: 13px; }

/* Compact checkbox row used in the cancel modal (and other future
   confirmation modals). Distinct from .checkbox-row-card which is a
   larger card-style picker. */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--pp-text, #18181b);
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] { margin: 0; }

/* ─── Holds panel (Phase 1.5) ──────────────────────────────── */
.holds-panel { padding: 12px 16px; }
.holds-panel__list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }

/* Cards stack their body and the (optional) release disclosure
   vertically. The previous side-by-side layout broke the moment a
   release-note input was rendered — it had no horizontal room in
   the sidebar and overflowed the panel. */
.hold-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--pp-border, #e4e4e7);
  border-radius: 8px;
  background: var(--pp-surface, #fff);
}
.hold-card--critical { border-color: var(--pp-danger, #b91c1c); background: color-mix(in oklab, var(--pp-danger, #b91c1c) 6%, white); }
.hold-card--warning  { border-color: #f59e0b; background: color-mix(in oklab, #f59e0b 6%, white); }
.hold-card__body { display: flex; flex-direction: column; gap: 2px; }
.hold-card__title { font-weight: 600; font-size: 13px; margin: 0; }
.hold-card__meta  { font-size: 12px; color: var(--pp-text-muted, #71717a); margin: 0; }
.hold-card__note  { margin: 4px 0 0; font-size: 13px; }

.hold-card__release { margin: 0; }
.hold-card__release > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--accent, #2563eb);
  list-style: none;
  display: inline-block;
}
.hold-card__release > summary::-webkit-details-marker { display: none; }
.hold-card__release-form {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
.hold-card__release-form .input { flex: 1 1 auto; min-width: 0; }

.holds-panel__empty { color: var(--pp-text-muted, #71717a); font-size: 13px; margin: 0 0 12px; }

.holds-panel__add details { margin: 0; }
.holds-panel__add summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--accent, #2563eb);
  list-style: none;
  font-weight: 500;
}
.holds-panel__add summary::-webkit-details-marker { display: none; }
.holds-panel__add summary:hover { text-decoration: underline; }
.holds-panel__add form { margin: 12px 0 0; display: flex; flex-direction: column; gap: 12px; }
.holds-panel__add .form-field label { font-size: 13px; color: var(--ink, #0f172a); font-weight: 500; }
.holds-panel__add textarea, .holds-panel__add select { width: 100%; }

/* ─── Activity timeline (Phase 2) ──────────────────────────── */
.activity-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 16px 16px;
  position: relative;
}
.activity-timeline::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: var(--pp-border, #e4e4e7);
}
.activity-event {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 6px 0;
  position: relative;
}
.activity-event__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pp-text-muted, #71717a);
  margin: 6px auto 0;
  border: 2px solid var(--pp-surface, #fff);
  position: relative;
  z-index: 1;
}
.activity-event__dot--ok      { background: var(--pp-success, #16a34a); }
.activity-event__dot--danger  { background: var(--pp-danger, #b91c1c); }
.activity-event__dot--warning { background: #f59e0b; }
.activity-event__body { font-size: 13px; line-height: 1.45; }
.activity-event__title { font-weight: 500; color: var(--pp-text, #18181b); }
.activity-event__meta  { font-size: 12px; color: var(--pp-text-muted, #71717a); }
.activity-event__changes { margin: 4px 0 0; padding: 8px; border-radius: 6px; background: var(--pp-surface-2, #f4f4f5); font-size: 12px; }
.activity-event__changes dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 8px; }
.activity-event__changes dt { color: var(--pp-text-muted, #71717a); }

/* ─── Refunds + returns sidebar cards (Phase 4 + 5) ─────────── */
.refund-row, .return-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--pp-border, #e4e4e7);
  font-size: 13px;
}
.refund-row:last-child, .return-row:last-child { border-bottom: 0; }

/* ─── Returns index + show ─────────────────────────────────── */
.return-show-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 960px) {
  .return-show-layout { grid-template-columns: 1fr; }
}

/* ─── Atlas (visual floor plan editor) ──────────────────────────────
   Mirrors the workflow generator's full-screen takeover but uses its
   own namespaced classes so the two editors evolve independently.
   Layout: a three-column grid (palette · canvas · inspector) below a
   thin topbar — matches the "sibling feature" intent the user
   asked for.
   ──────────────────────────────────────────────────────────────── */
.atlas-editor-body { background: #f1f5f9; }
.atlas-editor-shell {
  display: grid;
  grid-template-rows: 56px 1fr;
  height: 100vh;
  width: 100vw;
}
.atlas-topbar { background: #ffffff; border-bottom: 1px solid #e2e8f0; }
.atlas-main   { overflow: hidden; }

/* Topbar */
.atlas-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; padding: 0 16px; gap: 12px;
}
.atlas-header__left, .atlas-header__right { display: flex; align-items: center; gap: 10px; }
.atlas-header__back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; color: #475569;
  text-decoration: none;
}
.atlas-header__back:hover { background: #f1f5f9; color: #0f172a; }
.atlas-header__crumb { color: #64748b; font-size: 13px; font-weight: 500; }
.atlas-header__divider { color: #cbd5e1; }
.atlas-header__name { font-size: 14px; font-weight: 600; color: #0f172a; }
.atlas-header__name--editable { padding: 4px 8px; border-radius: 6px; cursor: text; outline: none; }
.atlas-header__name--editable:hover  { background: #f8fafc; }
.atlas-header__name--editable:focus  { background: #ffffff; box-shadow: inset 0 0 0 1px #93c5fd; }
.atlas-header__close {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; color: #64748b; text-decoration: none;
}
.atlas-header__close:hover { background: #fee2e2; color: #b91c1c; }
.atlas-header__units { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; }
.atlas-header__units-value { font-weight: 500; color: #475569; }

.atlas-publish-state {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
}
.atlas-publish-state__dot { width: 8px; height: 8px; border-radius: 50%; }
.atlas-publish-state--published { background: #dcfce7; color: #166534; }
.atlas-publish-state--published .atlas-publish-state__dot { background: #16a34a; }
.atlas-publish-state--draft     { background: #fef3c7; color: #92400e; }
.atlas-publish-state--draft     .atlas-publish-state__dot { background: #d97706; }

/* Buttons */
.atlas-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500;
  border: 1px solid transparent; cursor: pointer; background: transparent;
  color: #0f172a; transition: background 80ms ease;
}
.atlas-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.atlas-btn--ghost   { border-color: #e2e8f0; background: #fff; }
.atlas-btn--ghost:hover:not(:disabled) { background: #f8fafc; }
.atlas-btn--primary { background: #2563eb; border-color: #2563eb; color: #ffffff; }
.atlas-btn--primary:hover:not(:disabled) { background: #1d4ed8; }
.atlas-btn--danger  { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.atlas-btn--danger:hover:not(:disabled) { background: #fecaca; }
.atlas-btn--sm { padding: 4px 8px; font-size: 12px; }

/* Three-column shell */
.atlas-shell {
  display: grid;
  grid-template-columns: 220px 1fr 320px;
  height: calc(100vh - 56px);
}

/* Palette */
.atlas-palette {
  background: #ffffff; border-right: 1px solid #e2e8f0;
  padding: 12px; overflow-y: auto;
}
.atlas-palette__group { margin-bottom: 16px; }
.atlas-palette__heading {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #94a3b8; margin: 0 4px 6px;
}
.atlas-palette__tile {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; margin-bottom: 4px;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 13px; color: #0f172a; cursor: grab; text-align: left;
}
.atlas-palette__tile:hover    { background: #eff6ff; border-color: #93c5fd; }
.atlas-palette__tile.is-active { background: #dbeafe; border-color: #2563eb; }
.atlas-palette__tile svg { color: #475569; flex-shrink: 0; }
.atlas-palette__hint {
  margin-top: 12px; padding: 8px 10px; font-size: 11px; color: #64748b;
  background: #f8fafc; border-radius: 6px; line-height: 1.4;
}

/* "Unplaced racks" tray — lives between the entity tiles and the
   layer toggles. Cards mimic the palette tile look so users
   intuit they're draggable / clickable, but use a tighter layout
   so a long backlog stays scrollable in-place. */
.atlas-unplaced .atlas-palette__heading {
  display: flex; align-items: center; justify-content: space-between;
}
.atlas-unplaced__refresh {
  background: transparent; border: 0; cursor: pointer; color: #94a3b8;
  padding: 2px; line-height: 0; border-radius: 4px;
}
.atlas-unplaced__refresh:hover { color: #2563eb; background: #eff6ff; }
.atlas-unplaced__list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 220px; overflow-y: auto; padding-right: 2px;
}
.atlas-unplaced__empty {
  margin: 0; padding: 8px 10px; font-size: 11px; color: #64748b;
  background: #f8fafc; border-radius: 6px; line-height: 1.45;
}
.atlas-unplaced__card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 10px; background: #ffffff;
  border: 1px solid #e2e8f0; border-radius: 6px;
  font-size: 12px; color: #0f172a; cursor: grab; text-align: left;
}
.atlas-unplaced__card:hover { border-color: #93c5fd; background: #eff6ff; }
.atlas-unplaced__card strong { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; }
.atlas-unplaced__card span   { color: #64748b; font-size: 11px; }
.atlas-unplaced__card:active { cursor: grabbing; }

/* Outline (items on canvas). Persistent searchable list pinned to
   the bottom of the inspector so it's always visible regardless of
   selection state. Users can locate things even when they're
   hidden via layer toggles. Hidden rows get a faded look + the
   eye-off icon; locked rows get the padlock icon. The active row
   mirrors the canvas selection so the two surfaces never get out
   of sync. */
.atlas-outline {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 16px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  /* Bound the height so an absurdly long list still leaves the
     selected-entity form visible above. The list itself scrolls
     internally below. */
  max-height: 38vh;
  min-height: 0;
}
.atlas-outline__header {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: #475569;
}
.atlas-outline__title { line-height: 1.2; }
.atlas-outline__count { font-size: 10px; color: #94a3b8; font-weight: 400; text-transform: none; letter-spacing: 0; }
.atlas-outline__search {
  width: 100%; font-size: 12px; padding: 5px 8px;
}
.atlas-outline__list {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.atlas-outline__empty { font-size: 11px; color: #94a3b8; margin: 4px 0; }
.atlas-outline__row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 5px 8px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: #1e293b; cursor: pointer;
  text-align: left; font-size: 12px;
}
.atlas-outline__row:hover { background: #f1f5f9; border-color: #e2e8f0; }
.atlas-outline__row.is-active { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.atlas-outline__row.is-hidden-entity { color: #94a3b8; }
.atlas-outline__row.is-hidden-entity .atlas-outline__icon { opacity: 0.6; }
.atlas-outline__icon { display: inline-flex; flex: 0 0 auto; color: #475569; }
.atlas-outline__row.is-active .atlas-outline__icon { color: #1d4ed8; }
.atlas-outline__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.atlas-outline__label {
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atlas-outline__sub { font-size: 10px; color: #94a3b8; }
.atlas-outline__row.is-active .atlas-outline__sub { color: #3b82f6; }
.atlas-outline__flags { display: inline-flex; gap: 4px; color: #94a3b8; flex: 0 0 auto; }

/* Layers panel — sits inside the palette so users keep one mental
   model for "what's on the canvas". */
.atlas-layers__row { margin-bottom: 2px; }
.atlas-layers__btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 0; background: transparent; cursor: pointer;
  font-size: 12px; color: #334155; border-radius: 6px; text-align: left;
}
.atlas-layers__btn:hover { background: #f1f5f9; }
.atlas-layers__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #2563eb;
  flex-shrink: 0;
}
.atlas-layers__dot[data-layer="structure"] { background: #475569; }
.atlas-layers__dot[data-layer="zones"]     { background: #f59e0b; }
.atlas-layers__dot[data-layer="stations"]  { background: #10b981; }

/* Canvas */
/* Same dot-grid background as the workflow canvas (`.wf-canvas`) so
   Atlas feels like a sibling editor. Drawn purely as a CSS layer
   under the Konva stage — it sits in screen space, so it doesn't
   pan/zoom with the geometry. (We tried an in-canvas grid drawn in
   meter coordinates earlier; it kept blurring on zoom and competed
   with the trace image. Screen-space dots avoid both problems.) */
.atlas-canvas-wrap {
  position: relative;
  overflow: hidden;
  /* Fine dot-grid at two scales: primary dots every 40px (≈1.25 m at
     default zoom), secondary dots at 8px for a dense architectural
     feel. Both use the same warm slate so they recede behind entities. */
  background-image:
    radial-gradient(circle, #c9cdd6 1px, transparent 1px),
    radial-gradient(circle, #dde0e6 0.6px, transparent 0.6px);
  background-size: 40px 40px, 8px 8px;
  background-color: #eef0f5;
  /* Soft vignette around the edges — draws the eye inward toward
     the floor plan content, like a lightbox effect. */
  box-shadow: inset 0 0 100px rgba(10, 15, 30, 0.07);
}
.atlas-canvas { position: absolute; inset: 0; outline: none; }
.atlas-canvas:focus { box-shadow: inset 0 0 0 2px #93c5fd; }

/* Live length read-out for the wall/aisle draw tool — pinned next
   to the cursor so the user sees the exact distance as they drag. */
.atlas-length-hud {
  position: absolute; pointer-events: none; z-index: 30;
  background: #0f172a; color: #f8fafc;
  padding: 3px 8px; border-radius: 6px;
  font-size: 12px; font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
  opacity: 0; transition: opacity 80ms ease-out;
}
.atlas-length-hud.is-visible { opacity: 1; }

/* Empty-state overlay — first-run / blank-floor-plan onboarding.
   Floats over the canvas so the user can see the grid behind it
   (helps them visualize the size). Auto-hides as soon as the
   geometry has at least one entity. */
.atlas-empty-state {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.atlas-empty-state.is-hidden { display: none; }
.atlas-empty-state__panel {
  width: min(560px, calc(100% - 32px));
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 24px; box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.35);
}
.atlas-empty-state__title {
  font-size: 18px; font-weight: 600; color: #0f172a; margin-bottom: 4px;
}
.atlas-empty-state__sub {
  font-size: 13px; color: #64748b; margin: 0 0 16px 0;
}
.atlas-empty-state__choices {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 640px) {
  .atlas-empty-state__choices { grid-template-columns: 1fr; }
}
.atlas-empty-state__choice {
  text-align: left; cursor: pointer;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 14px 12px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color 80ms ease, background 80ms ease, transform 80ms ease;
}
.atlas-empty-state__choice:hover {
  background: #ffffff; border-color: #93c5fd;
  transform: translateY(-1px);
}
.atlas-empty-state__choice:focus-visible {
  outline: 2px solid #2563eb; outline-offset: 2px;
}
.atlas-empty-state__choice-icon { color: #2563eb; }
.atlas-empty-state__choice-label {
  font-weight: 600; color: #0f172a; font-size: 14px;
}
.atlas-empty-state__choice-help {
  color: #64748b; font-size: 12px; line-height: 1.4;
}
.atlas-empty-state__footer {
  margin-top: 14px; text-align: right;
}
.atlas-empty-state__skip {
  background: transparent; border: 0; color: #64748b;
  font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 4px;
}
.atlas-empty-state__skip:hover { color: #0f172a; background: #f1f5f9; }

.atlas-zoom {
  position: absolute; bottom: 12px; left: 12px;
  display: flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200, 206, 220, 0.7);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Tool dock — floating top-left of the canvas. Mirrors the SketchUp /
   Figma tool palette: pointer, hand, zoom. The active button gets a
   filled background so the current mode is always visible at a glance. */
.atlas-tools {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200, 206, 220, 0.7);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Minimap thumbnail — bottom-right floating overview. The canvas
   dimensions are baked into the HTML (240x160) so the chrome wraps
   them tightly without needing JS-driven sizing. */
.atlas-minimap {
  position: absolute; bottom: 12px; right: 12px; z-index: 5;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200, 206, 220, 0.7);
  border-radius: 12px;
  padding: 6px;
  box-shadow:
    0 4px 16px rgba(15, 23, 42, 0.10),
    0 1px 3px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  cursor: crosshair;
  /* Disable native image-drag so dragging the viewport rect doesn't
     trigger ghost-image cursor on Safari/Firefox. */
  -webkit-user-select: none; user-select: none;
  transition: box-shadow 150ms ease;
}
.atlas-minimap canvas {
  display: block;
  border-radius: 6px;
  background: #fafafa;
}
.atlas-minimap:hover {
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.14),
    0 2px 6px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Rack hover — 2D front-view that looks like a physical pallet rack.
   The ::before pseudo-element adds a 20px invisible hit zone around the
   card so the mouse can cross the gap from the Konva rack to the card
   without triggering mouseleave. */
.atlas-rack-preview {
  position: fixed; z-index: 1200;
  max-width: min(520px, 94vw);
  min-width: 240px;
  background: #ffffff; border: 1px solid #d1d5db; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.05);
  font-size: 12px; line-height: 1.3; color: #0f172a; pointer-events: auto;
  overflow: visible;
}
.atlas-rack-preview::before {
  content: ""; position: absolute;
  top: -20px; left: -20px; right: -20px; bottom: -20px;
  pointer-events: auto;
}
.atlas-rack-preview__head {
  padding: 12px 14px 8px; border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(180deg, #f9fafb, #fff);
}
.atlas-rack-preview__title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.atlas-rack-preview__sub { font-size: 11px; color: #6b7280; margin-top: 2px; }
.atlas-rack-preview__body { padding: 10px 12px 12px; overflow: hidden; }
.atlas-rack-preview__loading { padding: 20px; text-align: center; color: #6b7280; }

/* ── Pallet rack frame ─────────────────────────────────────────── */
.rp-rack {
  display: flex; align-items: stretch; gap: 0;
  background: linear-gradient(180deg, #fafbfc 0%, #f3f4f6 100%);
  border: 1px solid #d1d5db; border-radius: 8px;
  padding: 6px 0; overflow: hidden;
}
.rp-upright {
  width: 6px; flex-shrink: 0;
  background: linear-gradient(180deg, #94a3b8, #64748b);
  border-radius: 3px;
}
.rp-upright--l { margin-left: 4px; }
.rp-upright--r { margin-right: 4px; }
.rp-shelves { flex: 1; display: flex; flex-direction: column; gap: 0; min-width: 0; }

/* Each shelf row: label on the left, slots across, a beam below */
.rp-shelf {
  display: flex; align-items: stretch; gap: 0;
  border-bottom: 3px solid #94a3b8;
  position: relative;
}
.rp-shelf--floor { border-bottom: 4px solid #475569; }
.rp-shelf__label {
  width: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-right: 1px solid #e5e7eb;
  background: rgba(241, 245, 249, 0.6);
}
.rp-shelf__slots {
  flex: 1; display: flex; gap: 3px; padding: 5px 6px 4px;
  min-height: 58px; align-items: flex-end;
}

/* Bottom "floor" beam */
.rp-beam--floor {
  height: 3px;
  background: linear-gradient(90deg, #94a3b8, #64748b, #94a3b8);
  border-radius: 0 0 4px 4px;
}

/* ── Individual bin slot ───────────────────────────────────────── */
.rp-slot {
  flex: 1; min-width: 44px; max-width: 72px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 1px;
  padding: 3px 2px 2px;
  border-radius: 4px;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  position: relative; cursor: default;
  transition: background 100ms, border-color 100ms;
}
.rp-slot:hover { background: #eff6ff; border-color: #93c5fd; }
.rp-slot--stock {
  background: #f0fdf4; border-color: #86efac; border-style: solid;
}
.rp-slot--stock:hover { background: #dcfce7; border-color: #4ade80; }

.rp-slot__img {
  width: 36px; height: 36px; border-radius: 4px; object-fit: cover;
  border: 1px solid #e5e7eb; background: #fff; flex-shrink: 0;
}
.rp-slot__box {
  width: 36px; height: 28px; border-radius: 3px; flex-shrink: 0;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  border: 1px solid #93c5fd;
}
.rp-slot__box--empty {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-color: #e2e8f0; opacity: 0.6;
}
.rp-slot__qty {
  font-size: 9px; font-weight: 700; color: #047857;
  background: #ecfdf5; border-radius: 3px;
  padding: 0 3px; line-height: 14px;
}
.rp-slot__code {
  font-size: 8px; font-weight: 600; color: #475569;
  line-height: 1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ── Slot interaction states ────────────────────────────────────── */
.rp-slot { cursor: pointer; }
.rp-slot.is-expanded {
  border-color: #2563eb; border-style: solid;
  background: #eff6ff; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.rp-slot--multi::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #f59e0b; border: 1px solid #fff;
}
.rp-slot__skus {
  position: absolute; top: -4px; right: -4px;
  font-size: 8px; font-weight: 700; color: #fff;
  background: #f59e0b; border-radius: 6px;
  min-width: 14px; height: 14px; line-height: 14px;
  text-align: center; padding: 0 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* ── Bin detail panel (inline, below the rack) ─────────────────── */
.rp-detail {
  border-top: 1px solid #e5e7eb; margin-top: 8px;
  padding-top: 8px;
  animation: rp-detail-in 120ms ease-out;
}
@keyframes rp-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rp-detail__head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.rp-detail__code {
  font-weight: 700; font-size: 13px; color: #0f172a;
}
.rp-detail__badge {
  font-size: 10px; color: #6b7280; background: #f3f4f6;
  padding: 1px 6px; border-radius: 4px;
}
.rp-detail__close {
  margin-left: auto; border: 0; background: transparent;
  font-size: 16px; color: #9ca3af; cursor: pointer;
  width: 22px; height: 22px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.rp-detail__close:hover { background: #f3f4f6; color: #374151; }
.rp-detail__empty {
  font-size: 11px; color: #9ca3af; text-align: center; padding: 8px 0;
}
.rp-detail__list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 180px; overflow-y: auto;
}
.rp-detail__row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 6px;
  background: #f9fafb; border: 1px solid #f3f4f6;
  transition: background 80ms;
}
.rp-detail__row:hover { background: #f0fdf4; border-color: #d1fae5; }
.rp-detail__img {
  width: 32px; height: 32px; border-radius: 4px; object-fit: cover;
  border: 1px solid #e5e7eb; background: #fff; flex-shrink: 0;
}
.rp-detail__img--ph {
  background: linear-gradient(135deg, #e5e7eb, #f3f4f6);
}
.rp-detail__info { flex: 1; min-width: 0; }
.rp-detail__title {
  font-size: 11px; font-weight: 600; color: #1f2937;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-detail__sku {
  font-size: 10px; color: #9ca3af; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-detail__qty {
  font-size: 12px; font-weight: 700; color: #047857;
  flex-shrink: 0; min-width: 28px; text-align: right;
}
.rp-detail__more {
  font-size: 10px; color: #6b7280; text-align: center;
  padding: 4px 0 2px; border-top: 1px dashed #e5e7eb; margin-top: 4px;
}

/* ── Legend ─────────────────────────────────────────────────────── */
.rp-legend {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 9px; color: #9ca3af;
}
.rp-legend__dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-left: 6px;
}
.rp-legend__dot--stock { background: #86efac; border: 1px solid #4ade80; }
.rp-legend__dot--empty { background: #e5e7eb; border: 1px solid #d1d5db; }
.rp-legend__hint {
  margin-left: auto; font-style: italic; color: #c4c9cf;
}

/* ── Empty state ───────────────────────────────────────────────── */
.rp-empty { text-align: center; color: #9ca3af; font-size: 11px; margin: 0 0 6px; }
.rp-empty-frame {
  height: 64px; border-radius: 6px; border: 1px dashed #d1d5db;
  background: #fafafa;
  background-image: linear-gradient(90deg, #f1f5f9 1px, transparent 1px);
  background-size: calc(100% / var(--cols, 4)) 100%;
  opacity: 0.7;
}
.atlas-tools__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 6px; border: 0; background: transparent;
  cursor: pointer; color: #475569;
}
.atlas-tools__btn:hover { background: #f1f5f9; color: #0f172a; }
.atlas-tools__btn.is-active { background: #1d4ed8; color: #ffffff; }
.atlas-tools__btn.is-active:hover { background: #1e40af; }
.atlas-tools__btn.is-hidden { display: none; }
/* Activity demo lights up green when on so the user can see at a
   glance the workers are mocked, not real-time data. */
.atlas-tools__btn--activity.is-active { background: #16a34a; }
.atlas-tools__btn--activity.is-active:hover { background: #15803d; }
/* Vertical hairline between tool selection and tool-specific
   actions (today: just the measure-clear button). Inherits the
   dock's height so it doesn't blow out the row. */
.atlas-tools__divider {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  background: #e2e8f0;
  margin: 0 2px;
}
.atlas-tools__divider.is-hidden { display: none; }
.atlas-tools__btn--measure-clear:hover { background: #fee2e2; color: #b91c1c; }

/* Inspector header icon buttons (lock / hide / delete). The single-
   color "ghost" look matches the tool dock so the inspector feels
   like a sibling surface. */
.atlas-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; border: 0;
  background: transparent; color: #64748b; cursor: pointer;
}
.atlas-iconbtn:hover { background: #f1f5f9; color: #0f172a; }
.atlas-iconbtn.is-active { background: #1d4ed8; color: #ffffff; }
.atlas-iconbtn.is-active:hover { background: #1e40af; }
.atlas-iconbtn.is-hidden { display: none; }
.atlas-iconbtn--danger { color: #b91c1c; }
.atlas-iconbtn--danger:hover { background: #fee2e2; color: #991b1b; }

/* Modal form primitives — shared by the array & create-rack modals.
   Kept generic so future modals (rotate, calibrate, etc.) reuse the
   same look without re-styling each one. */
.atlas-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.atlas-form-label { font-size: 12px; font-weight: 600; color: #334155; }
.atlas-form-input {
  border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 8px;
  font-size: 13px; color: #0f172a; background: #ffffff;
  transition: border-color 80ms ease, box-shadow 80ms ease;
}
.atlas-form-input:focus {
  outline: none; border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.atlas-form-help { font-size: 11px; color: #94a3b8; }
.atlas-form-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.atlas-form-segmented {
  display: inline-flex; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden;
}
.atlas-form-segmented__opt { display: inline-flex; }
.atlas-form-segmented__opt input { display: none; }
.atlas-form-segmented__opt span {
  padding: 6px 12px; font-size: 12px; color: #475569; cursor: pointer;
  border-right: 1px solid #e2e8f0;
}
.atlas-form-segmented__opt:last-child span { border-right: 0; }
.atlas-form-segmented__opt input:checked + span { background: #1d4ed8; color: #ffffff; }
.atlas-rotate-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas-zoom__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; border: 0; background: transparent;
  cursor: pointer; color: #475569;
}
.atlas-zoom__btn:hover { background: #f1f5f9; color: #0f172a; }
.atlas-zoom__level { padding: 0 8px; font-size: 12px; color: #475569; min-width: 44px; text-align: center; }

/* Minimap — fixed-size overlay in the bottom-right of the canvas.
   Sized to ~200×140px so it doesn't dominate the stage; the
   inner div is the Konva mount point. */
.atlas-minimap {
  position: absolute; bottom: 12px; right: 12px;
  width: 200px; height: 140px; padding: 6px;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.atlas-minimap__stage { width: 100%; height: 100%; }

/* Validation panel (overlay on canvas) */
.atlas-validation {
  position: absolute; top: 12px; right: 12px; width: 320px; max-height: 60vh;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  display: flex; flex-direction: column;
}
.atlas-validation.is-hidden { display: none; }
.atlas-validation__header {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
}
.atlas-validation__summary { color: #64748b; font-size: 12px; flex: 1; }
.atlas-validation__close {
  background: transparent; border: 0; font-size: 18px; line-height: 1; cursor: pointer; color: #64748b;
}
.atlas-validation__list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.atlas-validation__item {
  display: flex; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12px;
}
.atlas-validation__item--error   { background: #fee2e2; color: #991b1b; }
.atlas-validation__item--warning { background: #fef3c7; color: #92400e; }
.atlas-validation__item--info    { background: #e0f2fe; color: #075985; }
.atlas-validation__sev { font-weight: 600; text-transform: uppercase; font-size: 10px; flex-shrink: 0; }

/* Simulate Path panel — sibling to the validation panel. Sits at
   top-right of the canvas wrap and lets the operator pick two bins
   to preview a picker walk. The bin pickers inside it are the
   shared `_bin_picker` partial; the small overrides below shrink
   the field and dropdown so two of them stack neatly in 320px. */
.atlas-simulate {
  position: absolute; top: 12px; right: 12px;
  width: 360px; max-height: 80vh;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  display: flex; flex-direction: column;
  z-index: 10;
}
.atlas-simulate.is-hidden { display: none; }
.atlas-simulate__header {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
}
.atlas-simulate__header > strong { flex: 1; font-size: 13px; color: #0f172a; }
.atlas-simulate__close {
  background: transparent; border: 0; font-size: 18px; line-height: 1;
  cursor: pointer; color: #64748b; padding: 0 4px;
}
.atlas-simulate__close:hover { color: #0f172a; }
.atlas-simulate__body {
  padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
}
.atlas-simulate__hint { margin: 0; font-size: 12px; color: #64748b; line-height: 1.4; }

.atlas-simulate__row { display: flex; flex-direction: column; gap: 4px; }
.atlas-simulate__label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: #475569;
}

/* Walking-speed segmented control. */
.atlas-simulate__speed {
  display: inline-flex; gap: 4px; padding: 2px;
  background: #f1f5f9; border-radius: 6px;
}
.atlas-simulate__speed-btn {
  flex: 1; padding: 6px 10px; font-size: 12px; font-weight: 500;
  border: 0; background: transparent; color: #475569;
  border-radius: 4px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.atlas-simulate__speed-btn:hover { color: #0f172a; }
.atlas-simulate__speed-btn.is-active {
  background: #ffffff; color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.atlas-simulate__actions { display: flex; gap: 8px; }
.atlas-simulate__actions > .atlas-btn { flex: 1; }

/* Animation row: checkbox + speed select sit on a single line so
   they read as one control. The speed select greys out when the
   checkbox is off (handled via the `disabled` HTML attribute). */
.atlas-simulate__animate-row {
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.atlas-simulate__animate-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #0f172a; cursor: pointer;
}
.atlas-simulate__animate-speed {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #475569;
}
.atlas-simulate__animate-speed select {
  font-size: 12px; padding: 2px 6px;
  border: 1px solid #cbd5e1; border-radius: 4px;
  background: #ffffff; color: #0f172a;
}
.atlas-simulate__animate-speed select:disabled {
  background: #f1f5f9; color: #94a3b8; cursor: not-allowed;
}

/* Result card. Empty state is muted; success has a tinted background;
   error uses the same red as inspector validation rows. */
.atlas-simulate__result {
  border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px;
  background: #f8fafc;
}
.atlas-simulate__result.is-empty {
  background: transparent; border-style: dashed; padding: 16px 12px;
  text-align: center;
}
.atlas-simulate__result-empty {
  margin: 0; font-size: 12px; color: #94a3b8;
}
.atlas-simulate__success {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
}
.atlas-simulate__metric { flex: 1 1 120px; min-width: 0; }
.atlas-simulate__metric-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: #475569; margin-bottom: 2px;
}
.atlas-simulate__metric-value {
  font-size: 20px; font-weight: 600; color: #0f172a; line-height: 1.1;
}
.atlas-simulate__route-meta {
  flex: 1 1 100%; font-size: 11px; color: #64748b;
  border-top: 1px dashed #e2e8f0; padding-top: 8px;
}
.atlas-simulate__error { display: flex; flex-direction: column; gap: 4px; }
.atlas-simulate__error-title {
  font-size: 13px; font-weight: 600; color: #991b1b;
}
.atlas-simulate__error-body { margin: 0; font-size: 12px; color: #7f1d1d; }

/* Tighten the bin-picker dropdown when it lives inside the panel —
   the panel is narrow (360px) so the default picker padding eats
   too much vertical space, and the dropdown should not extend past
   the panel's right edge. */
.atlas-simulate .bp-picker { width: 100%; }
.atlas-simulate .bp-help { display: none; }

/* Inspector */
.atlas-inspector {
  background: #ffffff; border-left: 1px solid #e2e8f0;
  display: flex; flex-direction: column; overflow: hidden;
}
.atlas-inspector__header { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; }
.atlas-inspector__title    { font-size: 14px; font-weight: 600; margin: 0; color: #0f172a; }
.atlas-inspector__subtitle { font-size: 12px; color: #64748b; margin: 4px 0 0; }
.atlas-inspector__head-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.atlas-inspector__align-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 0 0;
  border-top: 1px solid #f1f5f9;
  margin-top: 8px;
}
.atlas-inspector__align-bar .btn {
  font-size: 11px; padding: 4px 8px; white-space: nowrap;
}
.atlas-inspector__align-bar .btn:disabled {
  opacity: 0.45; cursor: not-allowed;
}
.atlas-inspector__body { flex: 1; overflow-y: auto; padding: 12px 16px; }

/* Background trace section — collapsible <details> tucked above
   the per-selection body so it's always reachable without
   eating screen real estate. */
.atlas-inspector__bg {
  border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
  padding: 8px 16px; background: #f8fafc;
}
.atlas-inspector__bg > summary {
  cursor: pointer; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: #475569;
  padding: 4px 0;
}
.atlas-inspector__bg-body { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.atlas-inspector__hint { margin: 0; font-size: 12px; color: #64748b; }
.atlas-inspector__empty {
  color: #94a3b8; font-size: 13px; text-align: center; padding: 24px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.atlas-inspector__empty svg { color: #cbd5e1; }

.atlas-form { display: flex; flex-direction: column; gap: 10px; }
.atlas-form__row { display: flex; flex-direction: column; gap: 4px; }
.atlas-form__row label { font-size: 12px; color: #475569; font-weight: 500; }
.atlas-form__row--two  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Quick rack-size preset chips — injected by atlas_inspector_controller
   below the Width/Depth inputs. Shows the top 3 sizes already used on
   the canvas so users can snap to a consistent dimension with one click. */
.atlas-size-presets {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin-top: -2px;
}
.atlas-size-presets__label {
  font-size: 10px; color: #94a3b8; font-weight: 500;
  letter-spacing: 0.02em; white-space: nowrap;
}
.atlas-size-presets__chip {
  font-size: 11px; font-weight: 600; color: #0f172a;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 5px; padding: 2px 7px; line-height: 18px;
  cursor: pointer; transition: background 100ms, border-color 100ms;
  white-space: nowrap;
}
.atlas-size-presets__chip:hover {
  background: #dbeafe; border-color: #93c5fd; color: #1d4ed8;
}
.atlas-form__divider {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8;
  border-top: 1px solid #e2e8f0; padding-top: 10px; margin-top: 4px;
}

/* Inspector cards — group related fields into rounded panels with a
   small uppercase header. Replaces the prior "list of rows separated
   by horizontal-rule dividers" layout, which read as a debug form
   rather than a designed inspector. The Danger-zone variant gets a
   pink wash so destructive actions stand out without needing a full
   modal step. Cards stack with `gap` from the parent .atlas-form. */
.atlas-inspector__card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.atlas-inspector__card-head {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: #64748b;
  margin: 0; padding-bottom: 2px;
  border-bottom: 1px solid #f1f5f9;
}
.atlas-inspector__card--danger {
  background: #fef2f2;
  border-color: #fecaca;
}
.atlas-inspector__card--danger .atlas-inspector__card-head {
  color: #b91c1c;
  border-bottom-color: #fecaca;
}
.atlas-input {
  width: 100%; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px;
  font-size: 13px; color: #0f172a; background: #ffffff;
}
.atlas-input:focus { outline: 2px solid #93c5fd; outline-offset: -1px; border-color: transparent; }
.atlas-input--error { border-color: #f87171; background: #fef2f2; }
.atlas-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #334155; }

.atlas-rack-link__results {
  list-style: none; margin: 6px 0 0; padding: 4px;
  border: 1px solid #e2e8f0; border-radius: 6px; max-height: 200px; overflow-y: auto;
}
.atlas-rack-link__results.is-hidden { display: none; }
.atlas-rack-link__results button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; padding: 6px 8px; border: 0; background: transparent;
  border-radius: 4px; cursor: pointer; font-size: 12px;
}
.atlas-rack-link__results button:hover { background: #f1f5f9; }
.atlas-rack-link__results em { color: #94a3b8; font-style: normal; }
.atlas-rack-link__actions { display: flex; gap: 6px; margin-top: 8px; }

/* Linked rack card. Shown when the canvas rack has a `rack_id`.
   Title = external_id (e.g. "A-05"), meta = "12 ft × 4 ft · 24 bins".
   The X button only unlinks the canvas entity from the WarehouseRack
   record; it does NOT delete the underlying rack (that's in the
   danger zone below the card). */
.atlas-link-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 8px;
  margin-bottom: 8px;
}
.atlas-link-card.is-hidden { display: none; }
.atlas-link-card__main { flex: 1; min-width: 0; }
.atlas-link-card__title {
  font-size: 13px; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atlas-link-card__meta { font-size: 11px; color: #64748b; margin-top: 2px; }
.atlas-link-card__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 6px;
  background: transparent; color: #64748b; cursor: pointer;
  transition: background 80ms, color 80ms;
}
.atlas-link-card__remove:hover { background: #fee2e2; color: #b91c1c; }
.atlas-rack-link__unlinked.is-hidden { display: none; }

/* Modal */
.atlas-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; }
.atlas-modal.is-hidden { display: none; }
.atlas-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.4); }
.atlas-modal__panel {
  position: relative; width: 480px; max-width: calc(100vw - 32px);
  background: #ffffff; border-radius: 12px; box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
  overflow: hidden; display: flex; flex-direction: column;
}
.atlas-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #f1f5f9;
}
.atlas-modal__header h2 { margin: 0; font-size: 15px; font-weight: 600; color: #0f172a; }
.atlas-modal__close {
  background: transparent; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: #64748b;
}
.atlas-modal__body { padding: 16px 18px; font-size: 13px; color: #334155; line-height: 1.5; }
.atlas-modal__row { padding: 10px 12px; background: #fef2f2; border-radius: 8px; color: #991b1b; }
.atlas-modal__hint { color: #64748b; font-size: 12px; margin-top: 10px; }
.atlas-modal__details { margin-top: 12px; }
.atlas-modal__details summary { cursor: pointer; color: #475569; font-size: 12px; }
.atlas-modal__bin-list {
  list-style: none; padding: 8px 0 0; margin: 0; max-height: 160px; overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #475569;
}
.atlas-modal__footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; background: #f8fafc; border-top: 1px solid #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PICKING SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard layout ─────────────────────────────────────────────────── */
.pick-dash { padding: 14px 32px 24px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 768px) { .pick-dash { padding: 16px; } }

/* ── Compact status strip (replaces hero KPI cards + performance bar) ──── */
.pick-dash__status-strip {
  display: flex; align-items: center; gap: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 20px; height: 52px; overflow: hidden;
}
.pick-dash__status-kpis { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.pick-dash__status-kpi {
  display: flex; align-items: center; gap: 7px;
  padding: 0 16px; height: 52px;
  font-size: 13px; white-space: nowrap;
}
.pick-dash__status-kpi svg { flex-shrink: 0; color: var(--muted); }
.pick-dash__status-kpi--accent svg { color: var(--accent); }
.pick-dash__status-kpi--blue   svg { color: #2563eb; }
.pick-dash__status-kpi--green  svg { color: #16a34a; }
.pick-dash__status-kpi--danger svg { color: var(--danger); }
.pick-dash__status-value { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.pick-dash__status-label { font-size: 11px; color: var(--muted); font-weight: 500; }
.pick-dash__status-cta {
  font-size: 11px; font-weight: 600; color: var(--accent); background: none; border: none;
  cursor: pointer; padding: 0; text-decoration: none; white-space: nowrap;
}
.pick-dash__status-cta:hover { text-decoration: underline; }
.pick-dash__status-cta--danger { color: var(--danger); }
.pick-dash__status-divider { width: 1px; height: 24px; background: var(--line); flex-shrink: 0; }

@media (max-width: 768px) {
  .pick-dash__status-strip {
    height: auto;
    min-height: 52px;
    overflow-x: auto;
    padding: 0 12px;
  }
}

/* Separator between KPIs and performance metrics */
.pick-dash__status-sep {
  width: 1px; height: 36px; background: var(--line); flex-shrink: 0; margin: 0 4px;
}
.pick-dash__status-perf {
  display: flex; align-items: center; gap: 0; flex: 1; overflow: hidden;
}
.pick-dash__status-perf .pick-dash__perf-item { padding: 0 16px; }
.pick-dash__status-perf .pick-dash__perf-divider { width: 1px; height: 20px; background: var(--line); flex-shrink: 0; }
@media (max-width: 1200px) { .pick-dash__status-sep, .pick-dash__status-perf { display: none; } }

/* Keep old perf classes working */
.pick-dash__perf-item { display: flex; align-items: baseline; gap: 6px; }
.pick-dash__perf-value { font-size: 16px; font-weight: 700; color: var(--ink); }
.pick-dash__perf-unit { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.pick-dash__perf-label { font-size: 11px; color: var(--muted); }
.pick-dash__perf-divider { width: 1px; height: 20px; background: var(--line); }

/* ── Two-column grid ──────────────────────────────────────────────────── */
.pick-dash__grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .pick-dash__grid { grid-template-columns: 1fr; } }
.pick-dash__col-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pick-dash__col-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pick-dash__col-right > turbo-frame { display: contents; }

/* ── Dashboard panels ─────────────────────────────────────────────────── */
.pick-dash__panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.pick-dash__panel--full { min-height: 400px; }
.pick-dash__panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  gap: 12px; flex-wrap: wrap;
}
.pick-dash__panel-header h2 { margin: 0; font-size: 15px; font-weight: 600; }
.pick-dash__panel-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pick-dash__panel-badge {
  background: var(--accent); color: #fff; border-radius: 10px;
  padding: 1px 8px; font-size: 11px; font-weight: 700;
}

/* Table inside panel: strip inner borders/radius so the panel chrome dominates */
.pick-dash__panel .table-wrap--flush,
.pick-dash__panel .data-table--flush {
  border: none; border-radius: 0; box-shadow: none;
}
.pick-dash__panel .data-table--flush th,
.pick-dash__panel .data-table--flush td { border-left: none; border-right: none; }
.pick-dash__panel .data-table--flush thead tr { border-top: none; }
.pick-dash__panel .data-table--flush tbody tr:last-child td { border-bottom: none; }
/* Stretch table to full panel width so row backgrounds / flush borders reach the right edge */
.pick-dash__panel .table-wrap--flush {
  width: 100%;
  max-width: 100%;
}
.pick-dash__panel .table-wrap--flush > .data-table--flush {
  width: 100%;
  min-width: 100%;
}

/* ── Panel: search bar above table ───────────────────────────────────── */
.pick-dash__queue-search {
  display: none; /* shown by JS after connect */
  align-items: center; gap: 8px;
  padding: 8px 20px; border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.pick-dash__queue-search-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: 13px; color: var(--ink); padding: 0;
}
.pick-dash__queue-search-input::placeholder { color: var(--muted); }

/* ── View mode toggle (orders / items) ───────────────────────────────── */
.pick-dash__view-toggle { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.pick-dash__view-toggle-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; font-size: 12px; font-weight: 500; color: var(--muted);
  text-decoration: none; background: var(--panel); transition: background 0.15s, color 0.15s;
  border: none; white-space: nowrap;
}
.pick-dash__view-toggle-btn + .pick-dash__view-toggle-btn { border-left: 1px solid var(--line); }
.pick-dash__view-toggle-btn--active { background: var(--accent); color: #fff; }
.pick-dash__view-toggle-btn--active svg { color: #fff; }
.pick-dash__view-toggle-btn:not(.pick-dash__view-toggle-btn--active):hover { background: var(--soft); }

/* ── Item thumbnails in fulfillment table ────────────────────────────── */
.pick-queue-items { display: flex; flex-direction: column; gap: 4px; }
.pick-queue-items__summary { display: flex; align-items: center; gap: -4px; }
.pick-queue-items__count { font-size: 12px; }
.pick-queue-item-thumb {
  width: 28px; height: 28px; border-radius: 5px; border: 2px solid var(--panel);
  background: var(--soft); overflow: hidden; display: flex; align-items: center;
  justify-content: center; margin-left: -6px; position: relative; flex-shrink: 0;
}
.pick-queue-item-thumb:first-child { margin-left: 0; }
.pick-queue-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-queue-item-thumb__initials { font-size: 9px; font-weight: 700; color: var(--muted); }
.pick-queue-item-thumb--overflow {
  font-size: 9px; font-weight: 700; color: var(--muted); width: 28px; height: 28px; background: var(--line);
}
.pick-queue-item-thumb--lg { width: 36px; height: 36px; border-radius: 6px; margin-left: 0; flex-shrink: 0; }

/* ── Quarantine short-pick detail row ─────────────────────────────────── */
.pick-dash__panel .data-table--flush tbody tr.pick-queue-short-detail-row { background: #fef2f2; }
.pick-dash__panel .data-table--flush tbody tr.pick-queue-short-detail-row > td {
  padding: 0 !important;
  background: transparent !important;
}
.pick-queue-short-detail {
  padding: 10px 20px 12px; display: flex; flex-direction: column; gap: 8px;
  border-bottom: 2px solid #fecaca;
}
.pick-queue-short-detail__label {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #991b1b;
}
.pick-queue-short-detail__items { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-queue-short-chip {
  display: flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid #fca5a5; border-radius: 6px;
  padding: 5px 10px; font-size: 12px;
}
.pick-queue-short-chip__img { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; }
.pick-queue-status-note {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.3;
  color: #b45309;
  font-weight: 500;
}

/* ── Hover card: line items ───────────────────────────────────────────── */
.hover-card__line-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--line, #e5e7eb);
}
.hover-card__line-item:last-child { border-bottom: none; }
.hover-card__line-thumb {
  width: 32px; height: 32px; border-radius: 5px; flex-shrink: 0;
  background: var(--soft, #f1f5f9); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hover-card__line-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hover-card__line-thumb-initials { font-size: 9px; font-weight: 700; color: var(--muted, #6b7280); }
.hover-card__line-body { flex: 1; min-width: 0; }
.hover-card__line-title {
  font-size: 12px; font-weight: 500; color: var(--ink, #1f2933);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hover-card__line-meta { display: flex; align-items: center; gap: 5px; margin-top: 1px; font-size: 11px; color: var(--muted, #6b7280); }
.hover-card__line-qty { font-size: 12px; font-weight: 600; color: var(--muted, #6b7280); white-space: nowrap; flex-shrink: 0; }

/* ── Live warehouse map ───────────────────────────────────────────────── */
.live-map-legend {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 20px;
}
.live-map-legend--inline {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--line, #e2e8f0);
}
.live-map-picker-chip {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; text-decoration: none; color: var(--ink);
}
.live-map-picker-chip__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--chip-color, var(--accent));
}
.live-map-picker-chip__name { flex: 1; font-weight: 500; }
.live-map-picker-chip__progress { font-size: 11px; color: var(--muted); }

/* Dialog for live map */
.pick-live-map-dialog {
  width: min(1200px, 96vw); max-width: 1200px;
  height: min(85vh, 900px); max-height: 85vh;
  border: none; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,0.22);
  padding: 0; background: var(--panel); overflow: hidden;
}
.pick-live-map-dialog::backdrop { background: rgba(0,0,0,0.5); }
.pick-live-map-dialog__surface { display: flex; flex-direction: column; height: 100%; }
.pick-live-map-dialog__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; gap: 12px;
}
.pick-live-map-dialog__title { margin: 0; font-size: 16px; font-weight: 600; }
.pick-live-map-dialog__subtitle { margin: 2px 0 0; font-size: 12px; }
.pick-live-map-dialog__header-actions { display: flex; align-items: center; gap: 10px; }
.live-map-picker-list { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pick-live-map-dialog__last-updated { font-size: 11px; }
.pick-live-map-dialog__close { font-size: 20px; line-height: 1; padding: 2px 6px; }
.pick-live-map-dialog__body { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.pick-live-map-dialog__scene-host {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
}
.pick-live-map-dialog__stage { flex: 1; min-height: 0; }
.pick-live-map-inline {
  display: flex;
  flex-direction: column;
  min-height: 540px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(255, 255, 255, 0.92));
}
.pick-live-map-inline__scene-host {
  width: 100%;
  height: 540px;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f8fafc;
}
.pick-live-map-inline__stage {
  flex: 1;
  min-height: 0;
  cursor: grab;
}
.pick-live-map-inline__stage:active {
  cursor: grabbing;
}
.pick-live-map-inline__updated {
  font-size: 11px;
  white-space: nowrap;
}

/* Hit overlay — transparent reference layer for tooltip coordinate mapping */
.live-map-hit-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Picker hover tooltip */
.live-map-tooltip {
  position: absolute;
  z-index: 10;
  width: 240px;
  transform: translate(-50%, -100%);
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 0;
  overflow: hidden;
  pointer-events: all;
}
.live-map-tooltip[hidden] { display: none; }
.live-map-tooltip__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 8px;
}
.live-map-tooltip__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.live-map-tooltip__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.live-map-tooltip__avatar-initials {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.live-map-tooltip__identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.live-map-tooltip__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1f2933);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-map-tooltip__status {
  font-size: 11px;
  color: var(--muted, #6b7280);
  margin-top: 1px;
}
.live-map-tooltip__body {
  padding: 4px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--line, #e2e8f0);
}
.live-map-tooltip__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.live-map-tooltip__label {
  color: var(--muted, #6b7280);
  flex-shrink: 0;
}
.live-map-tooltip__value {
  color: var(--ink, #1f2933);
  font-weight: 500;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Active batch cards ───────────────────────────────────────────────── */
.pick-dash__batch-list { display: flex; flex-direction: column; }
.pick-dash__batch-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: background 0.15s;
}
.pick-dash__batch-card:last-child { border-bottom: none; }
.pick-dash__batch-card:hover { background: var(--soft); }
.pick-dash__batch-top { display: flex; align-items: center; justify-content: space-between; }
.pick-dash__batch-picker { font-size: 13px; }
.pick-dash__batch-progress-row { display: flex; align-items: center; gap: 8px; }
.pick-dash__batch-progress-text { font-size: 12px; white-space: nowrap; }
.pick-dash__batch-time { font-size: 12px; }
.pick-dash__batch-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.picking-progress-bar { flex: 1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.picking-progress-bar__fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; }

/* ── Wave rows ────────────────────────────────────────────────────────── */
.pick-dash__wave-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
}
.pick-dash__wave-row:last-child { border-bottom: none; }

/* ── Fulfillment queue row highlights ─────────────────────────────────── */
/* Tint <tr> (not <td>) so fill spans full table width inside .table-wrap */
.pick-dash__panel .data-table--flush tbody tr.picking-queue-row--quarantine { background: #fef2f2; }
.pick-dash__panel .data-table--flush tbody tr.picking-queue-row--quarantine > td { background: transparent; }
.pick-dash__panel .data-table--flush tbody tr.picking-queue-row--quarantine:hover { background: #fde8e8; }
.pick-dash__panel .data-table--flush tbody tr.picking-queue-row--picking { background: #eff6ff; }
.pick-dash__panel .data-table--flush tbody tr.picking-queue-row--picking > td { background: transparent; }
.pick-dash__panel .data-table--flush tbody tr.picking-queue-row--picking:hover { background: #e0edff; }

/* ── Dashboard overhaul: alerts row ──────────────────────────────────── */
.pick-dash__alerts-row {
  display: flex; gap: 12px; margin-bottom: 8px; align-items: stretch; flex-wrap: wrap;
}
.pick-dash__alerts-row > section { flex: 1; min-width: 260px; }
@media (max-width: 900px) { .pick-dash__alerts-row { flex-direction: column; } }

.pick-dash__panel--alert { border-left: 3px solid var(--warn); }
.pick-dash__panel-desc { font-size: 12px; margin: -4px 16px 12px; }
.pick-dash__panel-footer { padding: 8px 16px 12px; font-size: 12px; }

/* Alert tiers (SLA risk) */
.pick-dash__alert-tiers { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 12px; }
.pick-dash__alert-tier { border-radius: 6px; padding: 8px 12px; }
.pick-dash__alert-tier--danger  { background: #fef2f2; }
.pick-dash__alert-tier--warning { background: #fefce8; }
.pick-dash__alert-tier--amber   { background: #fffbeb; }
.pick-dash__alert-tier-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pick-dash__alert-count { font-size: 12px; font-weight: 600; background: var(--surface-2); border-radius: 10px; padding: 0 6px; }
.pick-dash__alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pick-dash__alert-dot--danger  { background: var(--danger); }
.pick-dash__alert-dot--warning { background: #eab308; }
.pick-dash__alert-dot--amber   { background: #f59e0b; }
.pick-dash__alert-items { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; }
.pick-dash__alert-item { display: flex; justify-content: space-between; font-size: 13px; }
.pick-dash__alert-more { font-size: 12px; padding-top: 4px; }

.pick-dash__panel-badge--danger  { background: #fef2f2; color: var(--danger); }
.pick-dash__panel-badge--warning { background: #fefce8; color: #b45309; }

/* Pace bar */
.pick-dash__pace-bar {
  display: flex; align-items: center; gap: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.pick-dash__pace-item { display: flex; flex-direction: column; gap: 2px; padding: 0 20px; }
.pick-dash__pace-item:first-child { padding-left: 0; }
.pick-dash__pace-label { font-size: 11px; color: var(--muted); font-weight: 500; }
.pick-dash__pace-value { font-size: 14px; font-weight: 600; color: var(--ink); }
.pick-dash__pace-divider { width: 1px; height: 28px; background: var(--line); flex-shrink: 0; }
@media (max-width: 800px) {
  .pick-dash__pace-bar { flex-direction: column; gap: 8px; align-items: flex-start; }
  .pick-dash__pace-divider { display: none; }
  .pick-dash__pace-item { padding: 0; }
}

/* Bucket cards */
.pick-dash__bucket-cards { display: flex; gap: 12px; padding: 8px 16px 16px; flex-wrap: wrap; }
.pick-dash__bucket-card {
  flex: 1; min-width: 120px; max-width: 200px;
  background: var(--soft); border-radius: var(--radius); padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.pick-dash__bucket-card-top { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pick-dash__bucket-icon {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 16px;
}
.pick-dash__bucket-icon--fallback {
  border: 1.5px solid currentColor;
  border-radius: 4px;
  opacity: 0.55;
}
.pick-dash__bucket-card-count { display: flex; align-items: baseline; gap: 4px; }
.pick-dash__bucket-card-value { font-size: 22px; font-weight: 700; color: var(--ink); }
.pick-dash__bucket-card-label { font-size: 12px; color: var(--muted); }
.pick-dash__bucket-card-cta { margin-top: auto; }

/* Activity feed */
.pick-dash__activity-list { display: flex; flex-direction: column; padding: 0 16px 12px; }
.pick-dash__activity-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-light, var(--line)); }
.pick-dash__activity-item:last-child { border-bottom: none; }
.pick-dash__activity-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
  background: var(--muted);
}
.pick-dash__activity-dot--green  { background: #16a34a; }
.pick-dash__activity-dot--blue   { background: #2563eb; }
.pick-dash__activity-dot--amber  { background: #f59e0b; }
.pick-dash__activity-dot--danger { background: var(--danger); }
.pick-dash__activity-dot--gray   { background: var(--muted); }
.pick-dash__activity-content { flex: 1; min-width: 0; }
.pick-dash__activity-text { font-size: 13px; color: var(--ink); }
.pick-dash__activity-time { font-size: 11px; display: block; margin-top: 1px; }

/* Exceptions summary */
.pick-dash__exceptions-grid { display: flex; align-items: flex-start; gap: 20px; padding: 0 16px 16px; flex-wrap: wrap; }
.pick-dash__exceptions-grid--card {
  align-items: stretch;
  gap: 12px;
  padding-top: 4px;
}
.pick-dash__exceptions-total { display: flex; flex-direction: column; }
.pick-dash__exceptions-grid--card .pick-dash__exceptions-total {
  min-width: 104px;
  padding: 12px;
  border-radius: 12px;
  background: #faf5ff;
  border: 1px solid #eadcff;
}
.pick-dash__exceptions-total-value { font-size: 28px; font-weight: 800; line-height: 1; }
.pick-dash__exceptions-total-label { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pick-dash__exceptions-breakdown { display: flex; flex-direction: column; gap: 4px; }
.pick-dash__exceptions-grid--card .pick-dash__exceptions-breakdown {
  flex: 1;
  min-width: 140px;
  justify-content: center;
  gap: 8px;
}
.pick-dash__exceptions-reason { display: flex; align-items: center; gap: 6px; }
.pick-dash__exceptions-grid--card .pick-dash__exceptions-reason {
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: #fff;
}
.pick-dash__exceptions-reason-count { font-weight: 600; font-size: 14px; min-width: 28px; text-align: right; }
.pick-dash__exceptions-grid--card .pick-dash__exceptions-reason-count {
  order: 2;
  min-width: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f3e8ff;
  color: #6d28d9;
  text-align: center;
}
.pick-dash__exceptions-reason-label { font-size: 13px; }

/* ── Status badge additions for picking statuses ──────────────────────── */
.status-badge--ready { background: #dcfce7; color: #15803d; }
.status-badge--in_progress { background: #dbeafe; color: #1d4ed8; }
.status-badge--quarantine { background: #fee2e2; color: #991b1b; }
.status-badge--blocked { background: #fee2e2; color: #991b1b; }
.status-badge--batch_order { background: #dbeafe; color: #1d4ed8; }
.status-badge--single_order { background: #f3e8ff; color: #7c3aed; }
.status-badge--released { background: #dcfce7; color: #15803d; }
.status-badge--pending_release { background: #fef3c7; color: #b45309; }

/* ── Start Picking Modal ─────────────────────────────────────────────── */
.picking-mode-cards { display: flex; gap: 12px; margin-bottom: 20px; }
.picking-mode-card {
  flex: 1; border: 2px solid var(--line); border-radius: var(--radius);
  padding: 20px; cursor: pointer; text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.picking-mode-card input[type="radio"] { display: none; }
.picking-mode-card:has(input:checked) {
  border-color: var(--accent); background: var(--accent-weak);
}
.picking-mode-card:hover { border-color: var(--muted); }
.picking-mode-card:has(input:checked):hover { border-color: var(--accent); }
.picking-mode-card__icon { margin-bottom: 10px; color: var(--muted); }
.picking-mode-card:has(input:checked) .picking-mode-card__icon { color: var(--accent); }
.picking-mode-card__label { font-weight: 600; font-size: 15px; }
.picking-mode-card__hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.picking-mode-cards--wrap { flex-wrap: wrap; }
.picking-mode-cards--wrap .picking-mode-card { flex: 1 1 calc(50% - 6px); min-width: 160px; }
.picking-start-modal__batch-options {
  background: var(--soft); border-radius: var(--radius);
  padding: 14px; margin-top: 16px;
}

/* Config step */
.picking-config-row { }
.picking-config-field > label { margin-bottom: 6px; }
.picking-config-capacity {
  display: flex; align-items: center; gap: 10px;
}
.picking-config-capacity__value {
  font-size: 28px; font-weight: 700; line-height: 1;
  min-width: 36px;
}

/* Scan-prompt card (floor-lookup inspired) */
.picking-scan-prompt {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  min-height: min(420px, 58vh); padding: 24px 16px 16px;
}
.picking-scan-prompt--compact { min-height: auto; }
.picking-scan-prompt__art {
  width: 128px; height: 128px; border-radius: 32px;
  display: grid; place-items: center;
  color: var(--accent, #2563eb);
  background:
    radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.18), transparent 34%),
    var(--soft, #f8fafc);
  border: 1px solid var(--line, #e5e7eb);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
  margin-bottom: 18px;
}
.picking-scan-prompt__art svg { width: 84px; height: 84px; }
.picking-scan-prompt__title {
  font-size: 24px; font-weight: 800; line-height: 1.15;
  margin: 0 0 8px; color: var(--ink, #1f2933);
}
.picking-scan-prompt__copy {
  font-size: 14px; line-height: 1.45; margin: 0 0 12px; max-width: 360px;
  color: var(--muted, #6b7280);
}
.picking-scan-prompt__copy strong { color: var(--ink, #1f2933); }
.picking-scan-prompt__hint { font-size: 12px; margin: 0 0 24px; }
.picking-scan-prompt__feedback {
  margin-bottom: 16px; font-size: 16px; font-weight: 600;
}
.picking-scan-prompt__feedback--success { color: var(--success); }
.picking-scan-prompt__feedback--error { color: var(--danger); }
.picking-scan-prompt__actions {
  width: 100%; display: grid; gap: 10px; max-width: 360px;
}
.picking-scan-prompt__actions .btn {
  min-height: 48px; justify-content: center; font-size: 15px;
}
.picking-scan-prompt__back-link {
  background: none; border: none; cursor: pointer;
  font-size: 13px; margin-top: 20px; padding: 4px;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ── Picking modal — shell ───────────────────────────────────────────── */
.picking-modal .modal-content,
.picking-modal__content {
  width: min(880px, 96vw);
  max-width: 880px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.picking-modal__header {
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
  padding: 16px 24px 14px;
}
.picking-modal__header h2 { margin: 0; font-size: 18px; }
.picking-modal__preview {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 24px 0;
}

/* ── Banners ────────────────────────────────────────────────────────── */
.picking-modal__banner {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13px;
}

/* ── Two-column preview layout ──────────────────────────────────────── */
.picking-modal__columns {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  min-height: 0;
}

/* ── LEFT: Summary column ───────────────────────────────────────────── */
.picking-modal__summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Built-by rationale */
.picking-modal__built-by {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.picking-modal__rules-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.picking-modal__rules-link:hover { text-decoration: underline; }

/* Three hero stats */
.picking-modal__stats {
  display: flex;
  gap: 2px;
}
.picking-modal__stat {
  flex: 1;
  background: var(--soft, #f8fafc);
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: center;
}
.picking-modal__stat:first-child { border-radius: var(--radius, 6px) 0 0 var(--radius, 6px); }
.picking-modal__stat:last-child  { border-radius: 0 var(--radius, 6px) var(--radius, 6px) 0; }
.picking-modal__stat:not(:first-child) { border-left: none; }
.picking-modal__stat-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}
.picking-modal__stat-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 3px;
}

/* Context line (time · distance · weight) */
.picking-modal__context {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}
.picking-modal__context-sep { opacity: 0.4; }

/* Route map slot */
.picking-modal__map-slot:empty { display: none; }

/* Density & top SKUs collapsible */
.picking-modal__details {
  border: 1px solid var(--line);
  border-radius: var(--radius, 6px);
  font-size: 13px;
}
.picking-modal__details summary {
  cursor: pointer;
  user-select: none;
  padding: 8px 12px;
  color: var(--muted);
  font-weight: 500;
}
.picking-modal__details[open] summary {
  border-bottom: 1px solid var(--line);
}
.picking-modal__details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 12px;
}
.picking-modal__detail-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 4px;
}

/* Pack station + picker assignment row */
.picking-modal__assignments {
  display: flex;
  gap: 12px;
}
.picking-modal__assignments > * { flex: 1 1 0; }

/* Picker / station select */
.picking-modal__picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.picking-modal__picker select { max-width: 100%; }

/* ── RIGHT: Order list column ───────────────────────────────────────── */
.picking-modal__orders {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.picking-modal__orders-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 6px;
}
.picking-modal__orders-count { font-size: 12px; }
.picking-modal__orders-scroll {
  border: 1px solid var(--line);
  border-radius: var(--radius, 6px);
  overflow-y: auto;
  max-height: min(44vh, 400px);
  background: var(--panel);
}

/* ── Order row ──────────────────────────────────────────────────────── */
.picking-preview-order {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  transition: background 0.1s;
}
.picking-preview-order:last-child { border-bottom: none; }
.picking-preview-order:hover { background: var(--soft, #f8fafc); }
.picking-preview-order__exclude {
  flex-shrink: 0;
  padding-top: 3px;
  cursor: pointer;
}
.picking-preview-order__body { flex: 1; min-width: 0; }
.picking-preview-order__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}
.picking-preview-order__name { font-weight: 600; }
.picking-preview-order__meta {
  color: var(--muted);
  font-size: 11px;
  margin-top: 1px;
}

/* ── Confidence chip ────────────────────────────────────────────────── */
.picking-confidence-chip {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
}
.picking-confidence-chip--low    { color: #b45309; background: #fef3c7; }
.picking-confidence-chip--medium { color: #1d4ed8; background: #dbeafe; }
.picking-confidence-chip--high   { color: #166534; background: #dcfce7; }

/* ── Route mini-map ─────────────────────────────────────────────────── */
.picking-route-map {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--line, #e2e8f0); border-radius: 6px;
  padding: 6px; background: #ffffff;
}
.picking-route-map--clickable { cursor: pointer; transition: box-shadow 0.15s ease; }
.picking-route-map--clickable:hover { box-shadow: 0 0 0 2px var(--primary, #2563eb)33; }
.picking-route-map__svg { display: block; width: 100%; height: auto; }
.picking-route-map__legend { font-size: 11px; color: var(--muted); text-align: center; }
.picking-route-map__expand-hint { text-decoration: underline; cursor: pointer; }

/* ── Route overlay (expanded map) ──────────────────────────────────── */
.picking-route-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.picking-route-overlay__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px);
}
.picking-route-overlay__panel {
  position: relative; z-index: 1;
  width: min(90vw, 900px); max-height: 85vh;
  background: #fff; border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  display: flex; flex-direction: column; overflow: hidden;
}
.picking-route-overlay__header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--line, #e2e8f0);
}
.picking-route-overlay__title { font-weight: 600; font-size: 15px; }
.picking-route-overlay__legend { flex: 1; }
.picking-route-overlay__close {
  background: none; border: none; font-size: 18px; cursor: pointer;
  color: var(--muted); padding: 4px 6px; border-radius: 4px;
}
.picking-route-overlay__close:hover { background: var(--soft, #f1f5f9); }
.picking-route-overlay__svg {
  display: block; width: 100%; height: auto;
  padding: 16px; box-sizing: border-box;
}

/* ── Commit button spinner ──────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

/* ── Progress stepper (dry-run loading) ────────────────────────────── */
.picking-progress-stepper {
  padding: 40px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.picking-progress-stepper__track {
  width: 100%;
  max-width: 440px;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.picking-progress-stepper__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, #818cf8 100%);
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.picking-progress-stepper__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  animation: progress-shimmer 1.8s ease-in-out infinite;
}
@keyframes progress-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.picking-progress-stepper__steps {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 540px;
}

.picking-progress-stepper__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.35;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: scale(0.92);
}
.picking-progress-stepper__step.is-active {
  opacity: 1;
  transform: scale(1);
}
.picking-progress-stepper__step.is-done {
  opacity: 0.7;
  transform: scale(0.95);
}

.picking-progress-stepper__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  color: var(--muted);
  border: 2px solid transparent;
  transition: all 0.4s ease;
}
.picking-progress-stepper__step.is-active .picking-progress-stepper__icon {
  background: var(--accent-weak, #e0e7ff);
  color: var(--accent);
  border-color: var(--accent);
  animation: step-pulse 1.6s ease-in-out infinite;
}
.picking-progress-stepper__step.is-done .picking-progress-stepper__icon {
  background: #dcfce7;
  color: #16a34a;
  border-color: #16a34a;
}

@keyframes step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.15); }
  50%      { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.08); }
}

.picking-progress-stepper__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  line-height: 1.3;
  transition: color 0.3s;
}
.picking-progress-stepper__step.is-active .picking-progress-stepper__label {
  color: var(--ink);
  font-weight: 600;
}

.picking-progress-stepper__reassurance {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin: 0;
  animation: reassurance-fade 0.5s ease;
}
@keyframes reassurance-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Creating overlay (commit/start state) ─────────────────────────── */
.picking-creating-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: overlay-fadein 0.3s ease;
  border-radius: inherit;
}
@keyframes overlay-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.picking-creating-overlay__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.picking-creating-overlay__rings {
  position: relative;
  width: 72px;
  height: 72px;
}
.picking-creating-overlay__ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
}
.picking-creating-overlay__ring--outer {
  inset: 0;
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  animation: ring-spin 1.2s linear infinite;
}
.picking-creating-overlay__ring--inner {
  inset: 10px;
  border-bottom-color: #818cf8;
  border-left-color: #818cf8;
  animation: ring-spin 0.9s linear infinite reverse;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }

.picking-creating-overlay__check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent);
  opacity: 0.2;
}

.picking-creating-overlay__headline {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  animation: reassurance-fade 0.4s ease;
}
.picking-creating-overlay__subtext {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  animation: reassurance-fade 0.5s ease 0.1s both;
}

/* The preview step needs position:relative so the creating overlay
   can position itself absolutely within it. */
.picking-modal__preview { position: relative; }

/* ── Responsive: stack columns on narrow screens ────────────────────── */
@media (max-width: 680px) {
  .picking-modal .modal-content,
  .picking-modal__content {
    width: 96vw;
    max-width: none;
  }
  .picking-modal__columns {
    grid-template-columns: 1fr;
  }
  .picking-modal__orders-scroll {
    max-height: min(30vh, 240px);
  }
  .picking-progress-stepper__steps {
    flex-wrap: wrap;
    gap: 12px;
  }
  .picking-progress-stepper__step {
    flex: 0 0 calc(50% - 6px);
  }
  .picking-progress-stepper { padding: 24px 16px 20px; }
}

/* ── Pick Engine (fullscreen) ───────────────────────────────────────── */
.picking-engine-topbar { flex-direction: column !important; padding: 0; }
.picking-engine-topbar .toolbar-row { padding: 12px 16px; }
.picking-engine-topbar__batch { font-weight: 700; font-size: 16px; }
.picking-engine-topbar__tabs { display: flex; gap: 4px; }
.picking-engine-progress { height: 6px; background: var(--line); }
.picking-engine-progress__fill { height: 100%; background: var(--accent); border-radius: 0 3px 3px 0; transition: width 0.5s; }
.picking-engine { max-width: 600px; margin: 0 auto; padding: 20px 16px; }

/* Voice bar directly under #pick-engine (no floor plan — no route panel). */
#pick-engine + .voice-control-bar {
  margin-top: 0;
  border-radius: 0 0 10px 10px;
}

.picking-engine-error {
  display: flex; align-items: center; gap: 14px;
  background: #7f1d1d; color: #fff; padding: 20px 22px; border-radius: var(--radius);
  font-size: 18px; font-weight: 700; margin-bottom: 16px;
  border: 2px solid #f87171;
  box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.3), 0 4px 20px rgba(239, 68, 68, 0.25);
  line-height: 1.35;
  position: relative;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.picking-engine-error--fading {
  opacity: 0;
  transform: translateY(-8px);
}
.picking-engine-error::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 8px,
    rgba(255,255,255,0.04) 8px, rgba(255,255,255,0.04) 16px
  );
  pointer-events: none;
}
.picking-engine-error--shake { animation: picking-shake 0.5s ease; }
.pick-engine-error__icon { flex-shrink: 0; color: #fca5a5; }
.pick-engine-error__close {
  margin-left: auto; flex-shrink: 0;
  background: rgba(255,255,255,0.15); border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.pick-engine-error__close:hover { background: rgba(255,255,255,0.3); }
@keyframes picking-shake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90%  { transform: translateX(-6px); }
  30%, 70%  { transform: translateX(6px); }
}
.pick-engine-scanner-input {
  position: fixed; opacity: 0; width: 1px; height: 1px;
  left: -9999px; top: -9999px;
}

/* ── Pick Card ────────────────────────────────────────────────────────── */
.pick-card {
  background: var(--panel); border-radius: var(--radius); border: 1px solid var(--line);
  /* overflow:hidden removed — it was clipping the actions dropdown. Rounded
     top corners are reproduced on the location header instead. */
  box-shadow: var(--shadow);
}
@keyframes pick-card-confirm {
  0%   { background: var(--panel); }
  35%  { background: #d1fae5; }
  100% { background: var(--panel); }
}
.pick-card--confirming { animation: pick-card-confirm 0.5s ease-out; }

/* Location header — bin code only */
.pick-card__location {
  background: #0f172a; color: #fff; padding: 14px 20px;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.pick-card__bin-code {
  font-size: 22px; font-weight: 800; color: #fff;
  font-family: ui-monospace, monospace; letter-spacing: 0.02em;
}
.pick-card__bin-name { font-size: 14px; font-weight: 400; color: #94a3b8; font-family: inherit; }
.pick-card__bin-code--unknown { color: #f87171; font-size: 15px; font-weight: 600; font-family: inherit; }

/* Same-bin hint */
.pick-card__same-bin-hint {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 8px 20px; font-size: 13px; font-weight: 600; color: #059669;
  background: #ecfdf5; border-bottom: 1px solid #a7f3d0;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  letter-spacing: 0.01em;
}
.pick-card__same-bin-hint svg { color: #10b981; }

/* Product section — stacked hero image + SKU */
.pick-card__product {
  display: flex; flex-direction: column; gap: 0; padding: 0;
  border-bottom: 1px solid var(--line);
}
.pick-card__product-hero-image {
  width: 100%; aspect-ratio: 4/3; max-height: 220px; overflow: hidden;
  background: var(--soft); display: flex; align-items: center; justify-content: center;
}
.pick-card__hero-img { width: 100%; height: 100%; object-fit: contain; }
.pick-card__hero-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.pick-card__product-info { min-width: 0; padding: 16px 20px; }
.pick-card__sku {
  font-size: 32px; font-family: ui-monospace, monospace;
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
}
.pick-card__product-title { font-size: 14px; font-weight: 500; line-height: 1.3; margin-top: 5px; color: var(--muted); }
.pick-card__variant-title { font-size: 13px; margin-top: 2px; }
.pick-card__barcode { font-size: 12px; margin-top: 6px; }
.pick-card__barcode-value { font-family: ui-monospace, monospace; font-size: 13px; color: var(--text); }

/* Quantities */
.pick-card__quantities {
  display: flex; gap: 12px; padding: 16px 20px;
  align-items: center; justify-content: center; border-bottom: 1px solid var(--line);
}
.pick-card__qty-separator {
  font-size: 32px; font-weight: 300; color: var(--muted); line-height: 1;
}
.pick-card__qty-block { text-align: center; }
.pick-card__qty-block--scanned .pick-card__qty-value {
  font-size: 56px; color: var(--accent); font-feature-settings: "tnum";
  transition: transform 0.15s ease;
}
.pick-card__qty-value--bump {
  transform: scale(1.15);
}
.pick-card__qty-block--primary .pick-card__qty-value {
  font-size: 56px; color: var(--text); font-feature-settings: "tnum";
}
.pick-card__qty-value { font-size: 32px; font-weight: 700; line-height: 1; }
.pick-card__qty-label {
  font-size: 11px; color: var(--muted); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.pick-card__qty-block--stock-low .pick-card__qty-value  { color: var(--danger); }
.pick-card__qty-block--stock-exact .pick-card__qty-value { color: #d97706; }
.pick-card__qty-block--stock-ok .pick-card__qty-value   { color: var(--text); }
.pick-card__stock-warn {
  display: block; font-size: 10px; font-weight: 700;
  color: var(--danger); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px;
}
.pick-card__stock-warn--tight { color: #d97706; }
.pick-card__qty-input-wrap { padding: 0 20px 12px; }
.pick-card__qty-input { font-size: 24px; text-align: center; max-width: 100px; }

/* Collapsible details section */
.pick-card__more-details {
  border-bottom: 1px solid var(--line);
}
.pick-card__more-details-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; font-size: 13px; font-weight: 500;
  color: var(--muted); cursor: pointer; list-style: none;
  user-select: none; transition: color 0.15s;
}
.pick-card__more-details-trigger:hover { color: var(--text); }
.pick-card__more-details-trigger::-webkit-details-marker { display: none; }
.pick-card__more-details-trigger::before {
  content: ""; display: inline-block;
  width: 0; height: 0; flex-shrink: 0;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.15s;
}
.pick-card__more-details[open] > .pick-card__more-details-trigger::before {
  transform: rotate(90deg);
}
.pick-card__stock-warn-badge {
  font-size: 11px; font-weight: 700; color: var(--danger);
  margin-left: auto;
}
.pick-card__more-details-body { padding: 0 20px 14px; }
.pick-card__detail-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0; font-size: 13px;
}
.pick-card__detail-label { color: var(--muted); }
.pick-card__detail-value { font-weight: 600; }
.pick-card__detail-value--stock-low { color: var(--danger); }
.pick-card__detail-value--stock-exact { color: #d97706; }
.pick-card__detail-value--stock-ok { color: var(--text); }

/* Scan cart tote (batch mode — bind before pick) */
.pick-card__cart-tote-scan {
  padding: 14px 20px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(99, 102, 241, 0.08));
  border-left: 5px solid #3b82f6;
}
.pick-card__cart-tote-scan-title {
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: #93c5fd; margin-bottom: 6px;
}
.pick-card__cart-tote-scan-body {
  margin: 0; font-size: 14px; line-height: 1.45; color: var(--text);
}
.pick-card__cart-tote-scan-body strong { color: #fff; }

/* Cart bin destination row */
.pick-card__cart-destination {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  border-left: 5px solid currentColor;
}
.pick-card__cart-destination-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); white-space: nowrap; flex-shrink: 0;
}
.pick-card__cart-bin-chip {
  font-size: 20px; font-weight: 800; padding: 3px 12px;
  border-radius: 8px; letter-spacing: -0.01em; white-space: nowrap;
}
.pick-card__order-name { font-size: 12px; }

/* Actions */
.pick-card__scan-step { background: var(--surface); color: var(--muted); transition: background 0.15s, color 0.15s; }
.pick-card__scan-step--active { background: var(--accent-subtle, #eef4ff); color: var(--accent, #2563eb) !important; font-weight: 600; }
.pick-card__scan-step--done { background: var(--success-subtle, #f0fdf4); color: var(--success, #16a34a) !important; }
.pick-card__scan-step--done::after { content: " ✓"; }
.pick-card__actions {
  padding: 14px 20px; border-top: 1px solid var(--line);
}
.pick-card__actions > form { display: block; }
.pick-card__confirm-btn {
  width: 100%; padding: 16px 20px; font-size: 18px; font-weight: 700;
  border-radius: var(--radius);
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.15s ease;
}
.pick-card__confirm-btn:active {
  transform: scale(0.97);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}
.pick-card__confirm-btn[disabled],
.pick-card__confirm-btn.is-submitting {
  opacity: 0.7;
  pointer-events: none;
  cursor: wait;
}
.pick-card__confirm-btn--hidden {
  display: none;
}

/* Bin scan step — shown before item scan when require_bin_scan is on */
.pick-card__bin-scan-step {
  padding: 14px 20px;
  background: #eff6ff;
  border-bottom: 1px solid #bfdbfe;
}
.pick-card__bin-scan-prompt {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 500; color: #1d4ed8;
  overflow-wrap: break-word; word-break: break-word;
}

/* Pick card text overflow — prevent voice transcript from widening the card */
.pick-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  min-width: 0;
}
.pick-card__sku,
.pick-card__product-title,
.pick-card__bin-name {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.pick-card__secondary-actions {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px;
}
.pick-card__undo-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--muted);
  padding: 6px 12px; border-radius: var(--radius);
  transition: color 0.15s, background 0.15s;
}
.pick-card__undo-btn:hover { color: var(--text); background: var(--soft); }

/* Undo confirmation (batch pick) — slim preview + off-screen execute form */
.pick-undo-execute-form {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pick-undo-confirm__thumb {
  position: relative;
  overflow: hidden;
}
.pick-undo-confirm__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pick-undo-confirm__thumb-fallback {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.pick-undo-confirm__loading { padding: 8px 0 4px; }
.pick-undo-confirm__error { margin: 0; padding: 8px 0; }
.pick-undo-confirm__hint { margin: 0 0 12px; }
.pick-undo-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pick-undo-preview__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.pick-undo-preview__row--bin {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.pick-undo-preview__label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.pick-undo-preview__value {
  text-align: right;
  font-weight: 600;
  min-width: 0;
  word-break: break-word;
}
.pick-undo-preview__product { min-width: 0; }
.pick-undo-preview__sku {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.pick-undo-preview__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 4px;
  color: var(--text);
}

.pick-card__overflow-dropdown { position: relative; }
.pick-card__overflow-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--muted);
  padding: 6px 12px; border-radius: var(--radius);
  transition: color 0.15s, background 0.15s;
}
.pick-card__overflow-trigger:hover { color: var(--text); background: var(--soft); }
.pick-card__overflow-menu {
  z-index: 200; min-width: 200px;
  left: 50%; transform: translateX(-50%);
}
.pick-card__overflow-menu--dropup {
  bottom: 100%; top: auto; margin-bottom: 4px;
}
.pick-card__overflow-menu form { display: contents; }

/* ── Alternate bin modal ─────────────────────────────────────────────── */
.pick-alt-bin-modal__loading,
.pick-alt-bin-modal__empty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.pick-alt-bin-modal__hint {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
  padding: 0 4px;
}
.pick-alt-bin-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--surface, #f8fafc);
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.pick-alt-bin-card:hover { background: var(--soft, #f1f5f9); border-color: var(--primary, #2563eb); }
.pick-alt-bin-card:active { background: #dbeafe; border-color: var(--primary, #2563eb); }
.pick-alt-bin-card--loading { opacity: 0.5; cursor: wait; }
.pick-alt-bin-card__code {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 80px;
}
.pick-alt-bin-card__name {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-alt-bin-card__qty {
  font-size: 13px;
  font-weight: 600;
  color: var(--success, #16a34a);
  background: #dcfce7;
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
  margin-left: auto;
}

/* Success overlay */
.pick-card__success-overlay {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 150, 105, 0.85); border-radius: var(--radius);
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease;
}
.pick-card__success-overlay--visible {
  opacity: 1;
  animation: success-pop 0.4s ease;
}
@keyframes success-pop {
  0%   { transform: scale(0.8); opacity: 0; }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Tote assignment (post-confirm) ──────────────────────────────────── */
.tote-assignment {
  background: var(--panel); border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow); overflow: hidden;
}
.tote-assignment__header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; background: #065f46; color: #a7f3d0;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.tote-assignment__title { font-size: 18px; font-weight: 700; color: #fff; }
.tote-assignment__subtitle { font-size: 14px; color: #a7f3d0; margin-top: 2px; font-family: ui-monospace, monospace; }
.tote-assignment__prompt {
  padding: 20px; text-align: center; border-bottom: 1px solid var(--line);
}
.tote-assignment__prompt-label {
  font-size: 14px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600; margin-bottom: 6px;
}
.tote-assignment__order-name { font-size: 22px; font-weight: 800; }
.tote-assignment__existing { padding: 16px 20px 0; }
.tote-assignment__existing-label {
  font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: 10px;
}
.tote-assignment__existing-totes {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tote-assignment__tote-btn {
  padding: 10px 18px; font-size: 16px; font-weight: 700;
  background: var(--soft); border: 2px solid var(--line); border-radius: var(--radius);
  cursor: pointer; font-family: ui-monospace, monospace;
  transition: border-color 0.15s, background 0.15s;
}
.tote-assignment__tote-btn:hover {
  border-color: var(--accent); background: rgba(59, 130, 246, 0.08);
}
.tote-assignment__tote-btn--required {
  border-color: var(--accent); background: rgba(59, 130, 246, 0.06);
  font-size: 20px; padding: 14px 24px;
}
.tote-assignment__divider {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 0;
  font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.tote-assignment__divider::before,
.tote-assignment__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.tote-assignment__hint {
  padding: 14px 20px; font-size: 14px; line-height: 1.4; margin: 0;
}
.tote-assignment__hint strong { color: var(--text); }
.tote-assignment__tote-btn--loading {
  position: relative; color: transparent !important; pointer-events: none;
}
.tote-assignment__tote-btn--loading::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px;
  border: 2px solid var(--accent); border-top-color: transparent;
  border-radius: 50%;
  animation: tote-btn-spin 0.6s linear infinite;
}
@keyframes tote-btn-spin { to { transform: rotate(360deg); } }
.tote-assignment--submitting {
  position: relative; pointer-events: none;
}
.tote-assignment--submitting::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.65);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  animation: tote-submit-fade 0.15s ease;
}
@keyframes tote-submit-fade { from { opacity: 0; } to { opacity: 1; } }
.tote-assignment--submitting .tote-assignment__header {
  opacity: 0.7; transition: opacity 0.15s;
}

/* ── Navigation interstitial ─────────────────────────────────────────── */

/* Card mode (no floor plan) */
.nav-interstitial {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px 40px; text-align: center;
  background: var(--panel); border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow);
  animation: interstitial-in 0.3s ease;
}
@keyframes interstitial-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-interstitial__icon {
  color: var(--accent); margin-bottom: 12px;
  animation: interstitial-bounce 1.2s ease infinite;
}
@keyframes interstitial-bounce {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(8px); }
}
.nav-interstitial__label {
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600; margin-bottom: 4px;
}
.nav-interstitial__destination {
  font-size: 48px; font-weight: 900; letter-spacing: -0.02em;
  font-family: ui-monospace, monospace; color: var(--text); line-height: 1.1;
}
.nav-interstitial__sublabel {
  font-size: 15px; color: var(--muted); margin-top: 6px;
  font-weight: 500;
}
.nav-interstitial__aisle-hero {
  font-size: 44px; font-weight: 900; letter-spacing: -0.01em;
  color: var(--text); line-height: 1.1;
}
.nav-interstitial__rack-sub {
  font-size: 24px; font-weight: 700; color: var(--muted);
  font-family: ui-monospace, monospace; margin-top: 6px;
}
.nav-interstitial--aisle-change:not(.nav-interstitial--fullscreen) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), var(--shadow);
}
.nav-interstitial--aisle-change .nav-interstitial__icon {
  color: #f59e0b;
  animation: interstitial-bounce-wide 1.2s ease infinite;
}
@keyframes interstitial-bounce-wide {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(12px); }
}
.nav-interstitial__countdown {
  font-size: 16px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.nav-interstitial:not(.nav-interstitial--fullscreen) .nav-interstitial__countdown {
  margin-top: 16px;
}
.nav-interstitial__card-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 20px;
}
.nav-interstitial__card-actions .nav-interstitial__skip {
  margin-top: 0;
}
.nav-interstitial__pause {
  font-size: 13px; color: var(--muted);
  border: 1px solid var(--line); background: transparent;
}
.nav-interstitial__pause:hover { background: var(--soft); color: var(--text); }
.nav-interstitial__pause[aria-pressed="true"] {
  background: var(--soft); color: var(--text); border-color: var(--muted);
}
.nav-interstitial__countdown--paused {
  color: var(--accent); font-weight: 600;
}
.nav-interstitial__skip {
  margin-top: 24px; font-size: 13px;
}
.nav-interstitial__map {
  width: 100%; max-width: 360px; height: 180px;
  margin-top: 16px; border-radius: var(--radius);
  border: 1px solid var(--line); overflow: hidden;
  background: var(--surface-2, var(--bg));
}
.nav-interstitial__scene-host {
  width: 100%; height: 100%; position: relative;
}
.nav-interstitial__stage {
  width: 100%; height: 100%;
}

/* Full-screen map mode (with floor plan) */
.nav-interstitial--fullscreen {
  position: fixed; inset: 0; z-index: 200;
  padding: 0; border: none; border-radius: 0; box-shadow: none;
  background: var(--surface-2, #f1f5f9);
  animation: interstitial-in 0.25s ease;
}
.nav-interstitial__fullscreen-map {
  position: absolute; inset: 0;
  overflow: hidden;
}
.nav-interstitial__fullscreen-scene-host {
  width: 100%; height: 100%; position: relative;
}
.nav-interstitial__fullscreen-stage {
  width: 100%; height: 100%;
}

.nav-interstitial__bottom-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 20px 24px 28px;
  z-index: 10;
  animation: interstitial-overlay-in 0.35s ease;
}
@keyframes interstitial-overlay-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-interstitial__bottom-overlay-content {
  text-align: center;
  max-width: 480px; margin: 0 auto;
}
.nav-interstitial__bottom-label {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); font-weight: 600; margin-bottom: 2px;
}
.nav-interstitial__bottom-hero {
  font-size: 52px; font-weight: 900; letter-spacing: -0.02em;
  color: var(--text); line-height: 1.1;
}
.nav-interstitial--aisle-change .nav-interstitial__bottom-hero {
  color: #b45309;
}
.nav-interstitial__bottom-sub {
  font-size: 26px; font-weight: 800; color: var(--text);
  font-family: ui-monospace, monospace; margin-top: 4px;
}
.nav-interstitial__bottom-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 14px;
}
.nav-interstitial--fullscreen .nav-interstitial__skip {
  margin-top: 0; font-size: 13px;
}
.nav-interstitial--fullscreen .nav-interstitial__pause {
  margin-top: 0;
}
.nav-interstitial--fullscreen .nav-interstitial__countdown {
  font-size: 15px; color: var(--muted);
}
.nav-interstitial__next-card { display: none; }

/* ── Topbar meta ─────────────────────────────────────────────────────── */
.picking-engine-topbar__meta {
  font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 4px;
}
.picking-engine-topbar__timer {
  font-variant-numeric: tabular-nums;
}
.picking-engine-topbar__estimate {
  font-size: 12px; color: var(--muted); margin-left: 2px;
}

/* Cart bin colors (8 colors for visual distinction) */
.pick-cart-bin-color-0 { background: #dbeafe; color: #1d4ed8; }
.pick-cart-bin-color-1 { background: #dcfce7; color: #15803d; }
.pick-cart-bin-color-2 { background: #fef3c7; color: #b45309; }
.pick-cart-bin-color-3 { background: #fce7f3; color: #be185d; }
.pick-cart-bin-color-4 { background: #ede9fe; color: #7c3aed; }
.pick-cart-bin-color-5 { background: #cffafe; color: #0e7490; }
.pick-cart-bin-color-6 { background: #fef2f2; color: #b91c1c; }
.pick-cart-bin-color-7 { background: #f0fdf4; color: #166534; }

/* ── Pick List (ShipHero-style rows) ──────────────────────────────────── */
.pick-list__bin-header {
  padding: 8px 16px;
  font-size: 12px;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  border-top: 2px solid var(--line);
  user-select: none;
  position: sticky; top: 0; z-index: 5;
}
.pick-list__bin-header:first-child { border-top: none; }
.pick-list__bin-code { font-family: ui-monospace, monospace; font-weight: 700; font-size: 13px; }
.pick-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  transition: background 0.1s;
}
.pick-list__item--picked { opacity: 0.45; }
.pick-list__item--short { background: #fef2f2; }
.pick-list__item--current {
  background: #fff;
  border-left: 4px solid var(--accent);
  padding-left: 12px;
  scroll-margin-top: 80px;
}
.pick-list__pick-qty {
  display: flex; flex-direction: column; align-items: center;
  min-width: 42px; flex-shrink: 0;
}
.pick-list__pick-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); line-height: 1;
}
.pick-list__pick-value {
  font-size: 22px; font-weight: 800; line-height: 1.1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.pick-list__thumb {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: 6px; overflow: hidden;
  background: var(--soft);
  display: flex; align-items: center; justify-content: center;
}
.pick-list__thumb-img {
  width: 100%; height: 100%; object-fit: cover;
}
.pick-list__thumb-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.pick-list__info { flex: 1; min-width: 0; }
.pick-list__sku {
  font-family: ui-monospace, monospace; font-size: 11px;
  font-weight: 600; color: var(--muted); line-height: 1.2;
  letter-spacing: 0.01em;
}
.pick-list__product-name {
  font-size: 14px; font-weight: 600; line-height: 1.3;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.pick-list__variant-name { font-weight: 400; color: var(--muted); }
.pick-list__meta {
  font-size: 12px; line-height: 1.3; margin-top: 2px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.pick-list__cart-chip {
  padding: 1px 6px; border-radius: 4px;
  font-weight: 700; font-size: 10px; letter-spacing: 0.02em;
}
.pick-list__status {
  flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; min-width: 36px;
}
.pick-list__check { flex-shrink: 0; }
.pick-list__status-badge {
  font-size: 11px; font-weight: 700; padding: 3px 8px;
  border-radius: 4px; white-space: nowrap;
}
.pick-list__status-badge--short { background: #fef2f2; color: #b91c1c; }
.pick-list__status-badge--skipped { background: #fffbeb; color: #b45309; }
.pick-list__status-badge--cancelled { background: #fef2f2; color: #b91c1c; }
.pick-list__go-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.pick-list__go-btn:hover { background: var(--accent-hover, #1d4ed8); }
.pick-list__go-btn:active { transform: scale(0.93); }
.pick-list__item--clickable {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
}
.pick-list__item--clickable:hover { background: #f8fafc; }
.pick-list__item--clickable:active { background: #f1f5f9; }
.pick-list__scan-required {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; color: var(--pp-text-muted, #71717a);
  flex-shrink: 0;
}
.pick-list__footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; padding: 16px 20px; border-top: 1px solid var(--line);
}

/* ── All Done screen ─────────────────────────────────────────────────── */
.pick-all-done { text-align: center; padding: 48px 24px; }
.pick-all-done__icon { margin-bottom: 16px; }
.pick-all-done h2 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }

/* ── Action barcodes reference ────────────────────────────────────────── */
.pick-action-barcodes {
  margin-top: 20px; border-radius: var(--radius);
  border: 1px solid var(--line); overflow: hidden;
}
.pick-action-barcodes__trigger {
  display: flex; align-items: center;
  padding: 10px 14px; font-size: 12px; color: var(--muted);
  cursor: pointer; user-select: none; list-style: none;
  background: var(--soft);
}
.pick-action-barcodes__trigger::-webkit-details-marker { display: none; }
.pick-action-barcodes__trigger:hover { color: var(--text); }
.pick-action-barcodes__body { padding: 14px 16px; }
.pick-action-barcodes__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pick-action-barcodes__table th {
  text-align: left; padding: 4px 8px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.pick-action-barcodes__table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.pick-action-barcodes__table tr:last-child td { border-bottom: none; }
.pick-action-barcodes__table code {
  font-family: ui-monospace, monospace; font-size: 12px;
  background: var(--soft); padding: 2px 6px; border-radius: 4px;
  font-weight: 700; letter-spacing: 0.04em;
}

/* ── Picking Engine — Immersive mode (hide app chrome) ────────────────── */
body[data-picking-engine] .header-bar { display: none !important; }
body[data-picking-engine] .mobile-floor-toggle { display: none !important; }
body[data-picking-engine] .sidebar { display: none !important; }
body[data-picking-engine] .sidebar-corner { display: none !important; }
body[data-picking-engine] .sidebar-hover-zone { display: none !important; }
body[data-picking-engine] .app-sidebar-toggle { display: none !important; }
body[data-picking-engine] .app-rail { display: none !important; }
body[data-picking-engine] .super-shell .app-shell,
body[data-picking-engine] .app-shell { padding-top: 0; padding-left: 0 !important; }
body[data-picking-engine] .main { border-top-right-radius: 0; }
/* Square top corners on the batch picking header — immersive mode is
   full-bleed under the gutter, so no need to mirror .main's shell radii
   (and this overrides .app-shell.is-collapsed .topbar on desktop). */
body[data-picking-engine] .main > .topbar {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ── Collapsible topbar in picking engine ──────────────────────────────
   The toolbar is hidden by default; the toggle tab reveals it.
   No persistence — every page load starts collapsed. */
body[data-picking-engine] .main > .topbar {
  flex-direction: column;
  padding: 0;
  gap: 0;
  border-bottom: none;
}
body[data-picking-engine] .main > .topbar .picking-engine-topbar {
  display: none;
}
body[data-picking-engine] .main > .topbar.is-pick-topbar-visible .picking-engine-topbar {
  display: flex;
}

.pick-topbar-toggle {
  display: none;
}
body[data-picking-engine] .pick-topbar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 18px;
  background: var(--bg, #f6f7f9);
  border: none;
  border-bottom: none;
  cursor: pointer;
  color: var(--muted, #94a3b8);
  transition: color 0.15s, background 0.15s;
  padding: 0;
  flex-shrink: 0;
}
body[data-picking-engine] .pick-topbar-toggle:hover {
  color: var(--text, #1f2933);
  background: var(--soft, #f1f5f9);
}
body[data-picking-engine] .pick-topbar-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}
body[data-picking-engine] .pick-topbar-toggle.is-pick-topbar-open svg {
  transform: rotate(180deg);
}
body[data-picking-engine] .content {
  padding-top: 0;
}

body[data-picking-engine] .floor-topbar { display: none !important; }

/* ── Picking Engine — Mobile / Tablet Responsive ─────────────────────── */

/* Topbar: icon vs. text toggle helpers */
.pick-topbar-icon { display: none; }
.pick-topbar-kebab { display: none; }
.pick-topbar-mobile-info { display: none; }
.pick-topbar-mobile-only { display: none !important; }
.pick-topbar-pause-form { display: inline; margin: 0; }

@media (max-width: 768px) {
  /* Full-bleed engine container — full screen width, no padding so
     pick-card extends wall-to-wall. Width is explicitly set so the
     container does not reflow when internal content (qty counter etc.)
     changes size. */
  .picking-engine {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  .picking-engine > #pick-engine-error {
    margin: 8px; border-radius: var(--radius);
  }

  /* Topbar: single compact row */
  .pick-topbar-desktop { display: none !important; }
  .pick-topbar-icon { display: inline-block; vertical-align: -3px; }
  .pick-topbar-label { display: none; }
  .pick-topbar-kebab { display: inline-block; }
  .pick-topbar-mobile-info { display: block !important; font-weight: 600; font-size: 13px; color: var(--text); pointer-events: none; }
  .pick-topbar-mobile-only { display: block !important; }

  .picking-engine-topbar .toolbar-row { padding: 8px 12px; gap: 8px; }
  .picking-engine-topbar__progress { font-size: 15px; font-weight: 700; color: var(--text); }
  .picking-engine-topbar__tabs { gap: 2px; }
  .picking-engine-topbar__tabs .btn-compact { padding: 6px 10px; min-width: 0; }
  .pick-topbar-pause-form { display: none !important; }
  .pick-topbar-more-btn { padding: 6px 8px; min-width: 0; }
  .pick-topbar-more-btn::after { display: none; }

  /* Pick card: compact product section */
  .pick-card { border-radius: 0; border-left: none; border-right: none; }
  .pick-card__product-hero-image {
    max-height: 140px;
    aspect-ratio: 16/9;
  }
  .pick-card__product-info { padding: 12px 16px; }
  .pick-card__sku { font-size: 22px; }
  .pick-card__product-title { font-size: 13px; }

  /* Pick card: smaller quantity display */
  .pick-card__quantities { padding: 12px 16px; }
  .pick-card__qty-block--scanned .pick-card__qty-value,
  .pick-card__qty-block--primary .pick-card__qty-value {
    font-size: 40px;
  }
  .pick-card__qty-separator { font-size: 24px; }

  /* Pick card: compact actions */
  .pick-card__actions { padding: 12px 16px; }
  .pick-card__confirm-btn { padding: 14px 16px; font-size: 16px; }

  /* Pick card: icon-only secondary actions */
  .pick-card__undo-btn { font-size: 0; gap: 0; padding: 8px; }
  .pick-card__undo-btn svg { width: 18px; height: 18px; }
  .pick-card__overflow-trigger { font-size: 0; gap: 0; padding: 8px; }
  .pick-card__overflow-trigger svg { width: 18px; height: 18px; }

  /* Pick card: inline cart tote into qty row */
  .pick-card__cart-destination {
    padding: 8px 16px;
    font-size: 13px;
    gap: 8px;
    border-left-width: 4px;
  }
  .pick-card__cart-bin-chip { font-size: 16px; padding: 2px 8px; }

  /* Pick card: tighter detail rows */
  .pick-card__more-details-trigger { padding: 8px 16px; }
  .pick-card__more-details-body { padding: 0 16px 10px; }
  .pick-card__location { padding: 10px 16px; }
  .pick-card__bin-code { font-size: 18px; }

  /* Pick list: full-bleed rows */
  .pick-list__item { padding: 10px 12px; gap: 10px; }
  .pick-list__item--current { padding-left: 8px; }
  .pick-list__bin-header { padding: 6px 12px; }
  .pick-list__thumb { width: 44px; height: 44px; }
  .pick-list__pick-value { font-size: 20px; }
  .pick-list__product-name { font-size: 13px; }

  /* Navigation interstitial: tighter (card mode only) */
  .nav-interstitial:not(.nav-interstitial--fullscreen) { padding: 40px 16px 30px; }
  .nav-interstitial__map { max-width: 100%; height: 150px; }
  .nav-interstitial__bottom-overlay { padding: 16px 16px 24px; }
  .nav-interstitial__bottom-hero { font-size: 42px; }
  .nav-interstitial__bottom-sub { font-size: 22px; }

  /* Voice bar → floating mic FAB */
  .voice-control-bar:not(.voice-control-bar--in-route-panel) {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 100;
    border: none;
    border-radius: 50%;
    padding: 0;
    width: auto;
    background: transparent;
    box-shadow: none;
    gap: 0;
  }
  .voice-control-bar:not(.voice-control-bar--in-route-panel) .voice-control-bar__info,
  .voice-control-bar:not(.voice-control-bar--in-route-panel) .voice-control-bar__right {
    display: none;
  }
  .voice-control-bar:not(.voice-control-bar--in-route-panel) .voice-mic-btn {
    width: 56px; height: 56px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  }

  /* Voice bar inside route panel stays full-width but compact */
  .voice-control-bar--in-route-panel .voice-control-bar__right { flex-wrap: wrap; gap: 4px; }
  .voice-control-bar--in-route-panel .voice-speed-control { display: none; }
}

/* Tablet (iPad portrait) — touch-first, wider card */
@media (min-width: 769px) and (max-width: 1024px) and (pointer: coarse) {
  .picking-engine { max-width: min(90vw, 800px); padding: 12px; }
  .pick-card__product-hero-image { max-height: 180px; }
  .pick-card__qty-block--scanned .pick-card__qty-value,
  .pick-card__qty-block--primary .pick-card__qty-value {
    font-size: 48px;
  }
}

/* ── End Workflow ─────────────────────────────────────────────────────── */
.end-workflow {
  max-width: 700px; margin: 0 auto; padding: 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.end-workflow__quarantine-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.end-workflow__quarantine-row:last-child { border-bottom: none; }
.end-workflow__quarantine-info { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Picking Policy UI ───────────────────────────────────────────────── */
.ppv2-page { max-width: 900px; margin: 0 auto; padding: 24px; }
.ppv2-shell { display: flex; gap: 24px; }
.ppv2-main { flex: 1; display: flex; flex-direction: column; gap: 24px; }

.ppv2-section { background: var(--panel); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
.ppv2-section__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--soft); }
.ppv2-section__title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0; }
.ppv2-section__rows { display: flex; flex-direction: column; }

.ppv2-row { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); gap: 12px; transition: background 0.15s; }
.ppv2-row:last-child { border-bottom: none; }
.ppv2-row--saved { background: #f0fdf4; }
.ppv2-row--error { background: #fff5f5; }
.ppv2-row__main { flex: 1; display: flex; align-items: center; gap: 16px; }
.ppv2-row__label-wrap { flex: 1; }
.ppv2-row__label { font-size: 14px; font-weight: 500; }
.ppv2-row__hint { font-size: 12px; margin-top: 2px; }
.ppv2-row__control-wrap { width: 180px; flex-shrink: 0; }
.ppv2-row__control { width: 100%; }
.ppv2-row__meta { display: flex; gap: 8px; flex-shrink: 0; }
.ppv2-row__chip { font-size: 11px; padding: 2px 8px; border-radius: 10px; text-decoration: none; }
.ppv2-row__chip--overrides { background: var(--accent-weak); color: var(--accent); }

.ppv2-rules { background: var(--panel); border-radius: var(--radius); border: 1px solid var(--line); padding: 20px; }
.ppv2-rules__header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 16px; }
.ppv2-rules__title { font-size: 15px; font-weight: 700; margin: 0; }
.ppv2-rules__sub { font-size: 13px; margin-top: 4px; }

.ppv2-rules__scope-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ppv2-scope-pill {
  padding: 4px 12px; border-radius: 14px; font-size: 12px; font-weight: 500;
  background: var(--soft); border: 1px solid var(--line); cursor: pointer; color: var(--muted);
}
.ppv2-scope-pill--active { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }

.ppv2-rules__cards { display: flex; flex-direction: column; gap: 12px; }
.ppv2-rule-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.ppv2-rule-card__header { display: flex; align-items: center; gap: 8px; }
.ppv2-rule-card__scope { display: flex; align-items: center; gap: 8px; }
.ppv2-rule-card__scope-target { font-weight: 600; font-size: 14px; }
.ppv2-rule-card__deltas { display: flex; flex-direction: column; gap: 4px; padding-left: 8px; border-left: 3px solid var(--line); }
.ppv2-rule-card__delta { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ppv2-rule-card__rule-type { font-size: 12px; }
.ppv2-rule-card__rule-value { font-family: ui-monospace, monospace; background: var(--soft); padding: 1px 6px; border-radius: 4px; }
.ppv2-rule-card__remove { color: var(--muted); font-size: 11px; margin-left: auto; }
.ppv2-rules__zero { padding: 24px; text-align: center; }

.ppv2-automations { background: var(--panel); border-radius: var(--radius); border: 1px solid var(--line); padding: 20px; }
.ppv2-automations__list { display: flex; flex-direction: column; gap: 12px; }
.ppv2-automation-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 12px; align-items: start;
}
.ppv2-automation-card__type { }
.ppv2-automation-card__when, .ppv2-automation-card__then { font-size: 13px; }
.ppv2-automation-card__label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.ppv2-automation-card__actions { display: flex; gap: 4px; align-items: center; }
.ppv2-automations__zero { padding: 24px; text-align: center; }

/* Condition builder */
.picking-condition-builder { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.picking-condition-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.picking-condition-row select, .picking-condition-row input { flex: 1; }
.picking-condition-builder__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* Conditions summary in automation cards */
.conditions-summary { font-size: 13px; display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.conditions-summary__rule { background: var(--soft); padding: 2px 6px; border-radius: 4px; }
.conditions-summary__op { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; }

/* ── Pick Route Mini Map ──────────────────────────────────────────────── */
.pick-route-map-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); margin-top: 16px; overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pick-route-map-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.pick-route-map-panel__canvas { padding: 0; background: var(--bg-secondary, #f1f5f9); }

/* Full-screen floor plan (opened from guided pick). */
dialog.pick-route-map-dialog {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

dialog.pick-route-map-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
}

.pick-route-map-dialog__surface {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--panel);
}

.pick-route-map-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.pick-route-map-dialog__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.pick-route-map-dialog__header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.pick-route-map-dialog__close {
  flex-shrink: 0;
}

.pick-route-map-dialog__body {
  flex: 1;
  min-height: 0;
  background: var(--bg-secondary, #f1f5f9);
}

.pick-route-map-dialog__scene-host {
  width: 100%;
  height: 100%;
  min-height: min(480px, 70vh);
}

.pick-route-map-dialog__stage {
  width: 100%;
  height: 100%;
}

/* ── Batch Detail Page ────────────────────────────────────────────────── */

.batch-detail__layout.detail-layout {
  grid-template-columns: minmax(0, 1fr) 300px;
  padding: 0;
}
@media (max-width: 900px) {
  .batch-detail__layout.detail-layout {
    grid-template-columns: 1fr;
  }
}

.batch-detail__breakdown-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.batch-detail__progress-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-3);
  margin-top: 12px;
}
.batch-detail__progress-seg--picked  { background: var(--success); }
.batch-detail__progress-seg--short   { background: var(--warning); }
.batch-detail__progress-seg--skipped { background: var(--surface-4, #cbd5e1); }

.batch-detail__filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 16px 12px;
}

/* Inline map in Route Map tab */
.batch-detail__map-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.batch-detail__map-canvas {
  background: var(--bg-secondary, #f1f5f9);
  min-height: min(480px, 60vh);
  position: relative;
}
.batch-detail__map-stage {
  width: 100%;
  height: 100%;
  min-height: min(480px, 60vh);
}

/* Task row styles */
.task-row__position { font-size: 13px; }
.task-row__variant {
  display: flex;
  align-items: center;
  gap: 10px;
}
.task-row__thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.task-row__thumb-placeholder {
  width: 32px;
  height: 32px;
  background: var(--surface-3);
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-muted);
}
.task-row__exception-note { max-width: 160px; }
.task-row__time { font-size: 12px; white-space: nowrap; }

/* Timeline event rows */
.timeline-event {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-3);
}
.timeline-event:last-child { border-bottom: none; }
.timeline-event__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.timeline-event__body {
  flex: 1;
  min-width: 0;
}
.timeline-event__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.timeline-event__label { font-size: 13px; }
.timeline-event__actor { font-size: 12px; }
.timeline-event__time {
  font-size: 12px;
  margin-left: auto;
  flex-shrink: 0;
}
.timeline-event__meta {
  font-size: 12px;
  margin-top: 2px;
}

/* ── Print Jobs Header Popover ─────────────────────────────────────────── */
.header-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: transparent; cursor: pointer; color: #fff;
  position: relative; flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.header-icon-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.header-icon-btn.is-active { background: rgba(255,255,255,.2); color: #fff; }
.header-icon-btn svg { width: 20px; height: 20px; pointer-events: none; }

.pj-popover-wrap { position: relative; }

.pj-badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 16px; height: 16px; padding: 0 3px;
  background: #f59e0b; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px;
  border-radius: 8px; text-align: center;
  pointer-events: none;
  border: 1.5px solid var(--header-bg, #1e293b);
}
.pj-badge--failed { background: var(--danger, #ef4444); }

.pj-popover {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 360px; background: var(--panel, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 600; overflow: hidden;
}
.pj-popover-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line, #e2e8f0);
}
.pj-popover-title { font-weight: 600; font-size: 14px; }
.pj-popover-header-actions { display: flex; align-items: center; gap: 10px; }
.pj-popover-view-all { font-size: 12px; color: var(--accent, #6366f1); text-decoration: none; }
.pj-popover-view-all:hover { text-decoration: underline; }
.pj-popover-settings-btn {
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-muted, #94a3b8); border-radius: 5px; padding: 3px;
  transition: color 0.12s, background 0.12s;
}
.pj-popover-settings-btn:hover { color: var(--fg, #1e293b); background: var(--soft, #f1f5f9); }

.pj-popover-body { max-height: 360px; overflow-y: auto; }
.pj-popover-loading {
  padding: 20px; text-align: center;
  color: var(--fg-muted, #94a3b8); font-size: 13px;
}
.pj-popover-empty {
  padding: 24px; text-align: center;
  color: var(--fg-muted, #94a3b8); font-size: 13px;
}
.pj-popover-error { color: var(--danger, #ef4444); }

.pj-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--line, #e2e8f0);
}
.pj-item:last-child { border-bottom: none; }

.pj-item-status {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
}
.pj-status--queued, .pj-status--printing {
  background: #fef9c3; color: #854d0e;
}
.pj-status--success { background: #dcfce7; color: #166534; }
.pj-status--failed  { background: #fee2e2; color: #991b1b; }

.pj-item-body   { flex: 1; min-width: 0; }
.pj-item-title  { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pj-item-type   { font-size: 13px; font-weight: 600; color: var(--fg, #1e293b); }
.pj-item-record { font-size: 12px; color: var(--fg-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.pj-item-meta   { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--fg-muted, #94a3b8); margin-top: 2px; }
.pj-item-sep    { opacity: 0.5; }
.pj-item-error  { display: block; font-size: 11px; color: var(--danger, #ef4444); margin-top: 2px; }

/* ── Printer Settings page ─────────────────────────────────────────────── */
.printer-settings-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.printer-settings-tab {
  padding: 6px 14px; border-radius: 20px; font-size: 13px;
  font-weight: 500; text-decoration: none; transition: all 0.12s;
  border: 1px solid var(--line, #e2e8f0);
  color: var(--fg-secondary, #475569);
  background: var(--panel, #fff);
}
.printer-settings-tab:hover  { background: var(--soft, #f8fafc); color: var(--fg, #1e293b); }
.printer-settings-tab.is-active {
  background: var(--accent, #6366f1); color: #fff;
  border-color: transparent;
}

.printer-settings-grid { }
.printer-settings-grid-header {
  display: grid; grid-template-columns: 200px 1fr; gap: 12px;
  padding: 8px 20px; background: var(--soft, #f8fafc);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-muted, #94a3b8);
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.printer-settings-grid-header:has(span:nth-child(3)) {
  grid-template-columns: 200px 1fr 180px;
}
.printer-settings-grid-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 12px;
  padding: 10px 20px; border-bottom: 1px solid var(--line, #e2e8f0);
  align-items: center;
}
.printer-settings-grid-row:last-child { border-bottom: none; }
.printer-settings-grid-row:has(.muted:nth-child(3)) {
  grid-template-columns: 200px 1fr 180px;
}
.printer-settings-purpose-label { font-size: 13px; font-weight: 500; }
.printer-settings-select-wrap { display: flex; align-items: center; gap: 10px; }
.printer-settings-select-wrap select { flex: 1; max-width: 280px; }
.printer-settings-saved-indicator {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--success-fg, #16a34a);
  white-space: nowrap;
}
.printer-settings-saved-indicator.is-error { color: var(--danger, #ef4444); }

/* ── 3-column grid variant for location/station/user overrides ── */
.printer-settings-grid--3col .printer-settings-grid-header {
  grid-template-columns: 200px 1fr 180px;
}
.printer-settings-grid--3col .printer-settings-grid-row {
  grid-template-columns: 200px 1fr 180px;
}

/* ── Station printer panels ──────────────────────────────────── */
.printer-settings-section-header {
  display: flex; align-items: baseline; gap: 12px;
  margin: 24px 0 12px;
  flex-wrap: wrap;
}
.printer-settings-section-title {
  font-size: 16px; font-weight: 600; color: var(--fg, #1e293b);
  margin: 0;
}
.printer-settings-section-desc {
  flex: 1; font-size: 13px; margin: 0;
}
.printer-station-panel {
  margin-bottom: 12px;
}
.printer-station-panel-header {
  display: flex; align-items: center; justify-content: space-between;
}
.printer-station-name {
  font-size: 14px; font-weight: 600; margin: 0 0 2px;
  color: var(--fg, #1e293b);
}
.printer-station-kind-badge {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em;
  color: #059669; background: #ecfdf5; border: 1px solid #a7f3d0;
  border-radius: 4px; padding: 1px 6px;
}

/* ── Inline printer picker bar ─────────────────────────────────────────── */
.printer-picker-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--soft, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 8px);
  font-size: 13px;
}
.printer-picker-label {
  display: flex; align-items: center; gap: 5px;
  color: var(--fg-muted, #64748b); flex-shrink: 0;
}
.printer-picker-device { font-weight: 600; color: var(--fg, #1e293b); }
.printer-picker-device--none { font-weight: 400; color: var(--fg-muted, #94a3b8); font-style: italic; }
.printer-picker-details { position: relative; margin-left: auto; }
.printer-picker-change-btn {
  padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--line, #e2e8f0);
  background: var(--panel, #fff); font-size: 12px;
  cursor: pointer; color: var(--fg, #1e293b);
  list-style: none; user-select: none;
}
.printer-picker-change-btn::marker,
.printer-picker-change-btn::-webkit-details-marker { display: none; }
.printer-picker-change-btn:hover { background: var(--soft, #f1f5f9); }

.printer-picker-dropdown {
  position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 280px; width: max-content; max-width: min(380px, 90vw);
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 500; padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.printer-picker-search-wrap {
  padding: 8px 8px 4px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  flex-shrink: 0;
}
.printer-picker-search {
  width: 100%; padding: 6px 10px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px; font-size: 12px;
  background: var(--panel, #fff);
  color: var(--fg, #1e293b);
  outline: none;
}
.printer-picker-search:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.printer-picker-search::placeholder {
  color: var(--fg-muted, #94a3b8);
}
.printer-picker-scroll {
  max-height: 260px; overflow-y: auto;
  padding: 4px 0;
  overscroll-behavior: contain;
}
.printer-picker-group-label {
  padding: 6px 12px 2px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--fg-muted, #94a3b8);
}
.printer-picker-option {
  display: flex; align-items: flex-start; flex-direction: column; gap: 2px;
  width: 100%; padding: 7px 14px; border: none; background: transparent;
  font-size: 13px; color: var(--fg, #1e293b); cursor: pointer; text-align: left;
}
.printer-picker-option:hover { background: var(--soft, #f8fafc); }
.printer-picker-option.is-selected { font-weight: 600; }
.printer-picker-option[hidden] { display: none; }
.printer-picker-option-name {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
}
.printer-picker-check { flex-shrink: 0; margin-left: auto; }
.printer-picker-station-badges {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.printer-picker-station-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 16px;
  white-space: nowrap;
}
.printer-picker-empty {
  padding: 16px 14px; text-align: center;
  font-size: 12px; color: var(--fg-muted, #94a3b8);
}
.printer-picker-empty[hidden] { display: none; }


/* ── Print Button (.pb-*) ────────────────────────────────────────────── */
/* Reusable split print button: main action left, chevron right, flyout below. */

.pb-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}

.pb-split {
  display: flex;
  align-items: stretch;
}

.pb-split .pb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pb-split .pb-main-btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  padding-right: 12px;
  flex: 1 0 auto;
}

.pb-split .pb-chevron-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
  padding: 0 8px;
  flex-shrink: 0;
}

.pb-split .pb-chevron-btn.is-active svg {
  transform: rotate(180deg);
}

.pb-split .pb-btn.is-loading {
  pointer-events: none;
  opacity: 0.65;
}

/* Small variant for topbar use */
.pb-wrap--sm .pb-main-btn {
  font-size: 13px;
  padding: 5px 10px;
  height: 30px;
}
.pb-wrap--sm .pb-chevron-btn {
  height: 30px;
  padding: 0 7px;
}

/* Icon-only variant — printer icon with no text label */
.pb-wrap--icon-only .pb-main-btn {
  padding-left: 8px;
  padding-right: 8px;
  gap: 0;
}
.pb-wrap--icon-only .pb-main-btn svg {
  width: 15px;
  height: 15px;
}
.pb-wrap--icon-only.pb-wrap--sm .pb-main-btn {
  padding: 5px 7px;
}

/* ── Flyout panel ────────────────────────────────────────────────────── */

.pb-flyout {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 520;
  width: min(380px, calc(100vw - 24px));
  max-width: calc(100vw - 16px);
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0;
}

.pb-flyout[hidden] { display: none; }

/* ── Flyout rows — compact label + value on one line ─────────────────── */

.pb-flyout-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-light, #f1f5f9);
  min-height: 40px;
}

.pb-row-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted, #64748b);
  flex-shrink: 0;
  min-width: 56px;
}

.pb-row-value {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* ── Printer row ─────────────────────────────────────────────────────── */

.pb-printer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.pb-printer-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg, #1e293b);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-printer-name--none {
  font-weight: 400;
  color: var(--fg-muted, #94a3b8);
  font-style: italic;
}

.pb-change-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent, #6366f1);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.pb-change-link:hover {
  text-decoration: underline;
}

/* ── Inline printer picker list (expands inside flyout) ──────────────── */

.pb-printer-list {
  border-bottom: 1px solid var(--line-light, #f1f5f9);
  background: var(--soft, #fafbfc);
}
.pb-printer-list[hidden] { display: none; }

.pb-printer-search-wrap {
  padding: 8px 10px 6px;
}

.pb-printer-search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px;
  font-size: 12px;
  background: var(--panel, #fff);
  color: var(--fg, #1e293b);
  outline: none;
}
.pb-printer-search:focus {
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.pb-printer-search::placeholder {
  color: var(--fg-muted, #94a3b8);
}

.pb-printer-scroll {
  max-height: 200px;
  overflow-y: auto;
  padding: 2px 0 4px;
  overscroll-behavior: contain;
}

.pb-printer-group {
  padding: 6px 12px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-muted, #94a3b8);
}
.pb-printer-group[hidden] { display: none; }

.pb-printer-option {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 6px 14px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--fg, #1e293b);
  cursor: pointer;
  text-align: left;
}
.pb-printer-option:hover { background: var(--panel, #fff); }
.pb-printer-option.is-selected { font-weight: 600; }
.pb-printer-option[hidden] { display: none; }

.pb-printer-option-name {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.pb-printer-check {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--accent, #6366f1);
}

.pb-printer-station-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pb-printer-station-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 16px;
  white-space: nowrap;
}

.pb-printer-empty {
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--fg-muted, #94a3b8);
}
.pb-printer-empty[hidden] { display: none; }

/* ── Template select ─────────────────────────────────────────────────── */

.pb-template-select {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px;
  font-size: 12px;
  background: var(--panel, #fff);
  color: var(--fg, #1e293b);
  appearance: auto;
  cursor: pointer;
}
.pb-template-select:focus {
  outline: none;
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

/* ── Copies stepper ──────────────────────────────────────────────────── */

.pb-copies-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px;
  overflow: hidden;
}

.pb-stepper-btn {
  width: 30px;
  height: 28px;
  border: none;
  background: var(--soft, #f8fafc);
  color: var(--fg, #1e293b);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
  flex-shrink: 0;
}
.pb-stepper-btn:hover { background: var(--line, #e2e8f0); }
.pb-stepper-btn:active { background: #d1d5db; }

.pb-copies-input {
  width: 36px;
  height: 28px;
  border: none;
  border-left: 1px solid var(--line, #e2e8f0);
  border-right: 1px solid var(--line, #e2e8f0);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg, #1e293b);
  background: var(--panel, #fff);
  outline: none;
  -moz-appearance: textfield;
}
.pb-copies-input::-webkit-inner-spin-button,
.pb-copies-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Footer ──────────────────────────────────────────────────────────── */

.pb-flyout-persist {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--fg-muted, #64748b);
  cursor: pointer;
  user-select: none;
}

.pb-flyout-persist input {
  margin-top: 2px;
  flex-shrink: 0;
}

.pb-flyout-persist span {
  min-width: 0;
}

.pb-flyout-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-light, #f1f5f9);
}

.pb-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fg-muted, #64748b);
  font-size: 13px;
}
.pb-preview-btn:hover { color: var(--fg, #1e293b); }

.pb-flyout-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}
.pb-flyout-print-btn.is-loading {
  pointer-events: none;
  opacity: 0.65;
}

/* ── Inline status ───────────────────────────────────────────────────── */

.pb-flyout-status {
  padding: 0 14px 10px;
}
.pb-flyout-status[hidden] { display: none; }

.pb-status {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
}
.pb-status--success {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.pb-status--error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* ── Preview dialog ──────────────────────────────────────────────────── */

dialog.pb-preview-dialog {
  padding: 0;
  border: none;
  border-radius: var(--radius, 8px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
  background: var(--panel, #fff);
  overflow: hidden;
  max-width: 90vw;
  max-height: 90vh;
}

dialog.pb-preview-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

/* Let long labels / letter pages scroll inside the dialog instead of clipping at 90vh. */
.pb-preview-content.modal-content {
  padding: 0;
  width: min(720px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.pb-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  flex-shrink: 0;
}

.pb-preview-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg, #1e293b);
  margin: 0;
}

.pb-preview-body {
  position: relative;
  background: #f1f5f9;
  padding: 24px;
  min-width: 280px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(90vh - 130px);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.pb-preview-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--fg-muted, #64748b);
  z-index: 1;
  background: #f1f5f9;
}
.pb-preview-loading[hidden] { display: none; }

.pb-preview-iframe {
  display: block;
  border: none;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.pb-preview-iframe.is-loaded {
  opacity: 1;
}

.pb-preview-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line, #e2e8f0);
  flex-shrink: 0;
}
.pb-preview-footer-spacer { flex: 1; }


/* ── Responsive / iPad layout ────────────────────────────────────────── */

/* Tablet portrait: fill the available width with a small gutter each side.
   On a phone-sized tablet or large phone in landscape this gives close to
   full-screen width while remaining readable on wider tablets. */
@media (min-width: 640px) and (max-width: 1023px) {
  .picking-engine {
    max-width: min(92vw, 800px);
    padding: 24px 20px;
  }
}

/* Large screens: keep a single centered column; pick card stays readable. */
@media (min-width: 1024px) {
  .picking-engine {
    max-width: 640px;
    padding: 28px 24px;
  }

  .pick-card__confirm-btn { font-size: 19px; padding: 18px 24px; }
}


/* ── Channel-rules cards ─────────────────────────────────── */

/* Integration group wraps the header + all its channel location cards */
.cr-integration-group {
  margin-bottom: 20px;
  overflow: hidden;
}
.cr-integration-group > .panel-header {
  border-bottom: 1px solid var(--border);
}

/* Nested cards live inside the integration group */
.cr-nested-card {
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  margin: 0 16px 12px;
  background: var(--surface, #fff);
}
.cr-nested-card[open] {
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.cr-card {
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--surface, #fff);
  margin-bottom: 12px;
}
.cr-card[open] {
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.cr-card__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.cr-card__summary::-webkit-details-marker { display: none; }
.cr-card__summary::marker { content: ""; }

.cr-card__summary-main { flex: 1; min-width: 0; }

.cr-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15px;
}
.cr-card__meta {
  font-size: 13px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-card__toggle {
  font-size: 13px;
  flex-shrink: 0;
}
.cr-card[open] .cr-card__toggle { display: none; }

.cr-card__body {
  border-top: 1px solid var(--border);
  padding: 4px 0 0;
}

/* Sections inside a card */
.cr-section {
  padding: 12px 20px 16px;
}
.cr-section h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

/* Role radio group */
.cr-role-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cr-role-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: border-color 0.15s;
}
.cr-role-option:hover {
  border-color: var(--accent, #4f6ef7);
}
.cr-role-option:has(input:checked) {
  border-color: var(--accent, #4f6ef7);
  background: var(--surface-accent, rgba(79, 110, 247, 0.04));
}
.cr-role-option input[type="radio"] { margin-top: 3px; }
.cr-role-option span { display: flex; flex-direction: column; gap: 2px; }
.cr-role-option strong { font-size: 14px; }
.cr-role-option .muted { font-size: 13px; }

/* Advanced toggle */
.cr-advanced {
  margin: 0 20px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
}
.cr-advanced__toggle {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cr-advanced__toggle::-webkit-details-marker { display: none; }
.cr-advanced__toggle::marker { content: ""; }
.cr-advanced__body {
  padding: 4px 14px 14px;
}

/* Source warehouse checkboxes */
.cr-sources-section {
  border-top: 1px solid var(--border);
}
.cr-source-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.cr-source-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  cursor: pointer;
}
.cr-source-item:has(input:checked) {
  border-color: var(--accent, #4f6ef7);
  background: var(--surface-accent, rgba(79, 110, 247, 0.04));
}
.cr-source-item input[type="checkbox"] { margin-top: 3px; }
.cr-source-item strong { font-size: 14px; }

/* Summary section */
.cr-summary-section {
  border-top: 1px solid var(--border);
  background: var(--surface-muted, #fafafa);
  border-radius: 0 0 var(--radius, 8px) var(--radius, 8px);
}

/* Pause toggle */
.cr-pause-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.cr-pause-toggle span { display: flex; flex-direction: column; gap: 2px; }
.cr-pause-toggle strong { font-size: 14px; }
.cr-pause-toggle .muted { font-size: 13px; }

/* Source item origin badges */
.cr-source-item__label {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.cr-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cr-source-badge--in-pilot {
  background: var(--surface-muted, #f3f4f6);
  color: var(--text-muted, #6b7280);
  border: 1px solid var(--border);
}

/* Remote sales-channel location (ChannelLocation row header) */
.cr-remote-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

/* ════════════════════════════════════════════════════════════════════════
   INVENTORY SOURCE (Location edit page) — prefix: isrc-
   ════════════════════════════════════════════════════════════════════════ */

.isrc-body {
  padding: 16px 20px;
}
.isrc-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.isrc-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: border-color 0.15s;
}
.isrc-option:hover {
  border-color: var(--accent, #4f6ef7);
}
.isrc-option:has(input:checked) {
  border-color: var(--accent, #4f6ef7);
  background: var(--surface-accent, rgba(79, 110, 247, 0.04));
}
.isrc-option input[type="radio"] { margin-top: 3px; }
.isrc-option span { display: flex; flex-direction: column; gap: 2px; }
.isrc-option strong { font-size: 14px; }
.isrc-option .muted { font-size: 13px; }

.isrc-channel-panel {
  padding: 4px 0 0;
}
.isrc-channel-panel .form-field {
  max-width: 400px;
}
.isrc-adjustments-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--surface-raised, #f8f9fa);
  cursor: pointer;
}
.isrc-adjustments-toggle input[type="checkbox"] { margin-top: 3px; }
.isrc-adjustments-toggle span { display: block; line-height: 1.4; }
.isrc-adjustments-toggle strong { display: block; font-size: 14px; }
.isrc-adjustments-toggle .muted { font-size: 13px; }
.isrc-master-hint {
  padding: 4px 0 0;
}

/* ════════════════════════════════════════════════════════════════════════
   INVENTORY SYNC PAGE (redesigned) — prefix: sync-
   ════════════════════════════════════════════════════════════════════════ */

.sync-group {
  overflow: visible;
}
.sync-group > .panel-header {
  border-bottom: none;
  padding-bottom: 4px;
}
.sync-group__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px 20px;
}

.sync-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--surface, #fff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.sync-card[open] {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sync-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface-muted, #fafafa);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sync-card__header::-webkit-details-marker { display: none; }
.sync-card__header::marker { content: ""; }
.sync-card__header-main { flex: 1; min-width: 0; }

.sync-card__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  opacity: 0.4;
  transition: transform 0.15s;
}
.sync-card__chevron::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
.sync-card[open] .sync-card__chevron::before {
  transform: rotate(45deg);
  top: 4px;
}

.sync-card__body {
  border-top: 1px solid var(--border);
}

.sync-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  margin-bottom: 6px;
}
.sync-card__direction {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  flex-wrap: wrap;
}
.sync-card__direction--inbound {
  color: var(--text-muted, #6b7280);
}
.sync-card__direction--outbound {
  color: var(--text-muted, #6b7280);
}
.sync-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.sync-card__direction--inbound .sync-arrow {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}
.sync-card__direction--outbound .sync-arrow {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.sync-card__import-info {
  padding: 16px 20px;
  background: #eff6ff;
  border-bottom: 1px solid #bfdbfe;
}
.sync-card__import-info p { margin: 0; font-size: 13px; color: #1e40af; }
.sync-card__import-info a { color: #1d4ed8; text-decoration: underline; }

.sync-card__section {
  padding: 16px 20px;
}
.sync-card__section + .sync-card__section {
  border-top: 1px solid var(--border);
}
.sync-card__section h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.sync-publish-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sync-publish-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: border-color 0.15s;
}
.sync-publish-option:hover {
  border-color: var(--accent, #4f6ef7);
}
.sync-publish-option:has(input:checked) {
  border-color: var(--accent, #4f6ef7);
  background: var(--surface-accent, rgba(79, 110, 247, 0.04));
}
.sync-publish-option input[type="radio"] { margin-top: 3px; }
.sync-publish-option span { display: flex; flex-direction: column; gap: 2px; }
.sync-publish-option strong { font-size: 14px; }
.sync-publish-option .muted { font-size: 13px; }

.sync-source-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sync-source-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: border-color 0.15s;
}
.sync-source-item:hover {
  border-color: var(--accent, #4f6ef7);
}
.sync-source-item:has(input:checked) {
  border-color: var(--accent, #4f6ef7);
  background: var(--surface-accent, rgba(79, 110, 247, 0.04));
}
.sync-source-item input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.sync-source-item__label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sync-source-item strong { font-size: 14px; }

.sync-card__advanced {
  margin: 0 20px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
}
.sync-advanced-toggle {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sync-advanced-toggle::-webkit-details-marker { display: none; }
.sync-advanced-toggle::marker { content: ""; }
.sync-advanced-body {
  padding: 4px 14px 14px;
}

.sync-pause-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.sync-pause-toggle span { display: flex; flex-direction: column; gap: 2px; }
.sync-pause-toggle strong { font-size: 14px; }
.sync-pause-toggle .muted { font-size: 13px; }

.sync-card__summary {
  padding: 12px 20px;
  background: var(--surface-muted, #fafafa);
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.sync-card__summary p { margin: 0; }
.sync-card__summary--warn {
  color: var(--warn, #b45309);
}

.sync-card__actions {
  padding: 12px 20px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
}

.sync-card__footer {
  padding: 8px 20px;
  font-size: 12px;
}

/* Inventory routing (Settings → Inventory routing) — prefix: inv-route- */
.inv-route-show {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.inv-route-status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  margin-bottom: 0;
}
.inv-route-status-strip__main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.inv-route-status-strip__label {
  font-weight: 600;
  font-size: 14px;
}
.inv-route-issues-panel__body,
.inv-route-summary__issues,
.inv-route-card__issues,
.inv-route-location-panel__issues {
  padding: 0 20px 16px;
}
.inv-route-issues {
  padding: 12px 14px;
  border-radius: var(--radius, 8px);
  font-size: 13px;
}
.inv-route-issues--error {
  background: var(--danger-surface, #fef2f2);
  border: 1px solid var(--danger-border, #fecaca);
  color: var(--danger-text, #991b1b);
}
.inv-route-issues--warn {
  background: var(--warn-surface, #fffbeb);
  border: 1px solid var(--warn-border, #fde68a);
  color: var(--warn-text, #92400e);
}
.inv-route-issues__list {
  margin: 8px 0 0;
  padding-left: 18px;
}
.inv-route-issues__list li + li {
  margin-top: 4px;
}
.inv-route-direction__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inv-route-direction__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  cursor: pointer;
}
.inv-route-direction__option:has(input:checked) {
  border-color: var(--accent, #4f6ef7);
  background: var(--surface-accent, rgba(79, 110, 247, 0.04));
}
.inv-route-direction__option input { margin-top: 3px; }
.inv-route-direction__option span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inv-route-cards-panel .sync-group__cards {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inv-route-card--highlight {
  outline: 2px solid var(--accent, #4f6ef7);
  outline-offset: 2px;
}
.inv-route-summary__hint {
  padding: 0 20px 16px;
  margin: 0;
}
.inv-route-footnote {
  margin: 0 4px;
}
.inv-route-location-panel__group {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
.inv-route-location-panel__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.inv-route-location-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}
.inv-route-location-panel__list li {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.inv-route-location-panel__empty {
  padding: 20px 24px;
  text-align: center;
}

.sync-overrides {
  margin-bottom: 20px;
}
.sync-overrides__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sync-overrides__summary::-webkit-details-marker { display: none; }
.sync-overrides__summary::marker { content: ""; }
.sync-overrides__body {
  border-top: 1px solid var(--border);
  padding: 4px 0 0;
}

/* ════════════════════════════════════════════════════════════════════════
   OPERATIONS DASHBOARD  (op-dash)
   New cross-domain home dashboard replacing the old purchasing-only view.
   Prefix: op-dash / op-kpi / op-pipeline / op-health / op-qa / op-pstat
   ════════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────────────────── */
.op-dash {
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 768px) { .op-dash { padding: 16px; } }

/* ── Page header ──────────────────────────────────────────────────────── */
.op-dash__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.op-dash__header-left { min-width: 0; }
.op-dash__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.op-dash__loc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-weak);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.op-dash__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
}
.op-dash__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── KPI strip ────────────────────────────────────────────────────────── */
.op-dash__kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1200px) { .op-dash__kpi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .op-dash__kpi-strip { grid-template-columns: repeat(2, 1fr); } }

.op-kpi-tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
  text-decoration: none;
  color: inherit;
}
.op-kpi-tile:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  border-color: #d1d5db;
  transform: translateY(-1px);
}
.op-kpi-tile--accent  { border-left: 3px solid var(--accent); }
.op-kpi-tile--danger  { border-left: 3px solid var(--danger); background: #fef9f9; }

.op-kpi-tile__icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--soft);
  color: var(--muted);
}
.op-kpi-tile__icon--indigo { background: #e0e7ff; color: #4338ca; }
.op-kpi-tile__icon--blue   { background: #dbeafe; color: #1d4ed8; }
.op-kpi-tile__icon--green  { background: #dcfce7; color: #15803d; }
.op-kpi-tile__icon--teal   { background: #ccfbf1; color: #0d9488; }
.op-kpi-tile__icon--amber  { background: #fef3c7; color: #b45309; }
.op-kpi-tile__icon--danger { background: #fee2e2; color: #dc2626; }
.op-kpi-tile__icon--purple { background: #f3e8ff; color: #7c3aed; }

.op-kpi-tile__body { display: flex; flex-direction: column; flex: 1; }
.op-kpi-tile__value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.op-kpi-tile__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 4px;
}
.op-kpi-tile__cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
}
.op-kpi-tile__cta:hover { text-decoration: underline; }
.op-kpi-tile__cta--danger { color: var(--danger); }
.op-kpi-tile__sub-alert {
  font-size: 11px;
  font-weight: 600;
  color: #d97706;
  background: #fef3c7;
  border-radius: 4px;
  padding: 2px 6px;
  display: inline-block;
  align-self: flex-start;
}
.op-kpi-tile__badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 4px;
  padding: 2px 6px;
  display: inline-block;
  align-self: flex-start;
}
.op-kpi-tile__badge--soon {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

/* ── Heartbeat pipeline ───────────────────────────────────────────────── */
.op-dash__heartbeat {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}
.op-pipeline-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  border-right: 1px solid var(--line);
  min-width: 0;
  position: relative;
}
.op-pipeline-stage:last-child { border-right: none; }
.op-pipeline-stage:hover { background: var(--soft); }
.op-pipeline-stage--active:hover { background: #f0f7ff; }
.op-pipeline-stage--shipping { opacity: 0.6; }
.op-pipeline-stage--shipping:hover { opacity: 1; background: var(--soft); }

.op-pipeline-stage__count {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--muted);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.op-pipeline-stage__count--live {
  color: var(--accent);
}
.op-pipeline-stage__soon {
  font-size: 9px;
  font-weight: 600;
  background: #e2e8f0;
  color: #64748b;
  border-radius: 3px;
  padding: 1px 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.op-pipeline-stage__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.op-pipeline-arrow {
  color: var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Overlaps the border between stages for visual continuity */
  position: relative;
  z-index: 1;
  margin: 0 -1px;
  pointer-events: none;
}
@media (max-width: 900px) {
  .op-dash__heartbeat { overflow-x: auto; }
  .op-pipeline-stage  { min-width: 90px; }
  .op-pipeline-arrow  { display: none; }
}

/* ── Two-column mission board ─────────────────────────────────────────── */
.op-dash__board {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1100px) { .op-dash__board { grid-template-columns: 1fr; } }
.op-dash__board-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.op-dash__board-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}

/* ── Empty states ─────────────────────────────────────────────────────── */
.op-dash__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  gap: 10px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.op-dash__empty-icon {
  color: #d1d5db;
}

/* ── Skeleton shimmer (lazy-loaded panels) ───────────────────────────── */
.op-dash__skeleton {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.op-dash__skeleton-row {
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface-2, #f3f4f6) 25%, var(--surface-3, #e5e7eb) 50%, var(--surface-2, #f3f4f6) 75%);
  background-size: 200% 100%;
  animation: op-shimmer 1.4s ease-in-out infinite;
}
.op-dash__skeleton-row:nth-child(2) { width: 75%; }
.op-dash__skeleton-row:nth-child(3) { width: 55%; }
@keyframes op-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Inventory health card ────────────────────────────────────────────── */
.op-health-card__body {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px 24px 28px;
  flex-wrap: wrap;
}
.op-health-gauge {
  flex-shrink: 0;
  position: relative;
}
.op-health-gauge__ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    var(--health-color, #16a34a) 0% calc(var(--health-pct, 100) * 1%),
    #e5e7eb calc(var(--health-pct, 100) * 1%) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.op-health-gauge__inner {
  width: 88px;
  height: 88px;
  background: var(--panel);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.op-health-gauge__value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.op-health-gauge__sublabel {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.op-health-stats {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.op-health-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 0 24px;
}
.op-health-stat--divider {
  width: 1px;
  height: 36px;
  background: var(--line);
  padding: 0;
  align-self: center;
}
.op-health-stat:first-child { padding-left: 0; }
.op-health-stat__value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.op-health-stat__label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.op-health-stat--warn .op-health-stat__value { color: var(--danger); }

/* ── Exceptions feed ──────────────────────────────────────────────────── */
.op-exceptions-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.op-exception-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.op-exception-item:last-child { border-bottom: none; }
.op-exception-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.op-exception-item--warning .op-exception-item__dot { background: var(--warning); }
.op-exception-item--danger  .op-exception-item__dot { background: var(--danger); }
.op-exception-item--warning { background: #fffbeb; }
.op-exception-item--danger  { background: #fff5f5; }
.op-exception-item__body { flex: 1; min-width: 0; }
.op-exception-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-exception-item__detail {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.op-exception-item__time {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Quick actions ────────────────────────────────────────────────────── */
.op-quick-actions__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.op-qa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  text-decoration: none;
  color: inherit;
  background: var(--panel);
  transition: background 0.15s;
  text-align: center;
}
.op-qa-btn:hover { background: #f8faff; }
.op-qa-btn__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  color: var(--muted);
  transition: transform 0.15s;
}
.op-qa-btn:hover .op-qa-btn__icon { transform: scale(1.08); }
.op-qa-btn__icon--purple { background: #f3e8ff; color: #7c3aed; }
.op-qa-btn__icon--blue   { background: #dbeafe; color: #1d4ed8; }
.op-qa-btn__icon--green  { background: #dcfce7; color: #15803d; }
.op-qa-btn__icon--teal   { background: #ccfbf1; color: #0d9488; }
.op-qa-btn__icon--amber  { background: #fef3c7; color: #b45309; }
.op-qa-btn__icon--indigo { background: #e0e7ff; color: #4338ca; }
.op-qa-btn__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

/* ── Purchasing summary sidebar panel ─────────────────────────────────── */
.op-purchasing-summary__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.op-pstat {
  background: var(--panel);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.op-pstat__value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.op-pstat__value--danger { color: var(--danger); }
.op-pstat__value--warn   { color: #d97706; }
.op-pstat__value--ok     { color: var(--ink); }
.op-pstat__label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.op-pstat__change {
  font-size: 11px;
  font-weight: 600;
}
.op-pstat__change--up   { color: #16a34a; }
.op-pstat__change--down { color: var(--danger); }
.op-pstat__action {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 2px;
}
.op-purchasing-summary__approvals {
  padding: 12px 0 0;
}
.op-activity-feed .activity-feed {
  max-height: 400px;
  overflow-y: auto;
}
/* End OPERATIONS DASHBOARD */


/* ═══════════════════════════════════════════════════════════════════════════
   SHIP STATION  ·  Compact + Clean views, panel, modal, scan UI
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard container — remove .content padding/gap ────────────────── */
.content:has(.ship-dashboard) {
  padding: 0;
  gap: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.main:has(.ship-dashboard) {
  height: calc(100vh - 48px);
  overflow: hidden;
}
.ship-dashboard {
  padding: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ship-dashboard .data-table tbody td {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ── Outer shell: sidebar runs full viewport height ──────────────────── */
.ss-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.ss-shell > turbo-frame {
  display: contents;
}

/* ── Turbo Frame loading overlay ────────────────────────────────────── *
 * display:contents hides the box, so we promote back to a real box
 * while [busy] so the ::before/::after overlay can render.            */
turbo-frame[busy]#ship_dashboard_content {
  display: flex !important;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
turbo-frame[busy]#pick_queue_content {
  display: block !important;
  position: relative;
}

turbo-frame[busy]#ship_dashboard_content::after,
turbo-frame[busy]#pick_queue_content::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  z-index: 50;
  pointer-events: none;
  animation: tf-fade-in 60ms ease-out both;
}
turbo-frame[busy]#ship_dashboard_content::before,
turbo-frame[busy]#pick_queue_content::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid var(--line, #ddd);
  border-top-color: var(--pp-accent, #4f46e5);
  border-radius: 50%;
  z-index: 51;
  animation: spin 0.7s linear infinite;
  pointer-events: none;
}

@keyframes tf-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Left sidebar (search + status nav) ────────────────────────────────── */
.ss-sidebar {
  width: 200px;
  min-width: 200px;
  border-right: 1px solid var(--pp-border);
  background: var(--pp-surface);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.ss-sidebar__search {
  padding: 8px 10px;
  border-bottom: 1px solid var(--pp-border);
}
.ss-search-wrap {
  position: relative;
}
.ss-search-wrap .input {
  width: 100%;
  font-size: 0.82rem;
  padding: 5px 10px;
  padding-right: 26px;
}
.ss-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pp-text-muted);
  padding: 2px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ss-search-clear:hover {
  color: var(--pp-text);
  background: var(--pp-surface-2);
}
.ss-nav { padding: 4px 0; flex: 1; }
.ss-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  font-size: 0.84rem;
  color: var(--pp-text);
  text-decoration: none;
  transition: background 0.1s;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.ss-nav__item:hover { background: var(--pp-surface-2); }
.ss-nav__item--active {
  background: var(--pp-accent-soft);
  border-left-color: var(--pp-accent);
  font-weight: 600;
  color: var(--pp-accent);
}
.ss-nav__count {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--pp-text-muted);
  background: var(--pp-surface-2);
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
  line-height: 18px;
}
.ss-nav__item--active .ss-nav__count {
  background: var(--pp-accent);
  color: #fff;
}
.ss-nav__group--active {
  background: var(--pp-surface-2);
}
.ss-nav__group--active > .ss-nav__item {
  border-left-color: transparent;
  background: transparent;
  color: var(--pp-text);
  font-weight: 600;
}
.ss-nav__group--active > .ss-nav__item:hover {
  background: rgba(0,0,0,0.04);
}
.ss-nav__group--active > .ss-nav__item .ss-nav__count {
  background: rgba(0,0,0,0.08);
  color: var(--pp-text-muted);
}
.ss-nav__sub {
  display: flex;
  flex-direction: column;
  padding-bottom: 2px;
}
.ss-nav__item--sub {
  padding-left: 28px;
  font-size: 0.8rem;
  color: var(--pp-text-muted);
  border-left: 3px solid transparent;
}
.ss-nav__item--sub .ss-nav__count {
  font-size: 0.7rem;
  padding: 0 6px;
  min-width: 16px;
  line-height: 16px;
}
.ss-nav__item--sub:hover {
  color: var(--pp-text);
  background: rgba(0,0,0,0.04);
}
.ss-nav__item--sub.ss-nav__item--active {
  color: var(--pp-accent);
  background: var(--pp-accent-soft);
  border-left-color: var(--pp-accent);
}
.ss-nav__divider {
  height: 1px;
  background: var(--pp-border);
  margin: 4px 14px;
}
.ss-sidebar__footer {
  padding: 10px 14px;
  border-top: 1px solid var(--pp-border);
  margin-top: auto;
}
.ss-sidebar__stat { text-align: center; }
.ss-sidebar__stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pp-text);
  display: block;
}
.ss-sidebar__stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted);
}

/* ── Right section (header + content) ──────────────────────────────────── */
.ss-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* ── Header bar (title + view toggle) ─────────────────────────────────── */
.ss-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 2px;
  background: var(--pp-surface);
  flex-shrink: 0;
  gap: 10px;
}
.ss-header__h1 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}
.ss-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ss-mobile-status-menu {
  display: none;
}
.ss-mobile-status-count {
  min-width: 22px;
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: #ede9fe;
  color: #5b21b6;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* ── Action buttons bar ────────────────────────────────────────────────── */
.ss-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  background: var(--pp-surface);
  flex-shrink: 0;
}
.ss-actions__primary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ss-actions__spacer {
  flex: 1;
  min-width: 16px;
}
.ss-reload-wrap {
  display: inline-flex;
}
.ss-reload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
}
.action-menu-caret {
  flex-shrink: 0;
  display: block;
}
.ship-ms-modal {
  width: min(1080px, 94vw);
  max-width: 1080px;
}
.ship-ms-modal .modal-titlebar {
  align-items: flex-start;
  padding: 12px 16px 8px;
}
.ship-ms-modal__header-text h2 {
  margin: 0;
  line-height: 1.25;
}
.ship-ms-modal__count {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.3;
}
.ship-ms-modal__body {
  max-height: min(60vh, 520px);
  overflow: auto;
}
.ship-ms-table__head,
.ship-ms-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(220px, 1.6fr) minmax(150px, 1fr) minmax(180px, 1.3fr);
  gap: 12px;
  align-items: start;
}
.ship-ms-table__head > *,
.ship-ms-row > * {
  min-width: 0;
}
.ship-ms-table__head {
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--pp-border);
  font-size: 11px;
  font-weight: 600;
  color: var(--pp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ship-ms-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--pp-border-subtle, var(--pp-border));
}
.ship-ms-row--blocked {
  background: var(--pp-surface-2);
  border-radius: 8px;
  padding: 12px;
  margin: 4px 0;
}
.ship-ms-row__order {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ship-ms-row__order-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.ship-ms-row__order-meta {
  font-size: 11px;
  line-height: 1.3;
}
.ship-ms-row__status {
  overflow-wrap: anywhere;
}
.ship-ms-row__message {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.ship-ms-row__ack {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
}
.ss-command {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 360px;
  max-width: 560px;
  min-width: 240px;
  height: 34px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--pp-border);
  border-radius: 999px;
  background: var(--pp-surface-2);
  color: var(--pp-text-muted);
  transition: background 0.15s var(--pp-ease), border-color 0.15s var(--pp-ease), box-shadow 0.15s var(--pp-ease);
}
.ss-command:focus-within {
  background: var(--pp-surface);
  border-color: var(--pp-accent);
  box-shadow: 0 0 0 3px var(--pp-accent-soft);
  color: var(--pp-text);
}
.ss-command__icon {
  flex-shrink: 0;
}
.ss-command__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--pp-text);
  font-size: 13px;
}
.ss-command__input::placeholder {
  color: var(--pp-text-muted);
}
.ss-command__kbd {
  flex-shrink: 0;
  padding: 2px 6px;
  border: 1px solid var(--pp-border);
  border-radius: 6px;
  background: var(--pp-surface);
  color: var(--pp-text-muted);
  font-size: 11px;
  font-weight: 600;
}

/* ── Saved-view scope tabs ───────────────────────────────────────────── */
.ss-scopes {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--pp-border);
  background: var(--pp-surface);
  flex-shrink: 0;
  overflow-x: auto;
  padding: 4px 10px 0;
}
.ss-scope {
  padding: 5px 10px;
  font-size: 0.82rem;
  color: var(--pp-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.1s, border-color 0.1s;
}
.ss-scope:hover { color: var(--pp-text); }
.ss-scope--active {
  color: var(--pp-accent);
  border-bottom-color: var(--pp-accent);
  font-weight: 600;
}

/* ── Dropdown filter row ──────────────────────────────────────────────── */
.ss-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--pp-border);
  background: var(--pp-surface-2, #fafafa);
  flex-shrink: 0;
  min-height: 42px;
}
.ss-filter-menu {
  position: relative;
  flex-shrink: 0;
}
.ss-filter-menu__trigger {
  list-style: none;
  gap: 6px;
}
.ss-filter-menu__trigger::-webkit-details-marker { display: none; }
.ss-filter-menu__trigger::marker { display: none; content: ""; }
.ss-filter-menu__count {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--pp-accent);
  color: var(--pp-surface);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.ss-filter-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 45;
  width: min(720px, calc(100vw - 260px));
  max-height: min(520px, calc(100vh - 190px));
  overflow: auto;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  box-shadow: var(--pp-shadow-lg);
}
.ss-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
  background: var(--pp-surface);
  font-size: 13px;
}
.ss-filter-label {
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  color: var(--pp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.ss-filter-dropdown {
  position: relative;
}
.ss-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.8rem;
  padding: 3px 8px;
  cursor: pointer;
  color: var(--pp-text-muted);
  border-radius: 4px;
  white-space: nowrap;
  list-style: none;
}
.ss-filter-btn::-webkit-details-marker { display: none; }
.ss-filter-btn::marker { display: none; content: ""; }
.ss-filter-btn .ss-caret {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform 0.15s;
}
details[open] > .ss-filter-btn .ss-caret { transform: rotate(180deg); }
.ss-filter-btn:hover { color: var(--pp-text); background: rgba(0,0,0,0.05); }
.ss-filter-btn--active { color: var(--pp-accent); font-weight: 600; }
.ss-filter-btn--active .ss-caret { opacity: 0.8; }
.ss-filter-dropdown__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: 6px;
  box-shadow: var(--pp-shadow-lg, 0 4px 16px rgba(0,0,0,0.12));
  min-width: 120px;
  padding: 4px 0;
  margin-top: 2px;
}
.ss-filter-dropdown__panel--form { padding: 8px; }
.ss-filter-opt {
  display: block;
  padding: 5px 12px;
  font-size: 0.8rem;
  color: var(--pp-text);
  text-decoration: none;
  white-space: nowrap;
}
.ss-filter-opt:hover { background: var(--pp-surface-2); }
.ss-filter-opt--active { color: var(--pp-accent); font-weight: 600; }
.ss-filter-opt--muted { color: var(--pp-text-muted); font-style: italic; }
.ss-filter-opt-divider {
  height: 1px;
  background: var(--pp-border);
  margin: 3px 8px;
}
.ss-filter-dropdown__panel--scroll {
  max-height: 240px;
  overflow-y: auto;
}
.ss-filter-date-form {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ss-filter-date-form .input { font-size: 0.8rem; width: 130px; }
.ss-filter-clear {
  font-size: 12px;
  color: var(--pp-danger);
  text-decoration: none;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
.ss-filter-clear:hover { text-decoration: underline; }
.ss-filter-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
}
.ss-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 4px 8px;
  border: 1px solid var(--pp-border);
  border-radius: 999px;
  background: var(--pp-surface);
  color: var(--pp-text);
  font-size: 12px;
  text-decoration: none;
}
.ss-filter-chip:hover {
  border-color: var(--pp-accent);
  background: var(--pp-accent-soft);
}
.ss-filter-chip__label {
  color: var(--pp-text-muted);
  font-weight: 600;
}
.ss-filter-chip__value {
  font-weight: 600;
}
.ss-filter-chip__remove {
  color: var(--pp-text-muted);
  font-weight: 700;
}
.ss-filter-chips__empty {
  color: var(--pp-text-muted);
  font-size: 12px;
}

/* ── Sidebar toggle ──────────────────────────────────────────────────── */
.ss-sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--pp-text-muted);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.ss-sidebar-toggle input { margin: 0; }

/* ── Grid + Right panel container ───────────────────────────────────── */
.ss-content {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.ss-content--no-panel .ship-panel { display: none !important; }
.ss-content--no-panel .ss-main { flex: 1; }

/* ── Main table area ─────────────────────────────────────────────────── */
.ss-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.ss-table-wrap {
  flex: 1;
  overflow: auto;
  min-height: 0;
  min-width: 0;
}
.ss-main .pagination {
  border-top: 1px solid var(--pp-border);
  padding: 2px 8px;
  background: var(--pp-surface-2, #fafafa);
  font-size: 0.75rem;
  flex-shrink: 0;
}

@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  .ship-dashboard .ss-sidebar,
  .ship-dashboard .ship-panel,
  .ship-dashboard .ss-sidebar-toggle {
    display: none !important;
  }

  .ship-dashboard .ss-header {
    padding: 8px 10px;
  }

  .ship-dashboard .ss-header__h1 {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ship-dashboard .ss-mobile-status-menu {
    display: inline-flex;
    margin-left: auto;
  }

  .ship-dashboard .ss-content,
  .ship-dashboard .ss-main {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ship-dashboard .ss-actions {
    gap: 6px;
  }
}

.ship-view-toggle { display: flex; gap: 2px; }

/* ── Clean view (single column) ──────────────────────────────────────── */
.ship-clean-layout {
  max-width: 100%;
  padding: 16px;
  flex: 1;
  overflow-y: auto;
}

/* ── COMPACT TABLE — ShipStation grid ────────────────────────────────── */
.ship-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: auto;
}
.ship-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.ship-table thead tr {
  background: var(--pp-surface-2, #f1f3f5);
}
.ship-table th {
  padding: 1px 6px;
  font-size: 0.68rem;
  height: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted);
  white-space: nowrap;
  user-select: none;
  border-bottom: 1px solid var(--pp-border);
  border-left: none;
  border-right: none;
  background: var(--pp-surface-2, #f1f3f5);
}
.ship-table td {
  padding: 0 6px;
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--pp-border);
  border-left: none;
  border-right: none;
  line-height: 1;
  height: 20px;
  background: #fff;
}
.ship-table tbody tr { background: #fff; }

.ship-table .col-checkbox,
.ship-table th.col-checkbox,
.ship-table td.col-checkbox {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  text-align: center;
  padding: 0 4px;
  position: static;
  left: auto;
  z-index: auto;
}
.ship-table thead th.col-checkbox {
  background: var(--pp-surface-2, #f1f3f5) !important;
}
.ship-table .col-checkbox input { margin: 0; vertical-align: middle; }

/* Cancel global data-table sticky-select styles for ship-table */
.ship-table th[data-column-id="select"],
.ship-table td[data-column-id="select"],
.ship-table th[data-column-id="order"],
.ship-table td[data-column-id="order"],
.ship-table th[data-column-id="image"],
.ship-table td[data-column-id="image"],
.ship-table th[data-column-id="item"],
.ship-table td[data-column-id="item"] {
  position: static !important;
  left: auto !important;
  z-index: auto !important;
}
.ship-table th[data-column-id="select"],
.ship-table td[data-column-id="select"] {
  padding-left: 4px;
  padding-right: 4px;
}
.ship-table td[data-column-id="select"]::after,
.ship-table td[data-column-id="select"]::before,
.ship-table td[data-column-id="item"]::after,
.ship-table td[data-column-id="item"]::before,
.ship-table td[data-column-id="order"]::after,
.ship-table td[data-column-id="order"]::before,
.ship-table th[data-column-id="select"]::after,
.ship-table th[data-column-id="item"]::after,
.ship-table th[data-column-id="order"]::after {
  display: none !important;
  content: none !important;
}
.ship-table .is-pinned,
.ship-table .is-pinned-edge {
  position: static !important;
  left: auto !important;
  border-right: none !important;
}
.ship-table .is-pinned-edge::after {
  display: none !important;
}
.ship-table .ship-order-name {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pp-accent);
  text-decoration: none;
  cursor: pointer;
}
a.ship-order-name:hover { text-decoration: underline; }
.consolidation-late-badge {
  margin-left: 5px;
  cursor: default;
  vertical-align: middle;
}
.ship-table .ship-method-carrier { font-size: 0.72rem; font-weight: 600; }
.ship-table .ship-method-service { font-size: 0.68rem; color: var(--pp-text-muted); display: block; }
.ship-table .num { text-align: right; }
.ship-table .actions-col {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  max-width: none;
  overflow: visible;
}

/* Shipping dashboard — color-word tote chips use inline bg/text; hide default pill dot */
.pill.pill-tote--named-color::before {
  display: none;
}
.pill.pill-tote--named-color {
  gap: 0;
  font-weight: 600;
}

/* Compact overrides for pills/buttons inside ship-table */
.ship-table .pill-xs { padding: 1px 6px; font-size: 0.7rem; line-height: 1.35; }
.ship-table .btn-xs { height: auto; padding: 1px 6px; font-size: 0.68rem; line-height: 1.35; }
.ship-table .btn-xs svg { vertical-align: middle; }

/* Row states */
.ship-row { cursor: pointer; transition: background 0.08s, box-shadow 0.12s var(--pp-ease); }
.ship-row:hover td { background: #edf2fb !important; }
.ship-row--selected td {
  background: color-mix(in srgb, var(--pp-accent-soft) 72%, var(--pp-surface)) !important;
  border-top-color: color-mix(in srgb, var(--pp-accent) 30%, var(--pp-border));
  border-bottom-color: color-mix(in srgb, var(--pp-accent) 30%, var(--pp-border));
}
.ship-row--selected td:first-child {
  box-shadow: inset 3px 0 0 var(--pp-accent);
}
.ship-row--selected .ship-order-name {
  color: var(--pp-accent);
}
.ship-row--checked td,
.ship-table .ship-row--checked td {
  background: var(--pp-accent-soft, #e3ecff) !important;
}
.ship-row--shipped { opacity: 0.4; }
.ship-row--shipped:hover { opacity: 0.6; }
.ship-row .actions-col { white-space: nowrap; text-align: right; width: 1%; max-width: none; }
.ship-row .row-actions { display: flex; gap: 2px; justify-content: flex-end; flex-wrap: nowrap; }

@media (max-width: 768px) {
  .ship-row .actions-col {
    white-space: normal;
  }

  .ship-row .row-actions {
    flex-wrap: wrap;
  }
}

.ship-row--group td {
  height: auto;
  min-height: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
  background: #f8fbff;
  border-top: 1px solid #c7d2fe;
  border-bottom-color: #dbe4ff;
}
.ship-row--group-expanded td {
  background: #eef4ff !important;
}
.ship-row--group.ship-row--selected td {
  background: color-mix(in srgb, var(--pp-accent-soft) 78%, var(--pp-surface)) !important;
}
.group-row__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #fff;
  color: var(--pp-accent);
  cursor: pointer;
}
.group-row__toggle svg {
  transition: transform 0.12s ease;
}
.ship-row--group-expanded .group-row__toggle svg {
  transform: rotate(90deg);
}
.group-row__main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.group-row__badge,
.group-row__count,
.group-row__hint,
.group-member__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}
.group-row__badge {
  font-weight: 700;
  color: #1e3a8a;
}
.group-row__badge--link:hover {
  color: var(--pp-accent);
  text-decoration: underline;
}
.group-row__count {
  color: var(--pp-text-muted);
  font-size: 0.7rem;
}
.group-row__hint {
  color: #4f46e5;
  font-size: 0.68rem;
}
.ship-row--group-expanded .group-row__hint {
  color: var(--pp-text-muted);
}
.group-row__orders {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group-row__order-chip {
  display: inline-flex;
  align-items: center;
  max-width: 108px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group-row__order-chip--more {
  background: #eef2ff;
  color: #6366f1;
}
.ship-row--group-member td {
  background: #fbfdff;
  border-bottom-color: #eef2ff;
}
.ship-row--group-member:hover td {
  background: #f1f6ff !important;
}
.ship-row--group-member td[data-column-id="order"] {
  padding-left: 12px;
}
.group-member__rail {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-left: 2px solid #c7d2fe;
  border-bottom: 2px solid #c7d2fe;
  border-radius: 0 0 0 4px;
}
.group-member__label {
  margin-right: 6px;
  color: var(--pp-text-muted);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@keyframes fadeOutRow {
  from { opacity: 0.4; }
  to   { opacity: 0; transform: translateY(-6px); }
}

/* ── CLEAN TABLE ─────────────────────────────────────────────────────── */
.ship-table--clean th,
.ship-table--clean td {
  padding: 10px 14px;
  font-size: 0.82rem;
  white-space: normal;
}
.ship-table--clean .ship-order-name {
  font-weight: 600;
  font-family: var(--font-mono, monospace);
}
.ship-table--clean .ship-row--clean { cursor: pointer; }
.ship-images {
  display: flex;
  gap: 4px;
  align-items: center;
}
.ship-img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--pp-border);
}
.ship-img--empty { background: var(--pp-surface-2); }
.ship-img--overflow {
  width: 36px;
  height: 36px;
  background: var(--pp-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--pp-text-muted);
  border-radius: 4px;
}

/* ── Right panel ─────────────────────────────────────────────────────── */
.ship-panel {
  width: 450px;
  min-width: 320px;
  background: var(--pp-surface-2);
  border-left: 1px solid var(--pp-border);
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  transition: box-shadow 0.15s var(--pp-ease), border-color 0.15s var(--pp-ease);
}
.ship-panel[data-selected-order]:not([data-selected-order=""]) {
  border-left-color: color-mix(in srgb, var(--pp-accent) 36%, var(--pp-border));
  box-shadow: inset 3px 0 0 var(--pp-accent), -10px 0 24px rgba(15, 23, 42, 0.05);
}
.ship-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 16px;
  text-align: center;
  gap: 4px;
  height: 100%;
  color: var(--pp-text-muted);
}
.ship-panel__empty-icon { color: var(--pp-text-muted); opacity: 0.5; }
.ship-panel__empty-text { font-size: 0.875rem; color: var(--pp-text-muted); }
.ship-panel__empty-sub { font-size: 0.72rem; color: var(--pp-text-subtle); font-family: var(--font-mono, monospace); }
.ship-panel__empty-sub code {
  background: var(--pp-surface-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.68rem;
}

/* ── Panel loading skeleton ──────────────────────────────────────────── */
.ship-panel-loading { padding: 0; min-width: 0; }
.ship-panel-loading .ship-panel__header { padding: 12px 14px; }
.ship-panel-loading .ship-panel__section {
  padding: 10px 14px;
  border-top: 1px solid var(--pp-border);
}

/* ── Panel content ───────────────────────────────────────────────────── */
.ship-panel-content { padding: 0 0 12px; overflow: visible; min-width: 0; }
.ship-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 14px;
  border-bottom: 1px solid var(--pp-border);
  background: var(--pp-surface);
}
.ship-panel__order-info {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.ship-panel__order-name {
  font-size: 0.875rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ship-panel__customer { font-size: 12px; }
.ship-panel__section {
  padding: 8px 14px;
  overflow: visible;
}
.ship-panel__section + .ship-panel__section,
.ship-panel__section + .ship-panel__details,
.ship-panel__details + .ship-panel__section,
.ship-panel__details + .ship-panel__details {
  border-top: 1px solid var(--pp-border);
}
.ship-panel__section--summary {
  background: var(--pp-surface);
}
.ship-panel__section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-text-muted);
  margin-bottom: 8px;
}
.ship-panel__section-label--with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ship-panel__address { font-size: 13px; line-height: 1.45; }
.ship-addr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  margin-top: 4px;
}
.ship-addr-badge--ok { background: var(--pp-success-soft); color: var(--pp-success); }
.ship-addr-badge--warn { background: var(--pp-warning-soft); color: var(--pp-warning); }
.ship-addr-suggestion { font-size: 0.75rem; margin-top: 4px; color: var(--pp-text-muted); }

/* ── Ship-to address edit modal ── */
.ship-addr-modal__content {
  width: min(620px, 92vw);
}
.ship-addr-modal__content .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}
.ship-addr-modal__content .input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.ship-addr-modal__content .form-grid {
  gap: 12px 14px;
}
.ship-addr-modal__section-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--pp-text-muted, #6b7280);
  margin: 4px 0 0;
}
.ship-addr-modal__content .field-help {
  font-size: 0.72rem;
  margin: 2px 0 0;
}

.ship-panel__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.ship-panel__details {
  display: block;
  background: var(--pp-surface);
}
.ship-panel__details-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text);
}
.ship-panel__details-summary::-webkit-details-marker { display: none; }
.ship-panel__details-summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--pp-text-muted);
  border-bottom: 1.5px solid var(--pp-text-muted);
  transform: rotate(45deg);
  transition: transform 0.15s var(--pp-ease, ease);
}
.ship-panel__details[open] .ship-panel__details-summary::after {
  transform: rotate(225deg);
}
.ship-panel__details-meta {
  margin-left: auto;
  color: var(--pp-text-muted);
  font-size: 12px;
  font-weight: 500;
}
.ship-panel__details-body {
  margin-top: 10px;
}
.ship-panel__details-action {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.ship-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ship-item__img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--pp-border);
}
.ship-item__img--empty {
  width: 36px;
  height: 36px;
  background: var(--pp-surface-2);
  border-radius: 4px;
}
.ship-item__info { flex: 1; min-width: 0; }
.ship-item__sku  { font-family: var(--font-mono, monospace); }
.ship-item__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ship-item__qty { flex-shrink: 0; color: var(--pp-text-muted); }

/* ── Shipping form (inside panel) ────────────────────────────────────── */
.ship-panel__form { padding-bottom: 0; }
.ship-form { display: flex; flex-direction: column; gap: 10px; overflow: visible; }
.ship-form__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--pp-shadow-sm);
}
.ship-form__card--grid {
  --ship-control-height: 40px;
  --ship-control-radius: 12px;
  gap: 8px;
  padding: 12px;
}
.ship-form__card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--pp-text);
}

/* Horizontal label : control row layout */
.ship-form__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0 12px;
  align-items: center;
  min-width: 0;
}
.ship-form__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--pp-text-muted);
  text-align: right;
  white-space: nowrap;
  align-self: center;
  padding-top: 1px;
}
.ship-form__control { min-width: 0; }
.ship-form__control > .input,
.ship-form__control > .input-sm,
.ship-form__control > select.input-sm {
  width: 100%;
  box-sizing: border-box;
}
.ship-form__control > .input,
.ship-form__control > .input-sm,
.ship-form__control > select.input-sm,
.ship-form .smp-input,
.ship-form .ptp-input {
  height: var(--ship-control-height);
  min-height: var(--ship-control-height);
  border-radius: var(--ship-control-radius);
  font-size: 14px;
  line-height: 1.2;
  padding: 0 12px;
}
.ship-form__control > select.input-sm {
  padding-right: 32px;
}
.ship-form__control--inline {
  display: flex;
  gap: 4px;
  align-items: center;
}
.ship-form__control--inline > input.input-sm {
  flex: 1 1 0;
  width: 0;
  min-width: 44px;
  box-sizing: border-box;
}
.ship-form__control--inline > select.input-sm,
.ship-form__control--inline > .ship-form__unit-select {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0;
  padding-left: 4px;
  padding-right: 14px;
  font-size: 11px;
  color: var(--pp-text-muted);
}
.ship-form__control--inline > .ship-weigh-btn {
  flex: 0 0 auto;
}
.ship-form__control--dimensions {
  display: grid;
  grid-template-columns: repeat(3, minmax(56px, 1fr)) 62px;
  gap: 6px;
  align-items: center;
}
.ship-form__control--weight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 42px;
  gap: 6px;
  align-items: center;
}
.ship-form__control--dimensions > .ship-form__dimension-input,
.ship-form__control--weight > .ship-form__weight-input,
.ship-form__control--dimensions > .ship-form__unit-select,
.ship-form__control--weight > .ship-form__unit-select {
  width: 100% !important;
  min-width: 0 !important;
  height: var(--ship-control-height);
  min-height: var(--ship-control-height);
  box-sizing: border-box;
  border-radius: var(--ship-control-radius);
  font-size: 14px;
}
.ship-form__control--dimensions > .ship-form__unit-select,
.ship-form__control--weight > .ship-form__unit-select {
  padding-left: 12px;
  padding-right: 28px;
  color: var(--pp-text);
}
.ship-form__control--weight > .ship-weigh-btn {
  width: 42px;
  height: var(--ship-control-height);
  min-height: var(--ship-control-height);
  padding: 0 !important;
  border-radius: var(--ship-control-radius);
}
.ship-weigh-btn.is-loading svg {
  display: none;
}
.ship-weigh-btn.is-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: shipSpin 0.7s linear infinite;
}
@keyframes shipSpin {
  to { transform: rotate(360deg); }
}
.ship-form__control-action {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2px;
}

.ship-form .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ship-form .field-row { display: flex; gap: 8px; align-items: flex-end; min-width: 0; overflow: visible; }
.ship-form .field-grow { flex: 1; min-width: 0; overflow: hidden; }
.ship-form .field-compact { flex: 0 0 auto; width: 54px; min-width: 0; }
.ship-form .field-row--checks { flex-direction: row; align-items: center; gap: 12px; }
.ship-form .label { font-size: 11px; font-weight: 600; color: var(--pp-text-muted); }
.ship-form .input-sm { font-size: 14px; padding: 0 12px; }
.ship-form select.input-sm { padding-right: 32px; }
/* Force compact unit selects and number inputs to not overflow */
.ship-form .field-compact .input-sm { width: 54px !important; min-width: 0 !important; box-sizing: border-box !important; padding-left: 4px !important; padding-right: 4px !important; }
.ship-form .field-grow .input-sm { width: 100%; box-sizing: border-box; }
.ship-form input[type="number"].input-sm:not(.ship-form__dimension-input):not(.ship-form__weight-input) { width: 100%; min-width: 0; }
.ship-form input[type="date"].input-sm { width: 100%; min-width: 0; }
.ship-form__control--dimensions > .ship-form__unit-select,
.ship-form__control--weight > .ship-form__unit-select {
  padding-left: 12px;
  padding-right: 28px;
}
.ship-form .field-help {
  font-size: 12px;
  color: var(--pp-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.ship-form__advanced {
  border-top: 1px solid var(--pp-border);
  padding-top: 8px;
}
.ship-form__advanced summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text);
}
.ship-form__advanced summary::-webkit-details-marker { display: none; }
.ship-form__advanced summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--pp-text-muted);
  border-bottom: 1.5px solid var(--pp-text-muted);
  transform: rotate(45deg);
  transition: transform 0.15s var(--pp-ease, ease);
}
.ship-form__advanced[open] summary::after {
  transform: rotate(225deg);
}
.ship-form__advanced-meta {
  margin-left: auto;
  color: var(--pp-text-muted);
  font-size: 12px;
  font-weight: 500;
}
.ship-form__advanced[open] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ship-form__actions { display: flex; flex-direction: column; gap: 6px; margin-top: 0; }
.ship-rate--quoted {
  color: inherit;
  font-style: normal;
}
.ship-form__sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin: 0 -14px;
  padding: 8px 14px 10px;
  background: color-mix(in srgb, var(--pp-surface) 92%, transparent);
  border-top: 1px solid var(--pp-border);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
}
.ship-form__action-row {
  display: flex;
  gap: 6px;
}
.ship-form__action-primary { flex: 1; justify-content: center; }
.btn-full { width: 100%; justify-content: center; }

/* ── Rate cards ──────────────────────────────────────────────────────── */
.ship-rates-area { margin-top: 4px; }
.ship-rates__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.ship-rates__title { font-size: 0.75rem; font-weight: 600; color: var(--pp-text-muted); }
.ship-rates__cards { display: flex; flex-direction: column; gap: 4px; }
.ship-rate-card {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 4px;
  padding: 8px 10px;
  border: 1.5px solid var(--pp-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
  font-size: 0.8rem;
  align-items: center;
  position: relative;
}
.ship-rate-card:hover { border-color: var(--pp-accent); background: var(--pp-accent-soft); }
.ship-rate-card--selected { border-color: var(--pp-accent); background: var(--pp-accent-soft); }
.ship-rate-card--readonly { cursor: default; }
.ship-rate-card--readonly:hover { border-color: var(--pp-accent); background: var(--pp-accent-soft); }
.ship-rates--selected { margin-top: 4px; }
.ship-rate-card--cheapest { border-color: var(--pp-success); }
.ship-rate-card--fastest  { border-color: var(--pp-info); }
.ship-rate-card__carrier { font-weight: 600; font-size: 0.78rem; }
.ship-rate-card__service  { color: var(--pp-text-muted); font-size: 0.75rem; }
.ship-rate-card__package  { display: inline-block; font-size: 0.68rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; background: var(--pp-surface-2); color: var(--pp-text-muted); margin-left: 4px; vertical-align: middle; }
.ship-rate-card__meta     { color: var(--pp-text-muted); font-size: 0.72rem; grid-column: 1 / -1; }
.ship-rate-card__price    { font-weight: 700; font-size: 1rem; text-align: right; grid-row: 1; grid-column: 3; }
.ship-rate-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ship-rate-badge--cheapest { background: var(--pp-success-soft); color: var(--pp-success); }
.ship-rate-badge--fastest  { background: var(--pp-info-soft);    color: var(--pp-info); }
.ship-rates-error { font-size: 0.8rem; color: var(--pp-danger); padding: 8px; background: var(--pp-danger-soft); border-radius: 4px; }
.ship-rates__errors { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.ship-rates__error { font-size: 0.75rem; color: var(--pp-warning-text, var(--pp-danger)); padding: 6px 8px; background: var(--pp-warning-soft, var(--pp-danger-soft)); border-radius: 4px; line-height: 1.35; }

/* ── Shipment history ────────────────────────────────────────────────── */
.ship-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  padding: 4px 0;
  border-bottom: 1px solid var(--pp-border);
}
.ship-history-item:last-child { border-bottom: none; }

/* ── Full-screen 3-panel Modal ────────────────────────────────────────── */
.modal--ship-full {
  padding: 0;
  border: none;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  margin: 0;
}
.modal--ship-full::backdrop {
  background: rgba(0,0,0,0.45);
}
.ship-modal-chrome {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: calc(100vh - 48px);
  margin-top: 48px;
  background: var(--pp-bg, #f0f2f5);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.18);
}

/* Titlebar */
.ship-modal__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--pp-surface);
  border-bottom: 1px solid var(--pp-border);
  flex-shrink: 0;
}
.ship-modal__titlebar-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ship-modal__title-label {
  font-size: 0.78rem;
  color: var(--pp-text-muted);
}
.ship-modal__title-order {
  font-size: 0.92rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}
.ship-modal__titlebar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ship-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pp-text-muted);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.ship-modal__close:hover { background: var(--pp-surface-2); color: var(--pp-text); }

/* 3-panel body */
.ship-modal__body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left panel — shipments list */
.ship-modal__left {
  width: 190px;
  min-width: 190px;
  background: var(--pp-surface);
  border-right: 1px solid var(--pp-border);
  overflow-y: auto;
  flex-shrink: 0;
}
.ship-modal__left-header {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pp-text-muted);
  padding: 10px 14px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
a.ship-modal__shipment-item,
.ship-modal__shipment-item {
  display: block;
  padding: 8px 14px;
  font-size: 0.84rem;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s;
  text-decoration: none;
  color: inherit;
}
.ship-modal__shipment-item:hover { background: var(--pp-surface-2); }
.ship-modal__shipment-item--active {
  background: var(--pp-accent-soft);
  border-left-color: var(--pp-accent);
  font-weight: 600;
  color: var(--pp-accent);
}
.ship-modal__shipment-name { font-size: 0.84rem; }
.ship-modal__shipment-meta { font-size: 0.72rem; color: var(--pp-text-muted); margin-top: 1px; }

/* Middle panel — details */
.ship-modal__middle {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Right panel — configure */
.ship-modal__right {
  width: 380px;
  min-width: 360px;
  overflow-y: auto;
  padding: 16px 12px;
  flex-shrink: 0;
}

/* Cards */
.ship-modal__card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.ship-modal__card--configure {
  position: sticky;
  top: 0;
}
.ship-modal__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pp-border);
  background: var(--pp-surface);
}
.ship-modal__card-header h3 {
  font-size: 0.84rem;
  font-weight: 700;
  margin: 0;
}
.ship-cfg-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.label-inline {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pp-text-muted);
  white-space: nowrap;
  margin: 0;
}
.ship-cfg-date-toggle { display: flex; align-items: center; flex-shrink: 0; }
.ship-cfg-date-label {
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.ship-cfg-date {
  width: 118px !important;
  font-size: 0.78rem !important;
  padding: 3px 5px !important;
}
.ship-cfg-date-hidden-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.field-label-row .label { margin-bottom: 0; }
.link-action {
  font-size: 0.76rem;
  color: var(--pp-primary, #4f6ef7);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}
.link-action:hover { text-decoration: underline; }
.ship-modal__card-badge {
  font-size: 0.72rem;
  color: var(--pp-text-muted);
}
.ship-modal__card-body {
  padding: 12px 14px;
}
.ship-modal__card-body--flush { padding: 0; }

/* Detail grid (3-col) */
.ship-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.ship-detail-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ship-detail-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ship-detail__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted);
}
.ship-detail__value {
  font-size: 0.84rem;
  line-height: 1.5;
}
.ship-detail__meta {
  font-size: 0.8rem;
  color: var(--pp-text-muted);
}

/* Cost summary rows */
.ship-cost-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  padding: 1px 0;
}
.ship-cost-row--total {
  font-weight: 700;
  border-top: 1px solid var(--pp-border);
  margin-top: 2px;
  padding-top: 4px;
}

/* Items table inside modal */
.ship-modal__items-table {
  width: 100%;
  border-collapse: collapse;
}
.ship-modal__items-table th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted);
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--pp-border);
  background: var(--pp-surface-2, #fafafa);
}
.ship-modal__items-table td {
  padding: 8px 12px;
  font-size: 0.84rem;
  border-bottom: 1px solid var(--pp-border);
  vertical-align: middle;
}
.ship-modal__items-table tr:last-child td { border-bottom: none; }
.ship-modal__items-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ship-modal__item-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ship-modal__item-img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--pp-border);
  flex-shrink: 0;
}
.ship-modal__item-img--empty {
  width: 40px;
  height: 40px;
  background: var(--pp-surface-2);
  border-radius: 4px;
  flex-shrink: 0;
}
.ship-modal__item-info { min-width: 0; }
.ship-item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.ship-item-variant { font-size: 0.76rem; color: var(--pp-text-muted); }
.ship-item-sku { font-size: 0.72rem; color: var(--pp-text-muted); font-family: var(--font-mono, monospace); }

/* Notes */
.ship-modal__note {
  font-size: 0.84rem;
  margin-bottom: 6px;
  line-height: 1.5;
}
.ship-modal__note-label {
  font-weight: 600;
  color: var(--pp-text-muted);
  margin-right: 4px;
}

/* Card header actions */
.ship-modal__card-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Activity timeline */
.ship-modal__activity-list {
  display: flex;
  flex-direction: column;
}
.ship-modal__activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--pp-border);
}
.ship-modal__activity-item:last-child { border-bottom: none; }
.ship-modal__activity-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pp-surface-2, #f1f3f5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--pp-text-muted);
}
.ship-modal__activity-icon--ship  { background: #e3f2fd; color: #1976d2; }
.ship-modal__activity-icon--pick  { background: #e8f5e9; color: #388e3c; }
.ship-modal__activity-icon--split { background: #fff3e0; color: #e65100; }
.ship-modal__activity-content { flex: 1; min-width: 0; }
.ship-modal__activity-text { font-size: 0.82rem; line-height: 1.4; }
.ship-modal__activity-text .mono { font-family: var(--font-mono, monospace); font-size: 0.78rem; }
.ship-modal__activity-time { font-size: 0.72rem; color: var(--pp-text-muted); margin-top: 1px; }
.ship-modal__activity-actions { display: flex; gap: 4px; flex-shrink: 0; }
.ship-modal__activity-empty { padding: 16px 12px; font-size: 0.82rem; color: var(--pp-text-muted); text-align: center; }

/* Left panel count badge */
.ship-modal__left-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--pp-surface-2, #e9ecef);
  font-size: 0.7rem; font-weight: 600; color: var(--pp-text-muted);
}

@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  .modal--ship-full {
    max-height: 100dvh;
  }

  .ship-modal-chrome {
    height: 100dvh;
  }

  .ship-modal__titlebar {
    gap: 8px;
    padding: 10px 12px;
  }

  .ship-modal__titlebar-left {
    min-width: 0;
  }

  .ship-modal__title-label {
    display: none;
  }

  .ship-modal__title-order {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ship-modal__body {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ship-modal__left {
    width: auto;
    min-width: 0;
    max-width: none;
    border-right: 0;
    border-bottom: 1px solid var(--pp-border);
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .ship-modal__left-header {
    min-width: max-content;
    border-bottom: 0;
    border-right: 1px solid var(--pp-border);
  }

  a.ship-modal__shipment-item,
  .ship-modal__shipment-item {
    min-width: 150px;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }

  .ship-modal__shipment-item--active {
    border-bottom-color: var(--pp-accent);
  }

  .ship-modal__middle,
  .ship-modal__right {
    width: auto;
    min-width: 0;
    overflow: visible;
  }

  .ship-modal__middle {
    padding: 12px;
  }

  .ship-modal__right {
    border-left: 0;
    padding: 0 12px 12px;
  }

  .ship-modal__card--configure {
    position: static;
  }

  .ship-detail-grid {
    grid-template-columns: 1fr;
  }

  .ship-modal__card-header,
  .ship-modal__card-header-actions,
  .ship-modal__activity-item {
    flex-wrap: wrap;
  }

  .ship-modal__card-body--flush {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ship-modal__items-table {
    min-width: 620px;
  }

  .ship-item-name {
    max-width: 180px;
  }
}

/* ── Ship modal skeleton loader ── */
#ship-modal-skeleton .ship-modal-chrome {
  pointer-events: auto;
}
.ship-skel-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
.ship-skel-col {
  display: flex;
  flex-direction: column;
}
.ship-skel-item-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
}
.ship-skel-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ship-skel-form {
  display: flex;
  flex-direction: column;
}
.ship-skel-dims-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.ship-skel-rate-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 768px) {
  .ship-skel-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Split Ship Modal ── */
.modal--split-ship {
  width: min(720px, 94vw);
  max-height: 88vh;
  padding: 0;
  border: none;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.22);
  overflow: hidden;
}
.modal--split-ship::backdrop {
  background: rgba(0,0,0,0.45);
}
.split-ship__chrome {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  background: #fff;
}
.split-ship__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--pp-border);
}
.split-ship__header h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}
.split-ship__header-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.split-ship__instructions {
  padding: 12px 20px;
  font-size: 0.82rem;
  color: var(--pp-text-muted);
  line-height: 1.5;
  background: var(--pp-surface-1, #f8f9fa);
  border-bottom: 1px solid var(--pp-border);
}
.split-ship__section-title {
  padding: 12px 20px 0;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0;
}
.split-ship__table-wrap {
  flex: 1;
  overflow: auto;
  padding: 0 20px;
}
.split-ship__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.split-ship__table th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted);
  padding: 8px 10px;
  text-align: left;
  border-bottom: 2px solid var(--pp-border);
  background: var(--pp-surface-2, #fafafa);
  position: sticky;
  top: 0;
  z-index: 1;
}
.split-ship__table td {
  padding: 10px 10px;
  font-size: 0.84rem;
  border-bottom: 1px solid var(--pp-border);
  vertical-align: middle;
}
.split-ship__table tr:last-child td { border-bottom: none; }
.split-ship__table .num { text-align: right; }
.split-ship__item-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.split-ship__item-img {
  width: 32px; height: 32px;
  border-radius: 4px; object-fit: cover;
  border: 1px solid var(--pp-border);
  flex-shrink: 0;
}
.split-ship__item-name { font-weight: 500; }
.split-ship__item-sku { font-size: 0.72rem; color: var(--pp-text-muted); font-family: var(--font-mono, monospace); }
.split-ship__select {
  width: 170px;
  padding: 4px 8px;
  font-size: 0.82rem;
}
.split-ship__select--locked {
  opacity: 0.6;
  cursor: not-allowed;
}
.split-ship__row--locked td {
  background: var(--pp-surface-1, #f8f9fa);
}
.split-ship__lock-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--pp-text-muted);
  margin-top: 3px;
}
.split-ship__help {
  padding: 10px 20px;
  font-size: 0.78rem;
}
.split-ship__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--pp-border);
  background: var(--pp-surface-1, #f8f9fa);
}

/* ── Multi-package modal ──────────────────────────────────────────────── */
.modal--multi-package {
  width: min(820px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--pp-border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 0;
}
.modal--multi-package::backdrop { background: rgba(0,0,0,0.45); }

.mp-chrome {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
}
.mp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--pp-border);
  flex-shrink: 0;
}
.mp-header__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 600;
}
.mp-header__meta { font-size: 0.82rem; color: var(--pp-text-muted); }
.mp-instructions {
  padding: 10px 20px;
  font-size: 0.82rem;
  color: var(--pp-text-muted);
  background: var(--pp-surface-1, #f8f9fa);
  border-bottom: 1px solid var(--pp-border);
  flex-shrink: 0;
}
.mp-table-wrap {
  flex: 1;
  overflow: auto;
  padding: 0;
}
.mp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  table-layout: fixed;
}
.mp-col--type { /* takes remaining space */ }
.mp-table thead tr {
  background: var(--pp-surface-1, #f8f9fa);
  border-bottom: 1px solid var(--pp-border);
}
.mp-table th {
  padding: 8px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted);
  white-space: nowrap;
  text-align: left;
}
.mp-table td {
  padding: 8px 10px;
  vertical-align: middle;
  border-bottom: 1px solid var(--pp-border-light, #eee);
  background: #fff;
}
.mp-table tr:last-child td { border-bottom: none; }
.mp-table tr:hover td { background: var(--pp-hover, #f5f7fa); }

.mp-col--seq  { width: 40px; text-align: center; }
.mp-col--type { min-width: 150px; }
.mp-col--dims { width: 172px; white-space: nowrap; }
.mp-col--unit { width: 58px; }
.mp-col--weight { width: 64px; }
.mp-col--remove { width: 32px; text-align: center; }

.mp-seq-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pp-surface-2, #e9ecef);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pp-text-muted);
}
.mp-dims-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.mp-dim-input  { width: 48px !important; min-width: 0 !important; text-align: right; padding-left: 4px !important; padding-right: 4px !important; box-sizing: border-box !important; }
.mp-weight-input { width: 60px !important; min-width: 0 !important; padding-left: 4px !important; padding-right: 4px !important; box-sizing: border-box !important; }
.mp-col--unit select { width: 54px !important; min-width: 0 !important; padding-left: 4px !important; padding-right: 2px !important; box-sizing: border-box !important; }
.mp-dims-sep { color: var(--pp-text-muted); font-size: 0.75rem; user-select: none; }

.mp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--pp-border);
  background: var(--pp-surface-1, #f8f9fa);
  flex-shrink: 0;
  gap: 12px;
}
.mp-footer__left  { display: flex; align-items: center; gap: 10px; }
.mp-footer__right { display: flex; gap: 8px; }
.mp-summary {
  font-size: 0.82rem;
  color: var(--pp-text-muted);
  font-weight: 500;
}

/* ── Multi-package summary card (inside shipping form) ────────────────── */
.mp-summary-card {
  border: 1px solid var(--pp-border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}
.mp-summary-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--pp-surface-1, #f8f9fa);
  border-bottom: 1px solid var(--pp-border);
}
.mp-summary-card__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 600;
}
.mp-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.mp-summary-table th {
  padding: 5px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted);
  text-align: left;
  background: var(--pp-surface-1, #f8f9fa);
  border-bottom: 1px solid var(--pp-border);
}
.mp-summary-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--pp-border-light, #eee);
  vertical-align: middle;
}
.mp-summary-table tr:last-child td { border-bottom: none; }

/* Legacy modal compat */
.modal--ship > .modal-content--ship {
  width: min(960px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Customs section ─────────────────────────────────────────────────── */
.ship-customs summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.ship-customs__body {
  padding-top: 10px;
  max-height: min(48vh, 520px);
  overflow: auto;
  padding-right: 4px;
}

/* Field styling — mirrors .ship-form field patterns */
.ship-customs-form,
.ship-customs__body { min-width: 0; }
.ship-customs-form .field,
.ship-customs__body .field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ship-customs-form .field + .field,
.ship-customs__body .field + .field { margin-top: 8px; }
.ship-customs-form .field-row,
.ship-customs__body .field-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 8px; }
.ship-customs-form .field-grow,
.ship-customs__body .field-grow { flex: 1; min-width: 0; }
.ship-customs-form .label,
.ship-customs__body .label { font-size: 0.72rem; font-weight: 600; color: var(--pp-text-muted); margin-bottom: 2px; }
.ship-customs-form .input-sm,
.ship-customs__body .input-sm { font-size: 0.8rem; padding: 5px 8px; }
.ship-customs-form select.input-sm,
.ship-customs__body select.input-sm { padding-right: 20px; }
.ship-customs-form .field-grow .input-sm,
.ship-customs__body .field-grow .input-sm { width: 100%; box-sizing: border-box; }
.ship-customs__items { margin-top: 8px; min-width: 0; }
.ship-customs__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ship-customs__col-pkg { width: 10%; }
.ship-customs__consolidation-hint { margin: 0 0 8px; }
.ship-customs-card.ship-customs--refreshing .ship-customs-form,
.ship-customs-card.ship-customs--refreshing .ship-customs__body {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.ship-customs__refresh-status { white-space: nowrap; }
.ship-customs__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 4px;
}
.ship-customs__col-qty { width: 8%; }
.ship-customs__col-hs { width: 14%; }
.ship-customs__col-origin { width: 11%; }
.ship-customs__origin-picker .country-picker { min-width: 0; }
.ship-customs__origin-picker .country-input {
  font-size: 0.8rem;
  padding: 5px 8px;
  text-transform: uppercase;
}
.ship-customs__origin-picker .country-help { display: none; }
.ship-customs__table td .ship-customs__origin-picker .country-field { margin: 0; }
.ship-customs__col-weight { width: 11%; }
.ship-customs__col-unit { width: 10%; }
.ship-customs__col-value { width: 11%; }
.ship-customs__col-remove { width: 32px; }
.ship-customs__table th {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted);
  padding: 6px 4px;
  text-align: left;
  border-bottom: 1px solid var(--pp-border);
  background: var(--pp-surface-2, #fafafa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ship-customs__table td {
  padding: 4px;
  font-size: 0.84rem;
  border-bottom: 1px solid var(--pp-border);
  vertical-align: middle;
  overflow: hidden;
}
.ship-customs__table tr:last-child td { border-bottom: none; }
.ship-customs__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ship-customs__table input,
.ship-customs__table select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px 6px;
}
.ship-customs__table td:last-child { width: 32px; text-align: center; padding-inline: 2px; }
.ship-customs__table td:last-child .btn { min-width: 0; padding-inline: 4px; }
.ship-panel__note { font-size: 0.82rem; margin-bottom: 4px; }
.ship-panel__note-label { margin-right: 4px; }

/* ── Bulk selection panel ────────────────────────────────────────────── */
.ship-panel__bulk-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.ship-panel__bulk-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  background: var(--pp-surface-2);
  border-radius: 6px;
}
.ship-panel__bulk-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pp-text);
  line-height: 1.2;
}
.ship-panel__bulk-stat-label {
  font-size: 0.68rem;
  color: var(--pp-text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.ship-panel__bulk-warning {
  margin-top: 8px;
  padding: 5px 8px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--pp-warning-text, #92400e);
  background: var(--pp-warning-soft, #fef3c7);
  border-radius: 4px;
}
.ship-panel__bulk-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 6px;
  max-height: 340px;
  overflow-y: auto;
}
.ship-panel__bulk-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--pp-border);
  font-size: 0.8rem;
}
.ship-panel__bulk-row:last-child { border-bottom: none; }
.ship-panel__bulk-order {
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
}
.ship-panel__bulk-detail {
  font-size: 0.74rem;
  grid-column: 1;
}
.ship-panel__bulk-cost {
  font-weight: 600;
  font-size: 0.78rem;
  text-align: right;
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
}

/* ── Toast notifications ─────────────────────────────────────────────── */
.ship-toast,
.ship-scan-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pp-text);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--pp-shadow-lg);
  z-index: 9999;
  white-space: nowrap;
  animation: slideUpFade 0.25s var(--pp-ease);
}
.ship-toast--error { background: var(--pp-danger); }
.ship-toast--success { background: var(--pp-success); }
@keyframes slideUpFade {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Carrier accounts settings ───────────────────────────────────────── */
.carrier-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--pp-border);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--pp-surface);
}
.carrier-card__icon { font-size: 1.5rem; }
.carrier-card__info { flex: 1; }
.carrier-card__name { font-weight: 600; }
.carrier-card__meta { font-size: 0.78rem; color: var(--pp-text-muted); }
.carrier-card__status { font-size: 0.72rem; }
.carrier-status--ok   { color: var(--pp-success); font-weight: 600; }
.carrier-status--error{ color: var(--pp-danger); font-weight: 600; }

/* ── End SHIP STATION */

/* ── Scan toast (no input box — scanner uses global keypress) ────────── */
.ship-toast--info { background: var(--pp-text); }

/* ── CARRIER CONNECTION BADGE ────────────────────────────────────────── */
.ship-conn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
}
.ship-conn-badge--ok    { color: var(--pp-success); }
.ship-conn-badge--error { color: var(--pp-danger); }

/* ── FEDEX AUTH STATUS ──────────────────────────────────────────────── */
.ship-fedex-auth-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.ship-fedex-auth-status--ok {
  background: var(--pp-success-soft);
  color: var(--pp-success);
}
.ship-fedex-auth-status--ok strong { color: var(--pp-text); }

/* ── SHIPPING RULE CONDITIONS LIST (legacy) ─────────────────────────── */
.ship-rule-conditions {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ship-rule-conditions li {
  font-size: 0.78rem;
  line-height: 1.6;
}

/* ───────────────────────────────────────────────────────────────────────────
   Generic Rule Builder (.rb-*)
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Form layout ── */
.rb-form {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* ── Header row (name + active + lists) ── */
.rb-header-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: end;
  margin-bottom: 20px;
  background: var(--pp-surface-1, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 16px 20px;
}

@media (max-width: 768px) {
  .rb-header-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.rb-header-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rb-header-field--name { min-width: 0; }
.rb-header-field--status { min-width: 100px; }
.rb-header-field--lists { min-width: 160px; position: relative; }

/* ── Toggle switch ── */
.rb-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  height: 36px;
}

.rb-toggle-check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.rb-toggle-pill {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: var(--pp-text-muted, #d1d5db);
  transition: background 0.2s;
  flex-shrink: 0;
}

.rb-toggle-pill__dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.rb-toggle-check:checked + .rb-toggle-pill {
  background: var(--pp-success, #059669);
}

.rb-toggle-check:checked + .rb-toggle-pill .rb-toggle-pill__dot {
  transform: translateX(16px);
}

/* ── Multiselect dropdown ── */
.rb-multiselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}

.rb-multiselect-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: 4px;
  background: var(--pp-surface-1, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 6px;
  max-height: 200px;
  overflow-y: auto;
  min-width: 200px;
}

.rb-multiselect-dropdown[hidden] { display: none; }

.rb-multiselect-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}

.rb-multiselect-option:hover {
  background: var(--pp-surface-2, #f9fafb);
}

/* ── Engine container ── */
.rb-engine {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 16px;
}

/* ── Two-column layout ── */
.rb-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

@media (max-width: 900px) {
  .rb-columns {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .rb-connector { transform: rotate(90deg); }
}

.rb-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Connector arrow ── */
.rb-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-text-muted, #d1d5db);
}

/* ── Cards ── */
.rb-card {
  background: var(--pp-surface-1, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.rb-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  gap: 10px;
  flex-wrap: wrap;
}

.rb-card__header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rb-card__header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rb-card__label {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 4px;
}

.rb-card__header--if .rb-card__label {
  background: var(--pp-info-bg, #eff6ff);
  color: var(--pp-info, #2563eb);
}

.rb-card__header--then .rb-card__label {
  background: var(--pp-success-bg, #ecfdf5);
  color: var(--pp-success, #059669);
}

.rb-card__sublabel {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rb-card__body {
  padding: 14px 16px;
  flex: 1;
}

.rb-card__footer {
  padding: 4px 0 0;
}

.rb-card__mode-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--line, #e5e7eb);
  display: flex;
  justify-content: flex-end;
}

/* ── Logic toggle ── */
.rb-logic-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
  background: var(--pp-info, #2563eb);
  color: #fff;
  border: none;
  cursor: pointer;
  line-height: 1.6;
}

.rb-logic-toggle--or { background: #d97706; }
.rb-logic-toggle:hover { opacity: 0.85; }

/* ── Mode pills ── */
.rb-mode-pills {
  display: flex;
  gap: 4px;
}

/* ── Condition rows ── */
.rb-condition-list,
.rb-action-list {
  display: flex;
  flex-direction: column;
}

.rb-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 0;
}

.rb-row + .rb-row {
  border-top: 1px solid var(--line, #f3f4f6);
}

.rb-row__fields {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6px;
  flex: 1;
  min-width: 0;
  align-items: center;
}

.rb-row__fields--hide-op {
  grid-template-columns: 1fr 1fr;
}

.rb-row__fields--hide-op .rb-op-select { display: none; }

.rb-row__fields .input,
.rb-row__fields .ss-picker { min-width: 0; }

.rb-value-cell { min-width: 0; }
.rb-value-cell .input { min-width: 0; width: 100%; }

.rb-collection-picker { min-width: 0; width: 100%; gap: 4px; }
.rb-collection-picker .clp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rb-collection-picker .clp-chips:empty { display: none; }
.rb-collection-picker .clp-chip { font-size: 0.78rem; }
.rb-collection-picker .clp-input { width: 100%; }
.rb-collection-picker .clp-field { margin: 0; }

.rb-value-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.rb-value-wrap .input { flex: 1; min-width: 0; }

.rb-input-suffix {
  font-size: 0.82rem;
  color: var(--pp-text-secondary, #6b7280);
  font-weight: 500;
  white-space: nowrap;
  margin-left: 4px;
}

/* ── Remove button ── */
.rb-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--pp-text-muted, #d1d5db);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.rb-remove-btn:hover {
  background: #fef2f2;
  color: var(--pp-danger, #dc2626);
}

/* ── Add button ── */
.rb-add-btn { margin-top: 4px; }

/* ── Action rows ── */
.rb-action-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 7px 0;
}

.rb-action-row + .rb-action-row {
  border-top: 1px solid var(--line, #f3f4f6);
}

.rb-action-row--dragging { opacity: 0.3; }

.rb-action-drag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  color: var(--pp-text-muted, #d1d5db);
  cursor: grab;
  flex-shrink: 0;
}

.rb-action-drag:active { cursor: grabbing; }
.rb-action-row:hover .rb-action-drag { color: var(--pp-text-secondary, #6b7280); }

.rb-action-row__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.rb-action-row__header {
  display: grid;
  grid-template-columns: 1.2fr 0.6fr;
  gap: 6px;
  align-items: center;
}

.rb-action-row__header .input,
.rb-action-row__header .ss-picker { min-width: 0; }

.rb-inventory-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.rb-inventory-action .rb-action-value-input,
.rb-inventory-action .rb-inventory-boolean-select {
  flex: 1 1 120px;
  min-width: 0;
}

.rb-inventory-action .rb-channel-location-select {
  flex: 1 1 160px;
  min-width: 0;
}

/* Legacy alias — some domains may still reference __fields */
.rb-action-row__fields {
  display: grid;
  grid-template-columns: 1.2fr 0.6fr 1fr;
  gap: 6px;
  flex: 1;
  min-width: 0;
  align-items: center;
}

.rb-action-row__fields .input,
.rb-action-row__fields .ss-picker { min-width: 0; }

.rb-action-value-cell { min-width: 0; width: 100%; }
.rb-action-value-cell .input { min-width: 0; width: 100%; }
.rb-action-value-cell .wf-liquid-editor { width: 100%; }
.rb-action-value-cell .wf-liquid-editor__zone,
.rb-action-value-cell .ccp-mapping-input {
  min-height: 44px;
}

.rb-tier-inputs { display: flex; gap: 6px; }
.rb-tier-inputs .input { flex: 1; min-width: 0; }

/* ── Match badge ── */
.rb-match-badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--pp-info-bg, #eff6ff);
  color: var(--pp-info, #2563eb);
  white-space: nowrap;
}

.rb-match-badge[hidden] { display: none; }

/* ── Empty state ── */
.rb-empty-state { padding: 4px 0; }
.rb-empty-state[hidden] { display: none; }

.rb-empty-state__text {
  font-size: 0.85rem;
  color: var(--pp-text-secondary, #6b7280);
  margin: 0;
}

/* ── Advanced groups ── */
.rb-adv-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.rb-condition-group {
  margin-bottom: 10px;
  padding: 12px;
}

.rb-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rb-group-list .rb-row:first-child { border-top: none; }

/* ── Advanced panel ── */
.rb-advanced-panel {
  margin-top: 16px;
}

.rb-advanced-summary {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rb-advanced-summary h2 { margin: 0; }

.rb-chevron {
  transition: transform 0.2s;
}

details[open] > .rb-advanced-summary .rb-chevron {
  transform: rotate(180deg);
}

/* ── Form actions (bottom buttons) ── */
.rb-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line, #e5e7eb);
}

/* ───────────────────────────────────────────────────────────────────────────
   Shipping Rule Builder (.srb-*)
   ─────────────────────────────────────────────────────────────────────────── */

.srb-form > .panel + .panel,
.srb-form > .form-actions {
  margin-top: 24px;
}

.srb-mode-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 16px 12px;
}

.srb-add-row {
  padding: 0 16px 16px;
}

.consolidation-overview {
  margin-bottom: 16px;
}

.consolidation-overview__body {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 18px;
  padding: 18px 20px;
}

.consolidation-overview h2,
.consolidation-form-intro h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
}

.consolidation-overview p,
.consolidation-form-intro p {
  margin: 4px 0 0;
  max-width: 720px;
  font-size: 13px;
  line-height: 1.5;
}

.consolidation-overview__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 8px;
  min-width: 0;
}

.consolidation-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 10px;
  background: var(--pp-surface-2, #f8fafc);
}

.consolidation-stat__value {
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  color: var(--pp-text, #0f172a);
}

.consolidation-stat__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #64748b);
}

.consolidation-form-intro {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-color: var(--pp-primary-light, #c7d2fe);
  background: var(--pp-primary-bg, #eef2ff);
}

.consolidation-form-intro__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  color: var(--brand-600, #4f46e5);
  background: #fff;
  border: 1px solid rgba(79, 70, 229, 0.18);
}

.consolidation-active-card {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 10px;
  background: var(--pp-surface-2, #f8fafc);
}

.consolidation-active-card input {
  margin-top: 3px;
}

.consolidation-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consolidation-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  background: #fff;
}

.consolidation-field--locked {
  color: var(--brand-700, #4338ca);
  background: var(--pp-primary-bg, #eef2ff);
  border-color: var(--pp-primary-light, #c7d2fe);
}

.consolidation-field--toggle {
  cursor: pointer;
}

.consolidation-field--toggle:has(input:checked) {
  color: var(--pp-success, #15803d);
  background: #ecfdf5;
  border-color: #86efac;
}

.consolidation-field__checkbox {
  margin: 0;
}

.srb-form .form-section {
  padding: 0 16px 16px;
}

.srb-form .form-section + .form-section {
  padding-top: 4px;
}

.srb-form .form-section__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #64748b);
}

.consolidation-sim-kv {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 12px;
}

.consolidation-sim-kv > div {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 8px;
}

.consolidation-sim-kv dt {
  color: var(--muted, #64748b);
  font-weight: 600;
}

.consolidation-sim-kv dd {
  margin: 0;
  min-width: 0;
}

/* ── Conditions header with AND/OR toggle ── */

.srb-conditions-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.srb-conditions-header__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}

.srb-logic-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 24px;
  padding: 0 8px;
  border: none;
  border-radius: var(--radius, 10px);
  background: var(--accent, #6366f1);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s;
}

.srb-logic-toggle--or {
  background: #d97706;
}

.srb-logic-toggle:hover {
  opacity: 0.88;
}

/* ── Condition rows ── */

.srb-condition-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}

.srb-condition-row + .srb-condition-row {
  border-top: 1px solid var(--line, #e5e7eb);
}

.srb-condition-row__fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  align-items: start;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.srb-condition-row__fields .input {
  min-width: 0;
  font-size: 13px;
  padding: 6px 10px;
}

.srb-value-cell {
  min-width: 0;
}

.srb-value-cell .input {
  min-width: 0;
}

/* ── Action rows ── */

.srb-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  cursor: default;
}

.srb-action-row + .srb-action-row {
  border-top: 1px solid var(--line, #e5e7eb);
}

.srb-action-row--dragging {
  opacity: 0.35;
}

.srb-action-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  color: var(--pp-text-muted, #9ca3af);
  cursor: grab;
  touch-action: none;
}

.srb-action-drag-handle:active {
  cursor: grabbing;
}

.srb-action-row:hover .srb-action-drag-handle {
  color: var(--pp-text-secondary, #6b7280);
}

.srb-action-row__fields {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.srb-action-row__fields .input {
  min-width: 0;
  font-size: 13px;
  padding: 6px 10px;
}

.srb-action-value-cell {
  min-width: 0;
}

.srb-action-smp-slot {
  min-width: 0;
}

.srb-smp-mount {
  min-width: 0;
}

.srb-smp-mount .smp-picker {
  min-width: 0;
}

/* ── Remove button ── */

.srb-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--muted, #94a3b8);
  cursor: pointer;
  flex-shrink: 0;
}

.srb-remove-btn:hover {
  background: #fef2f2;
  color: var(--danger, #ef4444);
}

/* ── Add button ── */

.srb-add-btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.radio-card:hover {
  border-color: var(--pp-primary-light, #c7d2fe);
  background: var(--pp-surface-2, #f8fafc);
}

.radio-card--selected,
.radio-card:has(.radio-card__input:checked) {
  border-color: var(--brand-500, #6366f1);
  background: var(--pp-primary-bg, #eef2ff);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.14);
}

.radio-card__input {
  margin-top: 3px;
  flex: 0 0 auto;
}

.radio-card__label {
  margin: 0;
  font-weight: 600;
  font-size: 13px;
  color: var(--pp-text, #0f172a);
}

.radio-card__description {
  margin: 3px 0 0;
  line-height: 1.45;
}

.radio-card__content {
  flex: 1;
  min-width: 0;
}

.radio-card-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Empty states ── */

.srb-condition-empty,
.srb-action-empty {
  padding: 4px 0;
}

.srb-condition-empty[hidden],
.srb-action-empty[hidden] {
  display: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   Shipping Rule Index — card-based list (.srb-rule-card, .srb-rules-list)
   ─────────────────────────────────────────────────────────────────────────── */

.srb-rules-list {
  padding: 0;
}

.srb-rule-card {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line, #e5e7eb);
}

.srb-rule-card--inactive {
  background: var(--pp-surface-2, #f8fafc);
}

.srb-rule-card--inactive .srb-rule-card__name-link {
  color: var(--muted, #64748b);
}

.srb-rule-card:last-child {
  border-bottom: none;
}

.srb-rule-card--dragging {
  opacity: 0.45;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  z-index: 10;
}

.srb-rule-card__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  flex-shrink: 0;
  cursor: grab;
  color: var(--muted, #94a3b8);
}

.srb-rule-card__handle:hover {
  color: var(--ink, #0f172a);
  background: #f8fafc;
}

.srb-rule-card__handle:active {
  cursor: grabbing;
}

.srb-rule-card__body {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
}

.srb-rule-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.srb-rule-card__name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.srb-rule-card__name-link {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink, #0f172a);
  text-decoration: none;
}

.srb-rule-card__name-link:hover {
  text-decoration: underline;
}

.srb-rule-card__priority {
  font-size: 11px;
  font-weight: 500;
}

.srb-rule-card__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Toggle switch ── */

.srb-toggle-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.srb-toggle {
  display: inline-flex;
  align-items: center;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: #cbd5e1;
  padding: 2px;
  transition: background 0.15s;
  position: relative;
}

.srb-toggle--on {
  background: var(--success, #22c55e);
}

.srb-toggle__knob {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  transition: transform 0.15s;
}

.srb-toggle--on .srb-toggle__knob {
  transform: translateX(14px);
}

/* ── Rule card details ── */

.srb-rule-card__details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.srb-rule-card__section {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
}

.srb-rule-card__section-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #64748b);
  flex-shrink: 0;
  min-width: 44px;
  padding-top: 2px;
}

.srb-rule-card__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.srb-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.srb-pill--sm {
  padding: 1px 6px;
  font-size: 10.5px;
}

.srb-pill--condition {
  background: #eff6ff;
  color: #2563eb;
}

.srb-pill--action {
  background: #f0fdf4;
  color: #16a34a;
}

.srb-pill-join {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.srb-rule-card__footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #e5e7eb);
  font-size: 12px;
}

/* ── Variant picker condition slot ── */

.srb-vp-slot {
  min-width: 0;
  width: 100%;
}

.srb-vp-mount {
  min-width: 0;
}

.srb-vp-mount .vp-picker {
  font-size: 13px;
}

/* The "Done" button and counter are not needed in the inline condition context */
.srb-vp-mount .vp-done,
.srb-vp-mount .vp-counter {
  display: none !important;
}

/* ── Country picker condition slot ── */

.srb-country-slot,
.srb-country-mount {
  min-width: 0;
  width: 100%;
}

.srb-country-mount .country-picker {
  font-size: 13px;
}

.srb-country-mount .country-input {
  height: 34px;
  font-size: 13px;
}

/* Hide operator dropdown when a field only allows one operator,
   and expand the value cell to fill the freed space. */
.srb-condition-row__fields--hide-op .srb-operator-select {
  display: none;
}
.srb-condition-row__fields--hide-op .srb-value-cell {
  grid-column: 2 / -1;
}

.srb-condition-group {
  margin-bottom: 12px;
}

.srb-condition-group__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.srb-insert-fields {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.srb-insert-fields .srb-insert-sku {
  flex: 2;
  min-width: 0;
}

.srb-insert-fields .srb-insert-qty {
  width: 72px;
  flex-shrink: 0;
}

/* Shipping rules — simulate rail */
.shipping-sim-results {
  padding: 12px 0 0;
  font-size: 13px;
}

.shipping-sim-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.shipping-sim-metric {
  background: var(--pp-surface-2, #f3f4f6);
  border-radius: 8px;
  padding: 8px 10px;
}

.shipping-sim-metric__label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
}

.shipping-sim-metric__value {
  font-weight: 600;
}

.shipping-sim-winning {
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid;
}

.shipping-sim-winning--success {
  border-color: #86efac;
  background: #ecfdf5;
}

.shipping-sim-winning__actions {
  margin: 0;
  padding-left: 18px;
}

.shipping-sim-alert {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}

.shipping-sim-alert--danger {
  background: #fef2f2;
  color: #b91c1c;
}

.shipping-sim-alert--warn {
  background: #fffbeb;
  color: #b45309;
}

.shipping-sim-trace-parent {
  margin-top: 8px;
}

.shipping-sim-trace-parent > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
}

.shipping-sim-trace {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.shipping-sim-trace-rule {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  padding: 6px 10px;
}

.shipping-sim-trace-rule--ok {
  border-color: #86efac;
  background: #f0fdf4;
}

.shipping-sim-trace-rule--fail {
  border-color: #fecaca;
  background: #fef2f2;
}

.shipping-sim-trace-rule > summary {
  cursor: pointer;
  font-size: 12px;
  list-style: none;
}

.shipping-sim-trace-rule > summary::-webkit-details-marker {
  display: none;
}

.shipping-sim-trace-sum {
  float: right;
}

.shipping-sim-trace-body {
  margin-top: 8px;
}

.shipping-sim-ok {
  color: #15803d;
}

.shipping-sim-bad {
  color: #b91c1c;
}

.shipping-sim-group {
  margin: 8px 0 0 8px;
  padding-left: 10px;
  border-left: 2px solid #cbd5e1;
}

.shipping-sim-ctx {
  margin-top: 10px;
}

.shipping-sim-kv {
  margin: 6px 0 0;
}

.shipping-sim-kv dt {
  margin-top: 4px;
  font-weight: 600;
}

.shipping-sim-kv dd {
  margin: 0 0 0 8px;
}

@media (max-width: 920px) {
  .srb-rule-card__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .srb-rule-card__controls {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .consolidation-overview__stats {
    grid-template-columns: 1fr;
  }

  .srb-condition-row,
  .srb-rule-card__section {
    align-items: stretch;
    flex-direction: column;
  }

  .srb-condition-row__fields,
  .srb-condition-row__fields--hide-op .srb-value-cell {
    display: grid;
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .consolidation-sim-kv > div {
    grid-template-columns: 1fr;
  }
}

/* ── TOAST STYLES (global) ───────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  animation: toast-in 0.2s ease;
}
.toast--success { background: var(--pp-success, #16a34a); }
.toast--error   { background: var(--pp-danger,  #dc2626); }
.toast--warn    { background: var(--pp-warn,    #d97706); }
.toast--info    { background: var(--pp-accent,  #2563eb); }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ── TEXT UTILITIES ──────────────────────────────────────────────────── */
.text-success { color: var(--pp-success, #16a34a); }
.text-warn    { color: var(--pp-warn, #d97706); }
.text-danger  { color: var(--pp-danger, #dc2626); }

/* ── INPUT STATIC (read-only form value) ─────────────────────────────── */
.input-static {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background: var(--pp-surface-2, #f3f4f6);
  border: 1px solid var(--pp-border);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--pp-text-muted);
  min-height: 34px;
}

/* ── ORDER ROUTING SETTINGS ─────────────────────────────────────────── */
.routing-strategy-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.routing-strategy-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--pp-border);
  border-radius: 10px;
  background: var(--pp-surface-1, #fff);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  cursor: grab;
  user-select: none;
}

.routing-strategy-card:hover {
  border-color: var(--pp-primary-light, #c7d2fe);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.routing-strategy-card:active {
  cursor: grabbing;
}

.routing-strategy-card.is-dragging {
  opacity: 0;
}

.routing-strategy-placeholder {
  border: 2px dashed var(--pp-primary, #6366f1);
  border-radius: 10px;
  background: var(--pp-primary-bg, rgba(99, 102, 241, 0.06));
  transition: height 0.15s ease;
}

.routing-strategy-card__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--pp-text-muted, #9ca3af);
  transition: color 0.12s;
}

.routing-strategy-card:hover .routing-strategy-card__handle {
  color: var(--pp-text-secondary, #6b7280);
}

.routing-strategy-card__step {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--pp-primary, #6366f1);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

.routing-strategy-card__body {
  flex: 1;
  min-width: 0;
}

.routing-strategy-card__name {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--pp-text-primary, #111827);
}

.routing-strategy-card__desc {
  margin-top: 3px;
  line-height: 1.55;
  color: var(--pp-text-muted, #6b7280);
}

.routing-strategy-card__toggle {
  flex-shrink: 0;
}

/* Location priority sub-list */
.routing-priority-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--pp-border);
  padding-top: 10px;
}

.routing-priority-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  background: var(--pp-surface-2, #f3f4f6);
  font-size: 0.85rem;
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.12s ease, background-color 0.12s ease;
}

.routing-priority-item:hover {
  background: var(--pp-surface-3, #e5e7eb);
}

.routing-priority-item.is-dragging {
  opacity: 0;
}

.routing-priority-placeholder {
  border: 2px dashed var(--pp-primary, #6366f1);
  border-radius: 7px;
  background: var(--pp-primary-bg, rgba(99, 102, 241, 0.06));
}

.routing-priority-item__grip {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--pp-text-muted, #9ca3af);
  transition: color 0.12s;
}

.routing-priority-item:hover .routing-priority-item__grip {
  color: var(--pp-text-secondary, #6b7280);
}

.routing-priority-item__rank {
  width: 18px;
  text-align: right;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.75rem;
}

.routing-priority-item__name {
  flex: 1;
  font-weight: 500;
}

/* Toggle switch (reused from existing patterns but self-contained here) */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Pill track only: must not match label.toggle-switch (settings / integrations use that for the wrapper). */
.toggle-label .toggle-switch,
.toggle-input + .toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background: var(--pp-border, #d1d5db);
  border-radius: 10px;
  transition: background 0.18s;
  flex-shrink: 0;
}

.toggle-label .toggle-switch::after,
.toggle-input + .toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-input:checked + .toggle-switch {
  background: var(--pp-accent, #2563eb);
}

.toggle-input:checked + .toggle-switch::after {
  transform: translateX(16px);
}

.toggle-text {
  font-size: 0.85rem;
  color: var(--pp-text-muted);
}

/* Routing lock badge on order page */
.routing-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--pp-accent-subtle, #eff6ff);
  color: var(--pp-accent, #2563eb);
  border: 1px solid var(--pp-accent-border, #bfdbfe);
  font-weight: 500;
}

.routing-lock-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   Hover Card — shared tooltip/popover for entity previews.
   Rendered by hover_card_controller.js, portaled to <body> or
   the nearest <dialog> for top-layer safety.
   ═══════════════════════════════════════════════════════════════ */
.hover-card {
  position: fixed;
  z-index: 200000;
  width: 320px;
  max-width: calc(100vw - 16px);
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--pp-text, #18181b);
  pointer-events: auto;
}
.hover-card[hidden] { display: none; }

.image-hover-popover {
  position: fixed;
  z-index: 200001;
  padding: 8px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #ebecef);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.06);
  pointer-events: none;
}
.image-hover-popover[hidden] {
  display: none;
}
.image-hover-popover img {
  display: block;
  max-width: min(320px, calc(100vw - 32px));
  max-height: min(320px, calc(100vh - 32px));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

.hover-card__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.hover-card__thumb {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  background: var(--pp-surface-2, #f4f4f5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hover-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hover-card__thumb-initials {
  font-size: 16px;
  font-weight: 600;
  color: var(--pp-text-muted, #71717a);
}
.hover-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #18181b);
  line-height: 1.3;
}
.hover-card__subtitle {
  font-size: 11px;
  color: var(--pp-text-muted, #71717a);
  margin-top: 1px;
}

.hover-card__divider {
  height: 1px;
  background: var(--pp-border, #ebecef);
  margin: 8px 0;
}

.hover-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.hover-card__grid-item {
  display: flex;
  flex-direction: column;
}
.hover-card__grid-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-subtle, #a1a1aa);
}
.hover-card__grid-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--pp-text, #18181b);
}

.hover-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}
.hover-card__row-label {
  color: var(--pp-text-muted, #71717a);
}
.hover-card__row-value {
  font-weight: 500;
}

.hover-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.hover-card__pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  background: var(--pp-surface-2, #f4f4f5);
  color: var(--pp-text-muted, #71717a);
}

.hover-card__section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-subtle, #a1a1aa);
  margin-top: 8px;
  margin-bottom: 4px;
}

.hover-card__stock-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 11px;
}
.hover-card__stock-loc {
  color: var(--pp-text, #18181b);
  font-weight: 500;
}
.hover-card__stock-nums {
  color: var(--pp-text-muted, #71717a);
}
.hover-card__stock-nums strong {
  color: var(--pp-text, #18181b);
}

/* ── Voice Picking ──────────────────────────────────────────────────────── */

/* Control bar — fixed to bottom of picking-engine, survives Turbo replacements */
.voice-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--pp-surface, #ffffff);
  border-top: 1px solid var(--pp-border, #e4e4e7);
  border-radius: 0 0 10px 10px;
  margin-top: 8px;
}

/* Stacked under route map header: header already has border-bottom — drop voice top border. */
.voice-control-bar.voice-control-bar--in-route-panel {
  margin-top: 0;
  border-radius: 0;
  border-top: none;
}

.voice-control-bar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.voice-control-bar__right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.voice-control-bar__info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  width: 0;
}

/* Mic button — large circular, touch-friendly for iPad use */
.voice-mic-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: var(--pp-accent, #2563eb);
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition: background 0.15s, transform 0.1s;
  outline: none;
}

.voice-mic-btn:hover {
  background: var(--pp-accent-hover, #1d4ed8);
}

.voice-mic-btn:active,
.voice-mic-btn--listening {
  background: #dc2626;
  transform: scale(0.97);
}

.voice-mic-btn--listening .voice-mic-icon {
  animation: voice-mic-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes voice-mic-pulse {
  from { opacity: 1; }
  to   { opacity: 0.7; }
}

/* Pulsing ring animation while listening */
.voice-mic-btn__ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.voice-mic-btn--listening .voice-mic-btn__ring {
  border-color: #dc2626;
  opacity: 1;
  animation: voice-ring-pulse 1s ease-out infinite;
}

@keyframes voice-ring-pulse {
  0%   { transform: scale(1);    opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Voice status text */
.voice-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text-muted, #71717a);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.voice-status[data-status="listening"] {
  color: #dc2626;
}

.voice-status[data-status="processing"] {
  color: var(--pp-accent, #2563eb);
}

.voice-status[data-status="speaking"] {
  color: #059669;
}

.voice-status[data-status="error"] {
  color: #b45309;
}

/* Transcript display */
.voice-transcript {
  font-size: 13px;
  color: var(--pp-text, #18181b);
  font-style: italic;
  margin-top: 2px;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  overflow: hidden;
  width: 100%;
}

/* Mute button state */
.voice-mute-btn--muted {
  opacity: 0.45;
}

.voice-mute-btn--muted svg {
  color: var(--pp-text-muted, #71717a);
}

/* Speed slider */
.voice-speed-control {
  display: flex;
  align-items: center;
  gap: 4px;
}

.voice-speed-control__label {
  color: var(--pp-text-muted, #71717a);
  display: flex;
  align-items: center;
}

.voice-speed-slider {
  width: 64px;
  cursor: pointer;
  accent-color: var(--pp-accent, #2563eb);
}

/* Subtle card highlight when voice mode is active */
/* Always-on mic button */
.voice-continuous-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--bs-secondary);
  border-color: transparent;
}

.voice-continuous-btn__label {
  display: none;
}

@media (min-width: 768px) {
  .voice-continuous-btn__label {
    display: inline;
  }
}

.voice-continuous-btn--active {
  background-color: #e8f5e9;
  color: #2e7d32;
  border-color: #a5d6a7 !important;
}

.voice-continuous-btn--active svg {
  animation: voice-continuous-pulse 2s ease-in-out infinite;
}

@keyframes voice-continuous-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* When mic is in always-on continuous mode, show a steady glow ring */
.voice-mic-btn--continuous {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35);
}

.voice-mic-btn--continuous.voice-mic-btn--listening {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35),
              0 0 0 6px rgba(34, 197, 94, 0.15);
}

.pick-card--voice-active {
  outline: 2px solid var(--pp-accent, #2563eb);
  outline-offset: -2px;
}

/* iPad-specific adjustments */
@media (min-width: 768px) and (pointer: coarse) {
  .voice-mic-btn {
    width: 72px;
    height: 72px;
  }

  .voice-speed-slider {
    width: 80px;
  }
}

/* Landscape iPad — make bar more compact */
@media (min-width: 1024px) and (max-height: 768px) and (pointer: coarse) {
  .voice-control-bar {
    padding: 8px 14px;
  }

  .voice-mic-btn {
    width: 56px;
    height: 56px;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .voice-control-bar {
    background: var(--pp-surface-dark, #1c1c1e);
    border-color: var(--pp-border-dark, #3f3f46);
  }
}

/* Voice picking settings panel (within batch show page) */
/* ── Warehouse Access matrix ── */
.wh-access-table-wrap {
  overflow-x: auto;
}

.wh-access-table__loc-header {
  text-align: center !important;
  max-width: 120px;
  white-space: normal !important;
  line-height: 1.3;
}

.wh-access-table__cell {
  text-align: center;
  width: 80px;
}

.wh-access-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: default;
  transition: background 0.15s, color 0.15s;
}

.wh-access-check--admin {
  background: #f0fdf4;
  color: #16a34a;
  cursor: default;
}

.wh-access-check--granted {
  background: #dcfce7;
  color: #16a34a;
  cursor: pointer;
}
.wh-access-check--granted:hover {
  background: #fee2e2;
  color: #dc2626;
}

.wh-access-check--none {
  background: #f4f4f5;
  color: #a1a1aa;
  cursor: pointer;
}
.wh-access-check--none:hover {
  background: #e0f2fe;
  color: #2563eb;
}

.wh-access-grant-form {
  display: inline;
}

.voice-settings-section {
  border-top: 1px solid var(--pp-border, #e4e4e7);
  padding-top: 16px;
  margin-top: 16px;
}

.voice-settings-section__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pp-text-muted, #71717a);
  margin-bottom: 12px;
}

/* ── Bin capacity bar ────────────────────────────────────────── */
.bin-capacity-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
}

.bin-capacity-bar--has-tooltip {
  position: relative;
  cursor: default;
}

/* Lift above sibling cells so the tip isn’t covered by the next column’s paint. */
.bin-capacity-bar--has-tooltip:hover {
  z-index: 40;
}

.bin-capacity-bar__track {
  flex: 1;
  height: 6px;
  background: var(--pp-border, #e4e4e7);
  border-radius: 3px;
  overflow: hidden;
}

.bin-capacity-bar__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.2s ease;
}

.bin-capacity-bar__label {
  flex-shrink: 0;
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/*
 * Hover tooltip — opens *below* the bar so it isn’t clipped by the sticky
 * table header (thead is z-index 5–6 and paints over upward overflow from
 * the first body row). Still above .table-wrap horizontal scroll clipping
 * for typical tip height at the bottom of the viewport.
 */
.bin-capacity-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--pp-surface-tooltip, #18181b);
  color: #fff;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  pointer-events: none;
}

.bin-capacity-tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--pp-surface-tooltip, #18181b);
}

.bin-capacity-bar--has-tooltip:hover .bin-capacity-tooltip {
  display: block;
}

.bin-capacity-tooltip strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.bin-capacity-tooltip__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.bin-capacity-tooltip__row span:last-child {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.bin-capacity-tooltip__limiting {
  font-style: normal;
  font-size: 10px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
}

.bin-capacity-tooltip__type {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
}

/* ───────────────────────────────────────────────────────────────────────────
   Shipping Method Picker (shared/_shipping_method_picker · shipping_method_picker_controller)
   See .cursor/rules/shipping-method-picker.mdc for usage.
   Class prefix: .smp-* (Shipping Method Picker)
   ─────────────────────────────────────────────────────────────────────────── */

.smp-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

/* ─── Field (input wrapper) ─── */

.smp-field {
  position: relative;
  display: flex;
  align-items: center;
}

.smp-input {
  width: 100%;
  flex: 1;
}

/* ─── Selected card ─── */

.smp-selected-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--pp-bg-subtle, #f1f5f9);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 8px;
  min-width: 0;
}

.smp-selected-card__icon {
  flex-shrink: 0;
  color: var(--pp-text-muted, #64748b);
  display: flex;
  align-items: center;
}

.smp-selected-card__main {
  flex: 1;
  min-width: 0;
}

.smp-selected-card__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smp-selected-card__change {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
  cursor: pointer;
  white-space: nowrap;
}

.smp-selected-card__change:hover {
  color: var(--pp-text, #0f172a);
}

/* ─── Dropdown ─── */

.smp-dropdown {
  position: fixed;
  background: var(--panel, #fff);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: var(--pp-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.12));
  z-index: 1200;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
}

.smp-dropdown[hidden] {
  display: none;
}

/* ─── Group headers ─── */

.smp-group-header {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted, #64748b);
  user-select: none;
}

.smp-group-header[hidden] {
  display: none;
}

/* ─── Options ─── */

.smp-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--pp-text, #0f172a);
}

.smp-option[hidden] {
  display: none;
}

.smp-option:hover,
.smp-option.is-active {
  background: var(--pp-bg-subtle, #f1f5f9);
}

.smp-option.is-active {
  outline: 2px solid var(--pp-accent, #3b82f6);
  outline-offset: -2px;
}

.smp-option__service {
  font-weight: 500;
}

/* ─── Empty state ─── */

.smp-empty-state {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--pp-text-muted, #64748b);
  text-align: center;
}

.smp-empty-state[hidden] {
  display: none;
}

/* ─── Help text ─── */

.smp-help {
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
  margin: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   Package Type Picker (shared/_package_type_picker · package_type_picker_controller)
   Class prefix: .ptp-* (Package Type Picker)
   ─────────────────────────────────────────────────────────────────────────── */

.ptp-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.ptp-field {
  position: relative;
  display: flex;
  align-items: center;
}

.ptp-input {
  width: 100%;
  flex: 1;
}
.ptp-picker--has-action .ptp-input {
  padding-right: 42px;
}
.ptp-action-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--pp-accent, #2563eb);
  background: color-mix(in srgb, var(--pp-accent) 8%, transparent);
  text-decoration: none;
  z-index: 2;
}
.ptp-action-btn:hover {
  background: color-mix(in srgb, var(--pp-accent) 14%, transparent);
  color: var(--pp-accent, #2563eb);
}

.ptp-dropdown {
  position: fixed;
  background: var(--panel, #fff);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: var(--pp-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.12));
  z-index: 1200;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
}

.ptp-dropdown[hidden] {
  display: none;
}

.ptp-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--pp-text, #0f172a);
}

.ptp-option[hidden] {
  display: none;
}

.ptp-option:hover,
.ptp-option.is-active {
  background: var(--pp-bg-subtle, #f1f5f9);
}

.ptp-option.is-active {
  outline: 2px solid var(--pp-accent, #3b82f6);
  outline-offset: -2px;
}

.ptp-option--custom {
  border-bottom: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 8px 8px 4px 4px;
  margin-bottom: 4px;
}

.ptp-option__main {
  font-size: 13px;
  font-weight: 600;
}

.ptp-option__meta {
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
}

.ptp-empty-state {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--pp-text-muted, #64748b);
  text-align: center;
}

.ptp-empty-state[hidden] {
  display: none;
}

.ptp-help {
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
  margin: 0;
}

/* Package type picker — multi-select chips */
.ptp-picker--multi .ptp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}
.ptp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: 0.78rem;
  background: var(--pp-accent-soft, #eff6ff);
  border-radius: 6px;
  white-space: nowrap;
}
.ptp-chip__meta {
  color: var(--pp-text-muted, #64748b);
  font-size: 0.72rem;
}
.ptp-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pp-text-muted, #94a3b8);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.ptp-chip__remove:hover { background: var(--pp-danger); }
.ptp-option--selected {
  background: var(--pp-accent-soft, #eff6ff);
  font-weight: 600;
}

/* ───────────────────────────────────────────────────────────────────────────
   Shipping Method Mapping settings page (.smm-*)
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── Table ─── */

.smm-table {
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
}

.smm-table__head {
  display: grid;
  grid-template-columns: 200px 1fr 110px 40px;
  gap: 12px;
  padding: 8px 16px;
  background: var(--pp-bg-subtle, #f8fafc);
  border-bottom: 1px solid var(--pp-line, #e2e8f0);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted, #64748b);
}

.smm-table__row {
  display: grid;
  grid-template-columns: 200px 1fr 110px 40px;
  gap: 12px;
  padding: 10px 16px;
  align-items: center;
  border-bottom: 1px solid var(--pp-line, #e2e8f0);
}

.smm-table__row:last-child {
  border-bottom: none;
}

.smm-table__cell {
  min-width: 0;
}

.smm-table__cell--status {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.smm-table__cell--actions {
  display: flex;
  justify-content: flex-end;
}

.smm-method-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  word-break: break-word;
}

/* ─── Remove button ─── */

.smm-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--pp-text-muted, #94a3b8);
  cursor: pointer;
}

.smm-remove-btn:hover {
  background: var(--pp-bg-subtle, #f1f5f9);
  color: var(--pp-danger, #ef4444);
}

/* ─── Auto-save status ─── */

.smm-save-status {
  font-size: 11px;
  font-weight: 500;
}

.smm-save-status--saving { color: var(--pp-text-muted, #94a3b8); }
.smm-save-status--saved  { color: var(--pp-success, #22c55e); }
.smm-save-status--error  { color: var(--pp-danger, #ef4444); }

/* ─── Empty state ─── */

.smm-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--pp-text-muted, #64748b);
  font-size: 13px;
  line-height: 1.5;
}

.smm-empty svg {
  margin-bottom: 12px;
}

.smm-empty p {
  margin: 0 0 4px;
}

/* ─── Add form ─── */

.smm-add-form {
  padding: 0 16px 16px;
}

.smm-add-form__fields {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.smm-add-form__name-field {
  flex: 0 0 200px;
}

.smm-add-form__picker-field {
  flex: 1;
  min-width: 0;
}

.smm-add-form__btn-field {
  flex: 0 0 auto;
}

/* ─── Shipping form: requested method + inline mapping ─── */

.ship-form__req-method {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2px 10px;
  align-items: start;
}

.ship-form__req-method-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0 10px;
  align-items: center;
}

.ship-form__req-method-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--pp-text-muted);
  text-align: right;
  white-space: nowrap;
}

.ship-form__req-method-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-text);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.ship-form__req-method-status {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ship-form__req-title,
.ship-form__req-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ship-form__req-title { flex: 0 1 auto; }
.ship-form__req-status { flex: 0 1 auto; max-width: 54%; }
.ship-form__req-method-name .btn {
  flex: 0 0 auto;
}

/* ─── Inline mapping dialog ─── */

.smm-inline-dialog {
  border: none;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
  padding: 0;
  max-width: 440px;
  width: calc(100vw - 32px);
}

.smm-inline-dialog::backdrop {
  background: rgba(0, 0, 0, 0.3);
}

.smm-inline-dialog__content {
  display: flex;
  flex-direction: column;
}

.smm-inline-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--pp-line, #e2e8f0);
}

.smm-inline-dialog__header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.smm-inline-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--pp-text-muted, #64748b);
}

.smm-inline-dialog__close:hover {
  background: var(--pp-bg-subtle, #f1f5f9);
  color: var(--pp-text, #0f172a);
}

.smm-inline-dialog__body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.smm-inline-dialog__method-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  padding: 6px 0;
}

.smm-inline-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--pp-line, #e2e8f0);
}

.smm-inline-dialog__status {
  font-size: 12px;
  font-weight: 500;
  min-height: 16px;
}

.smm-inline-dialog__status--saving { color: var(--pp-text-muted, #94a3b8); }
.smm-inline-dialog__status--saved  { color: var(--pp-success, #22c55e); }
.smm-inline-dialog__status--error  { color: var(--pp-danger, #ef4444); }

/* ═══════════════════════════════════════════════════════════════════════════
   Order Picker (.op-*)
   Class prefix: .op-* (Order Picker)
   Shares .vp-advanced, .vp-state, .vp-heading, .vp-dropdown__footer CSS
   from the variant picker — only order-specific structural elements live here.
   ─────────────────────────────────────────────────────────────────────────── */

.op-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.op-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.op-input { flex: 1 1 auto; min-width: 0; }
.op-input--with-advanced { padding-right: 36px; }

/* Advanced-search button inside the field */
.op-advanced-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 6px;
  color: var(--pp-text-muted, #64748b);
  cursor: pointer;
  padding: 0;
}
.op-advanced-btn:hover, .op-advanced-btn:focus-visible {
  background: var(--pp-bg-subtle, #f1f5f9);
  border-color: var(--pp-info-text, #3b82f6);
  color: var(--pp-info-text, #3b82f6);
  outline: none;
}
.op-advanced-btn__icon { display: block; }

/* Dropdown — position:fixed so it escapes any overflow:hidden ancestor */
.op-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 340px;
  overflow-y: auto;
  background: var(--panel, #fff);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 10px;
  box-shadow: var(--pp-shadow-lg, 0 12px 32px rgba(15,23,42,0.14));
  z-index: 1200;
}
.op-dropdown--fixed {
  position: fixed;
}

/* Row — order-specific two-column layout */
.op-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 80ms;
}
.op-row:hover, .op-row.is-active {
  background: var(--pp-bg-subtle, #f1f5f9);
}
.op-row[aria-selected="true"] {
  background: var(--pp-info-bg, #dbeafe);
}
.op-row__main { flex: 1 1 auto; min-width: 0; }
.op-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}
.op-row__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--pp-text-muted, #64748b);
  margin-top: 2px;
  flex-wrap: wrap;
}
.op-row__right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.op-row__total { font-size: 12px; font-weight: 500; color: var(--pp-text, #0f172a); }

/* Selected card */
.op-selected-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--pp-bg-subtle, #f8fafc);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 8px;
}
.op-selected-card__icon {
  flex: 0 0 auto;
  color: var(--pp-text-muted, #64748b);
}
.op-selected-card__main { flex: 1 1 auto; min-width: 0; }
.op-selected-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  display: flex;
  align-items: center;
  gap: 6px;
}
.op-selected-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.op-selected-card__change {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  width: 26px;
  height: 26px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--pp-text-muted, #94a3b8);
  flex: 0 0 auto;
}
.op-selected-card__change:hover {
  background: var(--pp-line, #e2e8f0);
  border-color: var(--pp-line, #e2e8f0);
  color: var(--pp-text, #0f172a);
}

/* Chips (multi-select) */
.op-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.op-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--pp-info-bg, #dbeafe);
  border: 1px solid var(--pp-info-border, #bfdbfe);
  border-radius: 6px;
  font-size: 12px;
  color: var(--pp-info-text, #1d4ed8);
}
.op-chip__remove {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 1px;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
}
.op-chip__remove:hover { opacity: 1; }

/* Badges */
.op-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}
.op-badge--recent { background: var(--pp-bg-subtle, #f1f5f9); color: var(--pp-text-muted, #64748b); }
.op-badge--held   { background: #fef3c7; color: #92400e; }

/* Help text */
.op-help { margin: 2px 0 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   Fulfillment Picker (.fp-*)
   Class prefix: .fp-* (Fulfillment Picker)
   Structurally identical to .op-* but for fulfillments.
   ─────────────────────────────────────────────────────────────────────────── */

.fp-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.fp-field {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fp-input { flex: 1 1 auto; min-width: 0; }
.fp-input--with-advanced { padding-right: 36px; }

.fp-advanced-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 6px;
  color: var(--pp-text-muted, #64748b);
  cursor: pointer;
  padding: 0;
}
.fp-advanced-btn:hover, .fp-advanced-btn:focus-visible {
  background: var(--pp-bg-subtle, #f1f5f9);
  border-color: var(--pp-info-text, #3b82f6);
  color: var(--pp-info-text, #3b82f6);
  outline: none;
}
.fp-advanced-btn__icon { display: block; }

.fp-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 340px;
  overflow-y: auto;
  background: var(--panel, #fff);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 10px;
  box-shadow: var(--pp-shadow-lg, 0 12px 32px rgba(15,23,42,0.14));
  z-index: 1200;
}
.fp-dropdown--fixed { position: fixed; }

.fp-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 80ms;
}
.fp-row:hover, .fp-row.is-active { background: var(--pp-bg-subtle, #f1f5f9); }
.fp-row[aria-selected="true"]    { background: var(--pp-info-bg, #dbeafe); }
.fp-row__main { flex: 1 1 auto; min-width: 0; }
.fp-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fp-row__id { font-weight: 400; }
.fp-row__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--pp-text-muted, #64748b);
  margin-top: 2px;
  flex-wrap: wrap;
}
.fp-row__right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.fp-row__units { font-size: 11px; color: var(--pp-text-muted, #64748b); }

.fp-selected-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--pp-bg-subtle, #f8fafc);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 8px;
}
.fp-selected-card__icon { flex: 0 0 auto; color: var(--pp-text-muted, #64748b); }
.fp-selected-card__main { flex: 1 1 auto; min-width: 0; }
.fp-selected-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  display: flex;
  align-items: center;
  gap: 6px;
}
.fp-selected-card__meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.fp-selected-card__change {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  width: 26px;
  height: 26px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--pp-text-muted, #94a3b8);
  flex: 0 0 auto;
}
.fp-selected-card__change:hover { background: var(--pp-line, #e2e8f0); color: var(--pp-text, #0f172a); }

.fp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.fp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--pp-info-bg, #dbeafe);
  border: 1px solid var(--pp-info-border, #bfdbfe);
  border-radius: 6px;
  font-size: 12px;
  color: var(--pp-info-text, #1d4ed8);
}
.fp-chip__remove {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 1px;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
}
.fp-chip__remove:hover { opacity: 1; }
.fp-help { margin: 2px 0 0; }

/* =========================================================
   FLOOR MODE — layout, tiles, topbar, lookup, announcements
   ========================================================= */

/* ── Shell & viewport ─────────────────────────────────── */
body.pp-body.floor-body,
body.floor-body {
  background: var(--bg, #f6f7f9);
  color: var(--ink, #1f2933);
  min-height: 100dvh;
  min-height: 100vh;
}

.floor-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-height: 100vh;
}

/* In floor mode, .main fills the remaining height below the dark topbar
   and doesn't need the desktop border-radius / margin offset. */
.floor-body .main {
  border-radius: 0;
  min-height: 0;
  flex: 1;
}

/* ── Topbar ───────────────────────────────────────────── */
.floor-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #0f172a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 56px;
  overflow: visible;
}

/* Chip panel overrides for the dark topbar */
.floor-topbar .location-chip,
.floor-topbar .station-chip {
  position: relative;
}
.floor-topbar .location-chip-panel,
.floor-topbar .station-chip-panel {
  background: #1e293b;
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 300;
  right: auto;
  left: 0;
}
.floor-topbar .location-chip-panel-eyebrow,
.floor-topbar .station-chip-panel-eyebrow { color: #64748b; }
.floor-topbar .location-chip-item,
.floor-topbar .station-chip-item { color: #e2e8f0; }
.floor-topbar .location-chip-item:hover,
.floor-topbar .station-chip-item:hover { background: rgba(255,255,255,0.06); }
.floor-topbar .location-chip-item.is-current,
.floor-topbar .station-chip-item.is-current { color: #94a3b8; }
.floor-topbar .location-chip-divider,
.floor-topbar .station-chip-divider { border-color: rgba(255,255,255,0.1); }
.floor-topbar .location-chip-item--muted,
.floor-topbar .station-chip-item--muted { color: #64748b; }
.floor-topbar .location-chip-pill,
.floor-topbar .station-chip-pill {
  color: #e2e8f0;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}
.floor-topbar .location-chip-pill--unset,
.floor-topbar .station-chip-pill--unset {
  color: #f59e0b;
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.3);
}

/* In floor mode the topbar sits directly below the dark nav bar,
   so it doesn't need the top-right radius from the desktop shell. */
.floor-body .topbar {
  border-top-right-radius: 0;
}

@media (display-mode: standalone) {
  .floor-topbar {
    padding-top: max(env(safe-area-inset-top, 0px), 10px);
  }
}

.floor-standalone .floor-topbar {
  padding-top: max(env(safe-area-inset-top, 0px), 10px);
}

/* Legacy: kept for batch engine views that may still reference this class */
.floor-topbar--engine {
  background: var(--panel, #ffffff);
  border-bottom: 1px solid var(--line, #e5e7eb);
}

/* Floor topbar reuses the .header-brand + .header-logo-mark classes
   from the main app's global header for the logo. */
.floor-topbar .header-brand { flex-shrink: 0; }
.floor-topbar .header-logo-mark { height: 24px; }

.floor-topbar__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  /* No overflow: hidden here — the chip dropdown panels are position:absolute
     and need to be visible below the topbar. Use overflow: visible (default). */
}

.floor-topbar__network {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #f59e0b;
  color: #1c1917;
  white-space: nowrap;
}

/* ── Scan barcode shortcut (floor topbar) ───────────────── */
.floor-topbar__lookup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  transition: color 0.15s, background 0.15s;
  margin-left: auto;
  flex-shrink: 0;
}
.floor-topbar__lookup-btn svg { width: 20px; height: 20px; }
.floor-topbar__lookup-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

/* ── User dropdown ────────────────────────────────────── */
.floor-topbar__user { position: relative; margin-left: 4px; }
.floor-topbar__user-trigger {
  list-style: none;
  cursor: pointer;
}
.floor-topbar__user-trigger::-webkit-details-marker { display: none; }

.floor-topbar__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  user-select: none;
}

.floor-topbar__user-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #1e293b;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 200;
  padding: 8px 0;
}

.floor-topbar__user-name {
  padding: 8px 14px 4px;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.floor-topbar__user-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 4px 0;
}

.floor-topbar__user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 14px;
  color: #e2e8f0;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.floor-topbar__user-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.floor-topbar__user-item:hover { background: rgba(255,255,255,0.06); }
.floor-topbar__user-item--danger { color: #f87171; }

/* ── Home screen ──────────────────────────────────────── */
.floor-home {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

/* ── Resume banner ────────────────────────────────────── */
.floor-home__resume-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--accent-weak, #e0e7ff);
  border: 1px solid var(--accent, #2563eb);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.floor-home__resume-info { flex: 1; min-width: 0; }
.floor-home__resume-type {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent, #2563eb);
}
.floor-home__resume-progress { font-size: 12px; color: var(--muted, #6b7280); }
.floor-home__resume-btn { flex-shrink: 0; }
.floor-home__resume-more { font-size: 12px; color: var(--muted, #6b7280); white-space: nowrap; }

/* ── Action tiles grid ────────────────────────────────── */
.floor-home__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

@media (max-width: 480px) {
  .floor-home__grid { grid-template-columns: repeat(3, 1fr); }
}

.floor-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 88px;
  padding: 14px 8px;
  background: var(--panel, #ffffff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink, #1f2933);
  cursor: pointer;
  transition: background 0.1s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.floor-tile:hover, .floor-tile:focus {
  background: var(--soft, #f1f5f9);
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}
.floor-tile:active { transform: scale(0.97); }

.floor-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.floor-tile__icon svg { width: 28px; height: 28px; }

.floor-tile__label {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.01em;
}

/* Tile color accents */
.floor-tile--pick    .floor-tile__icon { color: #059669; }
.floor-tile--putaway .floor-tile__icon { color: #2563eb; }
.floor-tile--replenish .floor-tile__icon { color: #7c3aed; }
.floor-tile--receive .floor-tile__icon { color: #ea580c; }
.floor-tile--lookup  .floor-tile__icon { color: #db2777; }
.floor-tile--count   .floor-tile__icon { color: #d97706; }
.floor-tile--print   .floor-tile__icon { color: #6b7280; }

/* ── Announcements ────────────────────────────────────── */
.floor-home__announcements { margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }

.floor-announcement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ink, #1f2933);
}
.floor-announcement__icon { flex-shrink: 0; }
.floor-announcement__icon svg { width: 18px; height: 18px; color: #d97706; }
.floor-announcement__body { flex: 1; min-width: 0; }
.floor-announcement__message { font-size: 14px; font-weight: 500; margin: 0 0 2px; }
.floor-announcement__meta { font-size: 12px; color: #92400e; }
.floor-announcement__dismiss {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: #92400e;
  flex-shrink: 0;
}
.floor-announcement__dismiss svg { width: 16px; height: 16px; }
.floor-announcement__dismiss:hover { color: #78350f; }
.floor-announcement__more-btn {
  appearance: none;
  background: none;
  border: 1px solid #fbbf24;
  border-radius: 6px;
  color: #92400e;
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
  text-align: center;
  width: 100%;
}
.floor-announcement__more-btn:hover { background: rgba(251,191,36,0.1); }

/* ── Announcements header (manage link) ──────────────── */
.floor-home__announcements-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2px;
}
.floor-home__announcements-manage {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent, #2563eb);
  text-decoration: none;
}
.floor-home__announcements-manage:hover { text-decoration: underline; }

/* ── Announcements form spacing ──────────────────────── */
.ann-form > .panel + .panel { margin-top: 20px; }
.ann-form > .form-actions    { margin-top: 24px; }

/* ── My Shift card ────────────────────────────────────── */
.floor-my-shift {
  background: var(--panel, #ffffff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.floor-my-shift__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.floor-my-shift__summary::-webkit-details-marker { display: none; }
.floor-my-shift__title { font-size: 14px; font-weight: 700; }
.floor-my-shift__toggle-label { font-size: 12px; color: var(--muted, #6b7280); }
.floor-my-shift__body { padding: 0 16px 12px; }
.floor-my-shift__empty { font-size: 13px; margin: 4px 0; }
.floor-my-shift__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  border-top: 1px solid var(--line, #e5e7eb);
}
.floor-my-shift__row svg { width: 16px; height: 16px; color: var(--muted, #6b7280); flex-shrink: 0; }

/* ── Live map embed ───────────────────────────────────── */
.floor-home__map {
  background: var(--panel, #ffffff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}
.floor-home__map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.floor-home__map-title { font-size: 13px; font-weight: 600; }
.floor-home__map-link { font-size: 12px; color: var(--accent, #2563eb); text-decoration: none; }
.floor-home__map-canvas { height: 200px; overflow: hidden; }

/* ── Station prompt ───────────────────────────────────── */
.floor-station-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 24px 16px;
}
.floor-station-prompt__card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  padding: 28px 20px 20px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 4px 16px rgba(15,23,42,0.08);
}
.floor-station-prompt__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-weak, #e0e7ff);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.floor-station-prompt__icon svg { width: 24px; height: 24px; color: var(--accent, #2563eb); }
.floor-station-prompt__title { font-size: 20px; font-weight: 700; text-align: center; margin: 0 0 6px; }
.floor-station-prompt__sub { font-size: 13px; color: var(--muted, #6b7280); text-align: center; margin: 0 0 20px; }
.floor-station-prompt__list { display: flex; flex-direction: column; gap: 8px; }
.floor-station-prompt__group-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #6b7280);
  margin-bottom: 4px;
}
.floor-station-prompt__station-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: var(--soft, #f1f5f9);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink, #1f2933);
  text-align: left;
}
.floor-station-prompt__station-btn:hover { background: var(--line, #e5e7eb); }
.floor-station-prompt__station-name { flex: 1; font-size: 15px; font-weight: 500; }
.floor-station-prompt__station-kind { font-size: 12px; color: var(--muted, #6b7280); }
.floor-station-prompt__station-arrow { width: 16px; height: 16px; color: var(--muted, #6b7280); flex-shrink: 0; }
.floor-station-prompt__skip {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted, #6b7280);
  text-decoration: none;
}
.floor-station-prompt__skip:hover { color: var(--ink, #1f2933); }

/* ── Lookup ───────────────────────────────────────────── */
.floor-lookup { padding: 20px 16px; max-width: 560px; margin: 0 auto; }
.floor-lookup__scan-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}
.floor-lookup__scan-first {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: min(460px, 58vh);
  padding: 18px 4px;
}
.floor-lookup__scan-first[hidden] {
  display: none !important;
}
.floor-lookup__scan-art {
  width: 128px;
  height: 128px;
  border-radius: 32px;
  display: grid;
  place-items: center;
  color: var(--accent, #2563eb);
  background:
    radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.18), transparent 34%),
    var(--soft, #f8fafc);
  border: 1px solid var(--line, #e5e7eb);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}
.floor-lookup__scan-art svg {
  width: 84px;
  height: 84px;
}
.floor-lookup__scan-title {
  margin: 18px 0 8px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--ink, #1f2933);
}
.floor-lookup__scan-copy {
  max-width: 360px;
  margin: 0;
  color: var(--muted, #6b7280);
  font-size: 14px;
  line-height: 1.45;
}
.floor-lookup__scan-copy strong {
  color: var(--ink, #1f2933);
}
.floor-lookup__scan-actions {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.floor-lookup__scan-actions .btn {
  min-height: 48px;
  justify-content: center;
}
.floor-lookup__scan-hint {
  margin: 12px 0 0;
  font-size: 12px;
}
.floor-lookup__manual-search {
  width: 100%;
}
.floor-lookup__manual-search--scan-first {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}
.floor-lookup__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
}
.floor-lookup__title-icon { display: inline-flex; align-items: center; }
.floor-lookup__title-icon svg { width: 22px; height: 22px; color: #db2777; }
.floor-lookup__hint { font-size: 13px; margin: 10px 0 0; }

/* Barcode form — general lookup input */
.floor-lookup__barcode-form { width: 100%; }
.floor-lookup__barcode-field {
  display: flex;
  gap: 8px;
}
.floor-lookup__barcode-input {
  flex: 1;
  font-size: 16px;
  padding: 10px 14px;
}
.floor-lookup__barcode-submit { flex-shrink: 0; }

.floor-lookup__or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--pp-text-muted, #94a3b8);
  font-size: 13px;
}
.floor-lookup__or-divider::before,
.floor-lookup__or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--pp-border, #e2e8f0);
}

.floor-lookup__product-search {
  width: 100%;
}
.floor-lookup__product-search-toggle {
  cursor: pointer;
  font-size: 14px;
  color: var(--pp-text-secondary, #64748b);
  list-style: none;
}
.floor-lookup__product-search-toggle::-webkit-details-marker { display: none; }
.floor-lookup__product-search-toggle::before {
  content: "▸ ";
  font-size: 11px;
}
.floor-lookup__product-search[open] > .floor-lookup__product-search-toggle::before {
  content: "▾ ";
}
.floor-lookup__product-search-toggle:hover { color: var(--pp-text-primary, #1e293b); }
.floor-lookup__product-search-body { margin-top: 12px; }

.floor-lookup__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.floor-lookup__back {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--accent, #2563eb);
  text-decoration: none;
}
.floor-lookup__back svg { width: 18px; height: 18px; }

.floor-lookup__product-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.floor-lookup__product-image { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.floor-lookup__product-image img { width: 100%; height: 100%; object-fit: cover; }
.floor-lookup__product-name { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.floor-lookup__product-variant { font-size: 13px; }

.floor-lookup__stock-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.floor-lookup__location-label { font-size: 13px; color: var(--muted, #6b7280); margin-bottom: 12px; }
.floor-lookup__stock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.floor-lookup__stock-cell { text-align: center; }
.floor-lookup__stock-num { display: block; font-size: 28px; font-weight: 800; color: var(--ink, #1f2933); }
.floor-lookup__stock-num--available { color: #059669; }
.floor-lookup__stock-num--committed { color: #d97706; }
.floor-lookup__stock-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #6b7280); margin-top: 2px; }

.floor-lookup__bins-heading { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.floor-lookup__bin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--line, #e5e7eb);
}
.floor-lookup__bin-code { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 600; width: 80px; flex-shrink: 0; }
.floor-lookup__bin-bar-wrap { flex: 1; height: 6px; background: var(--soft, #f1f5f9); border-radius: 3px; overflow: hidden; }
.floor-lookup__bin-bar { display: block; height: 100%; background: var(--accent, #2563eb); border-radius: 3px; }
.floor-lookup__bin-qty { font-size: 12px; color: var(--muted, #6b7280); white-space: nowrap; }
.floor-lookup__no-stock { font-size: 14px; margin: 8px 0 0; }

.floor-lookup__actions { margin-bottom: 16px; }
.floor-lookup__actions-heading { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.floor-lookup__actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.floor-lookup__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 9px 14px;
}
.floor-lookup__action-btn svg { width: 15px; height: 15px; }

.floor-lookup__movements { margin-bottom: 16px; }
.floor-lookup__movements-heading { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.floor-lookup__movement-row {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line, #e5e7eb);
  font-size: 13px;
}
.floor-lookup__movement-delta {
  font-weight: 700;
  font-family: ui-monospace, monospace;
  width: 36px;
  flex-shrink: 0;
}
.floor-lookup__movement-delta.positive { color: #059669; }
.floor-lookup__movement-delta.negative { color: var(--danger, #ef4444); }
.floor-lookup__movement-info { display: flex; flex-direction: column; gap: 2px; }
.floor-lookup__movement-reason { font-weight: 500; }

/* Recent lookups rail */
.floor-lookup__recents { margin-top: 16px; }
.floor-lookup__recents-heading { font-size: 13px; font-weight: 600; color: var(--muted, #6b7280); margin: 0 0 8px; }
.floor-lookup__recents-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.floor-lookup__recent-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 12px;
  background: var(--panel, #ffffff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink, #1f2933);
  font-size: 12px;
  transition: background 0.1s;
}
.floor-lookup__recent-chip:hover { background: var(--soft, #f1f5f9); }
.floor-lookup__recent-chip--active { border-color: var(--accent, #2563eb); }
.floor-lookup__chip-sku { font-weight: 700; font-family: ui-monospace, monospace; }
.floor-lookup__chip-name { color: var(--muted, #6b7280); }

/* ── Print page ───────────────────────────────────────── */
.floor-print { padding: 20px 16px; max-width: 480px; margin: 0 auto; }
.floor-print__header { margin-bottom: 20px; }
.floor-print__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}
.floor-print__title svg { width: 22px; height: 22px; color: var(--muted, #6b7280); }
.floor-print__station { font-size: 13px; margin: 0; }
.floor-print__body { }
.floor-print__hint { font-size: 13px; margin: 0 0 16px; }
.floor-print__types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.floor-print__type-btn { min-height: 100px; border: none; cursor: pointer; font-family: inherit; }
.floor-print__no-station,
.floor-print__no-location { margin-bottom: 16px; }

/* ── Input font-size: prevents iOS auto-zoom on focus ── */
/* iOS zooms when an input has font-size < 16px. Floor inputs
   must be ≥16px so the viewport doesn't jump. */
.floor-body input,
.floor-body textarea,
.floor-body select {
  font-size: max(16px, 1em);
}

/* ── Offline indicator (body class) ──────────────────── */
.floor-offline .floor-topbar {
  border-bottom-color: #f59e0b;
}

/* ── Safe-area padding (iOS notch) ───────────────────── */
@media (display-mode: standalone) {
  .floor-body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Class prefix: .ss-* (Searchable Select)
   ─────────────────────────────────────────────────────────────────────────── */

.ss-picker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.ss-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ss-display {
  display: none;
}

.ss-input {
  width: 100%;
}

/* When there IS a selection, show the display label and style the input as
   a search-on-click affordance that overlays when focused. */
.ss-picker--has-selection .ss-field {
  position: relative;
}

.ss-picker--has-selection .ss-display {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #1f2933);
  background: var(--soft, #f1f5f9);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-picker--has-selection .ss-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.ss-picker--has-selection .ss-input:focus {
  opacity: 1;
  position: relative;
  cursor: text;
}

.ss-picker--has-selection .ss-input:focus + .ss-display,
.ss-picker--has-selection .ss-input:focus ~ .ss-display {
  display: none;
}

/* Compact mode: no display chip, just the input */
.ss-picker--compact .ss-display {
  display: none !important;
}

.ss-picker--compact .ss-input {
  position: relative !important;
  opacity: 1 !important;
  cursor: text !important;
}

/* ─── Dropdown ─── */

.ss-dropdown {
  position: fixed;
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  z-index: 1200;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
}

.ss-dropdown[hidden] {
  display: none;
}

/* ─── Group headers ─── */

.ss-group-header {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7280);
  user-select: none;
}

.ss-group-header[hidden] {
  display: none;
}

/* ─── Options ─── */

.ss-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink, #1f2933);
}

.ss-option[hidden] {
  display: none;
}

.ss-option:hover,
.ss-option.is-active {
  background: var(--soft, #f1f5f9);
}

.ss-option.is-active {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: -2px;
}

.ss-option.is-selected {
  font-weight: 600;
}

.ss-option__label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Empty state ─── */

.ss-empty-state {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--muted, #6b7280);
  text-align: center;
}

.ss-empty-state[hidden] {
  display: none;
}

/* ─── Help text ─── */

.ss-help {
  font-size: 12px;
  color: var(--muted, #6b7280);
  margin: 0;
}

/* ─── Inside the rule builder: match existing select dimensions ─── */

.srb-condition-row .ss-picker,
.srb-action-row .ss-picker {
  width: 100%;
}

.srb-condition-row .ss-display,
.srb-action-row .ss-display {
  height: 34px;
  font-size: 13px;
}

.srb-condition-row .ss-input,
.srb-action-row .ss-input {
  height: 34px;
  font-size: 13px;
}

/* ───────────────────────────────────────────────────────────────────────────
   Class prefix: .country-* (Country Picker)
   ─────────────────────────────────────────────────────────────────────────── */

.country-picker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.country-field {
  position: relative;
  min-width: 0;
}

.country-input {
  width: 100%;
}

.country-selected-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  background: var(--panel, #fff);
}

.country-flag,
.country-option__code,
.country-chip__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--soft, #f1f5f9);
  color: var(--muted, #64748b);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.country-selected-card__main {
  flex: 1;
  min-width: 0;
}

.country-selected-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1f2933);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.country-selected-card__meta {
  font-size: 12px;
  color: var(--muted, #64748b);
}

.country-selected-card__change,
.country-chip__remove {
  border: 0;
  background: transparent;
  color: var(--muted, #64748b);
  cursor: pointer;
}

.country-selected-card__change:hover,
.country-chip__remove:hover {
  color: var(--danger, #dc2626);
}

.country-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.country-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 6px 4px 4px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 999px;
  background: var(--panel, #fff);
  font-size: 12px;
}

.country-chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-dropdown {
  position: fixed;
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  z-index: 1200;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}

.country-dropdown[hidden],
.country-group-header[hidden],
.country-option[hidden],
.country-empty-state[hidden] {
  display: none;
}

.country-group-header {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7280);
  user-select: none;
}

.country-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink, #1f2933);
}

.country-option:hover,
.country-option.is-active {
  background: var(--soft, #f1f5f9);
}

.country-option.is-active {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: -2px;
}

.country-option.is-selected {
  font-weight: 600;
}

.country-option__name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.country-empty-state {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--muted, #6b7280);
  text-align: center;
}

.country-help {
  font-size: 12px;
  color: var(--muted, #6b7280);
  margin: 0;
}

/* ─── Reroute Modal ─────────────────────────────────────────────────── */

.reroute-modal {
  width: min(640px, 94vw);
  max-height: 88vh;
  padding: 0;
  border: none;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);
  background: var(--pp-surface, #fff);
}
.reroute-modal::backdrop {
  background: rgba(0,0,0,0.45);
}
.reroute-modal__chrome {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}
.reroute-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--pp-border);
}
.reroute-modal__header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}
.reroute-modal__close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: 6px;
  color: var(--pp-text-muted);
  transition: background 0.15s;
}
.reroute-modal__close:hover {
  background: var(--pp-surface-2, #f3f4f6);
}
.reroute-modal__mode-tabs {
  display: flex;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--pp-border);
}
.reroute-mode-tab {
  padding: 10px 16px;
  font-size: 0.84rem;
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--pp-text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.reroute-mode-tab:hover {
  color: var(--pp-text);
}
.reroute-mode-tab--active {
  color: var(--pp-primary, #2563eb);
  border-bottom-color: var(--pp-primary, #2563eb);
}
.reroute-modal__section {
  padding: 16px 24px;
}
.reroute-modal__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--pp-text);
}
.reroute-modal__location-select {
  width: 100%;
  max-width: 360px;
}
.reroute-modal__no-locations {
  color: var(--pp-text-muted);
  font-size: 0.84rem;
  padding: 8px 0;
}
.reroute-modal__table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.reroute-modal__table-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pp-text);
}
.reroute-modal__selected-count {
  font-size: 0.78rem;
  color: var(--pp-primary, #2563eb);
  font-weight: 500;
}
.reroute-modal__table-wrap {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--pp-border);
  border-radius: 8px;
}
.reroute-table {
  width: 100%;
  border-collapse: collapse;
}
.reroute-table th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--pp-text-muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--pp-border);
  text-align: left;
  background: var(--pp-surface-2, #f9fafb);
  position: sticky;
  top: 0;
  z-index: 1;
}
.reroute-table th.num { text-align: right; }
.reroute-table td {
  padding: 10px 12px;
  font-size: 0.84rem;
  border-bottom: 1px solid var(--pp-border);
  vertical-align: middle;
}
.reroute-table td.num { text-align: right; }
.reroute-table tr:last-child td { border-bottom: none; }
.reroute-table__check-col {
  width: 36px;
  text-align: center;
}
.reroute-table__item-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reroute-table__item-name {
  font-weight: 500;
  font-size: 0.84rem;
}
.reroute-table__item-sku {
  font-size: 0.72rem;
  color: var(--pp-text-muted);
  font-family: var(--font-mono, monospace);
}
.reroute-table__item-compact {
  font-size: 0.82rem;
  line-height: 1.5;
}
.reroute-stock--ok {
  color: var(--pp-success, #16a34a);
  font-weight: 600;
}
.reroute-stock--warn {
  color: var(--pp-warning, #d97706);
  font-weight: 600;
}
.reroute-status-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.reroute-status-pill--ok {
  background: var(--pp-success-bg, #dcfce7);
  color: var(--pp-success, #16a34a);
}
.reroute-status-pill--warn {
  background: var(--pp-warning-bg, #fef3c7);
  color: var(--pp-warning, #d97706);
}
.reroute-modal__summary {
  padding: 0 24px 12px;
}
.reroute-summary__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.84rem;
  margin-bottom: 6px;
}
.reroute-summary__row--ok {
  background: var(--pp-success-bg, #dcfce7);
  color: var(--pp-success, #16a34a);
}
.reroute-summary__row--warn {
  background: var(--pp-warning-bg, #fef3c7);
  color: var(--pp-warning-text, #92400e);
}
.reroute-modal__warning-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 24px 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--pp-warning-bg, #fef3c7);
  color: var(--pp-warning-text, #92400e);
  font-size: 0.82rem;
}
.reroute-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--pp-border);
}

/* Bulk reroute modal additions */
.reroute-modal__bulk-stats {
  display: flex;
  gap: 24px;
  padding: 12px 0;
}
.reroute-modal__bulk-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.reroute-modal__bulk-stat-value {
  font-size: 1.25rem;
  font-weight: 600;
}
.reroute-modal__bulk-stat-label {
  font-size: 0.75rem;
  color: var(--pp-muted);
}
.reroute-modal__loading {
  text-align: center;
  padding: 24px 0;
}
.reroute-summary__row--info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.85rem;
  color: var(--pp-muted);
}

/* Settings appearance picker */
.settings-appearance .panel-header {
  margin-bottom: 18px;
}

.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.theme-option {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--pp-border);
  border-radius: 14px;
  background: var(--pp-surface);
  cursor: pointer;
  transition: border-color 0.15s var(--pp-ease), box-shadow 0.15s var(--pp-ease), transform 0.15s var(--pp-ease);
}

.theme-option:hover {
  border-color: var(--pp-border-strong);
  box-shadow: var(--pp-shadow-md);
  transform: translateY(-1px);
}

.theme-option.is-selected {
  border-color: var(--pp-accent);
  box-shadow: 0 0 0 1px var(--pp-accent), 0 12px 28px rgba(15, 23, 42, 0.08);
}

.theme-option__input {
  position: absolute;
  inset: 14px 14px auto auto;
  accent-color: var(--pp-accent);
}

.theme-option__preview {
  display: block;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.theme-option__mini-shell {
  display: grid;
  grid-template-columns: 34px 76px 1fr;
  grid-template-rows: 28px 86px;
  min-height: 114px;
  background: #f8fafc;
}

.theme-option__mini-rail,
.theme-option__mini-header {
  background: var(--theme-shell);
}

.theme-option__mini-rail {
  grid-row: 1 / -1;
}

.theme-option__mini-header {
  grid-column: 2 / -1;
}

.theme-option__mini-sidebar {
  background: var(--theme-sidebar);
  border-top-left-radius: 10px;
}

.theme-option__mini-content {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  background: #ffffff;
}

.theme-option__mini-content span {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: #e5e7eb;
}

.theme-option__mini-content span:first-child {
  width: 46%;
  background: var(--theme-accent);
}

.theme-option__mini-content span:nth-child(2) {
  width: 74%;
  background: var(--theme-accent-soft);
}

.theme-option__mini-content span:nth-child(3) {
  width: 60%;
}

.theme-option__body {
  display: grid;
  gap: 6px;
}

.theme-option__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.theme-option__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pp-text);
}

.theme-option__badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pp-accent-soft);
  color: var(--pp-accent);
  font-size: 11px;
  font-weight: 700;
}

.theme-option__tagline {
  color: var(--pp-text);
  font-size: 13px;
  font-weight: 500;
}

.theme-option__desc {
  color: var(--pp-text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.theme-option__swatches {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.theme-option__swatches span {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
}

/* ─── Cart Scanner Overlay (cart_scanner_controller.js) ─────────────────── */
.cart-scanner-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #000;
  display: flex; flex-direction: column;
  color: #fff; font-family: var(--font-sans, system-ui, sans-serif);
}
.cart-scanner-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: rgba(0,0,0,0.7);
  flex-shrink: 0;
}
.cart-scanner-count { font-size: 16px; font-weight: 600; }
.cart-scanner-toolbar-actions { display: flex; gap: 8px; }
.cart-scanner-btn {
  border: none; border-radius: 6px; cursor: pointer;
  padding: 8px 16px; font-size: 14px; font-weight: 500;
}
.cart-scanner-btn--light  { background: rgba(255,255,255,0.15); color: #fff; }
.cart-scanner-btn--primary { background: var(--accent, #6366f1); color: #fff; }
.cart-scanner-btn--light:hover  { background: rgba(255,255,255,0.25); }
.cart-scanner-btn--primary:hover { opacity: 0.9; }
.cart-scanner-viewfinder {
  position: relative;
  flex: 0 0 55vh; overflow: hidden; background: #000;
}
.cart-scanner-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cart-scanner-reticle {
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 220px; height: 140px;
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.4);
  pointer-events: none;
}
.cart-scanner-list-header {
  padding: 10px 16px 4px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.cart-scanner-list {
  flex: 1; overflow-y: auto;
  padding: 0 16px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.cart-scanner-list-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-radius: 6px;
  font-size: 13px; font-family: monospace;
  background: rgba(255,255,255,0.07);
}
.cart-scanner-list-row--valid   { background: rgba(34,197,94,0.2); }
.cart-scanner-list-row--invalid { background: rgba(239,68,68,0.2); }
.cart-scanner-list-row--pending { background: rgba(255,255,255,0.07); }
.cart-scanner-badge {
  font-size: 11px; padding: 2px 6px; border-radius: 4px;
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8);
}
.cart-scanner-list-row--valid   .cart-scanner-badge { background: rgba(34,197,94,0.3); color: #86efac; }
.cart-scanner-list-row--invalid .cart-scanner-badge { background: rgba(239,68,68,0.3); color: #fca5a5; }

/* ── Cart show page ──────────────────────────────────────── */
.cart-show__batch-banner { margin-bottom: 16px; }
.cart-show__bins-panel { margin-bottom: 24px; }
.cart-show__bin-count { font-size: 13px; font-weight: 400; margin-left: 6px; }
.cart-show__rescan-banner { margin: 16px 16px 0; border-radius: 6px; }
.cart-show__rescan-text { margin: 4px 0 10px; }
.cart-show__col-pos { width: 60px; }
.cart-show__col-remove { width: 60px; }
.cart-show__add-bin-row {
  padding: 12px 16px;
  border-top: 1px solid var(--line-light, #e5e7eb);
}
.cart-show__add-bin-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cart-show__add-bin-form .input {
  flex: 1;
  margin: 0;
}

.cart-show__body {
  display: block;
}

.cart-show__body--with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 540px);
  gap: 24px;
  align-items: start;
}

.cart-show__main {
  min-width: 0;
}

.cart-show__sidebar {
  min-width: 0;
  position: sticky;
  top: 72px;
}

.cart-show__sidebar .panel {
  margin-bottom: 0;
}

.cart-visualization {
  overflow: hidden;
}

.cart-visualization__header {
  align-items: flex-start;
}

.cart-visualization__subtitle {
  margin: 4px 0 0;
}

.cart-visualization__cart {
  padding: 18px 18px 22px;
}

.cart-visualization__handle {
  width: 54%;
  height: 18px;
  margin: 0 auto -2px;
  border: 3px solid #94a3b8;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
}

.cart-visualization__frame {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 14px 12px 16px;
  border: 3px solid #64748b;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.28) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(180deg, rgba(148, 163, 184, 0.22) 1px, transparent 1px) 0 0 / 18px 18px,
    #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.cart-visualization__frame::before,
.cart-visualization__frame::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: #94a3b8;
}

.cart-visualization__frame::before {
  left: 7px;
}

.cart-visualization__frame::after {
  right: 7px;
}

.cart-visualization__shelf {
  display: grid;
  grid-template-columns: repeat(var(--cart-columns), minmax(0, 1fr));
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 3px solid #94a3b8;
}

.cart-visualization__shelf:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.cart-visualization__slot {
  min-height: 72px;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.cart-visualization__slot.is-filled {
  border-color: rgba(37, 99, 235, 0.5);
  background: linear-gradient(180deg, #eff6ff, #bfdbfe);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}

.cart-visualization__slot.has-named-color {
  background-image: none;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12);
}

.cart-visualization__slot.is-empty {
  align-items: center;
  border-style: dashed;
  color: #94a3b8;
  justify-content: center;
}

.cart-visualization__slot-number {
  width: fit-content;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.cart-visualization__bin-code {
  color: #1e3a8a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-visualization__bin-code:hover {
  text-decoration: underline;
}

.cart-visualization__slot.has-named-color .cart-visualization__slot-number {
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
}

.cart-visualization__slot.has-named-color .cart-visualization__bin-code {
  color: inherit;
}

.cart-visualization__axle {
  display: flex;
  justify-content: space-between;
  width: 70%;
  height: 20px;
  margin: 0 auto;
  padding: 0 14px;
  border-top: 4px solid #64748b;
}

.cart-visualization__axle span {
  width: 18px;
  height: 18px;
  margin-top: -2px;
  border: 4px solid #475569;
  border-radius: 999px;
  background: #f8fafc;
}

.cart-visualization__overflow {
  margin: -6px 18px 16px;
}

.cart-visualization__legend {
  display: flex;
  gap: 14px;
  padding: 0 18px 16px;
  color: #64748b;
  font-size: 12px;
}

.cart-visualization__legend span {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.cart-visualization__legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: inline-block;
}

.cart-visualization__legend-swatch.is-filled {
  background: #bfdbfe;
  border: 1px solid rgba(37, 99, 235, 0.5);
}

.cart-visualization__legend-swatch.is-empty {
  background: #ffffff;
  border: 1px dashed #cbd5e1;
}

@media (max-width: 1280px) {
  .cart-show__body--with-sidebar {
    grid-template-columns: 1fr;
  }

  .cart-show__sidebar {
    position: static;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Shipment show
   ═══════════════════════════════════════════════════════════════════ */

.shipment-show-layout.detail-layout {
  padding: 24px;
}

.shipment-show-layout .detail-main {
  gap: 0;
}

.shipment-show-layout .detail-main > .tabs__panel {
  padding: 0;
}

.shipment-show-layout .panel,
.shipment-show-layout .panel.table-panel {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.shipment-line-item-cell {
  min-width: 220px;
}

.shipment-line-thumb-hover {
  display: inline-flex;
  vertical-align: middle;
  cursor: zoom-in;
}

.item-cell--shipment-line {
  justify-content: flex-start;
}

.shipment-line-item-details {
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shipment-line-item-details .shipment-line-item-details__title {
  max-width: min(420px, 55vw);
}

.shipment-line-item-sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.35;
}

.shipment-line-thumb {
  width: 40px;
  height: 40px;
}

.shipment-invoice-cell {
  min-width: 120px;
}

.shipment-bulk-receive-btn {
  white-space: nowrap;
}

.shipment-expected-cell {
  min-width: 96px;
}

.shipment-blind-qty {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: #0f172a;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  filter: blur(5px);
  user-select: none;
}

.shipment-blind-qty--disabled {
  cursor: default;
}

.shipment-blind-qty--revealed {
  filter: none;
  cursor: default;
}

.shipment-receive-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.shipment-receive-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qty-stepper--compact {
  height: 30px;
  border-radius: 8px;
}
.qty-stepper--compact .qty-stepper__btn {
  width: 26px;
  font-size: 14px;
}
.qty-stepper--compact .qty-stepper__input {
  width: 48px;
  font-size: 13px;
}

/* ── Receive split button (Receive + dropdown caret) ─────────────────── */

.receive-split-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}

.receive-split {
  display: flex;
  align-items: stretch;
}

.receive-split__main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  white-space: nowrap;
}

.receive-split__dropdown {
  position: relative;
}

.receive-split__caret {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.receive-split__caret[aria-expanded="true"] svg,
.receive-split__dropdown[open] > .receive-split__caret svg {
  transform: rotate(180deg);
}

.receive-split__panel {
  z-index: 520;
}

/* Row action menus (.receive-split caret) use position:absolute; they must
   escape both .table-wrap (overflow-x:auto clips Y) and .table-panel
   (overflow:hidden for corner masking — see .table-panel near sticky thead). */
.shipment-show .panel.table-panel {
  overflow: visible;
}
.shipment-show .table-panel > .table-wrap {
  overflow: visible;
}

.shipment-line-modal__content {
  width: min(560px, 92vw);
}

.shipment-reveal-modal .modal-header {
  align-items: flex-start;
}

.shipment-line-modal .modal-header-thumbnail {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--muted);
  font-weight: 700;
}

.shipment-line-modal .modal-header-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shipment-modal-form__body {
  display: grid;
  gap: 16px;
}

.shipment-modal-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.shipment-modal-summary > div {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

.exception-line-summary {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

/* Receive popover for purchase-UOM lines (two inputs) */
.receive-popover {
  position: relative;
}
.receive-popover > summary {
  list-style: none;
}
.receive-popover > summary::-webkit-details-marker {
  display: none;
}
.receive-popover__body {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  background: var(--panel, #fff);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
  padding: 12px;
  min-width: 220px;
}
.receive-popover__form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.receive-popover__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--pp-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
}
.receive-popover__actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

/* ── Shipment line items table enhancements ───────────────────────── */

/* Highlight animation for deep-linked / jump-to-next rows */
@keyframes shipment-line-flash {
  0%   { background: #dbeafe; }
  100% { background: transparent; }
}
.shipment-line-highlight td {
  animation: shipment-line-flash 2s ease-out;
  background: #dbeafe !important;
}

/* Keyboard hint styling */
.shipment-show kbd {
  font-family: inherit;
}

/* ── Exception detail sub-row ────────────────────────────────────── */

.btn-inline-expand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  flex-wrap: wrap;
}
.btn-inline-expand:hover {
  background: var(--pp-hover, #f1f5f9);
}
.btn-inline-expand__icon {
  font-size: 10px;
  transition: transform 0.2s;
  color: var(--pp-text-muted, #64748b);
}
.btn-inline-expand[aria-expanded="true"] .btn-inline-expand__icon {
  transform: rotate(90deg);
}

.exception-detail-row td {
  background: var(--pp-bg-subtle, #f8fafc);
  border-top: none !important;
}
.exception-detail-panel {
  padding: 10px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.exception-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--panel, #fff);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 8px;
  font-size: 13px;
}
.exception-card__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.exception-card__qty {
  font-weight: 600;
  font-size: 12px;
  color: var(--pp-text, #1e293b);
}
.exception-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font-size: 12px;
}
.exception-card__meta code {
  font-size: 11px;
}
.exception-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.exception-detail-panel__footer {
  padding-top: 2px;
}

/* ── Exception detail modal (inline view + resolve) ───── */
.exception-modal-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.exception-modal-details {
  display: grid;
  gap: 0;
  margin: 0;
  font-size: 13px;
}
.exception-modal-details > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--pp-line, #e2e8f0);
}
.exception-modal-details > div:last-child {
  border-bottom: none;
}
.exception-modal-details dt {
  font-weight: 500;
  color: var(--pp-muted, #64748b);
  font-size: 12px;
}
.exception-modal-details dd {
  margin: 0;
  color: var(--pp-text, #1e293b);
}
.exception-modal-details dd p {
  margin: 0;
}
.exception-modal-photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.exception-modal-photos img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--pp-line, #e2e8f0);
}
.exception-modal-divider {
  border: none;
  border-top: 1px solid var(--pp-line, #e2e8f0);
  margin: 16px 0 12px;
}
.exception-modal-resolve-heading {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--pp-text, #1e293b);
}

/* ── Exception show page — equal-width detail + resolution ─ */
.exception-show-layout.detail-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ── Exception resolution form ─────────────────────────── */
.resolve-exception-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Resolve modal implications card ───────────────────── */
.picking-exception-resolve-modal .modal-body .muted {
  margin-bottom: 0;
}
.resolve-implications {
  margin: 12px 0 12px;
  padding: 10px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  font-size: 13px;
  line-height: 1.5;
}
.resolve-implications__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.resolve-implications__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: inherit;
  opacity: 0.7;
}
.resolve-implications__list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.resolve-implications__list li {
  margin-bottom: 2px;
}
.resolve-implications__list li:last-child {
  margin-bottom: 0;
}
.resolve-description {
  margin: 0;
  padding: 8px 10px;
  background: var(--pp-bg-subtle, #f8fafc);
  border-radius: 6px;
  line-height: 1.45;
  min-height: 32px;
}
.resolve-splits-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.resolve-split-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.resolve-split-row {
  position: relative;
  padding: 10px 40px 10px 10px;
  background: var(--pp-bg-subtle, #f8fafc);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 8px;
}
.resolve-split-row__fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.resolve-split-row__bottom {
  display: flex;
  gap: 6px;
  align-items: end;
}
.resolve-split-row__variant {
  min-width: 0;
}
.resolve-split-row__variant .vp-picker {
  max-width: 100%;
}
.resolve-split-row__qty {
  width: 80px;
  flex-shrink: 0;
}
.resolve-split-row__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  flex-shrink: 0;
}
.resolve-split-row__variant .form-label,
.resolve-split-row__qty .form-label,
.resolve-split-row__bottom .form-label {
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--pp-muted, #64748b);
}
.resolve-split-row__remove .btn-icon {
  margin-bottom: 0;
}
.resolve-add-split-btn {
  align-self: flex-start;
  margin-top: 12px;
}
.resolve-split-total.is-over {
  color: var(--pp-danger, #dc2626);
}
.resolve-split-total.is-over strong {
  color: inherit;
}
.resolve-actions {
  padding-top: 4px;
}
.resolve-resolved-summary {
  text-align: left;
}

/* ── Resolve modal form layout ───────────────────────────── */
.resolve-modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.resolve-modal-form .form-field { margin: 0; }

.resolve-sub-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 96px;
  gap: 10px;
  align-items: end;
}
.resolve-sub-row__cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.resolve-sub-row .form-label {
  font-size: 12px;
  line-height: 1.2;
  margin: 0 0 5px;
  white-space: nowrap;
}
.resolve-sub-row .input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  font-size: 13px;
}

@media (max-width: 560px) {
  .resolve-sub-row {
    grid-template-columns: 1fr;
  }
}

/* ── Resolution preview + impact panel ───────────────────── */
.resolve-explainer-card {
  --resolve-explainer-bg: #f8fafc;
  --resolve-explainer-border: #cbd5e1;
  --resolve-explainer-text: #334155;
  --resolve-explainer-accent: #64748b;
  position: relative;
  overflow: hidden;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--resolve-explainer-border);
  border-left: 4px solid var(--resolve-explainer-accent);
  border-radius: 8px;
  background: var(--resolve-explainer-bg);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  color: var(--resolve-explainer-text);
}
.resolve-explainer-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.65);
}
.resolve-explainer-card__eyebrow {
  margin-bottom: 4px;
  color: var(--resolve-explainer-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.resolve-explainer-card__text {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.resolve-explainer-card--success {
  --resolve-explainer-bg: #ecfdf5;
  --resolve-explainer-border: #bbf7d0;
  --resolve-explainer-text: #14532d;
  --resolve-explainer-accent: #16a34a;
}
.resolve-explainer-card--accent {
  --resolve-explainer-bg: #f5f3ff;
  --resolve-explainer-border: #ddd6fe;
  --resolve-explainer-text: #4c1d95;
  --resolve-explainer-accent: #7c3aed;
}
.resolve-explainer-card--warning {
  --resolve-explainer-bg: #fffbeb;
  --resolve-explainer-border: #fde68a;
  --resolve-explainer-text: #78350f;
  --resolve-explainer-accent: #d97706;
}
.resolve-explainer-card--danger {
  --resolve-explainer-bg: #fef2f2;
  --resolve-explainer-border: #fecaca;
  --resolve-explainer-text: #7f1d1d;
  --resolve-explainer-accent: #dc2626;
}
.resolve-explainer-card--info {
  --resolve-explainer-bg: #eff6ff;
  --resolve-explainer-border: #bfdbfe;
  --resolve-explainer-text: #1e3a8a;
  --resolve-explainer-accent: #2563eb;
}
.resolve-impact-panel {
  background: var(--pp-surface-1, #f8fafc);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
}
.resolve-impact-header {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted, #64748b);
  margin-bottom: 6px;
}
.resolve-impact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--pp-border-light, #f1f5f9);
}
.resolve-impact-row:last-of-type {
  border-bottom: none;
}
.resolve-impact-row span:first-child {
  color: var(--pp-text-muted, #64748b);
  flex-shrink: 0;
}
.resolve-impact-row--refund {
  color: var(--pp-info, #2563eb);
}
.resolve-impact-row--refund strong {
  color: var(--pp-info, #2563eb);
}
.resolve-impact-row--warning {
  color: var(--pp-warning-text, #b45309);
}
.resolve-impact-row--warning strong {
  color: var(--pp-warning-text, #b45309);
}
.resolve-impact-row--ok {
  color: var(--pp-success, #16a34a);
}
.resolve-impact-footer {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--pp-border, #e2e8f0);
  font-size: 11px;
}

/* ── Flag exception modal fields ──────────────────────────── */
.flag-exception-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.flag-exception-fields .form-field {
  margin: 0;
}

/* ── Exception photo thumbnails ───────────────────────────── */
.exception-photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.exception-photo-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--pp-line, #e2e8f0);
}
.exception-photo-link {
  display: inline-block;
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.exception-photo-link:hover {
  box-shadow: 0 0 0 2px var(--pp-accent, #2563eb);
}

/* ── Receives expandable detail row ─────────────────────── */
.receives-detail-row td {
  background: var(--pp-bg-subtle, #f8fafc);
  border-top: none !important;
}
.receives-detail-panel {
  padding: 10px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.receive-log-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--panel, #fff);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 8px;
  font-size: 13px;
}
.receive-log-card__qty {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
  min-width: 60px;
}
.receive-log-card__qty strong {
  font-size: 14px;
  color: var(--pp-text, #1e293b);
}
.receive-log-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
}
.receive-log-card__time {
  white-space: nowrap;
}
.receive-log-card__user {
  font-weight: 500;
  color: var(--pp-text, #1e293b);
}
.receive-log-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.receive-log-card--reversed {
  opacity: 0.5;
  transition: opacity 0.3s;
}
.receive-log-card__reverse-btn {
  color: var(--pp-text-muted, #64748b);
}
.receive-log-card__reverse-btn:hover {
  color: var(--pp-danger, #ef4444);
}

/* ── Picking command center refresh ─────────────────────── */
.pick-dash-hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.8fr);
  gap: 20px;
  align-items: stretch;
  padding: 20px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}
.pick-dash-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.pick-dash-hero__copy h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.045em;
}
.pick-dash-hero__copy p:last-child {
  max-width: 460px;
  margin: 0;
  line-height: 1.45;
}
.pick-dash-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.pick-dash-kpi {
  position: relative;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.pick-dash-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--pick-kpi-tone, var(--accent, #2563eb));
}
.pick-dash-kpi--primary { --pick-kpi-tone: var(--accent, #2563eb); }
.pick-dash-kpi--blue { --pick-kpi-tone: #2563eb; }
.pick-dash-kpi--green { --pick-kpi-tone: #16a34a; }
.pick-dash-kpi--amber { --pick-kpi-tone: #d97706; }
.pick-dash-kpi--purple { --pick-kpi-tone: #7c3aed; }
.pick-dash-kpi--danger { --pick-kpi-tone: var(--danger, #dc2626); }
.pick-dash-kpi__label,
.pick-dash-kpi__sub {
  display: block;
  color: var(--muted, #64748b);
  font-size: 11px;
  font-weight: 600;
}
.pick-dash-kpi__label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pick-dash-kpi__value {
  display: block;
  margin: 6px 0 3px;
  color: var(--ink, #0f172a);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.pick-dash__panel {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pick-dash__panel-header {
  min-height: 58px;
}
.pick-dash__panel-subtitle {
  margin: 3px 0 0;
  color: var(--muted, #64748b);
  font-size: 12px;
  line-height: 1.35;
}
.pick-dash__empty {
  display: grid;
  gap: 4px;
  padding: 22px 20px;
  color: var(--muted, #64748b);
  font-size: 13px;
}
.pick-dash__empty strong {
  color: var(--ink, #0f172a);
}
.pick-dash__empty--compact {
  padding: 16px;
}
.pick-dash__panel--alert {
  border-left-width: 4px;
}
.pick-dash__panel--sla {
  border-left-color: var(--danger, #dc2626);
}
.pick-dash__panel--stock {
  border-left-color: #d97706;
}
.pick-dash__panel--exceptions {
  border-left-color: #7c3aed;
}
.pick-dash__batch-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}
.pick-dash__batch-main {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.pick-dash__batch-actions {
  justify-content: flex-end;
}
.pick-dash__batch-actions form {
  margin: 0;
}
.pick-dash__stock-list,
.pick-dash__leaderboard {
  display: grid;
}
.pick-dash__stock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.pick-dash__stock-row:last-child {
  border-bottom: none;
}
.pick-dash__stock-meta {
  display: grid;
  justify-items: end;
  gap: 2px;
  flex-shrink: 0;
  font-size: 12px;
}
.pick-dash__leader-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) repeat(3, minmax(72px, auto));
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.pick-dash__leader-row:last-child {
  border-bottom: none;
}
.pick-dash__leader-rank {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--soft, #f8fafc);
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 800;
}
.pick-dash__leader-person {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.pick-dash__leader-person strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-dash__leader-metric {
  display: grid;
  justify-items: end;
  gap: 2px;
  font-size: 12px;
}
.pick-dash__leader-metric strong {
  color: var(--ink, #0f172a);
  font-size: 15px;
}
.pick-dash__bucket-card {
  color: inherit;
  text-align: left;
  border: 1px solid var(--line, #e2e8f0);
  cursor: pointer;
}
.pick-dash__bucket-card:hover {
  border-color: rgba(37, 99, 235, 0.35);
  background: #f8fbff;
}
.pick-dash__bucket-card-cta {
  color: var(--accent, #2563eb);
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 1100px) {
  .pick-dash-hero {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .pick-dash-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pick-dash__batch-card,
  .pick-dash__leader-row {
    grid-template-columns: 1fr;
  }
  .pick-dash__leader-rank,
  .pick-dash__leader-metric {
    justify-self: start;
    justify-items: start;
  }
}
@media (max-width: 520px) {
  .pick-dash-hero__stats {
    grid-template-columns: 1fr;
  }
}


/* ── Count Engine ────────────────────────────────────────────────────────── */
.count-engine {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: #fff;
  padding: 0;
}
.count-engine__progress {
  padding: 12px 16px 8px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.count-engine__progress-bar-wrap {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}
.count-engine__progress-bar {
  height: 100%;
  background: var(--color-primary, #2563eb);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.count-engine__progress-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}
.count-engine__error {
  background: #fef2f2;
  color: #dc2626;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid #fecaca;
}
.count-engine__scan-input { opacity: 0; position: absolute; width: 0; height: 0; }
.count-engine__bin-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  flex: 1;
  text-align: center;
}
.count-engine__bin-gate-icon { color: #6b7280; margin-bottom: 12px; }
.count-engine__bin-gate-label { font-size: 14px; color: #6b7280; margin-bottom: 4px; }
.count-engine__bin-gate-code { font-size: 32px; font-weight: 700; font-family: monospace; letter-spacing: 2px; }
.count-engine__bin-gate-breadcrumb { font-size: 12px; margin: 4px 0 20px; }
.count-engine__bin-scan-input { max-width: 240px; text-align: center; font-size: 18px; }
.count-engine__card {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 0 24px;
}
.count-engine__bin-header {
  background: #1e293b;
  color: #fff;
  padding: 12px 16px 10px;
}
.count-engine__bin-code {
  font-size: 28px;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 1px;
}
.count-engine__bin-breadcrumb { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.count-engine__variant {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #f3f4f6;
}
.count-engine__variant-image { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.count-engine__variant-image img { width: 100%; height: 100%; object-fit: cover; }
.count-engine__variant-sku { font-size: 18px; font-weight: 700; font-family: monospace; }
.count-engine__variant-title { font-size: 14px; color: #374151; margin-top: 2px; }
.count-engine__variant-barcode { font-size: 11px; color: #9ca3af; margin-top: 2px; }
.count-engine__expected {
  padding: 12px 16px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  gap: 16px;
}
.count-engine__expected-label { font-size: 12px; color: #3b82f6; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.count-engine__expected-qty { font-size: 36px; font-weight: 700; color: #1d4ed8; }
.count-engine__adjusted-note { margin-left: auto; }
.count-engine__qty-section { padding: 16px; }
.count-engine__qty-label { display: block; font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.count-engine__qty-input {
  width: 100%;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  padding: 12px;
  border: 2px solid #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
  margin-bottom: 12px;
}
.count-engine__qty-input:focus { border-color: var(--color-primary, #2563eb); background: #fff; outline: none; }
.count-engine__numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.count-engine__numpad-key {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 600;
  padding: 14px 0;
  cursor: pointer;
  transition: background 0.1s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.count-engine__numpad-key:active { background: #e5e7eb; transform: scale(0.96); }
.count-engine__numpad-key--confirm {
  background: var(--color-primary, #2563eb);
  color: #fff;
  border-color: var(--color-primary, #2563eb);
}
.count-engine__numpad-key--confirm:active { opacity: 0.85; }
.count-engine__numpad-key--del { color: #dc2626; }
.count-engine__actions {
  display: flex;
  gap: 12px;
  padding: 0 16px;
}
.count-engine__confirm-btn { flex: 1; font-size: 18px; padding: 16px; }
.count-engine__skip-btn { flex-shrink: 0; }
.count-engine__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid #f3f4f6;
  margin-top: auto;
}
.count-engine__position { font-size: 12px; }
.count-engine__shortcuts { padding: 8px 16px; }
.count-engine__shortcuts-table { width: 100%; border-collapse: collapse; }
.count-engine__shortcuts-table td { padding: 2px 8px; }
.count-engine__scan-count { padding: 4px 16px; font-size: 13px; color: #6b7280; }
.count-engine--complete {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 40px 24px;
}
.count-engine__complete-icon { font-size: 64px; color: #22c55e; }
.count-engine__complete-title { font-size: 24px; font-weight: 700; margin: 0; }
.count-engine__complete-subtitle { color: #6b7280; }
.count-engine__complete-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; max-width: 320px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Collection Picker (.clp-*)
   Partial:     shared/_collection_picker.html.erb
   Controller:  collection_combobox_controller.js
   ─────────────────────────────────────────────────────────────────────────── */

.clp-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.clp-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.clp-input { flex: 1 1 auto; min-width: 0; }

/* Dropdown — position:fixed so it escapes any overflow:hidden ancestor */
.clp-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  background: var(--panel, #fff);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 10px;
  box-shadow: var(--pp-shadow-lg, 0 12px 32px rgba(15,23,42,0.14));
  z-index: 1200;
}
.clp-dropdown--fixed {
  position: fixed;
}

/* Row */
.clp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 80ms;
}
.clp-row:hover, .clp-row.is-active {
  background: var(--pp-bg-subtle, #f1f5f9);
}
.clp-row[aria-selected="true"] {
  background: var(--pp-info-bg, #dbeafe);
}
.clp-row--empty {
  cursor: default;
  color: var(--pp-text-muted, #64748b);
  font-size: 13px;
  padding: 10px 12px;
}
.clp-row--empty:hover { background: transparent; }

.clp-row__icon {
  flex: 0 0 auto;
  color: var(--pp-text-muted, #94a3b8);
  display: flex;
  align-items: center;
}
.clp-row__main { flex: 1 1 auto; min-width: 0; }
.clp-row__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--pp-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clp-row__title mark {
  background: transparent;
  color: var(--pp-info-text, #1d4ed8);
  font-weight: 700;
}
.clp-row__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--pp-text-muted, #64748b);
  margin-top: 1px;
  flex-wrap: wrap;
}
.clp-row__handle { font-family: monospace; font-size: 10px; }
.clp-row__count  { font-size: 11px; }

/* Type badges */
.clp-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}
.clp-badge--custom {
  background: var(--pp-bg-subtle, #f1f5f9);
  color: var(--pp-text-muted, #64748b);
}
.clp-badge--smart {
  background: var(--pp-info-bg, #dbeafe);
  color: var(--pp-info-text, #1d4ed8);
}

/* Selected card */
.clp-selected-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--pp-bg-subtle, #f8fafc);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 8px;
}
.clp-selected-card__icon {
  flex: 0 0 auto;
  color: var(--pp-text-muted, #64748b);
  display: flex;
  align-items: center;
}
.clp-selected-card__main { flex: 1 1 auto; min-width: 0; }
.clp-selected-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clp-selected-card__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.clp-selected-card__handle {
  font-family: monospace;
  font-size: 11px;
  color: var(--pp-text-muted, #64748b);
}
.clp-selected-card__change {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  width: 26px;
  height: 26px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--pp-text-muted, #94a3b8);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clp-selected-card__change:hover {
  background: var(--pp-line, #e2e8f0);
  border-color: var(--pp-line, #e2e8f0);
  color: var(--pp-text, #0f172a);
}

/* Chips (multi-select) */
.clp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.clp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--pp-info-bg, #dbeafe);
  border: 1px solid var(--pp-info-border, #bfdbfe);
  border-radius: 6px;
  font-size: 12px;
  color: var(--pp-info-text, #1d4ed8);
}
.clp-chip__remove {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 1px;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
}
.clp-chip__remove:hover { opacity: 1; }

/* Help text */
.clp-help { margin: 2px 0 0; }

/* ── Etsy integration ───────────────────────────────────────────── */
.etsy-unmatched-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 16px 0 0;
  background: var(--pp-warning-soft);
  border: 1px solid var(--pp-warning);
  border-radius: 6px;
  font-size: 13px;
  color: var(--pp-text);
}
.etsy-unmatched-banner svg { flex-shrink: 0; color: var(--pp-warning); }

.etsy-copy-field {
  display: flex;
  gap: 8px;
  align-items: center;
}
.etsy-copy-field .input { flex: 1; font-size: 12px; font-family: monospace; }

/* ═══════════════════════════════════════════════════════════════════════════
   SCAN WORKFLOW (swf-*)
   Full-screen Scan to Print / Verify / Print & Verify station
   ═══════════════════════════════════════════════════════════════════════════ */

.swf-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--bg, #f8fafc);
  overflow: hidden;
  position: relative;
}

/* Floor layout: .content normally adds 24px padding — this page is full-bleed
   below the dark floor topbar so the scan header isn’t floating in whitespace. */
body[data-shipping-scan-workflow-fullbleed="1"] .floor-shell > .main > .content {
  padding: 0;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
body[data-shipping-scan-workflow-fullbleed="1"] .swf-shell {
  flex: 1;
  min-height: 0;
  height: auto;
}

/* Header */
.swf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--panel, #fff);
  border-bottom: 1px solid var(--line, #e5e7eb);
  flex-shrink: 0;
  gap: 12px;
}
.swf-header__left { display: flex; align-items: center; gap: 12px; }
.swf-header__right { display: flex; align-items: center; gap: 8px; }
.swf-back-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  color: var(--muted, #6b7280);
  text-decoration: none;
  transition: background 0.1s;
}
.swf-back-btn:hover { background: var(--soft, #f1f5f9); color: var(--ink, #1f2933); }
.swf-header__mode { display: flex; flex-direction: column; }
.swf-header__mode-label { font-size: 16px; font-weight: 700; color: var(--ink, #1f2933); line-height: 1.2; }
.swf-header__location { font-size: 12px; }

/* Mode switcher pills */
.swf-mode-switcher { display: flex; gap: 2px; background: var(--soft, #f1f5f9); border-radius: 8px; padding: 2px; }
.swf-mode-btn {
  padding: 5px 12px; border-radius: 6px; font-size: 13px; font-weight: 500;
  color: var(--muted, #6b7280); text-decoration: none; white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.swf-mode-btn--active { background: var(--panel, #fff); color: var(--ink, #1f2933); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.swf-settings-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  color: var(--muted, #6b7280); text-decoration: none;
  transition: background 0.1s;
}
.swf-settings-btn:hover { background: var(--soft, #f1f5f9); color: var(--ink, #1f2933); }

/* Main area */
.swf-main {
  flex: 1;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
}
.swf-state { width: 100%; max-width: 560px; }

/* Idle state */
.swf-idle-card {
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 24px rgba(15,23,42,0.06);
}
.swf-idle-art {
  width: 120px; height: 120px; color: var(--accent, #2563eb); opacity: 0.7;
  margin-bottom: 24px;
}
.swf-idle-art svg { width: 100%; height: 100%; }
.swf-idle-title { font-size: 26px; font-weight: 800; margin: 0 0 8px; color: var(--ink, #1f2933); }
.swf-idle-copy { font-size: 15px; color: var(--muted, #6b7280); margin: 0; line-height: 1.5; max-width: 380px; }

/* Loading */
.swf-state--loading { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.swf-spinner {
  width: 48px; height: 48px;
  border: 4px solid var(--line, #e5e7eb);
  border-top-color: var(--accent, #2563eb);
  border-radius: 50%;
  animation: swfSpin 0.8s linear infinite;
}
@keyframes swfSpin { to { transform: rotate(360deg); } }
.swf-loading-text { font-size: 16px; color: var(--muted, #6b7280); }

/* Active (order card) */
.swf-order-card {
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(15,23,42,0.06);
  overflow: hidden;
}
.swf-order-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.swf-order-name { font-size: 22px; font-weight: 800; margin: 0 0 4px; color: var(--ink, #1f2933); }
.swf-order-destination { font-size: 13px; margin: 0; }
.swf-order-card__actions { flex-shrink: 0; }

/* Verify section */
.swf-verify-section { padding: 20px 24px; border-bottom: 1px solid var(--line, #e5e7eb); }
.swf-verify-heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #6b7280); margin: 0 0 12px; }
.swf-verify-hint { font-size: 13px; margin: 0 0 16px; }
.swf-item-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.swf-item-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--soft, #f8fafc);
  border: 1px solid var(--line, #e5e7eb);
  transition: background 0.15s, border-color 0.15s;
}
.swf-item-row.swf-item--done { background: #f0fdf4; border-color: #86efac; }
.swf-item-row.swf-item--partial { background: #fffbeb; border-color: #fcd34d; }
.swf-item-check { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; color: var(--muted, #9ca3af); }
.swf-item-row.swf-item--done .swf-item-check { color: #16a34a; }
.swf-item-info { flex: 1; min-width: 0; }
.swf-item-title { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swf-item-sku { font-size: 12px; color: var(--muted, #6b7280); font-family: ui-monospace, monospace; }
.swf-item-qty { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--muted, #6b7280); flex-shrink: 0; }
.swf-item-row.swf-item--done .swf-item-qty { color: #16a34a; }

.swf-verify-progress { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.swf-progress-bar { flex: 1; height: 8px; background: var(--soft, #f1f5f9); border-radius: 4px; overflow: hidden; }
.swf-progress-bar__fill { height: 100%; background: var(--accent, #2563eb); border-radius: 4px; transition: width 0.3s ease; }
.swf-progress-text { font-size: 12px; white-space: nowrap; flex-shrink: 0; }

/* Action footer */
.swf-action-footer {
  padding: 16px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.swf-action-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.swf-action-btns .btn-lg { flex: 1; min-height: 52px; font-size: 16px; justify-content: center; }
.swf-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 100px;
  font-size: 13px; font-weight: 600;
}

/* Success state */
.swf-success-card {
  background: var(--panel, #fff);
  border: 1px solid #86efac;
  border-radius: 16px;
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 24px rgba(15,23,42,0.06);
}
.swf-success-icon { width: 100px; height: 100px; color: #16a34a; margin-bottom: 24px; }
.swf-success-icon svg { width: 100%; height: 100%; }
.swf-success-order { font-size: 24px; font-weight: 800; margin: 0 0 8px; color: var(--ink, #1f2933); }
.swf-success-tracking { font-size: 14px; font-family: ui-monospace, monospace; margin: 0 0 32px; }
.swf-next-btn { min-width: 200px; min-height: 52px; font-size: 16px; justify-content: center; }

/* Toast zone */
.swf-toast-zone {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}
.swf-toast {
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--ink, #1f2933);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  animation: swfToastIn 0.2s ease;
  pointer-events: all;
}
.swf-toast--success { background: #16a34a; }
.swf-toast--error { background: #dc2626; }
.swf-toast--info { background: #2563eb; }
@keyframes swfToastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Link from shipping dashboard nav to scan workflow */
.ss-scan-workflow-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #2563eb);
  border: 1px solid var(--accent-pale, #dbeafe);
  background: var(--accent-pale, #eff6ff);
  margin: 12px 0 4px;
  transition: background 0.1s;
}
.ss-scan-workflow-link:hover { background: #dbeafe; }

/* ═══════════════════════════════════════════════════════════════════════════
   SHIPPING DASHBOARD — keyboard shortcuts strip & weigh button
   ═══════════════════════════════════════════════════════════════════════════ */

.ss-kbd-hints {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--line, #e5e7eb);
  font-size: 11px;
  color: var(--muted, #9ca3af);
  flex-wrap: wrap;
}
.ss-kbd-hints span { margin-right: 6px; }
.ss-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--soft, #f1f5f9);
  border: 1px solid var(--line, #e5e7eb);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink, #374151);
  text-transform: uppercase;
  line-height: 1;
}

/* Weigh button — icon-only scale button inline with weight field */
.ship-weigh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
}
.field--align-end { justify-content: flex-end; }

/* ── Bulk-action progress bar (inside selection bar) ── */
.ship-bulk-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  font-size: 13px;
  color: var(--muted, #64748b);
  min-width: 200px;
}
.ship-bulk-progress__label {
  white-space: nowrap;
  font-weight: 500;
  color: var(--text, #1e293b);
}
.ship-bulk-progress__track {
  flex: 1;
  height: 6px;
  background: var(--border, #e2e8f0);
  border-radius: 3px;
  overflow: hidden;
  min-width: 80px;
}
.ship-bulk-progress__fill {
  height: 100%;
  background: var(--pp-primary, #3b82f6);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.ship-bulk-progress__pct {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLOOR TOTE SHIP PAGE (floor-tote-ship-*)
   ═══════════════════════════════════════════════════════════════════════════ */

.floor-tote-ship__order-card {
  margin-bottom: 20px;
  padding: 20px;
}
.floor-tote-ship__order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.floor-tote-ship__order-name {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  color: var(--ink, #1f2933);
}
.floor-tote-ship__address {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 8px;
}
.floor-tote-ship__service {
  font-size: 13px;
  margin: 0 0 14px;
}
.floor-tote-ship__items-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #6b7280);
  margin: 0 0 10px;
}
.floor-tote-ship__item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.floor-tote-ship__item-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
}
.floor-tote-ship__item-qty {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted, #6b7280);
  min-width: 30px;
  flex-shrink: 0;
}
.floor-tote-ship__item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.floor-tote-ship__item-sku {
  font-size: 12px;
  color: var(--muted, #9ca3af);
  font-family: ui-monospace, monospace;
}
.floor-tote-ship__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.floor-tote-ship__action-btn {
  width: 100%;
  min-height: 56px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.floor-tote-ship__tracking {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
}
.floor-tote-ship__tracking-num {
  font-size: 16px;
  font-family: ui-monospace, monospace;
  font-weight: 600;
  word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESHIP UI
   ═══════════════════════════════════════════════════════════════════════════ */

.ship-panel__reship-section {
  padding: 12px 16px;
  border-top: 1px solid var(--line, #e5e7eb);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ship-reship-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ship-panel__reship-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fffbeb;
  border-top: 1px solid #fde68a;
  font-size: 12px;
  color: #92400e;
}
.ship-panel__reship-badge svg { flex-shrink: 0; }

.reship-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 13px;
  color: #92400e;
  margin-bottom: 16px;
}
.reship-items {
  margin-bottom: 16px;
}
.reship-items__label { display: block; margin-bottom: 6px; }
.reship-items__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reship-items__row {
  display: flex;
  gap: 8px;
  font-size: 14px;
}
.reship-items__qty { font-weight: 600; color: var(--muted, #6b7280); min-width: 28px; flex-shrink: 0; }
.reship-toggle-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-weight: 600;
}
.reship-toggle-check { margin-top: 2px; flex-shrink: 0; }

/* ── Profit & Loss (pnl-*) ──────────────────────────────────────── */

/* Filter bar */
.pnl-filter-bar { padding: 16px 20px; }
.pnl-filter-form { display: flex; flex-direction: column; gap: 12px; }
.pnl-filter-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pnl-filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pnl-filter-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--pp-text-muted); line-height: 1;
}
.pnl-filter-apply { align-self: flex-end; }
.pnl-date-range { display: flex; align-items: center; gap: 6px; }
.pnl-date-sep { color: var(--pp-text-muted); font-size: 12px; }
.pnl-date-custom[hidden] { display: none; }

/* KPI strip */
.pnl-kpi-strip {
  display: flex; gap: 0; align-items: stretch; flex-wrap: wrap;
  padding: 20px; margin: 16px 0 0;
  background: var(--pp-surface); border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius, 10px);
}
.pnl-kpi {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 24px; border-right: 1px solid var(--pp-border);
  min-width: 120px;
}
.pnl-kpi:first-child { padding-left: 0; }
.pnl-kpi:last-child { border-right: none; padding-right: 0; }
.pnl-kpi__label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--pp-text-muted); line-height: 1;
}
.pnl-kpi__value { font-size: 20px; font-weight: 700; color: var(--pp-text); line-height: 1.2; }
.pnl-kpi__value--positive { color: var(--pp-success); }
.pnl-kpi__value--negative { color: var(--pp-danger); }
.pnl-kpi__change { margin-top: 2px; }

/* Main panel + table */
.pnl-panel { overflow: hidden; margin-top: 16px; }
.pnl-panel-header { border-bottom: 1px solid var(--pp-border); }
.pnl-panel-header h2 { font-size: 15px; font-weight: 600; }

.pnl-table { width: 100%; border-collapse: collapse; }
.pnl-table thead th {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--pp-text-muted);
  padding: 10px 16px; border-bottom: 2px solid var(--pp-border);
  white-space: nowrap;
}

.pnl-table tbody td { padding: 8px 16px; font-size: 13px; }
.pnl-table tbody tr:hover td { background: var(--pp-surface-hover, rgba(0,0,0,.015)); }

.pnl-label-col { text-align: left; min-width: 200px; }
.pnl-amount-col { text-align: right; min-width: 110px; white-space: nowrap; }
.pnl-total-col { font-weight: 600; }
.pnl-pct-col { text-align: right; min-width: 80px; font-size: 12px; color: var(--pp-text-muted); white-space: nowrap; }

.pnl-label { padding-left: 24px; }

/* Row depth */
.pnl-indent-1 .pnl-label { padding-left: 40px; }

/* Section headers */
.pnl-section-header td {
  background: var(--pp-surface-2); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--pp-text-muted); padding: 6px 16px;
}

/* Subtotals */
.pnl-subtotal td {
  border-top: 2px solid var(--pp-border); background: var(--pp-surface);
  font-weight: 600;
}
.pnl-subtotal--highlight td { background: var(--pp-accent-soft); }
.pnl-subtotal .pnl-label { padding-left: 24px; }

/* Grand total */
.pnl-total td {
  border-top: 3px double var(--pp-border-strong);
  font-size: 14px; font-weight: 700; padding: 14px 16px;
  background: var(--pp-surface);
}

/* Color helpers */
.pnl-profit { color: var(--pp-success); }
.pnl-loss { color: var(--pp-danger); }
.pnl-negative { color: var(--pp-danger); }

/* COGS notice */
.pnl-cogs-notice { margin-top: 16px; }

/* Print */
@media print {
  .pnl-filter-bar { display: none; }
  .topbar-actions { display: none; }
  .pnl-kpi-strip { border: none; box-shadow: none; }
  .pnl-panel { box-shadow: none; border: 1px solid #ddd; }
  .pnl-table tbody tr:hover td { background: none; }
}

/* ── Sales Channels settings (sch-*) ─────────────────────────────── */
.sch-row-actions { display: flex; align-items: center; gap: 6px; }
.sch-name { font-weight: 500; }

.sch-source-wrap { position: relative; }
.sch-source-wrap > .input { padding-right: 32px; }
.sch-source-caret {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--muted, #94a3b8);
}
.sch-source-dropdown {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  z-index: 20; margin-top: 4px;
  background: #fff; border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.08);
  overflow: hidden;
}
.sch-source-dropdown.is-open { display: block; }
.sch-source-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; cursor: pointer; font-size: 13px; gap: 12px;
}
.sch-source-option:hover { background: var(--hover-bg, #f1f5f9); }
.sch-source-option-key { font-family: "SF Mono", "Fira Code", monospace; font-size: 13px; }
.sch-source-option-meta { color: var(--muted, #94a3b8); font-size: 12px; white-space: nowrap; }

/* (P&L additional styles merged into main pnl-* block above) */

/* ═══════════════════════════════════════════════════════════════════════════
   INTEGRATION PREVIEW (iprev-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Overview tab: inline preview form */
.iprev-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.iprev-form__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
}

.iprev-form__size {
  min-width: 96px;
}

.iprev-form__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.iprev-panel-footer {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* Show page: page header + stacked result panels */
.iprev-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.iprev-page-header h1 {
  margin: 0;
}

.iprev-page-header__meta {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.iprev-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.iprev-stack > .panel {
  margin: 0;
}

.iprev-summary-panel__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.iprev-summary-panel__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.iprev-empty-panel .empty-state--inline {
  padding: 40px 24px;
}

.iprev-kpi.repl-kpi-row--strip {
  margin: 0;
}

@media (max-width: 640px) {
  .iprev-form__fields {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .iprev-form__size {
    min-width: 0;
  }
}

.iprev-record-card {
  margin-bottom: 0;
}

.iprev-record-card summary { list-style: none; cursor: pointer; }
.iprev-record-card summary::-webkit-details-marker { display: none; }

.iprev-record-card__summary {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-1);
  padding: var(--pp-space-3) var(--pp-space-4);
}

.iprev-record-card__header {
  display: flex;
  align-items: center;
  gap: var(--pp-space-2);
  flex-wrap: wrap;
}

.iprev-record-card__title { font-size: var(--pp-font-sm); font-weight: 600; }
.iprev-record-card__ext-id { font-size: var(--pp-font-xs); font-family: monospace; }
.iprev-record-card__skip-reason { font-size: var(--pp-font-xs); color: var(--muted); }
.iprev-record-card__error-hint  { font-size: var(--pp-font-xs); color: #b91c1c; }

.iprev-record-card__body {
  border-top: 1px solid var(--line);
  padding: var(--pp-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-4);
}

.iprev-record-card__cols {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--pp-space-4);
}

.iprev-record-card__col h4 {
  font-size: var(--pp-font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: var(--pp-space-2);
}

.iprev-record-card__errors {
  list-style: disc;
  padding-left: 16px;
  font-size: var(--pp-font-sm);
  color: #b91c1c;
  margin: 0;
}

.iprev-record-card__raw {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.iprev-record-card__raw summary {
  font-size: var(--pp-font-xs);
  font-weight: 500;
  padding: 6px 10px;
  background: var(--surface-2);
  cursor: pointer;
  user-select: none;
}

.iprev-record-card__json {
  margin: 0;
  padding: 10px;
  background: var(--surface-2);
  font-size: 11px;
  font-family: "SF Mono", "Fira Code", monospace;
  overflow-x: auto;
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto;
}

/* ── Backorders page ─────────────────────────────────────── */

.bo-dash__summary-strip {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.bo-dash__summary-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
}

.bo-dash__summary-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.bo-dash__summary-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.bo-dash__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.bo-dash__filters {
  display: flex;
  gap: 6px;
}

.bo-dash__search {
  margin-left: auto;
}

@media (max-width: 640px) {
  .bo-dash__summary-strip { flex-direction: column; }
  .bo-dash__toolbar { flex-direction: column; align-items: stretch; }
  .bo-dash__search { margin-left: 0; }
}

/* ── Integration pricing tab ── */
.intg-inline-form {
  display: inline;
}
.intg-inline-form .input-compact {
  min-width: 160px;
}

/* ── Price list prices tab ── */
.pl-prices-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--panel-padding, 16px) 12px;
}

.pl-chain {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pl-chain__step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.pl-chain__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-2, #f0f0f0);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.pl-chain__step--current .pl-chain__step-num {
  background: var(--accent, #2563eb);
  color: #fff;
}
.pl-chain__arrow {
  padding-left: 7px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}

.pl-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  margin-top: 16px;
}
.pl-overview-main { display: flex; flex-direction: column; gap: 16px; }
.pl-overview-aside { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1080px) {
  .pl-overview-grid { grid-template-columns: 1fr; }
}

.pl-derivation-summary {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-light, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pl-derivation-summary__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pl-derivation-summary__label {
  font-size: 13px;
  color: var(--text-muted);
  min-width: 130px;
  flex-shrink: 0;
}
.pl-derivation-summary__value {
  font-weight: 600;
  font-size: 14px;
}

.pl-child-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pl-child-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-light, #e5e7eb);
}
.pl-child-list__item:last-child { border-bottom: none; }

.pl-derivation-fieldset {
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: var(--radius, 8px);
  padding: 16px;
  margin: 0;
}
.pl-derivation-legend {
  font-weight: 600;
  font-size: 14px;
  padding: 0 6px;
}

#price-list-form > .panel + .panel,
#price-list-form > section + section,
#price-list-form > .form-actions {
  margin-top: 24px;
}
#price-list-form > .form-errors {
  margin-bottom: 24px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SKU Builder (.skub-*)
   Settings › Catalog › SKU Generator — segment builder component
───────────────────────────────────────────────────────────────────────────── */

/* Template list on index page */
.skub-template-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.skub-template-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.skub-template-card:last-child {
  border-bottom: none;
}

.skub-template-card__body {
  flex: 1;
  min-width: 0;
}

.skub-template-card__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.skub-template-card__name {
  font-weight: 600;
  font-size: 0.9375rem;
}

.skub-template-card__formula {
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.skub-template-card__formula code {
  background: var(--color-bg-subtle, #f6f8fa);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.82rem;
}

.skub-template-card__scope {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.skub-template-card__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: flex-start;
  padding-top: 2px;
}

/* Abbreviation form */
.skub-abbrev-form__grid {
  grid-template-columns: 1fr 1fr 1fr auto;
}
.skub-abbrev-form__submit {
  display: flex;
  align-items: flex-end;
}

/* Segment list container */
.skub-segment-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 20px;
}

/* Empty state */
.skub-empty-state {
  padding: 24px 20px;
  text-align: center;
}

/* Individual segment row */
.skub-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light, #f0f1f3);
  transition: background 0.1s;
}
.skub-row:last-child {
  border-bottom: none;
}
.skub-row--dragging {
  opacity: 0.45;
  background: var(--color-bg-subtle, #f6f8fa);
  border-radius: 6px;
}

.skub-row__handle {
  flex-shrink: 0;
  cursor: grab;
  color: var(--color-text-muted);
  padding: 8px 4px;
  margin-top: 22px;
  opacity: 0.6;
}
.skub-row__handle:hover {
  opacity: 1;
}

.skub-row__controls {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.skub-row__type-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.skub-row__detail {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  flex: 1;
  min-width: 0;
}

.skub-row__remove {
  flex-shrink: 0;
  margin-top: 26px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.skub-row__remove:hover {
  color: var(--color-danger, #dc2626);
  background: var(--color-danger-subtle, #fef2f2);
}

/* Shared label + input/select inside segment detail */
.skub-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.skub-select {
  min-width: 130px;
}

.skub-input {
  min-width: 130px;
}
.skub-input--narrow {
  width: 72px;
  min-width: 72px;
}

/* Uniqueness warning above preview strip */
.skub-uniqueness-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 20px;
  margin-top: 8px;
  border-top: 1px solid var(--pp-warning, #f59e0b);
  background: var(--pp-warning-soft, #fffbeb);
  color: var(--pp-text, #1f2937);
  font-size: 0.8rem;
  line-height: 1.4;
}
.skub-uniqueness-warning svg {
  color: var(--pp-warning, #f59e0b);
  margin-top: 1px;
}

/* Preview strip at the bottom of the segment builder panel */
.skub-preview-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  margin-top: 8px;
  background: var(--color-bg-subtle, #f6f8fa);
  border-top: 1px solid var(--color-border, #e5e7eb);
  border-bottom-left-radius: var(--radius, 8px);
  border-bottom-right-radius: var(--radius, 8px);
}

.skub-preview-strip__label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.skub-preview-strip__sku {
  font-size: 1rem;
  font-family: var(--font-mono, monospace);
  color: var(--color-text);
  flex: 1;
}

.skub-preview-strip__hint {
  flex-shrink: 0;
}

/* Panel + section spacing on the template form */
#sku-template-form > .panel + .panel,
#sku-template-form > section + section,
#sku-template-form > .form-actions {
  margin-top: 24px;
}
#sku-template-form > .form-errors {
  margin-bottom: 24px;
}

/* Responsive: stack abbreviation form on small screens */
@media (max-width: 680px) {
  .skub-abbrev-form__grid {
    grid-template-columns: 1fr;
  }
  .skub-row__controls {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Index layout: main + sidebar ───────────────────────────── */
.skub-index-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
.skub-index-main { min-width: 0; }

/* Template list DnD */
.skub-template-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  cursor: default;
}
.skub-template-card:last-child { border-bottom: none; }
.skub-template-card--dragging  { opacity: 0.4; background: var(--color-bg-subtle, #f6f8fa); }

.skub-template-card__handle {
  flex-shrink: 0;
  cursor: grab;
  color: var(--color-text-muted);
  padding: 4px 2px;
  opacity: 0.5;
  margin-top: 2px;
}
.skub-template-card__handle:hover { opacity: 1; }

.skub-template-card__body {
  flex: 1;
  min-width: 0;
}

.skub-template-card__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.skub-template-card__name {
  font-weight: 600;
  font-size: 0.9375rem;
}

.skub-template-card__formula {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.skub-template-card__formula code {
  background: var(--color-bg-subtle, #f6f8fa);
  padding: 2px 6px;
  border-radius: 4px;
}

.skub-template-card__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: flex-start;
}

/* ── Scope rules chip selectors ──────────────────────────────── */
.skub-scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 20px 20px;
}

.skub-chips-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  min-height: 42px;
  cursor: text;
  transition: border-color 0.15s;
}
.skub-chips-box:focus-within {
  border-color: var(--color-primary, #4f46e5);
  box-shadow: 0 0 0 2px var(--color-primary-subtle, #e0e7ff);
}

.skub-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-bg-subtle, #f0f1f3);
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}

.skub-chip__remove {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0 2px;
  font-size: 1rem;
  line-height: 1;
}
.skub-chip__remove:hover { color: var(--color-danger, #dc2626); }

.skub-chips-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.875rem;
  flex: 1;
  min-width: 100px;
  padding: 2px 4px;
}

/* ── Preview breakdown ───────────────────────────────────────── */
.skub-preview-breakdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  flex: 1;
}
.skub-bd-label {
  font-weight: 600;
  margin-right: 4px;
  flex-shrink: 0;
}
.skub-bd-seg {
  background: var(--color-bg-subtle, #f0f1f3);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}
.skub-bd-seg--empty {
  color: var(--color-danger, #dc2626);
  background: var(--color-danger-subtle, #fef2f2);
}
.skub-bd-sep {
  color: var(--color-text-muted);
  padding: 0 1px;
}

/* ── Simulator sidebar ───────────────────────────────────────── */
.skub-simulator {
  background: var(--color-bg-subtle, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  position: sticky;
  top: 80px;
}

.skub-simulator__header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.skub-simulator__header h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.skub-simulator__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.skub-sim-sku-box {
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  padding: 10px 14px;
}
.skub-sim-sku-box__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.skub-sim-sku-box__sku {
  font-size: 1.125rem;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  word-break: break-all;
}

.skub-sim-meta {
  font-size: 0.8rem;
}

.skub-sim-breakdown-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.skub-sim-seg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid var(--color-border-light, #f0f1f3);
  border-radius: 4px;
}
.skub-sim-seg--empty .skub-sim-seg__value { color: var(--color-text-muted); font-style: italic; }
.skub-sim-seg__label { color: var(--color-text-muted); }
.skub-sim-seg__value { font-family: var(--font-mono, monospace); font-weight: 600; }

.skub-sim-nomatch {
  padding: 10px 0;
}

/* ── Abbreviation table improvements ─────────────────────────── */
.skub-abbrev-row td { vertical-align: middle; }
.skub-abbrev-display--code { font-family: var(--font-mono, monospace); }

.skub-abbrev-add-row {
  padding: 16px 0 4px;
  border-top: 1px solid var(--color-border, #e5e7eb);
  margin-top: 8px;
}
.skub-abbrev-add-row__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.skub-abbrev-add-row__error {
  margin-top: 6px;
  color: var(--color-danger, #dc2626);
}

/* Import modal */
.skub-import-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
}
.skub-import-row {
  display: grid;
  grid-template-columns: auto 1fr 120px;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--color-border-light, #f0f1f3);
  border-radius: 5px;
  cursor: pointer;
}
.skub-import-row:hover { background: var(--color-bg-subtle, #f6f8fa); }
.skub-import-val { font-size: 0.875rem; }
.skub-import-abbrev { max-width: 120px; }

@media (max-width: 900px) {
  .skub-index-layout {
    grid-template-columns: 1fr;
  }
  .skub-scope-grid {
    grid-template-columns: 1fr;
  }
  .skub-abbrev-add-row__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Search bar above tables ────────────────────────────────────── */
.skub-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Sequence mode selector ─────────────────────────────────────── */
.skub-seq-mode-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.skub-seq-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  background: var(--color-bg, #fff);
}

.skub-seq-mode-option:hover {
  border-color: var(--color-primary-muted, #a5b4fc);
  background: var(--color-bg-subtle, #f9fafb);
}

.skub-seq-mode-option.is-active {
  border-color: var(--color-primary, #4f46e5);
  background: var(--color-primary-subtle, #f0f0ff);
}

.skub-seq-mode-option__icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.skub-seq-mode-option.is-active .skub-seq-mode-option__icon {
  color: var(--color-primary, #4f46e5);
}

.skub-seq-mode-option__check {
  position: absolute;
  top: 10px;
  right: 12px;
  opacity: 0;
  color: var(--color-primary, #4f46e5);
  transition: opacity 0.15s;
}
.skub-seq-mode-option.is-active .skub-seq-mode-option__check {
  opacity: 1;
}

/* ── Sequence counter inline reset ──────────────────────────────── */
.skub-seq-counter {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  font-size: 0.9rem;
}

.skub-seq-edit-overlay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.skub-seq-edit-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg-subtle, #f6f8fa);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  padding: 4px 8px;
}
.skub-seq-edit-box__label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ── Abbreviation table ─────────────────────────────────────────── */
.skub-abbrev-table td { vertical-align: middle; }
.skub-abbrev-display--code { font-family: var(--font-mono, monospace); }

.skub-abbrev-original-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
}

.skub-abbrev-add-row {
  padding: 16px 0 4px;
  border-top: 1px solid var(--color-border, #e5e7eb);
  margin-top: 8px;
}
.skub-abbrev-add-row__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.skub-abbrev-add-row__submit {
  display: flex;
  align-items: flex-end;
}
.skub-abbrev-add-row__error {
  margin-top: 6px;
  color: var(--color-danger, #dc2626);
  font-size: 0.8rem;
}

/* ── Pagination strip ───────────────────────────────────────────── */
.skub-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 4px;
}
.skub-pagination__info {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ── Inline-editable abbreviation cell ─────────────────────────── */
.skub-abbrev-cell {
  cursor: default;
}
.skub-abbrev-cell--editable {
  cursor: pointer;
  position: relative;
}
.skub-abbrev-cell--editable:hover .skub-abbrev-display {
  background: var(--pp-accent-soft, #eff6ff);
  border-radius: 4px;
  padding: 2px 6px;
  margin: -2px -6px;
}
.skub-abbrev-edit-input {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  font-size: inherit;
  width: 100%;
  max-width: 120px;
  padding: 2px 6px;
  border: 1px solid var(--pp-accent, #2563eb);
  border-radius: 4px;
  outline: none;
  box-shadow: 0 0 0 2px var(--pp-accent-soft, #eff6ff);
}

@media (max-width: 900px) {
  .skub-seq-mode-selector {
    grid-template-columns: 1fr;
  }
  .skub-abbrev-add-row__grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Multi-select combobox (.ms-*)
   Reusable multi-value type-to-filter combobox with pill chips.
   Sibling of searchable-select (.ss-*); use when multiple values are needed.
───────────────────────────────────────────────────────────────────────────── */

.ms-picker {
  position: relative;
}

.ms-field {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--pp-border, #d1d5db);
  border-radius: 6px;
  background: #fff;
  min-height: 38px;
  cursor: text;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ms-field:focus-within {
  border-color: var(--pp-accent, #2563eb);
  box-shadow: 0 0 0 2px var(--pp-accent-soft, #eff6ff);
}

.ms-chips {
  display: contents;
}

.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--pp-accent-soft, #eff6ff);
  color: var(--pp-accent, #2563eb);
  border: 1px solid var(--pp-accent, #2563eb);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.5;
}

.ms-chip__label {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-chip__remove {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--pp-accent, #2563eb);
  padding: 0 1px;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.1s;
}
.ms-chip__remove:hover {
  opacity: 1;
}

.ms-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.875rem;
  flex: 1;
  min-width: 80px;
  padding: 2px 4px;
  line-height: 1.5;
}
.ms-input::-webkit-search-cancel-button { display: none; }

.ms-dropdown {
  position: fixed;
  background: #fff;
  border: 1px solid var(--pp-border, #d1d5db);
  border-radius: 8px;
  box-shadow: var(--pp-shadow-md, 0 4px 6px -1px rgba(0,0,0,.1));
  overflow-y: auto;
  max-height: 280px;
  z-index: 1200;
}

.ms-group-header {
  padding: 6px 12px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pp-text-muted, #6b7280);
  user-select: none;
}

.ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.1s;
}
.ms-option:hover,
.ms-option.is-active {
  background: var(--pp-accent-soft, #eff6ff);
}
.ms-option.is-selected {
  font-weight: 500;
}

.ms-option__check {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--pp-accent, #2563eb);
  opacity: 0;
  transition: opacity 0.1s;
}
.ms-option.is-selected .ms-option__check {
  opacity: 1;
}

.ms-option__label {
  flex: 1;
  min-width: 0;
}

.ms-empty-state {
  padding: 12px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--pp-text-muted, #6b7280);
}

.ms-help {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--pp-text-muted, #6b7280);
}

/* ── Rate shopper profile form (rsp-*) ───────────────────────── */

.rsp-form > .panel + .panel,
.rsp-form > .form-actions {
  margin-top: 24px;
}

.rsp-form .rsp-method-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.rsp-method-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--pp-accent-soft);
  border: 1px solid var(--pp-accent);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--pp-accent);
  line-height: 1.3;
}

.rsp-method-chip__carrier {
  color: var(--pp-text-muted);
  font-weight: 400;
}

.rsp-method-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: var(--pp-accent);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.rsp-method-chip__remove:hover {
  background: var(--pp-danger);
}

/* ── Shipping method picker multi-select mode ────────────────── */

.smp-picker--multi .smp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}

.smp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: var(--pp-accent-soft);
  border: 1px solid var(--pp-accent);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--pp-accent);
}

.smp-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: none;
  background: var(--pp-accent);
  color: #fff;
  font-size: 9px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.smp-chip__remove:hover { background: var(--pp-danger); }

.smp-option--selected {
  background: var(--pp-accent-soft);
  font-weight: 600;
}

/* Rate shopper profile group in the picker */
.smp-rsp-header {
  padding: 6px 10px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pp-success);
  background: var(--pp-success-soft);
  border-bottom: 1px solid var(--pp-border);
}

.smp-rsp-option {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.smp-rsp-option:hover {
  background: var(--pp-accent-soft);
}
.smp-rsp-option__name { font-weight: 600; }
.smp-rsp-option__meta {
  font-size: 0.72rem;
  color: var(--pp-text-muted);
}
.smp-rsp-divider {
  border-top: 1px solid var(--pp-border);
  margin: 2px 0;
}

/* Rate card winner highlight for rate shopper */
.ship-rate-card--winner {
  border-color: var(--pp-success);
  background: var(--pp-success-soft);
  box-shadow: 0 0 0 1px var(--pp-success);
}
.ship-rate-badge--winner {
  background: var(--pp-success);
  color: #fff;
}

/* ── Product type form (ptype-*) ─────────────────────────────── */

.ptype-form > .panel + .panel,
.ptype-form > section + section,
.ptype-form > .form-actions {
  margin-top: 24px;
}

.ptype-schema-toggle {
  padding: 16px 20px;
  border-bottom: 1px solid var(--pp-border);
}

.ptype-schema-toggle__label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.ptype-schema-toggle__input {
  margin-top: 3px;
  flex-shrink: 0;
}

.ptype-schema-toggle__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ptype-schema-fields {
  padding: 20px;
}

.ptype-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}

.ptype-field-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--pp-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s var(--pp-ease), background 0.15s var(--pp-ease);
}

.ptype-field-item:hover {
  border-color: var(--pp-accent);
  background: var(--pp-accent-soft);
}

.ptype-field-item:has(.ptype-field-item__check:checked) {
  border-color: var(--pp-accent);
  background: var(--pp-accent-soft);
}

.ptype-field-item__check {
  margin-top: 2px;
  flex-shrink: 0;
}

.ptype-field-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ptype-field-item__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--pp-text);
}

.ptype-field-item__meta {
  font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Put-Away — scan entry, index, detail
   ═══════════════════════════════════════════════════════════════════════════ */

.putaway-scan-entry {
  max-width: 560px;
  margin: 24px auto;
  padding: 0 16px;
}

/* ── Scan card (floor-lookup style) ── */
.putaway-scan-entry__scan-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.putaway-scan-entry__art {
  width: 128px;
  height: 128px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2, #f8fafc);
  color: var(--pp-primary, #2563eb);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.putaway-scan-entry__art svg {
  width: 84px;
  height: 84px;
}

.putaway-scan-entry__title {
  margin: 18px 0 8px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink, #1f2933);
}

.putaway-scan-entry__copy {
  max-width: 360px;
  margin: 0 auto;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.45;
}

.putaway-scan-entry__copy strong {
  color: var(--ink, #1f2933);
}

.putaway-scan-entry__hint {
  margin-top: 20px;
  font-size: 13px;
}

.putaway-scan-entry__error {
  background: var(--pp-danger-50, #fef2f2);
  border: 1px solid var(--pp-danger-200, #fecaca);
  color: var(--pp-danger-700, #b91c1c);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 12px;
  text-align: center;
}

/* ── Scanned bins list (inside scan card) ── */
.putaway-scan-entry__bin-list {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 24px;
  text-align: left;
}

.putaway-scan-entry__bin-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.putaway-scan-entry__bin-list-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.putaway-scan-entry__bins {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.putaway-scan-entry__bin-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
}

.putaway-scan-entry__bin-code {
  font-family: var(--pp-font-mono, monospace);
}

.putaway-scan-entry__bin-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 3px;
}

.putaway-scan-entry__bin-remove:hover {
  color: var(--pp-danger-600, #dc2626);
  background: var(--pp-danger-50, #fef2f2);
}

.putaway-scan-entry__proceed {
  margin-top: 16px;
  text-align: center;
}

/* ── Creating overlay (building animation) ── */
.putaway-scan-entry__creating-overlay {
  background: var(--panel, #ffffff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  padding: 64px 32px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.putaway-scan-entry__creating-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.putaway-scan-entry__creating-rings {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
}

.putaway-scan-entry__creating-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
}

.putaway-scan-entry__creating-ring--outer {
  inset: 0;
  border-top-color: var(--pp-primary, #2563eb);
  border-right-color: var(--pp-primary, #2563eb);
  animation: putaway-ring-spin 1.2s linear infinite;
}

.putaway-scan-entry__creating-ring--inner {
  inset: 10px;
  border-bottom-color: var(--pp-primary-300, #93c5fd);
  border-left-color: var(--pp-primary-300, #93c5fd);
  animation: putaway-ring-spin 0.9s linear infinite reverse;
}

.putaway-scan-entry__creating-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--pp-primary, #2563eb);
  opacity: 0.3;
}

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

.putaway-scan-entry__creating-headline {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #1f2933);
  margin: 0 0 6px;
}

.putaway-scan-entry__creating-subtext {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

/* Progress bar mini (putaway + pick index rows) */
.progress-bar-mini {
  width: 60px;
  height: 6px;
  background: var(--surface-3, #e2e8f0);
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.progress-bar-mini__fill {
  height: 100%;
  background: var(--pp-success, #22c55e);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Put-away detail page */
.putaway-detail__layout {
  margin-top: 16px;
}

.putaway-detail__source-bins {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Timeline */
.putaway-detail__timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.putaway-detail__timeline-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}

.putaway-detail__timeline-item:last-child {
  border-bottom: none;
}

.putaway-detail__timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pp-success, #22c55e);
  margin-top: 5px;
  flex-shrink: 0;
}

.putaway-detail__timeline-title {
  font-size: 13px;
}

.putaway-detail__timeline-meta {
  font-size: 12px;
  margin-top: 2px;
}

/* Dropdown danger item */
.dropdown-item--danger {
  color: var(--pp-danger-600, #dc2626);
}

.dropdown-item--danger:hover {
  background: var(--pp-danger-50, #fef2f2);
}

/* ── Put-away action modals (override / split) ── */
.putaway-action-modal .modal-surface {
  position: relative;
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
  padding: 0;
}

.putaway-action-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.putaway-action-modal .modal-header h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.putaway-action-modal__surface {
  max-width: 400px;
  width: 100%;
  margin: auto;
}

.putaway-action-modal__body {
  padding: 24px;
  text-align: center;
}

.putaway-action-modal__art {
  margin: 0 auto 16px;
  color: var(--pp-primary, #2563eb);
}

.putaway-action-modal__instruction {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #1f2933);
  margin: 0 0 6px;
}

.putaway-action-modal__hint {
  font-size: 14px;
  margin: 0;
}

.putaway-action-modal__scan-prompt {
  padding: 16px 0;
}

.putaway-action-modal__confirm-step {
  padding: 16px 0;
}

.putaway-action-modal__scanned-label {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.putaway-action-modal__scanned-code {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--pp-font-mono, monospace);
  color: var(--pp-primary, #2563eb);
  margin: 0 0 20px;
}

.putaway-action-modal__reason,
.putaway-action-modal__qty-input {
  text-align: left;
  margin-bottom: 20px;
}

.putaway-action-modal__field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}

.putaway-action-modal__number-input {
  font-size: 24px;
  text-align: center;
  padding: 12px 16px;
  max-width: 140px;
  margin: 0 auto;
  display: block;
}

.putaway-action-modal__qty-hint {
  text-align: center;
  font-size: 12px;
  margin-top: 6px;
}

.putaway-action-modal__action-btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
}

@media (max-width: 480px) {
  .putaway-action-modal__surface {
    max-width: 100%;
    margin: 0;
    min-height: 100dvh;
    border-radius: 0;
  }
  .putaway-action-modal__body {
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 60dvh;
  }
  .putaway-action-modal__number-input {
    font-size: 32px;
    padding: 16px;
    max-width: 160px;
  }
  .putaway-action-modal__instruction {
    font-size: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Replenishment Dashboard (repl-*)
   ═══════════════════════════════════════════════════════════════════ */

.repl-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Needs Attention panel ─────────────────────────────────── */
.repl-attention-panel {
  border-left: 3px solid var(--pp-warning, #f59e0b);
}

/* ── Urgency bar (inline in table cells) ───────────────────── */
.repl-urgency-bar {
  width: 48px;
  height: 6px;
  background: var(--pp-surface-2, #f1f5f9);
  border-radius: 999px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.repl-urgency-bar__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.2s var(--pp-ease);
}
.repl-urgency-bar__fill--low     { background: var(--pp-success, #22c55e); }
.repl-urgency-bar__fill--warning { background: var(--pp-warning, #f59e0b); }
.repl-urgency-bar__fill--critical { background: var(--pp-danger, #ef4444); }

/* ── Progress bar (active batches table) ───────────────────── */
.repl-progress-bar {
  width: 64px;
  height: 6px;
  background: var(--pp-surface-2, #f1f5f9);
  border-radius: 999px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
.repl-progress-bar__fill {
  height: 100%;
  background: var(--pp-accent, #2563eb);
  border-radius: 999px;
  transition: width 0.3s var(--pp-ease);
}

/* ── Shift stats panel ─────────────────────────────────────── */
.repl-shift-panel {
  padding-bottom: 20px;
}
.repl-shift-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 16px 24px;
}
.repl-shift-stat {
  text-align: center;
}
.repl-shift-stat__value {
  font-size: 22px;
  font-weight: 600;
  color: var(--pp-text, #1e293b);
  line-height: 1.2;
}
.repl-shift-stat__unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--pp-text-muted, #64748b);
}
.repl-shift-stat__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted, #64748b);
  margin-top: 4px;
}
@media (max-width: 768px) {
  .repl-shift-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Worker breakdown */
.repl-worker-breakdown {
  padding: 0 24px 4px;
  border-top: 1px solid var(--pp-border, #e2e8f0);
  margin-top: 12px;
  padding-top: 16px;
}
.repl-worker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.repl-worker-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

/* ── Recent batches collapsible ────────────────────────────── */
.repl-recent-details {
  margin-top: 4px;
}
.repl-recent-summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--pp-text-muted, #64748b);
  padding: 8px 0;
  user-select: none;
}
.repl-recent-summary:hover {
  color: var(--pp-text, #1e293b);
}

/* ═══════════════════════════════════════════════════════════════════
   Replenishment New Batch Modal (repl-*)
   ═══════════════════════════════════════════════════════════════════ */

/* (Replenishment modal reuses .cc-toggle and .cc-section from Cycle Count) */


/* ═══════════════════════════════════════════════════════════════════
   Performance Hub (perf-*)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Controls bar ────────────────────────────────────────────────── */
.perf-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin-bottom: 20px;
}

.perf-period-tabs,
.perf-domain-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--pp-surface-2, #f8fafc);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 8px;
  padding: 3px;
}

.perf-period-tab,
.perf-domain-tab {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pp-text-muted, #64748b);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.perf-period-tab:hover,
.perf-domain-tab:hover {
  color: var(--pp-text, #1e293b);
  background: var(--pp-surface, #fff);
}

.perf-period-tab.is-active,
.perf-domain-tab.is-active {
  background: var(--pp-surface, #fff);
  color: var(--pp-accent, #2563eb);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.perf-location-select .input {
  font-size: 13px;
  padding: 4px 8px;
  height: 30px;
}

/* ── KPI Tiles ───────────────────────────────────────────────────── */
.perf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.perf-kpi-grid--sm .perf-kpi-tile {
  min-height: 88px;
}

.perf-kpi-tile {
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: box-shadow 0.15s;
}

.perf-kpi-tile:hover {
  box-shadow: var(--pp-shadow-sm, 0 1px 4px rgba(0,0,0,0.08));
}

.perf-kpi-tile__icon {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 4px;
}

.perf-kpi-tile__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted, #64748b);
}

.perf-kpi-tile__value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pp-text, #1e293b);
}

.perf-kpi-tile__delta {
  font-size: 11px;
  font-weight: 500;
  margin-top: 2px;
}

.perf-kpi-tile__delta--up   { color: var(--pp-success, #16a34a); }
.perf-kpi-tile__delta--down { color: var(--pp-danger, #ef4444); }

/* Tone variants */
.perf-kpi-tile--blue   { border-top: 3px solid #2563eb; }
.perf-kpi-tile--indigo { border-top: 3px solid #4f46e5; }
.perf-kpi-tile--green  { border-top: 3px solid #16a34a; }
.perf-kpi-tile--amber  { border-top: 3px solid #d97706; }
.perf-kpi-tile--red    { border-top: 3px solid #dc2626; }
.perf-kpi-tile--purple { border-top: 3px solid #7c3aed; }

/* ── Chart panel ─────────────────────────────────────────────────── */
.perf-chart-panel .perf-chart-wrap {
  padding: 16px 20px 20px;
  height: 260px;
}

/* ── Domain health cards ─────────────────────────────────────────── */
.perf-domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.perf-domain-card {
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 10px;
  padding: 16px;
}

.perf-domain-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.perf-domain-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

.perf-domain-card__icon--blue   { background: #2563eb; }
.perf-domain-card__icon--green  { background: #16a34a; }
.perf-domain-card__icon--amber  { background: #d97706; }
.perf-domain-card__icon--purple { background: #7c3aed; }

.perf-domain-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text-muted, #64748b);
}

.perf-domain-card__metric {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pp-text, #1e293b);
}

.perf-domain-card__label {
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
  margin-bottom: 4px;
}

.perf-domain-card__sub {
  font-size: 12px;
  color: var(--pp-text-subtle, #94a3b8);
  margin-bottom: 8px;
}

.perf-domain-card__link {
  font-size: 12px;
  color: var(--pp-accent, #2563eb);
  text-decoration: none;
}

.perf-domain-card__link:hover { text-decoration: underline; }

/* ── Quick Reports ───────────────────────────────────────────────── */
.perf-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  padding: 12px 20px 20px;
}

.perf-report-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--pp-surface-2, #f8fafc);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 8px;
  text-decoration: none;
  color: var(--pp-text, #1e293b);
  transition: background 0.15s, border-color 0.15s;
}

.perf-report-card:hover {
  background: var(--pp-accent-soft, #eff6ff);
  border-color: var(--pp-accent, #2563eb);
}

.perf-report-card__icon { font-size: 20px; }
.perf-report-card__title { flex: 1; font-size: 13px; font-weight: 500; }
.perf-report-card__arrow { color: var(--pp-text-muted, #64748b); }

/* ── Team comparison table ───────────────────────────────────────── */
.perf-team-table th.num,
.perf-team-table td.num {
  text-align: right;
}

.perf-worker-name {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--pp-text, #1e293b);
  font-weight: 500;
}

.perf-worker-name:hover { color: var(--pp-accent, #2563eb); }

.perf-worker-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pp-accent-soft, #eff6ff);
  color: var(--pp-accent, #2563eb);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Sparkline ───────────────────────────────────────────────────── */
.perf-sparkline {
  display: inline-block;
  width: 60px;
  height: 24px;
  background: linear-gradient(to right, var(--pp-accent-soft, #eff6ff) 0%, var(--pp-accent-soft, #eff6ff) 100%);
  border-radius: 3px;
  vertical-align: middle;
  /* TODO: replace with SVG sparkline via Stimulus controller */
}

/* ── Scorecard layout ────────────────────────────────────────────── */
.perf-scorecard {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 768px) {
  .perf-scorecard {
    grid-template-columns: 1fr;
  }
}

.perf-worker-card {
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  margin-bottom: 12px;
}

.perf-worker-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pp-accent-soft, #eff6ff);
  color: var(--pp-accent, #2563eb);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.perf-worker-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--pp-text, #1e293b);
}

.perf-worker-card__email {
  font-size: 12px;
  margin-top: 2px;
}

/* ── Scorecard side tabs ─────────────────────────────────────────── */
.perf-scorecard__tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 12px;
}

.perf-scorecard__tab {
  display: block;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pp-text-muted, #64748b);
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}

.perf-scorecard__tab:hover { color: var(--pp-text, #1e293b); background: var(--pp-surface-2, #f8fafc); }
.perf-scorecard__tab.is-active { color: var(--pp-accent, #2563eb); background: var(--pp-accent-soft, #eff6ff); font-weight: 600; }

/* ── Saved snapshots list ────────────────────────────────────────── */
.perf-snapshot-list {
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 10px;
  padding: 12px;
}

.perf-snapshot-item {
  display: block;
  padding: 5px 6px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--pp-accent, #2563eb);
  text-decoration: none;
}

.perf-snapshot-item:hover { background: var(--pp-accent-soft, #eff6ff); }

/* ── Extremes panel ──────────────────────────────────────────────── */
.perf-extremes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px 20px;
}

.perf-extreme {
  border-radius: 8px;
  padding: 12px 14px;
}

.perf-extreme--best  { background: var(--pp-success-soft, #f0fdf4); border: 1px solid #86efac; }
.perf-extreme--worst { background: var(--pp-warning-soft, #fffbeb); border: 1px solid #fde68a; }

.perf-extreme__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pp-text-muted, #64748b); margin-bottom: 4px; }
.perf-extreme__date  { font-size: 13px; color: var(--pp-text, #1e293b); }
.perf-extreme__value { font-size: 18px; font-weight: 700; color: var(--pp-text, #1e293b); }

/* ── Comparison panel ────────────────────────────────────────────── */
.perf-comparison-panel .perf-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px 20px;
}

.perf-comparison-item__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pp-text-muted); margin-bottom: 4px; }
.perf-comparison-item__user  { font-size: 22px; font-weight: 700; color: var(--pp-text, #1e293b); }
.perf-comparison-item__team  { font-size: 12px; margin-top: 2px; }

/* ── Targets panel ───────────────────────────────────────────────── */
.perf-targets-list { padding: 12px 20px; display: flex; flex-direction: column; gap: 8px; }
.perf-target-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--pp-border, #e2e8f0); }
.perf-target-row:last-child { border-bottom: none; }
.perf-target-row__metric { flex: 1; font-size: 13px; font-weight: 500; }
.perf-target-row__value  { font-size: 15px; font-weight: 700; color: var(--pp-accent, #2563eb); }

/* ── Report section ──────────────────────────────────────────────── */
.perf-report-section { margin-bottom: 24px; }
.perf-report-section__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pp-text-muted, #64748b); padding: 12px 20px 4px; }
.perf-report-list { display: flex; flex-direction: column; }
.perf-report-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--pp-border, #e2e8f0); text-decoration: none; color: var(--pp-text, #1e293b); transition: background 0.1s; }
.perf-report-row:hover { background: var(--pp-surface-2, #f8fafc); }
.perf-report-row__content { flex: 1; }
.perf-report-row__name { font-size: 14px; font-weight: 500; }
.perf-report-row__desc { font-size: 12px; margin-top: 2px; }
.perf-report-row__arrow { color: var(--pp-text-muted, #64748b); }

/* ── Section header ──────────────────────────────────────────────── */
.perf-section-header { margin-bottom: 16px; }
.perf-section-header h2 { font-size: 16px; font-weight: 700; color: var(--pp-text, #1e293b); }

/* ── Delta badge ─────────────────────────────────────────────────── */
.perf-delta { font-size: 12px; font-weight: 500; }
.perf-delta--up   { color: var(--pp-success, #16a34a); }
.perf-delta--down { color: var(--pp-danger, #ef4444); }


/* ── Query bar ───────────────────────────────────────────────────── */
.perf-query-bar {
  margin-bottom: 16px;
}

.perf-query-bar__form {
  margin-bottom: 8px;
}

.perf-query-bar__input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 10px;
  padding: 6px 8px 6px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.perf-query-bar__input-wrap:focus-within {
  border-color: var(--pp-accent, #2563eb);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.perf-query-bar__icon {
  flex-shrink: 0;
  color: var(--pp-text-muted, #64748b);
}

.perf-query-bar__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--pp-text, #1e293b);
  min-width: 0;
}

.perf-query-bar__input::placeholder {
  color: var(--pp-text-subtle, #94a3b8);
}

.perf-query-answer {
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--pp-surface-2, #f8fafc);
  border: 1px solid var(--pp-border, #e2e8f0);
}

.perf-query-answer--empty {
  font-size: 12px;
}

.perf-query-answer__question {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
  margin-bottom: 6px;
}

.perf-query-answer__result {
  font-size: 15px;
  font-weight: 600;
  color: var(--pp-text, #1e293b);
  margin-bottom: 6px;
}

.perf-query-answer__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.perf-query-answer__error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--pp-danger, #ef4444);
}

/* ── Alerts panel ────────────────────────────────────────────────── */
.perf-alerts-panel { margin-bottom: 16px; }

.perf-alerts-list { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 8px; }

.perf-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--pp-border, #e2e8f0);
}

.perf-alert--critical { background: var(--pp-danger-soft, #fef2f2); border-color: #fca5a5; }
.perf-alert--warning  { background: var(--pp-warning-soft, #fffbeb); border-color: #fde68a; }
.perf-alert--info     { background: var(--pp-accent-soft, #eff6ff);  border-color: #bfdbfe; }

.perf-alert__icon  { font-size: 16px; line-height: 1.4; flex-shrink: 0; }
.perf-alert__body  { flex: 1; min-width: 0; }
.perf-alert__message { font-size: 13px; font-weight: 500; color: var(--pp-text, #1e293b); margin-bottom: 4px; }
.perf-alert__meta  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.perf-alert__dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--pp-text-muted, #64748b);
  background: transparent;
  text-decoration: none;
  transition: background 0.1s;
}
.perf-alert__dismiss:hover { background: rgba(0,0,0,0.06); }

/* ── Comparison table checkboxes ─────────────────────────────────── */
.perf-compare-check-col { width: 32px; }
.perf-compare-check     { cursor: pointer; width: 16px; height: 16px; }
.perf-compare-bar       { display: flex; align-items: center; gap: 12px; padding: 8px 0; }

/* ── Mobile: scorecard stacks vertically on small screens ────────── */
@media (max-width: 640px) {
  .perf-scorecard {
    grid-template-columns: 1fr;
  }

  .perf-scorecard__sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .perf-worker-card,
  .perf-scorecard__tabs,
  .perf-snapshot-list {
    flex: 1 1 calc(50% - 5px);
    min-width: 160px;
  }

  .perf-scorecard__tabs {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .perf-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .perf-domain-grid {
    grid-template-columns: 1fr 1fr;
  }

  .perf-controls {
    gap: 6px;
  }

  .perf-period-tabs,
  .perf-domain-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .perf-chart-wrap {
    height: 200px !important;
  }
}

@media (max-width: 400px) {
  .perf-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Back link (breadcrumb-style) ───────────────────────────────────────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--pp-text-muted, #64748b);
  text-decoration: none;
  margin-bottom: 4px;
  transition: color 0.15s;
}
.back-link:hover { color: var(--pp-text, #1e293b); }

/* ── Enhanced Performance Reviews ───────────────────────────────────────── */

/* Review form */
.review-form-section {
  margin-bottom: 20px;
}
.review-form-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pp-accent, #2563eb);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin-right: 8px;
  flex-shrink: 0;
}
.review-form-section .panel-header h2 {
  display: flex;
  align-items: center;
}

/* Period preset pills */
.review-period-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.review-period-pill {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--pp-border, #e2e8f0);
  background: var(--pp-surface, #fff);
  color: var(--pp-text, #1e293b);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.review-period-pill:hover {
  border-color: var(--pp-accent, #2563eb);
}
.review-period-pill.is-active {
  border-color: var(--pp-accent, #2563eb);
  background: var(--pp-accent-light, #eff6ff);
  color: var(--pp-accent, #2563eb);
  font-weight: 600;
}

/* Present-term notice */
.review-present-term-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: var(--pp-info-bg, #eff6ff);
  border: 1px solid var(--pp-info-border, #bfdbfe);
  border-radius: 8px;
  font-size: 13px;
  color: var(--pp-info-text, #1e40af);
}

.review-recalc-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 8px;
  background: var(--pp-warn-bg, #fffbeb);
  border: 1px solid var(--pp-warn-border, #fde68a);
  border-radius: 8px;
  font-size: 13px;
  color: var(--pp-warn-text, #92400e);
}

/* Quick add presets */
.review-quick-add {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 20px 12px;
  flex-wrap: wrap;
}
.review-quick-add__label {
  white-space: nowrap;
}
.review-quick-add__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.review-quick-pill {
  padding: 4px 10px;
  border-radius: 16px;
  border: 1.5px dashed var(--pp-border, #e2e8f0);
  background: transparent;
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.review-quick-pill:hover {
  border-color: var(--pp-accent, #2563eb);
  color: var(--pp-accent, #2563eb);
}

/* Metric list */
.review-metric-list {
  padding: 0 20px 8px;
}
.review-metric-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  color: var(--pp-text-muted, #64748b);
  font-size: 14px;
  border: 2px dashed var(--pp-border, #e2e8f0);
  border-radius: 8px;
  padding: 20px 16px;
}
.review-metric-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--pp-surface, #fff);
}
.review-metric-card__main {
  flex: 1;
  min-width: 0;
}
.review-metric-card__label {
  font-size: 14px;
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}
.review-metric-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.review-metric-card__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.review-metric-add-row {
  padding: 8px 20px 20px;
}

/* Metric builder panel */
.review-metric-builder-panel {
  margin: 0 20px 20px;
  padding: 20px;
  border: 2px solid var(--pp-accent, #2563eb);
  border-radius: 10px;
  background: var(--pp-accent-light, #eff6ff);
}
.review-metric-builder-panel__title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--pp-accent, #2563eb);
}
.review-metric-builder-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.review-target-row {
  display: flex;
  gap: 8px;
}
.review-target-input {
  flex: 1;
}
.review-target-direction {
  flex: 1;
}
.review-filters-toggle {
  margin-bottom: 8px;
}
.review-filter-list {
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 8px;
  padding: 12px;
  background: var(--pp-surface, #fff);
}
.review-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.review-filter-group {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  background: var(--pp-surface-1, #fafbfc);
}
.review-filter-group__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.review-filter-group__remove {
  margin-left: auto;
}
.review-filter-top-join {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* Review show page */
.review-show-header {
  margin-bottom: 20px;
}
.review-show-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding: 16px 20px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 10px;
}
.review-show-meta__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-show-meta__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-text-muted, #64748b);
  font-weight: 600;
}
.review-show-meta__value {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Live badge */
.review-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.review-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: review-pulse 1.5s ease-in-out infinite;
}
@keyframes review-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Metrics panel rows */
.review-metrics-panel {
  margin-bottom: 20px;
}
.review-metric-rows {
  padding: 0 20px 16px;
}
.review-metric-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pp-border, #f1f5f9);
}
.review-metric-row:last-child {
  border-bottom: none;
}
.review-metric-row__label-col {
  flex: 1;
  min-width: 0;
}
.review-metric-row__label {
  font-size: 14px;
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}
.review-metric-row__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.review-metric-row__value-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 120px;
}
.review-metric-row__value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--pp-text, #1e293b);
}
.review-metric-row__value--empty {
  color: var(--pp-text-muted, #94a3b8);
}
.review-metric-row__unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--pp-text-muted, #64748b);
  margin-left: 3px;
}
.review-metric-row__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.review-metric-row__delta--up {
  color: #16a34a;
  background: #f0fdf4;
}
.review-metric-row__delta--down {
  color: #dc2626;
  background: #fef2f2;
}
.review-metric-row__delta-label {
  font-weight: 400;
}
.review-metric-row__target {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.review-metric-row__target-pass {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #16a34a;
  font-weight: 500;
}
.review-metric-row__target-fail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #dc2626;
  font-weight: 500;
}
.review-metric-row__prior {
  font-size: 12px;
}

/* Progress bar */
.review-progress-bar {
  width: 120px;
  height: 6px;
  background: var(--pp-border, #e2e8f0);
  border-radius: 3px;
  overflow: hidden;
}
.review-progress-bar--sm {
  width: 100%;
  height: 4px;
  margin-top: 4px;
}
.review-progress-bar__fill {
  height: 100%;
  background: var(--pp-accent, #2563eb);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.review-progress-bar__fill--success {
  background: #16a34a;
}

/* Review notes */
.review-notes-panel,
.review-prior-panel {
  margin-bottom: 20px;
}
.review-notes-body {
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* My Reviews — self-view */
.my-reviews-goals-card {
  margin-bottom: 20px;
}
.my-reviews-goals-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.my-reviews-goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 0 20px 20px;
}
.my-reviews-goal-item {
  padding: 14px;
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 8px;
  background: var(--pp-surface, #fff);
}
.my-reviews-goal-item__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.my-reviews-goal-item__label {
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
  font-weight: 500;
  flex: 1;
}
.my-reviews-goal-item__status {
  flex-shrink: 0;
  margin-left: 6px;
}
.my-reviews-goal-item__status--pass { color: #16a34a; }
.my-reviews-goal-item__status--working { color: #f59e0b; }
.my-reviews-goal-item__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--pp-text, #1e293b);
  margin-bottom: 6px;
  line-height: 1.2;
}
.my-reviews-timeline {
  padding: 0 20px 16px;
}
.my-reviews-timeline-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pp-border, #f1f5f9);
}
.my-reviews-timeline-item:last-child { border-bottom: none; }
.my-reviews-timeline-item__period-col {
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.my-reviews-timeline-item__period {
  font-size: 14px;
  font-weight: 500;
}
.my-reviews-timeline-item__metrics-col {
  flex: 1;
}
.my-reviews-inline-metrics {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.my-reviews-inline-metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.my-reviews-inline-metric__value {
  font-size: 15px;
  font-weight: 600;
}
.my-reviews-inline-metric__label {
  font-size: 11px;
}
.my-reviews-timeline-item__status-col {
  min-width: 90px;
  text-align: center;
}
.my-reviews-timeline-item__actions-col {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Team member picker (settings/teams form) */
.team-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  padding: 0 20px 20px;
}
.team-member-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--pp-border, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.team-member-item:hover {
  border-color: var(--pp-accent, #2563eb);
}
.team-member-item__check:checked ~ .team-member-item__body {
  color: var(--pp-accent, #2563eb);
}
.team-member-item__body {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.team-member-item__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pp-accent-light, #eff6ff);
  color: var(--pp-accent, #2563eb);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.team-member-item__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.team-member-item__name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-member-item__email {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Worker scorecard index */
.perf-worker-teams {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── Performance Metrics catalog (pm-*) ──────────────────────────── */

.pm-domain-group + .pm-domain-group { margin-top: 16px; }

.pm-show-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
}
.pm-sidebar { display: flex; flex-direction: column; gap: 16px; }
.pm-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.pm-description { padding: 12px 16px 4px; }

.pm-chart-wrap {
  position: relative;
  height: 300px;
  padding: 8px 16px 16px;
}
.pm-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 24px;
}

.pm-filter-form { padding: 0 16px 16px; }
.pm-filter-form .form-field { margin-bottom: 12px; }
.pm-filter-form .form-field label { font-size: 12px; font-weight: 600; color: var(--pp-text-muted, #64748b); margin-bottom: 4px; }
.pm-filter-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

.pm-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: var(--pp-surface-2, #f8fafc);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 8px;
}

@media (max-width: 900px) {
  .pm-show-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Custom metric form (cmf-*) ──────────────────────────────────── */

.cmf-form > .panel + .panel,
.cmf-form > .form-actions { margin-top: 24px; }

.cmf-form .panel-header { padding-bottom: 12px; }

.cmf-tz-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin-top: 4px;
  background: var(--pp-surface-2, #f8fafc);
  border-radius: 8px;
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
}

.cmf-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--pp-text-muted, #64748b);
  cursor: pointer;
  padding: 8px 0;
}
.cmf-advanced-toggle:hover { color: var(--pp-text, #1e293b); }
.cmf-advanced-toggle svg { transition: transform 0.2s; }
.cmf-advanced-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

.cmf-advanced-panel {
  padding: 16px;
  margin-top: 8px;
  background: var(--pp-surface-2, #f8fafc);
  border-radius: 8px;
  border: 1px solid var(--pp-border, #e2e8f0);
}

/* Filter builder rows in custom metric form */
.cmf-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.cmf-filter-row + .cmf-filter-row {
  border-top: 1px solid var(--pp-border, #e2e8f0);
}
.cmf-filter-row select,
.cmf-filter-row input[type="text"] {
  flex: 1;
  min-width: 0;
}
/* Match all / any segmented control */
.cmf-seg {
  display: inline-flex;
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 6px;
  overflow: hidden;
}
.cmf-seg__btn {
  border: none;
  background: var(--pp-surface, #fff);
  color: var(--pp-text-muted, #64748b);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cmf-seg__btn + .cmf-seg__btn { border-left: 1px solid var(--pp-border, #e2e8f0); }
.cmf-seg__btn.is-active {
  background: var(--pp-accent, #2563eb);
  color: #fff;
}

.cmf-filter-hint { margin-top: 8px; }

/* Inline "fill-in-the-blanks" sentence builder */
.cmf-builder { padding: 16px; }
.cmf-sentence-builder {
  font-size: 18px;
  line-height: 2;
  color: var(--pp-text, #1e293b);
  margin: 16px 0 12px;
}
.cmf-inline-group { white-space: nowrap; }
.cmf-inline-select {
  display: inline;
  width: auto;
  min-width: 0;
  padding: 3px 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--pp-accent, #2563eb);
  background: var(--pp-accent-soft, #eff6ff);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  vertical-align: baseline;
}
.cmf-inline-select:hover { border-color: var(--pp-border-strong, #cbd5e1); }
.cmf-inline-select:focus {
  outline: none;
  border-color: var(--pp-accent, #2563eb);
  box-shadow: 0 0 0 2px var(--pp-accent-soft, #eff6ff);
}

.cmf-builder__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.cmf-builder__unit {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cmf-summary__preview {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cmf-summary__result { font-size: 14px; font-weight: 600; }
.cmf-summary__result.is-ok { color: var(--pp-success, #16a34a); }
.cmf-summary__result.is-error { color: var(--pp-danger, #dc2626); }

.cmf-mode-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 12px;
}

.cmf-schedule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cmf-schedule-grid .form-field { margin-bottom: 0; }

@media (max-width: 640px) {
  .review-period-presets { gap: 4px; }
  .review-period-pill { font-size: 12px; padding: 4px 10px; }
  .review-metric-row { flex-direction: column; gap: 8px; }
  .review-metric-row__value-col { align-items: flex-start; }
  .my-reviews-timeline-item { flex-wrap: wrap; }
  .my-reviews-timeline-item__metrics-col { order: 3; flex-basis: 100%; }
  .team-member-grid { grid-template-columns: 1fr; }
  .cmf-schedule-grid { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────── */
/* Vendor Catalog (vc-*)                                         */
/* ───────────────────────────────────────────────────────────── */

/* Image cells in index table */
.vc-image-cell { width: 56px; padding: 6px 8px; }
.vc-thumbnail {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--pp-radius-sm, 4px);
  border: 1px solid var(--pp-border-color, #e5e7eb);
  display: block;
}
.vc-thumbnail--empty {
  background: var(--pp-bg-subtle, #f9fafb);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #9ca3af);
}

/* Item title & description excerpt */
.vc-title { font-weight: 500; }
.vc-title-row {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
}
.vc-vendor-link {
  flex-shrink: 0;
}
.vc-description-excerpt { margin-top: 2px; font-size: 12px; }

/* Filter bar */
.vc-filter-bar { padding: 8px 16px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vc-filter-form { display: contents; }
.vc-filter-select { min-width: 140px; }

/* Vendor show tab stats */
.vc-vendor-stats { display: flex; gap: 24px; padding: 16px; }
.vc-vendor-stat { text-align: center; }
.vc-vendor-stat__value { display: block; font-size: 28px; font-weight: 700; }
.vc-vendor-stat__label { display: block; font-size: 12px; color: var(--muted, #6b7280); margin-top: 2px; }

/* Item show gallery */
.vc-image-gallery { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; }
.vc-gallery-item { position: relative; }
.vc-gallery-img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--pp-radius, 6px); border: 1px solid var(--pp-border-color, #e5e7eb); }
.vc-gallery-status { margin-top: 4px; text-align: center; font-size: 11px; }
.vc-gallery-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted, #9ca3af); height: 96px; }

/* Link actions */
.vc-link-actions { padding: 16px; }
.vc-link-buttons { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.vc-link-picker { padding: 16px; border-top: 1px solid var(--pp-border-color, #e5e7eb); }
.vc-link-picker-actions { display: flex; gap: 8px; margin-top: 8px; }

/* Create confirm strip */
.vc-create-confirm { margin-top: 12px; }

/* Item show — standalone page (no tab bar); reset entity-show breakout margins */
.vc-item-show {
  margin: 0;
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
}

/* Edit form — hidden by default; .form-grid display:grid would otherwise show it */
.vc-edit-form[hidden] { display: none !important; }
.vc-edit-form {
  padding: 0 24px 24px;
  border-top: 1px solid var(--pp-border-color, var(--line));
}
.vc-edit-form .form-actions { grid-column: 1 / -1; }

/* Row-action icon buttons wrapped in help-tooltip */
.vc-row-action-tooltip.help-tooltip-wrap { margin-left: 0; }
.vc-row-action-tooltip .help-tooltip-trigger {
  padding: 0;
  border-radius: var(--pp-radius, 6px);
  color: inherit;
  cursor: pointer;
}
.vc-row-action-tooltip .help-tooltip-trigger:hover,
.vc-row-action-tooltip .help-tooltip-trigger:focus { color: inherit; }

/* Bulk action modals */
.vc-bulk-modal .modal-content-wide { max-width: 880px; }

.vc-bulk-modal .modal-titlebar {
  align-items: flex-start;
  padding: 12px 16px 10px;
}

.vc-bulk-modal .modal-titlebar p {
  margin: 4px 0 0;
  line-height: 1.4;
}

.vc-bulk-modal .modal-body {
  padding: 16px;
}

.vc-bulk-po-picker { margin-bottom: 12px; }

.vc-bulk-create-toggle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text, #0f172a);
  cursor: pointer;
}

.vc-bulk-create-toggle input {
  flex-shrink: 0;
  margin-top: 2px;
}

.vc-bulk-lines-wrap { margin-top: 4px; }

.vc-bulk-modal .table-wrap {
  max-height: 320px;
  overflow-y: auto;
}
.vc-bulk-qty-input { width: 96px; text-align: right; }
.vc-bulk-callout {
  padding: 10px 12px;
  border-radius: var(--pp-radius, 6px);
  font-size: 13px;
  margin-bottom: 16px;
}
.vc-bulk-callout--warn {
  background: var(--pp-warning-bg, #fffbeb);
  border: 1px solid var(--pp-warning-border, #fcd34d);
  color: var(--pp-warning-text, #92400e);
}
.vc-bulk-loading { padding: 24px 0; text-align: center; }

/* Vendor catalog index — tighter gap between KPI strip and table */
.vc-index-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 0;
}

.vc-index-main .repl-kpi-row {
  margin-bottom: 0;
}

.vc-index-main .table-panel {
  margin-top: 0;
}

/* ─── Catalog Item Picker (cip-*) ─────────────────────────────── */
.cip-picker { position: relative; }
.cip-input-wrap { position: relative; }
.cip-input { width: 100%; }

.cip-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--pp-border-color, #e5e7eb);
  border-radius: var(--pp-radius, 6px);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 9999;
  max-height: 320px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.cip-dropdown__item { cursor: pointer; }
.cip-dropdown__item[aria-selected="true"] { background: var(--pp-bg-subtle, #f3f4f6); }
.cip-dropdown__item:hover { background: var(--pp-bg-subtle, #f3f4f6); }
.cip-dropdown__inner { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.cip-dropdown__img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--pp-border-color, #e5e7eb); flex-shrink: 0; }
.cip-dropdown__img--empty { background: var(--pp-bg-subtle, #f9fafb); }
.cip-dropdown__text { flex: 1; min-width: 0; }
.cip-dropdown__title { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cip-dropdown__meta { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cip-dropdown__status { flex-shrink: 0; }
.cip-dropdown__empty { padding: 12px 16px; font-size: 13px; color: var(--muted, #6b7280); }

/* Catalog item picker selected card */
.cip-selected-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--pp-border-color, #e5e7eb);
  border-radius: var(--pp-radius, 6px);
  padding: 10px 12px;
  background: var(--pp-bg-subtle, #f9fafb);
}
.cip-selected-card__info { flex: 1; min-width: 0; }
.cip-selected-card__title { font-weight: 500; font-size: 14px; }
.cip-selected-card__meta { font-size: 12px; margin-top: 2px; }
.cip-selected-card__clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--muted, #9ca3af);
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}
.cip-selected-card__clear:hover { background: var(--pp-bg-subtle, #f3f4f6); color: var(--pp-text, #111827); }

/* ============================================================
   Product Image Manager (.pi-*)
   ============================================================ */

.pi-panel { }

.pi-panel__header { align-items: flex-start; justify-content: space-between; }
.pi-panel__header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Drag-and-drop upload zone */
.pi-dropzone {
  border: 2px dashed var(--pp-border-color, #e5e7eb);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  margin: 0 16px 12px;
  transition: border-color 0.15s, background 0.15s;
  cursor: default;
}
.pi-dropzone--over {
  border-color: var(--pp-accent, #2563eb);
  background: var(--pp-accent-soft, #dbeafe);
}
.pi-dropzone__inner p { margin: 0 0 4px; }

/* Add-by-URL row */
.pi-url-row {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
  align-items: center;
}
.pi-url-row .input { flex: 1; }

/* Image grid */
.pi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 0 16px 16px;
}

/* ── Image card ─────────────────────────────────────────────── */
.pi-card {
  border: 1px solid var(--pp-border-color, #e5e7eb);
  border-radius: 10px;
  background: var(--pp-surface, #fff);
  display: flex;
  flex-direction: column;
  /* NO overflow:hidden here — lets the AI dropdown escape the card */
  position: relative;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.pi-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.10); }
.pi-card--featured {
  border-color: var(--pp-accent, #2563eb);
  box-shadow: 0 0 0 2px var(--pp-accent-soft, #dbeafe);
}
.pi-card--archived { opacity: 0.65; }
.pi-card--uploading { opacity: 0.5; }
.pi-card--dragging { opacity: 0.4; box-shadow: none; }
.pi-card--drag-over { border-color: var(--pp-accent, #2563eb); background: var(--pp-accent-soft, #dbeafe); }

/* Thumbnail wrapper — clips the image but NOT the dropdown */
.pi-card__thumb-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;         /* clips image only; dropdown is outside this element */
  border-radius: 9px 9px 0 0;
  background: var(--pp-page-bg, #f8fafc);
  cursor: grab;
}
.pi-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.pi-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pp-surface-2, #f1f5f9);
}
.pi-card__processing-label { font-size: 12px; color: var(--pp-muted, #9ca3af); }

/* Featured badge — bottom-left of the thumbnail */
.pi-card__featured-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: var(--pp-accent, #2563eb);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.5;
  pointer-events: none;
  z-index: 2;
}

/* Drag handle — top-left of thumbnail */
.pi-card__drag-handle {
  position: absolute;
  top: 6px;
  left: 6px;
  cursor: grab;
  font-size: 16px;
  color: rgba(255,255,255,0.9);
  z-index: 3;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(0,0,0,0.35);
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.pi-card:hover .pi-card__drag-handle { opacity: 1; }

/* Hover overlay with quick actions */
.pi-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.38);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  opacity: 0;
  pointer-events: none;   /* invisible overlay must never eat clicks */
  transition: opacity 0.15s;
  z-index: 2;
}
.pi-card:hover .pi-card__overlay {
  opacity: 1;
  pointer-events: auto;   /* only interactive when visible */
}

.pi-card__overlay-actions {
  display: flex;
  gap: 6px;
}
.pi-card__overlay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--pp-text, #111827);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.1s, transform 0.1s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.pi-card__overlay-btn:hover { background: #fff; transform: scale(1.08); }
.pi-card__overlay-btn--danger:hover { background: #fee2e2; color: #dc2626; }

/* Spinner for uploading placeholder */
.pi-card__spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--pp-border-color);
  border-top-color: var(--pp-accent, #2563eb);
  border-radius: 50%;
  animation: pi-spin 0.7s linear infinite;
}
@keyframes pi-spin { to { transform: rotate(360deg); } }

/* Card body (below the thumbnail) */
.pi-card__body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.pi-card__body-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-height: 24px;
}
.pi-card__body-top .pi-card__ai-menu { margin-left: auto; }
.pi-card__asset-link { margin: 2px 0 0; font-size: 11px; line-height: 1.3; }
.pi-card__asset-link .link { text-decoration: underline; }
.pi-card__render-pill { font-size: 10px; }
.pi-card--managed .pi-card__thumb-wrap { position: relative; }
.pi-card--managed .pi-card__thumb-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--pp-info, #3b82f6);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.4;
}
.pi-card__field-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--pp-muted, #6b7280);
  font-weight: 500;
}
.pi-card__field-label .input { font-size: 12px; padding: 4px 6px; }
.pi-card__caption { padding: 6px 8px; font-size: 12px; color: var(--pp-muted); word-break: break-all; }

/* Archived section */
.pi-archived-section {
  margin: 0 16px 16px;
  border: 1px solid var(--pp-border-color, #e5e7eb);
  border-radius: 8px;
  /* No overflow:hidden — would clip dropdown menus inside restored cards */
}
.pi-archived-section--empty { opacity: 0.6; }
.pi-archived-section__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #374151);
  padding: 10px 14px;
  background: var(--pp-surface-2, #f9fafb);
  border: none;
  border-radius: 8px;
  text-align: left;
  /* Collapse rounded corners when grid is visible below */
}
.pi-archived-section__toggle:hover { background: var(--pp-surface-3, #f1f5f9); }
.pi-archived-section:has([data-product-images-target="archivedGrid"]:not([hidden])) .pi-archived-section__toggle {
  border-radius: 8px 8px 0 0;
}
.pi-archived-section__icon { font-size: 11px; color: var(--pp-muted, #9ca3af); }
.pi-archived-section__count { color: var(--pp-muted, #6b7280); font-weight: normal; }
.pi-grid--archived {
  border-top: 1px solid var(--pp-border-color, #e5e7eb);
  padding: 12px 14px 14px;
}

/* Rejected AI review section */
.pi-rejected-section {
  margin: 0 16px 16px;
  border: 1px solid var(--pp-border-color, #e5e7eb);
  border-radius: 8px;
}
.pi-rejected-section--empty { opacity: 0.6; }
.pi-rejected-section:has([data-product-images-target="rejectedGrid"]:not([hidden])) .pi-archived-section__toggle {
  border-radius: 8px 8px 0 0;
}
.pi-grid--rejected {
  border-top: 1px solid var(--pp-border-color, #e5e7eb);
  padding: 12px 14px 14px;
}
.pi-card--awaiting-review {
  outline: 2px solid var(--pp-warning-border, #f59e0b);
  outline-offset: -2px;
}
.pi-card--rejected { opacity: 0.92; }
.pi-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.pi-review-hint { margin: 6px 0 0; }

.mir-facet-bar .pill { text-decoration: none; }
.mir-facet-bar .pill:not(.pill-info) { background: var(--pp-surface-2, #f3f4f6); color: var(--pp-text, #374151); }
.mir-index .mir-row-actions { min-width: 220px; }

/* Empty state inside grid */
.pi-empty-state { grid-column: 1 / -1; padding: 32px; text-align: center; }

/* ── Product image edit modal (.pi-edit-modal) ─────────────── */
.pi-edit-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
}
.pi-edit-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
}
.pi-edit-modal__panel {
  position: relative; z-index: 1;
  background: var(--pp-surface, #fff);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
  width: min(90vw, 860px);
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pi-edit-modal__toolbar {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pp-border-color, #e5e7eb);
  flex-wrap: wrap;
}
.pi-edit-modal__canvas-wrap {
  position: relative;
  flex: 1; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  background: #18181b;
  min-height: 200px;
  padding: 16px;
}
.pi-edit-modal__img-loading {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
}
.pi-edit-modal__img { max-width: 100%; max-height: 60vh; display: block; cursor: crosshair; user-select: none; }
.pi-edit-modal__crop-overlay {
  position: absolute;
  border: 2px solid var(--pp-accent, #2563eb);
  background: rgba(37,99,235,0.15);
  pointer-events: none;
}
.pi-edit-modal__versions {
  padding: 12px 16px;
  border-top: 1px solid var(--pp-border-color, #e5e7eb);
  max-height: 200px; overflow-y: auto;
}
.pi-edit-modal__hint { padding: 6px 16px 10px; }
.pi-version-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--pp-border-color, #f3f4f6);
}
.pi-version-row:last-child { border-bottom: none; }
.pi-version-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; background: var(--pp-surface-2, #f1f5f9); flex-shrink: 0; }
.pi-version-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }

/* ── AI prompt modal (in-panel, not native dialog) ──────────── */
.pi-ai-modal {
  position: fixed; inset: 0; z-index: 9100;
  display: flex; align-items: center; justify-content: center;
}
.pi-ai-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
}
.pi-ai-modal__panel {
  position: relative; z-index: 1;
  background: var(--pp-surface, #fff);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  width: min(90vw, 480px);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.pi-ai-modal__title { font-size: 16px; font-weight: 700; margin: 0; }
.pi-ai-modal__subtitle { margin: 0; }
.pi-ai-modal__input {
  width: 100%;
  resize: vertical;
  min-height: 72px;
  font-size: 14px;
}
.pi-ai-modal__actions {
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ── AI menu on image cards ─────────────────────────────────── */
.pi-card__ai-menu {
  position: relative;
  /* z-index must beat siblings so the dropdown layers on top */
  z-index: 10;
}
.pi-card__ai-trigger {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pp-accent, #2563eb);
  background: var(--pp-accent-soft, #dbeafe);
  border: none;
  border-radius: 5px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s;
}
.pi-card__ai-trigger:hover { background: #bfdbfe; }

.pi-card__ai-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;          /* align to the right edge of the trigger */
  z-index: 9999;     /* must be above everything in the panel */
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border-color, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  min-width: 210px;
  padding: 4px 0;
  /* overflow visible so it escapes any scroll container */
}
.pi-card__ai-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  font-size: 13px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pp-text, #111827);
}
.pi-card__ai-option:hover { background: var(--pp-surface-2, #f3f4f6); }
.pi-card__ai-divider { height: 1px; background: var(--pp-border-color, #e5e7eb); margin: 4px 0; }

/* AI processing progress indicator overlaid on the thumbnail */
.pi-card__ai-progress {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  pointer-events: none;
  z-index: 4;
}

/* ── Product media viewers (video / 3D / external video) ────── */
.pi-media-viewer { width: 100%; border-radius: 8px; overflow: hidden; background: #000; }
.pi-media-viewer--image { background: transparent; }
.pi-media-viewer__img { display: block; max-width: 100%; height: auto; }
.pi-media-viewer__video { display: block; width: 100%; max-height: 480px; }
.pi-media-viewer__model3d,
model-viewer { display: block; width: 100%; height: 420px; }
.pi-media-viewer__iframe { display: block; width: 100%; height: 380px; border: none; }

/* Media type thumbnail and badge on card grid */
.pi-card__media-thumb { position: relative; }
.pi-card__media-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pi-card__media-type-badge {
  position: absolute; bottom: 4px; left: 4px;
  background: rgba(0,0,0,0.65); color: #fff;
  font-size: 10px; padding: 2px 6px; border-radius: 4px;
  pointer-events: none;
}

/* ── Media Library ────────────────────────────────────────────────────────── */
.mlib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding: 24px;
}

.mlib-card {
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border-color, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s;
}
.mlib-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.1); }

.mlib-card__thumb {
  aspect-ratio: 1;
  background: var(--pp-surface-2, #f3f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mlib-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mlib-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.mlib-card__body {
  padding: 10px 12px 12px;
}
.mlib-card__name {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mlib-card__meta { margin: 0; }

/* Show page layout */
.mlib-show {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  padding: 24px;
  align-items: start;
}
@media (max-width: 860px) {
  .mlib-show { grid-template-columns: 1fr; }
}
.mlib-show__main { display: flex; flex-direction: column; gap: 16px; }
.mlib-show__sidebar { display: flex; flex-direction: column; gap: 16px; }
.mlib-show__preview { padding: 12px 16px; text-align: center; }
.mlib-show__image   { max-width: 100%; max-height: 240px; border-radius: 6px; }
.mlib-show__description { padding: 12px 16px; margin: 0; font-size: 13px; color: var(--pp-text-muted, #6b7280); }
.mlib-placement-thumb { width: 56px; }
.mlib-placement-thumb__img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--pp-border-color, #e5e7eb);
}
.td-actions__cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}

/* Assignment rule rows (condensed inline) */
.mlib-rule-row {
  border-top: 1px solid var(--pp-border-color, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  gap: 12px;
}
.mlib-rule-row__info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  font-size: 13px;
}
.mlib-rule-row__type { font-weight: 600; white-space: nowrap; }
.mlib-rule-row__conditions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.mlib-rule-row__cond { display: inline-flex; align-items: center; gap: 4px; }
.mlib-rule-row__actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Manual assignment inline form */
.mlib-manual-assign {
  border-top: 1px solid var(--pp-border-color, #e5e7eb);
  padding: 10px 16px;
}
.mlib-manual-assign__form {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.mlib-manual-assign__picker { flex: 1; min-width: 0; }

/* Rule builder in assignment rule form */
.mlib-rule-builder { padding: 12px 16px; }
.mlib-rule-builder__add { padding: 8px 16px 16px; }

/* ── Image Template Editor (reuses .dt-* from document template builder) ── */
/* 50/50 grid variant for the image-template builder. Reuses the document
   template builder's chrome, editor textarea, AI popover, sidebar panels,
   action bar, etc. — only adds a grid modifier and small specifics. */
.dt-builder--5050 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 1100px) {
  .dt-builder--5050 { grid-template-columns: 1fr; }
}

.imgtpl-product-select {
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  background: #fff;
  max-width: 180px;
}

.imgtpl-preview-area {
  min-height: 200px;
  background: var(--soft, #f8fafc);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.imgtpl-preview-area img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Wider settings content for the template editor */
.settings-content--wide { padding: 0; max-width: none; }
.settings-content--wide .dt-builder-form { padding: 20px; }
.settings-content--wide .dt-actions-bar {
  margin: 0 -20px -20px;
  padding: 14px 20px;
  border-bottom-right-radius: 0;
}

/* ── Reference image grid (ai_template assets) ──────────────────────────── */
.imgtpl-ref-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px 16px;
  min-height: 60px;
}

.imgtpl-ref-card {
  width: 120px;
  background: var(--pp-surface-2, #f3f4f6);
  border: 1px solid var(--pp-border-color, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.imgtpl-ref-card--uploading { opacity: 0.6; }

.imgtpl-ref-card__thumb {
  width: 100%;
  aspect-ratio: 1;
  background: var(--pp-surface-3, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.imgtpl-ref-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imgtpl-ref-card__progress {
  width: 80%;
  height: 4px;
  background: var(--pp-border-color, #e5e7eb);
  border-radius: 2px;
  overflow: hidden;
}
.imgtpl-ref-card__progress-bar {
  height: 100%;
  background: var(--pp-accent, #2563eb);
  transition: width 0.15s;
}

.imgtpl-ref-card__actions {
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.imgtpl-ref-card__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
}

.imgtpl-ref-upload-btn {
  cursor: pointer;
  user-select: none;
}

/* ── Asset assignment rule filter builder ───────────────────────────────── */
.arb-form { display: flex; flex-direction: column; gap: 20px; }
.arb { padding: 12px 16px 16px; }

.arb__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.arb-row__field  { min-width: 160px; }
.arb-row__op     { min-width: 150px; }
.arb-row__value  { flex: 1; min-width: 160px; }
.arb-row__value-input { width: 100%; }
.arb-row__remove { flex: 0 0 auto; }

.arb__empty { padding: 4px 0 0; }
.arb__add   { margin-top: 12px; }

/* ─── Media asset form (new / edit) ─────────────────────── */
/* Panels are wrapped in <form>, so the global
   .settings-content > .panel + .panel rule doesn't apply. */
.ma-form > .panel + .panel,
.ma-form > .form-actions {
  margin-top: 24px;
}

/* Single full-width opt-in checkbox row inside a panel. */
.ma-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.ma-toggle input {
  accent-color: var(--pp-accent);
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.ma-toggle__text {
  font-size: 14px;
  color: var(--pp-text);
}

/* Revealed detail block once the reference toggle is on. */
.ma-ref-detail {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--pp-border);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Stacked, selectable radio cards — replaces the run-on radio list. */
.ma-radio-cards {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ma-radio-cards > .form-label {
  padding: 0;
  margin-bottom: 4px;
}

.ma-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--pp-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s var(--pp-ease), background 0.12s var(--pp-ease);
}

.ma-radio-card:hover {
  border-color: var(--pp-border-strong);
}

.ma-radio-card:has(input:checked) {
  border-color: var(--pp-accent);
  background: var(--pp-accent-soft);
}

.ma-radio-card input {
  accent-color: var(--pp-accent);
  margin-top: 2px;
  flex: 0 0 auto;
}

.ma-radio-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ma-radio-card__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--pp-text);
}

.ma-radio-card__desc {
  font-size: 12px;
  color: var(--pp-text-muted);
}

/* ============================================================
   Page template gallery (.pg-gallery-*)
   New-page template chooser that shows before the blank builder.
   ============================================================ */

.pg-gallery {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

.pg-gallery__header {
  margin-bottom: 32px;
  text-align: center;
}

.pg-gallery__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--pp-text);
  margin: 0 0 8px;
}

.pg-gallery__subtitle {
  font-size: 15px;
  color: var(--pp-text-muted);
  margin: 0;
}

.pg-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.pg-gallery__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1.5px solid var(--pp-border);
  border-radius: var(--pp-radius-lg, 8px);
  background: var(--pp-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.pg-gallery__card:hover {
  border-color: var(--pp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-accent) 15%, transparent);
}

.pg-gallery__card--blank {
  border-style: dashed;
  background: transparent;
}

.pg-gallery__card-icon {
  font-size: 28px;
  line-height: 1;
}

.pg-gallery__card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pg-gallery__card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-text);
}

.pg-gallery__card-desc {
  font-size: 12px;
  color: var(--pp-text-muted);
  line-height: 1.5;
}

.pg-gallery__card-badge {
  margin-top: 6px;
  align-self: flex-start;
  font-size: 11px;
}

.pg-gallery__tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1.5px solid var(--pp-border);
  margin-bottom: 24px;
}

.pg-gallery__tab {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pp-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  cursor: pointer;
}

.pg-gallery__tab--active {
  color: var(--pp-accent);
  border-bottom-color: var(--pp-accent);
}

/* Wizard step -------------------------------------------------------- */

.pg-wizard__step {
  animation: pg-fade-in 0.15s ease;
}

@keyframes pg-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.pg-wizard__step-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--pp-text);
  margin: 0 0 20px;
}

.pg-wizard__type-card,
.pg-wizard__model-card {
  cursor: pointer;
  user-select: none;
}

.pg-wizard__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pg-wizard__type-card:has(.pg-wizard__radio:checked),
.pg-wizard__model-card:has(.pg-wizard__radio:checked) {
  border-color: var(--pp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-accent) 15%, transparent);
}

.pg-wizard__model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.pg-wizard__model-card {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}

.pg-wizard__back {
  background: none;
  border: none;
  color: var(--pp-text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-right: 12px;
}

.pg-wizard__back:hover {
  color: var(--pp-text);
}

.pg-wizard__summary {
  font-size: 14px;
  color: var(--pp-text-muted);
  margin: 0 0 24px;
}

.pg-wizard__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ─── Tag picker (.tg-*) ──────────────────────────────────────────────────── */

.tg-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tg-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 8px;
  border-radius: 9999px;
  background: var(--pp-surface-2);
  border: 1px solid var(--pp-border);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.tg-chip__label {
  color: var(--pp-text);
}

.tg-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--pp-text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  line-height: 1;
}

.tg-chip__remove:hover {
  background: var(--pp-danger-soft);
  color: var(--pp-danger);
}

.tg-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tg-input {
  flex: 1;
}

.tg-dropdown {
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md);
  box-shadow: var(--pp-shadow-md);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
  z-index: 9999;
}

.tg-dropdown--fixed {
  position: fixed;
}

.tg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}

.tg-row:hover,
.tg-row.is-active {
  background: var(--pp-surface-2);
}

.tg-row--empty {
  cursor: default;
  color: var(--pp-text-muted);
  font-style: italic;
}

.tg-row--create {
  border-top: 1px solid var(--pp-border);
  color: var(--pp-accent);
}

.tg-row__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tg-row__count {
  font-size: 11px;
  color: var(--pp-text-muted);
  background: var(--pp-surface-2);
  border-radius: 9999px;
  padding: 1px 6px;
  white-space: nowrap;
}

.tg-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--pp-border);
}

.tg-dot--empty {
  background: var(--pp-surface-2);
}

.tg-help {
  margin: 0;
  line-height: 1.4;
}


/* ─── Tag management table helpers ───────────────────────────────────────── */

.tg-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Catalog mappings index ── */
.cm-panels {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 24px 24px;
}
.cm-panels__gaps {
  border-top: 2px solid var(--pp-color-warning-200);
}

/* ── Channel category picker (catalog mapping) ── */
.ccp-cat-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.ccp-cat-field { display: flex; align-items: center; gap: 6px; }
.ccp-cat-input { flex: 1 1 auto; min-width: 0; }
.ccp-cat-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  background: var(--panel, #fff);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 10px;
  box-shadow: var(--pp-shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.14));
  z-index: 1200;
}
.ccp-cat-dropdown--fixed { position: fixed; }
.ccp-cat-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.ccp-cat-row:hover,
.ccp-cat-row.is-active {
  background: var(--pp-bg-subtle, #f1f5f9);
}
.ccp-cat-row--empty {
  cursor: default;
  color: var(--pp-text-muted, #64748b);
  font-size: 13px;
}
.ccp-cat-row__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
}
.ccp-cat-row__path {
  font-size: 11px;
  color: var(--pp-text-muted, #64748b);
  line-height: 1.35;
}
.ccp-cat-row__title mark,
.ccp-cat-row__path mark {
  background: transparent;
  color: var(--pp-info-text, #1d4ed8);
  font-weight: 700;
}
.ccp-cat-selected-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--pp-bg-subtle, #f8fafc);
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 8px;
}
.ccp-cat-selected-card__main { flex: 1 1 auto; min-width: 0; }
.ccp-cat-selected-card__title { font-weight: 600; font-size: 13px; }
.ccp-cat-selected-card__path { margin-top: 2px; }
.ccp-cat-selected-card__change {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--pp-line, #e2e8f0);
  background: var(--panel, #fff);
  color: var(--pp-text-muted, #64748b);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.ccp-taxonomy-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.ccp-taxonomy-badge { font-size: 0.7rem; }

/* ── Layered catalog mapping tab (.clm-) ─────────────────────────────── */

/* Two-column workbench: panels on left, sticky preview aside on right */
.clm-show-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}
/* Uniform vertical rhythm between the stacked panels — replaces the
   per-panel inline `margin-bottom: 16px;` that used to live in the view. */
.clm-show-layout__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.clm-show-layout__main > .clm-section { margin: 0; }
.clm-show-layout__aside { min-width: 0; }

@media (max-width: 900px) {
  .clm-show-layout { grid-template-columns: 1fr; }
  .clm-show-layout__aside { order: -1; }
}

/* Setup-status strip: a touch more separation before the panels below. */
.clm-status-strip.repl-kpi-row { margin: 0; }

/* ── Collapsible panels (<details class="panel clm-collapsible">) ──────────
   Secondary sections render collapsed by default so the page reads as a
   short, scannable stack on first load. */
.clm-collapsible { padding: 0; overflow: hidden; }
.clm-collapsible > .clm-collapsible__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.clm-collapsible > .clm-collapsible__summary::-webkit-details-marker { display: none; }
.clm-collapsible > .clm-collapsible__summary > div { min-width: 0; }
.clm-collapsible > .clm-collapsible__summary h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--pp-text);
}
.clm-collapsible > .clm-collapsible__summary p {
  margin: 4px 0 0;
  line-height: 1.35;
  color: var(--pp-text-muted, #64748b);
}
/* Collapsed cards: keep the lede visibly smaller than the title. */
.clm-collapsible:not([open]) > .clm-collapsible__summary p {
  font-size: 12px;
}
.clm-collapsible[open] > .clm-collapsible__summary p {
  font-size: 13px;
}
/* Chevron affordance on the right edge of the summary row. */
.clm-collapsible > .clm-collapsible__summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-right: 2px solid var(--pp-text-muted, #64748b);
  border-bottom: 2px solid var(--pp-text-muted, #64748b);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.clm-collapsible[open] > .clm-collapsible__summary::after { transform: rotate(225deg); }
.clm-collapsible > .clm-collapsible__summary:hover::after {
  border-color: var(--pp-text, #0f172a);
}
/* Count chip shown in the summary heading (e.g. "Override rules  3"). */
.clm-collapsible__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pp-surface-2, #f1f5f9);
  border: 1px solid var(--pp-border, #e2e8f0);
  color: var(--pp-text-muted, #64748b);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Body content (tables, forms) sits flush below the summary; the summary's
   own padding already provides the top gutter. */
.clm-collapsible > :not(.clm-collapsible__summary) { margin-top: 0; }
.clm-collapsible > .data-table { border-top: 1px solid var(--pp-border, #e2e8f0); }
/* A right-aligned action row inside a collapsed panel's body (Refresh,
   + Add metafields, New rule, etc.). */
.clm-collapsible__toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 20px 16px;
}
/* Padded body region below the summary (profiles grid, etc.). */
.clm-collapsible__body {
  padding: 0 20px 16px;
  border-top: 1px solid var(--pp-border, #e2e8f0);
}
.clm-collapsible__body > .clm-collapsible__toolbar {
  padding: 12px 0;
}
.clm-profiles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.clm-profiles-grid__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
}
.clm-profiles-grid__label {
  font-size: 13px;
  font-weight: 600;
}
/* The category add-route footer uses negative margins to bleed to the edges
   of a padded panel; inside a zero-padding collapsible it should sit flush. */
.clm-collapsible .clm-add-route-form-wrap { margin: 0; }
/* The inventory sync-group needs visible overflow for its card internals;
   it has no flush-edge table to clip, so opt it out of the clip. */
.sync-group.clm-collapsible { overflow: visible; }

/* Inventory routing embed on catalog mapping page */
.inv-route-clm-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.inv-route-clm-sync {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}
.inv-route-clm-sync__label {
  font-weight: 600;
  color: var(--pp-text, #0f172a);
}
.inv-route-clm-table {
  margin: 0;
}
.inv-route-clm-empty {
  margin: 0;
  padding: 0 0 4px;
}
.inv-route-clm-issues {
  padding: 0;
}

/* Category mapping add form — panel footer */
.clm-add-route-form-wrap {
  margin: 0 -16px -16px;
  padding: 16px;
  background: var(--pp-surface-2);
  border-top: 1px solid var(--pp-border-color, var(--line));
  border-radius: 0 0 var(--radius) var(--radius);
}

.clm-add-route-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.clm-add-route-form--with-category {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
}

.clm-add-route-form .form-field { margin: 0; }

/* Align the Add button to the input row by matching the label height */
.clm-add-route-form__submit { display: flex; flex-direction: column; }
.clm-add-route-form__submit-spacer {
  display: block;
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: 4px;
  visibility: hidden;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .clm-add-route-form,
  .clm-add-route-form--with-category {
    grid-template-columns: 1fr;
  }
  .clm-add-route-form__submit-spacer { display: none; }
}

.clm-metafields-panel .modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
}

.clm-metafields-panel .modal[aria-hidden="false"] {
  display: flex;
}

.clm-mf-table code.mono {
  font-family: var(--pp-font-mono, monospace);
  background: var(--pp-surface-2, #f1f5f9);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 0.78rem;
}

.clm-mf-results {
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--pp-border-color, #e2e8f0);
  border-radius: 6px;
  padding: 4px 8px;
}

.clm-mf-result-row {
  font-size: 0.875rem;
}

.clm-mf-result-row--added {
  opacity: 0.55;
}

.clm-mf-table__value-cell {
  min-width: 280px;
}

.clm-mf-table__row--disabled {
  opacity: 0.55;
}

.clm-mf-table__row--disabled .clm-mf-toggle-btn {
  opacity: 1;
}

.clm-mf-value-form {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.clm-mf-value-form__input {
  flex: 1;
  min-width: 220px;
}

.clm-mf-value-form__input .wf-input-with-picker,
.clm-mf-value-form__input .wf-liquid-editor {
  width: 100%;
}

.clm-mf-value-form__input .ccp-mapping-input,
.clm-mf-value-form__input .wf-liquid-editor__zone,
.clm-mf-value-form__input .wf-liquid-editor__textarea {
  min-height: 32px;
  height: 32px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.875rem;
  line-height: 1.25;
}

.clm-mf-value-form__input .wf-liquid-editor__zone--single {
  display: flex;
  align-items: center;
}

.clm-mf-value-form__save {
  flex-shrink: 0;
  margin-top: 0;
  align-self: center;
}

.pill-xs {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--pp-surface-2, #e2e8f0);
  color: var(--pp-text-muted, #64748b);
}

.clm-explain-output {
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}

.clm-explain-table td {
  vertical-align: middle;
}

/* Resolution preview — stacked cards (Option A) */
.clm-explain-alerts {
  margin-bottom: 8px;
}

.clm-explain-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.clm-explain-search {
  flex: 1 1 140px;
  min-width: 0;
}

.clm-explain-toggle {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pp-color-info, #3b82f6);
  cursor: pointer;
  white-space: nowrap;
}

.clm-explain-toggle:hover {
  text-decoration: underline;
}

.clm-explain-section-title {
  margin: 14px 0 6px;
  font-weight: 600;
  font-size: 0.78rem;
}

.clm-explain-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.clm-explain-card {
  border-left: 3px solid var(--clm-layer-color, var(--pp-border-color, #cbd5e1));
  background: var(--pp-surface-2, #f8fafc);
  border-radius: 6px;
  padding: 8px 10px;
}

.clm-explain-card__field code {
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--pp-font-mono, monospace);
  word-break: break-word;
}

.clm-explain-card--mf .clm-explain-card__field {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.clm-explain-card__value {
  font-size: 0.8rem;
  margin-top: 3px;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clm-explain-card__layer {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 0.68rem;
  color: var(--pp-text-muted, #64748b);
}

.clm-explain-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clm-layer-color, var(--pp-text-muted, #64748b));
  flex: 0 0 auto;
}

.clm-explain-status {
  margin-bottom: 8px;
}

.clm-explain-issues {
  margin: 4px 0 8px;
  padding-left: 18px;
  font-size: 0.8rem;
}

.clm-explain-issues--error li { color: var(--pp-danger, #ef4444); }
.clm-explain-issues--warn li { color: var(--pp-warning, #f59e0b); }

.clm-explain-card__label {
  font-size: 0.72rem;
  color: var(--pp-text-muted, #64748b);
}

.clm-explain-card__field {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.clm-explain-inv-summary {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--pp-surface-2, #f8fafc);
  border-radius: 6px;
}

.clm-explain-inv-summary__total {
  margin: 0 0 4px;
  font-size: 0.8rem;
}

.clm-explain-inv-locs {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.clm-explain-inv-loc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
}

.clm-explain-inv-loc__name {
  font-weight: 600;
}

.clm-explain-inv-loc__qty {
  flex: 1 1 auto;
}

/* Image mapping panel on catalog mappings show */
/* The image panel anchors a sample-product popover off its header button,
   so it opts out of the collapsible's overflow clipping. */
.clm-img-panel {
  position: relative;
  overflow: visible;
}

.clm-img-summary__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Compact "Sample" toggle in the card header, left of the chevron. */
.clm-img-sample__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}

.clm-img-sample__btn.is-active {
  background: var(--pp-surface-2, #f1f5f9);
  border-color: var(--pp-border-color, #cbd5e1);
}

.clm-img-sample__btn svg {
  flex: 0 0 auto;
}

.clm-img-sample__pop {
  position: absolute;
  top: 62px;
  right: 16px;
  z-index: 40;
  width: 320px;
  max-width: calc(100% - 32px);
  padding: 12px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border-color, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

.clm-img-sample__pop > p {
  margin: 0 0 8px;
}

.clm-img-form {
  padding: 4px 24px 20px;
}

.clm-img-role-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clm-img-role-row {
  border: 1px solid var(--pp-border-color, #e2e8f0);
  border-radius: 8px;
  background: var(--pp-surface-2, #f8fafc);
  transition: opacity 0.15s ease, box-shadow 0.12s ease;
}

.clm-img-role-row--disabled {
  opacity: 0.45;
}

.clm-img-role-row--disabled .clm-img-slots {
  pointer-events: none;
}

.clm-img-role-row--dragging {
  opacity: 0.65;
}

.clm-img-role-row--drop-before {
  box-shadow: inset 0 3px 0 0 var(--pp-color-info, #3b82f6);
}

.clm-img-role-row--drop-after {
  box-shadow: inset 0 -3px 0 0 var(--pp-color-info, #3b82f6);
}

.clm-img-role-row__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}

.clm-img-role-row__handle {
  color: var(--pp-text-muted, #64748b);
  font-size: 0.75rem;
  user-select: none;
  cursor: grab;
  padding: 2px 4px;
  border-radius: 4px;
}

.clm-img-role-row__handle:active {
  cursor: grabbing;
}

.clm-img-role-row__toggle {
  flex-shrink: 0;
  margin: 0;
}

.clm-img-role-row__name {
  font-weight: 600;
  font-size: 0.85rem;
}

.clm-img-role-row__code {
  font-size: 0.75rem;
}

.clm-img-role-row__actions {
  margin-left: auto;
  display: flex;
  gap: 2px;
}

.clm-img-slots {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 0 10px 10px;
  overflow-x: auto;
}

.clm-img-slot {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 1px dashed var(--pp-border-color, #cbd5e1);
  border-radius: 6px;
  background: var(--pp-surface, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.clm-img-slot:active {
  cursor: grabbing;
}

.clm-img-slot--dragging {
  opacity: 0.45;
  border-style: solid;
  border-color: var(--pp-border-color, #94a3b8);
}

.clm-img-slot--drop-before {
  box-shadow: inset 3px 0 0 0 var(--pp-color-info, #3b82f6);
  border-color: var(--pp-color-info, #3b82f6);
}

.clm-img-slot--drop-after {
  box-shadow: inset -3px 0 0 0 var(--pp-color-info, #3b82f6);
  border-color: var(--pp-color-info, #3b82f6);
}

.clm-img-slot__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  pointer-events: none;
}

.clm-img-slot__num {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
}

.clm-img-slot:not(:has(.clm-img-slot__thumb)) .clm-img-slot__num {
  position: static;
  font-size: 0.8rem;
  background: transparent;
  color: var(--pp-text-muted, #64748b);
}

.clm-img-form__actions {
  margin-top: 16px;
}

.rb-image-positions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rb-image-positions .input {
  width: 5rem;
}

/* Preview — resolved export image strip */
.clm-explain-images {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clm-explain-image {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-left: 3px solid var(--clm-layer-color, var(--pp-border-color, #cbd5e1));
  background: var(--pp-surface-2, #f8fafc);
  border-radius: 6px;
}

.clm-explain-image__slot {
  flex: 0 0 1.5rem;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--pp-text-muted, #64748b);
  text-align: center;
}

.clm-explain-images__thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  flex: 0 0 auto;
  background: var(--pp-surface-1, #fff);
}

.clm-explain-images__thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--pp-border-color, #cbd5e1);
}

.clm-explain-image__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.clm-explain-image__role {
  font-size: 0.82rem;
  font-weight: 600;
}

.clm-explain-image__layer {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  color: var(--pp-text-muted, #64748b);
}

/* Shared preview body — keep the resolved-field list inside a scroll window so
   long field lists don't push the page. Matches .clm-explain-output. */
.ccp-preview-result {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

/* ── Channel catalog profile form ─────────────────────────────────────── */
#ccp-form > .panel + .panel,
#ccp-form > .panel + .ccp-workbench,
#ccp-form > .ccp-workbench + .panel,
#ccp-form > section + section {
  margin-top: 24px;
}

/* Workbench: mapping table + sticky live-preview rail, side by side */
.ccp-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: start;
  gap: 24px;
}

.ccp-workbench__main { min-width: 0; }

.ccp-workbench__aside {
  position: sticky;
  top: 24px;
  min-width: 0;
}

.ccp-workbench__aside .panel { margin: 0; }

/* Completeness meter (lives in the sticky save bar) */
.ccp-completeness {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.ccp-completeness__bar {
  height: 6px;
  width: 160px;
  flex: 0 0 auto;
}

.ccp-completeness__fill {
  transition: width 0.2s ease;
}

.ccp-completeness__label { white-space: nowrap; }

/* Sticky save bar: persistent progress + primary action */
.ccp-savebar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 12px 16px;
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md, 10px);
  box-shadow: var(--pp-shadow-md);
}

.ccp-savebar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* Reference profiles — collapsed disclosure (quiet by default) */
.ccp-ref-profiles {
  margin: 0 24px 16px;
  background: var(--pp-surface-2);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md, 10px);
}

.ccp-ref-profiles__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.ccp-ref-profiles__summary::-webkit-details-marker { display: none; }

.ccp-ref-profiles__title { font-weight: 600; font-size: 0.9rem; }

.ccp-ref-profiles__spacer { flex: 1 1 auto; }

.ccp-ref-profiles__intro { margin: 0; }

.ccp-ref-profiles__chevron {
  flex: 0 0 auto;
  color: var(--pp-text-muted);
  transition: transform 0.15s var(--pp-ease, ease);
}

.ccp-ref-profiles[open] .ccp-ref-profiles__chevron { transform: rotate(180deg); }

.ccp-ref-profiles__body {
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ccp-ref-types-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ccp-ref-type-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.ccp-ref-type-name {
  font-weight: 500;
  min-width: 160px;
}

.ccp-ref-type-badge {
  font-size: 0.7rem;
}

/* Mapping toolbar */
.ccp-mappings-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  padding: 0 24px 12px;
}

.ccp-mappings-toolbar__search {
  flex: 1 1 220px;
  min-width: 180px;
  margin: 0;
}

.ccp-mappings-toolbar__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--pp-text);
  cursor: pointer;
  padding-bottom: 8px;
}

/* Column header — orientation for the "field → value" mapping */
.ccp-field-cols {
  display: grid;
  grid-template-columns: minmax(140px, 2fr) minmax(200px, 3fr);
  gap: 16px;
  padding: 8px 24px;
  border-top: 1px solid var(--pp-border);
  border-bottom: 1px solid var(--pp-border);
  background: var(--pp-surface-2);
}

.ccp-field-cols span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-text-muted);
}

/* Field groups */
.ccp-field-group {
  padding: 0 24px 4px;
}

.ccp-field-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-text-muted);
  padding: 14px 0 6px;
}

.ccp-field-mappings {
  padding-bottom: 8px;
}

.ccp-optional-details {
  padding: 0 24px 4px;
  border-top: 1px solid var(--pp-border);
}

.ccp-field-group--dynamic {
  border-top: 1px solid var(--pp-border);
}

.ccp-optional-details__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-text-muted);
  cursor: pointer;
  list-style: none;
}

.ccp-optional-details__summary::-webkit-details-marker {
  display: none;
}

.ccp-field-cols--with-export {
  grid-template-columns: minmax(140px, 2fr) 72px minmax(200px, 3fr);
}

.ccp-field-row--with-export.ccp-field-row--mapping,
.ccp-field-row--with-export.ccp-field-row--channel-ref {
  grid-template-columns: minmax(140px, 2fr) 72px minmax(200px, 3fr);
}

.ccp-field-export {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
}

.ccp-export-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  user-select: none;
}

.ccp-export-toggle--locked {
  cursor: default;
  opacity: 0.85;
}

/* Field rows */
.ccp-field-row {
  display: grid;
  gap: 12px 16px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--pp-border);
}

.ccp-field-row--mapping,
.ccp-field-row--channel-ref {
  grid-template-columns: minmax(140px, 2fr) minmax(200px, 3fr);
}

.ccp-field-row:last-child {
  border-bottom: none;
}

/* Unmapped required field: quiet left accent, not a full red wash */
.ccp-field-row--unmapped {
  box-shadow: inset 3px 0 0 var(--pp-warning);
  background: var(--pp-warning-soft);
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 0 var(--pp-radius-sm, 6px) var(--pp-radius-sm, 6px) 0;
}

.ccp-field-row--filtered-out {
  display: none;
}

/* Field label cell */
.ccp-field-label__name {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ccp-field-label__name strong {
  font-weight: 600;
}

.ccp-req {
  color: var(--pp-danger);
  font-weight: 700;
  text-decoration: none;
  cursor: help;
}

.ccp-field-key {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--pp-text-subtle);
  background: transparent;
  padding: 0;
}

.ccp-field-label .ccp-field-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.ccp-field-value--mapping .wf-liquid-editor {
  width: 100%;
}

/* Pre-mount <textarea> and the mounted pill zone share one footprint so
   the field doesn't visibly jump in size when the editor lazy-mounts on
   first click. */
.ccp-mapping-input,
.ccp-field-value--mapping .wf-liquid-editor__zone,
.ccp-field-value--mapping .wf-liquid-editor__textarea {
  width: 100%;
  min-height: 38px;
  font-size: 0.875rem;
  line-height: 1.45;
}

.ccp-mapping-input {
  resize: vertical;
  white-space: pre-wrap;
}

/* Help text + allowed-value hints */
.ccp-field-help {
  margin: 4px 0 0;
  line-height: 1.4;
}

.ccp-field-options {
  margin: 6px 0 0;
  line-height: 1.4;
}

/* Enumerated field: dropdown + "use a variable" escape hatch */
.ccp-field-value--enum {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ccp-enum-field__choice,
.ccp-enum-field__custom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.ccp-enum-select {
  width: 100%;
}

.ccp-enum-field__switch {
  align-self: flex-start;
}

.ccp-channel-ref-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ccp-channel-ref-empty {
  font-size: 0.8rem;
  color: var(--pp-warning);
}

.ccp-dynamic-loading,
.ccp-dynamic-empty {
  padding: 16px 24px;
}

.ccp-empty-fields {
  padding: 24px;
}

/* Live preview rail */
.ccp-preview-panel__body {
  padding: 0 20px 16px;
}

.ccp-preview-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 18px 14px;
  text-align: center;
  border: 1px dashed var(--pp-border);
  border-radius: var(--pp-radius-md, 10px);
  background: var(--pp-surface-2, #f8fafc);
}

.ccp-preview-empty__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  color: var(--pp-accent, #2563eb);
  background: var(--pp-info-soft, #eff6ff);
}

.ccp-preview-empty__icon svg {
  width: 42px;
  height: 42px;
}

.ccp-preview-empty__title {
  margin: 4px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
}

.ccp-preview-empty p:last-child {
  max-width: 240px;
  margin: 0;
  line-height: 1.45;
}

.ccp-preview-panel__body:has(.clm-explain-output:not(:empty)) .ccp-preview-empty,
.ccp-preview-panel__body:has(.ccp-preview-result:not([hidden])) .ccp-preview-empty {
  display: none;
}

.ccp-preview-result {
  margin-top: 16px;
}

.ccp-preview-loading {
  padding: 8px 0;
}

.ccp-preview-result-inner {
  font-size: 0.85rem;
}

.ccp-preview-status {
  margin-bottom: 8px;
}

.ccp-preview-issues {
  margin: 4px 0 8px;
  padding-left: 18px;
  font-size: 0.8rem;
}

.ccp-preview-errors li {
  color: var(--pp-danger);
}

.ccp-preview-warnings li {
  color: var(--pp-warning);
}

.ccp-preview-table {
  margin-top: 12px;
  font-size: 0.8rem;
}

@media (max-width: 960px) {
  .ccp-workbench {
    grid-template-columns: 1fr;
  }
  .ccp-workbench__aside {
    position: static;
  }
}

@media (max-width: 720px) {
  .ccp-field-row--mapping,
  .ccp-field-row--channel-ref {
    grid-template-columns: 1fr;
  }
  .ccp-field-cols {
    display: none;
  }
}

/* ── Value-map field mode (translate a base field's values) ─────────────── */
.ccp-field-value--switchable {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ccp-vm-switch {
  align-self: flex-start;
}

.ccp-vm-mapped {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-sm, 6px);
  background: var(--pp-surface-2, var(--pp-surface));
}

.ccp-vm-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.ccp-vm-summary__count {
  font-weight: 600;
}

.ccp-vm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ccp-vm-actions__remove {
  color: var(--pp-text-subtle);
}

/* ── Value-map modal ─────────────────────────────────────── */
.cvm-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cvm-config {
  gap: 12px 16px;
}

.cvm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--pp-border);
}

.cvm-coverage {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cvm-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cvm-search {
  width: 180px;
}

.cvm-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px;
  justify-content: center;
}

.cvm-empty {
  padding: 24px;
  text-align: center;
}

/* Scroll the rows, keep the header + config + footer fixed even with 50+ rows */
.cvm-table-wrap {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-sm, 6px);
}

.cvm-table {
  width: 100%;
  margin: 0;
}

.cvm-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--pp-surface);
  box-shadow: inset 0 -1px 0 var(--pp-border);
}

.cvm-table td,
.cvm-table th {
  vertical-align: middle;
}

.cvm-col-arrow {
  width: 28px;
  text-align: center;
  color: var(--pp-text-subtle);
}

.cvm-col-remove {
  width: 40px;
  text-align: right;
}

.cvm-col-from,
.cvm-col-to {
  width: 45%;
}

.cvm-to-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cvm-to-wrap .input {
  flex: 1 1 auto;
}

.cvm-row--unmapped .cvm-col-to {
  box-shadow: inset 3px 0 0 var(--pp-warning);
}

.cvm-badge {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.cvm-badge--ok {
  color: var(--pp-success);
  background: var(--pp-success-soft, rgba(16, 185, 129, 0.12));
}

.cvm-badge--guess {
  color: var(--pp-warning);
  background: var(--pp-warning-soft, rgba(245, 158, 11, 0.12));
}

@media (max-width: 720px) {
  .cvm-search {
    width: 100%;
  }
  .cvm-toolbar__actions {
    width: 100%;
  }
}

/* ── Products bulk publish modal ─────────────────────────── */
.pp-publish-channels {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pp-publish-channel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.pp-publish-channel:hover {
  border-color: var(--pp-accent);
  background: var(--pp-surface-2);
}

.pp-publish-channel:has(input:checked) {
  border-color: var(--pp-accent);
  background: color-mix(in srgb, var(--pp-accent) 8%, var(--pp-surface));
}

.pp-publish-channel input {
  margin-top: 3px;
}

.pp-publish-channel__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pp-publish-channel__name {
  font-weight: 600;
}

.pp-publish-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  text-align: center;
}

.pp-publish-summary {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.pp-publish-summary__stat {
  flex: 1;
  padding: 12px;
  border-radius: var(--pp-radius-md);
  text-align: center;
}

.pp-publish-summary__stat--ok {
  background: color-mix(in srgb, var(--pp-success) 12%, var(--pp-surface));
  border: 1px solid color-mix(in srgb, var(--pp-success) 35%, var(--pp-border));
}

.pp-publish-summary__stat--warn {
  background: color-mix(in srgb, var(--pp-warning) 12%, var(--pp-surface));
  border: 1px solid color-mix(in srgb, var(--pp-warning) 35%, var(--pp-border));
}

.pp-publish-summary__value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.pp-publish-summary__label {
  display: block;
  font-size: 0.75rem;
  color: var(--pp-muted);
  margin-top: 2px;
}

.pp-publish-callout {
  padding: 10px 12px;
  border-radius: var(--pp-radius-md);
  font-size: 0.875rem;
  margin-bottom: 12px;
}

.pp-publish-callout--ok {
  background: color-mix(in srgb, var(--pp-success) 10%, var(--pp-surface));
  border: 1px solid color-mix(in srgb, var(--pp-success) 30%, var(--pp-border));
  color: var(--pp-success);
}

.pp-publish-callout--warn {
  background: color-mix(in srgb, var(--pp-warning) 10%, var(--pp-surface));
  border: 1px solid color-mix(in srgb, var(--pp-warning) 30%, var(--pp-border));
  color: var(--pp-warning);
}

.pp-publish-callout--error {
  background: color-mix(in srgb, var(--pp-danger) 10%, var(--pp-surface));
  border: 1px solid color-mix(in srgb, var(--pp-danger) 30%, var(--pp-border));
  color: var(--pp-danger);
}

.chl-push-modal__content {
  width: min(880px, 94vw);
}

.pp-publish-issues-table-wrap {
  max-height: 280px;
  overflow-y: auto;
}

.pp-publish-issues-table th:nth-child(1),
.pp-publish-issues-table td:nth-child(1) {
  width: 38%;
}

.pp-publish-issues-table th:nth-child(2),
.pp-publish-issues-table td:nth-child(2) {
  width: 62%;
  min-width: 280px;
}

.pp-publish-issues-table td:nth-child(2) .pp-publish-issue-list {
  padding-left: 1.1rem;
}

.pp-publish-issues-table .pp-publish-issue {
  white-space: normal;
  overflow-wrap: anywhere;
}

.pp-publish-issue-list {
  margin: 0;
  padding-left: 1rem;
  font-size: 0.8125rem;
}

.pp-publish-issue--error {
  color: var(--pp-danger);
}

.pp-publish-issue--warn {
  color: var(--pp-warning);
}

.pp-publish-issue-product {
  font-weight: 500;
}

/* ── Publish Coverage Dashboard (.cov-*) ──────────────────────────────── */

.cov-index {
  padding: 0 0 3rem;
}

.cov-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 2rem;
  text-align: center;
  max-width: 480px;
  margin: 3rem auto;
}

.cov-empty-state .nav-icon {
  width: 48px;
  height: 48px;
  opacity: 0.4;
}

.cov-stale-notice {
  margin: 1.5rem 1.5rem 0;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Channel rail */
.cov-channel-rail {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--pp-border);
  flex-wrap: wrap;
}

/* KPI strip section */
.cov-kpi-section {
  padding: 1.25rem 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cov-kpi-channel-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted);
  margin-bottom: 0.5rem;
}

/* Two-column main grid */
.cov-main-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem 0;
}

.cov-main-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

/* Blockers panel */
.cov-blockers-panel {
  margin: 0;
}

.cov-blockers-list {
  display: flex;
  flex-direction: column;
}

.cov-blocker-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--pp-border);
}

.cov-blocker-rank {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pp-surface-2);
  color: var(--pp-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 2px;
}

.cov-blocker-body {
  flex: 1;
  min-width: 0;
}

.cov-blocker-headline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cov-blocker-label {
  font-weight: 500;
}

.cov-blocker-samples {
  margin-top: 0.25rem;
}

.cov-blocker-action {
  flex-shrink: 0;
}

/* Ready to publish panel */
.cov-ready-panel {
  margin: 0;
}

.cov-product-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cov-product-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--pp-border);
  flex-shrink: 0;
}

/* Activity feed panel */
.cov-activity-panel {
  margin: 0;
}

.cov-activity-table td {
  font-size: 0.8125rem;
}

.cov-activity-more {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--pp-border);
}

.text-nowrap {
  white-space: nowrap;
}

/* Coverage matrix */
.cov-matrix-panel {
  margin: 1.25rem 1.5rem 0;
}

.cov-matrix-table {
  min-width: 100%;
}

.cov-matrix-channel-header {
  text-align: center;
  min-width: 100px;
}

.cov-matrix-type-name {
  font-weight: 500;
  white-space: nowrap;
  padding-right: 1.5rem;
}

.cov-matrix-cell {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
}

.cov-matrix-counts {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cov-matrix-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0 6px;
}

.cov-matrix-count-link {
  color: inherit;
  text-decoration: none;
}

.cov-matrix-count--live {
  background: color-mix(in srgb, var(--pp-success) 15%, var(--pp-surface));
  color: var(--pp-success);
}

.cov-matrix-count--ready {
  background: color-mix(in srgb, var(--pp-accent) 15%, var(--pp-surface));
  color: var(--pp-accent);
}

.cov-matrix-count--blocked {
  background: color-mix(in srgb, var(--pp-warning) 15%, var(--pp-surface));
  color: color-mix(in srgb, var(--pp-warning) 80%, var(--pp-text));
}

.cov-matrix-count--error {
  background: color-mix(in srgb, var(--pp-danger) 15%, var(--pp-surface));
  color: var(--pp-danger);
}

/* Stacked progress bar in each matrix cell */
.cov-matrix-bar {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--pp-border);
  margin-top: 4px;
  min-width: 60px;
}

.cov-matrix-bar__live    { background: var(--pp-success); }
.cov-matrix-bar__pending { background: color-mix(in srgb, var(--pp-accent) 60%, var(--pp-surface)); }
.cov-matrix-bar__ready   { background: var(--pp-accent); opacity: 0.5; }
.cov-matrix-bar__blocked { background: var(--pp-warning); opacity: 0.5; }
.cov-matrix-bar__error   { background: var(--pp-danger); }

/* Legend */
.cov-matrix-legend {
  display: flex;
  gap: 1.25rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--pp-border);
  flex-wrap: wrap;
}

.cov-matrix-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--pp-text-muted);
}

/* Responsive: stack to single column on narrow screens */
@media (max-width: 900px) {
  .cov-main-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .cov-matrix-panel {
    margin: 1rem;
  }

  .cov-kpi-section {
    padding: 1rem;
  }

  .cov-channel-rail {
    padding: 0.75rem 1rem;
  }
}

/* ── Publish dashboard: rollup + push line + tabs ─────────────────────── */

/* At-a-glance rollup strip */
.cov-rollup {
  padding: 1.25rem 1.5rem 0;
}

.cov-refresh-meta {
  align-self: center;
  margin-right: 0.5rem;
}

/* Channel focus rail — make the pills read as a clear segmented control.
   The base `.pill` chip (low-contrast surface-2 + a leading dot) is too
   faint against the page, and `.pill-blue` (the active state) has no base
   style of its own, so we define the rail's pill treatment here. */
.cov-channel-rail .pill {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pp-text-muted);
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  text-decoration: none;
  transition: color 0.15s var(--pp-ease), background-color 0.15s var(--pp-ease), border-color 0.15s var(--pp-ease);
}

.cov-channel-rail .pill::before {
  display: none;
}

.cov-channel-rail .pill:hover {
  color: var(--pp-text);
  background: var(--pp-surface-2);
  border-color: var(--pp-border-strong);
}

.cov-channel-rail .pill-blue {
  color: #fff;
  background: var(--pp-accent);
  border-color: var(--pp-accent);
}

/* Compact push-activity summary line */
.cov-pushline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.875rem 1.5rem;
  margin-top: 1rem;
  border-top: 1px solid var(--pp-border);
  border-bottom: 1px solid var(--pp-border);
  background: var(--pp-surface-2);
}

.cov-pushline-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted);
}

.cov-pushline-link {
  margin-left: auto;
}

/* Worklist tabs.
   The legacy `.tabs { display: flex; flex-wrap: wrap }` rule would lay the
   tabs__bar and tabs__panel side by side; force a vertical stack the same
   way `.entity-show__tabs` / `.intg-show-tabs` do. */
.cov-tabs.tabs {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  margin-top: 1.25rem;
}

.cov-tabs > .tabs__bar {
  width: 100%;
  padding-left: 1.5rem;
}

.cov-tab-panel {
  padding: 1.25rem 1.5rem;
}

/* Inside a tab panel the inner sections own no extra outer spacing —
   the panel padding controls the gutter. */
.cov-tab-panel .cov-kpi-section {
  padding: 0 0 1.25rem;
}

.cov-tab-panel .cov-matrix-panel {
  margin: 0;
}

@media (max-width: 900px) {
  .cov-rollup {
    padding: 1rem 1rem 0;
  }

  .cov-pushline {
    padding: 0.75rem 1rem;
  }

  .cov-tabs > .tabs__bar {
    padding-left: 1rem;
  }

  .cov-tab-panel {
    padding: 1rem;
  }
}

/* ============================================================
   Duplicate Images (.imgdup-*)
   Report page for perceptual-hash duplicate detection.
   ============================================================ */

.imgdup-index {
  padding: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.imgdup-kpis {
  /* kpi_strip renders its own panel surface */
}

.imgdup-stale-notice {
  padding: 1rem 1.25rem;
}

.imgdup-table-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--pp-border, #e4e4e7);
  background: var(--pp-surface-2, #f4f4f5);
  display: block;
}

.imgdup-table-thumb--placeholder {
  background: var(--pp-surface-2, #f4f4f5);
}

.imgdup-placements-cell {
  max-width: 220px;
}

.imgdup-placements-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.imgdup-placements-list li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imgdup-distance-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--pp-warning-bg, #fef3c7);
  color: var(--pp-warning-text, #92400e);
  white-space: nowrap;
}

.imgdup-distance-badge--exact {
  background: var(--pp-danger-bg, #fee2e2);
  color: var(--pp-danger-text, #991b1b);
}

.imgdup-refresh-meta {
  line-height: 2;
}

/* Card-level duplicate indicator (product Images tab) */
.pi-card--duplicate .pi-card__thumb-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--pp-warning, #f59e0b);
  border-radius: inherit;
  pointer-events: none;
}

/* Duplicate banner on product Images tab */
.imgdup-product-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background: var(--pp-warning-bg, #fef3c7);
  border: 1px solid var(--pp-warning-border, #fde68a);
  border-radius: 6px;
  font-size: 0.875rem;
}

.imgdup-product-banner__icon {
  color: var(--pp-warning, #d97706);
  flex-shrink: 0;
}

.imgdup-product-banner__text {
  flex: 1;
  min-width: 0;
}

.imgdup-product-banner a {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Custom field form groups (collapsible sections on record forms) */
.cfd-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cfd-group {
  padding: 0;
  overflow: hidden;
}

.cfd-group > .cfd-group__summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
}

.cfd-group > .cfd-group__summary::-webkit-details-marker {
  display: none;
}

.cfd-group__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--pp-ink, var(--ink));
  min-width: 0;
}

.cfd-group__count {
  font-size: 12px;
  white-space: nowrap;
}

.cfd-group__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

.cfd-group__attention-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pp-warning-bg, #fef3c7);
  color: var(--pp-warning-ink, #92400e);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.cfd-group--needs-attention > .cfd-group__summary {
  border-left: 3px solid var(--pp-warning, #f59e0b);
}

.cfd-group--needs-attention > .cfd-group__summary .cfd-group__title {
  color: var(--pp-warning-ink, #92400e);
}

.cfd-group + .cfd-group {
  margin-top: 0;
}

.cfd-group__chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--pp-muted, var(--muted));
  border-bottom: 2px solid var(--pp-muted, var(--muted));
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-left: 4px;
}

.cfd-group[open] .cfd-group__chevron {
  transform: rotate(-135deg);
}

.cfd-group__body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--pp-border, var(--line));
}

.cfd-group__body > .form-grid {
  padding-top: 16px;
}

/* Custom field definition form */
.cfd-form__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cfd-kind-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.cfd-kind-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--pp-border, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  background: var(--pp-surface, #fff);
}

.cfd-kind-card.is-selected {
  border-color: var(--pp-accent, #2563eb);
  box-shadow: 0 0 0 1px var(--pp-accent, #2563eb);
}

.cfd-kind-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cfd-kind-card__title {
  font-weight: 600;
}

.cfd-value-display {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
  width: 100%;
}

.cfd-value-display--ai {
  gap: 0.25rem;
}

.cfd-value-display__main {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
}

.cfd-value-display__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.cfd-value-display__text {
  word-break: break-word;
}

.cfd-value-display__suggestion {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
}

.cfd-value-display__toolbar {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.cfd-ai-icon-tooltip {
  margin-left: 0;
  vertical-align: top;
}

.cfd-ai-icon-tooltip .help-tooltip-trigger {
  padding: 0;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
}

.cfd-ai-icon-tooltip .help-tooltip-trigger:hover,
.cfd-ai-icon-tooltip .help-tooltip-trigger:focus {
  color: inherit;
}

.cfd-ai-icon-tooltip .help-tooltip-content {
  min-width: auto;
  max-width: 160px;
  text-align: center;
  font-size: 11px;
  padding: 5px 8px;
}

.cfd-value-display__main:hover .cfd-value-display__toolbar,
.cfd-value-display__main:focus-within .cfd-value-display__toolbar,
.cfd-value-display__toolbar:has(.cfd-ai-icon-btn--accent) {
  opacity: 1;
}

.cfd-ai-icon-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--pp-line, #e2e8f0);
  background: var(--pp-surface, #fff);
  color: var(--pp-muted, #64748b);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.cfd-ai-icon-btn:hover:not(:disabled) {
  background: var(--pp-surface-2, #f8fafc);
  border-color: #cbd5e1;
  color: #334155;
}

.cfd-ai-icon-btn--accent {
  border-color: transparent;
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.25);
}

.cfd-ai-icon-btn--accent:hover:not(:disabled) {
  background: linear-gradient(135deg, #9333ea 0%, #6d28d9 100%);
  color: #fff;
  opacity: 1;
}

.cfd-ai-icon-btn--success:hover:not(:disabled) {
  background: #ecfdf5;
  border-color: #86efac;
  color: #15803d;
}

.cfd-ai-icon-btn--danger:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.cfd-ai-icon-btn:disabled,
.cfd-ai-icon-btn.is-loading {
  opacity: 0.45;
  cursor: not-allowed;
}

.cfd-ai-icon-btn.is-loading svg {
  animation: cfd-ai-spin 0.9s linear infinite;
}

@keyframes cfd-ai-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cfd-value-display__pending-note {
  font-style: italic;
}

.cfd-value-display__error {
  color: var(--pp-danger, #b91c1c);
}

/* Compact AI custom-field cells on index tables */
.cfd-index-cell {
  min-width: 180px;
  max-width: 150ch;
  vertical-align: middle;
}

.cfd-index-cell turbo-frame {
  display: block;
  min-width: 0;
}

.cfd-value-display--compact {
  gap: 0;
  width: 100%;
}

.cfd-value-display--compact .cfd-value-display__main {
  align-items: center;
  gap: 0.35rem;
}

.cfd-value-display--compact .cfd-value-display__content {
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.cfd-value-display--compact .cfd-value-display__text {
  display: inline-block;
  max-width: 150ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  min-width: 0;
  font-weight: 500;
}

.cfd-text-tooltip {
  display: inline-block;
  max-width: 150ch;
  min-width: 0;
  vertical-align: bottom;
}

.cfd-text-tooltip .help-tooltip-trigger {
  display: inline-block;
  max-width: 150ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 500;
  color: inherit;
  text-align: left;
  cursor: default;
}

.cfd-text-tooltip .help-tooltip-trigger:hover,
.cfd-text-tooltip .help-tooltip-trigger:focus {
  color: inherit;
}

.cfd-text-tooltip__content {
  max-width: min(420px, 90vw);
  white-space: normal;
  text-align: left;
  font-weight: 400;
  line-height: 1.4;
}

.cfd-rationale-tooltip {
  flex-shrink: 0;
  margin-left: 0;
}

.cfd-rationale-tooltip--compact .cfd-rationale-tooltip__btn {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  color: var(--pp-muted, #64748b);
}

.cfd-rationale-tooltip--compact .cfd-rationale-tooltip__btn svg {
  width: 12px;
  height: 12px;
}

.cfd-rationale-tooltip__content {
  max-width: min(360px, 90vw);
  white-space: normal;
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
}

.cfd-value-display--compact .cfd-value-display__toolbar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  margin-top: 0;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.cfd-index-cell:hover .cfd-value-display--compact .cfd-value-display__toolbar,
.cfd-index-cell:focus-within .cfd-value-display--compact .cfd-value-display__toolbar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cfd-value-display--compact .cfd-rationale-tooltip {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.cfd-index-cell:hover .cfd-value-display--compact .cfd-rationale-tooltip,
.cfd-index-cell:focus-within .cfd-value-display--compact .cfd-rationale-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cfd-value-display--compact .cfd-ai-icon-btn {
  width: 22px;
  height: 22px;
  border-radius: 5px;
}

.cfd-value-display--compact .cfd-ai-icon-btn svg {
  width: 12px;
  height: 12px;
}

.cfd-value-display--compact .cfd-value-display__pending-note {
  font-size: 11px;
}

.cfd-value-display--compact .cfd-value-display__error {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.cfd-ai-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--pp-muted, #94a3b8);
}

.cfd-ai-dot--success { background: #16a34a; }
.cfd-ai-dot--info { background: #2563eb; }
.cfd-ai-dot--warning { background: #d97706; }
.cfd-ai-dot--danger { background: #dc2626; }
.cfd-ai-dot--neutral { background: #64748b; }

.cfd-value-display__inline-input {
  min-width: 0;
  flex: 1;
  max-width: 100%;
}

.cfd-value-display--compact .cfd-value-display__inline-input {
  font-size: 12px;
  padding: 2px 6px;
  height: 24px;
}

.cfd-value-display__edit-panel {
  width: 100%;
}

.cfd-value-display__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.cfd-form-field {
  width: 100%;
}

.cfd-form-field__hint {
  margin: 0 0 0.35rem;
}

/* Anchor chrome inside the input edge, like .vp-field + .vp-scan-btn. */
.cfd-form-field__main {
  position: relative;
  width: 100%;
}

.cfd-form-field__main > .input,
.cfd-form-field__main > textarea.input,
.cfd-form-field__main > select.input {
  width: 100%;
}

.cfd-form-field__main--chrome-status > .input,
.cfd-form-field__main--chrome-status > textarea.input,
.cfd-form-field__main--chrome-status > select.input {
  padding-right: 2rem;
}

.cfd-form-field__main--chrome-actions > .input,
.cfd-form-field__main--chrome-actions > textarea.input,
.cfd-form-field__main--chrome-actions > select.input {
  padding-right: 4.5rem;
}

.cfd-form-field__main--chrome-review > .input,
.cfd-form-field__main--chrome-review > textarea.input,
.cfd-form-field__main--chrome-review > select.input {
  padding-right: 6.5rem;
}

.cfd-form-field__toolbar {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 1;
  pointer-events: none;
}

.cfd-form-field__toolbar > * {
  pointer-events: auto;
}

.cfd-form-field--json .cfd-form-field__toolbar,
.cfd-form-field__main--json .cfd-form-field__toolbar {
  top: 6px;
  transform: none;
}

.cfd-form-field__icon-form {
  display: inline-flex;
  margin: 0;
}

.cfd-form-field__icon-wrap.help-tooltip-wrap,
.cfd-form-field__status-wrap.help-tooltip-wrap {
  margin-left: 0;
  vertical-align: top;
}

.cfd-form-field__status-wrap .cfd-form-field__status-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--pp-line, #e2e8f0);
  border-radius: 999px;
  background: var(--pp-bg-subtle, #f8fafc);
  cursor: help;
  line-height: 0;
}

.cfd-form-field__status-wrap .cfd-form-field__status-btn:hover,
.cfd-form-field__status-wrap .cfd-form-field__status-btn:focus {
  background: #fff;
  border-color: var(--pp-accent, #3b82f6);
  outline: none;
}

.cfd-form-field__status-btn .cfd-ai-dot {
  flex-shrink: 0;
}

.cfd-form-field__chrome-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--pp-line, #e2e8f0);
  background: var(--pp-bg-subtle, #f8fafc);
  color: var(--pp-text, #0f172a);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.cfd-form-field__icon-wrap .cfd-form-field__chrome-btn,
.cfd-form-field__icon-wrap a.cfd-form-field__chrome-btn {
  width: 32px;
  padding: 0;
  text-decoration: none;
}

.cfd-form-field__icon-wrap a.cfd-form-field__chrome-btn {
  box-sizing: border-box;
}

.cfd-form-field__chrome-btn.help-tooltip-trigger {
  cursor: pointer;
}

.cfd-form-field__chrome-btn:hover:not(:disabled),
.cfd-form-field__chrome-btn:focus-visible:not(:disabled) {
  background: #fff;
  border-color: var(--pp-accent, #3b82f6);
  color: var(--pp-accent, #1d4ed8);
  outline: none;
}

.cfd-form-field__chrome-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.cfd-form-field__chrome-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.cfd-form-field__chrome-btn--approve {
  color: #fff;
  background: var(--pp-accent, #2563eb);
  border-color: var(--pp-accent, #2563eb);
}

.cfd-form-field__chrome-btn--approve:hover:not(:disabled),
.cfd-form-field__chrome-btn--approve:focus-visible:not(:disabled) {
  color: #fff;
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.cfd-form-field__chrome-btn--danger {
  color: #b91c1c;
}

.cfd-form-field__chrome-btn--danger:hover:not(:disabled),
.cfd-form-field__chrome-btn--danger:focus-visible:not(:disabled) {
  color: #fff;
  background: #dc2626;
  border-color: #dc2626;
}

.cfd-form-field__icon-wrap .help-tooltip-content {
  min-width: auto;
  max-width: 160px;
  text-align: center;
  font-size: 11px;
  padding: 5px 8px;
}

.cfd-value-display__inline-textarea {
  min-width: 0;
  flex: 1;
  max-width: 100%;
  font-family: var(--pp-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.4;
  resize: vertical;
}

.cfd-value-display--compact .cfd-value-display__inline-textarea {
  font-size: 11px;
  padding: 4px 6px;
}

.cfd-json-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.cfd-json-table {
  width: 100%;
  font-size: 13px;
}

.cfd-json-table__label {
  margin: 0 0 0.35rem;
}

.cfd-json-kv {
  margin: 0;
  font-size: 13px;
}

.cfd-json-raw {
  margin: 0;
  padding: 0.5rem 0.65rem;
  max-width: 100%;
  overflow-x: auto;
  font-family: var(--pp-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.45;
  background: var(--pp-surface-muted, #f8fafc);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}

.cfd-json-schema-input {
  font-family: var(--pp-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.45;
}

.cfd-value-display--json .cfd-value-display__content {
  align-items: flex-start;
}

.pill-accent {
  background: var(--pp-accent-soft, #dbeafe);
  color: var(--pp-accent, #1d4ed8);
}

/* ── Data transfer import guide ─────────────────────────────── */
.dt-import-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.dt-import-guide__grid {
  display: grid;
  gap: 1.25rem 2rem;
  padding: 0 1.5rem 1rem;
}

@media (min-width: 768px) {
  .dt-import-guide__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.dt-import-guide__vendor {
  margin: 0 1.5rem 1rem;
  padding: 0.65rem 0.85rem;
  background: var(--pp-surface-muted, #f8fafc);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 6px;
  font-size: 14px;
}

.dt-import-guide__heading {
  margin: 0 0 0.5rem;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--pp-text-muted, #64748b);
}

.dt-import-guide__list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 14px;
  line-height: 1.5;
}

.dt-import-guide__list li + li {
  margin-top: 0.35rem;
}

.dt-import-guide__list--ordered {
  list-style: decimal;
}

.dt-import-guide__notes {
  padding: 0 1.5rem 1rem;
  border-top: 1px solid var(--pp-border, #e2e8f0);
  margin-top: 0.25rem;
  padding-top: 1rem;
}

.dt-import-guide__example {
  padding: 0 1.5rem 1.25rem;
}

.dt-import-guide__code {
  display: block;
  margin-top: 0.35rem;
  padding: 0.65rem 0.85rem;
  font-family: var(--pp-mono, ui-monospace, monospace);
  font-size: 12px;
  background: var(--pp-surface-muted, #f8fafc);
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 6px;
  overflow-x: auto;
  white-space: nowrap;
}

.dt-import-fields__table td {
  vertical-align: top;
  font-size: 14px;
}

.dt-import-fields__table td:first-child {
  min-width: 140px;
}

.dt-import-settings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dt-import-settings__radios {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.dt-import-settings__radio {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.dt-import-settings__radio input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.dt-import-settings__radio span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dt-import-settings__advanced {
  border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  background: var(--pp-surface-muted, #f8fafc);
}

.dt-import-settings__advanced summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.dt-import-settings__advanced-body {
  margin-top: 1rem;
}

.dt-import-settings__checkbox {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 14px;
  cursor: pointer;
}

.dt-import-settings__checkbox input {
  margin-top: 0.15rem;
}

.dt-import-settings-summary {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.dt-import-settings-summary li + li {
  margin-top: 0.15rem;
}

.dt-map-table .dt-map-field-desc {
  margin: 0.25rem 0 0;
  font-size: 13px;
}

.dt-map-source-cell {
  width: 11rem;
}

.dt-map-sample-cell {
  width: 12rem;
  max-width: 16rem;
}

.dt-map-sample {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}


.dt-map-binding-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.dt-map-binding-select {
  flex: 1 1 14rem;
  min-width: 12rem;
  max-width: 28rem;
}

.dt-map-constant-input {
  flex: 1 1 10rem;
  min-width: 8rem;
  max-width: 16rem;
}

.dt-map-value-cell .input {
  width: 100%;
  max-width: 22rem;
}

.dt-import-wizard-header {
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-border-subtle, #e2e8f0);
  border-radius: 10px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.dt-import-wizard-steps {
  padding: 0.75rem 1rem 0.5rem;
}

.dt-import-wizard-steps .wizard-step-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

.dt-import-wizard-header .wizard-progress {
  height: 3px;
  background: var(--pp-border-subtle, #e2e8f0);
}

.dt-import-flash {
  margin: 0 1.5rem 1rem;
}

.dt-import-error-note {
  padding: 0.75rem 1.5rem;
  font-size: 13px;
}

.dt-import-skip-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 14px;
}

.dt-import-skip-label input {
  margin-top: 2px;
  flex-shrink: 0;
}

.dt-map-panel-actions {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pp-border-subtle, #e2e8f0);
}

.panel-actions.dt-map-panel-actions,
.form-actions.dt-map-panel-actions {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.dt-map-skip-hint {
  display: inline-block;
  padding: 0.35rem 0;
}

.cfd-options-editor__row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.cfd-options-editor__row .input {
  flex: 1;
}

.cfd-list-input__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.cfd-list-input__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--pp-surface-2, #f1f5f9);
  border: 1px solid var(--pp-border-subtle, #e2e8f0);
  font-size: 0.875rem;
}

.cfd-list-input__remove {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--pp-text-muted, #64748b);
  line-height: 1;
  padding: 0 0.15rem;
}

.cfd-external-ref {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.cfd-validation-hints {
  margin: 0.15rem 0 0.35rem;
}

.cfd-structured-json__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cfd-structured-json__label {
  display: block;
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
  color: var(--pp-text-muted, #64748b);
}

.cfd-managed-form__meta {
  margin-top: 0.75rem;
}

/* Product field suggestions (draft enrichment) */
.pfs-chip-rail-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.pfs-chip-rail-wrap--field {
  margin-top: 0.25rem;
}

.pfs-chip-rail-wrap[hidden] {
  display: none;
}

.pfs-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  max-width: 28rem;
  min-height: 2rem;
  padding: 0.2rem 0.45rem 0.2rem 0.35rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background:
    linear-gradient(var(--pp-surface, #fff), var(--pp-surface, #fff)) padding-box,
    linear-gradient(135deg, #a78bfa, #6366f1, #38bdf8) border-box;
  box-shadow: var(--pp-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
  color: var(--pp-text, #0f172a);
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.15s var(--pp-ease, ease);
}

.pfs-chip:hover {
  box-shadow: var(--pp-shadow-md, 0 4px 12px rgba(99, 102, 241, 0.18));
}

.pfs-chip__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 4px;
  background: linear-gradient(135deg, #ede9fe, #dbeafe);
  color: #6366f1;
}

.pfs-chip__icon svg {
  width: 12px;
  height: 12px;
}

.pfs-chip--live .pfs-chip__icon {
  background: linear-gradient(135deg, #e0e7ff, #cffafe);
  color: #4f46e5;
}

.pfs-chip--ai .pfs-chip__icon {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #7c3aed;
}

.pfs-chip__body {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.pfs-chip__main {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
  flex-shrink: 0;
}

.pfs-chip__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6366f1;
  white-space: nowrap;
}

.pfs-chip__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16rem;
}

.pfs-chip__hint {
  font-size: 12px;
  color: var(--pp-text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pfs-chip__apply {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: #6366f1;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.08);
}

.pfs-chip:hover .pfs-chip__apply {
  background: rgba(99, 102, 241, 0.14);
}

.pfs-banner {
  margin-bottom: 0.75rem;
  border: 1px solid var(--pp-border-subtle, #e2e8f0);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), rgba(56, 189, 248, 0.04));
}

.pfs-banner--pending {
  border-color: rgba(99, 102, 241, 0.25);
}

.pfs-banner__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
}

.pfs-banner__lead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.pfs-banner__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #6366f1;
}

.pfs-banner__text {
  font-size: 0.8125rem;
  line-height: 1.35;
}

.pfs-banner__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.pfs-banner__chevron {
  flex-shrink: 0;
}

.pfs-banner__details {
  border: 0;
}

.pfs-banner__summary {
  list-style: none;
  cursor: pointer;
}

.pfs-banner__summary::-webkit-details-marker {
  display: none;
}

.pfs-banner__expand {
  padding: 0 0.75rem 0.75rem;
  border-top: 1px solid var(--pp-border-subtle, #e2e8f0);
}

.pfs-banner__toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0 0.75rem 0.6rem;
  border-top: 1px solid var(--pp-border-subtle, #e2e8f0);
}

.pfs-banner__footer {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.pfs-suggestions--compact {
  padding: 0.5rem 0 0;
}

.pfs-suggestion--compact {
  padding: 0.5rem 0;
}

.pfs-suggestion__value--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pfs-panel {
  margin-bottom: 1.25rem;
}

.pfs-panel__header {
  align-items: flex-start;
}

.pfs-panel__title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 1rem;
}

.pfs-panel__title-icon {
  display: inline-flex;
  color: #6366f1;
}

.pfs-panel__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pfs-panel__image-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--pp-text-muted, #64748b);
}

.pfs-panel__status {
  padding: 0.75rem 1rem;
}

.pfs-panel__spinner {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.35rem;
  border: 2px solid var(--pp-border, #cbd5e1);
  border-top-color: var(--pp-accent, #2563eb);
  border-radius: 50%;
  animation: pfs-spin 0.8s linear infinite;
  vertical-align: -0.1em;
}

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

.pfs-panel__error {
  margin: 0 1rem 0.75rem;
  color: var(--pp-danger, #dc2626);
}

.pfs-panel__notice {
  margin: 0 1rem 0.75rem;
  color: var(--pp-success, #16a34a);
}

.pfs-suggestions {
  list-style: none;
  margin: 0;
  padding: 0 1rem;
}

.pfs-suggestion {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--pp-border-subtle, #e2e8f0);
}

.pfs-suggestion:last-child {
  border-bottom: none;
}

.pfs-suggestion__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.pfs-suggestion__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted, #64748b);
}

.pfs-suggestion__value {
  font-size: 0.9375rem;
}

.pfs-suggestion__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.pfs-panel__footer {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem 1rem;
}

/* ── Image pipeline builder (.ip-*) ───────────────────────────────────── */
.ip-panel--collapsed { display: none !important; }
.ip-builder__body { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 16px; }
.ip-builder__basics { margin-top: 4px; }
.ip-preset-desc { margin-top: 4px; min-height: 1.25em; }

.ip-preset-summary {
  border: 1px solid var(--pp-border-subtle, #e2e8f0);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--pp-surface-2, #f8fafc);
}
.ip-preset-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.ip-preset-summary__head h3 { font-size: 0.9375rem; margin: 0; }
.ip-preset-summary__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ip-preset-summary__item { display: flex; flex-direction: column; gap: 2px; }
.ip-preset-summary__intro { margin: 0 0 10px; }
.ip-preset-use-case { margin-top: 4px; font-style: italic; }
.ip-preset-summary__step {
  font-size: 0.875rem;
  font-weight: 600;
}
.ip-preset-summary__detail { display: block; line-height: 1.4; }

.ip-add-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  white-space: normal;
}
.ip-add-item__label { font-weight: 600; }
.ip-add-item__desc { font-size: 0.75rem; color: var(--pp-text-muted, #64748b); line-height: 1.3; }

.ip-param-advanced { margin-top: 8px; }
.ip-param-advanced summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--pp-text-muted, #64748b);
  margin-bottom: 8px;
}
.ip-param-defaults-note { margin: 0 0 8px; }

.ip-steps-panel {
  border: 1px solid var(--pp-border-subtle, #e2e8f0);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--pp-surface-1, #fff);
}
.ip-steps-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.ip-steps-panel__head h3 { font-size: 0.9375rem; margin: 0 0 2px; }
.ip-steps-panel__foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pp-border-subtle, #e2e8f0); }

.ip-steps-empty {
  border: 1px dashed var(--pp-border-subtle, #cbd5e1);
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
  color: var(--pp-text-muted, #64748b);
  font-size: 0.875rem;
  margin-bottom: 12px;
}

.ip-steps { display: flex; flex-direction: column; gap: 10px; }
.ip-step {
  border: 1px solid var(--pp-border-subtle, #e2e8f0);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--pp-surface-1, #fff);
}
.ip-step--disabled { opacity: 0.55; }
.ip-step__head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.ip-step__toggle { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0; }
.ip-step__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  background: var(--pp-surface-2, #f1f5f9);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pp-text-muted, #64748b);
}
.ip-step__actions { display: flex; gap: 4px; flex-wrap: wrap; }
.ip-step__desc { margin: 4px 0 0 2.25rem; }
.ip-step__details { margin-top: 8px; margin-left: 2.25rem; }
.ip-step__details summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--pp-text-muted, #64748b);
}
.ip-step__params {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.ip-param {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8125rem;
  padding: 10px;
  border: 1px solid var(--pp-border-subtle, #e2e8f0);
  border-radius: 8px;
  background: var(--pp-surface-2, #f8fafc);
}
.ip-param--wide { grid-column: 1 / -1; max-width: 420px; }
.ip-param__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.ip-param__label { color: var(--pp-text, #0f172a); font-weight: 600; }
.ip-param__value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--pp-primary, #2563eb);
  white-space: nowrap;
}
.ip-param__check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ip-param__dual {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 10px;
  align-items: center;
}
.ip-param__range { width: 100%; accent-color: var(--pp-primary, #2563eb); }
.ip-param__number { width: 100%; }
.ip-param__foot { display: flex; justify-content: flex-end; }
.ip-param__bounds { font-size: 0.75rem; }
.ip-param__help { margin: 0; line-height: 1.4; }

.ip-add-menu { max-height: 320px; overflow-y: auto; min-width: 220px; }
.ip-add-group__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--pp-text-muted, #64748b);
  padding: 6px 12px 2px;
}

.ip-disclosure summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pp-text-muted, #64748b);
}
.ip-fallback-cards { margin-top: 8px; }
.ip-source-summary { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--pp-border-subtle, #e2e8f0); }
.ip-sidecar-hint {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--pp-warning-border, #fcd34d);
  background: var(--pp-warning-bg, #fffbeb);
  font-size: 0.875rem;
}
.ip-sidecar-hint code { font-size: 0.8125rem; }
.ip-unsaved-banner {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--pp-info-border, #93c5fd);
  background: var(--pp-info-bg, #eff6ff);
  font-size: 0.875rem;
}
.ip-save-status { margin-right: 12px; min-width: 7rem; text-align: right; }
.ip-save-status--warn { color: var(--pp-warning-text, #b45309); }
.ip-save-status--error { color: var(--pp-danger-text, #b91c1c); }

.ip-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.ip-warnings { margin-top: 8px; color: var(--pp-warning-text, #b45309); font-size: 0.8125rem; }

.ip-recipe-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.ip-recipe-card {
  display: block;
  border: 1px solid var(--pp-border-subtle, #e2e8f0);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  background: var(--pp-surface-1, #fff);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ip-recipe-card__input { position: absolute; opacity: 0; pointer-events: none; }
.ip-recipe-card__body { display: flex; flex-direction: column; gap: 4px; }
.ip-recipe-card__title { font-weight: 600; font-size: 0.875rem; }
.ip-recipe-card__desc { line-height: 1.35; }
.ip-recipe-card--selected {
  border-color: var(--pp-primary, #2563eb);
  box-shadow: 0 0 0 1px var(--pp-primary, #2563eb);
  background: var(--pp-info-bg, #eff6ff);
}

.ip-preview-actions { margin-bottom: 10px; }
.ip-preview-panel { overflow: visible; }
.ip-preview-progress { margin: 10px 0 12px; }
.ip-preview-progress__label { margin: 6px 0 0; }
.ip-preview-progress .progress-bar { height: 8px; }
.ip-preview-batch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
  overflow: visible;
}
@media (max-width: 1100px) {
  .ip-preview-batch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ip-preview-batch { grid-template-columns: 1fr; }
}
.ip-preview-batch__item {
  border: 1px solid var(--pp-border-subtle, #e2e8f0);
  border-radius: 8px;
  padding: 10px;
  background: var(--pp-surface-1, #fff);
  overflow: visible;
}
.ip-preview-batch__item--error { border-color: var(--pp-danger-border, #fca5a5); }
.ip-preview-batch__title { font-size: 0.8125rem; font-weight: 600; margin: 0 0 8px; line-height: 1.3; }
.ip-preview-batch__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ip-preview-thumb {
  position: relative;
  display: block;
  line-height: 0;
  border-radius: 4px;
  overflow: visible;
}
.ip-preview-thumb > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--pp-border-subtle, #e2e8f0);
  background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 12px 12px;
  transition: border-color 0.15s;
}
.ip-preview-thumb:hover > img,
.ip-preview-thumb:focus-within > img {
  border-color: var(--pp-primary, #2563eb);
}
.ip-preview-thumb__zoom {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 36vw);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  background: var(--pp-surface-1, #fff);
  border: 1px solid var(--pp-border-subtle, #e2e8f0);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
.ip-preview-thumb__zoom img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 4px;
  background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 14px 14px;
}
.ip-preview-thumb--zoomed .ip-preview-thumb__zoom,
.ip-preview-thumb:hover .ip-preview-thumb__zoom,
.ip-preview-thumb:focus-within .ip-preview-thumb__zoom {
  opacity: 1;
  visibility: visible;
}

.ip-preview-grid img {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--pp-border-subtle, #e2e8f0);
  background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}
.ip-preview-grid .ip-preview-thumb > img {
  aspect-ratio: auto;
  min-height: 120px;
}
.ip-preview-grid .ip-preview-thumb__zoom {
  width: min(420px, 44vw);
}
.ip-preview-grid .ip-preview-thumb__zoom img {
  max-height: 420px;
}

.ip-preview-filmstrip { margin-top: 12px; }
.ip-preview-filmstrip__label { margin: 0 0 6px; }
.ip-preview-filmstrip__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.ip-preview-filmstrip__item {
  flex: 0 0 auto;
  width: 72px;
  margin: 0;
}
.ip-preview-filmstrip__item .ip-preview-thumb > img {
  width: 72px;
  height: 72px;
  aspect-ratio: 1;
}
.ip-preview-filmstrip__item .ip-preview-thumb__zoom {
  width: 240px;
  top: auto;
  bottom: calc(100% + 8px);
}
.ip-preview-filmstrip__item .ip-preview-thumb__zoom img {
  max-height: 240px;
}
.ip-preview-filmstrip__item figcaption {
  font-size: 0.625rem;
  text-align: center;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ip-review-grid__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding: 0 1rem 1rem;
}
.ip-review-card {
  border: 1px solid var(--pp-border-subtle, #e2e8f0);
  border-radius: 8px;
  padding: 12px;
  background: var(--pp-surface-1, #fff);
}
.ip-review-card--flagged {
  border-color: var(--pp-warning-border, #fcd34d);
  background: var(--pp-warning-bg, #fffbeb);
}
.ip-review-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}
.ip-review-card__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.ip-review-card__compare figcaption { margin-bottom: 4px; }
.ip-review-card__img {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--pp-border-subtle, #e2e8f0);
  background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 14px 14px;
}
.ip-review-card__empty {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--pp-border-subtle, #e2e8f0);
  border-radius: 6px;
}
.ip-review-card__actions { display: flex; gap: 8px; }
.ip-skip-reason { display: block; margin-top: 4px; max-width: 12rem; }