/**
 * BuzzersFit Dark Theme 2025
 * 
 * Explicit dark theme
 * Apply with: document.documentElement.setAttribute('data-theme', 'dark')
 */

[data-theme="dark"] {
    /* Colors */
    --color-text: var(--color-gray-100);
    --color-text-secondary: var(--color-gray-400);
    --color-text-muted: var(--color-gray-500);

    --color-background: var(--color-gray-950);
    --color-background-alt: var(--color-gray-900);
    --color-background-elevated: var(--color-gray-800);

    --color-border: var(--color-gray-700);
    --color-border-light: var(--color-gray-800);

    /* Inverse text (white stays white — used on colored buttons/badges) */
    --color-text-inverse: #ffffff;

    /* Semantic alert text colors (light variants for dark backgrounds) */
    --color-info-text: #93c5fd;
    --color-success-text: #6ee7b7;
    --color-warning-text: #fcd34d;
    --color-danger-text: #fca5a5;
    --color-warning-badge: #fbbf24;

    /* Alert backgrounds & borders */
    --color-info-bg: rgba(59, 130, 246, 0.15);
    --color-info-border: rgba(59, 130, 246, 0.3);
    --color-success-bg: rgba(16, 185, 129, 0.15);
    --color-success-border: rgba(16, 185, 129, 0.3);
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-warning-border: rgba(245, 158, 11, 0.3);
    --color-warning-highlight: rgba(245, 158, 11, 0.35);
    --color-danger-bg: rgba(239, 68, 68, 0.15);
    --color-danger-border: rgba(239, 68, 68, 0.3);

    /* Focus & interactive */
    --color-focus-ring: rgba(99, 102, 241, 0.2);
    --color-primary-hover-bg: rgba(99, 102, 241, 0.1);
    --color-striped-row: rgba(255, 255, 255, 0.04);
    --color-loading-overlay: rgba(3, 7, 18, 0.8);

    /* Glass */
    --color-glass-border: rgba(255, 255, 255, 0.1);

    /* Surfaces */
    --surface-base: var(--color-gray-900);
    --surface-elevated: rgba(31, 41, 55, 0.9);
    --surface-overlay: rgba(17, 24, 39, 0.95);
    --surface-glass: rgba(31, 41, 55, 0.7);
    --surface-backdrop: rgba(0, 0, 0, 0.7);

    /* Adjusted shadows for dark mode */
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);

    /* Code blocks */
    code {
        background-color: var(--color-gray-800);
    }

    /* Scrollbars */
    ::-webkit-scrollbar-track {
        background: var(--color-gray-800);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--color-gray-600);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-gray-500);
    }
}

/* ============================================
   DARK MODE — Component adjustments
   ============================================ */

/* ---- Cards ---- */
[data-theme="dark"] .card {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

/* ---- Buttons ---- */
[data-theme="dark"] .btn-outline {
    border-color: var(--color-gray-600);
    color: var(--color-gray-200);
}

[data-theme="dark"] .btn-outline:hover {
    background-color: var(--color-gray-700);
    border-color: var(--color-gray-500);
}

[data-theme="dark"] .btn-ghost:hover {
    background-color: var(--color-gray-700);
    color: var(--color-gray-100);
}

/* ---- Forms ---- */
[data-theme="dark"] .form-control {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
    color: var(--color-gray-100);
}

[data-theme="dark"] .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

[data-theme="dark"] .form-control:disabled {
    background-color: var(--color-gray-700);
    color: var(--color-gray-400);
}

[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

[data-theme="dark"] .input-group-text {
    background-color: var(--color-gray-700);
    border-color: var(--color-gray-600);
    color: var(--color-gray-300);
}

[data-theme="dark"] .form-check-label {
    color: var(--color-gray-200);
}

/* ---- Tables (CRITICAL for readability) ---- */

/* Base table text & background */
[data-theme="dark"] .table {
    color: var(--color-gray-200);
    background-color: transparent;
}

/* Headers — override both our .table th AND Bootstrap's .thead-light/.thead-dark */
[data-theme="dark"] .table th,
[data-theme="dark"] .thead-light th,
[data-theme="dark"] .thead-dark th {
    background-color: var(--color-gray-800) !important;
    color: var(--color-gray-400) !important;
    border-color: var(--color-gray-700) !important;
}

/* Cells */
[data-theme="dark"] .table td {
    color: var(--color-gray-200);
    border-color: var(--color-gray-700);
}

/* Row backgrounds — ensure transparency so card bg shows through */
[data-theme="dark"] .table tbody tr {
    background-color: transparent;
}

/* Hover — override Bootstrap .table-hover and our components.css */
[data-theme="dark"] .table tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--color-gray-700) !important;
    color: var(--color-gray-100);
}

