/* ==================================================================
   Steps UI — visual polish for step list, step dialog, and step
   catalog in ETL Studio. Overrides Vite-built styles with root
   design tokens from assets/css/base.css.
   ================================================================== */

/* ==================================================================
   1. Step List — Applied Steps (Left Panel)
   ================================================================== */

/* --- Step list ---------------------------------------------------- */
.step-list {
  gap: var(--space-sm);
  padding: var(--space-sm);
}

.step-card {
  position: relative;
  transition: box-shadow 200ms ease, border-color 200ms ease, background 200ms ease;
  border-color: var(--color-border);
  background: var(--color-surface);
  padding: var(--space-sm) var(--space-sm);
  overflow: visible;
}

/* --- Connection line between steps --------------------------------
   The bundle renders the step number as an inline "1." span at the
   start of the step name; this line sits under it. */
.step-card:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 12px;  /* aligns under the inline step-number span */
  width: 1px;
  height: 10px;
  background: var(--color-border);
  z-index: 1;
}

/* --- Hover state -------------------------------------------------- */
.step-card:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface));
  box-shadow: var(--shadow-sm);
}

/* --- Active state — left accent bar + glow ------------------------ */
.step-card.active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
  box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-sm);
}

.step-card.active .step-card-name {
  font-weight: 600;
  color: var(--color-accent);
}

/* --- Disabled state ----------------------------------------------- */
.step-card.disabled {
  opacity: 0.55;
  background: var(--color-bg);
  border-color: var(--color-border);
  border-style: dashed;
}

.step-card.disabled:hover {
  opacity: 0.7;
  border-color: var(--color-text-secondary);
  border-style: dashed;
  box-shadow: none;
}

.step-card.disabled .step-card-name {
  color: var(--color-text-secondary);
  text-decoration: line-through;
  text-decoration-color: var(--color-text-secondary);
}

/* --- Step card header --------------------------------------------- */
.step-card-header {
  gap: var(--space-xs);
}

/* --- Step name ---------------------------------------------------- */
.step-card-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  transition: color 200ms ease;
  display: flex;
  align-items: center;
  gap: 0;
}

/* --- Inline rename input ------------------------------------------ */
.step-card-name-input {
  font-size: var(--text-sm);
  padding: 2px 6px;
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

/* --- Action buttons — fade in on card hover ----------------------- */
.step-card-actions {
  opacity: 0;
  transition: opacity 200ms ease;
}

.step-card:hover .step-card-actions,
.step-card.active .step-card-actions {
  opacity: 1;
}

.step-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--border-radius-sm);
  transition: background 150ms ease, color 150ms ease;
}

.step-icon-btn:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
}

/* --- Drag handle — dots pattern ----------------------------------- */
.step-card-header > span[style*="cursor: grab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 24px;
  position: relative;
}

.step-card-header > span[style*="cursor: grab"]::before {
  content: '';
  display: block;
  width: 4px;
  height: 14px;
  background: radial-gradient(circle, var(--color-text-secondary) 1.5px, transparent 1.5px);
  background-size: 4px 5px;
  background-position: 0 2px;
  opacity: 0.4;
  transition: opacity 200ms ease;
}

.step-card:hover .step-card-header > span[style*="cursor: grab"]::before {
  opacity: 0.7;
}

/* ==================================================================
   2. Step Dialog — Manage Columns & Step Configuration
   ================================================================== */

/* --- Dialog container ---------------------------------------------- */
.modal.step-dialog {
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Custom SQL dialog — extra room for the SQL editor */
.modal.step-dialog--large {
  width: min(960px, 95vw);
  max-height: 92vh;
}

/* --- Dialog header ------------------------------------------------- */
.modal-header {
  padding: var(--space-md) var(--space-md);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* --- Dialog body --------------------------------------------------- */
.step-dialog-body {
  padding: var(--space-md);
  gap: var(--space-md);
}

/* --- Field labels -------------------------------------------------- */
.step-field-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}

/* --- Field hints --------------------------------------------------- */
.step-field-hint {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* --- Input fields -------------------------------------------------- */
.step-input {
  padding: 8px 10px;
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.step-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

select.step-input {
  cursor: pointer;
  appearance: auto;
}

/* --- Checkbox styling ---------------------------------------------- */
.step-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 2px 0;
  transition: color 200ms ease;
}

.step-checkbox:hover {
  color: var(--color-accent);
}

.step-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* --- Column multi-select ------------------------------------------- */
.column-multiselect {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  padding: var(--space-xs);
  background: var(--color-bg);
  transition: border-color 200ms ease;
}

.column-multiselect:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.column-multiselect .step-checkbox {
  padding: 6px 8px;
  border-radius: var(--border-radius-sm);
  transition: background 150ms ease;
}

.column-multiselect .step-checkbox:hover {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  color: var(--color-text);
}

.column-multiselect .step-checkbox span {
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--color-text);
}

/* --- Multi-select toolbar ------------------------------------------ */
.column-multiselect-toolbar {
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}

.column-multiselect-toolbar .step-checkbox {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.column-multiselect-toolbar .step-checkbox:hover {
  color: var(--color-accent);
}

/* --- Selection summary --------------------------------------------- */
.selection-summary {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.selection-summary::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* --- Rename input in multi-select ---------------------------------- */
.column-multiselect .rename-input {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  margin: 2px 0 4px 28px;
  padding: 3px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 200ms ease;
}

.column-multiselect .rename-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

/* --- Step rows (key-value pairs) ----------------------------------- */
.step-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.step-row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  padding: 4px 0;
}

.step-row .step-input {
  flex: 1;
  min-width: 0;
}

/* --- Error message ------------------------------------------------- */
.step-error {
  color: var(--color-error);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-sm);
  background: color-mix(in srgb, var(--color-error) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-error) 20%, transparent);
  border-radius: var(--border-radius-sm);
}

