/* Comprehensive Dark Mode Fixes for Abco ERP */

/* CRITICAL SAFEGUARD: Prevent dark mode CSS from applying when user wants light mode */
/* This ensures that even if .dark class somehow gets applied, light mode styles take precedence */
/* Only apply dark mode styles when .dark class is present AND user actually wants dark mode */
/* The ThemeProvider ensures .dark class is only applied when user wants dark mode */

/* Base dark mode styles */
.dark {
    color-scheme: dark;
}

/* Background colors */
.dark body {
    background-color: #0f172a;
    color: #f8fafc;
}

.dark .bg-white {
    background-color: #1e293b !important;
}

.dark .bg-gray-50 {
    background-color: #334155 !important;
}

.dark .bg-gray-100 {
    background-color: #475569 !important;
}

.dark .bg-gray-200 {
    background-color: #64748b !important;
}

.dark .bg-gray-800 {
    background-color: #1e293b !important;
}

.dark .bg-gray-900 {
    background-color: #0f172a !important;
}

/* Text colors */
.dark .text-gray-900 {
    color: #f8fafc !important;
}

.dark .text-gray-800 {
    color: #f1f5f9 !important;
}

.dark .text-gray-700 {
    color: #e2e8f0 !important;
}

.dark .text-gray-600 {
    color: #cbd5e1 !important;
}

.dark .text-gray-500 {
    color: #94a3b8 !important;
}

.dark .text-gray-400 {
    color: #64748b !important;
}

.dark .text-gray-300 {
    color: #94a3b8 !important;
}

.dark .text-gray-200 {
    color: #cbd5e1 !important;
}

.dark .text-gray-100 {
    color: #e2e8f0 !important;
}

/* Border colors */
.dark .border-gray-200 {
    border-color: #334155 !important;
}

.dark .border-gray-300 {
    border-color: #475569 !important;
}

.dark .border-gray-400 {
    border-color: #64748b !important;
}

.dark .border-gray-500 {
    border-color: #94a3b8 !important;
}

/* Card and component backgrounds */
.dark .bg-white {
    background-color: #1e293b !important;
}

.dark .bg-gray-50 {
    background-color: #334155 !important;
}

.dark .bg-gray-100 {
    background-color: #475569 !important;
}

/* Pipeline board dark mode */
.dark .pipeline-stage {
    background-color: #374151 !important;
}