/* Striped rows — match both nth-child (our CSS) AND nth-of-type (Bootstrap) */
[data-theme="dark"] .table-striped tbody tr:nth-child(odd),
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--color-striped-row);
}

[data-theme="dark"] .table-striped tbody tr:nth-child(even),
[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
    background-color: transparent;
}

/* Striped hover override */
[data-theme="dark"] .table-striped tbody tr:hover {
    background-color: var(--color-gray-700) !important;
}

/* Ensure text stays readable on all table rows in dark */
[data-theme="dark"] .table td,
[data-theme="dark"] .table-striped tbody tr td {
    color: var(--color-gray-200);
}

[data-theme="dark"] .table td strong,
[data-theme="dark"] .table-striped tbody tr td strong {
    color: var(--color-gray-100);
}

/* Muted text in tables */
[data-theme="dark"] .table .text-muted {
    color: var(--color-gray-400) !important;
}

/* Table borders */
[data-theme="dark"] .table th,
[data-theme="dark"] .table td,
[data-theme="dark"] .table thead th {
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .table-bordered {
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .table-bordered th,
[data-theme="dark"] .table-bordered td {
    border-color: var(--color-gray-700);
}

/* Table container & responsive wrapper */
[data-theme="dark"] .table-container {
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .table-responsive {
    border-color: var(--color-gray-700);
}

/* Bootstrap .table-sm */
[data-theme="dark"] .table-sm th,
[data-theme="dark"] .table-sm td {
    color: var(--color-gray-200);
    border-color: var(--color-gray-700);
}

/* ---- Dropdowns ---- */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .dropdown-item {
    color: var(--color-gray-200);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--color-gray-700);
    color: var(--color-gray-100);
}

[data-theme="dark"] .dropdown-divider {
    background-color: var(--color-gray-700);
}

/* ---- Modals (Bootstrap 4 uses .modal-content) ---- */
[data-theme="dark"] .modal-content {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
    color: var(--color-gray-100);
}

[data-theme="dark"] .modal-dialog {
    background-color: var(--color-gray-800);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--color-gray-700);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--color-gray-700);
}

[data-theme="dark"] .modal-title {
    color: var(--color-gray-100);
}

[data-theme="dark"] .close,
[data-theme="dark"] .modal .close {
    color: var(--color-gray-400);
    text-shadow: none;
    opacity: 0.8;
}

[data-theme="dark"] .close:hover,
[data-theme="dark"] .modal .close:hover {
    color: var(--color-gray-100);
    opacity: 1;
}

/* ---- Navbar / Sidebar ---- */
[data-theme="dark"] .navbar {
    background-color: var(--color-gray-900);
    border-color: var(--color-gray-800);
}

[data-theme="dark"] .sidebar {
    background-color: var(--color-gray-900);
    border-color: var(--color-gray-800);
}

/* Invert dark (Noir) logos to white for dark mode */
[data-theme="dark"] .navbar-brand img,
[data-theme="dark"] .sidebar-logo,
[data-theme="dark"] .login-logo {
    filter: invert(1);
}

/* ---- Alerts ---- */
[data-theme="dark"] .alert-info {
    background-color: var(--color-info-bg);
    border-color: var(--color-info-border);
    color: var(--color-info-text);
}

