/* Ported verbatim from test/my-app/app/globals.css (shadcn radix-nova, neutral base) */
/* Custom variants + utility ported from test/my-app/node_modules/shadcn/dist/tailwind.css */

@custom-variant data-open (&:where([data-state="open"], [data-open]:not([data-open="false"])));
@custom-variant data-closed (&:where([data-state="closed"], [data-closed]:not([data-closed="false"])));
@custom-variant data-checked (&:where([data-state="checked"], [data-checked]:not([data-checked="false"])));
@custom-variant data-unchecked (&:where([data-state="unchecked"], [data-unchecked]:not([data-unchecked="false"])));
@custom-variant data-selected (&:where([data-selected="true"]));
@custom-variant data-disabled (&:where([data-state="disabled"], [data-disabled]:not([data-disabled="false"])));
@custom-variant data-active (&:where([data-state="active"], [data-active]:not([data-active="false"])));
@custom-variant data-horizontal (&:where([data-orientation="horizontal"]));
@custom-variant data-vertical (&:where([data-orientation="vertical"]));

@utility no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}

@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto)); }
}
@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto)); }
  to { height: 0; }
}


@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-sans);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

:root {
  /* shadcn preset: Luma + Zinc + Cyan + Blue. Verbatim from shadcn/ui themes.ts. */
  color-scheme: light;
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.52 0.105 223.128);
  --primary-foreground: oklch(0.984 0.019 200.873);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.97 0.01 17);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --chart-1: oklch(0.809 0.105 251.813);
  --chart-2: oklch(0.623 0.214 259.815);
  --chart-3: oklch(0.546 0.245 262.881);
  --chart-4: oklch(0.488 0.243 264.376);
  --chart-5: oklch(0.424 0.199 265.638);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.52 0.105 223.128);
  --sidebar-primary-foreground: oklch(0.984 0.019 200.873);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.705 0.015 286.067);

  /* Status tokens — light. Drive badges, segments, composition bar, card stripes. */
  --status-pending: oklch(0.85 0.005 286.32);
  --status-ready: oklch(0.52 0.105 223.128);
  --status-claimed: oklch(0.62 0.16 250);
  --status-waiting: oklch(0.7 0.135 75);
  --status-completed: oklch(0.55 0.13 160);
  --status-failed: oklch(0.577 0.245 27.325);
  --status-cancelled: oklch(0.65 0 0);
}

/* shadcn preset (dark): Luma + Zinc + Cyan + Blue. Verbatim from shadcn/ui themes.ts. */
.dark {
  color-scheme: dark;
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.45 0.085 224.283);
  --primary-foreground: oklch(0.984 0.019 200.873);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.552 0.016 285.938);
  --chart-1: oklch(0.809 0.105 251.813);
  --chart-2: oklch(0.623 0.214 259.815);
  --chart-3: oklch(0.546 0.245 262.881);
  --chart-4: oklch(0.488 0.243 264.376);
  --chart-5: oklch(0.424 0.199 265.638);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.45 0.085 224.283);
  --sidebar-primary-foreground: oklch(0.984 0.019 200.873);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.552 0.016 285.938);

  /* Status tokens — dark. */
  --status-pending: oklch(0.32 0.005 286);
  --status-ready: oklch(0.62 0.13 215);
  --status-claimed: oklch(0.7 0.16 250);
  --status-waiting: oklch(0.75 0.13 75);
  --status-completed: oklch(0.7 0.16 160);
  --status-failed: oklch(0.704 0.191 22.216);
  --status-cancelled: oklch(0.5 0 0);
}

html, body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--background);
  color: var(--foreground);
}

/* Chrome-less routes (/auth* and the public landing at #/) hide the sidebar and
   let the page span full width. Toggled via body.auth-route / body.landing-route
   in index.html. */
body.auth-route #sidebar,
body.landing-route #sidebar { display: none; }
body.auth-route main,
body.landing-route main { margin-left: 0 !important; }

/* KViews loading overlay — vendor sets inline `background: silver; text: "Se incarca"`.
   Override into a quiet token-tinted skeleton bar with no visible text. */
