:root {
  color-scheme: light dark;

  /* --- POWIERZCHNIE I PISMO --- */
  --bg: #f7f7f5;
  --panel: #ffffff;
  /* Tło pola wejściowego wewnątrz panelu — inaczej pole zlewa się z panelem. */
  --sunken: #f4f4f1;
  --ink: #1c1b19;
  --muted: #6b6a66;
  --line: #e3e2de;
  /* Mocniejsza linia na podsumowania tabel i granice sekcji. */
  --line-strong: #cfcdc7;

  /* --- STANY --- */
  --accent: #2f6f4f;
  --accent-soft: #e8f1eb;
  /* Pismo na tle akcentu. Nie #fff wprost, żeby dało się przestawić raz. */
  --accent-ink: #ffffff;
  --warn: #8a5a00;
  --warn-soft: #fbf1dc;
  --danger: #99342a;
  --danger-soft: #fbe9e6;

  /* --- SKUPIENIE ---
     Nie było go w ogóle: żaden przycisk, link ani pole nie pokazywało, gdzie
     stoi kursor klawiatury. Na ekranie, po którym idzie się tabulatorem przez
     tabelę z trzydziestoma polami, to nie drobiazg. */
  --focus: #1b6ec2;

  /* --- ODSTĘPY (skala 4 px) ---
     s1 wewnątrz elementu, s2 między elementami w wierszu, s3 wewnątrz
     komórek i kart, s4 między kartami, s5 między sekcjami, s6 nad nagłówkiem
     sekcji, s7 margines ekranu. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* --- PISMO ---
     micro: znaczniki i liczniki. xs: nagłówki kolumn i etykiety pól.
     sm: tekst drugoplanowy. base: tabele i formularze. body: tekst ciągły.
     lg: nagłówki sekcji i liczby na kartach. xl: nagłówek ekranu. */
  --fs-micro: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-body: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;

  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- PROMIENIE --- */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* --- CIENIE ---
     Tylko dwa, oba na rzeczy unoszone nad treść: pasek zaznaczenia i okno. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 -2px 16px rgba(0, 0, 0, 0.12);

  /* --- POLE DOTYKOWE ---
     Ekran dnia jest używany w telefonie, w biegu. 44 px to dolna granica,
     poniżej której kciuk zaczyna mylić sąsiednie pola. Było wpisane wprost
     w kilku miejscach Ekranu dnia; teraz obowiązuje wszędzie. */
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17181a;
    --panel: #1f2124;
    --sunken: #191b1d;
    --ink: #e9e8e4;
    --muted: #9b9a95;
    --line: #32353a;
    --line-strong: #474b52;

    --accent: #7fc0a0;
    --accent-soft: #23342b;
    --accent-ink: #10231a;
    --warn: #e0b063;
    --warn-soft: #35301f;
    --danger: #e59187;
    --danger-soft: #38241f;

    --focus: #6aa9e9;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 -2px 16px rgba(0, 0, 0, 0.5);
  }
}


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-body)/1.5 var(--font);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

h1 { font-size: var(--fs-xl); margin: 0 0 var(--s1); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-body); margin: var(--s6) 0 var(--s3); }

code, .mono { font-family: var(--mono); font-size: var(--fs-sm); }

/* --- POLA I PRZYCISKI ---
   Jedna reguła na wszystkie trzy, bo mają wyglądać jak jedna rodzina. */
input, select, button, textarea {
  font: inherit;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}
textarea { resize: vertical; }
button { cursor: pointer; }

/* Wysokość pola dotykowego. Dotyczy też desktopu — te same ekrany. */
input, select, button { min-height: var(--tap); }
/* Pola w wierszu tabeli i w filtrach są ciaśniejsze: tam nie ma miejsca na
   44 px na pozycję, a klika się je myszką przy stole, nie kciukiem w biegu. */
table input, table select, table button,
form.filters input, form.filters select, form.filters button { min-height: 34px; }

input:hover:not([disabled]), select:hover:not([disabled]), textarea:hover:not([disabled]) {
  border-color: var(--line-strong);
}

/* --- SKUPIENIE ---
   Jedna reguła dla wszystkiego, co da się osiągnąć klawiaturą. Wcześniej nie
   było żadnej: tabulator szedł przez ekran niewidzialny. ':focus-visible',
   a nie ':focus', żeby obrys nie skakał przy kliknięciu myszką. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Liczby w tabelach mają stać w kolumnie, a nie tańczyć przy każdej cyfrze. */
[class*="num"], [class*="money"] { font-variant-numeric: tabular-nums; }


/* --- SKOK DO TREŚCI ---
   Pierwszy element w kolejności tabulacji. Bez niego wejście klawiaturą na
   ekran z tabelą znaczy przejście przez kilkanaście linków nawigacji. */
a.skip {
  position: absolute; left: var(--s3); top: -100px; z-index: 50;
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong);
  text-decoration: none; font-size: var(--fs-sm);
}
a.skip:focus { top: var(--s2); }

header.top {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

/* --- POZIOM PIERWSZY: codzienne --- */
.tier-1 {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s3) var(--s5);
  flex-wrap: wrap;
}
.tier-1 .brand {
  font-weight: 650; letter-spacing: -0.01em; white-space: nowrap;
  /* Nazwa nie jest linkiem donikąd — prowadzi na ekran dnia, czyli tam, gdzie
     zaczyna się dzień pracy. */
  color: var(--ink); text-decoration: none;
}
.tier-1 nav { display: flex; gap: var(--s5); flex-wrap: wrap; align-items: center; }
.tier-1 nav a {
  text-decoration: none; color: var(--muted);
  font-size: var(--fs-body); padding: var(--s1) 0;
  border-bottom: 2px solid transparent;
}
.tier-1 nav a:hover { color: var(--ink); }
.tier-1 nav a[aria-current] {
  color: var(--ink); font-weight: 600; border-bottom-color: var(--accent);
}

