/* ============================================================
   THEMES.CSS - Motywy: rozmiar czcionki, wysoki kontrast
   ============================================================ */

/* ============================================
   POZIOMY ROZMIARU CZCIONKI
   A = mała, B = domyślna, C = duża
   Zmieniane przez JS: document.documentElement.dataset.fontSize
   ============================================ */

html[data-font-size="small"] {
    font-size: 14px;
}

html[data-font-size="normal"] {
    font-size: 16px;    /* DOMYŚLNA */
}

html[data-font-size="large"] {
    font-size: 20px;
}

/* Zapewnienie minimalnych rozmiarów przy powiększeniu */
html[data-font-size="large"] .form-section,
html[data-font-size="xlarge"] .form-section {
    padding: var(--space-6);
}

html[data-font-size="xlarge"] .form-section {
    padding: var(--space-7);
}

/* ============================================
   TRYB WYSOKIEGO KONTRASTU - ODWRÓCONE KOLORY
   Zmieniane przez JS: document.documentElement.dataset.contrast
   ============================================ */

html[data-contrast="high"] {
    /* ============================================
       ODWRÓCONE KOLORY - CZARNE TŁO, BIAŁY TEKST
       Zgodne z Windows Wysoki Kontrast
       ============================================ */
    
    /* Tła - czarne */
    --color-white:          #000000;
    --color-bg-subtle:      #0a0a0a;
    --color-bg-muted:       #1a1a1a;
    
    /* Tekst - biały/żółty (żółty dla akcentów) */
    --color-text:           #ffffff;
    --color-text-secondary: #e0e0e0;
    --color-text-muted:     #b0b0b0;
    --color-text-inverse:   #000000;
    
    /* Obramowania - białe */
    --color-border:         #ffffff;
    --color-border-strong:  #ffffff;
    --color-border-focus:   #ffff00;
    
    /* Kolor primary - żółty dla maksymalnej widoczności */
    --color-primary:        #ffff00;
    --color-primary-dark:   #ffdd00;
    --color-primary-light:  #ffff66;
    --color-primary-subtle: #333300;
    
    /* Statusy - jasne kolory na ciemnym tle */
    --color-error:          #ff6666;
    --color-error-bg:       #330000;
    --color-error-border:   #ff6666;
    
    --color-success:        #66ff66;
    --color-success-bg:     #003300;
    --color-success-border: #66ff66;
    
    --color-warning:        #ffaa00;
    --color-warning-bg:     #331a00;
    --color-warning-border: #ffaa00;
    
    --color-info:           #66ccff;
    --color-info-bg:        #001a33;
    --color-info-border:    #66ccff;
    
    /* Focus - żółty dla maksymalnej widoczności */
    --shadow-focus:         0 0 0 3px #ffff00;
}

/* Wymuszenie czarnego tła na body */
html[data-contrast="high"] body {
    background-color: #000000;
    color: #ffffff;
}

/* Formularz - ciemne tło */
html[data-contrast="high"] .form-section {
    background-color: #000000;
    border-color: #ffffff;
    border-left-color: #ffff00;
}

html[data-contrast="high"] .form-fieldset {
    background-color: #0a0a0a;
    border-color: #ffffff;
}

/* Pola formularza - ciemne tło, białe obramowanie */
html[data-contrast="high"] input,
html[data-contrast="high"] select,
html[data-contrast="high"] textarea {
    background-color: #000000;
    color: #ffffff;
    border: 2px solid #ffffff;
}

html[data-contrast="high"] input:focus,
html[data-contrast="high"] select:focus,
html[data-contrast="high"] textarea:focus {
    border-color: #ffff00;
    box-shadow: 0 0 0 3px #ffff00;
}

/* Placeholder - jasny szary */
html[data-contrast="high"] input::placeholder,
html[data-contrast="high"] textarea::placeholder {
    color: #b0b0b0;
}

/* Radio i checkbox - ciemne tło */
html[data-contrast="high"] .radio-option,
html[data-contrast="high"] .checkbox-option {
    background-color: #000000;
    border: 2px solid #ffffff;
}

html[data-contrast="high"] .radio-option:has(input:checked),
html[data-contrast="high"] .checkbox-option:has(input:checked) {
    background-color: #333300;
    border-color: #ffff00;
    box-shadow: 0 0 0 2px #ffff00;
}

/* Przyciski - żółte z czarnym tekstem */
html[data-contrast="high"] .btn-primary {
    background-color: #ffff00;
    color: #000000;
    border: 2px solid #ffff00;
}

html[data-contrast="high"] .btn-primary:hover:not(:disabled) {
    background-color: #ffdd00;
    border-color: #ffdd00;
}

html[data-contrast="high"] .btn-secondary {
    background-color: #000000;
    color: #ffff00;
    border: 2px solid #ffff00;
}

