/**
 * Accessibility Fixes for Dark Theme
 * Ensures all text has proper contrast on dark backgrounds
 * WCAG 2.1 AA minimum contrast ratio: 4.5:1
 */

/* ============================================
   ROOT VARIABLES - DARK THEME
   ============================================ */

:root {
    /* Text colors for dark background */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-accent: #60a5fa;
    --text-error: #fca5a5;
    --text-success: #86efac;

    /* Background adjustments */
    --bg-primary: rgba(30, 41, 59, 0.6);
    --bg-secondary: rgba(15, 23, 42, 0.8);
    --bg-input: rgba(15, 23, 42, 0.6);

    /* Border colors */
    --border-primary: rgba(59, 130, 246, 0.3);
    --border-secondary: rgba(71, 85, 105, 0.4);
}

/* ============================================
   GLOBAL TEXT FIXES
   ============================================ */

/* Body text */
body {
    color: var(--text-primary) !important;
}

/* All paragraphs */
p, span, div:not(.timer-display):not(.result-value) {
    color: var(--text-primary);
}

/* All labels */
label {
    color: var(--text-secondary) !important;
}

/* Links */
a {
    color: var(--text-accent);
}

a:hover {
    color: #93c5fd;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

/* ============================================
   TAB NAVIGATION - DARK THEME
   ============================================ */

.tab-navigation button {
    color: var(--text-secondary) !important;
    border-color: var(--border-primary) !important;
    background: rgba(30, 136, 229, 0.1) !important;
}

.tab-navigation button:hover:not(:disabled) {
    background: rgba(30, 136, 229, 0.2) !important;
    color: var(--text-primary) !important;
}

.tab-navigation button[aria-selected="true"] {
    background: linear-gradient(135deg, #1e88e5, #42a5f5) !important;
    color: white !important;
    border-color: transparent !important;
}

/* ============================================
   INPUT FIELDS - DARK THEME
   ============================================ */

.input-group label,
.calculator-input-area label,
.countdown-input-group label {
    color: var(--text-secondary) !important;
}

.input-group input,
.input-group select,
.calculator-panel input,
.calculator-panel select,
.countdown-input-group input,
.dreisatz-row input,
input[type="text"],
input[type="number"],
input[type="date"],
select {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
}

.input-group input::placeholder,
input::placeholder {
    color: var(--text-muted) !important;
}

.input-group input:focus,
.input-group select:focus,
input:focus,
select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3) !important;
    outline: none;
}

/* Select dropdown arrow */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}

/* ============================================
   BUTTONS - DARK THEME
   ============================================ */

/* Primary buttons */
.btn-primary,
.timer-controls .btn-primary {
    background: linear-gradient(135deg, #1e88e5, #42a5f5) !important;
    color: white !important;
}

/* Secondary buttons */
.btn-secondary,
.timer-controls .btn-secondary {
    background: rgba(30, 136, 229, 0.15) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-primary) !important;
}

.btn-secondary:hover:not(:disabled),
.timer-controls .btn-secondary:hover:not(:disabled) {
    background: rgba(30, 136, 229, 0.25) !important;
    color: var(--text-primary) !important;
}

/* Settings button */
.btn-settings,
.btn-mode-toggle {
    background: rgba(100, 116, 139, 0.2) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-secondary) !important;
}

.btn-settings:hover:not(:disabled),
.btn-mode-toggle:hover {
    background: rgba(100, 116, 139, 0.3) !important;
    color: var(--text-primary) !important;
}

/* Calculate button */
.btn-calculate {
    color: white !important;
}

/* ============================================
   TIMER DISPLAY - DARK THEME
   ============================================ */