/* --- POZIOM DRUGI: okresowe ---
   Ciszej: mniejsze pismo, inne tło, brak podkreślenia aktywnego elementu
   kolorem akcentu — sama waga pisma wystarcza, bo to nie jest miejsce,
   w którym się mieszka. */
.tier-2 {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s2) var(--s5);
  background: var(--sunken);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.tier-2 nav { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: center; }
.tier-2 a {
  text-decoration: none; color: var(--muted); font-size: var(--fs-sm);
}
.tier-2 a:hover { color: var(--ink); }
.tier-2 a[aria-current] { color: var(--ink); font-weight: 650; }

.top .spacer { margin-left: auto; }
.top .who { color: var(--muted); font-size: var(--fs-sm); }
/* Wylogowanie jest formularzem POST, ale nie ma być przyciskiem-kluchą. */
.top form.logout button {
  background: none; border: none; color: var(--muted);
  font-size: var(--fs-sm); padding: var(--s1) var(--s2); min-height: 0;
}
.top form.logout button:hover { color: var(--ink); text-decoration: underline; }

/* Link „Do decyzji" niesie licznik i jest jedynym miejscem, gdzie coś czeka
   na człowieka — zostaje w pierwszym poziomie, po prawej. Stoi poza 'nav',
   więc reguły zakładek go nie obejmują i musi mieć swoje. */
.tier-1 a.pending {
  display: inline-flex; align-items: center; gap: var(--s2);
  text-decoration: none; color: var(--muted); font-size: var(--fs-body);
  padding: var(--s1) 0; border-bottom: 2px solid transparent;
}
.tier-1 a.pending:hover { color: var(--ink); }
.tier-1 a.pending[aria-current] {
  color: var(--ink); font-weight: 600; border-bottom-color: var(--accent);
}

main { max-width: 1500px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s7); }
main.narrow { max-width: 720px; }

.sub { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--s5); }

/* --- PODNAWIGACJA WEWNĄTRZ EKRANU ---
   Używana tam, gdzie jeden ekran ma kilka widoków (katalogi, stawki). */
.subnav {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s3) 0 var(--s4); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.subnav a { color: var(--muted); text-decoration: none; font-size: var(--fs-base); }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current] { color: var(--ink); font-weight: 650; }
.subnav .spacer { margin-left: auto; }
.subnav a.primary-link {
  background: var(--accent); color: var(--accent-ink);
  padding: var(--s2) var(--s3); border-radius: var(--r-sm); font-weight: 600;
}

.section-head { display: flex; align-items: baseline; gap: var(--s3); margin: var(--s6) 0 var(--s3); }
.section-head h2 { margin: 0; }
.section-head .hint { font-size: var(--fs-sm); color: var(--muted); }

.back { font-size: var(--fs-sm); text-decoration: none; }

/* --- TELEFON ---
   Na wąskim ekranie nawigacja zawijała się na trzy linie, zanim zaczynała się
   treść. Ekran dnia jest używany w biegu, więc te linie kosztują dokładnie to,
   po co się do niego wchodzi. Zamiast zawijania — przewijanie w poziomie:
   dwa paski po jednej linii każdy, reszta pod palcem.

   Imię i rola znikają. W terenie pracuje jedna osoba na swoim telefonie
   i wie, kim jest; „Wyloguj" zostaje, bo bywa potrzebne. */
@media (max-width: 719px) {
  .tier-1 { padding: var(--s2) var(--s4); gap: var(--s3); flex-wrap: nowrap; }
  .tier-1 nav, .tier-2 nav {
    flex-wrap: nowrap; overflow-x: auto; gap: var(--s4);
    /* Pasek przewijania zabrałby wysokość paska nawigacji. */
    scrollbar-width: none;
  }
  .tier-1 nav::-webkit-scrollbar, .tier-2 nav::-webkit-scrollbar { display: none; }
  .tier-1 nav a, .tier-2 nav a { white-space: nowrap; }
  .tier-1 nav { font-size: var(--fs-base); }
  .tier-1 .who { display: none; }
  /* Nazwa aplikacji łamała się na dwie linie i zabierała szerokość zakładkom.
     Prowadzi na Ekran dnia, a zakładka 'Dzień' stoi obok i robi to samo. */
  .tier-1 .brand { display: none; }
  .tier-1 a.pending { white-space: nowrap; }
  .tier-2 { padding: var(--s2) var(--s4); gap: var(--s3); }
  main { padding: var(--s4) var(--s4) 80px; }
}


/* --- PANEL --- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* --- TABELA ---
   Tabele bywają szerokie (Passengers ma kilkanaście kolumn), więc przewijanie
   w poziomie jest zamknięte w '.tablewrap' — przewija się tabela, nie strona.

   Nagłówka przyklejonego do góry TU NIE MA i nie da się go tak dopisać:
   'overflow-x: auto' sprawia, że przeglądarka liczy 'overflow-y' jako 'auto',
   więc '.tablewrap' staje się kontenerem przewijania. 'position: sticky' w 'th'
   czepia się wtedy tego kontenera, a nie strony, i przy przewijaniu strony
   nie robi nic. Żeby nagłówek naprawdę stał, trzeba ograniczyć wysokość
   '.tablewrap' i pozwolić jej przewijać się w pionie — to zmiana układu
   ekranu, nie wiersz CSS. */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-base); }
