/* Panel Villa Riccona — najpierw telefon, potem komputer. */

/* Paleta panelu finansowego Villa Riccona: kość, czerń, brąz; wino i szałwia na minus/plus. */
:root {
  --tlo: #FBFAF8;
  --tlo-2: #F4F1EC;
  --karta: #FFFFFF;
  --tekst: #0E0E0E;
  --tekst-2: #6E6B67;
  --tekst-3: #A9A49C;
  --linia: #E4E0DA;
  --linia-2: #EEEAE2;
  --braz: #D0A46B;
  --braz-ciemny: #8A6E43;
  --akcent: #8A6E43;
  --akcent-tlo: rgba(208, 164, 107, .20);
  --przychod: #0F493A;
  --przychod-tlo: rgba(15, 73, 58, .09);
  --wydatek: #962641;
  --wydatek-tlo: rgba(150, 38, 65, .09);
  --ostrzezenie: #8A6E43;
  --ostrzezenie-tlo: rgba(208, 164, 107, .20);
  --slupek: #8A6E43;
  --cien: none;
  --promien: 3px;
  --szeryf: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #121110;
    --tlo-2: #1F1D1A;
    --karta: #1B1916;
    --tekst: #F1EDE6;
    --tekst-2: #A8A29A;
    --tekst-3: #857F77;
    --linia: #34302B;
    --linia-2: #2A2723;
    --braz: #D0A46B;
    --braz-ciemny: #D9B17C;
    --akcent: #D9B17C;
    --akcent-tlo: rgba(208, 164, 107, .18);
    --przychod: #3DB58C;
    --przychod-tlo: rgba(61, 181, 140, .14);
    --wydatek: #D0607C;
    --wydatek-tlo: rgba(208, 96, 124, .14);
    --ostrzezenie: #D9B17C;
    --ostrzezenie-tlo: rgba(208, 164, 107, .18);
    --slupek: #D9B17C;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 16px/1.45 var(--sans);
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
a { color: var(--akcent); }
h1, h2, h3 { font-family: var(--szeryf); font-weight: 400; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

.tresc { max-width: 1100px; margin: 0 auto; padding: 16px; }
.tresc-waska { max-width: 560px; }

/* --- nawigacja: pasek u dołu na telefonie, u góry na komputerze --- */
.gora {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--linia); background: var(--karta);
}
.marka { font-family: var(--szeryf); font-size: 1.05rem; color: var(--tekst); text-decoration: none; letter-spacing: .04em; }
.marka small { color: var(--tekst-3); font-family: var(--sans); font-size: .75rem; letter-spacing: 0; margin-left: 6px; }
.gora form { margin: 0; }
.nawigacja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; background: var(--karta); border-top: 1px solid var(--linia);
  padding-bottom: env(safe-area-inset-bottom);
}
.nawigacja a {
  flex: 1; text-align: center; padding: 8px 2px 10px; font-size: .72rem;
  color: var(--tekst-2); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.nawigacja a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.nawigacja a.aktywna { color: var(--akcent); font-weight: 600; }
.nawigacja-gorna { display: none; }

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .nawigacja { display: none; }
  .nawigacja-gorna { display: flex; gap: 4px; }
  .nawigacja-gorna a { padding: 6px 12px; border-radius: 8px; color: var(--tekst-2); text-decoration: none; }
  .nawigacja-gorna a.aktywna { background: var(--akcent-tlo); color: var(--akcent); }
}

/* --- karty i siatki --- */
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); padding: 16px; box-shadow: var(--cien); margin-bottom: 16px; }
.karta > h2:first-child { margin-top: 0; }
.siatka { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .siatka-2 { grid-template-columns: 1fr 1fr; } .siatka-3 { grid-template-columns: repeat(3, 1fr); } }
.kafle { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
@media (min-width: 900px) { .kafle { grid-template-columns: repeat(4, 1fr); } }
.kafel { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); padding: 14px; box-shadow: var(--cien); }
.kafel .etykieta { font-size: .78rem; color: var(--tekst-2); }
.kafel .wartosc { font-size: 1.45rem; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kafel .pod { font-size: .78rem; color: var(--tekst-3); margin-top: 2px; }

.naglowek { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.naglowek h1 { margin: 0; }
.przelacznik-okresu { display: flex; align-items: center; gap: 8px; }
.przelacznik-okresu a { text-decoration: none; padding: 6px 10px; border: 1px solid var(--linia); border-radius: 8px; background: var(--karta); }
.przelacznik-okresu a.przycisk { background: var(--akcent); border-color: var(--akcent); color: #fff; }

.liczba { font-variant-numeric: tabular-nums; white-space: nowrap; }
.plus { color: var(--przychod); }
.minus { color: var(--wydatek); }
.wyciszony { color: var(--tekst-3); }
.maly { font-size: .85rem; }

/* --- przyciski i formularze --- */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--akcent); background: var(--akcent); color: #fff;
  padding: 10px 16px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
@media (prefers-color-scheme: dark) { .przycisk { color: #1b1917; } }
.przycisk-drugi { background: transparent; color: var(--akcent); }
.przycisk-maly { padding: 5px 10px; font-size: .85rem; font-weight: 500; }
.przycisk-tekst { background: none; border: 0; color: var(--tekst-3); cursor: pointer; font: inherit; font-size: .85rem; padding: 4px; }
.przycisk-tekst:hover { color: var(--wydatek); }

label { display: block; font-size: .85rem; color: var(--tekst-2); margin: 12px 0 4px; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--tekst); background: var(--karta);
  border: 1px solid var(--linia); border-radius: 10px; padding: 10px 12px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akcent); outline-offset: -1px; border-color: transparent; }
textarea { min-height: 90px; resize: vertical; }
.pola { display: grid; gap: 0 12px; grid-template-columns: 1fr 1fr; }
.pola > .cala { grid-column: 1 / -1; }
@media (min-width: 700px) { .pola-3 { grid-template-columns: repeat(3, 1fr); } }
.wiersz-formularza { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.wiersz-formularza > * { flex: 1 1 140px; }
.wiersz-formularza > .przycisk { flex: 0 0 auto; }
.pole-wyboru { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--tekst); font-size: .95rem; }
.pole-wyboru input { width: auto; }
.podpowiedz { font-size: .8rem; color: var(--tekst-3); margin-top: 4px; }

/* --- kasa na telefonie --- */
.rodzaj { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--linia); border-radius: 12px; padding: 3px; }
.rodzaj input { position: absolute; opacity: 0; pointer-events: none; }
.rodzaj label { margin: 0; text-align: center; padding: 12px; border-radius: 10px; font-size: 1rem; font-weight: 600; color: var(--tekst-2); cursor: pointer; }
.rodzaj input:checked + label.wydatek { background: var(--karta); color: var(--wydatek); box-shadow: var(--cien); }
.rodzaj input:checked + label.przychod { background: var(--karta); color: var(--przychod); box-shadow: var(--cien); }
.rodzaj input:focus-visible + label { outline: 2px solid var(--akcent); }

.kwota-pole { position: relative; margin-top: 16px; }
.kwota-pole input { font-size: 2.4rem; text-align: center; padding: 14px 52px; font-variant-numeric: tabular-nums; font-weight: 500; }
.kwota-pole span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--tekst-3); font-size: 1.2rem; }

