/* Reset minimalny */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    color-scheme: light dark;

    --tlo: #f5f6f8;
    --tlo-karta: #ffffff;
    --tekst: #1c2128;
    --tekst-przygaszony: #5b6270;
    --linia: #dde1e7;
    --linia-mocna: #a9b1be;
    --akcent: #2f5ff0;
    --akcent-tekst: #ffffff;
    --akcent-hover: #2549c4;
    --akcent-tlo: #e7edfe;
    --niebezpieczenstwo: #c8342c;
    --niebezpieczenstwo-tlo: #fdecec;
    --sukces-tlo: #e8f6ec;
    --sukces-tekst: #1c6b34;
    --blad-tlo: #fdecec;
    --blad-tekst: #a3231d;
    --uwaga-tlo: #fff4d6;
    --uwaga-tekst: #5c3d00;
    --uwaga-ramka: #e0a100;
    --promien: 8px;
    --cien: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}

@media (prefers-color-scheme: dark) {
    :root {
        --tlo: #14161a;
        --tlo-karta: #1d2025;
        --tekst: #e7e9ec;
        --tekst-przygaszony: #9aa1ac;
        --linia: #2c3038;
        --linia-mocna: #555d6b;
        --akcent: #6d8dff;
        --akcent-tekst: #0c1120;
        --akcent-hover: #86a1ff;
        --akcent-tlo: #26314d;
        --niebezpieczenstwo: #ff7a72;
        --niebezpieczenstwo-tlo: #3a1c1a;
        --sukces-tlo: #16301f;
        --sukces-tekst: #7fd79a;
        --blad-tlo: #3a1c1a;
        --blad-tekst: #ff9990;
        --uwaga-tlo: #3a2e10;
        --uwaga-tekst: #ffe2a3;
        --uwaga-ramka: #e0a100;
        --cien: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .3);
    }
}

html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    margin: 0;
    background: var(--tlo);
    color: var(--tekst);
    line-height: 1.55;
    font-size: 16px;
}

h1, h2, h3 {
    line-height: 1.25;
    margin: 0 0 .6em;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; margin-top: 1.6em; }

p { margin: 0 0 1em; }