th, td {
  text-align: left; padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
th {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 600;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
tfoot td { font-weight: 650; border-top: 2px solid var(--line-strong); }

td.num, td.money { text-align: right; }
td.money { white-space: nowrap; }
td.pos { color: var(--accent); font-weight: 600; }
td.neg { color: var(--danger); font-weight: 600; }
td.wrap { white-space: normal; max-width: 380px; }
td.notes { white-space: normal; max-width: 260px; font-size: var(--fs-sm); color: var(--muted); }
td.people { white-space: normal; max-width: 220px; }
td.actions { display: flex; gap: var(--s3); align-items: center; white-space: nowrap; }
td.actions form { display: inline; }

a.rowlink { text-decoration: none; }

tr.archived td { opacity: 0.5; }
tr.archived td:first-child::after {
  content: ' (archiwalna)'; font-size: var(--fs-micro); color: var(--muted);
}

/* --- PRZYCISKI --- */
button.primary {
  background: var(--accent); color: var(--accent-ink);
  border-color: transparent; font-weight: 600;
}
button.warn-button {
  background: var(--warn-soft); color: var(--warn);
  border-color: transparent; font-weight: 600;
}
/* Przycisk udający link — w komórce akcji, gdzie POST musi wyglądać jak link. */
button.link {
  background: none; border: none; color: var(--accent); cursor: pointer;
  padding: 0; min-height: 0; font-size: inherit; text-decoration: underline;
}
a.przycisk {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  padding: var(--s2) var(--s4); border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; text-decoration: none;
}

/* --- FORMULARZ --- */
.field { margin-bottom: var(--s4); display: flex; flex-direction: column; gap: var(--s1); }
.field label { font-size: var(--fs-sm); color: var(--muted); }
.field .req { color: var(--danger); }
.field input, .field select, .field textarea { width: 100%; }
.field .hint { font-size: var(--fs-xs); color: var(--muted); }
.field-error { font-size: var(--fs-sm); color: var(--danger); }
.invalid { border-color: var(--danger); }
.form-actions { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s5); }

form.filters { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: end; margin-bottom: var(--s4); }
/* Pole filtru z podpisem NAD nim. Filtr bez podpisu zmusza do zgadywania,
   co znaczy druga data z rzędu albo druga godzina. */
form.filters .pole { display: flex; flex-direction: column; gap: 2px; }
form.filters .pole > span { font-size: var(--fs-xs); color: var(--muted); }
/* Pole wyboru ma podpis OBOK, nie nad — inaczej kwadracik wisi bez kontekstu. */
form.filters .pole-ptak { flex-direction: row; align-items: center; gap: var(--s2); min-height: 34px; }
form.filters .pole-ptak input { width: 18px; height: 18px; min-height: 0; }

/* Kolumna, dla której powstał cały ekran — czytelna z drugiego końca biurka. */
td.sprzedaz strong { font-size: var(--fs-lg); font-weight: 700; }
td.sprzedaz { text-align: right; }
form.inline-form { display: inline-flex; gap: var(--s1); align-items: center; margin-right: var(--s2); }
form.inline-form input { padding: var(--s1) var(--s2); font-size: var(--fs-sm); min-height: 32px; }
form.inline-form button { padding: var(--s1) var(--s2); font-size: var(--fs-xs); min-height: 32px; }

/* --- FORMULARZ POPRAWKI W WIERSZU TABELI ---
   Wiersz odrzucony przy imporcie ma tyle pól, ilu wartości brakuje — bywa ich
   trzy. Ustawione w rząd (jak 'inline-form') rozpychały tabelę poza prawą
   krawędź ekranu razem z przyciskiem zapisu, więc poprawki nie dało się
   zatwierdzić bez przewijania w bok. Pola idą więc JEDNO POD DRUGIM, a ich
   szerokość jest płynna i ograniczona od góry — kolumna nie rośnie od długiej
   wartości. */
form.poprawka { display: grid; gap: var(--s2); max-width: 260px; }
form.poprawka label { display: grid; gap: 2px; }
form.poprawka input { width: 100%; padding: var(--s1) var(--s2); font-size: var(--fs-sm); min-height: 32px; }
form.poprawka button { justify-self: start; padding: var(--s1) var(--s2); font-size: var(--fs-xs); min-height: 32px; }

/* --- KOMUNIKATY ---
   Trzy stany, jedna budowa: lewa krawędź nosi znaczenie, treść jest czytelna
   bez koloru (komunikat mówi, co się stało, nie sam kolor). */
.notice {
  border: 1px solid var(--line); border-left: 3px solid var(--warn);
  background: var(--warn-soft); color: var(--warn);
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  font-size: var(--fs-base); margin-bottom: var(--s5);
}
.notice.ok { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.notice.warn ul { margin: var(--s2) 0; padding-left: var(--s5); }
.notice.warn a { color: inherit; }
.error {
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: var(--s2) var(--s3); font-size: var(--fs-base); margin-top: var(--s4);
}

/* --- ZNACZNIKI ---
   Trzy rodzaje, bo znaczą trzy różne rzeczy: 'pill' to STAN rekordu
   (potwierdzona, anulowana), 'tag' to jego RODZAJ (OTA, prywatne),
   'chip' to LICZBA albo szczegół dopisany do wiersza. */
.pill {
  display: inline-block; padding: 2px var(--s2); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; border: 1px solid transparent;
}
.pill.confirmed, .pill.completed { background: var(--accent-soft); color: var(--accent); }
.pill.pending { background: var(--warn-soft); color: var(--warn); }
.pill.cancelled, .pill.no_show { background: var(--danger-soft); color: var(--danger); }

.tag {
  display: inline-block; padding: 1px var(--s2); border-radius: var(--r-sm);
  font-size: var(--fs-micro); border: 1px solid var(--line);
  color: var(--muted); margin-right: var(--s1);
}
.tag.ota { border-color: var(--accent); color: var(--accent); }
.tag.private { border-color: var(--warn); color: var(--warn); }

.chip {
  display: inline-block; padding: 1px var(--s2); margin-right: var(--s1);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--fs-micro); color: var(--muted);
}
.chip.over { border-color: var(--danger); color: var(--danger); font-weight: 600; }

/* Licznik przy „Do decyzji". Ma być widoczny, ale nie krzyczeć — to kolejka
   do przejrzenia, nie awaria. */
.badge {
  display: inline-block; min-width: 18px; padding: 0 var(--s1);
  border-radius: var(--r-pill);
  background: var(--warn-soft); color: var(--warn);
  font-size: var(--fs-micro); font-weight: 700; text-align: center;
}

.cur { font-size: var(--fs-micro); color: var(--muted); margin-left: 3px; }
.cur.over { color: var(--danger); font-weight: 700; }
.cur.full { color: var(--accent); font-weight: 600; }
.missing { color: var(--danger); font-weight: 600; }

/* --- KAFLE Z LICZBAMI --- */
.stats { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); min-width: 120px;
}
.stat .n { font-size: var(--fs-xl); font-weight: 650; font-variant-numeric: tabular-nums; }
.stat .l { font-size: var(--fs-xs); color: var(--muted); }

