/**
 * Dark Mode Fix for Kanban Dashboard
 * Date: August 16, 2025
 * 
 * This file fixes the main content area not applying dark mode styles
 * IMPORTANT: Preserves all existing functionality including:
 * - Voice system visual feedback
 * - Drag and drop interactions
 * - Calendar badges
 * - Touch enhancement
 * - Visual containers
 */

/* ============================================
   MAIN CONTAINER & BACKGROUND FIXES
   ============================================ */

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

/* Fix the container to use dark background */
[data-theme="dark"] .container {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
}

/* Also fix any Bootstrap container classes */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] .container-lg,
[data-theme="dark"] .container-md,
[data-theme="dark"] .container-sm,
[data-theme="dark"] .container-xl,
[data-theme="dark"] .container-xxl {
    background-color: transparent !important;
    color: var(--text-primary);
}

/* Ensure expanded view has proper background */
[data-theme="dark"] .expanded-view {
    background-color: transparent;
}

/* Fix expanded board backgrounds */
[data-theme="dark"] .expanded-board {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

/* Fix board card backgrounds - important to override line 289 in base.css */
[data-theme="dark"] .board-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* ============================================
   COLUMN & CARD STYLES
   ============================================ */

/* Fix column backgrounds */
[data-theme="dark"] .column {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Fix column headers */
[data-theme="dark"] .column-header {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

/* Fix task cards */
[data-theme="dark"] .card,
[data-theme="dark"] .task-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .task-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ============================================
   FORM ELEMENTS & INPUTS
   ============================================ */

/* Fix input fields */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--accent);
    outline: none;
}

/* Fix board title inputs */
[data-theme="dark"] .board-title {
    background-color: transparent;
    color: var(--text-primary);
}

[data-theme="dark"] .board-title:focus {
    background-color: var(--bg-secondary);
}

/* ============================================
   MODALS & OVERLAYS
   ============================================ */

/* Fix modal backgrounds */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

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

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

/* ============================================
   BUTTONS & INTERACTIVE ELEMENTS
   ============================================ */

/* Fix button styles */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .bulk-action-btn {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .bulk-action-btn:hover {
    background-color: var(--bg-secondary);
    border-color: var(--accent);
}

/* Delete buttons need special handling */
[data-theme="dark"] .delete-btn,
[data-theme="dark"] .btn-danger {
    background-color: rgba(220, 38, 38, 0.2);
    color: #ef4444;
    border-color: #dc2626;
}

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

/* ============================================
   DRAG & DROP VISUAL FEEDBACK
   Important: Preserve drag/drop functionality
   ============================================ */

[data-theme="dark"] .dragging {
    opacity: 0.5;
    background-color: var(--bg-tertiary) !important;
}

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

[data-theme="dark"] .drop-zone-active {
    background-color: rgba(99, 102, 241, 0.1);
    border: 2px dashed var(--accent);
}

/* ============================================
   VOICE SYSTEM VISUAL FEEDBACK
   Important: Preserve voice UI indicators
   ============================================ */

[data-theme="dark"] .voice-badge,
[data-theme="dark"] .calendar-badge {
    /* Maintain existing badge colors for visibility */
    filter: brightness(0.9);
}

[data-theme="dark"] .voice-recording {
    background-color: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

[data-theme="dark"] .voice-processing {
    background-color: rgba(99, 102, 241, 0.2);
    border-color: var(--accent);
}

/* ============================================
   CALENDAR INTEGRATION
   Important: Preserve calendar badges
   ============================================ */

[data-theme="dark"] .calendar-indicator {
    /* Keep calendar indicators visible */
    filter: brightness(0.9);
}

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

/* ============================================
   TOUCH ENHANCEMENT VISUAL FEEDBACK
   Important: Preserve touch interactions
   ============================================ */

[data-theme="dark"] .touch-feedback {
    background-color: rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .touch-ripple {
    background-color: rgba(99, 102, 241, 0.2);
}

/* ============================================
   SCROLLBARS
   ============================================ */

[data-theme="dark"] ::-webkit-scrollbar {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--bg-tertiary);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-color);
}

/* ============================================
   BOARD CONTENT AREA
   ============================================ */

[data-theme="dark"] .board-content {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-color);
}

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

/* ============================================
   STATISTICS & META INFO
   ============================================ */

[data-theme="dark"] .stats,
[data-theme="dark"] .board-stats,
[data-theme="dark"] .board-meta {
    color: var(--text-secondary);
}

[data-theme="dark"] .stat-value {
    color: var(--text-primary);
}

/* ============================================
   EMPTY STATES
   ============================================ */

[data-theme="dark"] .empty-state,
[data-theme="dark"] .no-boards-message {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* ============================================
   NESTED KANBAN SUPPORT
   ============================================ */

[data-theme="dark"] .nested-kanban {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .nested-kanban-header {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ============================================
   VISUAL CONTAINERS INTEGRATION
   ============================================ */

[data-theme="dark"] .visual-container {
    /* Preserve visual container functionality */
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* ============================================
   ACTION BUTTONS & CARD ACTIONS
   ============================================ */

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

[data-theme="dark"] .action-btn {
    color: var(--text-secondary);
}

[data-theme="dark"] .action-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

/* ============================================
   LOADING STATES
   ============================================ */

[data-theme="dark"] .loading-overlay {
    background-color: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .spinner {
    border-color: var(--bg-tertiary);
    border-top-color: var(--accent);
}

/* ============================================
   TOOLTIPS
   ============================================ */

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

/* ============================================
   BOOTSTRAP OVERRIDES
   ============================================ */

/* Fix Bootstrap cards */
[data-theme="dark"] .card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

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

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

/* Fix Bootstrap modals */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

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

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

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

/* Fix Bootstrap dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

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

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Fix Bootstrap forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--accent);
    color: var(--text-primary);
}

/* ============================================
   IMPORTANT: Override any hardcoded white backgrounds
   ============================================ */

[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background-color:white"] {
    background-color: var(--bg-card) !important;
}

/* Fix any hardcoded black text on dark backgrounds */
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:black"] {
    color: var(--text-primary) !important;
}