a {
    color: var(--akcent);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Pasek nawigacji */
header.topbar {
    background: var(--tlo-karta);
    border-bottom: 1px solid var(--linia);
    box-shadow: var(--cien);
    position: sticky;
    top: 0;
    z-index: 10;
}

header.topbar nav {
    max-width: 68rem;
    margin: 0 auto;
    padding: .75rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.nav-marka {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--tekst) !important;
    text-decoration: none !important;
    letter-spacing: -.01em;
}

.nav-linki {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}

.nav-linki a,
.nav-linki button {
    color: var(--tekst);
    font-size: .9rem;
    padding: .4rem .75rem;
    border-radius: 999px;
    /* widoczna ramka i tło, żeby pozycja menu od razu wyglądała na klikalną,
       a nie dopiero po najechaniu myszą */
    background: var(--tlo);
    border: 1px solid var(--linia);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.nav-linki a:hover,
.nav-linki button:hover {
    background: var(--akcent);
    border-color: var(--akcent);
    color: var(--akcent-tekst);
    text-decoration: none;
}

/* bieżąca strona — żeby było widać, gdzie się jest */
.nav-linki a[aria-current="page"] {
    background: var(--akcent);
    border-color: var(--akcent);
    color: var(--akcent-tekst);
}

.nav-uzytkownik {
    color: var(--tekst-przygaszony);
    font-size: .9rem;
    padding: .4rem .5rem;
}

header.topbar form { margin: 0; }

header.topbar button {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

/* Kontener treści — "ramka" wokół całej strony */
.container {
    max-width: 68rem;
    margin: 2rem auto 3rem;
    padding: 2rem 2.25rem;
    background: var(--tlo-karta);
    border: 1px solid var(--linia);
    border-radius: calc(var(--promien) + 4px);
    box-shadow: var(--cien);
}

/* Wąska, wyśrodkowana sekcja pod formularze logowania/instalacji/rejestracji —
   bez własnej ramki/cienia, bo .container już je ma (uniknięcie "karty w karcie") */
.karta {
    max-width: 26rem;
    margin: 0 auto;
}

/* Komunikaty */
.alert {
    padding: .8rem 1rem;
    border-radius: var(--promien);
    margin-bottom: 1.25rem;
    font-size: .95rem;
}
.alert-sukces {
    background: var(--sukces-tlo);
    color: var(--sukces-tekst);
}
.alert-blad {
    background: var(--blad-tlo);
    color: var(--blad-tekst);
}
.alert ul {
    margin: 0;
    padding-left: 1.1rem;
}
/* Ostrzeżenie o Spamie — ma zatrzymać kogoś, kto odchodzi od ekranu,
   więc wyraźna ramka z lewej i większy nagłówek, nie drobny druk */
.alert-uwaga {
    background: var(--uwaga-tlo);
    color: var(--uwaga-tekst);
    border-left: 5px solid var(--uwaga-ramka);
    font-size: 1rem;
}
.alert-uwaga p {
    margin: 0 0 .5rem;
}
.alert-uwaga p:last-child {
    margin-bottom: 0;
}
.alert-uwaga-naglowek {
    font-weight: 700;
    font-size: 1.1rem;
}

/* Formularze */
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 32rem;
}

form.inline {
    flex-direction: row;
    align-items: center;
    max-width: none;
    gap: .5rem;
}

label {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .9rem;
    color: var(--tekst-przygaszony);
}

/* Opakowanie istnieje tylko po to, żeby Alpine miał jeden zasięg dla pól
   „Cykl" i „Kod" — nie może wprowadzać własnego pudełka, bo formularz jest
   kolumną flex i trzy pola zbite w jeden element straciłyby odstępy. */
.pola-kodu {
    display: contents;
}

label:has(input[type="checkbox"]) {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}

input, textarea, select {
    font: inherit;
    color: var(--tekst);
    background: var(--tlo-karta);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    padding: .55rem .7rem;
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--akcent);
    outline-offset: 1px;
}

input[type="checkbox"] {
    width: auto;
}

textarea {
    min-height: 6rem;
    resize: vertical;
}

/* Przyciski */
button, .przycisk {
    display: inline-block;
    font: inherit;
    background: var(--akcent);
    color: var(--akcent-tekst);
    border: none;
    border-radius: var(--promien);
    padding: .55rem 1.1rem;
    cursor: pointer;
    align-self: flex-start;
}
button:hover, .przycisk:hover {
    background: var(--akcent-hover);
    text-decoration: none;
}

.przycisk-niebezpieczny {
    background: transparent;
    color: var(--niebezpieczenstwo);
    border: 1px solid var(--niebezpieczenstwo);
    padding: .3rem .7rem;
    font-size: .85rem;
}
.przycisk-niebezpieczny:hover {
    background: var(--niebezpieczenstwo-tlo);
}

/* Drugorzędny NIE może być szary-na-szarym: kolor `--tekst-przygaszony`
   z obramowaniem `--linia` (tym samym, co linie tabeli) dawał przycisk
   ledwo widoczny na tle wiersza — zgłoszone 2026-09-12. Pełny kolor tekstu
   i wyraźniejsza ramka; „drugorzędność" niesie brak wypełnienia, nie
   przygaszenie. */
.przycisk-drugorzedny {
    background: transparent;
    color: var(--tekst);
    border: 1px solid var(--linia-mocna);
    padding: .3rem .7rem;
    font-size: .85rem;
}
.przycisk-drugorzedny:hover {
    background: var(--tlo);
    border-color: var(--tekst-przygaszony);
    color: var(--tekst);
}

/* Tabele */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--tlo-karta);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    overflow: hidden;
    font-size: .95rem;
}

th, td {
    text-align: left;
    padding: .65rem .9rem;
    border-bottom: 1px solid var(--linia);
}

th {
    background: var(--tlo);
    color: var(--tekst-przygaszony);
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: var(--tlo);
}

.tabela-wrapper {
    overflow-x: auto;
}

td form {
    display: inline-flex;
    margin: 0;
}

/* Listy wydarzeń w stylu kart */
.lista-wydarzen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.lista-wydarzen li {
    background: var(--tlo-karta);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    padding: 1rem 1.2rem;
}

.lista-wydarzen a {
    font-weight: 600;
    font-size: 1.05rem;
}

/* Cykle (akordeon) na publicznej liście wydarzeń */
.cykl {
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    margin-bottom: 1rem;
    overflow: hidden;
}