/* --- LISTA OPISOWA --- */
dl.kv { display: grid; grid-template-columns: 190px 1fr; gap: 0; margin: 0; }
dl.kv dt {
  color: var(--muted); font-size: var(--fs-sm);
  padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line);
}
dl.kv dd { margin: 0; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
dl.kv dt:last-of-type, dl.kv dd:last-of-type { border-bottom: none; }
dl.kv.compact { grid-template-columns: 92px 1fr; font-size: var(--fs-sm); }
dl.kv.compact dt, dl.kv.compact dd { padding: var(--s1) 0; border: none; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--s4); }

/* --- PUSTO ---
   Stan pusty ma powiedzieć, dlaczego jest pusto. Sam „brak danych" zostawia
   człowieka z pytaniem, czy to awaria, czy tak ma być. */
.empty { padding: var(--s7) var(--s5); text-align: center; color: var(--muted); }

details.fallback { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--muted); }
details.fallback summary { cursor: pointer; }


.dzien { max-width: 1100px; }

/* --- PASEK DATY ---
   Przyklejony do góry, bo przy dziesięciu voucherach data wyjeżdża z ekranu,
   a to ona mówi, na co się patrzy. */
.dnav {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) 0; margin-bottom: var(--s3);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.dnav a.strzalka {
  display: flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); text-decoration: none;
  color: var(--ink); font-size: var(--fs-lg);
}
.dnav .dzis { flex: 1; text-align: center; }
.dnav .dzis strong { display: block; font-size: var(--fs-lg); }
.dnav .dzis span { font-size: var(--fs-xs); color: var(--muted); }
.dnav input[type="date"] { min-height: var(--tap); }

/* --- WEJŚCIA DO MUZEUM ---
   Poziomy pasek kart: godzin wejścia jest kilka na dzień i mają być widoczne
   obok siebie, bo wybór pada między nimi. */