.komponent-overlay {
  background: var(--muted) !important;
  color: transparent !important;
  border: 0 !important;
  border-radius: calc(var(--radius) - 2px);
  opacity: 0.6;
  animation: kv-overlay-pulse 1.4s ease-in-out infinite;
}
@keyframes kv-overlay-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.65; }
}


/* Default every border + divider to the token so bare `border` / `divide-*` utilities
   pick up --border instead of falling back to currentColor (which is ~white in dark mode). */
* {
  border-color: var(--border);
}


/* Per-status pill — text-only label. No leading dot (the row's leading dot covers that).
   Heavier tint reserved for active states (ready/claimed/in_progress/waiting/failed);
   pending + completed/skipped are muted because they don't need attention. */
/* Unified badge box. Shared by .badge-tone (semantic, token-driven) and the
   legacy .status-pill (keyed by data-status, kept for existing markup).
   New code: <span class="badge-tone" data-tone="success">…</span> */
.badge-tone,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: calc(var(--radius) - 2px);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1rem;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* Smaller variant for dense card chips. */
.badge-tone[data-size="xs"] { padding: 0 6px; font-size: 10px; }

/* Semantic tones — colors come from the theme tokens, so light/dark are
   automatic. Keep this the ONLY place badge colors are defined. */
.badge-tone[data-tone="neutral"] { background: color-mix(in oklab, var(--muted) 80%, transparent);              color: var(--muted-foreground); }
.badge-tone[data-tone="info"]    { background: color-mix(in oklab, var(--status-claimed) 18%, transparent);     color: var(--status-claimed); }
.badge-tone[data-tone="success"] { background: color-mix(in oklab, var(--status-completed) 16%, transparent);   color: var(--status-completed); }
.badge-tone[data-tone="warning"] { background: color-mix(in oklab, var(--status-waiting) 18%, transparent);     color: var(--status-waiting); }
.badge-tone[data-tone="danger"]  { background: color-mix(in oklab, var(--status-failed) 18%, transparent);      color: var(--status-failed); }
.status-pill[data-status="pending"]    { background: color-mix(in oklab, var(--muted) 80%, transparent);             color: var(--muted-foreground); }
.status-pill[data-status="ready"]      { background: color-mix(in oklab, var(--status-ready) 18%, transparent);      color: var(--status-ready); }
.status-pill[data-status="claimed"],
.status-pill[data-status="in_progress"]{ background: color-mix(in oklab, var(--status-claimed) 18%, transparent);    color: var(--status-claimed); }
.status-pill[data-status="waiting"]    { background: color-mix(in oklab, var(--status-waiting) 18%, transparent);    color: var(--status-waiting); }
.status-pill[data-status="completed"]  { background: color-mix(in oklab, var(--status-completed) 6%, transparent);  color: var(--status-completed); }
.status-pill[data-status="skipped"]    { background: color-mix(in oklab, var(--status-completed) 4%, transparent);  color: var(--status-completed); opacity: 0.75; }
.status-pill[data-status="failed"]     { background: color-mix(in oklab, var(--status-failed) 18%, transparent);     color: var(--status-failed); }
.status-pill[data-status="cancelled"]  { background: color-mix(in oklab, var(--status-cancelled) 18%, transparent); color: var(--status-cancelled); }
.status-pill[data-status="needs_review"] { background: color-mix(in oklab, var(--status-waiting) 18%, transparent); color: var(--status-waiting); }

/* Step UI message banner (project_steps.ui_message + ui_message_type). */
.workflow-step-ui-message[data-ui-message-type="success"] {
  border-color: color-mix(in oklab, var(--status-completed) 40%, var(--border));
  background: color-mix(in oklab, var(--status-completed) 12%, var(--card));
}
.workflow-step-ui-message[data-ui-message-type="info"] {
  border-color: color-mix(in oklab, var(--status-ready) 40%, var(--border));
  background: color-mix(in oklab, var(--status-ready) 12%, var(--card));
}
.workflow-step-ui-message[data-ui-message-type="warning"] {
  border-color: color-mix(in oklab, var(--status-waiting) 40%, var(--border));
  background: color-mix(in oklab, var(--status-waiting) 12%, var(--card));
}
.workflow-step-ui-message[data-ui-message-type="error"] {
  border-color: color-mix(in oklab, var(--status-failed) 40%, var(--border));
  background: color-mix(in oklab, var(--status-failed) 12%, var(--card));
}
.workflow-step-ui-message[data-ui-message-type="success"] .workflow-step-ui-message-icon {
  color: var(--status-completed);
}
.workflow-step-ui-message[data-ui-message-type="info"] .workflow-step-ui-message-icon {
  color: var(--status-ready);
}
.workflow-step-ui-message[data-ui-message-type="warning"] .workflow-step-ui-message-icon {
  color: var(--status-waiting);
}
.workflow-step-ui-message[data-ui-message-type="error"] .workflow-step-ui-message-icon {
  color: var(--status-failed);
}

