/**
 * Dark Mode Override Styles
 * This file ensures dark mode works everywhere by overriding hardcoded colors
 * Load this file LAST in all HTML pages
 */

/* ========================================
   ROOT DARK MODE VARIABLES
   ======================================== */
[data-theme="dark"] {
    /* Primary colors */
    --bg-primary: #0F172A !important;
    --bg-secondary: #1E293B !important;
    --bg-tertiary: #334155 !important;
    
    /* Text colors */
    --text-primary: #F1F5F9 !important;
    --text-secondary: #CBD5E1 !important;
    --text-muted: #94A3B8 !important;
    
    /* Border colors */
    --border-primary: #334155 !important;
    --border-secondary: #475569 !important;
    
    /* Accent colors */
    --accent-primary: #3B82F6 !important;
    --accent-secondary: #60A5FA !important;
    
    /* Shadow colors */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5) !important;
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
}

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

[data-theme="dark"] * {
    border-color: var(--border-primary);
}

/* Headers */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary) !important;
}

/* Paragraphs and text */
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] li,
[data-theme="dark"] a {
    color: var(--text-primary);
}

/* Links */
[data-theme="dark"] a {
    color: var(--accent-secondary);
}

[data-theme="dark"] a:hover {
    color: var(--accent-primary);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--accent-primary) !important;
    outline-color: var(--accent-primary) !important;
}

/* ========================================
   BUTTONS
   ======================================== */
[data-theme="dark"] button,
[data-theme="dark"] .btn {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] button:hover,
[data-theme="dark"] .btn:hover {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
}

[data-theme="dark"] .btn-primary {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: white !important;
}

[data-theme="dark"] .btn-primary:hover {
    background: var(--accent-secondary) !important;
    border-color: var(--accent-secondary) !important;
}

/* ========================================
   CARDS AND CONTAINERS
   ======================================== */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .box,
[data-theme="dark"] .container {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .dialog {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

/* ========================================
   NAVIGATION AND HEADERS
   ======================================== */
[data-theme="dark"] nav,
[data-theme="dark"] .navbar,
[data-theme="dark"] header {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .nav-link,
[data-theme="dark"] .navbar-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .navbar-link:hover {
    color: var(--accent-primary) !important;
}

/* ========================================
   TABLES
   ======================================== */
[data-theme="dark"] table {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

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

[data-theme="dark"] td {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] tr:hover td {
    background: var(--bg-tertiary) !important;
}

/* ========================================
   DROPDOWN AND MENUS
   ======================================== */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .menu,
[data-theme="dark"] .context-menu {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

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

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .menu-item:hover {
    background: var(--bg-tertiary) !important;
    color: var(--accent-primary) !important;
}

/* ========================================
   ALERTS AND NOTIFICATIONS
   ======================================== */
[data-theme="dark"] .alert {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .alert-success {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #86EFAC !important;
}

[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-error {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #FCA5A5 !important;
}

[data-theme="dark"] .alert-warning {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #FDE68A !important;
}

[data-theme="dark"] .alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #93C5FD !important;
}

/* ========================================
   BADGES AND LABELS
   ======================================== */
[data-theme="dark"] .badge,
[data-theme="dark"] .label,
[data-theme="dark"] .tag {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

/* ========================================
   PROGRESS BARS
   ======================================== */
[data-theme="dark"] .progress {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .progress-bar {
    background: var(--accent-primary) !important;
}

/* ========================================
   TOOLTIPS AND POPOVERS
   ======================================== */
[data-theme="dark"] .tooltip,
[data-theme="dark"] .popover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

/* ========================================
   SCROLLBARS
   ======================================== */
[data-theme="dark"] ::-webkit-scrollbar {
    background: var(--bg-secondary) !important;
}

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

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

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

/* ========================================
   CODE BLOCKS
   ======================================== */
[data-theme="dark"] pre,
[data-theme="dark"] code {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

/* ========================================
   DIVIDERS AND SEPARATORS
   ======================================== */
[data-theme="dark"] hr {
    border-color: var(--border-primary) !important;
}

/* ========================================
   SELECTION HIGHLIGHTING
   ======================================== */
[data-theme="dark"] ::selection {
    background: var(--accent-primary) !important;
    color: white !important;
}

[data-theme="dark"] ::-moz-selection {
    background: var(--accent-primary) !important;
    color: white !important;
}

/* ========================================
   SPECIFIC COMPONENT OVERRIDES
   ======================================== */

/* Override white backgrounds */
[data-theme="dark"] .bg-white,
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color:white"] {
    background: var(--bg-secondary) !important;
}

/* Override light backgrounds */
[data-theme="dark"] .bg-light,
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"] {
    background: var(--bg-secondary) !important;
}

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

/* Fix any remaining white text on white background */
[data-theme="dark"] .text-white {
    color: var(--text-primary) !important;
}

/* ========================================
   SHADOWS
   ======================================== */
[data-theme="dark"] .shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

[data-theme="dark"] .shadow {
    box-shadow: var(--shadow-md) !important;
}

[data-theme="dark"] .shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* ========================================
   ANIMATIONS AND TRANSITIONS
   ======================================== */
[data-theme="dark"] * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ========================================
   UTILITY OVERRIDES
   ======================================== */
[data-theme="dark"] .opacity-50 {
    opacity: 0.7 !important;
}

[data-theme="dark"] .opacity-75 {
    opacity: 0.85 !important;
}

/* ========================================
   TRANSLATOR-SPECIFIC OVERRIDES
   ======================================== */

/* Translation input/output areas */
[data-theme="dark"] .translation-input,
[data-theme="dark"] .translation-output,
[data-theme="dark"] .translator-box {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

/* Language selector */
[data-theme="dark"] .language-selector {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

/* Feature cards */
[data-theme="dark"] .feature-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

/* Pricing cards */
[data-theme="dark"] .pricing-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

/* Dashboard sections */
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .stats-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

/* ========================================
   FORCE DARK MODE ON SPECIFIC ELEMENTS
   ======================================== */
[data-theme="dark"] .force-dark {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    [data-theme="dark"] * {
        background: white !important;
        color: black !important;
    }
}