/* ==========================================================================
   BOM Workbench - Modern Engineering Design System & Workbench Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Tokens / Variables
   -------------------------------------------------------------------------- */

:root,
[data-theme="light"] {
  --bg-app: #f4f6f9;
  --bg-header: #ffffff;
  --bg-pane: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: #f1f5f9;
  --bg-active: #e2e8f0;
  --bg-selected: #e0f2fe;
  --bg-selected-border: #0284c7;

  --border-color: #e2e8f0;
  --border-subtle: #cbd5e1;
  --border-focus: #2563eb;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  --brand-primary: #2563eb;
  --brand-primary-hover: #1d4ed8;
  --brand-accent: #0284c7;

  --color-success: #16a34a;
  --color-success-bg: #f0fdf4;
  --color-success-border: #bbf7d0;

  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;

  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fecaca;

  --color-info: #0284c7;
  --color-info-bg: #f0f9ff;
  --color-info-border: #bae6fd;

  --color-modified: #ea580c;
  --color-modified-bg: #fff7ed;

  /* Diff Semantic Tokens */
  --diff-added: #16a34a;
  --diff-added-bg: #f0fdf4;
  --diff-added-border: #86efac;
  --diff-removed: #dc2626;
  --diff-removed-bg: #fef2f2;
  --diff-removed-border: #fca5a5;
  --diff-changed: #d97706;
  --diff-changed-bg: #fffbeb;
  --diff-changed-border: #fcd34d;
  --diff-unchanged: #64748b;
  --diff-unchanged-bg: #f1f5f9;
  --diff-unchanged-border: #cbd5e1;

  /* Relationship Semantic Tokens */
  --rel-declared: #64748b;
  --rel-declared-bg: #f1f5f9;
  --rel-declared-border: #cbd5e1;
  --rel-referenced: #0891b2;
  --rel-referenced-bg: #ecfeff;
  --rel-referenced-border: #a5f3fc;
  --rel-resolved: #16a34a;
  --rel-resolved-bg: #f0fdf4;
  --rel-resolved-border: #86efac;
  --rel-source: #2563eb;
  --rel-source-bg: #eff6ff;
  --rel-source-border: #bfdbfe;
  --rel-unresolved: #d97706;
  --rel-unresolved-bg: #fffbeb;
  --rel-unresolved-border: #fde68a;

  /* SVG Graph Colors */
  --graph-node-bg: #ffffff;
  --graph-node-stroke: #cbd5e1;
  --graph-edge-stroke: #94a3b8;
  --graph-node-title: #0f172a;
  --graph-node-sub: #64748b;

  --graph-upstream: #d97706;
  --graph-downstream: #0284c7;

  /* Source Model Graph Colors */
  --source-file-node: #0284c7;
  --source-file-node-bg: #f0f9ff;
  --source-pkg-node: #7c3aed;
  --source-pkg-node-bg: #f5f3ff;
  --source-unresolved-node: #d97706;
  --source-unresolved-node-bg: #fffbeb;

  /* Raw JSON Tokens */
  --json-key: #0369a1;
  --json-string: #15803d;
  --json-number: #b45309;
  --json-boolean: #7e22ce;
  --json-null: #b91c1c;

  /* Typography & Layout Tokens */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-modal: 0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.2);

  --header-height: 54px;
  --statusbar-height: 32px;
  --nav-width: 230px;
  --inspector-width: 380px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 9999px;
}