[data-theme="dark"] .alert-success {
    background-color: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success-text);
}

[data-theme="dark"] .alert-warning {
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
}

[data-theme="dark"] .alert-danger {
    background-color: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
}

[data-theme="dark"] .alert-light {
    background-color: var(--color-gray-700);
    border-color: var(--color-gray-600);
    color: var(--color-gray-200);
}

/* ---- Badges (ensure contrast in dark) ---- */
[data-theme="dark"] .badge-neutral {
    color: var(--color-gray-300);
    background-color: var(--color-gray-700);
}

[data-theme="dark"] .badge-warning {
    color: var(--color-warning-badge);
}

/* ---- Loading states ---- */
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg,
            var(--color-gray-700) 25%,
            var(--color-gray-600) 50%,
            var(--color-gray-700) 75%);
    background-size: 200% 100%;
}

[data-theme="dark"] .loading-overlay {
    background-color: var(--color-loading-overlay);
}

/* ---- Empty states ---- */
[data-theme="dark"] .empty-state-icon {
    color: var(--color-gray-600);
}

/* ---- Modal close & tabs pills ---- */
[data-theme="dark"] .modal-close:hover {
    background-color: var(--color-gray-700);
    color: var(--color-gray-100);
}

[data-theme="dark"] .tabs-pills {
    background-color: var(--color-gray-800);
}

[data-theme="dark"] .tabs-pills .tab.active {
    background-color: var(--color-gray-700);
}

/* ---- Bootstrap overrides for dark ---- */
[data-theme="dark"] .text-muted {
    color: var(--color-gray-400) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--color-gray-200) !important;
}

[data-theme="dark"] .text-body {
    color: var(--color-gray-200) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--color-gray-700) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--color-gray-800) !important;
}

[data-theme="dark"] .bg-dark {
    background-color: var(--color-gray-900) !important;
}

/* Bootstrap bg-warning text-dark used for search highlights */
[data-theme="dark"] .bg-warning {
    background-color: var(--color-warning-highlight) !important;
    color: var(--color-warning-text) !important;
}

[data-theme="dark"] mark,
[data-theme="dark"] .mark {
    background-color: var(--color-warning-highlight);
    color: var(--color-warning-text);
}

[data-theme="dark"] .border-success {
    border-color: var(--color-success) !important;
}

[data-theme="dark"] .border {
    border-color: var(--color-gray-700) !important;
}

[data-theme="dark"] hr {
    border-color: var(--color-gray-700);
}

/* Bootstrap page-link (pagination) */
[data-theme="dark"] .page-link {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
    color: var(--color-gray-200);
}

[data-theme="dark"] .page-link:hover {
    background-color: var(--color-gray-700);
    border-color: var(--color-gray-600);
    color: var(--color-gray-100);
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
    color: var(--color-gray-600);
}

/* ---- Buzzer config display (teams detail view) ---- */
[data-theme="dark"] .buzzer-preview {
    background-color: var(--color-gray-900);
    color: var(--color-gray-200);
    border: 1px solid var(--color-gray-700);
}

/* ---- Confirm dialog / Bootstrap .card in alerts ---- */
[data-theme="dark"] .card-header.bg-success {
    background-color: var(--color-success) !important;
    color: var(--color-text-inverse) !important;
}

/* ---- Toasts ---- */
[data-theme="dark"] .toast {
    background-color: var(--color-gray-800);
    border: 1px solid var(--color-gray-700);
}

/* ---- Upload area ---- */
[data-theme="dark"] .setup-upload-area {
    border-color: var(--color-gray-600);
    background: var(--color-gray-800);
}

[data-theme="dark"] .setup-upload-area:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-hover-bg);
}

/* AG-Grid dark mode */
[data-theme="dark"] .ag-theme-alpine {
    --ag-background-color: var(--color-gray-900);
    --ag-header-background-color: var(--color-gray-800);
    --ag-odd-row-background-color: var(--color-gray-850);
    --ag-row-hover-color: var(--color-gray-700);
    --ag-foreground-color: var(--color-gray-100);
    --ag-border-color: var(--color-gray-700);
}

