/* Portal skierowan MP2026 - jeden arkusz, bez frameworkow. */

:root {
    --tlo: #f4f6f8;
    --karta: #fff;
    --tekst: #1f2933;
    --przygaszony: #62727b;
    --akcent: #1a5f9e;
    --akcent-ciemny: #14497a;
    --blad: #b00020;
    --ok: #1b7f4b;
    --ramka: #d8dee4;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.55 "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--tekst);
    background: var(--tlo);
}

/* ── rama strony ───────────────────────────────────────────── */
.pasek-gorny {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    background: var(--akcent);
    color: #fff;
    flex-wrap: wrap;
}

.pasek-gorny .logo { font-size: 18px; font-weight: 600; color: #fff; text-decoration: none; }
.pasek-gorny .logo span { font-weight: 300; opacity: .85; }
.pasek-gorny nav { display: flex; gap: 16px; flex-wrap: wrap; }
.pasek-gorny nav a { color: #fff; text-decoration: none; opacity: .9; }
.pasek-gorny nav a:hover { text-decoration: underline; opacity: 1; }
.pasek-gorny .firma { margin-left: auto; opacity: .9; font-size: 13px; text-align: right; }
.pasek-gorny .przychodnia { display: block; font-size: 11px; opacity: .8; }
.druk-przychodnia { text-align: center; font-size: 11px; margin: -10px 0 16px; }

main { max-width: 1000px; margin: 24px auto; padding: 0 16px; }

footer {
    max-width: 1000px;
    margin: 32px auto;
    padding: 0 16px 24px;
    color: var(--przygaszony);
    font-size: 13px;
}

.karta {
    background: var(--karta);
    border: 1px solid var(--ramka);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.karta.waska { max-width: 460px; margin: 48px auto; }
h1 { font-size: 22px; margin: 0 0 12px; }

.naglowek-akcji { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ── komunikaty ────────────────────────────────────────────── */
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.flash-ok { background: #e3f5eb; color: var(--ok); }
.flash-blad { background: #fdecef; color: var(--blad); }
.flash-info { background: #e8f0f8; color: var(--akcent-ciemny); }

.blad { color: var(--blad); font-weight: 600; }
.blad-pola { display: block; color: var(--blad); font-size: 13px; margin-top: 4px; }
.uwaga { background: #fff8e1; border-left: 4px solid #f5a623; padding: 10px 14px; }
.mala { font-size: 13px; color: var(--przygaszony); }
.wyjasnienie { background: #eef4fa; border-left: 4px solid var(--akcent); padding: 10px 14px; margin: 0 0 20px; }

/* ── formularze ────────────────────────────────────────────── */
label { display: block; margin-bottom: 14px; font-size: 14px; }
input[type=text], input[type=password], input[type=date], input[type=email],
input[type=tel], input[type=search], select, textarea {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    font: inherit;
    border: 1px solid var(--ramka);
    border-radius: 5px;
    background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akcent); border-color: var(--akcent); }
textarea { resize: vertical; }

.dwie-kolumny { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }

button, .przycisk {
    display: inline-block;
    padding: 9px 18px;
    font: inherit;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}
.glowny { background: var(--akcent); color: #fff; }
.glowny:hover { background: var(--akcent-ciemny); }
.wtorny { background: #fff; color: var(--akcent); border-color: var(--akcent); }
.nawigacja { display: flex; gap: 12px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.nawigacja .inline { display: inline; }
.szukajka { display: flex; gap: 8px; margin-bottom: 16px; }
.szukajka input { margin-top: 0; }

/* ── pasek krokow ──────────────────────────────────────────── */
.kroki { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 20px; font-size: 12px; }
.kroki li { display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: #fff;
    border: 1px solid var(--ramka); border-radius: 20px; color: var(--przygaszony); }
.kroki li span { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--ramka); color: #fff; font-size: 11px; }
.kroki li.aktywny { border-color: var(--akcent); color: var(--akcent); font-weight: 600; }
.kroki li.aktywny span { background: var(--akcent); }
.kroki li.zrobiony span { background: var(--ok); }

/* ── lista czynnikow ───────────────────────────────────────── */
.pozycja { border-bottom: 1px solid var(--ramka); padding: 10px 0; }
.pozycja-naglowek { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 500; cursor: pointer; }
.pozycja-naglowek input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.pozycja .pola { display: none; margin: 10px 0 4px 28px; }
.pozycja:has(> .pozycja-naglowek input:checked) .pola { display: block; }
.warianty { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.wariant { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.wariant input { width: auto; }
.pola-wiersz { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.pola-wiersz label { font-size: 13px; color: var(--przygaszony); margin-bottom: 8px; }

.filtr-czynnikow { margin: 0 0 10px; }
.lista-czynnikow.przewijana {
    max-height: 520px;
    overflow-y: auto;
    border: 1px solid var(--ramka);
    border-radius: 6px;
    padding: 0 12px;
}
.lista-czynnikow .pozycja:last-child { border-bottom: 0; }

/* ── tabele ────────────────────────────────────────────────── */
.tabela { width: 100%; border-collapse: collapse; margin-top: 12px; }
.tabela th, .tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ramka); vertical-align: top; }
.tabela th { font-size: 13px; color: var(--przygaszony); font-weight: 600; }
.tabela .akcje a { margin-right: 10px; color: var(--akcent); }

.status { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; background: #e8f0f8; color: var(--akcent-ciemny); }
.status-zalozone { background: #e3f5eb; color: var(--ok); }
.status-anulowane { background: #f1f3f5; color: var(--przygaszony); }

/* ── podglad wydruku ───────────────────────────────────────── */
.druk {
    background: #fff;
    border: 1px solid var(--ramka);
    padding: 28px 32px;
    margin: 20px 0;
    font-family: "Times New Roman", Georgia, serif;
    font-size: 13px;
    line-height: 1.4;
}
.druk-gora { display: flex; justify-content: space-between; gap: 32px; margin-bottom: 24px; }
.druk-pole { border-bottom: 1px solid #000; padding-bottom: 2px; min-width: 220px; }
.druk-opis { font-size: 11px; color: #444; text-align: center; }
.druk-tytul { text-align: center; font-size: 16px; letter-spacing: .5px; margin: 18px 0 2px; }
.druk-podtytul { text-align: center; margin: 0 0 18px; }
.druk-wpis { border-bottom: 1px dotted #666; }
.druk-blok { display: block; min-height: 20px; }
.druk-mala { font-size: 11px; }
.druk-czynniki { width: 100%; border-collapse: collapse; margin: 12px 0; }
.druk-czynniki th { width: 190px; text-align: left; vertical-align: top; font-weight: 600; padding: 4px 8px 4px 0; }
.druk-czynniki td { border-bottom: 1px dotted #999; padding: 4px 0; }
.druk-podpis { margin-top: 36px; text-align: right; }
.druk-podpis-dane { margin-top: 2px; font-size: 11px; }
.podtytul { font-size: 15px; margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--ramka); }
.druk-objasnienia { margin-top: 24px; font-size: 10.5px; color: #333; border-top: 1px solid var(--ramka); padding-top: 10px; }
.druk-objasnienia p { margin: 3px 0; }

@media print {
    .pasek-gorny, footer, .nawigacja, .kroki, .flash, .wyjasnienie, .naglowek-akcji > .status { display: none; }
    body { background: #fff; }
    .karta { border: 0; padding: 0; }
    .druk { border: 0; padding: 0; font-size: 12px; }
    @page { margin: 12mm; }
}