/* Composition bar — used by status strip; one .segment per task. */
.composition-bar {
  display: flex;
  height: 0.5rem;
  width: 100%;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--muted);
}
.composition-bar .segment { flex: 1 1 0; }
.composition-bar .segment[data-status="pending"]     { background: var(--status-pending); }
.composition-bar .segment[data-status="ready"]       { background: var(--status-ready); }
.composition-bar .segment[data-status="waiting"]     { background: var(--status-waiting); }
.composition-bar .segment[data-status="completed"],
.composition-bar .segment[data-status="skipped"]     { background: var(--status-completed); }
/* claimed/in_progress (blue) and failed (red): striped + softened so they read as
   part of the bar without looking like a solid terminal block. */
.composition-bar .segment[data-status="claimed"],
.composition-bar .segment[data-status="in_progress"] {
  background: repeating-linear-gradient(
    45deg,
    var(--status-claimed) 0 3px,
    color-mix(in oklab, var(--status-claimed) 30%, transparent) 3px 6px
  );
}
.composition-bar .segment[data-status="failed"] {
  background: repeating-linear-gradient(
    45deg,
    var(--status-failed) 0 3px,
    color-mix(in oklab, var(--status-failed) 30%, transparent) 3px 6px
  );
}
.composition-bar .segment[data-status="cancelled"]   { background: var(--status-cancelled); }

/* Dep row + card — peek vs open semantics. */
.dep-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background-color 120ms ease;
  border-left: 2px solid transparent;
}

/* Right-aligned cluster on dep rows: pips + count + status pill share a min-width
   so status badge right edges line up across rows. */
.dep-row__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-end;
  flex-shrink: 0;
}
.dep-row__right .task-segments { min-width: 3rem; justify-content: flex-end; }
.dep-row__right .mono-caption  { min-width: 2rem; text-align: right; }
.dep-row__right .status-pill   { min-width: 6.5rem; justify-content: center; }
.dep-row:hover { background: color-mix(in oklab, var(--primary) 8%, transparent); }
.dep-row[data-peeked="true"] {
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  border-left-color: var(--primary);
}
.dep-row__name {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 500;
  border-radius: calc(var(--radius) - 4px);
  padding: 0.125rem 0.375rem;
  margin-left: -0.375rem;
  transition: background-color 120ms ease, color 120ms ease;
}
.dep-row__name:hover {
  background: color-mix(in oklab, var(--primary) 14%, transparent);
  color: var(--primary);
}
.dep-row__name .arrow { opacity: 0; transition: opacity 120ms ease; font-size: 0.75rem; }
.dep-row__name:hover .arrow { opacity: 1; }

.dep-card {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.dep-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--status-pending);
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.dep-card[data-status="ready"]::before       { background: var(--status-ready); }
.dep-card[data-status="claimed"]::before,
.dep-card[data-status="in_progress"]::before { background: var(--status-claimed); }
.dep-card[data-status="waiting"]::before     { background: var(--status-waiting); }
.dep-card[data-status="completed"]::before,
.dep-card[data-status="skipped"]::before     { background: var(--status-completed); }
.dep-card[data-status="failed"]::before      { background: var(--status-failed); }
.dep-card[data-status="cancelled"]::before   { background: var(--status-cancelled); }
.dep-card:hover { background: color-mix(in oklab, var(--primary) 6%, var(--card)); }
.dep-card[data-peeked="true"] {
  background: color-mix(in oklab, var(--primary) 10%, var(--card));
  border-color: var(--primary);
}