.wejscia { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s1); }
.wej {
  flex: 0 0 auto; min-width: 132px; padding: var(--s3);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.wej strong { display: block; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.wej span { display: block; font-size: var(--fs-xs); color: var(--muted); }
/* Status po ludzku, nie wielkimi literami: to zdanie do przeczytania,
   a nie kod do rozpoznania. */
.wej .stan { margin-top: 3px; font-size: var(--fs-xs); }
.wej .stan.ok { color: var(--accent); }
.wej .stan.uwaga { color: var(--warn); }
.wej .stan.zle { color: var(--danger); }
.wej .jezyk { font-size: var(--fs-xs); }
.wej .licznik .wolne { color: var(--muted); font-weight: 400; }
.wej .platnosc.cichy { color: var(--muted); opacity: 0.8; }
.wej { min-width: 168px; }
.wej .platnosc { font-size: var(--fs-micro); }
.wej .alarm { margin-top: 3px; font-size: var(--fs-micro); color: var(--danger); font-weight: 600; }
.wej.pelne { border-color: var(--accent); }
.wej.pelne span.licznik { color: var(--accent); font-weight: 600; }
.wej.pilne { border-color: var(--danger); }
.wej.martwe { border-style: dashed; opacity: 0.6; }
.wej.martwe .stan { color: var(--danger); }

/* --- REZERWACJE DO PRZYPISANIA ---
   Cały wiersz jest etykietą pola wyboru: na telefonie trafienie w sam kwadracik
   jest loterią, a w wiersz — nie. */
ul.rezerwacje { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
ul.rezerwacje > li { display: flex; flex-direction: column; gap: var(--s1); }
label.rez {
  display: grid; grid-template-columns: 26px 1fr; gap: 3px var(--s3); align-items: start;
  min-height: 56px; padding: var(--s3);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
}
label.rez input[type="checkbox"] { grid-row: span 3; width: 22px; height: 22px; margin: 2px 0 0; min-height: 0; }
label.rez .kto { font-weight: 600; }
label.rez .kto .godz { font-variant-numeric: tabular-nums; margin-right: var(--s1); }
label.rez .szczegoly { font-size: var(--fs-sm); color: var(--muted); }
label.rez .znaczniki { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: 2px; }
label.rez.przypisana { opacity: 0.55; }
label.rez.anulowana { border-color: var(--danger); background: var(--danger-soft); opacity: 0.75; }
label.rez:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.znacznik {
  display: inline-block; padding: 1px var(--s2); border-radius: var(--r-sm);
  font-size: var(--fs-micro); border: 1px solid var(--line);
  color: var(--muted); background: var(--panel);
}
.znacznik.brak { border-color: var(--danger); color: var(--danger); }
.znacznik.voucher { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.znacznik.wejscie { border-color: var(--accent); color: var(--accent); }
ul.rezerwacje > li > .znacznik { align-self: flex-start; margin-left: var(--s3); }

form.propozycja { display: inline; }
button.propozycja {
  align-self: flex-start; margin-left: var(--s3);
  padding: var(--s2) var(--s3); font-size: var(--fs-sm);
  border-radius: var(--r-sm); min-height: 36px;
  border-style: dashed; color: var(--accent);
}
button.propozycja.niepewna { border-color: var(--warn); color: var(--warn); }

/* --- PASEK ZAZNACZENIA ---
   Nad kciukiem, nie pod treścią. Pojawia się dopiero, gdy coś jest zaznaczone. */
.pasek {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: none; gap: var(--s2); align-items: center; flex-wrap: wrap;
  padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: var(--panel); border-top: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.pasek.widoczny { display: flex; }
.pasek .licznik { font-weight: 650; flex: 1 0 100%; }
.pasek button { min-height: var(--tap); flex: 1; }

/* --- OKNO OD DOŁU ---
   Arkusz, nie okienko na środku: kciuk dosięga dolnej połowy ekranu. */
dialog.arkusz {
  width: 100%; max-width: 560px; margin: auto auto 0; padding: 0;
  border: none; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--panel); color: var(--ink);
  box-shadow: var(--shadow-2);
}
dialog.arkusz::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog.arkusz .tresc { padding: var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px)); }
dialog.arkusz h2 { margin: 0 0 var(--s3); font-size: var(--fs-lg); }
dialog.arkusz .uchwyt {
  width: 38px; height: 4px; border-radius: 2px;
  background: var(--line); margin: var(--s2) auto 0;
}
dialog.arkusz input, dialog.arkusz select { min-height: var(--tap); }
dialog.arkusz .form-actions button { min-height: var(--tap); flex: 1; }
dialog.arkusz .form-actions form { flex: 1; display: flex; }
dialog.arkusz .form-actions form button { width: 100%; }

/* --- VOUCHERY --- */
.vouchery { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
.vcard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s3);
}
.vcard header { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.vcard header .numer { font-weight: 700; font-variant-numeric: tabular-nums; }
.vcard .szczegoly { font-size: var(--fs-sm); color: var(--muted); }
.vcard.zbraki { border-left: 3px solid var(--warn); }
.vcard.rozjazd { border-left: 3px solid var(--danger); }
.vcard .alarm { display: block; margin: var(--s1) 0; font-size: var(--fs-sm); color: var(--danger); font-weight: 600; }
.vcard .kwoty { display: flex; gap: var(--s3); flex-wrap: wrap; font-variant-numeric: tabular-nums; margin: var(--s2) 0; }
.vcard .kwoty div span { display: block; font-size: var(--fs-micro); color: var(--muted); }
.vcard .zysk.dodatni { color: var(--accent); font-weight: 650; }
.vcard .zysk.ujemny { color: var(--danger); font-weight: 650; }
.vcard ul { list-style: none; margin: var(--s1) 0 0; padding: 0; font-size: var(--fs-sm); color: var(--muted); }
.vcard .akcje { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
.vcard .akcje button, .vcard .akcje .przycisk { min-height: var(--tap); flex: 1; }
.chip.wyslane { border-color: var(--accent); color: var(--accent); }

/* --- GODZINY ODBIORU ---
   Czas i adres w jednym wierszu, czas po lewej w stałej szerokości: przy
   dziesięciu odbiorach liczy się to, żeby godziny stały w kolumnie. */
ul.odbiory { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
li.odbior {
  display: grid; grid-template-columns: 72px 1fr 32px; gap: var(--s1) var(--s3);
  align-items: start;
  padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunken);
}
/* Godzina obejmuje wszystkie wiersze pozycji — nazwiska, adres i współpasażerów. */
li.odbior input.czas {
  grid-row: 1 / -1; align-self: center;
  height: var(--tap); text-align: center; font-variant-numeric: tabular-nums;
}
li.odbior .kto {
  grid-column: 2; font-size: var(--fs-sm);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2);
}
li.odbior .kto strong { font-size: var(--fs-base); }
li.odbior .kod-rez { color: var(--muted); font-size: var(--fs-micro); }

/* Kwota sprzedaży przy osobie — karta vouchera pokazuje sumę kursu, ale bez
   tego nie widać, która rezerwacja ile wniosła. */
.kwota-sprzedazy {
  font-variant-numeric: tabular-nums; font-weight: 650; color: var(--accent);
}
.kwota-sprzedazy.brak { color: var(--muted); font-weight: 400; font-size: var(--fs-xs); }

/* Nazwiska współpasażerów. Muzeum przyjmuje grupę wyłącznie na listę imienną,
   więc brak nazwisk jest ostrzeżeniem, nie drobiazgiem. */
.wspolpasazerowie {
  grid-column: 2; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4;
}
.wspolpasazerowie.brak { color: var(--danger); }

/* Adres na całą szerokość — wcześniej dzielił wiersz i ucinał „Meeting Point…". */
li.odbior input.adres {
  grid-column: 2; width: 100%; min-height: 38px; font-size: var(--fs-sm);
}

/* Zdjęcie z vouchera. Cichy do czasu najechania: to akcja odwracalna,
   ale nie ma zapraszać do klikania. */
button.zdejmij {
  grid-column: 3; grid-row: 1; justify-self: end;
  width: 28px; min-height: 28px; padding: 0; line-height: 1;
  background: none; border: 1px solid transparent; color: var(--muted);
  font-size: var(--fs-lg); border-radius: var(--r-sm);
}
button.zdejmij:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }

form.usun-voucher { margin-top: var(--s2); }
form.usun-voucher button { color: var(--muted); font-size: var(--fs-xs); }
form.usun-voucher button:hover { color: var(--danger); }

/* Formularz ręcznej rezerwacji — zwinięty, żeby nie przykrywał listy dnia. */
details.nowa-rezerwacja { margin-bottom: var(--s5); }
details.nowa-rezerwacja > summary {
  cursor: pointer; padding: var(--s3) var(--s4);
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  color: var(--accent); font-weight: 600; font-size: var(--fs-base);
  list-style: none;
}
details.nowa-rezerwacja > summary::-webkit-details-marker { display: none; }
details.nowa-rezerwacja > summary:hover { border-color: var(--accent); background: var(--accent-soft); }
details.nowa-rezerwacja[open] > summary { margin-bottom: var(--s3); }
details.nowa-rezerwacja .panel { padding: var(--s4); }
details.nowa-rezerwacja textarea { width: 100%; font: inherit; }

textarea.zlecenie {
  width: 100%; font-family: var(--mono); font-size: var(--fs-sm);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3);
  background: var(--sunken); color: var(--ink);
}