.dark .pipeline-item {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Stats cards */
.dark .stat-card {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .stat-value {
    color: #f9fafb !important;
}

.dark .stat-label {
    color: #9ca3af !important;
}

/* Tables */
.dark table {
    background-color: #1f2937 !important;
}

.dark th {
    background-color: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

.dark td {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

.dark tr:hover {
    background-color: #374151 !important;
}

/* Form elements */
.dark input {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

.dark input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.dark input::placeholder {
    color: #94a3b8 !important;
}

.dark textarea {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

.dark select {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

/* Buttons */
.dark .btn-primary {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

.dark .btn-secondary {
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
    color: #ffffff !important;
}

.dark .btn-outline {
    background-color: transparent !important;
    border-color: #6b7280 !important;
    color: #d1d5db !important;
}

.dark .btn-outline:hover {
    background-color: #374151 !important;
    border-color: #9ca3af !important;
    color: #f9fafb !important;
}

/* Modals */
.dark .modal-content {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .modal-header {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .modal-footer {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Sidebar */
.dark .sidebar {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.dark .sidebar-item {
    color: #cbd5e1 !important;
}

.dark .sidebar-item:hover {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

.dark .sidebar-item.active {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* Navigation */
.dark .nav-tabs {
    border-color: #374151 !important;
}

.dark .nav-tab {
    color: #9ca3af !important;
}

.dark .nav-tab.active {
    color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* Dropdowns */
.dark .dropdown-menu {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
}

.dark .dropdown-item {
    color: #d1d5db !important;
}

.dark .dropdown-item:hover {
    background-color: #374151 !important;
    color: #f9fafb !important;
}

/* Status badges */
.dark .badge-success {
    background-color: #065f46 !important;
    color: #10b981 !important;
}

.dark .badge-warning {
    background-color: #92400e !important;
    color: #f59e0b !important;
}

.dark .badge-error {
    background-color: #991b1b !important;
    color: #ef4444 !important;
}

.dark .badge-info {
    background-color: #1e40af !important;
    color: #60a5fa !important;
}

/* Progress bars */
.dark .progress-bar {
    background-color: #374151 !important;
}

.dark .progress-fill {
    background-color: #3b82f6 !important;
}

/* Kanban board specific fixes */
.dark .kanban-column {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

.dark .kanban-card {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #f9fafb !important;
}

.dark .kanban-card:hover {
    background-color: #374151 !important;
}

/* Client cards */
.dark .client-card {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .client-card:hover {
    background-color: #374151 !important;
}

/* Pipeline specific fixes */
.dark .pipeline-board {
    background-color: #374151 !important;
}

.dark .pipeline-stage-header {
    color: #f9fafb !important;
}

.dark .pipeline-item {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .pipeline-item:hover {
    background-color: #374151 !important;
}

/* Search and filters */
.dark .search-input {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

.dark .filter-select {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* Charts and graphs */
.dark .chart-container {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Loading states */
.dark .loading-skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%) !important;
}

/* Tooltips */
.dark .tooltip {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
    border-color: #374151 !important;
}

/* Alerts and notifications */
.dark .alert {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .alert-success {
    background-color: #064e3b !important;
    border-color: #065f46 !important;
    color: #10b981 !important;
}

.dark .alert-warning {
    background-color: #78350f !important;
    border-color: #92400e !important;
    color: #f59e0b !important;
}

.dark .alert-error {
    background-color: #7f1d1d !important;
    border-color: #991b1b !important;
    color: #ef4444 !important;
}

.dark .alert-info {
    background-color: #1e3a8a !important;
    border-color: #1e40af !important;
    color: #60a5fa !important;
}

/* Specific component fixes */
.dark .dashboard-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.dark .dashboard-metric {
    color: #f8fafc !important;
}

.dark .dashboard-label {
    color: #94a3b8 !important;
}

/* Enhanced menu item visibility */
.dark .menu-item {
    color: #cbd5e1 !important;
}

.dark .menu-item:hover {
    color: #f8fafc !important;
    background-color: #334155 !important;
}

.dark .menu-item.active {
    color: #ffffff !important;
    background-color: #3b82f6 !important;
}

/* Better contrast for icons */
.dark .fas, .dark .far, .dark .fab {
    color: #cbd5e1 !important;
}

.dark .fas:hover, .dark .far:hover, .dark .fab:hover {
    color: #f8fafc !important;
}

/* Sidebar specific improvements */
.dark .sidebar {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Ensure sidebar respects component's theme state, not document root */
.dark [data-theme="light"] {
    background-color: white !important;
    border-color: #e5e7eb !important;
}

[data-theme="light"] button {
    color: #374151 !important;
}

[data-theme="light"] button:hover {
    background-color: #f9fafb !important;
    color: #111827 !important;
}

/* Preserve intentional light-on-dark button treatments */
[data-theme="light"] button.text-white,
[data-theme="light"] button[class*="text-white"],
[data-theme="light"] button.text-white:hover,
[data-theme="light"] button[class*="text-white"]:hover,
[data-theme="light"] button.text-white:focus,
[data-theme="light"] button[class*="text-white"]:focus,
[data-theme="light"] button.text-white:active,
[data-theme="light"] button[class*="text-white"]:active,
[data-theme="light"] button.btn-primary,
[data-theme="light"] button.btn-primary:hover,
[data-theme="light"] button.btn-primary:focus,
[data-theme="light"] button.btn-primary:active {
    color: #ffffff !important;
}

/* Preserve primary button background colors on hover */
[data-theme="light"] button.bg-primary-600,
[data-theme="light"] button[class*="bg-primary-600"] {
    background-color: #0369a1 !important;
}

[data-theme="light"] button.bg-primary-600:hover,
[data-theme="light"] button[class*="bg-primary-600"]:hover,
[data-theme="light"] button.bg-primary-600.text-white:hover,
[data-theme="light"] button[class*="bg-primary-600"][class*="text-white"]:hover {
    background-color: #075985 !important;
    color: #ffffff !important;
}

[data-theme="light"] button.text-white .fas,
[data-theme="light"] button.text-white .far,
[data-theme="light"] button.text-white .fab,
[data-theme="light"] button[class*="text-white"] .fas,
[data-theme="light"] button[class*="text-white"] .far,
[data-theme="light"] button[class*="text-white"] .fab {
    color: inherit !important;
}

.dark .sidebar-item {
    color: #cbd5e1 !important;
}

.dark .sidebar-item:hover {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

.dark .sidebar-item.active {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* Header improvements */
.dark .header-mobile {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Search input improvements */
.dark input[type="text"] {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

.dark input[type="text"]::placeholder {
    color: #94a3b8 !important;
}

.dark input[type="text"]:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Mobile specific dark mode fixes */
@media (max-width: 768px) {
    .dark .mobile-card {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
    }
    
    .dark .mobile-nav {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
    }
    
    .dark .mobile-nav-item {
        color: #d1d5db !important;
    }
    
    .dark .mobile-nav-item.active {
        background-color: #374151 !important;
        color: #f9fafb !important;
    }
}

/* Print styles - ensure dark mode doesn't affect printing */
@media print {
    .dark * {
        background: white !important;
        color: black !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .dark {
        --tw-bg-opacity: 1;
        --tw-text-opacity: 1;
    }
    
    .dark .bg-white {
        background-color: #000000 !important;
    }
    
    .dark .text-gray-900 {
        color: #ffffff !important;
    }
    
    .dark .border-gray-200 {
        border-color: #ffffff !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .dark * {
        transition: none !important;
        animation: none !important;
    }
}

/* Light mode safeguards (ensure readable text when not using .dark) */
html:not(.dark) h1,
html:not(.dark) h1 *,
html:not(.dark) .text-gray-900 {
    color: #111827 !important; /* Tailwind gray-900 */
}

/* Force "Clients and Leads" heading to be dark in light mode */
html:not(.dark) h1.text-gray-900,
html:not(.dark) h1[class*="text-gray-900"],
body:not(.dark) h1.text-gray-900,
body:not(.dark) div h1 {
    color: #111827 !important;
}

/* Even more specific - target the exact heading */
html:not(.dark) div.flex h1,
html:not(.dark) div.flex div h1,
html:not(.dark) .space-y-6 h1,
html:not(.dark) .space-y-6 div h1 {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Ultra-specific: Target "Clients and Leads" heading - highest priority */
html:not(.dark) h1.text-2xl,
html:not(.dark) h1.font-bold,
html:not(.dark) div.flex div.flex-1 div h1,
html:not(.dark) div[class*="flex"] div[class*="flex"] h1,
html:not(.dark) .space-y-6 div.flex h1 {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Force color even if inline style exists but wrong */
body:not(.dark) h1,
html:not(.dark) body h1 {
    color: #111827 !important;
}

/* Direct targeting of Clients and Leads heading - maximum specificity - ONLY in light mode */
html:not(.dark) #clients-leads-heading,
body:not(.dark) #clients-leads-heading,
html:not(.dark) h1#clients-leads-heading,
body:not(.dark) h1#clients-leads-heading,
html:not(.dark) div#clients-leads-heading,
body:not(.dark) div#clients-leads-heading {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Override any dark mode classes on the heading in light mode */
html:not(.dark) #clients-leads-heading.text-gray-100,
html:not(.dark) #clients-leads-heading[class*="text-gray-100"],
html:not(.dark) #clients-leads-heading.dark\\:text-gray-100 {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Ensure input fields are readable in light mode - only override if no inline style */
html:not(.dark) input[type="text"]:not([style*="color"]):not([style*="background"]),
html:not(.dark) input[type="search"]:not([style*="color"]):not([style*="background"]) {
    color: #111827 !important;
}

/* Ensure select dropdowns are readable in light mode - only if not styled inline */
html:not(.dark) select:not([style*="color"]):not([style*="background"]) {
    color: #111827 !important;
}

/* Star icon visibility in dark mode */
.dark .far.fa-star {
    color: #e5e7eb !important; /* Light gray - clearly visible */
    opacity: 1 !important;
}

.dark .fas.fa-star {
    color: #eab308 !important; /* Bright yellow - clearly visible */
    opacity: 1 !important;
}

/* Ensure starred stars are bright yellow in dark mode */
.dark button:hover .far.fa-star {
    color: #fbbf24 !important; /* Slightly brighter on hover */
}

.dark button:hover .fas.fa-star {
    color: #facc15 !important; /* Brighter yellow on hover */
}