/* ── Dark Mode Overrides for Hardcoded Colors ─────────────────────
 * This file overrides colors that bypass CSS custom properties.
 * The base dark-mode variables are in base.css [data-theme="dark"].
 * ─────────────────────────────────────────────────────────────── */

/* ── layout.css overrides ──────────────────────────────────────── */

/* .board border */
[data-theme="dark"] .board {
  border-color: rgba(255, 255, 255, 0.06);
}

/* Scrollbar thumbs */
[data-theme="dark"] .board::-webkit-scrollbar-thumb,
[data-theme="dark"] .detail::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .board::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .detail::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Per-column card list scrollbar thumbs */
[data-theme="dark"] .cards::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .cards::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Stage header shadow for dark mode */
[data-theme="dark"] .stage-header {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Splitter */
[data-theme="dark"] .splitter::before {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .splitter::after {
  color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .splitter:hover::before {
  background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .splitter:hover::after {
  color: rgba(255, 255, 255, 0.4);
}

/* Stage type indicator */
[data-theme="dark"] .stage-type-indicator {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Queued indicator */
[data-theme="dark"] .queued-indicator {
  background: rgba(119, 142, 171, 0.2);
  color: #8babc9;
  border-color: rgba(119, 142, 171, 0.4);
}

/* Stage capacity */
[data-theme="dark"] .stage-capacity-indicator.capacity-near-limit {
  color: #d4a033;
}

[data-theme="dark"] .stage-capacity-indicator.capacity-paused {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .stage-capacity-indicator.capacity-unlimited {
  background: rgba(119, 142, 171, 0.18);
  color: #8babc9;
  border-color: rgba(119, 142, 171, 0.35);
}

/* Detail card border */
[data-theme="dark"] .detail-card {
  border-color: rgba(255, 255, 255, 0.06);
}

/* Todo form input */
[data-theme="dark"] .todo-form input {
  background: var(--surface-alt);
}

[data-theme="dark"] .todo-form.disabled input {
  background: rgba(255, 255, 255, 0.04);
}

/* Todo item border */
[data-theme="dark"] .todo-item {
  border-color: rgba(255, 255, 255, 0.06);
}

/* Subtask item border */
[data-theme="dark"] .subtask-item {
  border-color: rgba(255, 255, 255, 0.06);
}

/* Run history item border */
[data-theme="dark"] .run-history-item {
  border-color: rgba(255, 255, 255, 0.06);
}

/* Run branch background */
[data-theme="dark"] .run-branch {
  background: rgba(255, 255, 255, 0.08);
}

/* Run transitions container */
[data-theme="dark"] .run-transitions-container {
  background: rgba(255, 255, 255, 0.03);
}

/* Empty state border */
[data-theme="dark"] .empty {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Markdown inline code */
[data-theme="dark"] .markdown code {
  background: rgba(255, 255, 255, 0.08);
}

/* Board picker dropdown shadow */
[data-theme="dark"] .board-picker-dropdown {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ── components.css overrides ──────────────────────────────────── */

/* Stage modal overlay */
[data-theme="dark"] .stage-modal {
  background: rgba(20, 20, 24, 0.9);
}

/* Board modal overlay */
[data-theme="dark"] .board-modal {
  background: rgba(20, 20, 24, 0.8);
}

/* Stage composer input and select */
[data-theme="dark"] .stage-composer input,
[data-theme="dark"] .stage-composer select {
  background: var(--surface-alt);
  color: var(--ink);
}

/* Stage composer select options */
[data-theme="dark"] .stage-composer select option {
  background: var(--surface-alt);
  color: var(--ink);
}

[data-theme="dark"] .stage-composer select option:checked {
  background: var(--surface-strong);
}

/* Drag handle */
[data-theme="dark"] .drag-handle {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .drag-handle:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Card border */
[data-theme="dark"] .card {
  border-color: rgba(255, 255, 255, 0.06);
}

/* Card description */
[data-theme="dark"] .card-description {
  color: var(--muted);
}

/* Message form textarea */
[data-theme="dark"] .message-form textarea {
  background: var(--surface-alt);
  color: var(--ink);
}

/* Message body code */
[data-theme="dark"] .message-body code {
  background: rgba(255, 255, 255, 0.08);
}

/* Message body table header */
[data-theme="dark"] .message-body th {
  background: rgba(255, 255, 255, 0.06);
}

/* Message body table cells border */
[data-theme="dark"] .message-body th,
[data-theme="dark"] .message-body td {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Message composer modal */
[data-theme="dark"] .message-composer-modal {
  background: rgba(20, 20, 24, 0.9);
}

/* Message composer textarea */
[data-theme="dark"] .message-composer-textarea {
  background: var(--surface-alt);
  color: var(--ink);
}

/* Message composer tabs */
[data-theme="dark"] .message-composer-tab {
  color: var(--muted);
}

/* Archive card modal */
[data-theme="dark"] .archive-card-modal {
  background: rgba(20, 20, 24, 0.9);
}

/* Move card modal */
[data-theme="dark"] .move-card-modal {
  background: rgba(20, 20, 24, 0.9);
}

/* Mermaid modal */
[data-theme="dark"] .mermaid-modal {
  background: rgba(20, 20, 24, 0.95);
}

/* Inactivity indicator */
[data-theme="dark"] .inactivity-indicator {
  background: rgba(180, 120, 40, 0.2);
  border-color: rgba(180, 120, 40, 0.5);
  color: #d4a033;
}

/* Polling toast */
[data-theme="dark"] .polling-toast {
  background: var(--surface-strong);
}

/* ── archive.css overrides ─────────────────────────────────────── */

/* Child row background */
[data-theme="dark"] .archive-table tbody tr.child-row {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .archive-table tbody tr.child-row:hover {
  background: rgba(210, 107, 52, 0.08);
}

/* Expand button */
[data-theme="dark"] .expand-btn {
  background: rgba(255, 255, 255, 0.06);
}

/* Orphaned badge */
[data-theme="dark"] .orphaned-badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Archive detail card border */
[data-theme="dark"] .archive-detail .detail-card {
  border-color: rgba(255, 255, 255, 0.06);
}

/* Archive detail message item */
[data-theme="dark"] .archive-detail .message-item {
  border-color: rgba(255, 255, 255, 0.06);
}

/* ── dashboard.css overrides ───────────────────────────────────── */

/* Dashboard stage indicator border */
[data-theme="dark"] .dashboard-stage-indicator {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Dashboard toggle slider */
[data-theme="dark"] .dashboard-toggle-slider::after {
  background: var(--muted);
}

/* Dashboard board card */
[data-theme="dark"] .dashboard-board-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── settings.css overrides ────────────────────────────────────── */

/* Settings modal overlays */
[data-theme="dark"] .settings-modal-overlay {
  background: rgba(20, 20, 24, 0.9);
}

/* Confirm modal overlay */
[data-theme="dark"] .confirm-modal-overlay {
  background: rgba(20, 20, 24, 0.9);
}

/* Arrow buttons */
[data-theme="dark"] .arrow-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

[data-theme="dark"] .arrow-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}

/* Skill detail code */
[data-theme="dark"] .skill-detail-code {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ── docker-settings.css overrides ─────────────────────────────── */

/* Status indicators keep their semantic colors in dark mode —
   they're bright enough to work on dark backgrounds */

/* Hierarchy rows */
[data-theme="dark"] .hierarchy-row.board-row {
  border-left-color: #60a5fa;
}

[data-theme="dark"] .hierarchy-row.stage-row {
  border-left-color: #4ade80;
}

/* Expand toggle */
[data-theme="dark"] .expand-toggle {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .expand-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Resource badges */
[data-theme="dark"] .resource-badge.inherited {
  background: rgba(255, 255, 255, 0.06);
}

/* ── admin.css overrides ───────────────────────────────────────── */

[data-theme="dark"] .admin-key-overlay {
  background: rgba(20, 20, 24, 0.85);
}

[data-theme="dark"] .admin-key-dialog {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* ── Dark mode toggle button styling ───────────────────────────── */

.dark-mode-toggle {
  font-size: 1.1rem !important;
  line-height: 1;
}