/* ============================================
   DARK MODE — Heat Manager overrides
   ============================================ */

/* Stats container */
[data-theme="dark"] .stats-container {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

/* Action cards */
[data-theme="dark"] .action-card {
    background: var(--color-gray-800);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .action-card-header {
    background: var(--color-gray-700);
}

[data-theme="dark"] .action-card-title {
    color: var(--color-gray-200);
}

/* Controls bar */
[data-theme="dark"] .controls-bar {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .view-toggle {
    background: var(--color-gray-700);
    border-color: var(--color-gray-600);
}

/* Heat cards */
[data-theme="dark"] .heat-unified-card {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

/* Assignment items */
[data-theme="dark"] .assignment-unified-item {
    background: var(--color-gray-700);
    border-color: var(--color-gray-600);
}

[data-theme="dark"] .assignment-unified-item:hover {
    background: var(--color-gray-800);
    border-color: var(--color-primary);
}

[data-theme="dark"] .team-name-unified {
    color: var(--color-gray-100);
}

[data-theme="dark"] .team-division-unified {
    color: var(--color-gray-400);
}

/* WOD badges */
[data-theme="dark"] .wod-none-unified {
    background: var(--color-gray-700);
    color: var(--color-gray-400);
    border-color: var(--color-gray-600);
}

[data-theme="dark"] .wod-assigned-unified {
    color: var(--color-gray-900);
}

/* Empty / drop states */
[data-theme="dark"] .empty-heat-unified {
    background: var(--color-gray-700);
    color: var(--color-gray-400);
    border-color: var(--color-gray-600);
}

[data-theme="dark"] .empty-heat-unified i {
    color: var(--color-gray-600);
}

[data-theme="dark"] .drop-zone-unified {
    background: var(--color-gray-700);
    border-color: var(--color-gray-600);
    color: var(--color-gray-400);
}

/* Matrix view */
[data-theme="dark"] .matrix-table-unified {
    background: var(--color-gray-800);
}

[data-theme="dark"] .matrix-table-unified td {
    border-color: var(--color-gray-700);
    color: var(--color-gray-200);
}

/* ============================================
   DARK MODE — WOD Editor overrides
   ============================================ */

/* Table responsive border */
[data-theme="dark"] .table-responsive {
    border-color: var(--color-gray-700);
}

/* Division headers & team rows */
[data-theme="dark"] .division-header {
    background-color: var(--color-gray-700);
    color: var(--color-gray-200);
}

[data-theme="dark"] .team-row:hover {
    background-color: var(--color-gray-700);
}

/* WOD cards */
[data-theme="dark"] .wod-card .card {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

/* Upload area */
[data-theme="dark"] .upload-area {
    border-color: var(--color-gray-600);
    background: var(--color-gray-800);
    color: var(--color-gray-300);
}

[data-theme="dark"] .upload-area:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-hover-bg);
}

/* Order indicator */
[data-theme="dark"] .order-indicator {
    background-color: var(--color-gray-600);
}

/* Select disabled options */
[data-theme="dark"] select option:disabled {
    background-color: var(--color-gray-700);
    color: var(--color-gray-500);
}

/* Sortable items in dark mode */
[data-theme="dark"] .sortable-item.sortable-ghost {
    background-color: var(--color-gray-700) !important;
}

/* Bootstrap 4 overrides needed for setup pages in dark mode */
[data-theme="dark"] .card-header {
    background-color: var(--color-gray-700);
    border-bottom-color: var(--color-gray-600);
    color: var(--color-gray-100);
}

[data-theme="dark"] .card-body {
    background-color: var(--color-gray-800);
    color: var(--color-gray-200);
}

[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--color-gray-700);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--color-gray-400);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--color-gray-600);
    color: var(--color-gray-200);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700) var(--color-gray-700) var(--color-gray-800);
    color: var(--color-gray-100);
}

