/*
 * Wspolny arkusz stylow dostepni.online.
 * Wczesniej kazdy szablon powielal wlasny blok <style> z (czesto niezgodnymi)
 * wartosciami cieni/promienia zaokraglenia/kolorow. Ten plik jest jednym
 * zrodlem prawdy dla tych wartosci - patrz szablony i nie dodawaj tam
 * ponownie lokalnych definicji tych samych klas.
 */

/* ---------------------------------------------------------------------
 * Cienie
 * "shadow-sm"/"shadow-lg" nie sa klasami Bulmy - byly uzywane w markupie
 * w dziesiatkach miejsc, ale definiowane (z rozjezdzajacymi sie wartosciami)
 * tylko w czesci szablonow, przez co na reszcie stron byly no-opem.
 * ------------------------------------------------------------------- */
.shadow-sm {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.shadow-md {
    box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.08), 0 3px 6px -3px rgba(0, 0, 0, 0.05);
}
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}

/* ---------------------------------------------------------------------
 * Paleta zgodna z WCAG 2.1 AA
 *
 * Domyslna paleta Bulmy 0.9.4 nie spelnia WCAG 2.1 AA na bialym tle:
 * - is-primary/is-success/is-info/is-danger z bialym tekstem: kontrast 1.95-3.61 (wymagane 4.5)
 * - has-text-grey-light/has-text-grey: kontrast 2.05/4.29 (wymagane 4.5)
 * Nizej: te same odcienie barw, przyciemnione tak, zeby przejsc 4.5:1, bez zmiany charakteru marki.
 * Wyjatek: stopka ma ciemne tlo, wiec grey-light w niej zostaje w oryginalnym, jasniejszym odcieniu
 * (tam kontrast juz jest OK - patrz override na koncu bloku).
 * ------------------------------------------------------------------- */
:root {
    --a11y-primary: #007e6b;   /* bylo #00d1b2 - kontrast z bialym: 1.95 -> 5.00 */
    --a11y-success: #267d56;   /* bylo #48c78e - kontrast z bialym: 2.14 -> 5.06 */
    --a11y-info: #2b73af;      /* bylo #3e8ed0 - kontrast z bialym: 3.51 -> 5.03 */
    --a11y-danger: #dc1139;    /* bylo #f14668 - kontrast z bialym: 3.61 -> 5.02 */
    --a11y-grey-light: #6b6b6b; /* bylo #b5b5b5 - kontrast z bialym: 2.05 -> 5.33 */
    --a11y-grey: #595959;       /* bylo #7a7a7a - kontrast z bialym: 4.29 -> 7.00 */
}

/* :not(.is-light) - warianty "is-light" (np. tag.is-info.is-light) maja WLASNA, juz poprawna
   pare jasne-tlo/ciemny-tekst od Bulmy, bez !important - nasz ogolny override by ja rozjechal */
.button.is-primary:not(.is-light), .is-primary.button:not(.is-light), .tag.is-primary:not(.is-light),
.notification.is-primary:not(.is-light), .hero.is-primary:not(.is-light), .has-background-primary:not(.is-light),
.message.is-primary .message-header, span.is-primary:not(.is-light), div.is-primary:not(.is-light) { background-color: var(--a11y-primary) !important; }
.has-text-primary { color: var(--a11y-primary) !important; }

.button.is-success:not(.is-light), .is-success.button:not(.is-light), .tag.is-success:not(.is-light),
.notification.is-success:not(.is-light), .hero.is-success:not(.is-light), .has-background-success:not(.is-light),
.message.is-success .message-header, span.is-success:not(.is-light), div.is-success:not(.is-light) { background-color: var(--a11y-success) !important; }
.has-text-success { color: var(--a11y-success) !important; }

.button.is-info:not(.is-light), .is-info.button:not(.is-light), .tag.is-info:not(.is-light),
.notification.is-info:not(.is-light), .hero.is-info:not(.is-light), .has-background-info:not(.is-light),
.message.is-info .message-header, span.is-info:not(.is-light), div.is-info:not(.is-light) { background-color: var(--a11y-info) !important; }
.has-text-info { color: var(--a11y-info) !important; }

