/**
 * Tiedosto: tyylikirjasto/css/komponentit.css
 * Versio: 1.3
 * Kuvaus: Sivuston komponenttien tyylit. Lisätty laatikoiden ja sisältökorttien absoluuttinen tumman tilan pakotus hex-arvoilla, jotta silmät säästyvät. Tehty <3 Kalajoella.
 * Tekijä: Markus Haapasaari / Kaupunkilehti Kalajokinen
 */

/* Ensure header elements use CSS variables (säilytetty alkuperäinen sääntö) */
.main-header-container,
.ylapalkki-kontti {
  background-color: var(--header-bg, #ffffff);
  color: var(--header-text, #3b3b3c);
}

/* TÄSSÄ ON TAIKA: Laajempi absoluuttinen korvaus kortti- ja laatikkotaustoille tummassa teemassa.
   Ohitetaan viallinen teemamuuttuja täysin ja pakotetaan oikeat värit. */
[data-theme="dark"] .process-section,
[data-theme="dark"] .id-card,
[data-theme="dark"] .example-pair,
[data-theme="dark"] .rule-card,
[data-theme="dark"] .faq-card,
[data-theme="dark"] .status-card,
[data-theme="dark"] .history-section,
[data-theme="dark"] .box,
[data-theme="dark"] .lasi-efekti,
[data-theme="dark"] .saa-kortti,
[data-theme="dark"] .tunti-kortti,
[data-theme="dark"] .extra-kortti,
[data-theme="dark"] .viikko-lista,
[data-theme="dark"] .brand-card,
[data-theme="dark"] .example-card,
/* Lisätään varmuuden vuoksi yleiset säiliöt */
html[data-theme="dark"] .box,
body[data-theme="dark"] .box {
    background-color: #242424 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}

/* Varmistetaan vielä, että kaikkien laatikoiden sisäiset perusotsikot ja tekstit
   ovat varmasti lukukelpoisia tummassa tilassa. */
[data-theme="dark"] .box p,
[data-theme="dark"] .box h1,
[data-theme="dark"] .box h2,
[data-theme="dark"] .box h3,
[data-theme="dark"] .box h4,
[data-theme="dark"] .box li,
[data-theme="dark"] .box span,
[data-theme="dark"] .saa-kortti p,
[data-theme="dark"] .saa-kortti span {
    color: #e0e0e0 !important;
}

/* Small safety: hide duplicated debug outlines */
.debug-outline { outline: none !important; }