.cykl-naglowek {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: var(--tlo);
    border: none;
    padding: .9rem 1.2rem;
    font-size: 1rem;
    text-align: left;
    color: var(--tekst);
}
.cykl-naglowek:hover {
    background: var(--linia);
}

.cykl-strzalka {
    color: var(--tekst-przygaszony);
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
}

.cykl .lista-wydarzen {
    padding: 1rem;
}

.tekst-przygaszony {
    color: var(--tekst-przygaszony);
    font-size: .9rem;
}

.sekcja-zapisu {
    border-top: 1px solid var(--linia);
    margin-top: 1.75rem;
    padding-top: 1.5rem;
}

@media print {
    header.topbar, .no-print {
        display: none !important;
    }
    .container {
        max-width: none;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
    }
}

@media (max-width: 40rem) {
    .container { margin: 0; padding: 1.25rem 1rem 2rem; border-left: none; border-right: none; border-radius: 0; }
    header.topbar nav { padding: .75rem 1rem; }
    table, thead, tbody, th, td, tr { font-size: .88rem; }
}

.znacznik-wstrzymany {
    display: inline-block;
    padding: .1rem .45rem;
    border: 1px solid currentColor;
    border-radius: .25rem;
    font-size: .75rem;
    color: var(--tekst-przygaszony);
    white-space: nowrap;
}

/* rząd przycisków akcji nad tabelą — i przyciski w komórkach tabeli,
   żeby "Edytuj"/"Obecność" nie zlewały się z sąsiednim formularzem */