/* Margines dolny robi miejsce paskowi zaznaczenia, który jest nad treścią. */
.suma-dnia {
  display: flex; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s3) var(--s4); margin: var(--s3) 0 90px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  font-variant-numeric: tabular-nums;
}
.suma-dnia div span { display: block; font-size: var(--fs-micro); color: var(--muted); }
.suma-dnia .n { font-size: var(--fs-lg); font-weight: 650; }

@media (min-width: 720px) {
  /**
   * Karta vouchera mieści wiersz odbioru: godzinę, nazwiska, kwotę i ADRES.
   * Przy 320 px adres „Meeting Point: Wielopole 2, 31-072 Kraków" ucinał się
   * po trzecim słowie — a to jest miejsce, pod które podjeżdża kierowca.
   */
  .vouchery { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); }
  ul.rezerwacje { gap: var(--s1); }
  /* Na szerokim ekranie pasek nie musi zajmować całej krawędzi. */
  .pasek { border-radius: var(--r-lg) var(--r-lg) 0 0; left: auto; right: var(--s5); width: 420px; }
}

/* --- EDYCJA REZERWACJI ---
   Osobny ekran, nie pole w wierszu: pól jest kilkanaście, a część z nich
   wymaga zdania wyjaśnienia. Formularz ma jedną kolumnę na telefonie i dwie
   na szerszym ekranie — wpisuje się go zwykle w biegu, z telefonu. */
.edycja-rezerwacji .wroc { margin-bottom: var(--s3); font-size: var(--fs-sm); }
.edycja-rezerwacji .formularz,
.edycja-rezerwacji .usuwanie { padding: var(--s4) var(--s5) var(--s5); margin-bottom: var(--s5); }
.edycja-rezerwacji h2 {
  margin: var(--s5) 0 var(--s3); font-size: var(--fs-base); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.edycja-rezerwacji h2:first-of-type { margin-top: 0; }
.edycja-rezerwacji .siatka {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.edycja-rezerwacji label { display: grid; gap: 4px; }
.edycja-rezerwacji label.szerokie { grid-column: 1 / -1; }
.edycja-rezerwacji label span { color: var(--muted); font-size: var(--fs-sm); }
.edycja-rezerwacji input,
.edycja-rezerwacji select,
.edycja-rezerwacji textarea {
  width: 100%; padding: var(--s2) var(--s3); min-height: 40px;
}
.edycja-rezerwacji textarea { font-family: var(--mono); font-size: var(--fs-sm); }
.edycja-rezerwacji .lista-imienna { min-height: 160px; }
.edycja-rezerwacji .hint { color: var(--muted); font-size: var(--fs-sm); margin: var(--s2) 0; }
.edycja-rezerwacji .akcje {
  display: flex; align-items: center; gap: var(--s4);
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line);
}
/* Usuwanie stoi w osobnym panelu z czerwoną krawędzią — ma nie sąsiadować
   z „zapisz" na tyle blisko, żeby dało się je trafić odruchowo. */
.edycja-rezerwacji .usuwanie { border-left: 3px solid var(--danger); }

/* Odnośnik „popraw" przy wierszu rezerwacji — poza etykietą, żeby kliknięcie
   w niego nie zaznaczało rezerwacji do vouchera. */
li a.popraw {
  align-self: center; margin-left: var(--s2);
  font-size: var(--fs-sm); color: var(--muted); white-space: nowrap;
}
li a.popraw:hover { color: var(--ink); }


.dzien-tygodnia { margin-bottom: var(--s6); }
.dzien-tygodnia > header {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s2) 0 var(--s3); border-bottom: 1px solid var(--line);
  margin-bottom: var(--s3);
}
.dzien-tygodnia > header a { text-decoration: none; color: var(--ink); }
.dzien-tygodnia > header a strong { font-size: var(--fs-lg); margin-right: var(--s2); }
.dzien-tygodnia > header a .mono { color: var(--muted); font-size: var(--fs-sm); }
.dzien-tygodnia > header .spacer { margin-left: auto; }

/* Dziś dostaje krawędź, a nie tło: tło na całej sekcji przykryłoby kolory
   pilnych wierszy w tabeli, czyli dokładnie to, po co się tu patrzy. */
