/* Dark Mode Variables Override */
html[data-theme="dark"] {
    --bg-color: #111827;
    /* Gray 900 */
    --card-bg: #1F2937;
    /* Gray 800 */
    --text-main: #F9FAFB;
    /* Gray 50 */
    --text-muted: #9CA3AF;
    /* Gray 400 */
    --border-color: #374151;
    /* Gray 700 */

    /* Slightly Adjust Primary if needed, but standard indigo usually works on dark too */
    /* --primary: #6366F1; Indigo 500 */

    --success-bg: #064E3B;
    /* Emerald 900 */
    --success-text: #6EE7B7;
    /* Emerald 300 */
}

/* Fix specific elements for dark mode if they rely on hardcoded whites */
[data-theme="dark"] .input-group,
[data-theme="dark"] .input-addon,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: #374151;
    /* Gray 700 */
    border-color: #4B5563;
    /* Gray 600 */
    color: #F9FAFB;
}

[data-theme="dark"] .input-addon {
    background-color: #4B5563;
    /* Gray 600 */
    border-right-color: #4B5563;
    color: #D1D5DB;
}

[data-theme="dark"] .related-card {
    background-color: #1F2937;
    border-color: #374151;
    color: #F9FAFB;
}

[data-theme="dark"] .related-card:hover {
    border-color: var(--primary);
    background-color: #28303f;
}

/* Ensure SEO article text is readable */
[data-theme="dark"] .seo-article p,
[data-theme="dark"] .seo-article ul {
    color: #D1D5DB;
    /* Gray 300 */
}

[data-theme="dark"] .seo-example {
    background-color: #111827;
    border-color: #374151;
}

[data-theme="dark"] .radio-tile {
    border-color: #4B5563;
    color: #9CA3AF;
}

[data-theme="dark"] .radio-option input:checked+.radio-tile {
    /* Keep primary color for checked state */
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Toggle Button Style */
#dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--card-bg);
    /* Matches card bg of current theme */
    border: 2px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: all 0.3s ease;
    outline: none;
    color: var(--text-main);
    font-size: 1.5rem;
}

#dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Adjust hash input specifically */
[data-theme="dark"] .hash-input {
    background-color: #374151;
    color: #F9FAFB;
    border-color: #4B5563;
}

