/* ==========================================================================
   Dark Theme Fixes - Comprehensive Color Contrast Solutions
   Fixes white text on white background issues across all sections
   ========================================================================== */

/* Force dark theme variables for any missed sections */
:root {
    /* Ensure these variables are always set */
    --bg-primary: #0a0a0b !important;
    --bg-secondary: #111113 !important;
    --bg-elevated: #18181b !important;
    --bg-accent: #1f1f23 !important;

    --text-primary: #fafafa !important;
    --text-secondary: #a1a1aa !important;
    --text-tertiary: #71717a !important;

    --border-subtle: #27272a !important;
    --border-strong: #3f3f46 !important;
}

/* Force all major sections to use dark theme */
body,
html {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Fix any sections with white backgrounds */
.section,
.tool-section,
.featured-tools,
.all-tools,
.how-it-works,
.privacy-section,
.hero,
.footer {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Fix containers that might have white backgrounds */
.container,
.section-header,
.content-wrapper {
    background: transparent !important;
    color: var(--text-primary) !important;
}

/* Fix tool cards */
.tool-card,
.small-tool-card {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}

.tool-card-title,
.small-tool-name {
    color: var(--text-primary) !important;
}

.tool-card-desc,
.small-tool-desc {
    color: var(--text-secondary) !important;
}

/* Fix any calculation or result boxes */
.calc-result,
.result-box,
.output-area {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* Fix form elements */
input,
textarea,
select {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* Fix buttons */
.btn,
button {
    color: var(--text-primary) !important;
}

.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
}

.btn-secondary {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* Fix header */
.header {
    background: rgba(10, 10, 11, 0.95) !important;
    color: var(--text-primary) !important;
}

.header-logo {
    color: var(--text-primary) !important;
}

.nav-link {
    color: var(--text-secondary) !important;
}

.nav-link:hover {
    color: var(--text-primary) !important;
}

/* Fix footer */
.footer {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Fix any white background overrides */
*[style*="background: white"],
*[style*="background: #fff"],
*[style*="background: #ffffff"] {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}

/* Fix filter pills */
.filter-pill {
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
}

.filter-pill.active {
    background: var(--brand-blue) !important;
    color: white !important;
}

/* Fix section titles and text */
.section-title,
.section-subtitle,
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

.section-label {
    color: var(--text-secondary) !important;
}

/* Fix trust badges */
.trust-badge {
    color: var(--text-secondary) !important;
}

/* Fix privacy features */
.privacy-feature-text {
    color: var(--text-primary) !important;
}

/* Mobile navigation dark theme */
.mobile-nav-overlay {
    background: rgba(10, 10, 11, 0.95) !important;
}

.mobile-nav-menu a {
    color: white !important;
}

/* Ensure mobile nav toggle is properly hidden on desktop */
@media (min-width: 769px) {
    .mobile-nav-toggle {
        display: none !important;
    }

    .mobile-nav-overlay {
        display: none !important;
    }
}

/* ========================================
   COMPREHENSIVE BACKGROUND/TEXT FIXES
   ======================================== */

/* Fix any stray white backgrounds */
.ad-section,
.banner,
.hero-content,
.tool-wrapper,
.page-wrapper,
.main-content {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Fix calculation and result areas */
.percentage-result,
.calculator-display,
.output-container,
.result-display,
.conversion-result {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* Fix any modal or popup backgrounds */
.modal,
.popup,
.overlay,
.tooltip {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* Fix tables */
table,
.table {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

table th,
table td,
.table th,
.table td {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* Fix any code blocks */
code,
pre,
.code-block {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* Fix any remaining white sections */
.white-section,
.light-section,
.bg-white,
.bg-light {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Fix any dividers or separators */
hr,
.divider,
.separator {
    border-color: var(--border-subtle) !important;
    background: var(--border-subtle) !important;
}

/* Fix labels and descriptions */
label,
.label,
.description {
    color: var(--text-primary) !important;
}

.help-text,
.hint,
.note {
    color: var(--text-secondary) !important;
}

/* Fix progress bars */
.progress,
.progress-bar {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* Fix dropdown menus */
.dropdown,
.dropdown-menu,
.select-options {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}

.dropdown-item,
.option {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}

.dropdown-item:hover,
.option:hover {
    background: var(--bg-accent) !important;
    color: var(--text-primary) !important;
}

/* Fix any scrollbar issues */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Fix selection colors */
::selection {
    background: rgba(59, 130, 246, 0.3);
    color: var(--text-primary);
}

::-moz-selection {
    background: rgba(59, 130, 246, 0.3);
    color: var(--text-primary);
}

/* Fix focus states */
*:focus {
    outline-color: var(--brand-blue) !important;
}

/* Force fix for any absolute white backgrounds */
*[style*="background:#fff"],
*[style*="background:#ffffff"],
*[style*="background:white"],
*[style*="background-color:#fff"],
*[style*="background-color:#ffffff"],
*[style*="background-color:white"] {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}