.timer-display {
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

.timer-phase {
    color: var(--text-accent) !important;
}

.session-count {
    color: var(--text-secondary) !important;
}

/* ============================================
   RECHENWEG - DARK THEME
   ============================================ */

.rechenweg {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

.rechenweg-step {
    border-bottom-color: var(--border-secondary) !important;
}

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

.rechenweg-value {
    color: var(--text-primary) !important;
}

.rechenweg-result {
    background: linear-gradient(135deg, #1e88e5, #42a5f5) !important;
}

.rechenweg-error {
    color: var(--text-error) !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.error-message {
    color: var(--text-error) !important;
}

/* ============================================
   RESULTS - DARK THEME
   ============================================ */

.result-highlight {
    background: linear-gradient(135deg, #1e88e5, #42a5f5) !important;
    color: white !important;
}

.result-details {
    color: var(--text-secondary) !important;
}

.result-placeholder {
    background: linear-gradient(135deg, #1e88e5, #42a5f5) !important;
    color: white !important;
}

/* ============================================
   DREISATZ - DARK THEME
   ============================================ */

.dreisatz-input {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

.dreisatz-row span {
    color: var(--text-secondary) !important;
}

.dreisatz-type label,
.radio-group label {
    color: var(--text-secondary) !important;
}

/* ============================================
   VAT RESULTS - DARK THEME
   ============================================ */

.vat-results {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

.vat-result-item {
    border-bottom-color: var(--border-secondary) !important;
}

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

.vat-result-value {
    color: var(--text-primary) !important;
}

/* ============================================
   MWST PRESETS - DARK THEME
   ============================================ */

.mwst-preset {
    background: rgba(30, 136, 229, 0.1) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-secondary) !important;
}

.mwst-preset:hover {
    background: rgba(30, 136, 229, 0.2) !important;
    color: var(--text-primary) !important;
}

.mwst-preset.active {
    background: linear-gradient(135deg, #1e88e5, #42a5f5) !important;
    color: white !important;
    border-color: transparent !important;
}

/* ============================================
   LAP LIST - DARK THEME
   ============================================ */

.lap-list {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

.lap-item {
    border-bottom-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

.lap-number {
    color: var(--text-accent) !important;
}

.lap-time {
    color: var(--text-primary) !important;
}

.total-time {
    color: var(--text-muted) !important;
}

/* ============================================
   HISTORY PANEL - DARK THEME
   ============================================ */

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

#history-month-display {
    color: var(--text-primary) !important;
}

.calendar-header span {
    color: var(--text-muted) !important;
}

.calendar-day {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-secondary) !important;
    color: var(--text-secondary) !important;
}

.calendar-day:hover {
    background: rgba(30, 136, 229, 0.3) !important;
    color: var(--text-primary) !important;
}

.calendar-day.selected,
.calendar-day.today {
    background: linear-gradient(135deg, #1e88e5, #42a5f5) !important;
    color: white !important;
    border-color: transparent !important;
}

.stat-item {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

.stat-value {
    color: var(--text-accent) !important;
}

.stat-label {
    color: var(--text-muted) !important;
}

.history-day-detail {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

.history-day-detail h4 {
    color: var(--text-primary) !important;
}

.history-list li {
    border-bottom-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

.history-trash li {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   SETTINGS PANEL - DARK THEME
   ============================================ */

.settings-section-title {
    color: var(--text-accent) !important;
    border-bottom-color: var(--border-primary) !important;
}

.settings-group {
    background: var(--bg-secondary) !important;
    border-radius: 12px;
    padding: 16px;
}

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

.setting-item small {
    color: var(--text-muted) !important;
}

/* ============================================
   MODAL - DARK THEME
   ============================================ */

.modal-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(8px);
}

.modal-content {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

.modal-content h3 {
    color: var(--text-primary) !important;
}

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

.form-group input {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   SHARE BUTTONS - DARK THEME
   ============================================ */

.btn-share {
    background: rgba(30, 136, 229, 0.1) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-secondary) !important;
}

.btn-share:hover {
    background: rgba(30, 136, 229, 0.2) !important;
    color: var(--text-primary) !important;
}

.btn-share.copied {
    background: linear-gradient(135deg, #10b981, #34d399) !important;
    color: white !important;
    border-color: transparent !important;
}

/* ============================================
   RELATED CALCULATORS - DARK THEME
   ============================================ */

.related-calculators {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

.related-calculators h3 {
    color: var(--text-accent) !important;
}

.related-calculators a {
    background: rgba(30, 136, 229, 0.1) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
}

.related-calculators a:hover {
    background: rgba(30, 136, 229, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

.related-calculators a small {
    color: var(--text-muted) !important;
}

/* ============================================
   SEO TEXT CONTAINER - DARK THEME
   ============================================ */

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

.seo-text-container strong {
    color: var(--text-accent) !important;
}

/* ============================================
   CROSS CALCULATOR LINKS - DARK THEME
   ============================================ */

.cross-calculator-links {
    background: rgba(251, 191, 36, 0.08) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
}

.cross-calculator-links h4 {
    color: #fbbf24 !important;
}

.cross-calculator-links a {
    background: rgba(30, 136, 229, 0.1) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-secondary) !important;
}

.cross-calculator-links a:hover {
    background: rgba(30, 136, 229, 0.2) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   INPUT HINTS - DARK THEME
   ============================================ */

.input-hint {
    color: var(--text-muted) !important;
}

/* ============================================
   SECTION TITLES - DARK THEME
   ============================================ */

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

.section-separator {
    border-top-color: var(--border-primary) !important;
}

/* ============================================
   COMING SOON TEXT
   ============================================ */

.coming-soon {
    color: var(--text-muted) !important;
}

/* ============================================
   TIME SEPARATOR
   ============================================ */

.time-separator {
    color: var(--text-secondary) !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 600px) {
    .timer-display {
        color: var(--text-primary) !important;
    }
}

/* ============================================
   PRINT STYLES - LIGHT FOR PRINTING
   ============================================ */

@media print {
    body {
        background: white !important;
        color: #1e293b !important;
    }

    * {
        color: #1e293b !important;
        background: white !important;
        border-color: #e2e8f0 !important;
    }

    .result-highlight {
        background: #1e88e5 !important;
        color: white !important;
    }

    .btn-primary,
    .btn-calculate {
        background: #1e88e5 !important;
        color: white !important;
    }
}

/* ============================================
   FOOTER TEXT CONTRAST FIX
   Dark background = white text
   ============================================ */

.ah-footer-links a {
    color: #e2e8f0 !important;
}

.ah-footer-links a:hover {
    color: #ffffff !important;
}

.ah-footer-contact p,
.ah-footer-legal p {
    color: #cbd5e1 !important;
}

.ah-footer-copyright {
    color: #94a3b8 !important;
}

.ah-footer-bottom-links a {
    color: #e2e8f0 !important;
}

.ah-footer-bottom-links a:hover{
    color: #ffffff !important;
}

/* Remove the dark mode media query overrides - we use dark by default now */
@media (prefers-color-scheme: dark){
    .ah-footer-links a {
        color: #e2e8f0 !important;
    }

    .ah-footer-contact p,
    .ah-footer-legal p {
        color: #cbd5e1 !important;
    }

    .ah-footer-copyright {
        color: #94a3b8 !important;
    }
}

/* ============================================
   COOKIE CONSENT POPUP - DARK THEME
   Override vanilla-cookieconsent CDN styles
   ============================================ */

/* Main consent modal */
#cc--main .cc__dialog,
.cc_dialog,
.cc-consent-modal {
    background: rgba(30, 41, 59, 0.98) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* Consent modal title */
#cc--main .cc__title,
.cc__title,
.cc-consent-modal h1,
.cc-consent-modal h2,
.cc-consent-modal .cc__title {
    color: #ffffff !important;
}

/* Consent modal description */
#cc--main .cc__desc,
.cc__desc,
.cc-consent-modal p,
.cc-consent-modal .cc__desc {
    color: #cbd5e1 !important;
}

/* Consent modal links */
#cc--main .cc__desc a,
.cc__desc a,
.cc-consent-modal a {
    color: #60a5fa !important;
}

#cc--main .cc__desc a:hover,
.cc__desc a:hover,
.cc-consent-modal a:hover{
    color: #93c5fd !important;
}

/* Settings modal */
#cc--main .cm,
.cm,
.cc-settings-modal,
.cc-settings-view {
    background: rgba(30, 41, 59, 0.98) !important;
    color: #f1f5f9 !important;
}

/* Settings sections */
#cc--main .cm__section,
.cm__section,
.cc-settings-section {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

#cc--main .cm__section-title,
.cm__section-title,
.cc-settings-section h3,
.cc-settings-section .section-title {
    color: #ffffff !important;
}

#cc--main .cm__section-desc,
.cm__section-desc,
.cc-settings-section p,
.cc-settings-section .section-desc {
    color: #94a3b8 !important;
}

/* Buttons */
#cc--main .cc__btn,
.cc__btn,
.cc-btn {
    color: #ffffff !important;
}

#cc--main .cc__btn--primary,
.cc__btn--primary,
.cc-btn-primary {
    background: linear-gradient(135deg, #1e88e5, #42a5f5) !important;
    color: #ffffff !important;
}

#cc--main .cc__btn--secondary,
.cc__btn--secondary,
.cc-btn-secondary {
    background: rgba(30, 136, 229, 0.15) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* Toggle switches */
#cc--main .cm__toggle,
.cm__toggle,
.cc-toggle {
    background: rgba(71, 85, 105, 0.4) !important;
}

#cc--main .cm__toggle--active,
.cm__toggle--active,
.cc-toggle.active {
    background: linear-gradient(135deg, #1e88e5, #42a5f5) !important;
}

/* Cookie table */
#cc--main .cm__cookie-table,
.cm__cookie-table,
.cc-cookie-table {
    color: #cbd5e1 !important;
}

#cc--main .cm__cookie-table th,
.cm__cookie-table th,
.cc-cookie-table th {
    color: #ffffff !important;
    background: rgba(15, 23, 42, 0.8) !important;
}

#cc--main .cm__cookie-table td,
.cm__cookie-table td,
.cc-cookie-table td {
    color: #94a3b8 !important;
    border-bottom-color: rgba(71, 85, 105, 0.3) !important;
}