[data-theme="dark"] .btn-copy {
    background-color: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

/* --- Fixes for specific tools and Homepage --- */

/* Homepage: Fix Content Section White Background */
[data-theme="dark"] .content-section,
[data-theme="dark"] .tool-hero p.subtitle {
    /* subtitle fix for slight contrast improvement */
    color: #9CA3AF;
}

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

[data-theme="dark"] .content-section h2,
[data-theme="dark"] .faq-question {
    color: var(--text-main);
}

/* Homepage Intro Text Contrast Fix */
[data-theme="dark"] .seo-content p {
    color: #F9FAFB;
    /* Almost white for maximum readability */
}

/* Fix Input Groups & Form Elements */
[data-theme="dark"] .input-group,
[data-theme="dark"] .form-group .input-group {
    background-color: #374151;
    /* Gray 700 */
    border-color: #4B5563;
}

[data-theme="dark"] input:not([type="range"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #374151;
    color: #F9FAFB !important;
    border-color: #4B5563;
}

[data-theme="dark"] .input-addon {
    background-color: #4B5563;
    border-right-color: #374151;
    color: #E5E7EB;
}

/* Fix Buttons */
[data-theme="dark"] .btn-action.secondary,
[data-theme="dark"] .refresh-btn,
[data-theme="dark"] .btn-copy {
    background-color: transparent;
    border-color: #4B5563;
    color: #D1D5DB;
}

[data-theme="dark"] .btn-action.secondary:hover,
[data-theme="dark"] .refresh-btn:hover,
[data-theme="dark"] .btn-copy:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* --- Specific Tool Fixes --- */

/* Wat is mijn IP */
[data-theme="dark"] .loader {
    border-color: #374151;
    border-bottom-color: var(--primary);
}

[data-theme="dark"] .ip-display {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    /* Pop out */
}

/* Wachtwoord Generator */
[data-theme="dark"] .password-display {
    background-color: #111827;
    /* Darker than card */
    border-color: #374151;
}

[data-theme="dark"] .password-display:hover {
    background-color: #1F2937;
    border-color: var(--primary);
}

[data-theme="dark"] .password-text {
    color: #10B981;
    /* Green for success/good pw */
}

[data-theme="dark"] .setting-group {
    border-bottom-color: #374151;
}

[data-theme="dark"] .range-container input[type="range"] {
    background: #4B5563;
}

/* CSS/JS Minifier */
[data-theme="dark"] #output {
    background-color: #1F2937 !important;
    /* Override inline style */
    color: #F9FAFB !important;
    border: 1px solid #374151;
}

[data-theme="dark"] .radio-label {
    border-color: #4B5563;
    color: #D1D5DB;
}

/* Case Converter */
[data-theme="dark"] .case-btn {
    background-color: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .case-btn:hover {
    background-color: #4B5563;
}

/* Jaarinkomen & General Disclaimers */
[data-theme="dark"] .disclaimer-box {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    color: #FEF3C7 !important;
}

[data-theme="dark"] .disclaimer-box a {
    color: #FCD34D !important;
    text-decoration: underline;
}

/* Contact Page Highlight */
[data-theme="dark"] .contact-highlight {
    background-color: rgba(79, 70, 229, 0.1) !important;
    border-color: rgba(79, 70, 229, 0.3) !important;
    color: #F9FAFB !important;
}

/* Marge & Winst Result Area */
[data-theme="dark"] .result-row.highlight {
    background-color: rgba(16, 185, 129, 0.1);
    /* Transparent Emerald */
    color: #fff;
}

[data-theme="dark"] .result-row .result-value {
    color: #34D399;
    /* Light Emerald */
}

/* FIX: Finance Tools Results Area (ZZP, Inflatie, Jaarinkomen) */
[data-theme="dark"] .results-area {
    background-color: #1F2937 !important;
    /* Force override of scoped component styles */
    border: 1px solid #374151;
    color: #F9FAFB;
}

[data-theme="dark"] .results-area .result-label {
    color: #9CA3AF;
}

[data-theme="dark"] .results-area .breakdown {
    border-top-color: #374151;
}

[data-theme="dark"] .breakdown-row.total {
    color: #F9FAFB;
}

/* UUID & Base64 Inputs (Targeting generic textareas if IDs not specific) */
[data-theme="dark"] .result-box {
    background-color: #1F2937;
    border-color: #374151;
    color: #F9FAFB;
}

/* Text Cleaner Checkboxes */
[data-theme="dark"] .checkbox-label {
    border-color: #4B5563;
    color: #D1D5DB;
}

[data-theme="dark"] .checkbox-label:hover {
    background-color: #374151;
}


/* Search Input Homepage */
[data-theme="dark"] .search-input {
    background-color: #1F2937;
    color: #F9FAFB;
    border-color: #4B5563;
}

/* Footer Pages (Privacy, Terms, Contact) */
[data-theme="dark"] .text-page-card {
    background-color: var(--card-bg);
    color: var(--text-muted);
}

[data-theme="dark"] .text-page-card h1,
[data-theme="dark"] .text-page-card h2,
[data-theme="dark"] .text-page-card h3 {
    color: var(--text-main);
}
/* --- CookieYes Dark Mode Overrides --- */
[data-theme="dark"] .cky-consent-container .cky-consent-bar {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .cky-consent-container .cky-title {
    color: var(--text-main) !important;
}

[data-theme="dark"] .cky-consent-container .cky-notice-des {
    color: var(--text-muted) !important;
}

/* Buttons */
[data-theme="dark"] .cky-consent-container .cky-btn-accept {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .cky-consent-container .cky-btn-reject {
    background-color: transparent !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .cky-consent-container .cky-btn-customize {
    color: var(--primary) !important;
}

/* Preferences Modal (if applicable) */
[data-theme="dark"] .cky-preference-center {
    background-color: var(--card-bg) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .cky-preference-header,
[data-theme="dark"] .cky-preference-body-wrapper {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .cky-preference-title {
    color: var(--text-main) !important;
}

[data-theme="dark"] .cky-accordion-header {
    background-color: #374151 !important; /* Gray 700 */
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .cky-accordion-body {
    background-color: #1F2937 !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .cky-footer-shadow {
    background: linear-gradient(180deg, rgba(31, 41, 55, 0) 0%, #1F2937 100%) !important;
}

/* --- CookieYes Preference Center Extended --- */

/* Content Wrapper */
[data-theme="dark"] .cky-preference-content-wrapper {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Footer Wrapper */
[data-theme="dark"] .cky-footer-wrapper {
    background-color: var(--card-bg) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Save My Preferences Button */
[data-theme="dark"] .cky-btn-preferences {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Toggles (Switches) */
[data-theme="dark"] .cky-switch-slider {
    background-color: #4B5563 !important; /* Gray 600 - Inactive */
}

[data-theme="dark"] .cky-switch input[type="checkbox"]:checked + .cky-switch-slider {
    background-color: var(--primary) !important; /* Active Primary */
}

/* Accordion Expand Icon */
[data-theme="dark"] .cky-accordion-btn {
    color: var(--text-muted) !important;
}

/* Titles and Text */
[data-theme="dark"] .cky-accordion-header .cky-accordion-header-title {
    color: var(--text-main) !important;
}

[data-theme="dark"] .cky-accordion-header .cky-accordion-header-des,
[data-theme="dark"] .cky-preference-body-wrapper .cky-preference-content-wrapper p {
    color: var(--text-muted) !important;
}

/* Scrollbar styling for the modal content */
[data-theme="dark"] .cky-preference-body-wrapper::-webkit-scrollbar-track {
    background: var(--card-bg); 
}

[data-theme="dark"] .cky-preference-body-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-color); 
}

/* 'Cookie Policy' Link inside modal */
[data-theme="dark"] .cky-footer-wrapper a {
    color: var(--primary) !important;
}

/* --- CookieYes Custom Accordion Body Text --- */

/* General paragraph text inside the body */
[data-theme="dark"] .cky-accordion-body p, 
[data-theme="dark"] .cky-accordion-body .cky-cookie-des {
    color: var(--text-muted) !important;
}

/* Cookie Table (Audit Table) Styles */
[data-theme="dark"] .cky-audit-table {
    background-color: transparent !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .cky-audit-table th {
    color: var(--text-main) !important;
    border-bottom-color: var(--border-color) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .cky-audit-table td {
    color: var(--text-muted) !important;
    border-bottom-color: var(--border-color) !important;
}

/* "No cookies found" message */
[data-theme="dark"] .cky-no-cookies {
    color: var(--text-muted) !important;
}

/* User Correction for Accordion Description Paragraph */
[data-theme="dark"] .cky-accordion-header-des p {
    color: var(--text-muted) !important;
}