/* --- Dialog action buttons ----------------------------------------- */
.step-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.step-dialog-actions button {
  padding: 8px 16px;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--border-radius-sm);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.step-dialog-actions button:not(.primary) {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.step-dialog-actions button:not(.primary):hover {
  background: var(--color-surface);
  border-color: var(--color-text-secondary);
  color: var(--color-text);
}

.step-dialog-actions .primary {
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: #fff;
}

.step-dialog-actions .primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* ==================================================================
   3. Step Catalog — Add Step Dialog
   ================================================================== */

/* --- Catalog container --------------------------------------------- */
.modal.step-catalog {
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* --- Search input -------------------------------------------------- */
.step-catalog-search {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.step-catalog-search .search-input {
  width: 100%;
  margin: 0;
  padding: 8px 12px 8px 32px;
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") 10px center no-repeat;
  color: var(--color-text);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.step-catalog-search .search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

/* --- Catalog body -------------------------------------------------- */
.step-catalog-body {
  padding: var(--space-md);
  gap: var(--space-lg);
}

/* --- Category groups ----------------------------------------------- */
.step-category {
  gap: var(--space-sm);
}

.step-category-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
}

/* --- Category items grid ------------------------------------------- */
.step-category-items {
  gap: var(--space-sm);
}

/* --- Category item ------------------------------------------------- */
.step-category-item {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg);
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
  cursor: pointer;
}

.step-category-item:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 3%, var(--color-bg));
  box-shadow: var(--shadow-sm);
}