/* Nagłówki - żółte */
html[data-contrast="high"] .section-heading,
html[data-contrast="high"] .page-header h1 {
    color: #ffff00;
    border-bottom-color: #ffffff;
}

html[data-contrast="high"] .section-number {
    background-color: #ffff00;
    color: #000000;
}

/* Alerty - jasne kolory na ciemnym tle */
html[data-contrast="high"] .alert-error {
    background-color: #330000;
    color: #ff6666;
    border-left-color: #ff6666;
}

html[data-contrast="high"] .alert-success {
    background-color: #003300;
    color: #66ff66;
    border-left-color: #66ff66;
}

html[data-contrast="high"] .alert-warning {
    background-color: #331a00;
    color: #ffaa00;
    border-left-color: #ffaa00;
}

html[data-contrast="high"] .alert-info,
html[data-contrast="high"] .info-box {
    background-color: #001a33;
    color: #66ccff;
    border-left-color: #66ccff;
}

/* Error message - jasny czerwony */
html[data-contrast="high"] .error-message {
    background-color: #330000;
    color: #ff6666;
    border-left-color: #ff6666;
}

/* Focus - pogrubiony żółty */
html[data-contrast="high"] *:focus-visible {
    outline: 3px solid #ffff00;
    outline-offset: 2px;
}

/* Linki - żółte, podkreślone */
html[data-contrast="high"] a {
    color: #ffff00;
    text-decoration: underline;
}

html[data-contrast="high"] a:hover {
    color: #ffdd00;
}

/* Pasek dostępności - ciemne tło */
html[data-contrast="high"] .a11y-toolbar {
    background-color: #000000;
    border: 2px solid #ffffff;
}

html[data-contrast="high"] .a11y-btn {
    color: #ffffff;
}

html[data-contrast="high"] .a11y-btn:hover {
    background-color: #333300;
    color: #ffff00;
    border-color: #ffff00;
}

html[data-contrast="high"] .a11y-btn[aria-pressed="true"] {
    background-color: #ffff00;
    color: #000000;
}

html[data-contrast="high"] .a11y-divider {
    background-color: #ffffff;
    width: 2px;
}

/* Stopka - ciemne tło */
html[data-contrast="high"] .page-footer {
    background-color: #0a0a0a;
    border-top-color: #ffffff;
    color: #e0e0e0;
}

/* Skip link - żółty */
html[data-contrast="high"] .skip-link {
    background-color: #ffff00;
    color: #000000;
}

/* PKD listbox - ciemne tło */
html[data-contrast="high"] .pkd-listbox {
    background-color: #000000;
    border: 2px solid #ffffff;
}

html[data-contrast="high"] .pkd-option:hover,
html[data-contrast="high"] .pkd-option.is-active {
    background-color: #333300;
    border-left-color: #ffff00;
}

html[data-contrast="high"] .pkd-option[aria-selected="true"] {
    background-color: #333300;
    border-left-color: #ffff00;
}

html[data-contrast="high"] .pkd-option .pkd-code {
    color: #ffff00;
}

html[data-contrast="high"] .pkd-option mark {
    background-color: #ffff00;
    color: #000000;
}

/* Separator w formularzu */
html[data-contrast="high"] #audit-level-group,
html[data-contrast="high"] #self-assessment-group {
    border-top-color: #ffffff;
}

/* Ukryj cienie - nie potrzebne w wysokim kontraście */
html[data-contrast="high"] .form-section,
html[data-contrast="high"] .pkd-listbox,
html[data-contrast="high"] .a11y-toolbar {
    box-shadow: none;
}

/* ============================================
   WYSOKI KONTRAST + DUŻA CZCIONKA
   ============================================ */

html[data-contrast="high"][data-font-size="large"] input,
html[data-contrast="high"][data-font-size="large"] select,
html[data-contrast="high"][data-font-size="large"] textarea {
    border-width: 3px;
}

/* ============================================
   PREFERENCJE SYSTEMOWE
   ============================================ */

/* Jeśli system wymaga większego kontrastu, stosuj automatycznie */
@media (prefers-contrast: more) {
    html:not([data-contrast="high"]) {
        --color-text: #000000;
        --color-border: #000000;
        --color-text-secondary: #1a1a1a;
    }
    
    html:not([data-contrast="high"]) input,
    html:not([data-contrast="high"]) select,
    html:not([data-contrast="high"]) textarea {
        border-width: 2px;
    }
}

/* ============================================
   DRUKOWANIE
   ============================================ */
@media print {
    .a11y-toolbar,
    .skip-link,
    .form-actions,
    .page-footer {
        display: none !important;
    }
    
    .form-section {
        box-shadow: none;
        border: 1px solid #000000;
        page-break-inside: avoid;
    }
    
    body {
        background-color: #ffffff;
        color: #000000;
    }
    
    input,
    select,
    textarea {
        border: 1px solid #000000;
        background-color: #ffffff;
    }
}