.dzien-tygodnia.dzis > header { border-bottom-color: var(--accent); }
.dzien-tygodnia.dzis > header a strong { color: var(--accent); }
.dzien-tygodnia.ma-pilne > header { border-bottom-color: var(--danger); }

/* Rozbicie braków: „28 bez wykonawcy" mówi, co robić; „28 z brakami" nie. */
.braki-rozbicie { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s5); }
.braki-rozbicie .chip { font-size: var(--fs-sm); padding: 2px var(--s2); }

.pusty-dzien { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--s4); }

/* Wiersz pilny — wyjazd dziś albo jutro bez zlecenia. Lewa krawędź, nie całe
   tło: tabela ma zostać czytelna, a nie zmienić się w plamę. */
tr.pilny td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
tr.pilny { background: color-mix(in srgb, var(--danger) 6%, transparent); }


.panel-wykres { padding: var(--s4); }

svg.wykres { width: 100%; height: auto; display: block; }

/* Oś jest recesywna: linia bazowa ma pomagać w odczycie, a nie konkurować
   ze słupkami o uwagę. */
svg.wykres .os { stroke: var(--line-strong); stroke-width: 1; }

svg.wykres .etykieta-wartosc {
  fill: var(--ink); font-size: 12px; font-weight: 650;
  font-variant-numeric: tabular-nums; font-family: var(--font);
}
svg.wykres .etykieta-os {
  fill: var(--muted); font-size: 11px; font-family: var(--mono);
}
svg.wykres .etykieta-os.cichsza { font-size: 10px; opacity: 0.75; }

/* Słupek reaguje na kursor, żeby było widać, że niesie podpowiedź. */
svg.wykres g:hover rect { opacity: 0.82; }

/* Kafel z kwotą: liczba ma być czytelna z drugiego końca biurka, a podpis
   pod nią musi się mieścić w dwóch linijkach bez ucinania. */
.stats .stat .n.pos { color: var(--accent); }
.stats .stat .n.neg { color: var(--danger); }
.stats .stat .l { max-width: 30ch; line-height: 1.35; }

@media (max-width: 719px) {
  .stats .stat { flex: 1 1 100%; }
}


.stan-bota {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s4) var(--s5); margin-bottom: var(--s5);
  border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-md);
  background: var(--panel);
}
.stan-bota strong { font-size: var(--fs-xl); letter-spacing: -0.01em; }
.stan-bota span { color: var(--muted); font-size: var(--fs-base); }

.stan-bota.dziala { border-left-color: var(--accent); }
.stan-bota.dziala strong { color: var(--accent); }
.stan-bota.uwaga { border-left-color: var(--warn); background: var(--warn-soft); }
.stan-bota.uwaga strong { color: var(--warn); }
.stan-bota.uwaga span { color: var(--warn); opacity: 0.85; }
.stan-bota.alarm { border-left-color: var(--danger); background: var(--danger-soft); }
.stan-bota.alarm strong { color: var(--danger); }
.stan-bota.alarm span { color: var(--danger); opacity: 0.85; }
/* „Nie wiadomo" jest cichy celowo: to brak informacji, nie awaria. */
.stan-bota.nieznany { border-left-color: var(--line-strong); }
.stan-bota.nieznany strong { color: var(--muted); }

/* Wstrzymany podmiot ma tę samą sygnaturę, co pilny kurs w Tygodniu —
   jedna konwencja na „to wymaga decyzji teraz" w całym panelu. */
.dni-wstrzymane { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s5); }
.dni-wstrzymane .chip { font-family: var(--mono); font-size: var(--fs-sm); padding: 3px var(--s2); }

.pauza-globalna {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s4); margin-bottom: var(--s5);
}
.pauza-globalna .cur { font-size: var(--fs-sm); }
/* ── KALENDARZ ZGŁOSZEŃ ──────────────────────────────────────────────────
   Siatka miesiąca, bo pytanie „na które dni mamy przewodników" jest pytaniem
   o rozkład w czasie, a nie o listę. Lista 106 pozycji odpowiada na nie gorzej
   niż jeden rzut oka na kratki.

   TRZY SYGNAŁY, TRZY RÓŻNE KSZTAŁTY, nie trzy odcienie: liczba (wejścia),
   kropka (wiersze czekają) i przekreślenie (wysyłki wyłączone). Kolor je
   wzmacnia, ale żaden nie zależy od koloru — ekran czyta się w druku
   i przy nierozróżnianiu barw. */
.kalendarz-bota { padding: var(--s4) var(--s5) var(--s5); margin-bottom: var(--s5); }

.kalendarz-bota .mies {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s4);
}
.kalendarz-bota .mies .nazwa {
  font-size: var(--fs-lg); font-weight: 600; min-width: 11ch;
}
.kalendarz-bota .strzalka {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid var(--line);
  border-radius: var(--r-sm); text-decoration: none; color: var(--ink);
  font-size: var(--fs-lg); line-height: 1;
}
.kalendarz-bota .strzalka:hover { border-color: var(--line-strong); background: var(--bg); }
.kalendarz-bota .dzis-link { margin-left: auto; font-size: var(--fs-sm); }

.kalendarz-bota .akcje-miesiaca {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.kalendarz-bota .akcje-miesiaca .cur { font-size: var(--fs-sm); }

.kalendarz-bota .tydzien,
.kalendarz-bota .dni {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s2);
}
.kalendarz-bota .tydzien {
  margin-bottom: var(--s2); color: var(--muted); font-size: var(--fs-sm);
  text-align: center;
}