.step-category-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* --- Step icon in catalog item ------------------------------------- */
.step-category-item .step-icon {
  min-width: 30px;
  height: 24px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  border-radius: var(--border-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Item text ----------------------------------------------------- */
.step-category-item-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.step-category-item-desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* ==================================================================
   4. General UI Polish
   ================================================================== */

/* --- Panel headers ------------------------------------------------- */
.panel-header {
  padding: var(--space-sm) var(--space-md);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* --- Toolbar buttons ----------------------------------------------- */
.toolbar button {
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg);
  color: var(--color-text-secondary);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.toolbar button:hover {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.toolbar button.primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.toolbar button.primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* --- Tab bar ------------------------------------------------------- */
.tab {
  padding: 8px 16px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}

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

.tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}

/* --- Modal overlay ------------------------------------------------- */
.modal-overlay {
  background: color-mix(in srgb, #000 45%, transparent);
  backdrop-filter: blur(2px);
}

/* --- Custom scrollbar for multi-select and scrollable areas -------- */
.column-multiselect::-webkit-scrollbar,
.step-catalog-body::-webkit-scrollbar,
.step-dialog-body::-webkit-scrollbar {
  width: 6px;
}

.column-multiselect::-webkit-scrollbar-track,
.step-catalog-body::-webkit-scrollbar-track,
.step-dialog-body::-webkit-scrollbar-track {
  background: transparent;
}

.column-multiselect::-webkit-scrollbar-thumb,
.step-catalog-body::-webkit-scrollbar-thumb,
.step-dialog-body::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.column-multiselect::-webkit-scrollbar-thumb:hover,
.step-catalog-body::-webkit-scrollbar-thumb:hover,
.step-dialog-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-secondary);
}

/* ==================================================================
   5. Dark Mode Overrides
   ================================================================== */

[data-theme="dark"] .step-card {
  background: var(--color-surface);
}

[data-theme="dark"] .step-card:hover {
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}

[data-theme="dark"] .step-card.active {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-sm);
}

[data-theme="dark"] .step-card.disabled {
  background: var(--color-bg);
}

[data-theme="dark"] .step-category-item {
  background: var(--color-surface);
}

[data-theme="dark"] .step-category-item:hover {
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}

[data-theme="dark"] .step-category-item .step-icon {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
}

[data-theme="dark"] .column-multiselect {
  background: var(--color-surface);
}

[data-theme="dark"] .column-multiselect .step-checkbox:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

[data-theme="dark"] .step-dialog-actions {
  background: var(--color-bg);
}

[data-theme="dark"] .step-dialog-actions button:not(.primary) {
  background: var(--color-surface);
}

[data-theme="dark"] .step-dialog-actions button:not(.primary):hover {
  background: var(--color-bg);
}

[data-theme="dark"] .step-error {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
}

[data-theme="dark"] .step-catalog-search .search-input {
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") 10px center no-repeat;
}

[data-theme="dark"] .modal-overlay {
  background: color-mix(in srgb, #000 60%, transparent);
}

[data-theme="dark"] .step-card-header > span[style*="cursor: grab"]::before {
  background: radial-gradient(circle, var(--color-text-secondary) 1.5px, transparent 1.5px);
  background-size: 4px 5px;
  background-position: 0 2px;
}

/* ==================================================================
   6. Responsive
   ================================================================== */

@media (max-width: 768px) {
  .step-card {
    padding: 6px 8px;
  }

  .step-card:not(:last-child)::after {
    left: 10px;
  }

  .step-card-actions {
    opacity: 1;
  }

  .step-dialog-body {
    padding: var(--space-sm);
  }

  .step-category-items {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .step-card .step-card-name {
    font-size: var(--text-xs);
  }

  .step-card:not(:last-child)::after {
    left: 8px;
  }

  .step-dialog-actions {
    flex-direction: column;
  }

  .step-dialog-actions button {
    width: 100%;
  }
}

/* ==================================================================
   7. Reduced Motion
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  .step-card,
  .step-card-header > span[style*="cursor: grab"]::before,
  .step-card-actions,
  .step-input,
  .step-category-item,
  .toolbar button,
  .tab,
  .step-icon-btn,
  .step-catalog-search .search-input,
  .column-multiselect .rename-input {
    transition: none !important;
  }
}

/* ==================================================================
   8. Export Menu (left-panel export dropdown)
   ================================================================== */

.etl-export-menu {
  position: fixed;
  z-index: 1000;
  min-width: 180px;
  padding: var(--space-xs);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.etl-export-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-sm);
  border: none;
  border-radius: var(--border-radius-sm);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.etl-export-menu-item:hover,
.etl-export-menu-item:focus-visible {
  background: var(--color-surface);
  color: var(--color-accent);
}

.etl-export-menu-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.etl-export-menu-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

/* ==================================================================
   9. Export dialog (multi-query selection)
   ================================================================== */

.etl-export-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.4);
}

.etl-export-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
}

.etl-export-dialog-title {
  margin: 0;
  padding: var(--space-md) var(--space-md) var(--space-xs);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

.etl-export-dialog-subtitle {
  margin: 0;
  padding: 0 var(--space-md) var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.etl-export-dialog-toolbar {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
}

.etl-export-dialog-link {
  padding: var(--space-xs);
  border: none;
  background: transparent;
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
}

.etl-export-dialog-link:hover {
  text-decoration: underline;
}

.etl-export-dialog-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

.etl-export-dialog-password {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.etl-export-dialog-password-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.etl-export-dialog-password-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.etl-export-dialog-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-xs) var(--space-sm);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.etl-export-dialog-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
}

.etl-export-dialog-item:hover {
  background: var(--color-surface);
}

.etl-export-dialog-item.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.etl-export-dialog-checkbox {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.etl-export-dialog-checkbox:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.etl-export-dialog-item-name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.etl-export-dialog-item-meta {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.etl-export-dialog-empty {
  padding: var(--space-md);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.etl-export-dialog-status {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.etl-export-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.etl-export-dialog-cancel {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 150ms ease;
}

.etl-export-dialog-cancel:hover {
  background: var(--color-surface);
}

.etl-export-dialog-cancel:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.etl-export-dialog-export {
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--border-radius-sm);
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease;
}

.etl-export-dialog-export:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.etl-export-dialog-export:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.etl-export-dialog-export:disabled,
.etl-export-dialog-cancel:disabled,
.etl-export-dialog-link:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ==================================================================
   9. Panel Resize Handles — widen grab area
   The Vite bundle sizes the left/right panel handles at 4px, which is
   hard to grab. This override widens the hit zone to 8px (4px into the
   panel, 4px into the center). Loads after the bundle CSS, so it wins
   at equal specificity.
   ================================================================== */

.resize-handle-h { width: 8px; }
.resize-handle-h.left { right: -4px; }
.resize-handle-h.right { left: -4px; }