/**
 * Visual Containers Dark Mode Fix
 * 
 * This file adds dark mode support to visual containers
 * Add this to visual-containers.css or include separately
 */

/* Dark mode styles for visual containers */
[data-theme="dark"] .visual-nested-container {
    background: var(--bg-secondary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .visual-nested-container:hover {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .container-header {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .container-title-input,
[data-theme="dark"] .container-title-display {
    color: var(--text-primary);
}

[data-theme="dark"] .container-title-input:hover,
[data-theme="dark"] .container-title-display:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .container-title-input:focus {
    background: var(--bg-card);
}

[data-theme="dark"] .container-action-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

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

[data-theme="dark"] .delete-btn:hover {
    background: rgba(220, 38, 38, 0.2);
    color: #ef4444;
}

[data-theme="dark"] .empty-container-message {
    color: var(--text-muted);
    border-color: var(--border-color);
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .board-move-handle {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .board-move-handle:hover {
    background: var(--bg-card);
}

[data-theme="dark"] .board-move-handle span {
    background: var(--text-muted);
}

[data-theme="dark"] .board-move-handle:hover span {
    background: var(--accent);
}

[data-theme="dark"] .create-container-btn {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .create-container-btn:hover {
    background: var(--bg-card);
    border-color: var(--border-light);
    color: var(--text-primary);
}

[data-theme="dark"] .visual-standalone-container::before {
    color: var(--text-muted);
}

/* Dark mode color themes for containers */
[data-theme="dark"] .visual-nested-container[data-color="green"] {
    --container-border: #059669;
    --container-bg: rgba(16, 185, 129, 0.1);
    --container-header-bg: rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .visual-nested-container[data-color="blue"] {
    --container-border: #2563eb;
    --container-bg: rgba(59, 130, 246, 0.1);
    --container-header-bg: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .visual-nested-container[data-color="orange"] {
    --container-border: #dc2626;
    --container-bg: rgba(249, 115, 22, 0.1);
    --container-header-bg: rgba(249, 115, 22, 0.2);
}

/* Default purple theme for dark mode */
[data-theme="dark"] .visual-nested-container {
    --container-border: #6366f1;
    --container-bg: rgba(99, 102, 241, 0.1);
    --container-header-bg: rgba(99, 102, 241, 0.2);
}

/* Dark mode drag states */
[data-theme="dark"] .drop-zone-active {
    background: rgba(99, 102, 241, 0.1);
}

[data-theme="dark"] .drag-over {
    background: rgba(99, 102, 241, 0.2) !important;
}

[data-theme="dark"] .board-drop-indicator {
    background: var(--accent);
}

[data-theme="dark"] .board-drop-indicator::before,
[data-theme="dark"] .board-drop-indicator::after {
    background: var(--accent);
}

/* Overall background fix */
[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .container {
    background-color: transparent;
}