.pasek-akcji {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

td .przycisk {
    margin-right: .35rem;
}

/* --- listy w panelu: sortowanie, filtry, kolumna akcji --- */

/* „Edytuj" (link) i „Usuń" (button) muszą wyglądać identycznie — różnią się
   elementem HTML, więc bez wyrównania linii bazowej i wysokości jeden wychodzi
   wyższy od drugiego. */
.przycisk,
button.przycisk {
    vertical-align: middle;
    line-height: 1.25;
    box-sizing: border-box;
}

/* akcje jedna pod drugą, każda na pełną szerokość kolumny */
.kolumna-akcji {
    white-space: nowrap;
    width: 1%;
}

.kolumna-akcji .przycisk,
.kolumna-akcji form {
    display: block;
    margin: 0 0 .25rem;
    width: 100%;
}

.kolumna-akcji .przycisk {
    text-align: center;
}

/* W kolumnie akcji „Edytuj"/„Obecność" stoją obok „Usuń"/„Odwołaj",
   obrysowanych własnym kolorem — neutralna ramka przy nich znika. Te dwa
   dostają więc obrys w kolorze akcentu: wtedy cała kolumna czyta się jako
   jeden zestaw akcji, a czerwień nadal wyróżnia to, co nieodwracalne. */
.kolumna-akcji .przycisk-drugorzedny {
    color: var(--akcent);
    border-color: var(--akcent);
}
.kolumna-akcji .przycisk-drugorzedny:hover {
    background: var(--akcent-tlo);
    border-color: var(--akcent);
    color: var(--akcent);
}

.kolumna-akcji form:last-child,
.kolumna-akcji .przycisk:last-child {
    margin-bottom: 0;
}

.kolumna-akcji button {
    width: 100%;
}

/* kolumny, które nie mają się rozpychać (termin, liczby) */
.kolumna-waska {
    white-space: nowrap;
    width: 1%;
}

.naglowek-sortowania {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.naglowek-sortowania:hover {
    text-decoration: underline;
}

.strzalka-sortowania {
    font-size: .7em;
    color: var(--tekst-przygaszony);
}

th.kolumna-sortowana .naglowek-sortowania {
    font-weight: 700;
}

.filtry {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: flex-end;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    background: var(--tlo);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
}

.filtry label {
    gap: .25rem;
}

.filtry-akcje {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* hurtowy wybór wydarzeń na publicznej liście */
.wybor-wydarzenia {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    color: inherit;
    font-size: inherit;
}

/* --- pasek nawigacji panelu: wyróżnione zakładki --- */

/* Pastele definiujemy osobno dla obu motywów. Jasny pastel na ciemnym tle
   robi się oślepiającą plamą, więc w ciemnym motywie bierzemy przygaszony
   odcień tego samego koloru i jasny tekst. */
:root {
    --nav-administratorzy-tlo: #dbeafe;
    --nav-administratorzy-tekst: #1e3a5f;
    --nav-instrukcja-tlo: #dcfce7;
    --nav-instrukcja-tekst: #14532d;
}

@media (prefers-color-scheme: dark) {
    :root {
        --nav-administratorzy-tlo: #23405e;
        --nav-administratorzy-tekst: #d8e8fb;
        --nav-instrukcja-tlo: #1f4632;
        --nav-instrukcja-tekst: #d6f5e2;
    }
}

/* wypycha Administratorów i wszystko za nimi na prawy skraj paska */
.nav-linki .nav-administratorzy {
    margin-left: auto;
}

.nav-linki .nav-administratorzy {
    background: var(--nav-administratorzy-tlo);
    border-color: var(--nav-administratorzy-tlo);
    color: var(--nav-administratorzy-tekst);
}

.nav-linki .nav-instrukcja {
    background: var(--nav-instrukcja-tlo);
    border-color: var(--nav-instrukcja-tlo);
    color: var(--nav-instrukcja-tekst);
}

/* „Wyloguj” ma wyglądać jak klawisz, a nie jak kolejna pozycja menu —
   `header.topbar button` zdejmuje tło wszystkim przyciskom w pasku, więc
   trzeba je tutaj przywrócić jawnie. */
.nav-linki .nav-wyloguj,
header.topbar button.nav-wyloguj {
    background: var(--akcent);
    color: var(--akcent-tekst);
    border: 1px solid var(--akcent);
    border-radius: 999px;
    padding: .4rem .9rem;
    font-size: .9rem;
    cursor: pointer;
}

.nav-linki .nav-wyloguj:hover,
header.topbar button.nav-wyloguj:hover {
    background: var(--akcent-hover);
    border-color: var(--akcent-hover);
}

/* --- pasek wyszukiwania: klawisze OBOK pola, nie pod nim --- */

/* Jedna klasa dla wszystkich formatek z polem „Szukaj”, żeby nie rozjechały
   się przy kolejnej zmianie — dotąd każda miała własny układ. */
.pasek-szukania {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem .75rem;
    margin-bottom: 1rem;
    padding: .6rem .8rem;
    background: var(--tlo);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
}

.pasek-szukania label {
    flex: 1 1 18rem;
    gap: .2rem;
    margin: 0;
}

.pasek-szukania .pasek-akcje {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* „Szukaj” i „Wyczyść” tej samej wielkości — jeden jest przyciskiem
   formularza, drugi linkiem, więc bez tego różnią się wysokością i wyglądają
   na przypadkowo dobrane. */
.pasek-szukania .pasek-akcje button,
.pasek-szukania .pasek-akcje .przycisk {
    padding: .45rem 1rem;
    font-size: .9rem;
    line-height: 1.25;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- zwijany panel filtrów --- */

/* <details> zamiast JavaScriptu: działa bez Alpine, obsługuje klawiaturę
   i pamięta stan otwarcia w obrębie strony bez żadnego kodu. */
.filtry-zwijane {
    margin-bottom: 1rem;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    background: var(--tlo);
}

.filtry-zwijane > summary {
    cursor: pointer;
    padding: .6rem .8rem;
    font-size: .9rem;
    color: var(--tekst);
    list-style: none;
}

.filtry-zwijane > summary::-webkit-details-marker {
    display: none;
}

.filtry-zwijane > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: .4rem;
    color: var(--tekst-przygaszony);
}

.filtry-zwijane[open] > summary::before {
    content: '▾';
}

.filtry-zwijane > summary:hover {
    background: var(--tlo-karta);
    border-radius: var(--promien);
}

.filtry-zwijane .filtry {
    margin: 0;
    border: none;
    border-top: 1px solid var(--linia);
    border-radius: 0;
    background: transparent;
}

.znacznik-filtrow {
    font-weight: 700;
    color: var(--akcent);
}

/* odwołane wydarzenie — mocniejszy sygnał niż zawieszenie, bo to stan
   nieodwracalny i uczestnicy zostali już o nim zawiadomieni */
.znacznik-odwolane {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: .25rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    color: var(--niebezpieczenstwo);
    background: var(--niebezpieczenstwo-tlo);
    border: 1px solid var(--niebezpieczenstwo);
}