/* Task segments strip — small colored pills, one per task on a dep row. */
.task-segments { display: inline-flex; gap: 2px; align-items: center; }
.task-segments .seg {
  width: 0.6rem;
  height: 0.45rem;
  border-radius: 2px;
  background: var(--status-pending);
  cursor: pointer;
}
.task-segments .seg[data-status="ready"]       { background: var(--status-ready); }
.task-segments .seg[data-status="claimed"],
.task-segments .seg[data-status="in_progress"] { background: var(--status-claimed); }
.task-segments .seg[data-status="waiting"]     { background: var(--status-waiting); }
.task-segments .seg[data-status="completed"],
.task-segments .seg[data-status="skipped"]     { background: var(--status-completed); }
.task-segments .seg[data-status="failed"]      { background: var(--status-failed); }
.task-segments .seg[data-status="cancelled"]   { background: var(--status-cancelled); }



/* Inspector tabs (Parent / Child) — bare underline. */
.inspector-tabs {
  display: inline-flex;
  gap: 0.25rem;
}
.inspector-tabs [role="tab"] {
  padding: 0.5rem 0;
  margin-right: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.inspector-tabs [role="tab"]:hover {
  color: var(--foreground);
}
.inspector-tabs [role="tab"][aria-selected="true"] {
  color: var(--foreground);
  border-bottom-color: var(--foreground);
}
.inspector-tabs [role="tab"][aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.inspector-tabs [role="tab"][aria-disabled="true"]:hover {
  color: var(--muted-foreground);
}


/* Inspector body — two-line task rows, separated cards. */
.inspector-task-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 12px 14px;
  min-height: 56px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--card);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.inspector-task-row:hover {
  background: color-mix(in oklab, var(--foreground) 4%, var(--card));
}
.inspector-task-row .status-pill {
  min-width: 6.5rem;
  justify-content: center;
}

/* Visual weight inversion — completed/skipped rows fade so active items dominate. */
.inspector-task-row[data-task-status="completed"],
.inspector-task-row[data-task-status="skipped"] {
  opacity: 0.7;
}
.dep-row[data-status="completed"],
.dep-row[data-status="skipped"],
.dep-card[data-status="completed"],
.dep-card[data-status="skipped"] {
  opacity: 0.7;
}
.inspector-task-row__main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.inspector-task-row__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inspector-task-row[data-task-status="completed"] .inspector-task-row__name,
.inspector-task-row[data-task-status="skipped"] .inspector-task-row__name,
.inspector-task-row[data-task-status="cancelled"] .inspector-task-row__name {
  color: var(--muted-foreground);
}

/* Leading task circle — small, shadcn-default. Outlined by default, filled when done. */
.task-circle {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  border: 1.5px solid var(--muted-foreground);
  background: transparent;
  flex-shrink: 0;
  display: inline-block;
}
.task-circle[data-status="ready"]       { border-color: var(--status-ready); }
.task-circle[data-status="claimed"],
.task-circle[data-status="in_progress"] { border-color: var(--status-claimed); }
.task-circle[data-status="waiting"]     { border-color: var(--status-waiting); }
.task-circle[data-status="failed"]      { border-color: var(--destructive); }
.task-circle[data-status="cancelled"]   { border-color: var(--status-cancelled); }
.task-circle[data-status="completed"],
.task-circle[data-status="skipped"] {
  border-color: var(--status-completed);
  background: var(--status-completed);
}

/* Page header tabs — underline style (project shell). No full-width rule; only the active tab carries its own 2px underline. */
.page-tabs {
  display: flex;
  gap: 0;
  width: 100%;
}
.page-tabs > .page-tab {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms ease, border-color 120ms ease;
  cursor: pointer;
  text-decoration: none;
}
.page-tabs > .page-tab:hover {
  color: var(--foreground);
}
.page-tabs > .page-tab[aria-selected="true"],
.page-tabs > .page-tab[aria-current="page"] {
  color: var(--foreground);
  border-bottom-color: var(--foreground);
}

/* Status dot used in breadcrumb segments and dep rows. Global so both surfaces share it. */
.bc-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: var(--status-pending);
  flex-shrink: 0;
}
.bc-dot[data-status="ready"]       { background: var(--status-ready); }
.bc-dot[data-status="claimed"],
.bc-dot[data-status="in_progress"] { background: var(--status-claimed); }
.bc-dot[data-status="waiting"]     { background: var(--status-waiting); }
.bc-dot[data-status="completed"],
.bc-dot[data-status="skipped"]     { background: var(--status-completed); }
.bc-dot[data-status="failed"]      { background: var(--destructive); }
.bc-dot[data-status="cancelled"]   { background: var(--status-cancelled); }