[data-theme="dark"] {
  --bg-app: #090d16;
  --bg-header: #0f172a;
  --bg-pane: #0f172a;
  --bg-subtle: #1e293b;
  --bg-card: #131d31;
  --bg-input: #1e293b;
  --bg-hover: #1e293b;
  --bg-active: #334155;
  --bg-selected: #1e3a5f;
  --bg-selected-border: #38bdf8;

  --border-color: #27354a;
  --border-subtle: #334155;
  --border-focus: #3b82f6;

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-inverse: #0f172a;

  --brand-primary: #3b82f6;
  --brand-primary-hover: #60a5fa;
  --brand-accent: #38bdf8;

  --color-success: #22c55e;
  --color-success-bg: #052e16;
  --color-success-border: #166534;

  --color-warning: #f59e0b;
  --color-warning-bg: #451a03;
  --color-warning-border: #92400e;

  --color-danger: #ef4444;
  --color-danger-bg: #450a0a;
  --color-danger-border: #991b1b;

  --color-info: #38bdf8;
  --color-info-bg: #082f49;
  --color-info-border: #075985;

  --color-modified: #f97316;
  --color-modified-bg: #431407;

  /* Diff Semantic Tokens (Dark) */
  --diff-added: #4ade80;
  --diff-added-bg: #052e16;
  --diff-added-border: #166534;
  --diff-removed: #f87171;
  --diff-removed-bg: #450a0a;
  --diff-removed-border: #991b1b;
  --diff-changed: #fbbf24;
  --diff-changed-bg: #451a03;
  --diff-changed-border: #92400e;
  --diff-unchanged: #94a3b8;
  --diff-unchanged-bg: #1e293b;
  --diff-unchanged-border: #334155;

  /* Relationship Semantic Tokens (Dark) */
  --rel-declared: #94a3b8;
  --rel-declared-bg: #1e293b;
  --rel-declared-border: #475569;
  --rel-referenced: #22d3ee;
  --rel-referenced-bg: #083344;
  --rel-referenced-border: #155e75;
  --rel-resolved: #4ade80;
  --rel-resolved-bg: #052e16;
  --rel-resolved-border: #166534;
  --rel-source: #60a5fa;
  --rel-source-bg: #172554;
  --rel-source-border: #1e40af;
  --rel-unresolved: #fbbf24;
  --rel-unresolved-bg: #451a03;
  --rel-unresolved-border: #92400e;

  /* SVG Graph Colors (Dark) */
  --graph-node-bg: #131d31;
  --graph-node-stroke: #334155;
  --graph-edge-stroke: #64748b;
  --graph-node-title: #f8fafc;
  --graph-node-sub: #94a3b8;

  --graph-upstream: #fbbf24;
  --graph-downstream: #38bdf8;

  /* Source Model Graph Colors (Dark) */
  --source-file-node: #38bdf8;
  --source-file-node-bg: #082f49;
  --source-pkg-node: #a855f7;
  --source-pkg-node-bg: #2e1065;
  --source-unresolved-node: #fbbf24;
  --source-unresolved-node-bg: #451a03;

  /* Raw JSON Tokens (Dark) */
  --json-key: #38bdf8;
  --json-string: #4ade80;
  --json-number: #fbbf24;
  --json-boolean: #c084fc;
  --json-null: #f87171;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.6);
}

/* --------------------------------------------------------------------------
   Base Reset & Layout
   -------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: var(--text-primary);
}

select {
  background-color: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

select option {
  background-color: var(--bg-card);
  color: var(--text-primary);
}

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Header Bar & Theme Switcher
   -------------------------------------------------------------------------- */

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 16px;
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  z-index: 10;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

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

.brand-logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  user-select: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #2563eb, #0284c7);
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  user-select: none;
  box-shadow: var(--shadow-sm);
}