.kalendarz-bota .kom {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; min-height: 58px; padding: var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); text-decoration: none;
}
.kalendarz-bota .kom.pusta { border: none; background: none; min-height: 0; }
.kalendarz-bota .kom:hover { border-color: var(--line-strong); }
.kalendarz-bota .kom .nr { font-size: var(--fs-sm); color: var(--muted); }
.kalendarz-bota .kom .ile {
  font-family: var(--mono); font-size: var(--fs-lg); font-weight: 600; line-height: 1;
}
/* Dzień bez niczego ma być cichy — inaczej pusty miesiąc krzyczy tak samo
   jak miesiąc pełen wejść. */
.kalendarz-bota .kom.wolny { background: transparent; }
.kalendarz-bota .kom.przeszly { opacity: 0.45; }
.kalendarz-bota .kom.dzis { border-color: var(--accent); }
.kalendarz-bota .kom.dzis .nr { color: var(--accent); font-weight: 600; }
.kalendarz-bota .kom.wybrany {
  border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
}
.kalendarz-bota .kom.stoi {
  background: var(--danger-soft); border-color: var(--danger);
}
/* Przekreślenie, nie samo tło: „wyłączone" ma być widoczne bez koloru. */
.kalendarz-bota .kom.stoi::after {
  content: ''; position: absolute; left: 6px; right: 6px; top: 50%;
  border-top: 1px solid var(--danger); transform: rotate(-12deg);
}
.kalendarz-bota .kom .czeka {
  position: absolute; top: 5px; right: 5px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--warn);
}

.kalendarz-bota .legenda {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  margin-top: var(--s4); color: var(--muted); font-size: var(--fs-sm);
}
.kalendarz-bota .legenda i {
  display: inline-block; width: 8px; height: 8px; margin-right: 6px;
  border-radius: 50%; vertical-align: middle;
}
.kalendarz-bota .legenda .l-czeka { background: var(--warn); }
.kalendarz-bota .legenda .l-stoi { border-radius: 2px; background: var(--danger); }

/* ── PANEL DNIA ─────────────────────────────────────────────────────────── */
.dzien-bota { padding: var(--s4) var(--s5) var(--s5); margin-bottom: var(--s5); }
.dzien-bota .glowa-dnia {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.dzien-bota .glowa-dnia h3 { margin: 0; font-size: var(--fs-lg); }
.dzien-bota .wiersz-switch {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); margin-bottom: var(--s3);
}
.dzien-bota .podsumowanie-dnia { font-size: var(--fs-base); margin: var(--s3) 0; }
.dzien-bota .podmioty-dnia {
  display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4);
}

/* ── DOPISANIE DATY ─────────────────────────────────────────────────────── */
.dodaj-date {
  display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s4); margin-bottom: var(--s5);
}
.dodaj-date label { display: flex; flex-direction: column; gap: 4px; }
.dodaj-date label span { color: var(--muted); font-size: var(--fs-sm); }
.dodaj-date label.wymus {
  flex-direction: row; align-items: center; gap: var(--s2);
}
.dodaj-date label.wymus span { color: var(--muted); }

@media (max-width: 720px) {
  .kalendarz-bota .kom { min-height: 46px; }
  .kalendarz-bota .kom .ile { font-size: var(--fs-base); }
}


.logowanie {
  --l-tlo: #000000;
  --l-karta: #0e1411;
  --l-ramka: #1f2a24;
  --l-pole: #070b09;
  --l-tekst: #e8efe9;
  --l-szary: #8a978f;
  --l-zielony: #2fbf71;
  --l-zielony-jasny: #45d488;
  --l-blad: #ff8a80;

  /* <main> dostaje z shell.ts szerokość i marginesy obszaru treści — tu tło ma iść od krawędzi do krawędzi. */
  max-width: none;
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s5) var(--s4);
  background: var(--l-tlo);
  color: var(--l-tekst);
}

.logowanie-karta {
  width: 100%;
  max-width: 380px;
  background: var(--l-karta);
  border: 1px solid var(--l-ramka);
  border-top: 3px solid var(--l-zielony);
  border-radius: 14px;
  padding: var(--s6) var(--s6) var(--s5);
}

.logowanie-logo { display: block; width: 112px; height: 112px; margin: 0 auto var(--s5); }

.logowanie h1 {
  font-size: var(--fs-xl);
  margin: 0 0 var(--s1);
  text-align: center;
  color: var(--l-tekst);
}
.logowanie-wstep { margin: 0 0 var(--s5); text-align: center; color: var(--l-szary); font-size: var(--fs-sm); }

.logowanie label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--l-szary);
  margin: var(--s4) 0 var(--s1);
}
.logowanie input {
  width: 100%;
  min-height: var(--tap);
  background: var(--l-pole);
  color: var(--l-tekst);
  border: 1px solid var(--l-ramka);
  border-radius: 8px;
  padding: var(--s2) var(--s3);
}
.logowanie input:focus {
  outline: none;
  border-color: var(--l-zielony);
  box-shadow: 0 0 0 3px rgba(47, 191, 113, 0.2);
}

.logowanie button {
  width: 100%;
  min-height: var(--tap);
  margin-top: var(--s5);
  border: 0;
  border-radius: 8px;
  background: var(--l-zielony);
  color: #03130a;
  font-weight: 700;
}
.logowanie button:hover { background: var(--l-zielony-jasny); }
.logowanie button:focus-visible { outline: 2px solid var(--l-zielony-jasny); outline-offset: 3px; }

.logowanie-blad { margin: var(--s4) 0 0; color: var(--l-blad); font-size: var(--fs-sm); text-align: center; }
.logowanie-podpowiedz { margin: var(--s4) 0 0; color: var(--l-szary); font-size: var(--fs-sm); text-align: center; }

@media (max-width: 480px) {
  .logowanie { place-items: start center; padding-top: var(--s7); }
  .logowanie-karta { padding: var(--s5) var(--s4) var(--s4); }
}