/* 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;
    --akcent: #2f5ff0;
    --akcent-tekst: #ffffff;
    --akcent-hover: #2549c4;
    --niebezpieczenstwo: #c8342c;
    --niebezpieczenstwo-tlo: #fdecec;
    --sukces-tlo: #e8f6ec;
    --sukces-tekst: #1c6b34;
    --blad-tlo: #fdecec;
    --blad-tekst: #a3231d;
    --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;
        --akcent: #6d8dff;
        --akcent-tekst: #0c1120;
        --akcent-hover: #86a1ff;
        --niebezpieczenstwo: #ff7a72;
        --niebezpieczenstwo-tlo: #3a1c1a;
        --sukces-tlo: #16301f;
        --sukces-tekst: #7fd79a;
        --blad-tlo: #3a1c1a;
        --blad-tekst: #ff9990;
        --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-przygaszony);
    font-size: .9rem;
    padding: .4rem .75rem;
    border-radius: 999px;
    transition: background-color .15s ease, color .15s ease;
}

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

.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;
}

/* 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);
}

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);
}

/* 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; }
}

[x-cloak] { display: none !important; }

/* Czat wywiadu */
.czat {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 40rem;
}

.czat-lista {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    max-height: 32rem;
    overflow-y: auto;
    padding: .25rem;
}

.czat-lista-zakonczony {
    max-height: none;
    overflow-y: visible;
}

.bubble {
    padding: .65rem .9rem;
    border-radius: var(--promien);
    max-width: 34rem;
    white-space: pre-wrap;
    font-size: .95rem;
    line-height: 1.5;
}

.bubble-asystent {
    background: var(--tlo);
    border: 1px solid var(--linia);
    align-self: flex-start;
}

.bubble-pacjent {
    background: var(--akcent);
    color: var(--akcent-tekst);
    align-self: flex-end;
}

.bubble-oczekiwanie {
    font-style: italic;
    color: var(--tekst-przygaszony);
    background: none;
    border: 1px dashed var(--linia);
}

.czat-formularz {
    gap: .6rem;
    max-width: none;
}

.czat-formularz textarea {
    min-height: 4.5rem;
}

.czat-akcje {
    display: flex;
    align-items: center;
    gap: .75rem;
}