/* Labels and small text */
[data-theme="dark"] label,
[data-theme="dark"] .form-text {
    color: var(--color-gray-300);
}

[data-theme="dark"] .text-secondary {
    color: var(--color-gray-400) !important;
}

/* Custom select (Bootstrap 4) */
[data-theme="dark"] .custom-select,
[data-theme="dark"] select.form-control {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
    color: var(--color-gray-100);
}

/* List groups */
[data-theme="dark"] .list-group-item {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
    color: var(--color-gray-200);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--color-gray-700);
}

/* ============================================
   DARK MODE — Heat Planning View (new)
   ============================================ */

/* Zone filter bar */
[data-theme="dark"] .zone-filter-bar {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .zone-filter-label {
    color: var(--color-gray-400);
}

/* WOD filter bar (collapsible) */
[data-theme="dark"] .wod-filter-bar {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .wod-filter-toggle {
    color: var(--color-gray-400);
}

[data-theme="dark"] .wod-filter-toggle:hover {
    color: var(--color-gray-200);
}

/* WOD timeline nodes */
[data-theme="dark"] .wod-timeline-bar {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .wod-timeline-node {
    background: var(--color-gray-700);
    border-color: var(--color-gray-600);
    color: var(--color-gray-200);
}

[data-theme="dark"] .wod-timeline-node:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-hover-bg);
}

[data-theme="dark"] .wod-timeline-node.selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

[data-theme="dark"] .wod-timeline-node.rest {
    background: var(--color-gray-800);
    border-color: var(--color-gray-600);
}

/* Zone group headers */
[data-theme="dark"] .zone-group-header {
    color: var(--color-gray-200);
}

/* Heat cards (planning view) */
[data-theme="dark"] .heat-card-planning {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .heat-card-header {
    border-bottom-color: var(--color-gray-700);
}

[data-theme="dark"] .heat-card-title {
    color: var(--color-gray-100);
}

[data-theme="dark"] .heat-card-time {
    color: var(--color-gray-400);
}

/* Lane rows */
[data-theme="dark"] .lane-row {
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .lane-occupied {
    background: var(--color-gray-700);
}

[data-theme="dark"] .lane-occupied:hover {
    background: var(--color-gray-600);
}

[data-theme="dark"] .lane-empty {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .lane-empty:hover {
    background: var(--color-gray-700);
    border-color: var(--color-primary);
}

[data-theme="dark"] .lane-number {
    color: var(--color-gray-400);
    background: var(--color-gray-800);
}

[data-theme="dark"] .lane-team-name {
    color: var(--color-gray-100);
}

[data-theme="dark"] .lane-placeholder {
    color: var(--color-gray-500);
}

[data-theme="dark"] .lane-wod-badge {
    background: rgba(99, 102, 241, 0.15);
    color: var(--color-primary);
}

[data-theme="dark"] .lane-wod-badge.lane-wod-missing {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger-text);
}

/* Team pool */
[data-theme="dark"] .team-pool-panel {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .team-pool-title {
    color: var(--color-gray-200);
}

[data-theme="dark"] .team-chip {
    background: var(--color-gray-700);
    border-color: var(--color-gray-600);
    color: var(--color-gray-200);
}

[data-theme="dark"] .team-chip:hover {
    background: var(--color-gray-600);
    border-color: var(--color-primary);
}

[data-theme="dark"] .team-chip.selected {
    background: var(--color-primary-hover-bg);
    border-color: var(--color-primary);
}

/* Heat card footer */
[data-theme="dark"] .heat-card-footer {
    border-top-color: var(--color-gray-700);
}

/* Wizard mode cards */
[data-theme="dark"] .wizard-mode-card {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
    color: var(--color-gray-200);
}

[data-theme="dark"] .wizard-mode-card:hover {
    border-color: var(--color-gray-500);
}

[data-theme="dark"] .wizard-mode-card.active {
    border-color: var(--color-primary);
    background: var(--color-primary-hover-bg);
}

/* Empty state */
[data-theme="dark"] .heat-empty-state {
    color: var(--color-gray-400);
}

[data-theme="dark"] .heat-empty-icon {
    color: var(--color-gray-600);
}

/* Inline selects */
[data-theme="dark"] .inline-team-select,
[data-theme="dark"] .inline-wod-select {
    background-color: var(--color-gray-700);
    border-color: var(--color-gray-600);
    color: var(--color-gray-100);
}

/* Chain sync badges */
[data-theme="dark"] .chain-sync-badge {
    background: var(--color-gray-700);
}

/* ============================================
   DARK MODE — WOD Editor (new)
   ============================================ */

/* Tree panel & edit panel */
[data-theme="dark"] .wod-tree-panel,
[data-theme="dark"] .wod-edit-panel {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .wod-tree-header {
    background: var(--color-gray-700);
    border-bottom-color: var(--color-gray-600);
    color: var(--color-gray-200);
}

/* Tree nodes */
[data-theme="dark"] .tree-node-header:hover {
    background-color: var(--color-primary-hover-bg);
}

[data-theme="dark"] .tree-node-header.active {
    background-color: var(--color-primary-hover-bg);
    border-left-color: var(--color-primary);
}

[data-theme="dark"] .tree-node-label {
    color: var(--color-gray-200);
}

[data-theme="dark"] .tree-node-children {
    border-left-color: var(--color-gray-600);
}

[data-theme="dark"] .tree-add-btn {
    color: var(--color-gray-500);
    border-color: var(--color-gray-600);
}

[data-theme="dark"] .tree-add-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: var(--color-primary-hover-bg);
}

/* Tree node icon detail type */
[data-theme="dark"] .tree-node-icon.type-detail {
    background-color: var(--color-gray-600);
    color: var(--color-gray-300);
}

[data-theme="dark"] .tree-node-icon.type-cashout {
    color: var(--color-gray-900);
}

/* Edit panel */
[data-theme="dark"] .edit-panel-empty {
    color: var(--color-gray-500);
}

[data-theme="dark"] .edit-panel-header {
    border-bottom-color: var(--color-gray-700);
}

[data-theme="dark"] .edit-panel-actions {
    border-top-color: var(--color-gray-700);
}

/* Summary card */
[data-theme="dark"] .wod-summary-card {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .wod-summary-divider {
    background: var(--color-gray-700);
}

[data-theme="dark"] .wod-summary-chain {
    border-top-color: var(--color-gray-700);
}

/* Chain visualizer */
[data-theme="dark"] .wod-chain-container {
    background: var(--color-gray-900);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .wod-chain-node {
    background: var(--color-gray-800);
    border-color: var(--color-gray-600);
    color: var(--color-gray-200);
}

[data-theme="dark"] .wod-chain-node:hover {
    border-color: var(--color-primary);
}

[data-theme="dark"] .wod-chain-node.active {
    border-color: var(--color-primary);
    background: var(--color-primary-hover-bg);
}

[data-theme="dark"] .wod-chain-node.type-repos {
    border-color: var(--color-warning);
    background: var(--color-warning-bg);
}

/* Template cards */
[data-theme="dark"] .wod-template-card {
    border-color: var(--color-gray-600);
    background: var(--color-gray-800);
    color: var(--color-gray-200);
}

[data-theme="dark"] .wod-template-card:hover {
    border-color: var(--color-primary);
}

[data-theme="dark"] .wod-template-card-structure {
    border-top-color: var(--color-gray-700);
}

/* Modal sections */
[data-theme="dark"] .modal-section-collapsible {
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .modal-section-header {
    background: var(--color-gray-700);
    color: var(--color-gray-200);
}

[data-theme="dark"] .modal-section-header:hover {
    background: var(--color-gray-600);
}

/* Badge type adjustments for dark */
[data-theme="dark"] .badge-type-repos {
    color: var(--color-gray-900);
}