/* TARGETED FONT COLOR FIXES */

/* 1. ALL WHITE BUTTONS SHOULD HAVE BLACK FONT */
.btn-secondary,
button.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    color: #000000 !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

.btn-secondary * {
    color: #000000 !important;
}

/* Dark theme white buttons */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] button.btn-secondary,
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-secondary:focus,
[data-theme="dark"] .btn-secondary:active {
    color: #000000 !important;
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
}

[data-theme="dark"] .btn-secondary * {
    color: #000000 !important;
}

/* 2. ALL BLUE AREAS SHOULD HAVE WHITE FONT */

/* Blue gradient buttons */
.btn-calculate,
.btn-primary,
.cta-button,
button.btn-calculate,
button.btn-primary,
button.cta-button {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #10b981) !important;
}

.btn-calculate *,
.btn-primary *,
.cta-button * {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Blue background elements */
*[style*="background: #2563eb"],
*[style*="background-color: #2563eb"],
*[style*="background: rgb(37, 99, 235)"],
*[style*="background-color: rgb(37, 99, 235)"],
*[style*="background: #3b82f6"],
*[style*="background-color: #3b82f6"],
*[style*="background: rgb(59, 130, 246)"],
*[style*="background-color: rgb(59, 130, 246)"] {
    color: #ffffff !important;
}

*[style*="background: #2563eb"] *,
*[style*="background-color: #2563eb"] *,
*[style*="background: rgb(37, 99, 235)"] *,
*[style*="background-color: rgb(37, 99, 235)"] *,
*[style*="background: #3b82f6"] *,
*[style*="background-color: #3b82f6"] *,
*[style*="background: rgb(59, 130, 246)"] *,
*[style*="background-color: rgb(59, 130, 246)"] * {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Elements with gradient backgrounds */
*[style*="linear-gradient"] {
    color: #ffffff !important;
}

*[style*="linear-gradient"] * {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* 3. HERO SECTION GRADIENT BOX WHITE FONT */

/* PC illustration components */
.pc-illustration {
    background: var(--surface) !important;
}

.pc-illustration .component {
    background: linear-gradient(135deg, #2563eb, #10b981) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    font-size: 1.25rem !important;
}

.component.cpu,
.component.gpu,
.component.ram,
.component.storage {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    background: linear-gradient(135deg, #2563eb, #10b981) !important;
}

/* Hero section CTA button */
.hero .cta-button,
.hero__content .cta-button {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #10b981) !important;
}

.hero .cta-button:hover,
.hero__content .cta-button:hover {
    color: #ffffff !important;
}

/* Performance badges with blue backgrounds */
.performance-badge.excellent,
.performance-badge.very-good,
.performance-badge.good {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.performance-badge.excellent *,
.performance-badge.very-good *,
.performance-badge.good * {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Navigation brand with blue color */
.nav__title {
    color: #2563eb !important;
}

/* Primary color elements that should have white text when on blue background */
.circle-fill {
    stroke: #2563eb !important;
}

.performance-score {
    color: #2563eb !important;
}

/* Stats with primary color */
.stat__number {
    color: #2563eb !important;
}

/* Feature icons */
.feature__icon {
    color: #2563eb !important;
}

/* Component icons */
.component-icon {
    color: #2563eb !important;
}

/* Ensure proper contrast for all interactive elements */
.btn-calculate:hover,
.btn-primary:hover,
.cta-button:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #1d4ed8, #059669) !important;
}

.btn-calculate:focus,
.btn-primary:focus,
.cta-button:focus {
    color: #ffffff !important;
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

/* Dark theme adjustments */
[data-theme="dark"] .nav__title {
    color: #60a5fa !important;
}

[data-theme="dark"] .performance-score {
    color: #60a5fa !important;
}

[data-theme="dark"] .stat__number {
    color: #60a5fa !important;
}

[data-theme="dark"] .feature__icon {
    color: #60a5fa !important;
}

[data-theme="dark"] .component-icon {
    color: #60a5fa !important;
}

[data-theme="dark"] .circle-fill {
    stroke: #60a5fa !important;
}

/* Ensure buttons maintain proper colors in all states */
.btn-secondary:disabled {
    color: #6b7280 !important;
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
}

[data-theme="dark"] .btn-secondary:disabled {
    color: #6b7280 !important;
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
}

/* Results action buttons */
#save-results,
#share-results,
#new-calculation {
    color: #ffffff !important;
}

#save-results.btn-secondary,
#share-results.btn-secondary,
#new-calculation.btn-secondary {
    color: #000000 !important;
    background: #ffffff !important;
}

/* Quick action buttons */
.quick-action:hover {
    color: #ffffff !important;
    background: #2563eb !important;
}

/* Notification close button */
.notification-close {
    color: #6b7280 !important;
    background: transparent !important;
}

.notification-close:hover {
    color: #374151 !important;
    background: #f3f4f6 !important;
}

[data-theme="dark"] .notification-close {
    color: #9ca3af !important;
}

[data-theme="dark"] .notification-close:hover {
    color: #d1d5db !important;
    background: #374151 !important;
}

/* Theme toggle button */
.theme-toggle {
    color: var(--text-primary) !important;
    background: var(--surface) !important;
}

/* Mobile menu toggle */
.nav__toggle {
    color: var(--text-primary) !important;
    background: transparent !important;
}

/* Ensure all gradient elements have white text */
.hero__title {
    background: linear-gradient(135deg, #2563eb, #10b981) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Force white text on any element with blue gradient background */
[class*="gradient"],
[style*="gradient"][style*="2563eb"],
[style*="gradient"][style*="3b82f6"],
[style*="gradient"][style*="10b981"] {
    color: #ffffff !important;
}

[class*="gradient"] *,
[style*="gradient"][style*="2563eb"] *,
[style*="gradient"][style*="3b82f6"] *,
[style*="gradient"][style*="10b981"] * {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Accessibility: Ensure sufficient contrast */
@media (prefers-contrast: high) {
    .btn-secondary {
        border: 2px solid #000000 !important;
    }
    
    .btn-calculate,
    .btn-primary,
    .cta-button {
        border: 2px solid #ffffff !important;
    }
}

/* Print styles */
@media print {
    .btn-secondary {
        color: #000000 !important;
        background: #ffffff !important;
        border: 1px solid #000000 !important;
    }
    
    .btn-calculate,
    .btn-primary,
    .cta-button {
        color: #ffffff !important;
        background: #2563eb !important;
    }
    
    .component {
        color: #ffffff !important;
        background: #2563eb !important;
    }
}