.button.is-danger:not(.is-light), .is-danger.button:not(.is-light), .tag.is-danger:not(.is-light),
.notification.is-danger:not(.is-light), .hero.is-danger:not(.is-light), .has-background-danger:not(.is-light),
.message.is-danger .message-header, span.is-danger:not(.is-light), div.is-danger:not(.is-light) { background-color: var(--a11y-danger) !important; }
.has-text-danger { color: var(--a11y-danger) !important; }

.has-text-grey-light { color: var(--a11y-grey-light) !important; }
.has-text-grey { color: var(--a11y-grey) !important; }

/*
 * Ciemne sekcje (stopka, boxy has-background-dark, niestandardowe hero z ciemnym tlem inline)
 * potrzebuja JASNIEJSZYCH odcieni niz reszta strony - oryginalne (nieprzyciemnione) kolory Bulmy
 * na ciemnym tle juz maja dobry kontrast, wiec tutaj po prostu je przywracamy.
 */
.has-background-dark .has-text-grey-light,
.has-background-dark .has-text-grey,
.footer.has-background-dark .has-text-grey-light,
.akademia-hero .has-text-grey-light,
.akademia-hero .has-text-grey {
    color: #b5b5b5 !important;
}
.has-background-dark .has-text-success,
.akademia-hero .has-text-success {
    color: #48c78e !important;
}
/* Ten konkretny hero ma juz recznie dobrany, mocno kontrastowy granat (bialy tekst 10.98:1) -
   wazniejsze zeby go nie nadpisywac naszym .hero.is-info niz trzymac sie jednego odcienia niebieskiego */
.hero.is-info.akademia-hero {
    background-color: #2c3e50 !important;
}

/* Widoczny fokus dla klawiatury wszedzie, gdziekolwiek przegladarka/inny styl by go wygasil */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, .button:focus-visible {
    outline: 2px solid #2b73af !important;
    outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------
 * Karta logowania / rejestracji (auth-card)
 * Wspolny komponent dla login.html i register.html - wczesniej ta sama
 * ~80-liniowa deklaracja byla skopiowana osobno do kazdego z tych plikow
 * i z czasem zaczela sie rozjezdzac (rozne max-width, rozne selektory).
 * ------------------------------------------------------------------- */
.auth-card { border-radius: 16px; overflow: hidden; border: 1px solid #e2e8f0; }

.auth-panel-col {
    background: linear-gradient(150deg, var(--a11y-primary), var(--a11y-success));
    min-height: 560px;
    display: flex;
}
.auth-panel {
    padding: 3rem 2.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.auth-panel-logo { max-height: 34px; }
.auth-panel-text { line-height: 1.7; opacity: 0.95; }
.auth-panel-features { list-style: none; padding: 0; margin: 0; }
.auth-panel-features li {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    font-weight: 600;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.auth-panel-features li:first-child { border-top: none; }
.auth-panel-features i { width: 1.25em; text-align: center; }

.auth-form-wrap {
    padding: 3rem 3rem;
    max-width: 460px;
    margin: 0 auto;
}
.auth-heading { color: #1d1d1b; margin-bottom: 0.25rem; }

.auth-input {
    width: 100%;
    padding: 0.65rem 0.9rem 0.65rem 2.4rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    height: auto;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}
.auth-input:focus {
    border-color: var(--a11y-primary);
    outline: 2px solid var(--a11y-primary);
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(0, 126, 107, 0.18);
}
.control.has-icons-right .auth-input { padding-right: 2.6rem; }

.password-toggle {
    pointer-events: auto;
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 2.5em;
    background: transparent;
    border: none;
    color: #6b6b6b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
.password-toggle:hover { color: var(--a11y-primary); }

.auth-submit { border-radius: 8px; font-weight: 700; }

@media screen and (max-width: 768px) {
    .auth-form-wrap { padding: 2.25rem 1.75rem; max-width: 100%; }
}

/* Etykieta widoczna tylko dla czytnikow ekranu - pole ma juz kontekst wizualny
   (np. placeholder albo sasiadujacy tekst), ale wciaz potrzebuje nazwy dostepnej. */
.is-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Lista wymagan hasla, ktora Django doklada do pol formularzy zmiany/resetu hasla */
.help.has-text-grey-light ul {
    margin-left: 1.5rem;
    list-style-type: disc;
    margin-top: 0.25rem;
}
.help.has-text-grey-light ul li {
    margin-bottom: 0.2rem;
}