/* WhoChip — small 11px label with leading monogram tile (A / H). */
.who-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: calc(var(--radius) - 4px);
  background: transparent;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  text-transform: lowercase;
  white-space: nowrap;
}
.who-chip::before {
  content: attr(data-monogram);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: calc(var(--radius) - 6px);
  font-size: 9px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  text-transform: uppercase;
  background: var(--muted);
  color: var(--muted-foreground);
}
/* Monograms stay neutral — the chip is metadata, not status, and shouldn't compete with badges. */
.who-chip[data-mode]::before { background: var(--muted); color: var(--muted-foreground); }

/* Selection accent on dep rows (2px primary left border) + card stripe is already in CSS. */
.dep-row[data-peeked="true"] { border-left-width: 2px; }


/* Toast host in top layer (above modal <dialog>); #toaster keeps Basecoat layout inside. */
.toaster-popover-host {
  position: fixed;
  bottom: 0;
  right: 0;
  top: auto;
  left: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  pointer-events: none;
  width: max-content;
  max-width: 100%;
}

.toaster-popover-host:popover-open {
  /* UA popover defaults conflict with .toaster bottom-right positioning */
  position: fixed;
  inset: auto 0 0 auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  width: max-content;
  max-width: 100%;
}

@media (min-width: 40rem) {
  .toaster-popover-host,
  .toaster-popover-host:popover-open {
    max-width: calc(var(--spacing) * 90);
  }
}

/* Dialog backdrop (not expressible as Tailwind utilities) */
#new-project-dialog::backdrop,
.project-new-dialog::backdrop {
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.25);
}

/* Configuration: state badges (Basecoat-aligned) */
.badge.state {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-weight-medium, 500);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius, 0.375rem);
  border: none;
}
.state-DRAFT .badge.state {
  background-color: var(--muted, #6c757d);
  color: var(--foreground, white);
}
.state-PRODUCTION_PLANNING .badge.state {
  background-color: #a8a52b;
  color: var(--foreground, white);
}
.state-ORDERED .badge.state {
  background-color: #007bff;
  color: var(--foreground, white);
}
.state-SOURCING .badge.state {
  background-color: #17a2b8;
  color: var(--foreground, white);
}
.state-RESTOCKING .badge.state {
  background-color: #ffc107;
  color: var(--color-gray-800, black);
}
.state-PREPARATION .badge.state {
  background-color: #fd7e14;
  color: var(--foreground, white);
}
.state-PREPARED .badge.state {
  background-color: #20c997;
  color: var(--foreground, white);
}
.state-CUSTOMER_INVOICING .badge.state {
  background-color: #6610f2;
  color: var(--foreground, white);
}
.state-GENERATE_AWB .badge.state {
  background-color: #6f42c1;
  color: var(--foreground, white);
}
.state-READY .badge.state {
  background-color: #28a745;
  color: var(--foreground, white);
}
.state-COMPLETE .badge.state {
  background-color: var(--color-gray-800, #343a40);
  color: var(--foreground, white);
}
.state-CANCELED .badge.state {
  background-color: var(--destructive, #dc3545);
  color: var(--foreground, white);
}
.state-REVIEW .badge.state {
  background-color: #ffc0cb;
  color: var(--color-gray-800, black);
}

/* Configuration: table header filter row */
#table-root table .thead-filters th {
  background-color: var(--muted, var(--background-elevated, #f8f9fa));
}

/* Jedison x-titleHidden: only the inner label is sr-hidden; drop empty legend chrome */
.jedi-ready fieldset > legend.jedi-editor-legend:has(.jedi-title[style*="clip: rect"]):not(
    :has(.jedi-collapse-toggle, .jedi-properties-toggle, button)
  ) {
  display: none;
}