.brand-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-tag {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.header-center {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.active-file-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-file-indicator.modified {
  border-color: var(--color-modified);
  background-color: var(--color-modified-bg);
  color: var(--color-modified);
  font-weight: 600;
}

.file-icon {
  font-size: 14px;
}

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

/* Dedicated Switchable Theme Segmented Control */
.theme-switch-container {
  display: flex;
  align-items: center;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 2px;
  user-select: none;
}

.theme-toggle-option {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.theme-toggle-option:hover {
  color: var(--text-primary);
}

.theme-toggle-option.active {
  background-color: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

/* Standard Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background-color: var(--bg-pane);
  color: var(--text-primary);
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  background-color: var(--bg-hover);
  border-color: var(--border-subtle);
}

.btn:active:not(:disabled) {
  background-color: var(--bg-active);
}

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

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: #ffffff;
}

.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: #ffffff;
}

.btn-success:hover:not(:disabled) {
  background-color: #15803d;
}

.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: #ffffff;
}

.btn-danger:hover:not(:disabled) {
  background-color: #b91c1c;
}

.btn-icon {
  padding: 0;
  width: 32px;
}

.btn-sm {
  height: 26px;
  padding: 0 8px;
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   Header Dropdown Menu (Dark & Light Theme Compatible)
   -------------------------------------------------------------------------- */

.header-dropdown {
  position: relative;
  display: inline-flex;
}

.header-dropdown-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background-color: var(--bg-pane);
  color: var(--text-primary);
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
}

.header-dropdown-btn:hover {
  background-color: var(--bg-hover);
  border-color: var(--border-subtle);
}

.header-dropdown-btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

.header-dropdown-btn .dropdown-arrow {
  font-size: 10px;
  opacity: 0.7;
  transition: transform 0.2s ease;
  display: inline-block;
}

.header-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

.header-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 190px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 1000;
  display: none;
  flex-direction: column;
  gap: 2px;
}

.header-dropdown.open .header-dropdown-menu {
  display: flex;
}

.header-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.header-dropdown-item:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.header-dropdown-item:active {
  background-color: var(--bg-active);
}

.header-dropdown-item .item-icon {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
}

/* --------------------------------------------------------------------------
   Workspace 3-Pane Body
   -------------------------------------------------------------------------- */

.workbench-body {
  display: grid;
  grid-template-columns: var(--nav-width) 1fr var(--inspector-width);
  flex: 1;
  overflow: hidden;
  position: relative;
  background-color: var(--bg-app);
}

.pane {
  background-color: var(--bg-pane);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pane:last-child {
  border-right: none;
}

.pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background-color: var(--bg-subtle);
  flex-shrink: 0;
}

.pane-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Navigator (Left Pane)
   -------------------------------------------------------------------------- */

.nav-pane {
  background-color: var(--bg-pane);
}

.nav-list {
  list-style: none;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.nav-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-item:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background-color: var(--bg-selected);
  color: var(--brand-accent);
  font-weight: 600;
  border-left: 3px solid var(--brand-primary);
}

.nav-item-create.active {
  border-left-color: #10b981 !important;
  color: #10b981 !important;
}

.nav-item-compare.active {
  border-left-color: #8b5cf6 !important;
  color: #8b5cf6 !important;
}

.nav-icon {
  width: 16px;
  text-align: center;
  font-size: 14px;
}

.badge-count {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-weight: 600;
}

.nav-item.active .badge-count {
  background-color: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
}

.nav-doc-info {
  margin: 12px 8px 8px;
  padding: 10px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 11px;
}

.nav-doc-info-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-doc-info-item {
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
  margin-bottom: 3px;
}

.nav-doc-info-item span:last-child {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Main View Pane (Center)
   -------------------------------------------------------------------------- */

.main-view-pane {
  background-color: var(--bg-app);
  display: flex;
  flex-direction: column;
}

.view-container {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.view-container.active-view {
  display: flex;
}

/* Empty State / Welcome Dropzone */
.empty-state-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 32px;
  text-align: center;
  background-color: var(--bg-pane);
}

.empty-state-card {
  max-width: 540px;
  width: 100%;
  padding: 36px;
  border: 2px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
}

.empty-state-card.drag-over {
  border-color: var(--brand-primary);
  background-color: var(--bg-selected);
  transform: scale(1.01);
}

.empty-state-icon {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 4px;
}

.empty-state-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.empty-state-subtitle {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.empty-state-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.empty-state-guarantee {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Overview View
   -------------------------------------------------------------------------- */

.overview-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

.metric-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, background-color 0.2s ease;
}

.metric-card:hover {
  border-color: var(--border-subtle);
}

.metric-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.metric-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.metric-sub {
  font-size: 11px;
  color: var(--text-secondary);
}

.overview-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-panel {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.meta-table tr {
  border-bottom: 1px solid var(--border-color);
}

.meta-table tr:last-child {
  border-bottom: none;
}

.meta-table td {
  padding: 8px 6px;
}

.meta-table td:first-child {
  width: 160px;
  font-weight: 600;
  color: var(--text-muted);
}

.meta-table td:last-child {
  color: var(--text-primary);
  word-break: break-all;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Components Table View
   -------------------------------------------------------------------------- */

.components-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  gap: 12px;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.search-box {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  max-width: 450px;
}

.search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  pointer-events: none;
  font-size: 13px;
}

.search-input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-input);
  outline: none;
  font-size: 12px;
  transition: all 0.15s ease;
}

.search-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.search-count {
  font-size: 11px;
  color: var(--text-muted);
}

.table-wrapper {
  flex: 1;
  overflow: auto;
  background-color: var(--bg-card);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}

.data-table th {
  position: sticky;
  top: 0;
  background-color: var(--bg-subtle);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  z-index: 1;
  white-space: nowrap;
  user-select: none;
}

.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  white-space: nowrap;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table tbody tr {
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.data-table tbody tr:hover {
  background-color: var(--bg-hover);
}

.data-table tbody tr.selected {
  background-color: var(--bg-selected);
  color: var(--text-primary);
  font-weight: 500;
}

.data-table tbody tr.selected td:first-child {
  border-left: 3px solid var(--bg-selected-border);
}

.component-name-cell {
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.tag-badge.tag-type {
  background-color: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}

[data-theme="dark"] .tag-badge.tag-type {
  background-color: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}

.tag-badge.tag-success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.tag-badge.tag-warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.tag-badge.tag-info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info);
}

/* --------------------------------------------------------------------------
   Relationships & Interactive SVG Graph View
   -------------------------------------------------------------------------- */

.relationships-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.rel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.rel-tabs {
  display: flex;
  gap: 6px;
}

.rel-tab-btn {
  padding: 5px 12px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border-color);
  background-color: var(--bg-pane);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.rel-tab-btn.active {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}

.rel-tools-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.graph-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-card);
  display: flex;
  flex-direction: column;
}

.graph-canvas-wrapper {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.graph-toolbar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  gap: 6px;
  background-color: var(--bg-pane);
  border: 1px solid var(--border-color);
  padding: 4px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Graph Floating HUD & Legend */
.graph-hud {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 5;
  background-color: var(--bg-pane);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-md);
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  animation: modalIn 0.15s ease;
}

.graph-hud-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.graph-hud-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.graph-hud-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.graph-legend {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  background-color: var(--bg-pane);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  user-select: none;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot-root { background-color: var(--brand-primary); }
.dot-upstream { background-color: var(--color-warning); }
.dot-downstream { background-color: var(--color-info); }
.dot-selected { background-color: #a855f7; }

/* SVG Graph Elements & Transitions */
.graph-svg {
  width: 100%;
  height: 100%;
  cursor: grab;
}

.graph-svg:active {
  cursor: grabbing;
}

.node-group {
  cursor: move;
  transition: opacity 0.2s ease, filter 0.2s ease;
  user-select: none;
}

.node-rect {
  fill: var(--graph-node-bg);
  stroke: var(--graph-node-stroke);
  stroke-width: 1.5px;
  rx: 6px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
  transition: stroke 0.15s ease, fill 0.15s ease, stroke-width 0.15s ease;
}

.node-group:hover .node-rect {
  stroke: var(--brand-primary);
  stroke-width: 2px;
}

.node-group.selected .node-rect {
  stroke: #a855f7 !important;
  stroke-width: 3px !important;
  fill: var(--bg-selected);
}

.node-group.root-node .node-rect {
  stroke: var(--brand-primary);
  stroke-width: 2px;
}

/* Interactive Upstream & Downstream Highlighting */
.node-group.node-upstream .node-rect {
  stroke: var(--color-warning) !important;
  stroke-width: 2.5px !important;
  fill: var(--color-warning-bg);
}

.node-group.node-downstream .node-rect {
  stroke: var(--color-info) !important;
  stroke-width: 2.5px !important;
  fill: var(--color-info-bg);
}

.node-group.dimmed {
  opacity: 0.25;
  filter: grayscale(0.7);
}

.node-title {
  font-size: 12px;
  font-weight: 600;
  fill: var(--graph-node-title);
  font-family: var(--font-sans);
  pointer-events: none;
}

.node-sub {
  font-size: 10px;
  fill: var(--graph-node-sub);
  font-family: var(--font-mono);
  pointer-events: none;
}

.edge-path {
  fill: none;
  stroke: var(--graph-edge-stroke);
  stroke-width: 1.5px;
  stroke-linecap: round;
  transition: stroke 0.2s ease, stroke-width 0.2s ease, opacity 0.2s ease;
}

.edge-path:hover {
  stroke: var(--brand-primary);
  stroke-width: 3px;
}

.edge-path.edge-upstream {
  stroke: var(--color-warning) !important;
  stroke-width: 2.5px !important;
  stroke-dasharray: 6 3;
  animation: edgeFlow 1s linear infinite;
}

.edge-path.edge-downstream {
  stroke: var(--color-info) !important;
  stroke-width: 2.5px !important;
  stroke-dasharray: 6 3;
  animation: edgeFlow 1s linear infinite;
}

.edge-path.dimmed {
  opacity: 0.15;
}

@keyframes edgeFlow {
  from { stroke-dashoffset: 18; }
  to { stroke-dashoffset: 0; }
}

/* Rich Floating Tooltip */
.graph-tooltip {
  position: absolute;
  z-index: 20;
  background-color: var(--bg-pane);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  font-size: 11px;
  max-width: 320px;
  display: none;
}

.graph-tooltip-title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.graph-tooltip-detail {
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   BOM Compare View & Diff Engine Styling
   -------------------------------------------------------------------------- */

.compare-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.compare-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  gap: 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.compare-files-box {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.compare-file-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  font-weight: 600;
  color: var(--text-primary);
}

.compare-file-tag.bom-a { border-left: 3px solid #3b82f6; }
.compare-file-tag.bom-b { border-left: 3px solid #8b5cf6; }

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

.summary-kpi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  user-select: none;
}

.summary-kpi:hover {
  transform: translateY(-1px);
}

.summary-kpi.active {
  box-shadow: 0 0 0 2px var(--border-focus);
}

.kpi-added {
  background-color: var(--diff-added-bg);
  border-color: var(--diff-added-border);
  color: var(--diff-added);
}

.kpi-removed {
  background-color: var(--diff-removed-bg);
  border-color: var(--diff-removed-border);
  color: var(--diff-removed);
}

.kpi-changed {
  background-color: var(--diff-changed-bg);
  border-color: var(--diff-changed-border);
  color: var(--diff-changed);
}

.kpi-unchanged {
  background-color: var(--diff-unchanged-bg);
  border-color: var(--diff-unchanged-border);
  color: var(--diff-unchanged);
}

/* Compare Sub-views Toolbar */
.compare-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.compare-tabs {
  display: flex;
  gap: 6px;
}

.compare-tab-btn {
  padding: 5px 12px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border-color);
  background-color: var(--bg-pane);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.compare-tab-btn.active {
  background-color: #8b5cf6;
  border-color: #8b5cf6;
  color: #ffffff;
}

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

/* Status Badges */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status-pill.status-added {
  background-color: var(--diff-added-bg);
  border: 1px solid var(--diff-added-border);
  color: var(--diff-added);
}

.status-pill.status-removed {
  background-color: var(--diff-removed-bg);
  border: 1px solid var(--diff-removed-border);
  color: var(--diff-removed);
}

.status-pill.status-changed {
  background-color: var(--diff-changed-bg);
  border: 1px solid var(--diff-changed-border);
  color: var(--diff-changed);
}

.status-pill.status-unchanged {
  background-color: var(--diff-unchanged-bg);
  border: 1px solid var(--diff-unchanged-border);
  color: var(--diff-unchanged);
}

.tag-confidence {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
}

.tag-confidence.high { background-color: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.tag-confidence.medium { background-color: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-border); }
.tag-confidence.low { background-color: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--border-color); }

/* Semantic Relationship Badges */
.tag-rel {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tag-rel.tag-rel-declared {
  background-color: var(--rel-declared-bg);
  color: var(--rel-declared);
  border: 1px solid var(--rel-declared-border);
}

.tag-rel.tag-rel-referenced {
  background-color: var(--rel-referenced-bg);
  color: var(--rel-referenced);
  border: 1px solid var(--rel-referenced-border);
}

.tag-rel.tag-rel-resolved {
  background-color: var(--rel-resolved-bg);
  color: var(--rel-resolved);
  border: 1px solid var(--rel-resolved-border);
}

.tag-rel.tag-rel-source-reference {
  background-color: var(--rel-source-bg);
  color: var(--rel-source);
  border: 1px solid var(--rel-source-border);
}

/* Dependency Evidence in Inspector */
.dep-evidence-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.dep-evidence-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dep-evidence-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.dep-evidence-item {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

.dep-evidence-item.empty-note {
  font-style: italic;
  color: var(--text-muted);
}

/* Field Change Badges */
.field-change-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-family: var(--font-mono);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  margin-right: 4px;
}

/* Compare Side-by-Side Table in Inspector */
.compare-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-top: 8px;
}

.compare-diff-table th {
  background-color: var(--bg-subtle);
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
}

.compare-diff-table td {
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  vertical-align: top;
  font-family: var(--font-mono);
  word-break: break-all;
}

.compare-diff-table tr.diff-row-changed td:first-child {
  font-weight: 700;
  color: var(--diff-changed);
  background-color: var(--diff-changed-bg);
}

.diff-val-old {
  color: var(--diff-removed);
  background-color: var(--diff-removed-bg);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}

.diff-val-new {
  color: var(--diff-added);
  background-color: var(--diff-added-bg);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}

/* SVG Diff Graph Styles */
.node-group.diff-node-added .node-rect {
  stroke: var(--diff-added) !important;
  stroke-width: 2.5px !important;
  fill: var(--diff-added-bg);
}

.node-group.diff-node-removed .node-rect {
  stroke: var(--diff-removed) !important;
  stroke-width: 2.5px !important;
  stroke-dasharray: 4 2;
  fill: var(--diff-removed-bg);
}

.node-group.diff-node-changed .node-rect {
  stroke: var(--diff-changed) !important;
  stroke-width: 2.5px !important;
  fill: var(--diff-changed-bg);
}

.edge-path.diff-edge-added {
  stroke: var(--diff-added) !important;
  stroke-width: 2.5px !important;
  stroke-dasharray: 6 3;
}

.edge-path.diff-edge-removed {
  stroke: var(--diff-removed) !important;
  stroke-width: 2.5px !important;
  stroke-dasharray: 4 4;
}

/* Dual Dropzones for Comparison Setup */
.compare-setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 30px;
  max-width: 800px;
  width: 100%;
}

.compare-drop-card {
  padding: 24px;
  border: 2px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  transition: all 0.2s ease;
}

.compare-drop-card.drag-over {
  border-color: var(--brand-primary);
  background-color: var(--bg-selected);
}

.compare-drop-card.loaded {
  border-color: var(--color-success);
  background-color: var(--color-success-bg);
}

/* --------------------------------------------------------------------------
   Create BOM from Project Folder & Analysis Styling
   -------------------------------------------------------------------------- */

.create-bom-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.analysis-header-panel {
  padding: 14px 18px;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

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

.analysis-project-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ecosystem-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.eco-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.eco-pill.detected {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.analysis-generator-bar {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: flex-end;
  padding: 12px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.analysis-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.evidence-code-block {
  font-family: var(--font-mono);
  font-size: 11px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--text-primary);
  word-break: break-all;
  white-space: pre-wrap;
}

.unresolved-card {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background-color: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

/* Source Analysis Graph Node Types & Shapes */
.node-group.node-project .node-rect {
  stroke: var(--brand-primary) !important;
  stroke-width: 2px;
  fill: var(--bg-card);
  rx: 8;
  ry: 8;
}

.node-group.node-manifest .node-rect {
  stroke: #3b82f6 !important;
  stroke-width: 1.5px;
  fill: var(--rel-source-bg, #eff6ff);
  rx: 3;
  ry: 3;
}

.node-group.node-lockfile .node-rect {
  stroke: #10b981 !important;
  stroke-width: 1.5px;
  fill: var(--rel-resolved-bg, #f0fdf4);
  rx: 3;
  ry: 3;
}

.node-group.node-source-file .node-rect {
  stroke: var(--source-file-node, #64748b) !important;
  fill: var(--source-file-node-bg, var(--bg-card));
  rx: 4;
  ry: 4;
}

.node-group.node-source-pkg .node-rect,
.node-group.node-package .node-rect {
  stroke: var(--source-pkg-node, #0891b2) !important;
  stroke-width: 1.5px;
  fill: var(--source-pkg-node-bg, var(--bg-card));
  rx: 10;
  ry: 10;
}

.node-group.node-source-unresolved .node-rect,
.node-group.node-unresolved .node-rect {
  stroke: var(--source-unresolved-node, #f59e0b) !important;
  stroke-dasharray: 4 2;
  fill: var(--source-unresolved-node-bg, var(--bg-card));
  rx: 4;
  ry: 4;
}

/* Graph Dimming & Path Highlighting */
.node-group.ana-graph-dimmed {
  opacity: 0.12 !important;
  transition: opacity 0.2s ease;
}

.node-group.ana-graph-highlighted {
  opacity: 1 !important;
  transition: opacity 0.2s ease;
}

.node-group.ana-graph-highlighted .node-rect {
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.6));
}

.edge-path.ana-edge-dimmed {
  opacity: 0.08 !important;
  transition: opacity 0.2s ease;
}

.edge-path.ana-edge-highlighted {
  opacity: 1 !important;
  stroke-width: 2.5px !important;
  transition: stroke-width 0.2s ease, opacity 0.2s ease;
}

.edge-label-text {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 600;
  fill: var(--text-secondary);
  text-anchor: middle;
  pointer-events: none;
}

/* Legend Node Icons */
.legend-node-icon {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  margin-right: 2px;
}

/* Component Evidence Status Badges */
.tag-status-corroborated {
  background-color: var(--color-success-bg, #f0fdf4);
  color: var(--color-success, #16a34a);
  border: 1px solid var(--color-success-border, #86efac);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tag-status-declared-only {
  background-color: var(--bg-subtle, #f1f5f9);
  color: var(--text-secondary, #475569);
  border: 1px solid var(--border-color, #cbd5e1);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tag-status-referenced-only {
  background-color: var(--color-warning-bg, #fffbeb);
  color: var(--color-warning, #d97706);
  border: 1px solid var(--color-warning-border, #fde68a);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tag-status-unresolved {
  background-color: var(--color-danger-bg, #fef2f2);
  color: var(--color-danger, #dc2626);
  border: 1px solid var(--color-danger-border, #fecaca);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* "Why Is This Component Here?" & Impact Cards */
.why-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.why-card-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}

.why-card-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.why-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.why-card-val {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-primary);
  line-height: 1.4;
}

.why-card-val code {
  background: var(--bg-subtle);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--border-color);
}

.why-card-val.empty-notice {
  font-style: italic;
  color: var(--text-muted);
  font-family: var(--font-base);
}

/* --------------------------------------------------------------------------
   Raw JSON & Raw Diff View
   -------------------------------------------------------------------------- */

.raw-json-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--bg-card);
}

.raw-diff-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  overflow: hidden;
}

.raw-diff-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid var(--border-color);
  overflow: hidden;
}

.raw-diff-pane:last-child {
  border-right: none;
}

.raw-diff-pane-header {
  padding: 8px 14px;
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 11px;
  color: var(--text-muted);
}

.raw-json-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-subtle);
}

.json-code-container {
  flex: 1;
  overflow: auto;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  background-color: var(--bg-card);
  color: var(--text-primary);
  white-space: pre;
}

.json-key { color: var(--json-key); font-weight: 600; }
.json-string { color: var(--json-string); }
.json-number { color: var(--json-number); }
.json-boolean { color: var(--json-boolean); font-weight: 600; }
.json-null { color: var(--json-null); font-weight: 600; }

/* --------------------------------------------------------------------------
   Inspector (Right Pane)
   -------------------------------------------------------------------------- */

.inspector-pane {
  background-color: var(--bg-pane);
}

.inspector-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.inspector-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  text-align: center;
  padding: 32px 16px;
  gap: 8px;
}

.inspector-header-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.inspector-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  word-break: break-all;
}

.inspector-ref-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  word-break: break-all;
  background-color: var(--bg-subtle);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.inspector-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inspector-section-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-input);
  color: var(--text-primary);
  font-size: 12px;
  transition: all 0.15s ease;
}

.form-select option {
  background-color: var(--bg-card);
  color: var(--text-primary);
}

.vis-mode-select {
  height: 28px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-input);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.vis-mode-select:hover {
  border-color: var(--brand-primary);
}

.vis-mode-select:focus {
  border-color: var(--brand-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.vis-mode-select option {
  background-color: var(--bg-card);
  color: var(--text-primary);
}

.form-textarea {
  resize: vertical;
  min-height: 56px;
  line-height: 1.4;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--border-focus);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.editable-indicator {
  font-size: 9px;
  color: var(--brand-primary);
  font-weight: 600;
  text-transform: uppercase;
}

.attribute-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.prop-table th {
  background-color: var(--bg-subtle);
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
}

.prop-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-mono);
  word-break: break-all;
}

.prop-table tr:last-child td {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   Status Bar
   -------------------------------------------------------------------------- */

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--statusbar-height);
  padding: 0 14px;
  background-color: var(--bg-header);
  border-top: 1px solid var(--border-color);
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.status-left, .status-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-item strong {
  color: var(--text-primary);
}

.modified-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background-color: var(--color-modified-bg);
  border: 1px solid var(--color-modified);
  color: var(--color-modified);
  font-weight: 700;
  font-size: 10px;
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */

.modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal-backdrop.open {
  display: flex;
}

.modal-dialog {
  background-color: var(--bg-pane);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: modalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* Help Modal (takes ~3/4 of screen space) */
.help-modal-dialog {
  width: 76vw;
  height: 76vh;
  max-width: 1400px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}

.help-modal-header {
  padding: 10px 16px;
  background-color: var(--bg-header);
  flex-shrink: 0;
}

.help-modal-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.help-modal-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.help-modal-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.help-modal-body {
  padding: 0;
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  background-color: var(--bg-base);
}

.help-modal-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background-color: var(--bg-base);
}

@media (max-width: 768px) {
  .help-modal-dialog {
    width: 95vw;
    height: 90vh;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
  font-weight: 700;
}

.modal-body {
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-subtle);
  gap: 8px;
}

.val-banner {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 13px;
}

.val-banner.valid {
  background-color: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success);
}

.val-banner.warning {
  background-color: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning);
}

.val-banner.invalid {
  background-color: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  color: var(--color-danger);
}

.val-banner-icon {
  font-size: 20px;
}

.val-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.val-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
}

.val-item.check-pass { border-left: 3px solid var(--color-success); }
.val-item.check-warn { border-left: 3px solid var(--color-warning); }
.val-item.check-fail { border-left: 3px solid var(--color-danger); }

/* Responsive adjustments */
@media (max-width: 1024px) {
  .workbench-body {
    grid-template-columns: 200px 1fr 300px;
  }
  .analysis-generator-bar {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   Progress Indicators (Global Bar, Status Bar Item, Floating Toast)
   ========================================================================== */

/* 1. Global Slim Progress Bar */
.global-progress-container {
  width: 100%;
  height: 3px;
  background-color: transparent;
  overflow: hidden;
  position: relative;
  z-index: 100;
}

.global-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2563eb, #38bdf8, #60a5fa);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
  transition: width 0.2s ease-out;
}

.global-progress-bar.indeterminate {
  width: 100%;
  background: linear-gradient(90deg, transparent, #2563eb, #38bdf8, transparent);
  background-size: 200% 100%;
  animation: indeterminateProgress 1.4s infinite linear;
}

@keyframes indeterminateProgress {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 2. Status Bar Progress Indicator */
.status-progress-item {
  color: var(--color-primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background-color: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
}

.status-spinner {
  width: 11px;
  height: 11px;
  border: 2px solid var(--color-info-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.75s linear infinite;
}

/* 3. Floating Operation Progress Toast */
.progress-toast {
  position: fixed;
  bottom: 34px;
  right: 24px;
  width: 360px;
  max-width: calc(100vw - 48px);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 8px 30px rgba(0, 0, 0, 0.18);
  padding: 14px 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: slideUpToast 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes slideUpToast {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.progress-toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.progress-toast-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.progress-toast-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-toast-percent {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-primary);
  flex-shrink: 0;
}

.progress-toast-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-color);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  animation: spin 0.8s linear infinite;
}

.progress-toast-bar-track {
  width: 100%;
  height: 6px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}

.progress-toast-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  border-radius: 4px;
  transition: width 0.18s ease-out;
}

.progress-toast-bar.indeterminate {
  width: 100%;
  background: linear-gradient(90deg, transparent, #2563eb, #38bdf8, transparent);
  background-size: 200% 100%;
  animation: indeterminateProgress 1.2s infinite linear;
}

.progress-toast-detail {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
}

/* Toast Done state */
.progress-toast.done {
  border-color: var(--color-success);
}

.progress-toast.done .progress-toast-spinner {
  border-color: var(--color-success);
  border-top-color: var(--color-success);
  animation: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-toast.done .progress-toast-spinner::after {
  content: "✓";
  font-size: 11px;
  font-weight: bold;
  color: var(--color-success);
}

.progress-toast.done .progress-toast-bar {
  background: var(--color-success);
}

.progress-toast.done .progress-toast-percent {
  color: var(--color-success);
}

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

/* ============================================================================
   Scalable Dependency Visualizations (Focus & Grouped Views)
   ============================================================================ */

.rel-recommendation-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  background: var(--bg-card);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 680px;
  width: 90%;
  animation: slideDownFade 0.25s ease-out;
}

@keyframes slideDownFade {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.grouped-graph-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

.grouped-clusters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.dep-cluster-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
}

.dep-cluster-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.dep-cluster-header {
  padding: 12px 14px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.dep-cluster-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dep-cluster-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dep-cluster-meta {
  padding: 10px 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
}

.dep-cluster-stat {
  display: flex;
  flex-direction: column;
}

.dep-cluster-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}

.dep-cluster-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.dep-cluster-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.dep-cluster-item {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.dep-cluster-item:hover {
  background: var(--bg-hover);
  border-color: var(--color-primary);
}

.dep-cluster-item-name {
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}

.dep-cluster-actions {
  padding: 8px 14px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.node-card.focused-center {
  stroke: var(--color-primary) !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.5));
}

/* ============================================================================
   Physics / Force-Directed Visualization Styles
   ============================================================================ */

.rel-adv-physics-drawer {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  padding: 10px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  animation: slideDownFade 0.15s ease-out;
}

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

.adv-physics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.adv-physics-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adv-physics-field label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.adv-physics-field input[type="range"] {
  width: 100%;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.node-group.pinned .node-rect {
  stroke-dasharray: 4 2;
  stroke: var(--color-warning) !important;
  stroke-width: 2px !important;
}

.node-pinned-badge {
  font-size: 10px;
  fill: var(--color-warning);
  font-weight: bold;
}