.kategorie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kategorie input { position: absolute; opacity: 0; pointer-events: none; }
.kategorie label {
  margin: 0; padding: 9px 14px; border: 1px solid var(--linia); border-radius: 999px;
  background: var(--karta); color: var(--tekst); font-size: .92rem; cursor: pointer;
}
.kategorie input:checked + label { background: var(--akcent); border-color: var(--akcent); color: #fff; }
@media (prefers-color-scheme: dark) { .kategorie input:checked + label { color: #1b1917; } }
.kategorie input:focus-visible + label { outline: 2px solid var(--akcent); outline-offset: 2px; }
.grupa-kategorii[hidden] { display: none; }

.zdjecie { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.zdjecie label.przycisk { margin: 0; }
.zdjecie input { display: none; }
.zapisz-duzy { width: 100%; padding: 16px; font-size: 1.1rem; margin-top: 18px; }

.komunikat { padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; font-size: .95rem; }
.komunikat-ok { background: var(--przychod-tlo); color: var(--przychod); }
.komunikat-uwaga { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie); }
.komunikat-blad { background: var(--wydatek-tlo); color: var(--wydatek); }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--linia); }
.lista li:last-child { border-bottom: 0; }
.lista .glowne { flex: 1; min-width: 0; }
.lista .glowne small { display: block; color: var(--tekst-3); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista form { margin: 0; }

.podsumowanie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.podsumowanie div { padding: 8px 4px; }
.podsumowanie small { display: block; color: var(--tekst-3); font-size: .75rem; }
.podsumowanie strong { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.05rem; }

/* --- tabele --- */
.tabela-kontener { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-weight: 500; color: var(--tekst-2); font-size: .8rem; border-bottom: 1px solid var(--linia); padding: 8px 6px; }
td { border-bottom: 1px solid var(--linia); padding: 9px 6px; vertical-align: top; }
td.liczba, th.liczba { text-align: right; }
tr:last-child td { border-bottom: 0; }
tfoot td { font-weight: 600; border-top: 1px solid var(--tekst-3); }

/* --- kalendarz imprez --- */
.kalendarz { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--linia); border-radius: var(--promien); overflow: hidden; background: var(--linia); gap: 1px; }
.kalendarz .dzien-tyg { background: var(--karta); text-align: center; font-size: .75rem; color: var(--tekst-2); padding: 6px 0; }
.kalendarz .dzien { background: var(--karta); min-height: 56px; padding: 4px; font-size: .78rem; text-decoration: none; color: var(--tekst); display: block; min-width: 0; overflow: hidden; }
.kalendarz .dzien.inny { background: var(--tlo); color: var(--tekst-3); }
.kalendarz .dzien.dzis .nr { background: var(--akcent); color: #fff; border-radius: 999px; padding: 0 6px; }
.kalendarz .nr { font-variant-numeric: tabular-nums; }
.kalendarz .wydarzenie { display: block; margin-top: 3px; padding: 2px 5px; border-radius: 5px; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid; }
@media (max-width: 699px) {
  .kalendarz .wydarzenie { font-size: 0; height: 6px; padding: 0; margin-top: 4px; }
  .kalendarz .dzien { min-height: 48px; }
}
@media (min-width: 900px) { .kalendarz .dzien { min-height: 96px; } }

/* Kolory statusów zawsze idą w parze z etykietą — nigdy sam kolor. */
.st-zapytanie { background: var(--tlo); border-color: var(--tekst-3); color: var(--tekst-2); }
.st-opcja { background: var(--ostrzezenie-tlo); border-color: var(--ostrzezenie); color: var(--ostrzezenie); }
.st-potwierdzona { background: var(--przychod-tlo); border-color: var(--przychod); color: var(--przychod); }
.st-odbyta { background: var(--tlo); border-color: var(--tekst-2); color: var(--tekst-2); }
.st-anulowana { background: var(--tlo); border-color: var(--linia); color: var(--tekst-3); text-decoration: line-through; }
.znaczek { display: inline-block; font-size: .75rem; padding: 2px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }

.legenda { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; font-size: .8rem; }

/* --- wykresy słupkowe (SVG z serwera) --- */
.wykres svg { width: 100%; height: auto; display: block; overflow: visible; }
.wykres .slupek { fill: var(--slupek); }
.wykres .slupek-jasny { fill: var(--slupek); opacity: .35; }
.wykres .slupek:hover, .wykres .slupek-jasny:hover { opacity: .8; }
.wykres text { fill: var(--tekst-3); font-size: 11px; font-family: var(--sans); }
.wykres .os { stroke: var(--linia); }

.pasek-postepu { height: 8px; background: var(--linia); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.pasek-postepu span { display: block; height: 100%; background: var(--przychod); border-radius: 999px; }

.baner-demo {
  background: var(--ostrzezenie-tlo); color: var(--ostrzezenie); border: 1px dashed var(--ostrzezenie);
  padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-size: .9rem;
}

.zadanie { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--linia); }
.zadanie:last-child { border-bottom: 0; }
.zadanie form { margin: 0; }
.zadanie .odhacz { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--tekst-3); background: none; cursor: pointer; padding: 0; color: var(--przychod); font-weight: 700; line-height: 1; }
.zadanie.zrobione .tytul { text-decoration: line-through; color: var(--tekst-3); }
.zadanie .termin { font-size: .8rem; color: var(--tekst-3); }
.zadanie .termin.po-terminie { color: var(--wydatek); font-weight: 600; }

.logowanie { max-width: 380px; margin: 12vh auto 0; padding: 16px; }
.logowanie h1 { text-align: center; letter-spacing: .06em; }
.logowanie p { text-align: center; color: var(--tekst-2); margin-top: -4px; }

/* =====================================================================
   Kasa — kreator dla Marcina: duże pola dotyku (min. 64 px), duży tekst,
   jedno pytanie na ekran. iPhone i iPad, pionowo i poziomo.
   ===================================================================== */
.tryb-prosty { padding-bottom: env(safe-area-inset-bottom); }
.gora-prosta { justify-content: center; }
.kasa-marcin { font-size: 20px; max-width: 640px; }
.kasa-marcin .krok { padding-top: 4px; }
.kasa-marcin button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.duze-wybory { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 8px 0 16px; }
@media (min-width: 600px) { .duze-wybory { grid-template-columns: 1fr 1fr; } }
.duze-wybory-male { grid-template-columns: 1fr 1fr; margin: 8px 0; }

.wybor-duzy {
  border: 0; border-radius: 22px; padding: 30px 16px; min-height: 150px; cursor: pointer;
  font: 700 2rem/1.1 var(--sans); letter-spacing: .03em; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.wybor-duzy .znak { font-size: 3rem; line-height: 1; font-weight: 400; }
.wybor-wydatek { background: #a33a2c; }
.wybor-przychod { background: #2f6b45; }
.wybor-duzy:active { transform: scale(.98); }

.wstecz {
  background: none; border: 0; color: var(--akcent); font: 600 1.1rem var(--sans);
  padding: 12px 4px; min-height: 52px; cursor: pointer;
}
.pytanie { font-family: var(--sans); font-weight: 700; font-size: 1.7rem; margin: 4px 0 14px; }
.podpowiedz-duza { color: var(--tekst-2); font-size: 1rem; margin: 8px 0 12px; }

.pole-duze {
  font-size: 1.5rem; padding: 16px; border-radius: 14px; border: 2px solid var(--linia); min-height: 64px;
  margin-bottom: 10px;
}
textarea.pole-duze { min-height: 96px; }

.kafle-duze { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .kafle-duze { grid-template-columns: repeat(3, 1fr); } }
.kafel-duzy {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 76px; padding: 14px 10px; border-radius: 16px; border: 2px solid var(--linia);
  background: var(--karta); color: var(--tekst); font: 600 1.25rem/1.2 var(--sans); cursor: pointer; width: 100%;
  margin: 0 0 12px;
}
.kafle-duze .kafel-duzy { margin: 0; }
.kafel-duzy small { display: block; font-size: .8rem; font-weight: 400; color: var(--tekst-3); margin-top: 4px; text-transform: lowercase; }
.kafel-duzy.wybrany, .chip-duzy.wybrany { border-color: var(--akcent); background: var(--akcent-tlo); color: var(--akcent); }
.kafel-duzy:active, .chip-duzy:active { transform: scale(.98); }

.szybkie, .wybor-rzedu { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }
.wybor-rzedu .podpowiedz-duza { width: 100%; margin: 0; }
.chip-duzy {
  min-height: 56px; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--linia);
  background: var(--karta); color: var(--tekst); font: 600 1.15rem var(--sans); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.dzien-inny { position: relative; overflow: hidden; margin: 0; }
.dzien-inny input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

.przycisk-dalej, .przycisk-zapisz {
  width: 100%; min-height: 76px; border: 0; border-radius: 18px; cursor: pointer;
  font: 700 1.6rem var(--sans); color: #fff; background: var(--akcent); margin: 8px 0 12px;
}
.przycisk-zapisz { background: #2f6b45; min-height: 88px; font-size: 1.8rem; }
.przycisk-dalej:disabled, .przycisk-zapisz:disabled { opacity: .6; }

.wyswietlacz {
  text-align: center; font: 700 3.4rem/1 var(--sans); font-variant-numeric: tabular-nums;
  padding: 22px 12px; border-radius: 18px; background: var(--karta); border: 2px solid var(--linia); margin-bottom: 14px;
}
.klawiatura { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; }
.klawiatura button {
  min-height: 72px; border-radius: 16px; border: 2px solid var(--linia); background: var(--karta);
  color: var(--tekst); font: 600 2rem var(--sans); cursor: pointer;
}
.klawiatura button:active { background: var(--akcent-tlo); }
@media (max-height: 700px) { .klawiatura button { min-height: 60px; } .wyswietlacz { font-size: 2.6rem; padding: 14px; } }

.potwierdzenie { border-radius: 20px; padding: 22px 18px; text-align: center; margin-bottom: 16px; border: 3px solid; }
.potw-wydatek { background: var(--wydatek-tlo); border-color: var(--wydatek); }
.potw-przychod { background: var(--przychod-tlo); border-color: var(--przychod); }
.potw-rodzaj { font: 700 1.2rem var(--sans); letter-spacing: .08em; }
.potw-wydatek .potw-rodzaj { color: var(--wydatek); }
.potw-przychod .potw-rodzaj { color: var(--przychod); }
.potw-kwota { font: 700 3rem/1.1 var(--sans); margin: 6px 0; font-variant-numeric: tabular-nums; }
.potw-opis { font-size: 1.4rem; font-weight: 600; }
.potw-kategoria {
  margin-top: 14px; background: var(--karta); border: 2px solid var(--linia); border-radius: 999px;
  padding: 10px 18px; font: 1rem var(--sans); color: var(--tekst-2); cursor: pointer; min-height: 52px;
}
.potw-kategoria strong { color: var(--tekst); }
.potw-kategoria span { color: var(--akcent); text-decoration: underline; margin-left: 6px; }

.nowa-osoba { background: var(--ostrzezenie-tlo); border: 2px solid var(--ostrzezenie); border-radius: 16px; padding: 14px; margin-bottom: 14px; }
.nowa-osoba p { margin: 0 0 6px; font-size: 1.15rem; }
.kafel-zdjecie { flex-direction: row; gap: 8px; font-weight: 500; font-size: 1.1rem; }

.gotowe { text-align: center; padding: 26px 0 14px; }
.gotowe-znak {
  width: 120px; height: 120px; border-radius: 999px; background: #2f6b45; color: #fff;
  font: 700 4.4rem/120px var(--sans); margin: 0 auto 10px;
}
.gotowe-tekst { font: 700 2.2rem var(--sans); margin-bottom: 6px; }
.kafel-cofnij { color: var(--wydatek); font-weight: 500; font-size: 1.05rem; min-height: 64px; }
.blad-duzy { background: var(--wydatek-tlo); color: var(--wydatek); padding: 14px; border-radius: 12px; font-size: 1.1rem; }

.drgnij { animation: drgnij .35s; }
@keyframes drgnij { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .drgnij { animation: none; outline: 3px solid var(--wydatek); } }

.kasa-marcin .dzis-lista { font-size: 1.05rem; }
.lista-duza li { padding: 14px 0; }
.lista-duza .liczba { font-size: 1.15rem; font-weight: 600; }
.przycisk-usun { font-size: 1.2rem; padding: 10px; min-width: 44px; min-height: 44px; }
.linki-kasy { text-align: center; font-size: .95rem; color: var(--tekst-3); }

.kafle-skad { grid-template-columns: 1fr 1fr; }
.kafle-skad .kafel-duzy { min-height: 110px; font-size: 1.3rem; }
.kafle-skad .ikona { display: block; font-size: 2rem; margin-bottom: 6px; }

/* Wybór sal w formularzu imprezy i mapa sal */
.wybor-sal { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .wybor-sal { grid-template-columns: 1fr 1fr 1fr; } }
.sala-kafel { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px solid var(--linia);
  border-radius: 10px; background: var(--karta); color: var(--tekst); font-size: .95rem; cursor: pointer; }
.sala-kafel input { width: auto; margin-top: 3px; }
.sala-kafel small { display: block; color: var(--tekst-3); font-size: .78rem; }
.sala-kafel:has(input:checked) { border-color: var(--akcent); background: var(--akcent-tlo); }
#uwagi-sal { margin-top: 10px; }
.mapa-sal { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .mapa-sal { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .mapa-sal { grid-template-columns: 1fr 1fr 1fr; } }
.sala-karta { border-left: 5px solid var(--linia); }
.sala-karta.stan-wolna { border-left-color: var(--przychod); }
.sala-karta.stan-czesciowo { border-left-color: var(--ostrzezenie); }
.sala-karta.stan-pelna { border-left-color: var(--wydatek); }

.odmowy-znak { float: right; font-size: .68rem; color: var(--wydatek); font-weight: 600; }

/* Kilka wpisów naraz */
.lista-wpisow { list-style: none; margin: 0 0 12px; padding: 0; }
.lista-wpisow > li { background: var(--karta); border: 2px solid var(--linia); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; }
.lista-wpisow > li.do-decyzji { border-color: var(--ostrzezenie); background: var(--ostrzezenie-tlo); }
.wpis-wiersz { display: flex; align-items: center; gap: 10px; }
.wpis-wiersz .glowne { flex: 1; min-width: 0; font-size: 1.2rem; font-weight: 600; }
.wpis-wiersz .glowne small { display: block; font-size: .85rem; font-weight: 400; color: var(--tekst-3); }
.wpis-wiersz .kwota { font: 700 1.35rem var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wpis-pytanie { margin: 8px 0 0; font-size: 1rem; }
.wpis-pytanie .wybor-rzedu { margin: 6px 0 0; }
.wpis-kwota { width: 140px; font-size: 1.2rem; padding: 10px; }
.lista-suma { text-align: right; font: 600 1.2rem var(--sans); margin-bottom: 10px; }

/* Portfel Marcina na ekranie startowym */
.portfel { background: var(--karta); border: 2px solid var(--linia); border-radius: 20px; padding: 18px; text-align: center; margin-bottom: 16px; }
.portfel-etykieta { font-size: 1.05rem; color: var(--tekst-2); }
.portfel-kwota { font: 700 2.8rem/1.1 var(--sans); margin: 4px 0; font-variant-numeric: tabular-nums; }
.portfel-pod { font-size: .85rem; color: var(--tekst-3); margin-bottom: 12px; }
.kafel-policz { margin: 10px 0 0; font-size: 1.2rem; }
.przycisk-ustaw { background: none; border: 0; color: var(--akcent); text-decoration: underline; font: 1rem var(--sans);
  padding: 14px 8px 2px; min-height: 48px; cursor: pointer; }
.gotowe-znak.znak-uwaga { background: var(--ostrzezenie); }

.przycisk-usun-impreze { color: var(--wydatek); border-color: var(--wydatek); }

/* Widok tygodnia: sala × dzień */
.tydzien { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 900px; font-size: .82rem; }
.tydzien th, .tydzien td { border-right: 1px solid var(--linia); border-bottom: 1px solid var(--linia); padding: 6px; vertical-align: top; }
.tydzien thead th { background: var(--karta); position: sticky; top: 0; text-align: left; color: var(--tekst); font-size: .82rem; }
.tydzien thead th.dzis { background: var(--akcent-tlo); }
.tydzien th.sala-nazwa { width: 150px; background: var(--karta); color: var(--tekst); font-weight: 600; font-size: .85rem; }
.tydzien th.sala-nazwa small { display: block; font-weight: 400; color: var(--tekst-3); font-size: .72rem; }
.tydzien td { background: var(--karta); height: 64px; }
.tydzien td.stan-czesciowo { background: var(--ostrzezenie-tlo); }
.tydzien td.stan-pelna { background: var(--wydatek-tlo); }
.tydzien td.stan-poza { background: repeating-linear-gradient(45deg, var(--tlo), var(--tlo) 6px, var(--karta) 6px, var(--karta) 12px); color: var(--tekst-3); }
.tydzien .wpis { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding: 3px 5px; border-radius: 5px; border-left: 3px solid; margin-bottom: 4px; text-decoration: none;
  line-height: 1.25; font-size: .76rem; word-break: break-word; }
.tydzien .wpis .os { white-space: nowrap; font-weight: 600; }
.tydzien .wolne { color: var(--tekst-3); font-size: .72rem; }
.tydzien .odmowy-znak { float: none; margin-left: 6px; }


/* =====================================================================
   Styl panelu finansowego (wzór: Villa Riccona Panel) — nadpisuje wyżej.
   ===================================================================== */
body { font-size: 14px; }
h1, h2, h3 { font-family: var(--szeryf); font-weight: 400; letter-spacing: -.01em; }
h1 { font-size: 30px; }
h2 { font-size: 19px; }
a { color: var(--braz-ciemny); }

/* Nagłówek: logo + etykieta, zakładki z brązowym podkreśleniem */
.gora { background: var(--tlo); border-bottom: 1px solid var(--linia); padding: 10px 24px; }
.marka { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marka .logo img { display: block; height: 58px; width: auto; }
.kicker { font-family: var(--sans); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--braz-ciemny); font-weight: 600; }
.gora-prosta .marka .logo img { height: 46px; }
@media (min-width: 900px) {
  .nawigacja-gorna { gap: 22px; align-self: stretch; }
  .nawigacja-gorna a { display: flex; align-items: center; padding: 0 2px; border-radius: 0; background: none;
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--tekst-2);
    border-bottom: 2px solid transparent; }
  .nawigacja-gorna a:hover { color: var(--tekst); }
  .nawigacja-gorna a.aktywna { background: none; color: var(--tekst); border-bottom-color: var(--braz); }
}
.nawigacja { background: var(--tlo); }
.nawigacja a.aktywna { color: var(--tekst); }
.nawigacja a.aktywna svg { stroke: var(--braz-ciemny); }
.przycisk-tekst { color: var(--tekst-2); font-size: 12px; letter-spacing: .04em; }

.tresc { max-width: 1260px; padding: 26px 24px 60px; }
@media (max-width: 640px) { .tresc { padding: 18px 16px 40px; } .gora { padding: 8px 16px; } .marka .logo img { height: 46px; } }
.naglowek { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--linia); }

/* Karty i kafle: cienkie linie zamiast cieni, brązowy pasek po najechaniu */
.karta { border-radius: 0; box-shadow: none; padding: 22px 24px; }
.kafle { gap: 1px; background: var(--linia); border: 1px solid var(--linia); margin-bottom: 22px; }
.kafel { position: relative; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; padding: 20px 22px 18px; transition: background .25s ease; }
.kafel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--braz);
  transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.kafel:hover { background: var(--tlo-2); }
.kafel:hover::before { transform: scaleX(1); }
.kafel .etykieta { font-size: 10.5px; color: var(--braz-ciemny); text-transform: uppercase; letter-spacing: .16em; font-weight: 600; margin-bottom: 10px; }
.kafel .wartosc { font-family: var(--szeryf); font-size: 26px; font-weight: 400; letter-spacing: -.01em; }
.kafel .pod { font-size: 11px; color: var(--tekst-2); margin-top: 8px; }
.siatka { gap: 18px; }

/* Tabele: nagłówki wersalikami w brązie na jasnym tle */
th { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--braz-ciemny); font-weight: 600;
  background: var(--tlo-2); border-bottom: 1px solid var(--linia); padding: 11px 10px; }
td { border-bottom: 1px solid var(--linia-2); padding: 11px 10px; font-size: 13px; }
tbody tr:hover td { background: var(--tlo-2); }
tfoot td { border-top: 1px solid var(--linia); }

/* Przyciski: czarny, brązowieje po najechaniu; drugorzędny — obrys brązu */
.przycisk { position: relative; overflow: hidden; z-index: 0; border-radius: 3px; background: var(--tekst); border-color: var(--tekst);
  color: var(--tlo); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 11px 20px;
  transition: color .3s ease, border-color .3s ease; }
.przycisk::before { content: ""; position: absolute; inset: 0; background: var(--braz); transform: translateY(101%);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1); z-index: -1; }
.przycisk:hover::before { transform: translateY(0); }
.przycisk:hover { border-color: var(--braz); }
.przycisk-drugi { background: transparent; color: var(--braz-ciemny); border-color: var(--braz); }
.przycisk-drugi::before { display: none; }
.przycisk-drugi:hover { background: var(--braz); color: #fff; }
.przycisk-maly { padding: 7px 13px; font-size: 10.5px; }
.przelacznik-okresu a { border-radius: 3px; background: var(--karta); color: var(--tekst-2); }
.przelacznik-okresu a:hover { color: var(--tekst); border-color: var(--tekst-3); }
.przelacznik-okresu a.przycisk { background: var(--tekst); border-color: var(--tekst); color: var(--tlo); }
.przycisk-usun-impreze { color: var(--wydatek); border-color: rgba(150, 38, 65, .35); }
.przycisk-usun-impreze:hover { background: var(--wydatek-tlo); color: var(--wydatek); }

/* Formularze panelu: etykiety wersalikami, brązowy fokus */
label { font-size: 10.5px; color: var(--tekst-2); text-transform: uppercase; letter-spacing: .1em; }
input, select, textarea { border-radius: 3px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--braz); box-shadow: 0 0 0 1px var(--braz); }
.pole-wyboru, .sala-kafel { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--tekst); }

/* Plakietki statusów jako pigułki */
.znaczek { border: 0; padding: 3px 11px; font-size: 11px; font-weight: 600; }
.st-zapytanie { background: var(--tlo-2); color: var(--tekst-2); }
.st-opcja { background: var(--akcent-tlo); color: var(--braz-ciemny); }
.st-potwierdzona { background: var(--przychod-tlo); color: var(--przychod); }
.st-odbyta { background: var(--tlo-2); color: var(--tekst-3); }
.st-anulowana { background: var(--tlo-2); color: var(--tekst-3); }
.kalendarz .wydarzenie, .tydzien .wpis { border-left-width: 2px; }
.kalendarz .wydarzenie.st-opcja, .tydzien .wpis.st-opcja { border-color: var(--braz); }
.kalendarz .wydarzenie.st-potwierdzona, .tydzien .wpis.st-potwierdzona { border-color: var(--przychod); }
.kalendarz .wydarzenie.st-zapytanie, .tydzien .wpis.st-zapytanie,
.kalendarz .wydarzenie.st-odbyta, .tydzien .wpis.st-odbyta { border-color: var(--tekst-3); }
.kalendarz { border-radius: 0; }
.kalendarz .dzien-tyg { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--braz-ciemny); font-weight: 600; background: var(--tlo-2); }
.kalendarz .dzien.dzis .nr { background: var(--braz); color: #fff; }
.komunikat { border-radius: 0; border-left: 2px solid currentColor; }
.baner-demo { border-radius: 0; }
.pasek-postepu { border-radius: 0; height: 6px; }
.pasek-postepu span { border-radius: 0; }

/* Kasa Marcina: te same kolory, ale duże przyciski i zaokrąglenia zostają */
.wybor-wydatek { background: #962641; }
.wybor-przychod { background: #0F493A; }
.przycisk-zapisz { background: #0F493A; border-radius: 6px; }
.przycisk-dalej { background: var(--tekst); color: var(--tlo); border-radius: 6px; }
.gotowe-znak { background: #0F493A; }
.kasa-marcin .kafel-duzy, .kasa-marcin .chip-duzy, .kasa-marcin .portfel, .kasa-marcin .potwierdzenie, .klawiatura button { border-radius: 10px; }
.kasa-marcin label { text-transform: none; letter-spacing: 0; }
.kategorie input:checked + label { background: var(--tekst); border-color: var(--tekst); color: var(--tlo); }

/* Logowanie: duże logo zamiast napisu; nagłówek strony bez logo, żeby się nie dublowało */
.logowanie { margin-top: 8vh; text-align: center; }
.logowanie .logo-duze img { width: 190px; height: auto; display: block; margin: 0 auto 14px; }
.logowanie .kicker { text-align: center; margin: 0 0 22px; }
.logowanie .karta { text-align: left; }
body:has(.logowanie) .gora { display: none; }

/* Kafle wypełniają cały rząd niezależnie od liczby (bez pustych pól tła) */
@media (min-width: 900px) { .kafle { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.podsumowanie strong { font-family: var(--szeryf); font-weight: 400; font-size: 1.3rem; }
.podsumowanie small { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--braz-ciemny); font-weight: 600; }

/* Dzień w kalendarzu: tło dodaje imprezę, wpisy prowadzą do kart imprez. */
.kalendarz .dzien { position: relative; }
.kalendarz .dzien-dodaj { position: absolute; inset: 0; z-index: 0; }
.kalendarz .dzien-dodaj:hover { background: rgba(208, 164, 107, .08); }
.kalendarz .dzien .nr, .kalendarz .dzien .odmowy-znak { position: relative; z-index: 1; }
.kalendarz .dzien .nr { pointer-events: none; }
.kalendarz a.wydarzenie { position: relative; z-index: 1; text-decoration: none; color: inherit; cursor: pointer; }
.kalendarz a.wydarzenie:hover { filter: brightness(.95); text-decoration: underline; }
.kalendarz a.odmowy-znak { text-decoration: none; }

/* „Zapłacił pracownik z utargu” — duży przełącznik z polem do zaznaczenia */
.kafel-utarg { flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; font-size: 1.15rem; }
.kafel-utarg small { text-transform: none; font-size: .9rem; }
.kafel-utarg .pole-zaznaczenia {
  flex: none; width: 34px; height: 34px; border-radius: 8px; border: 3px solid var(--linia); background: var(--karta);
  display: inline-flex; align-items: center; justify-content: center; font: 700 1.4rem/1 var(--sans);
}
.kafel-utarg.wybrany .pole-zaznaczenia { border-color: var(--akcent); background: var(--akcent); color: #fff; }
.kafel-utarg.wybrany .pole-zaznaczenia::after { content: "✓"; }

/* =====================================================================
   Czytelność (22.10.2026): większa czcionka i mocniejszy kontrast w całym panelu.
   Kasa Marcina ma własne, duże rozmiary — zostaje bez zmian.
   ===================================================================== */
:root:not(:has(.kasa-marcin)) { font-size: 112.5%; }
:root {
  --tekst-2: #45413C;
  --tekst-3: #6B665F;
  --linia: #D6D0C6;
  --linia-2: #E3DED5;
  --braz-ciemny: #6E5532;
  --akcent: #765C35;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tekst-2: #CFC9C0;
    --tekst-3: #A7A097;
    --linia: #4A453E;
    --linia-2: #3A3631;
    --braz-ciemny: #E2BE8C;
    --akcent: #E2BE8C;
  }
}
body:not(:has(.kasa-marcin)) { font-size: 17px; line-height: 1.5; }
h1 { font-size: 34px; }
h2 { font-size: 23px; }
h3 { font-size: 19px; }
.kicker { font-size: 12.5px; letter-spacing: .2em; }
@media (min-width: 900px) { .nawigacja-gorna a { font-size: 14px; letter-spacing: .06em; } }
.nawigacja a { font-size: .8rem; }
.przycisk-tekst { font-size: 14.5px; }
.kafel .etykieta { font-size: 13px; letter-spacing: .1em; }
.kafel .wartosc { font-size: 30px; }
.kafel .pod { font-size: 14px; }
th { font-size: 12.5px; letter-spacing: .06em; padding: 12px 10px; }
td { font-size: 16px; padding: 12px 10px; }
.przycisk { font-size: 14px; letter-spacing: .05em; padding: 12px 22px; }
.przycisk-maly { font-size: 13px; padding: 8px 14px; }
label { font-size: 13px; letter-spacing: .06em; color: var(--tekst-2); }
.pole-wyboru, .sala-kafel { font-size: 1rem; }
.znaczek { font-size: 13px; padding: 4px 12px; }
.podpowiedz { font-size: .88rem; }
.maly { font-size: .92rem; }
.lista .glowne small { font-size: .88rem; }
.kalendarz .dzien-tyg { font-size: 12.5px; }
.kalendarz .dzien { font-size: .88rem; }
.kalendarz .wydarzenie { font-size: .8rem; }
.tydzien .wpis { font-size: .85rem; }
.tydzien .wolne, .tydzien th.sala-nazwa small { font-size: .8rem; }
.podsumowanie small { font-size: 12.5px; }
.wykres text { font-size: 13px; }
input, select, textarea { font-size: 1rem; }

/* Wybór dodatków z cennika — kilka krótkich list obok siebie (22.10.2026) */
.wybor-dodatkow { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 14px; }
.wybor-dodatkow label { margin-bottom: 4px; }
.wybor-dodatkow select { width: 100%; }
.wybor-dodatkow optgroup { font-weight: 700; font-style: normal; color: var(--braz-ciemny, #6E5532); }
.wybor-dodatkow option { font-weight: 400; color: var(--tekst, #1F1C18); }

/* Karta imprezy: szczegóły i funkcja po lewej, finanse po prawej; okna dialogowe (22.10.2026) */
.uklad-imprezy { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .uklad-imprezy { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.uklad-imprezy .karta { margin-bottom: 18px; }
.uklad-imprezy .kafle { grid-template-columns: 1fr 1fr; }
.sekcja-funkcji { margin-bottom: 14px; }
.sekcja-funkcji textarea { width: 100%; min-height: 2.6em; resize: vertical; line-height: 1.5; }
.lista-funkcji { margin: 2px 0 0; padding-left: 20px; }
.lista-funkcji li { margin: 2px 0; }
.wiersz-zaliczki { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--linia); background: var(--tlo-2); }
.wiersz-zaliczki strong { font-size: 1.25rem; }
.etykieta-zaliczki { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-2); margin-right: 6px; }
.tabela-zaliczek { margin-top: 4px; }
dialog.okno { border: 1px solid var(--linia); background: var(--karta); color: var(--tekst); padding: 24px 26px;
  width: calc(100% - 32px); max-width: 520px; border-radius: var(--promien); }
dialog.okno-szerokie { max-width: 860px; }
dialog.okno::backdrop { background: rgba(14, 14, 14, .45); }
dialog.okno h2 { margin-top: 0; }
.przyciski-okna { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Potwierdzone imprezy — wyraźna zieleń, żeby odróżniały się od opcji i zapytań (22.10.2026) */
.st-potwierdzona, .znaczek.st-potwierdzona { background: #1E8E3E; color: #fff; border-color: #146C2E; }
.kalendarz .wydarzenie.st-potwierdzona, .tydzien .wpis.st-potwierdzona { background: #1E8E3E; color: #fff; border-color: #0F5A24; border-left-width: 4px; font-weight: 600; }
.kalendarz .wydarzenie.st-potwierdzona a, .tydzien .wpis.st-potwierdzona a { color: #fff; }

/* Duży przycisk „+ Dodaj imprezę” w każdym widoku imprez (22.10.2026) */
.tytul-z-dodaniem { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tytul-z-dodaniem h1 { margin: 0; }
.przycisk.przycisk-dodaj-impreze { font-size: 16px; padding: 12px 22px; background: #1E8E3E; border-color: #1E8E3E; color: #fff; }
.przycisk.przycisk-dodaj-impreze:hover { background: #146C2E; border-color: #146C2E; }

/* Menu pakietu — dania do zaznaczenia w formularzu imprezy (22.10.2026) */
.sekcje-menu { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
@media (max-width: 520px) { .sekcje-menu { grid-template-columns: 1fr; } }
.sekcja-menu { border: 1px solid var(--linia); padding: 10px 14px 12px; margin: 0; min-width: 0; }
.sekcja-menu legend { font-weight: 600; padding: 0 6px; }
.licznik-menu { display: inline-block; margin-left: 6px; padding: 1px 8px; font-size: 13px; background: var(--tlo-2); color: var(--tekst-2); }
.licznik-menu.komplet { background: #1E8E3E; color: #fff; }
.licznik-menu.za-duzo { background: var(--wydatek); color: #fff; }
.danie-menu { display: grid; grid-template-columns: 22px 1fr 92px; gap: 8px; align-items: center; padding: 3px 0; }
.danie-menu input.danie-on { width: 18px; height: 18px; margin: 0; }
.danie-menu .danie-nazwa { padding: 5px 8px; border-color: transparent; background: transparent; color: var(--tekst-2); }
.danie-menu.wybrane .danie-nazwa { color: var(--tekst); font-weight: 600; border-color: var(--linia); background: var(--karta); }
.danie-menu .danie-doplata { padding: 5px 8px; visibility: hidden; }
.danie-menu.wybrane .danie-doplata { visibility: visible; }
.menu-wybrane h4 { margin: 10px 0 2px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--braz-ciemny); }
.menu-wybrane ul { margin: 0; padding-left: 20px; }

/* Nazwy dań zawijane (textarea), nie ucinane (22.10.2026) */
.danie-menu { align-items: start; }
.danie-menu input.danie-on { margin-top: 7px; }
.danie-menu textarea.danie-nazwa { resize: none; overflow: hidden; min-height: 0; line-height: 1.35; font: inherit; width: 100%; }

.danie-menu { grid-template-columns: 22px minmax(0, 1fr) 92px; }
.danie-tekst { min-width: 0; }
.znaczek-doplaty { display: inline-block; margin: 2px 0 0 8px; font-size: 12px; white-space: nowrap; padding: 1px 7px; background: var(--akcent-tlo); color: var(--braz-ciemny); }

/* Wersje funkcji: obsługa / kuchnia / bar / klient (22.10.2026) */
.wersje-funkcji { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.wersje-funkcji a { padding: 6px 12px; border: 1px solid var(--linia); text-decoration: none; color: var(--tekst); font-size: 14px; }
.wersje-funkcji a:hover { border-color: var(--braz); }
.wersje-funkcji a.dla-klienta { border-color: var(--braz); color: var(--braz-ciemny); font-weight: 600; }

/* Obsługa imprez: czerwony ludzik (brak ludzi) i grafik obsługi (22.10.2026) */
.ludzik-brak { display: inline-flex; align-items: center; gap: 1px; margin-right: 4px; padding: 0 4px 0 2px; background: #C62828; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 16px; border-radius: 3px; vertical-align: middle; }
.ludzik-brak svg { width: 13px; height: 13px; fill: #fff; }
.grafik-obslugi { border-collapse: collapse; font-size: 13px; }
.grafik-obslugi th, .grafik-obslugi td { border: 1px solid var(--linia-2); padding: 3px 4px; text-align: center; min-width: 30px; }
.grafik-obslugi th.sala-nazwa { text-align: left; min-width: 140px; white-space: nowrap; }
.grafik-obslugi th.sala-nazwa small { display: block; font-weight: 400; }
.grafik-obslugi .weekend { background: var(--tlo-2); }
.grafik-obslugi th.z-impreza { box-shadow: inset 0 -3px 0 var(--braz); }
.grafik-obslugi td.pracuje { background: #1E8E3E; }
.grafik-obslugi td.pracuje a { color: #fff; font-weight: 700; text-decoration: none; font-size: 11px; }

.przycisk-tekst.opiekun-tak { color: var(--braz-ciemny); font-weight: 700; }

/* --- Ekrany 1920 px: szerzej, karta imprezy w trzech kolumnach (23.10.2026) --- */
@media (min-width: 1500px) { .tresc { max-width: 1800px; } }
.uklad-imprezy { grid-template-areas: "info" "funkcja" "finanse"; }
.kol-info { grid-area: info; } .kol-funkcja { grid-area: funkcja; } .kol-finanse { grid-area: finanse; }
/* Szczegóły i obsługa | finanse, a funkcja pod spodem na całą szerokość (pola w kilku kolumnach). */
@media (min-width: 1000px) {
  .uklad-imprezy { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "info finanse" "funkcja funkcja"; }
}
.pola-funkcji { display: grid; gap: 4px 22px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
@media (min-width: 1500px) { .pola-funkcji { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pola-funkcji .sekcja-wysoka { grid-row: span 2; }

/* --- Równe pola w wierszach formularzy: pole, lista i przycisk tej samej wysokości --- */
.wiersz-formularza { align-items: stretch; }
.wiersz-formularza > input, .wiersz-formularza > select, .wiersz-formularza > button, .wiersz-formularza > .przycisk {
  height: 44px; min-height: 44px; box-sizing: border-box; margin: 0; }
.wiersz-formularza > button, .wiersz-formularza > .przycisk { display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; }
.wiersz-formularza > label { align-self: center; }
.wiersz-formularza > span { align-self: center; }

/* --- Przeciąganie imprez w kalendarzu --- */
.wpis[draggable], .wydarzenie[draggable] { cursor: grab; }
body.przeciaganie .cel-upuszczenia { transition: background .1s; }
.cel-upuszczenia.cel-nad { background: rgba(30, 142, 62, .14) !important; box-shadow: inset 0 0 0 2px #1E8E3E; }
.pasek-cofnij { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; display: flex; gap: 12px; align-items: center;
  background: var(--tekst); color: var(--karta); padding: 10px 14px 10px 18px; box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: 15px; }
.pasek-cofnij .przycisk { background: var(--karta); color: var(--tekst); border-color: var(--karta); }
.pasek-cofnij .przycisk-tekst { color: var(--karta); }

/* --- Tydzień na szerokim ekranie: przyklejony nagłówek i kolumna sal --- */
.tydzien thead th { position: sticky; top: 0; z-index: 2; background: var(--karta); }
.tydzien th.sala-nazwa { position: sticky; left: 0; z-index: 1; background: var(--karta); }
@media (min-width: 1500px) { .tydzien td { min-width: 200px; } .tydzien .wpis { font-size: 13.5px; } }

/* --- Kalendarz imprez: pasek u góry, strzałki po bokach, legenda i zakładki na dole ---
   Wszystkie przyciski paska mają tę samą wysokość, ramkę i zaokrąglenie; pasek, stopka i reszta strony
   są wcięte o szerokość bocznych strzałek, żeby krawędzie zgadzały się z kalendarzem. */
.kal-strona { --kal-bok: 34px; --kal-odstep: 6px; --kal-h: 40px; }
.kal-strona > *:not(.kal-ramka) { margin-left: calc(var(--kal-bok) + var(--kal-odstep)); margin-right: calc(var(--kal-bok) + var(--kal-odstep)); }
.kal-pasek { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--linia); }
.kal-nawigacja { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1; min-width: 0; }
.kal-tytul { margin: 0 6px; font-size: 1.5rem; white-space: nowrap; min-width: 0; }
.kal-widok, .kal-strzalka, .kal-dzis, .kal-data, .kal-zakladki a {
  box-sizing: border-box; height: var(--kal-h); border: 1px solid var(--linia); border-radius: 8px; background: var(--karta);
  color: var(--tekst-2); font: inherit; font-size: .95rem; text-decoration: none; }
.kal-widok { display: inline-flex; overflow: hidden; padding: 0; }
.kal-widok a { display: inline-flex; align-items: center; padding: 0 16px; text-decoration: none; color: var(--tekst-2); }
.kal-widok a + a { border-left: 1px solid var(--linia); }
.kal-widok a.aktywny { background: var(--tekst); color: var(--tlo); }
.kal-strzalka { display: inline-flex; align-items: center; justify-content: center; width: var(--kal-h); font-size: 1.35rem; line-height: 1; color: var(--tekst); }
.kal-dzis { display: inline-flex; align-items: center; padding: 0 14px; }
.kal-data { width: auto; padding: 0 10px; min-height: 0; }
.kal-strzalka:hover, .kal-dzis:hover, .kal-widok a:not(.aktywny):hover, .kal-zakladki a:hover { color: var(--tekst); border-color: var(--tekst-3); background: var(--tlo); }
.kal-dodaj { margin-left: auto; height: var(--kal-h); display: inline-flex; align-items: center; padding: 0 22px; border-radius: 8px; font-size: .95rem; }
.kal-ramka { display: grid; grid-template-columns: var(--kal-bok) minmax(0, 1fr) var(--kal-bok); gap: var(--kal-odstep); align-items: stretch; }
.kal-ramka > .karta, .kal-ramka > .kalendarz { margin: 0; min-width: 0; }
.kal-bok { display: grid; place-items: center; align-self: start; position: sticky; top: calc(50vh - 45px); height: 90px; border-radius: 8px; text-decoration: none; font-size: 1.6rem; color: var(--tekst-2); background: var(--karta); border: 1px solid var(--linia); }
.kal-bok:hover { color: var(--tlo); background: var(--tekst); border-color: var(--tekst); }
.kal-stopka { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.kal-legenda { display: grid; grid-template-columns: minmax(260px, auto) 1fr; gap: 6px 40px; font-size: .82rem; color: var(--tekst-2); order: 2; }
.kal-legenda .znaczek { margin: 0 4px 4px 0; }
.kal-legenda-tytul { font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; color: var(--tekst-3); }
.kal-probka { padding: 0 4px; }
.kal-zakladki { display: flex; gap: 8px; flex-wrap: wrap; order: 1; }
.kal-zakladki a { display: inline-flex; align-items: center; padding: 0 14px; }
@media (max-width: 720px) {
  .kal-strona > *:not(.kal-ramka) { margin-left: 0; margin-right: 0; }
  .kal-ramka { grid-template-columns: minmax(0, 1fr); }
  .kal-bok { display: none; }
  .kal-dodaj { margin-left: 0; width: 100%; justify-content: center; }
  .kal-legenda { grid-template-columns: 1fr; min-width: 0; }
}

/* --- Obsługa imprezy: osoba, godziny od–do, stawka, koszt --- */
.obsluga-lista { border-top: 1px solid var(--linia); margin-top: 6px; }
.obsluga-osoba { padding: 10px 0; border-bottom: 1px solid var(--linia); }
.obsluga-kto { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.obsluga-akcje { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.obsluga-godziny { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, .8fr) minmax(0, .95fr) auto auto; gap: 6px 8px; align-items: end; margin-top: 6px; }
.obsluga-godziny .pelna { grid-column: 1 / -1; order: 10; }
.obsluga-godziny input[type=time] { padding: 0 4px; }
.obsluga-godziny label { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: .72rem; text-transform: none; letter-spacing: 0; color: var(--tekst-3); }
.obsluga-godziny input { height: 36px; min-height: 0; padding: 0 8px; font-size: .92rem; }
.obsluga-koszt { text-align: right; font-weight: 700; padding-bottom: 8px; white-space: nowrap; }
.obsluga-suma { text-align: right; padding: 10px 0 2px; }
.obsluga-dodaj { margin-top: 14px; padding: 12px; background: var(--tlo); border: 1px dashed var(--linia); border-radius: 8px; }
.obsluga-dodaj-kto { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.obsluga-dodaj-kto select { flex: 1 1 100%; height: 38px; min-height: 0; padding: 0 10px; line-height: 1.2; }
.obsluga-dodaj-kto input { flex: 1 1 160px; height: 36px; min-height: 0; }
@media (max-width: 720px) {
  .obsluga-godziny { grid-template-columns: 1fr 1fr; }
}

/* --- Funkcja imprezy na karcie: dwie równe kolumny, uwagi przy daniach --- */
.funkcja-kolumny { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
.funkcja-kolumna { min-width: 0; }
.menu-z-uwagami h4 { margin: 12px 0 4px; }
.danie-z-uwaga { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px dotted var(--linia); }
.danie-z-uwaga input { height: 30px; min-height: 0; padding: 0 8px; font-size: .86rem; border-color: transparent; background: transparent; }
.danie-z-uwaga input:hover, .danie-z-uwaga input:focus { border-color: var(--linia); background: var(--karta); }
.danie-z-uwaga input::placeholder { color: var(--tekst-3); opacity: .7; }
.danie-z-uwaga input:not(:placeholder-shown) { border-color: var(--akcent); background: var(--karta); font-weight: 600; color: var(--akcent); }
@media (max-width: 900px) {
  .funkcja-kolumny { grid-template-columns: minmax(0, 1fr); }
  .danie-z-uwaga { grid-template-columns: minmax(0, 1fr); }
}

/* --- Funkcja imprezy: nagłówek z wydrukami i zapisem, duży zapis na dole --- */
.funkcja-naglowek { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--linia); }
.funkcja-naglowek .wersje-funkcji { margin: 0; flex: 1; }
.funkcja-zapis-gora { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.funkcja-zapis-dol { margin-top: 18px; text-align: center; }
.przycisk-duzy-zapis { width: 100%; height: 52px; font-size: 1.05rem; letter-spacing: .06em; }
.funkcja-zapis-dol .funkcja-stan { display: block; margin-top: 6px; }

/* --- Funkcja: napoje, dodatki i wykonawcy do poprawienia w miejscu --- */
.dodatki-funkcji { border-top: 1px solid var(--linia); }
.dodatek-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) 92px 112px auto auto; gap: 6px; align-items: center; padding: 5px 0; border-bottom: 1px dotted var(--linia); }
.dodatek-wiersz input { height: 32px; min-height: 0; padding: 0 8px; font-size: .9rem; }
.dodatek-wiersz .dodatek-nazwa { border-color: transparent; background: transparent; }
.dodatek-wiersz .dodatek-nazwa:hover, .dodatek-wiersz .dodatek-nazwa:focus { border-color: var(--linia); background: var(--karta); }
.dodatek-wiersz label { display: flex; align-items: center; gap: 4px; margin: 0; font-size: .8rem; color: var(--tekst-3); text-transform: none; letter-spacing: 0; }
.dodatek-wiersz label input { width: 100%; text-align: right; }
@media (max-width: 720px) { .dodatek-wiersz { grid-template-columns: 1fr 1fr; } .dodatek-wiersz .dodatek-nazwa { grid-column: 1 / -1; } }

/* --- Funkcja: wyraźne nagłówki sekcji, dodatki podzielone na bar / kuchnię / obsługę --- */
.funkcja-kolumna .sekcja-funkcji { margin-bottom: 22px; }
.funkcja-kolumna .sekcja-funkcji > label {
  display: block; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--tekst);
  font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst); }
.naglowek-dopisek { font-weight: 400; font-size: .78rem; letter-spacing: 0; text-transform: none; color: var(--tekst-3); margin-left: 6px; }
.menu-z-uwagami h3 { font-size: 1.15rem; margin: 6px 0 2px; }
.dodatki-grupa { margin: 12px 0 4px; font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--braz-ciemny, var(--tekst-2)); }
.dodatki-grupa:first-of-type { margin-top: 0; }

/* --- Stacje live cooking i bary: menu stacji i osoba --- */
.stacja { padding: 10px 0 12px; border-bottom: 1px dotted var(--linia); }
.stacja-nazwa { font-weight: 700; margin-bottom: 6px; }
.stacja textarea { width: 100%; min-height: 0; }
.stacja-osoba { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 88px 88px 86px auto; gap: 6px; align-items: end; margin-top: 6px; }
.stacja-osoba label { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: .72rem; text-transform: none; letter-spacing: 0; color: var(--tekst-3); }
.stacja-osoba input, .stacja-osoba select { height: 34px; min-height: 0; padding: 0 6px; font-size: .9rem; }
.stacja-info { margin: 6px 0 0; }
@media (max-width: 900px) { .stacja-osoba { grid-template-columns: 1fr 1fr; } }

.stacja-pola { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.stacja-pola.jedno { grid-template-columns: minmax(0, 1fr); }
.stacja-pola label { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: .72rem; text-transform: none; letter-spacing: 0; color: var(--tekst-3); }
.stacja-pola textarea { font-size: .92rem; color: var(--tekst); }
@media (max-width: 900px) { .stacja-pola { grid-template-columns: 1fr; } }

/* --- Do potwierdzenia z gośćmi + tort --- */
.do-potwierdzenia { border: 2px solid #E2A33B; background: #FFF7E6; border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; }
.do-potwierdzenia.wszystko { border-color: var(--linia); background: var(--tlo); }
.dp-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.dp-tytul { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; margin-bottom: 4px; }
.do-potwierdzenia ul { margin: 0; padding-left: 18px; }
.do-potwierdzenia ul.pilne li { color: #A4321E; font-weight: 600; }
.dp-pole { display: block; margin: 10px 0 0; font-size: .75rem; color: var(--tekst-3); text-transform: none; letter-spacing: 0; }
.dp-pole textarea { width: 100%; margin-top: 2px; min-height: 0; background: var(--karta); }
.odznaka-dp { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: #FFF0CC; color: #8A5300; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; vertical-align: middle; }
.odznaka-pilne { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: #FDECEA; color: #A4321E; font-size: .68rem; font-weight: 700; text-transform: uppercase; vertical-align: middle; }
.odznaka-ok { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: #E3F3E6; color: #1E6B35; font-size: .68rem; font-weight: 700; text-transform: uppercase; vertical-align: middle; }
.tort-pola { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) 110px 100px; gap: 6px 8px; align-items: end; }
.tort-pola label { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: .72rem; text-transform: none; letter-spacing: 0; color: var(--tekst-3); }
.tort-pola select, .tort-pola input:not([type=checkbox]) { height: 34px; min-height: 0; padding: 0 6px; font-size: .9rem; }
.tort-pola .tort-opis { grid-column: 1 / -1; }
.tort-pola .zgoda { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; font-size: .9rem; color: var(--tekst); }
.tort-pola .zgoda input { width: 20px; height: 20px; }
@media (max-width: 900px) { .dp-kolumny, .tort-pola { grid-template-columns: 1fr 1fr; } }
.tort-pola [hidden] { display: none !important; }
.tort-pola { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) 110px 100px 110px 130px; }
@media (max-width: 1400px) { .tort-pola { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Menu w funkcji: całą szerokość, serwowane | bufet i stacje --- */
.menu-funkcji { margin-bottom: 26px; }
.menu-kolumny { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; align-items: start; }
.menu-blok-tytul { font-weight: 700; font-size: .95rem; padding: 6px 10px; background: var(--tlo); border-left: 4px solid var(--braz, #8a6a3a); margin-bottom: 4px; }
.menu-funkcji label a.naglowek-dopisek { text-decoration: underline; }
@media (max-width: 900px) { .menu-kolumny { grid-template-columns: minmax(0, 1fr); } }

/* --- Marki alkoholi pod pozycją baru (open bar, welcome drink) --- */
.marki-napojow { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 12px; padding: 4px 0 10px 14px; border-bottom: 1px solid var(--linia); }
.wykonawca-prowizja { display: grid; grid-template-columns: minmax(200px, 2fr) minmax(110px, 1fr) auto auto; gap: 6px 12px; align-items: end; padding: 4px 0 10px 14px; border-bottom: 1px solid var(--linia); }
.wykonawca-prowizja label { font-size: .85em; }
.wykonawca-prowizja input:not([type=checkbox]) { width: 100%; }
@media (max-width: 700px) { .wykonawca-prowizja { grid-template-columns: 1fr; } }
.marki-napojow label { display: flex; flex-direction: column; font-size: .75rem; color: var(--tekst-2); gap: 2px; }
.marki-napojow input { font-size: .9rem; padding: 4px 6px; }

/* --- Wybór tortu w formularzu przyjęcia --- */
.wybor-tortu { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.opcja-tortu { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--linia); border-radius: 8px; cursor: pointer; font-weight: 400; }
.opcja-tortu:has(input:checked) { border-color: var(--akcent, #B08D57); background: var(--tlo); font-weight: 600; }
.opcja-tortu { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--tekst); justify-content: flex-start; text-align: left; margin: 0; }
.opcja-tortu input { width: auto; margin: 0; flex: none; }

/* --- Sala dzielona (bankietowa: cała / ½ lustra / ½ okna) --- */
.sala-dzielona { flex-direction: column; gap: 8px; }
.sala-dzielona:has(input:checked) { border-color: var(--akcent); background: var(--akcent-tlo); }
.czesci-sali { display: flex; flex-wrap: wrap; gap: 6px; }
.czesci-sali label { display: flex; align-items: center; gap: 6px; margin: 0; padding: 5px 10px; border: 1px solid var(--linia); border-radius: 999px;
  background: var(--karta, #fff); cursor: pointer; text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--tekst); }
.czesci-sali label:has(input:checked) { border-color: var(--akcent); font-weight: 600; }
.czesci-sali input { width: auto; margin: 0; }
.pol-sali { display: inline-block; font-size: .7rem; font-weight: 700; padding: 0 5px; margin-right: 4px; border-radius: 4px; background: var(--akcent-tlo); color: var(--tekst); }
.marki-napojow label.na-cala { grid-column: 1 / -1; }

/* --- Obsługa: kilka osób naraz --- */
.obsluga-wiersz { padding: 10px 0; border-bottom: 1px dashed var(--linia); }
.obsluga-wiersz:first-of-type { padding-top: 0; }
.obsluga-przyciski { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.obsluga-wiersz .obsluga-godziny { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- „do potwierdzenia” przy polu funkcji --- */
.przelacznik-dp { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: middle; }
.przelacznik-dp input { width: auto; margin: 0; }
.przelacznik-dp label { display: inline; margin: 0; font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: none;
  color: var(--tekst-3); cursor: pointer; padding: 1px 7px; border: 1px solid var(--linia); border-radius: 999px; }
.przelacznik-dp input:checked + label { color: #92400e; background: #fef3c7; border-color: #f59e0b; }
.przelacznik-dp input { position: absolute; opacity: 0; pointer-events: none; }
.pole-naglowek { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pole-naglowek > label { margin-bottom: 4px; }

/* --- Z karty restauracji (à la carte) --- */
.z-karty { margin-top: 12px; }
.z-karty input { width: 100%; }
.z-karty-dwie { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.pole-wyboru.alc { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.pole-wyboru.alc input { width: auto; margin: 0; }

.etap-pozycji { width: auto; max-width: 170px; font-size: .85rem; padding: 4px 6px; }
/* wybór „kiedy podajemy” pod nazwą pozycji, żeby wiersz się nie rozjeżdżał */
.dodatek-wiersz .dodatek-nazwa { grid-column: 1; grid-row: 1; }
.dodatek-wiersz .etap-pozycji { grid-column: 1; grid-row: 2; justify-self: start; height: 28px; padding: 0 6px; font-size: .8rem; max-width: 100%; margin-left: 8px; }
.pole-wyboru.alc { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .92rem; color: var(--tekst); }
.funkcja-kolumna .sekcja-funkcji > label.pole-wyboru.alc { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .92rem; color: var(--tekst);
  border: 0; padding: 2px 0; margin: 2px 0; font-family: inherit; }

.tabela-etapow { width: 100%; }
.tabela-etapow input[type=checkbox] { width: auto; }
.tabela-etapow .nowy-etap td { padding-top: 12px; }

/* --- Menu na stół: nazwy do druku pod funkcją --- */
.menu-na-stol { margin-top: 18px; }
.menu-na-stol-kolumny { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 32px; }
.menu-na-stol-tytul { font-weight: 700; padding: 6px 10px; background: var(--tlo); border-left: 4px solid var(--akcent, #B08D57); margin-bottom: 4px; }
.menu-na-stol h4 { margin: 12px 0 4px; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-2); }
.danie-druk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px dotted var(--linia); }
.danie-druk input { height: 32px; min-height: 0; padding: 0 8px; font-size: .9rem; }

/* ===================== Telefon (do 720 px) — na komputerze nic się nie zmienia ===================== */
.tydzien-lista { display: none; }
@media (max-width: 720px) {
  /* pasek kalendarza: widok + Dziś w pierwszym wierszu, strzałki z tytułem w drugim, data w trzecim */
  .kal-pasek { gap: 8px; }
  .kal-nawigacja { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; }
  /* ‹ tytuł › zajmują cały wiersz, „Dziś” i data spadają pod spód */
  .kal-tytul { flex: 1 1 calc(100% - 110px); min-width: 0; margin: 0; text-align: center; font-size: 1.05rem; white-space: normal; line-height: 1.2; }
  .kal-data { flex: 1 1 auto; }
  /* tydzień: lista dni zamiast tabeli */
  .kal-strona .kal-ramka { display: none; }
  .tydzien-lista { display: block; }
  .dzien-lista { background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
  .dzien-lista.dzis { border-color: var(--akcent); }
  .dzien-lista-naglowek { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--tlo); border-bottom: 1px solid var(--linia); }
  .dzien-lista-dodaj { margin-left: auto; font-size: .85rem; }
  .wpis-lista { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--linia); text-decoration: none; color: var(--tekst);
                border-left: 5px solid var(--linia); }
  .wpis-lista:last-child { border-bottom: 0; }
  .wpis-lista.st-potwierdzona { border-left-color: var(--przychod, #1f8a3b); }
  .wpis-lista.st-opcja { border-left-color: #d9b779; }
  .wpis-lista.st-odbyta { border-left-color: #9aa0a6; }
  .wpis-godz { flex: none; width: 46px; font-weight: 700; font-size: .9rem; }
  .wpis-tresc { min-width: 0; }
  .wpis-tresc strong { display: block; font-size: .95rem; }
  .wpis-tresc small { color: var(--tekst-3); }
  .dzien-pusty { margin: 0; padding: 8px 12px; }
  /* karta imprezy: jedna kolumna, która nie rozpycha się szerzej niż ekran */
  .uklad-imprezy { grid-template-columns: minmax(0, 1fr); }
  .uklad-imprezy > * { min-width: 0; }
  /* nagłówek funkcji: tytuł, pod nim przyciski wersji w wierszach, zapis na całą szerokość */
  .funkcja-naglowek h2 { flex: 1 1 100%; }
  .funkcja-naglowek .wersje-funkcji { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .funkcja-naglowek .wersje-funkcji a { flex: 1 1 auto; text-align: center; }
  .funkcja-zapis-gora { flex: 1 1 100%; }
  .funkcja-zapis-gora .przycisk { width: 100%; }
  /* ramka „do potwierdzenia”: jedna kolumna */
  .dp-kolumny { grid-template-columns: minmax(0, 1fr); }
  /* menu w formularzu: dopłata węższa, a przy niezaznaczonym daniu nie zajmuje miejsca */
  .danie-menu { grid-template-columns: 22px minmax(0, 1fr) 70px; }
  .danie-menu:not(.wybrane) { grid-template-columns: 22px minmax(0, 1fr); }
  .danie-menu:not(.wybrane) .danie-doplata { display: none; }
  /* tabele, które się nie mieszczą, przewijają się w bok zamiast rozpychać stronę */
  .tabela-kontener { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main.tresc { overflow-x: hidden; }
}

/* --- Faktury zakupu (/zakupy/dokumenty): lista + podgląd obok --- */
.dok-filtry { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.dok-filtry label { margin: 0; }
.dok-filtry-przyciski { display: flex; gap: 6px; }
.dok-uklad { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); gap: 16px; align-items: start; }
.dok-lista .tabela-kontener { max-height: calc(100vh - 290px); overflow: auto; }
.dok-tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.dok-tabela thead th { position: sticky; top: 0; background: var(--tlo); z-index: 1; text-align: left; padding: 8px; font-size: .75rem; }
.dok-tabela td { padding: 7px 8px; border-bottom: 1px solid var(--linia); vertical-align: top; }
.dok-tabela .liczba { text-align: right; white-space: nowrap; }
.dok-wiersz { cursor: pointer; }
.dok-wiersz:hover { background: var(--tlo); }
.dok-wiersz.aktywny { background: var(--akcent-tlo); }
.dok-wiersz.nowa .dok-dostawca { font-weight: 700; }
.dok-wiersz.zaplacona td { color: var(--tekst-3); }
.znacznik-nowa { font-size: .65rem; font-weight: 700; text-transform: uppercase; padding: 0 5px; border-radius: 4px; background: #e8f3ff; color: #1d4f91; }
.kat-weryfikacja { color: #a4321e; font-weight: 600; }
.po-terminie { color: #a4321e; font-weight: 700; }
.dok-stopka { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-top: 1px solid var(--linia); font-size: .88rem; }
.dok-zbiorczo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dok-zbiorczo select { width: auto; min-height: 0; height: 32px; padding: 0 8px; }
.dok-podglad { position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow: auto; }
.dok-naglowek { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.dok-naglowek h2 { font-size: 1.2rem; }
.dok-dane { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.dok-dane td { padding: 4px 6px; border-bottom: 1px solid var(--linia); }
.dok-dane td:nth-child(odd) { color: var(--tekst-3); white-space: nowrap; width: 1%; }
.tekst-ostrzezenie { color: #a4321e; } .tekst-ok { color: var(--przychod, #1f8a3b); }
.dok-kategoria-faktury select { margin-top: 4px; }
.dok-pozycje-tytul { margin: 16px 0 6px; font-size: 1rem; }
.dok-pozycja { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(150px, 190px); gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dotted var(--linia); font-size: .88rem; }
.dok-pozycja-nazwa span { display: block; }
.dok-pozycja select { height: 30px; min-height: 0; padding: 0 6px; font-size: .8rem; }
.dok-pozycja select.kat-reczna { border-color: var(--akcent); }
@media (max-width: 1000px) {
  .dok-uklad { grid-template-columns: minmax(0, 1fr); }
  .dok-podglad { position: static; max-height: none; }
  .dok-filtry { grid-template-columns: 1fr 1fr; }
  .dok-szukaj { grid-column: 1 / -1; }
  .dok-pozycja { grid-template-columns: minmax(0, 1fr) auto; }
  .dok-pozycja form { grid-column: 1 / -1; }
}
/* lista faktur: jeden wiersz na fakturę, długie nazwy skrócone (pełna w podpowiedzi) */
.dok-uklad { grid-template-columns: minmax(0, 1.8fr) minmax(360px, 1fr); }
.dok-tabela td { white-space: nowrap; }
.dok-tabela .dok-dostawca { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.dok-tabela td:nth-child(4) { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.dok-tabela td:nth-child(5) { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* Faktury zakupu jak w GastroFinanse (Alan, 30.10.2026): cała szerokość ekranu, drobniejsze pismo,
   zwarte wiersze, kolumny w tej samej kolejności (Zapł., Rodzaj, Kategoria, Dostawca, Nr, daty, kwoty, Nowe, KSeF). */
.tresc.tresc-pelna { max-width: none; padding: 14px 16px 30px; }
.tresc-pelna .naglowek { margin-bottom: 8px; }
.tresc-pelna .naglowek h1 { font-size: 1.35rem; }
.tresc-pelna .dok-filtry { padding: 10px 12px; gap: 8px; margin-bottom: 10px; font-size: .78rem;
  grid-template-columns: minmax(260px, 3fr) repeat(5, minmax(110px, 1fr)) auto; }
.tresc-pelna .dok-filtry label { font-size: .68rem; }
.tresc-pelna .dok-filtry input, .tresc-pelna .dok-filtry select { height: 30px; min-height: 0; padding: 0 8px; font-size: .8rem; }
.tresc-pelna .dok-filtry .przycisk { height: 30px; min-height: 0; padding: 0 12px; font-size: .78rem; }
.tresc-pelna .dok-uklad { grid-template-columns: minmax(0, 2.6fr) minmax(360px, 1fr); gap: 12px; }
.tresc-pelna .dok-lista .tabela-kontener { max-height: calc(100vh - 235px); }
.tresc-pelna .dok-tabela { font-size: 12px; table-layout: fixed; min-width: 1240px; }
.tresc-pelna .dok-tabela thead th { font-size: 11px; font-weight: 700; padding: 6px; white-space: nowrap; border-bottom: 1px solid var(--linia); }
.tresc-pelna .dok-tabela td { font-size: 12px; padding: 4px 6px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.tresc-pelna .dok-tabela tbody tr:nth-child(even) { background: rgba(0, 0, 0, .018); }
.tresc-pelna .dok-wiersz:hover { background: var(--tlo); }
.tresc-pelna .dok-wiersz.aktywny { background: var(--akcent-tlo); }
.dok-tabela .k-zazn { width: 26px; }
.dok-tabela .k-zapl { width: 58px; }
.dok-tabela .k-rodz { width: 46px; }
.dok-tabela .k-kat { width: 155px; }
.dok-tabela .k-dost { width: auto; min-width: 200px; }
.dok-tabela .k-nr { width: 128px; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.dok-tabela .k-data { width: 80px; font-variant-numeric: tabular-nums; }
.dok-tabela .k-kw { width: 84px; }
.dok-tabela .liczba { font-variant-numeric: tabular-nums; }
.dok-tabela .k-nowe { width: 58px; }
.tresc-pelna .dok-tabela .znacznik-nowa { font-size: 9.5px; padding: 1px 5px; }
.dok-tabela .k-ksef { width: 175px; font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: var(--tekst-3); }
.dok-tabela .kat-nazwa { color: #2d7a46; font-size: 11px; }
.dok-tabela .kat-weryfikacja { font-size: 11px; }
.dok-tabela .kat-proc { color: var(--tekst-3); margin-left: 2px; }
.dok-tabela .do-zaplaty { color: #b0412c; font-weight: 600; }
.dok-zaplacona { font-size: 10.5px; color: #2d7a46; font-weight: 600; }
.tresc-pelna .dok-wiersz.zaplacona td { color: inherit; }
.tresc-pelna .dok-wiersz.zaplacona .dok-dostawca, .tresc-pelna .dok-wiersz.zaplacona .k-nr { color: #2d7a46; }
.tresc-pelna .dok-wiersz.nowa .dok-dostawca { font-weight: 600; }
.tresc-pelna .dok-stopka { font-size: 12px; padding: 7px 10px; }
.tresc-pelna .dok-podglad { font-size: 12.5px; max-height: calc(100vh - 30px); }
.tresc-pelna .dok-podglad .dok-pozycja { font-size: 12px; }
@media (max-width: 1000px) { .tresc-pelna .dok-tabela { min-width: 980px; } .tresc-pelna .dok-filtry { grid-template-columns: 1fr 1fr; } }
.tresc-pelna .dok-podglad h2 { font-size: 1rem; }
.tresc-pelna .dok-podglad .dok-dane td { font-size: 12px; padding: 3px 6px; }
.tresc-pelna .dok-podglad .dok-pozycje-tytul { font-size: .9rem; margin: 10px 0 4px; }
.tresc-pelna .dok-podglad .dok-pozycja { padding: 4px 0; }
.tresc-pelna .dok-podglad .dok-pozycja select, .tresc-pelna .dok-podglad select { height: 28px; min-height: 0; padding: 0 6px; font-size: 11.5px; line-height: 28px; }
.tresc-pelna .dok-podglad .przycisk { min-height: 0; padding: 5px 10px; font-size: 11px; }

/* Zamknięcie dnia: ukryte kafle odpowiedzi (atrybut hidden przegrywał z display kafla). */
.kafel-duzy[hidden], #wyjasnij[hidden] { display: none !important; }

/* Tablet Marcina: do sprawdzenia */
.do-sprawdzenia .lista li { align-items: center; }
.przycisk-wyjasnij { flex: none; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--braz, #b8935a); background: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; }