/* Flow Canvas — skeleton styles for PR 0.2 + PR 0.3.
   Light-mode hex values match docs/design_handoff_extract_plan_2026_04_23/design-tokens.md.
   Dark-mode palette mirrors the Tailwind `dark:` utilities used throughout the app
   (gray-400/500/700/800/900, white) — tailwind.config.js leaves darkMode at the
   default `media` strategy, so these overrides activate via prefers-color-scheme.
   A shared tokens.css exposing these as CSS custom properties is a separate later PR. */

.fc-canvas-shell {
  display: flex;
  width: 100%;
  /* AppShell header (52) + fc-top-bar (52) + fc-inspector (280) */
  height: calc(100vh - 52px - 52px - 280px);
}

.fc-canvas {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: auto;
  background-color: #fafafa;
  background-image: radial-gradient(circle, #e4e4e7 1px, transparent 1px);
  background-size: 18px 18px;
}

.fc-issues-sidebar {
  width: 340px;
  flex: 0 0 340px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #e4e4e7;
  background: #ffffff;
  overflow: hidden;
}

.fc-issues-panel {
  flex: 1;
  overflow: auto;
  padding: 12px 14px;
}
.fc-issues__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.fc-issues__title-text {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.fc-issues__count-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 700;
}
.fc-issues__count-chip--error   { background: #fde8e8; color: #9b1c1c; }
.fc-issues__count-chip--warning { background: #fdf6b2; color: #723b13; }
.fc-issues__empty {
  padding: 12px 8px;
  font-size: 12px;
  color: #71717a;
}
.fc-issues__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fc-issues__item {
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  padding: 10px 12px;
  background: #ffffff;
}
.fc-issues__item--error   { border-left: 3px solid #e02424; }
.fc-issues__item--warning { border-left: 3px solid #c27803; }
.fc-issues__item-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.fc-issues__dot {
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: currentColor;
}
.fc-issues__item--error .fc-issues__dot   { color: #e02424; }
.fc-issues__item--warning .fc-issues__dot { color: #c27803; }
.fc-issues__item-title {
  font-size: 12.5px;
  font-weight: 500;
  color: #0f172a;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-issues__step {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: #a1a1aa;
}
.fc-issues__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 700;
  background: #f4f4f5;
  color: #3f3f46;
}
.fc-issues__component {
  font-size: 11.5px;
  color: #52525b;
  margin-bottom: 4px;
}
.fc-issues__msg {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: #71717a;
  margin-bottom: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.fc-issues__actions {
  display: flex;
  gap: 6px;
}

.fc-run-log {
  flex: 0 0 160px;
  height: 160px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e4e4e7;
  background: #1f2937;
  color: #cbd5e1;
}
.fc-run-log__header {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 6px 14px;
  border-bottom: 1px solid #334155;
  background: #1f2937;
}
.fc-run-log__body {
  flex: 1;
  overflow-y: auto;
  background: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  line-height: 1.7;
  padding: 8px 14px;
  color: #cbd5e1;
}
.fc-run-log__line {
  display: flex;
  gap: 8px;
}
.fc-run-log__time { color: #64748b; }
.fc-run-log__tag  { font-weight: 700; min-width: 44px; }
.fc-run-log__line--done  .fc-run-log__tag { color: #4ade80; }
.fc-run-log__line--warn  .fc-run-log__tag { color: #facc15; }
.fc-run-log__line--err   .fc-run-log__tag { color: #f87171; }
.fc-run-log__line--start .fc-run-log__tag { color: #60a5fa; }
.fc-run-log__line--run   .fc-run-log__tag { color: #60a5fa; }
.fc-run-log__msg  { color: #cbd5e1; }

.fc-transform-layer {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.fc-top-bar {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: #ffffff;
  border-bottom: 1px solid #e4e4e7;
}
.fc-top-bar__left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fc-top-bar__right { display: flex; align-items: center; gap: 8px; }

.fc-eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #71717a;
}
.fc-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-title__suffix {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 400;
  color: #52525b;
  margin-left: 4px;
}

.fc-segmented {
  display: inline-flex;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  overflow: hidden;
}
.fc-segmented__btn {
  padding: 4px 10px;
  font-size: 12px;
  color: #52525b;
  background: #ffffff;
  text-decoration: none;
}
.fc-segmented__btn.is-active {
  background: #e1effe;
  color: #1e40af;
}

.fc-btn {
  padding: 5px 9px;
  font-size: 12px;
  border: 1px solid #e4e4e7;
  border-radius: 5px;
  background: #ffffff;
  color: #52525b;
}
.fc-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.fc-btn--primary {
  background: #1a56db;
  color: #ffffff;
  border-color: #1a56db;
}
.fc-btn--danger { color: #9b1c1c; }
.fc-btn--danger:hover { background: #fde8e8; }

.fc-dropdown__button {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  font-size: 12px;
  border: 1px solid #e4e4e7;
  border-radius: 5px;
  background: #ffffff;
  color: #0f172a;
}
.fc-dropdown__menu { min-width: 160px; }
.fc-dropdown__item {
  display: block;
  padding: 6px 12px;
  color: #0f172a;
  text-decoration: none;
}
.fc-dropdown__item:hover { background: #f4f4f5; }
.fc-dropdown__item.is-active { background: #e1effe; color: #1e40af; }
.fc-dropdown__divider {
  height: 0;
  border-top: 1px solid #e4e4e7;
  margin: 6px 0;
}
.fc-dropdown__item--cta {
  font-weight: 600;
  color: #1a56db;
}
.fc-dropdown__item--cta:hover {
  background: #e1effe;
  color: #1e40af;
}

.fc-node-layer {
  position: absolute;
  inset: 0;
}

.fc-node {
  position: absolute;
  width: 188px;
  height: 90px;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
  font-size: 12.5px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fc-node--selected {
  border: 1.8px solid #1a56db;
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}
.fc-node--error {
  border: 1.8px solid #e02424;
}

.fc-node__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.fc-node__title {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.fc-node__meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: #71717a;
  flex-shrink: 0;
}
.fc-node__body {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.fc-node__error {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: #9b1c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Legacy class names kept for backward compatibility with any lingering markup. */
.fc-node-name { font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-node-meta { margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: #71717a; }

.fc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 600;
  flex-shrink: 0;
}
.fc-icon--22 { width: 22px; height: 22px; font-size: 10px; }
.fc-icon--30 { width: 30px; height: 30px; font-size: 12px; }
.fc-icon--36 { width: 36px; height: 36px; font-size: 14px; }
.fc-icon--48 { width: 48px; height: 48px; font-size: 18px; }

.fc-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.fc-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.9;
}
.fc-pill--ready   { background: #f4f4f5; color: #3f3f46; }
.fc-pill--queued  { background: #f4f4f5; color: #3f3f46; }
.fc-pill--running { background: #e1effe; color: #1e40af; }
.fc-pill--success { background: #def7ec; color: #03543f; }
.fc-pill--warning { background: #fdf6b2; color: #723b13; }
.fc-pill--error   { background: #fde8e8; color: #9b1c1c; }
.fc-pill--skipped { background: #fafafa; color: #71717a; }
.fc-pill--empty   { background: #fafafa; color: #a1a1aa; border: 1px solid #f4f4f5; }
.fc-pill__count   { font-weight: 700; }
.fc-pill__label   { opacity: 0.9; }

.fc-status-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@keyframes fc-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.fc-pill--running .fc-pill__dot {
  animation: fc-blink 1.2s ease-in-out infinite;
}

.fc-progress-bar {
  height: 4px;
  background: #f4f4f5;
  width: 100%;
}
.fc-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #1a56db, #60a5fa);
  width: 0%;
  transition: width 200ms ease;
}

.fc-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
}
.fc-chip--rows {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #71717a;
}

.fc-edge-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.fc-edge {
  fill: none;
  stroke: #d4d4d8;          /* color.lineStrong */
  stroke-width: 1.5;
  transition: stroke 120ms ease, opacity 120ms ease;
}
.fc-edge--error  { stroke: #9b1c1c; }
.fc-edge--active {
  stroke: #1a56db;
  stroke-width: 2;
  marker-end: url(#fc-arrow-active);
}
.fc-edge--active.fc-edge--error {
  stroke: #9b1c1c;
  marker-end: url(#fc-arrow-error);
}
.fc-edge--dim { opacity: 0.35; }

/* --- PR 3.3: running-node pulse + edge particle -------------------------- */
:root, .fc-canvas { --fc-pulse-rgb: 26, 86, 219; }

@keyframes fc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--fc-pulse-rgb), 0.5); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(var(--fc-pulse-rgb), 0); opacity: 0.6; }
}
.fc-node--running {
  animation: fc-pulse 1.6s ease-in-out infinite;
}
.fc-edge-particle {
  fill: rgba(var(--fc-pulse-rgb), 1);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .fc-node--running,
  .fc-pill--running .fc-pill__dot,
  .fc-edge-particle {
    animation: none !important;
  }
  .fc-node--running {
    outline: 2px solid rgba(var(--fc-pulse-rgb), 0.85);
    outline-offset: 4px;
    opacity: 1;
    box-shadow: none;
  }
}

.fc-node__add-link {
  position: absolute;
  top: 50%;
  right: -9px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 1px solid #d4d4d8;
  background: #ffffff;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  border-left: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #71717a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
  z-index: 2;
}
.fc-node:hover .fc-node__add-link,
.fc-node__add-link:focus-visible {
  opacity: 1;
}
.fc-node__add-link:hover {
  background: #1a56db;
  color: #ffffff;
  border-color: #1a56db;
}
.fc-node__add-link-plus {
  margin-left: 2px; /* optical centering toward the rounded right edge */
}

.fc-edge--selected {
  stroke: #1a56db;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 2px rgba(26, 86, 219, 0.35));
}

.fc-edge-hit {
  cursor: pointer;
}

.fc-edge-actions {
  position: absolute;
  transform: translate(-50%, -100%) translateY(-10px);
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #3f3f46;
  z-index: 50;
  animation: fc-edge-actions-pop 90ms ease-out;
}
.fc-edge-actions[data-flow-edge-visible="false"] { display: none; }
.fc-edge-actions__pair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fc-edge-actions__src,
.fc-edge-actions__dst { font-weight: 600; color: #0f172a; }
.fc-edge-actions__arrow { color: #71717a; }
.fc-edge-actions__form { margin: 0; }
.fc-btn--sm { padding: 3px 8px; font-size: 11px; }

@keyframes fc-edge-actions-pop {
  from { opacity: 0; transform: translate(-50%, -100%) translateY(-4px); }
  to   { opacity: 1; transform: translate(-50%, -100%) translateY(-10px); }
}

.fc-link-picker-modal        { width: 560px; }
.fc-link-picker__item        { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; }
.fc-link-picker__item.is-selected { background: #eff6ff; border-left: 3px solid #1a56db; }
.fc-link-picker__field       { margin: 12px 20px; }
.fc-link-picker__flash       { padding: 10px 14px; margin: 12px 20px 0; background: #fde8e8; color: #9b1c1c; border-radius: 4px; font-size: 12px; }

.fc-edge-label {
  fill: #71717a;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  pointer-events: none;
  user-select: none;
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 3;
  stroke-linejoin: round;
  transition: fill 120ms ease, opacity 120ms ease;
}
.fc-edge-label--error  { fill: #9b1c1c; }
.fc-edge-label--active { fill: #1a56db; font-weight: 600; }
.fc-edge-label--active.fc-edge-label--error { fill: #9b1c1c; }
.fc-edge-label--dim    { opacity: 0.35; }

/* Floating top-center toolbar + top-left zoom + bottom inspector dock */

.fc-toolbar {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  z-index: 3;
}
.fc-toolbar__btn {
  padding: 5px 9px;
  font-size: 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #52525b;
  cursor: pointer;
}
.fc-toolbar__btn:hover       { background: #f4f4f5; }
.fc-toolbar__btn.is-active   { background: #e1effe; color: #1e40af; }
.fc-toolbar__btn[disabled]   { opacity: 0.5; cursor: not-allowed; }
.fc-toolbar__btn[disabled]:hover { background: transparent; }
.fc-toolbar__divider {
  width: 1px;
  align-self: stretch;
  background: #e4e4e7;
  margin: 2px 4px;
}

.fc-zoom-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 28px;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  z-index: 3;
}
.fc-zoom-pill__btn {
  height: 28px;
  border: 0;
  background: transparent;
  color: #52525b;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.fc-zoom-pill__btn:hover { background: #f4f4f5; }
.fc-zoom-pill__label {
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: #71717a;
  padding: 2px 0;
  border-top: 1px solid #e4e4e7;
  border-bottom: 1px solid #e4e4e7;
  user-select: none;
}
.fc-fit-btn {
  position: absolute;
  top: 116px;
  left: 16px;
  width: 28px;
  height: 28px;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  background: #ffffff;
  color: #52525b;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  z-index: 3;
}
.fc-fit-btn:hover { background: #f4f4f5; }

/* Inspector dock (280px, bottom-fixed) */

.fc-inspector {
  /* Sibling of .fc-canvas inside <main>; its 280px pairs with the canvas's
     calc(100vh - 52px - 52px - 280px) so both fill the viewport without
     overlap or scroll. */
  position: relative;
  height: 280px;
  display: flex;
  background: #ffffff;
  border-top: 1px solid #e4e4e7;
  z-index: 2;
}
.fc-inspector__summary {
  width: 300px;
  border-right: 1px solid #e4e4e7;
  padding: 14px 16px;
  overflow: auto;
  box-sizing: border-box;
}
.fc-inspector__preview {
  flex: 1;
  padding: 14px 16px;
  overflow: auto;
  box-sizing: border-box;
}
.fc-inspector__head { display: flex; gap: 10px; align-items: center; }
.fc-inspector__title { min-width: 0; }
.fc-inspector__name { font-size: 13px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-inspector__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #71717a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-inspector__chips { display: flex; gap: 6px; margin: 10px 0 8px; flex-wrap: wrap; }
.fc-inspector__settings-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #71717a;
  margin-top: 8px;
}
.fc-inspector__settings {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #0f172a;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  padding: 6px 8px;
  margin: 4px 0 10px;
  max-height: 100px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.fc-inspector__actions { display: flex; gap: 6px; align-items: center; }
.fc-inspector__actions form { margin: 0; }
.fc-inspector__empty,
.fc-inspector__preview-empty {
  color: #71717a;
  font-size: 12px;
}

/* Compact density — applied to .fc-canvas via density_toggle_controller */

.fc-canvas--compact .fc-node {
  height: 60px;
  padding: 8px 10px;
}
.fc-canvas--compact .fc-node__body,
.fc-canvas--compact .fc-node__error {
  display: none;
}

.fc-minimap {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  pointer-events: none;
  z-index: 2;
}
.fc-minimap svg { display: block; }
.fc-minimap__node     { opacity: 0.85; }
.fc-minimap__node--selected { fill: #1a56db; opacity: 1; }
.fc-minimap__viewport {
  fill: none;
  stroke: #1a56db;
  stroke-width: 1.5;
}

/* Settings drawer — 440px right-side panel opened via <turbo-frame id="action_drawer"> */

.fc-drawer-frame {
  position: fixed;
  top: 52px;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
}
.fc-drawer-frame:not(:empty) { pointer-events: auto; }

.fc-drawer {
  width: 440px;
  height: 100%;
  background: #ffffff;
  border-left: 1px solid #e4e4e7;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

.fc-drawer__header {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-column-gap: 10px;
  align-items: center;
  border-bottom: 1px solid #e4e4e7;
}
.fc-drawer__head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fc-drawer__eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #71717a;
}
.fc-drawer__name {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-drawer__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #71717a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-drawer__close {
  background: none;
  border: 0;
  font-size: 20px;
  color: #71717a;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.fc-drawer__chips {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.fc-drawer__tabs {
  padding: 0 18px;
  border-bottom: 1px solid #e4e4e7;
}
.fc-drawer__tablist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 4px;
}
.fc-drawer__tab {
  background: none;
  border: 0;
  cursor: pointer;
}

.fc-drawer__panes { flex: 1; overflow: auto; }
.fc-drawer__pane { padding: 14px 18px; }
.fc-drawer__pane[hidden] { display: none; }

/* Neutralize the standardized outer wrappers every component's existing
   _form.html.erb uses (<section bg-gray-50> > centered div > shadowed
   card). Inside the drawer we want the form to sit flush in the pane
   without its own background, shadow, or max-width. */
.fc-drawer__pane > section,
.fc-drawer__pane > section > div,
.fc-drawer__pane > section > div > div {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  display: block !important;
}
.fc-drawer__pane form { width: 100%; }

/* Hide the form's built-in submit (`<%= form.submit %>`) — the drawer
   footer's Save/Save+rerun buttons drive submission programmatically. */
.fc-drawer__pane form input[type="submit"],
.fc-drawer__pane form button[type="submit"] {
  display: none !important;
}

/* Schema tab — read-only port listing per component version */

.fc-drawer__schema {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.fc-drawer__schema-description {
  font-size: 12px;
  color: #52525b;
  margin: 0 0 4px;
}
.fc-drawer__schema-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fc-drawer__schema-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #71717a;
  margin: 0;
}
.fc-drawer__schema-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  overflow: hidden;
}
.fc-drawer__schema-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 7px 12px;
  background: #ffffff;
}
.fc-drawer__schema-row + .fc-drawer__schema-row {
  border-top: 1px solid #e4e4e7;
}
.fc-drawer__schema-row:nth-child(even) {
  background: #fafafa;
}
.fc-drawer__schema-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  min-width: 140px;
}
.fc-drawer__schema-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: #71717a;
}
.fc-drawer__schema-empty {
  font-size: 11.5px;
  color: #a1a1aa;
  margin: 0;
}

.fc-drawer__form { display: flex; flex-direction: column; }
.fc-drawer__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.fc-drawer__label-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.fc-drawer__label {
  font-size: 12.5px;
  font-weight: 500;
  color: #0f172a;
}
.fc-drawer__field-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: #a1a1aa;
}
.fc-drawer__input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  font-size: 12.5px;
  color: #0f172a;
  background: #ffffff;
  box-sizing: border-box;
}
.fc-drawer__input--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.fc-drawer__help {
  font-size: 11px;
  color: #71717a;
  margin: 0;
}
.fc-drawer__empty,
.fc-drawer__stub {
  font-size: 12px;
  color: #71717a;
}

.fc-drawer__footer {
  padding: 10px 18px;
  background: #fafafa;
  border-top: 1px solid #e4e4e7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fc-drawer__dirty-label { font-size: 11px; color: #71717a; }
.fc-drawer__footer-actions { display: flex; gap: 6px; }

/* Component picker modal — opened from toolbar "+ Add action" or ⌘K. */

.fc-picker-frame {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.fc-picker-frame:empty { display: none; }
.fc-picker-frame:not(:empty) { pointer-events: auto; }

.fc-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 27, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.fc-picker-modal {
  width: 820px;
  max-width: 100%;
  max-height: 640px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.fc-picker__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #e4e4e7;
}
.fc-picker__plus {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #e1effe;
  color: #1a56db;
  font-size: 16px;
  font-weight: 700;
}
.fc-picker__title { font-size: 14px; font-weight: 600; color: #0f172a; }
.fc-picker__subtitle { font-size: 12px; color: #52525b; margin-top: 2px; }
.fc-picker__close {
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  color: #71717a;
  cursor: pointer;
  padding: 0 4px;
}

.fc-picker__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid #e4e4e7;
}
.fc-picker__search-input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  background: #fafafa;
  font-size: 13px;
  color: #0f172a;
}
.fc-picker__kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #71717a;
  padding: 2px 6px;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  background: #fafafa;
}

.fc-picker__body { display: flex; flex: 1; min-height: 0; }
.fc-picker__list { flex: 1; overflow: auto; padding: 4px 0; }
.fc-picker__group-header {
  padding: 8px 20px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #71717a;
}
.fc-picker__item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 20px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.fc-picker__item[hidden] { display: none; }
.fc-picker__item:hover { background: #f4f4f5; }
.fc-picker__item.is-selected {
  background: #e1effe;
  border-left-color: #1a56db;
}
.fc-picker__item-name { font-size: 12.5px; font-weight: 500; color: #0f172a; }
.fc-picker__item-desc {
  font-size: 11px;
  color: #71717a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-picker__item-version {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #71717a;
}
.fc-picker__empty {
  font-size: 12px;
  color: #71717a;
  padding: 16px 20px;
}

.fc-picker__detail {
  width: 300px;
  padding: 16px 18px;
  background: #fafafa;
  border-left: 1px solid #e4e4e7;
  overflow: auto;
}
.fc-picker-detail__name { font-size: 15px; font-weight: 600; color: #0f172a; margin-top: 10px; }
.fc-picker-detail__version {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: #71717a; margin-top: 2px;
}
.fc-picker-detail__description { font-size: 12px; color: #52525b; margin: 8px 0 14px; }
.fc-picker-detail__attach-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #71717a;
  margin-bottom: 6px;
}
.fc-picker-detail__attach-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  font-size: 12.5px;
  color: #0f172a;
  background: #ffffff;
}
.fc-picker-detail__attach-help { font-size: 11px; color: #71717a; margin: 6px 0 0; }
.fc-picker-detail__empty { font-size: 12px; color: #71717a; margin: 16px 0 0; }

.fc-picker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid #e4e4e7;
  background: #fafafa;
}
.fc-picker__hint {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #71717a;
}
.fc-picker__footer-actions { display: flex; gap: 8px; }

/* Source-file chip + upload modal — top bar control opened via
   turbo-frame#source_file_frame sibling to the canvas. */

.fc-modal-frame {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}
.fc-modal-frame:empty { display: none; }
.fc-modal-frame:not(:empty) { pointer-events: auto; }

.fc-source-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  background: #ffffff;
  color: #52525b;
  text-decoration: none;
  font-size: 12px;
  max-width: 280px;
}
.fc-source-file:hover       { background: #f4f4f5; }
.fc-source-file--empty      { color: #71717a; }
.fc-source-file__icon       { font-size: 14px; line-height: 1; }
.fc-source-file__name {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-source-file__status {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
}
.fc-source-file__status--uploading  { background: #fdf6b2; color: #723b13; }
.fc-source-file__status--pending    { background: #f4f4f5; color: #3f3f46; }
.fc-source-file__status--processing { background: #e1effe; color: #1e40af; }
.fc-source-file__status--complete   { background: #def7ec; color: #03543f; }
.fc-source-file__status--skipped    { background: #fafafa; color: #71717a; }
.fc-source-file__status--stopped    { background: #fafafa; color: #71717a; }
.fc-source-file__status--failed     { background: #fde8e8; color: #9b1c1c; }

/* PR 4.5 — Top-bar pill that opens the status-change modal. The clickable
   <a> form sits in the same row as the version-picker / source-file chip;
   the read-only <span> form (.is-readonly) drops the cursor + hover state. */
.fc-status-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: capitalize;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}
.fc-status-pill:hover { filter: brightness(0.96); }
.fc-status-pill.is-readonly { cursor: default; }
.fc-status-pill.is-readonly:hover { filter: none; }
.fc-status-pill--development { background: #f4f4f5; color: #3f3f46; }
.fc-status-pill--testing     { background: #fdf6b2; color: #723b13; }
.fc-status-pill--production  { background: #def7ec; color: #03543f; }
.fc-status-pill--inactive    { background: #fafafa; color: #71717a; }
.fc-status-pill--deleted     { background: #fde8e8; color: #9b1c1c; }

.fc-status-change-modal { width: 480px; }

.fc-source-file-modal { width: 560px; }
.fc-source-file__body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.fc-source-file__current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.fc-source-file__current-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #71717a;
  margin-bottom: 2px;
}
.fc-source-file__current-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #0f172a;
  word-break: break-all;
}
.fc-source-file__divider {
  border: 0;
  border-top: 1px solid #e4e4e7;
  margin: 8px 0;
}
.fc-source-file__field  { display: flex; flex-direction: column; gap: 6px; }
.fc-source-file__file-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  font-size: 12.5px;
  background: #ffffff;
  color: #0f172a;
}
.fc-source-file__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.fc-source-file__flash {
  margin: 12px 20px 0;
  padding: 10px 14px;
  background: #fde8e8;
  color: #9b1c1c;
  border-radius: 4px;
  font-size: 12px;
}

/* "New version…" modal (PR 4.4). Reuses .fc-picker-modal chrome; these rules
   are scoped to the radio-style mode picker that's unique to this modal. */
.fc-new-version-modal__mode {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  margin-bottom: 6px;
}
.fc-new-version-modal__mode:hover {
  background: #f4f4f5;
}
.fc-new-version-modal__mode.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fc-new-version-modal__mode input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
}
.fc-new-version-modal__mode > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fc-new-version-modal__mode-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
}
.fc-new-version-modal__mode-desc {
  font-size: 11.5px;
  color: #6b7280;
}

/* ---------------------------------------------------------------------------
   Dark mode — mirrors Tailwind `dark:` utilities already used across views.
   Gray scale: 400 #9ca3af, 500 #6b7280, 600 #4b5563, 700 #374151,
               800 #1f2937, 900 #111827. Primary subtle dark bg: blue-900/30.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root, .fc-canvas { --fc-pulse-rgb: 96, 165, 250; }

  .fc-canvas {
    background-color: #111827;
    background-image: radial-gradient(circle, #374151 1px, transparent 1px);
  }

  .fc-top-bar {
    background: #1f2937;
    border-bottom-color: #374151;
  }

  .fc-eyebrow       { color: #9ca3af; }
  .fc-title         { color: #ffffff; }
  .fc-title__suffix { color: #9ca3af; }

  .fc-segmented              { border-color: #374151; }
  .fc-segmented__btn         { background: #1f2937; color: #9ca3af; }
  .fc-segmented__btn.is-active {
    background: rgba(30, 64, 175, 0.35);
    color: #93c5fd;
  }

  .fc-btn {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
  }
  .fc-btn--primary {
    background: #1e40af;
    border-color: #1e40af;
    color: #ffffff;
  }
  .fc-btn--danger { color: #fca5a5; }
  .fc-btn--danger:hover { background: rgba(224, 36, 36, 0.2); }

  .fc-dropdown__button {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
  }
  .fc-dropdown__menu         { background: #1f2937; }
  .fc-dropdown__item         { color: #e5e7eb; }
  .fc-dropdown__item:hover   { background: #374151; }
  .fc-dropdown__item.is-active {
    background: rgba(30, 64, 175, 0.35);
    color: #93c5fd;
  }
  .fc-dropdown__divider      { border-top-color: #4b5563; }
  .fc-dropdown__item--cta    { color: #93c5fd; }
  .fc-dropdown__item--cta:hover {
    background: rgba(30, 64, 175, 0.35);
    color: #bfdbfe;
  }

  .fc-node {
    background: #1f2937;
    border-color: #4b5563;
  }
  .fc-node--selected {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
  }
  .fc-node--error {
    border-color: #f87171;
  }
  .fc-node-name,
  .fc-node__title { color: #ffffff; }
  .fc-node-meta,
  .fc-node__meta  { color: #9ca3af; }
  .fc-node__error { color: #fca5a5; }

  .fc-chip--rows  { color: #9ca3af; }

  .fc-pill--ready,
  .fc-pill--queued  { background: #374151; color: #d1d5db; }
  .fc-pill--running { background: rgba(30, 64, 175, 0.35); color: #93c5fd; }
  .fc-pill--success { background: rgba(14, 159, 110, 0.2); color: #6ee7b7; }
  .fc-pill--warning { background: rgba(194, 120, 3, 0.2); color: #fcd34d; }
  .fc-pill--error   { background: rgba(224, 36, 36, 0.2); color: #fca5a5; }
  .fc-pill--skipped { background: #1f2937; color: #9ca3af; }
  .fc-pill--empty   { background: #1f2937; color: #71717a; border-color: #374151; }

  .fc-progress-bar  { background: #374151; }

  .fc-edge         { stroke: #4b5563; }
  .fc-edge--error  { stroke: #f87171; }
  .fc-edge--active {
    stroke: #60a5fa;
    marker-end: url(#fc-arrow-active-dark);
  }
  .fc-edge--active.fc-edge--error {
    stroke: #f87171;
    marker-end: url(#fc-arrow-error);
  }
  .fc-edge-label {
    fill: #9ca3af;
    stroke: rgba(17, 24, 39, 0.92);
  }
  .fc-edge--selected {
    stroke: #60a5fa;
    filter: drop-shadow(0 0 2px rgba(96, 165, 250, 0.45));
  }
  .fc-node__add-link {
    background: #1f2937;
    border-color: #4b5563;
    color: #9ca3af;
  }
  .fc-node__add-link:hover {
    background: #60a5fa;
    border-color: #60a5fa;
    color: #111827;
  }
  .fc-edge-actions {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
  }
  .fc-edge-actions__src,
  .fc-edge-actions__dst { color: #f9fafb; }
  .fc-edge-actions__arrow { color: #9ca3af; }
  .fc-link-picker__item.is-selected {
    background: rgba(30, 64, 175, 0.25);
    border-left-color: #60a5fa;
  }
  .fc-link-picker__flash {
    background: rgba(224, 36, 36, 0.25);
    color: #fca5a5;
  }
  .fc-edge-label--error                        { fill: #f87171; }
  .fc-edge-label--active                       { fill: #60a5fa; }
  .fc-edge-label--active.fc-edge-label--error  { fill: #f87171; }

  .fc-minimap {
    background: rgba(31, 41, 55, 0.9);
    border-color: #4b5563;
  }
  .fc-minimap__viewport        { stroke: #60a5fa; }
  .fc-minimap__node--selected  { fill: #60a5fa; }

  .fc-toolbar {
    background: #1f2937;
    border-color: #4b5563;
  }
  .fc-toolbar__btn             { color: #9ca3af; }
  .fc-toolbar__btn:hover       { background: #374151; }
  .fc-toolbar__btn.is-active   { background: rgba(30, 64, 175, 0.35); color: #93c5fd; }
  .fc-toolbar__btn[disabled]:hover { background: transparent; }
  .fc-toolbar__divider         { background: #4b5563; }

  .fc-zoom-pill {
    background: #1f2937;
    border-color: #4b5563;
  }
  .fc-zoom-pill__btn           { color: #9ca3af; }
  .fc-zoom-pill__btn:hover     { background: #374151; }
  .fc-zoom-pill__label {
    color: #9ca3af;
    border-top-color: #4b5563;
    border-bottom-color: #4b5563;
  }
  .fc-fit-btn {
    background: #1f2937;
    border-color: #4b5563;
    color: #9ca3af;
  }
  .fc-fit-btn:hover            { background: #374151; }

  .fc-inspector {
    background: #1f2937;
    border-top-color: #4b5563;
  }
  .fc-inspector__summary       { border-right-color: #4b5563; }
  .fc-inspector__name          { color: #ffffff; }
  .fc-inspector__id,
  .fc-inspector__settings-label,
  .fc-inspector__empty,
  .fc-inspector__preview-empty { color: #9ca3af; }
  .fc-inspector__settings {
    color: #e5e7eb;
    background: #111827;
    border-color: #4b5563;
  }

  .fc-drawer {
    background: #1f2937;
    border-left-color: #4b5563;
  }
  .fc-drawer__header     { border-bottom-color: #4b5563; }
  .fc-drawer__name       { color: #ffffff; }
  .fc-drawer__eyebrow,
  .fc-drawer__id,
  .fc-drawer__close,
  .fc-drawer__help,
  .fc-drawer__field-key,
  .fc-drawer__empty,
  .fc-drawer__stub,
  .fc-drawer__dirty-label { color: #9ca3af; }
  .fc-drawer__tabs       { border-bottom-color: #4b5563; }
  .fc-drawer__label      { color: #e5e7eb; }
  .fc-drawer__input {
    background: #111827;
    border-color: #4b5563;
    color: #e5e7eb;
  }
  .fc-drawer__footer {
    background: #111827;
    border-top-color: #4b5563;
  }

  .fc-drawer__schema-description,
  .fc-drawer__schema-title,
  .fc-drawer__schema-meta,
  .fc-drawer__schema-empty { color: #9ca3af; }
  .fc-drawer__schema-rows  { border-color: #4b5563; }
  .fc-drawer__schema-row   { background: #1f2937; }
  .fc-drawer__schema-row:nth-child(even) { background: #111827; }
  .fc-drawer__schema-row + .fc-drawer__schema-row { border-top-color: #4b5563; }
  .fc-drawer__schema-name  { color: #e5e7eb; }

  .fc-picker-modal {
    background: #1f2937;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }
  .fc-picker__header,
  .fc-picker__search,
  .fc-picker__footer,
  .fc-picker__detail        { border-color: #4b5563; }
  .fc-picker__footer,
  .fc-picker__detail        { background: #111827; }
  .fc-picker__title         { color: #ffffff; }
  .fc-picker__subtitle,
  .fc-picker__group-header,
  .fc-picker__item-desc,
  .fc-picker__item-version,
  .fc-picker__empty,
  .fc-picker__hint,
  .fc-picker__close,
  .fc-picker__kbd           { color: #9ca3af; }
  .fc-picker__kbd           { background: #1f2937; border-color: #4b5563; }
  .fc-picker__search-input {
    background: #111827;
    border-color: #4b5563;
    color: #e5e7eb;
  }
  .fc-picker__plus          { background: rgba(30, 64, 175, 0.35); color: #93c5fd; }
  .fc-picker__item-name     { color: #e5e7eb; }
  .fc-picker__item:hover    { background: #374151; }
  .fc-picker__item.is-selected {
    background: rgba(30, 64, 175, 0.35);
    border-left-color: #60a5fa;
  }

  .fc-picker-detail__name   { color: #ffffff; }
  .fc-picker-detail__version,
  .fc-picker-detail__description,
  .fc-picker-detail__attach-label,
  .fc-picker-detail__attach-help,
  .fc-picker-detail__empty  { color: #9ca3af; }
  .fc-picker-detail__attach-select {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
  }

  .fc-source-file {
    background: #1f2937;
    border-color: #4b5563;
    color: #9ca3af;
  }
  .fc-source-file:hover  { background: #374151; }
  .fc-source-file--empty { color: #9ca3af; }

  .fc-source-file__status--uploading  { background: rgba(194, 120, 3, 0.2);   color: #fcd34d; }
  .fc-source-file__status--pending    { background: #374151;                  color: #d1d5db; }
  .fc-source-file__status--processing { background: rgba(30, 64, 175, 0.35);  color: #93c5fd; }
  .fc-source-file__status--complete   { background: rgba(14, 159, 110, 0.2);  color: #6ee7b7; }
  .fc-source-file__status--skipped,
  .fc-source-file__status--stopped    { background: #1f2937;                  color: #9ca3af; }
  .fc-source-file__status--failed     { background: rgba(224, 36, 36, 0.2);   color: #fca5a5; }

  .fc-source-file__current-name,
  .fc-source-file__file-input         { color: #e5e7eb; }
  .fc-source-file__current-label      { color: #9ca3af; }
  .fc-source-file__file-input         { background: #111827; border-color: #4b5563; }
  .fc-source-file__divider            { border-top-color: #4b5563; }
  .fc-source-file__flash              { background: rgba(224, 36, 36, 0.2); color: #fca5a5; }

  .fc-new-version-modal__mode {
    background: #111827;
    border-color: #4b5563;
  }
  .fc-new-version-modal__mode:hover  { background: #1f2937; }
  .fc-new-version-modal__mode-title  { color: #f9fafb; }
  .fc-new-version-modal__mode-desc   { color: #9ca3af; }

  .fc-status-pill--development { background: #374151;                 color: #d1d5db; }
  .fc-status-pill--testing     { background: rgba(194, 120, 3, 0.2);  color: #fcd34d; }
  .fc-status-pill--production  { background: rgba(14, 159, 110, 0.2); color: #6ee7b7; }
  .fc-status-pill--inactive    { background: #1f2937;                 color: #9ca3af; }
  .fc-status-pill--deleted     { background: rgba(224, 36, 36, 0.2);  color: #fca5a5; }

  .fc-issues-sidebar               { background: #1f2937; border-left-color: #374151; }
  .fc-issues__title-text           { color: #f9fafb; }
  .fc-issues__count-chip--error    { background: rgba(224, 36, 36, 0.25); color: #fca5a5; }
  .fc-issues__count-chip--warning  { background: rgba(194, 120, 3, 0.25); color: #fcd34d; }
  .fc-issues__empty                { color: #9ca3af; }
  .fc-issues__item                 { background: #111827; border-color: #374151; }
  .fc-issues__item-title           { color: #f9fafb; }
  .fc-issues__component            { color: #9ca3af; }
  .fc-issues__step                 { color: #6b7280; }
  .fc-issues__chip                 { background: #374151; color: #d1d5db; }
  .fc-issues__msg                  { color: #9ca3af; }
  .fc-run-log                      { border-top-color: #374151; }
}