/* Fiskas — wspolny arkusz dla index.html (terminal) i kelner.html (telefon).
   Zasada: TYLKO zmienne z ui/motywy/*.css. Zaden hex tutaj — sprawdzane grepem. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--f-rodzina);
  font-size: var(--f-m);
  color: var(--kolor-tekst);
  background: var(--kolor-tlo);
  font-variant-numeric: tabular-nums;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:disabled { cursor: not-allowed; }
button:not(:disabled):active { filter: brightness(0.92); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--akcent-info);
  outline-offset: 2px;
}

a { color: var(--kolor-link); }

#app { height: 100vh; width: 100vw; overflow: hidden; }

.dotyk {
  min-width: var(--dotyk-min);
  min-height: var(--dotyk-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Uklad terminala (E01-E13, E15, E16) --- */

.terminal { display: flex; height: 100%; width: 100%; }

.kolumna-lewa {
  width: 410px;
  min-width: 410px;
  display: flex;
  flex-direction: column;
  background: var(--kolor-panel);
  border-right: 1px solid var(--kolor-obwodka);
  overflow-y: auto;
  overflow-x: hidden;
}

.kolumna-prawa { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }

.belka {
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-2);
  border-bottom: 1px solid var(--kolor-obwodka-2);
}

.belka--marka { background: var(--akcent-marka); color: var(--kolor-tekst-na-akcencie); border-bottom: 0; }
.belka--marka-2 { background: var(--akcent-marka-2); color: var(--kolor-tekst-na-akcencie); border-bottom: 0; }

.belka-tytul { flex-grow: 1; min-width: 0; font-size: var(--f-l); font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ikona-btn {
  width: var(--dotyk-min);
  height: var(--dotyk-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-s);
}

.ikona-btn svg { width: 22px; height: 22px; }

/* Siatka kategorii (pas nad kafelkami produktow) */
.pas-kategorii { display: flex; align-items: stretch; overflow-x: auto; }
.kategoria-tab {
  border-bottom: 3px solid transparent;
  color: var(--kolor-tekst-na-akcencie);
  opacity: 0.85;
  font-size: var(--f-s);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 var(--sp-4);
  white-space: nowrap;
}
.kategoria-tab.aktywna { border-bottom-color: var(--kolor-tekst-na-akcencie); opacity: 1; font-weight: 700; }

/* Kafelki menu startowego (E02) */
.kafelki-menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-4);
}
.kafelek-menu {
  height: 92px;
  border-radius: var(--r-m);
  color: var(--kolor-tekst-na-akcencie);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  font-size: 11px;
  font-weight: 700;
  padding: var(--sp-1);
  text-align: center;
  position: relative;
}
.kafelek-menu svg { width: 22px; height: 22px; }
.kafelek-menu .licznik { font-size: 20px; font-weight: 600; }
.kafelek-menu.wylaczony {
  border: 1px dashed var(--wylaczony-obwodka);
  background: var(--wylaczony-tlo) !important;
  color: var(--wylaczony-tekst) !important;
}
.kafelek-menu .pozniej { font-size: 10px; font-weight: 500; }

/* Kafelki produktow / szybkiej kategorii (E04, E14, E15) */
.siatka-produktow {
  flex-grow: 1;
  padding: var(--sp-3);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 104px;
  gap: var(--sp-2);
  align-content: start;
  overflow-y: auto;
}
.kafelek-produkt {
  border-radius: var(--r-s);
  color: var(--kolor-tekst-na-akcencie);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  padding: 10px 12px;
  font-size: var(--f-m);
  font-weight: 500;
  overflow: hidden;
}
.kafelek-produkt span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.kafelek-produkt .cena { align-self: flex-end; font-size: 15px; }
.kafelek-produkt.wybrany { outline: 3px solid var(--kolor-tekst); outline-offset: -3px; }

/* Pozycja rachunku w lewej kolumnie (stan E04) */
.naglowek-kategorii {
  background: var(--kolor-tlo);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--kolor-tekst-wyciszony);
  padding: 6px 0;
}
.pozycja-rachunku {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: 12px var(--sp-4);
  border-bottom: 1px solid var(--kolor-obwodka-2);
}
.pozycja-rachunku .nazwa { flex-grow: 1; min-width: 0; font-size: var(--f-l); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ilosc i kwota nie lamia sie na dwie linie przy dlugiej nazwie (d3ece60, dokonczenie 2026-10-08):
   skraca sie wylacznie nazwa (wielokropek), liczby zostaja w jednej linii i rownaja sie do prawej. */
.pozycja-rachunku .ilosc { font-size: var(--f-l); font-weight: 600; color: var(--akcent-fiolet); white-space: nowrap; flex-shrink: 0; }
.pozycja-rachunku .wartosc { white-space: nowrap; flex-shrink: 0; min-width: 78px; text-align: right; font-variant-numeric: tabular-nums; }
.pozycja-rachunku button { background: none; }
.pozycja-rachunku.rozwinieta { flex-direction: column; align-items: stretch; gap: var(--sp-2); background: var(--kolor-panel-2); box-shadow: 0 1px 3px var(--kolor-cien); }
.pozycja-rachunku .wiersz-akcji { display: flex; gap: var(--sp-2); }
.przycisk-mala-akcja {
  width: 52px; height: 48px; border-radius: var(--r-s);
  background: var(--kolor-obwodka); color: var(--kolor-tekst);
  display: flex; align-items: center; justify-content: center;
}
.przycisk-mala-akcja svg { width: 22px; height: 22px; }
.przycisk-ilosc { width: 60px; height: 48px; border-radius: var(--r-s); background: var(--kolor-obwodka); font-size: 26px; font-weight: 500; }

.wiersz-goscie {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); background: var(--kolor-panel-2);
}
.wiersz-goscie svg { width: 22px; height: 22px; flex-shrink: 0; }
.wiersz-goscie .etykieta { flex-grow: 1; min-width: 0; font-size: var(--f-m); }
.przycisk-owalny {
  height: var(--dotyk-min); border-radius: var(--r-okrag);
  background: var(--akcent-marka-2); color: var(--kolor-tekst-na-akcencie);
  font-size: 15px; font-weight: 600; padding: 0 18px;
}

/* Podsumowanie rachunku + akcje park/opcje */
.pas-akcji-rachunku { display: flex; gap: var(--sp-4); padding: 0 var(--sp-4) var(--sp-3); }
.krazek-akcji {
  width: 64px; height: 64px; border-radius: var(--r-okrag);
  color: var(--kolor-tekst-na-akcencie);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px var(--kolor-cien);
}
.krazek-akcji svg { width: 26px; height: 26px; }
.podsumowanie-rachunku {
  margin: 0 var(--sp-3) var(--sp-3);
  border-radius: var(--r-m); box-shadow: 0 1px 3px var(--kolor-cien);
  background: var(--kolor-panel);
  padding: 10px 14px; display: flex; gap: var(--sp-5); align-items: flex-end;
}
.podsumowanie-rachunku .kolumna { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.podsumowanie-rachunku .kolumna.wypchnij { flex-grow: 1; }
.podsumowanie-rachunku .kolumna.suma { align-items: flex-end; flex-shrink: 0; white-space: nowrap; }
.podsumowanie-rachunku .etykieta-mala { font-size: 12px; color: var(--kolor-tekst-wyciszony); }
.podsumowanie-rachunku .wartosc-duza { font-size: 24px; font-weight: 700; color: var(--akcent-sukces); }

/* Dolna belka wyszukiwania / wystawienia (E04) */
.belka-dol {
  height: 64px; margin: 0 var(--sp-3) var(--sp-3);
  background: var(--kolor-panel); border-radius: var(--r-m); box-shadow: 0 1px 3px var(--kolor-cien);
  display: flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2);
}
.przycisk-szukaj {
  height: 48px; display: flex; align-items: center; gap: var(--sp-2);
  font-size: 17px; font-weight: 600; padding: 0 10px; color: var(--akcent-ostrzezenie);
}
.przycisk-szukaj svg { width: 24px; height: 24px; }
.przycisk-wystaw {
  height: 48px; display: flex; align-items: center; gap: var(--sp-2);
  font-size: 18px; font-weight: 700; padding: 0 12px; color: var(--akcent-marka);
}
.przycisk-wystaw svg { width: 26px; height: 26px; }

/* Ostatni dokument w lewej kolumnie stanu startowego */
.ostatni-dokument { padding: 0 var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.ostatni-dokument .karta {
  border-radius: var(--r-m); box-shadow: 0 1px 3px var(--kolor-cien);
  padding: var(--sp-3); display: flex; flex-direction: column; gap: 4px;
}

/* Kolory funkcyjne (role, nie nazwy) — jedyne miejsce laczace klase z akcentem */
.tlo-marka { background: var(--akcent-marka); color: var(--kolor-tekst-na-akcencie); }
.tlo-marka-2 { background: var(--akcent-marka-2); color: var(--kolor-tekst-na-akcencie); }
.tlo-sukces { background: var(--akcent-sukces); color: var(--kolor-tekst-na-akcencie); }
.tlo-info { background: var(--akcent-info); color: var(--kolor-tekst-na-akcencie); }
.tlo-info-2 { background: var(--akcent-info-2); color: var(--kolor-tekst-na-akcencie); }
.tlo-ostrzezenie { background: var(--akcent-ostrzezenie); color: var(--kolor-tekst-na-akcencie); }
.tlo-ostrzezenie-2 { background: var(--akcent-ostrzezenie-2); color: var(--kolor-tekst-na-akcencie); }
.tlo-blad { background: var(--akcent-blad); color: var(--kolor-tekst-na-akcencie); }
.tlo-fiolet { background: var(--akcent-fiolet); color: var(--kolor-tekst-na-akcencie); }
.tlo-fiolet-2 { background: var(--akcent-fiolet-2); color: var(--kolor-tekst-na-akcencie); }
.tlo-wino { background: var(--akcent-wino); color: var(--kolor-tekst-na-akcencie); }
.tlo-zolty { background: var(--akcent-zolty); color: var(--kolor-tekst); }
.tlo-teal { background: var(--akcent-teal); color: var(--kolor-tekst-na-akcencie); }
.tlo-teal-2 { background: var(--akcent-teal-2); color: var(--kolor-tekst-na-akcencie); }
.tlo-neutralny { background: var(--akcent-neutralny); color: var(--kolor-tekst-na-akcencie); }
.tlo-neutralny-2 { background: var(--akcent-neutralny-2); color: var(--kolor-tekst-na-akcencie); }
.tlo-czarny { background: var(--kolor-tekst); color: var(--kolor-tlo); }
.tlo-braz { background: var(--akcent-braz); color: var(--kolor-tekst-na-akcencie); }
.wylaczony {
  border: 1px dashed var(--wylaczony-obwodka) !important;
  background: var(--wylaczony-tlo) !important;
  color: var(--wylaczony-tekst) !important;
}

/* --- Nakladki / modale (E05, E06) --- */
.nakladka {
  position: fixed; inset: 0; background: var(--kolor-nakladka);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.karta-modal {
  background: var(--kolor-panel); border-radius: var(--r-l);
  box-shadow: 0 8px 24px var(--kolor-cien); padding: var(--sp-4);
  max-width: min(92vw, 480px); max-height: 90vh; overflow-y: auto;
  overscroll-behavior: contain;
}
.siatka-opcje-rachunku { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.przycisk-opcja {
  height: 112px; border-radius: var(--r-s);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); font-size: var(--f-s); font-weight: 700; letter-spacing: 0.04em; padding: 6px;
  text-align: center;
}
.przycisk-opcja svg { width: 26px; height: 26px; }
.lista-pol { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 280px; }
.lista-pol button {
  height: var(--dotyk-min); border-radius: var(--r-s); background: var(--kolor-panel-2);
  text-align: left; padding: 0 var(--sp-3); font-size: var(--f-m);
}
.wiersz-formularz { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-3); }
.wiersz-formularz label { font-size: var(--f-s); color: var(--kolor-tekst-wyciszony); }
.wiersz-formularz input, .wiersz-formularz select {
  height: var(--dotyk-min); border-radius: var(--r-s); border: 1px solid var(--kolor-obwodka);
  padding: 0 var(--sp-2); font-size: var(--f-m); background: var(--kolor-panel); color: var(--kolor-tekst);
}
.pas-modal-akcje { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }
.przycisk {
  height: var(--dotyk-min); border-radius: var(--r-s); padding: 0 var(--sp-4);
  font-size: var(--f-m); font-weight: 600;
}
.przycisk--wyciszony { background: var(--kolor-panel-2); color: var(--kolor-tekst); }
/* Ikona w zwyklym przycisku (np. „Wyslij na stanowiska” w nakladce kelnera) w rozmiarze tekstu,
   nie na cala szerokosc przycisku (brak reguly dawal SVG bez wymiarow). */
.przycisk svg { width: 22px; height: 22px; vertical-align: middle; margin-right: 6px; flex-shrink: 0; }

/* --- Ekran logowania (E01) --- */
.ekran-logowanie { height: 100%; display: flex; align-items: center; justify-content: center; background: var(--kolor-tlo); }
.karta-logowania { display: flex; background: var(--kolor-panel); border-radius: var(--r-l); box-shadow: 0 8px 24px var(--kolor-cien); overflow: hidden; }
.lista-pracownikow { width: 320px; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.przycisk-pracownik {
  height: 56px; border-radius: var(--r-m); background: var(--kolor-panel-2);
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-3); font-size: var(--f-l);
}
.przycisk-pracownik .z-pin { font-size: 11px; color: var(--akcent-marka); font-weight: 700; }
.panel-pin { width: 320px; padding: var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.kropki-pin { display: flex; gap: var(--sp-2); }
.kropka-pin { width: 18px; height: 18px; border-radius: var(--r-okrag); border: 2px solid var(--kolor-obwodka); }
.kropka-pin.wypelniona { background: var(--kolor-tekst); border-color: var(--kolor-tekst); }
.klawiatura-num { display: grid; grid-template-columns: repeat(3, 64px); gap: var(--sp-2); }
.klawiatura-num button { height: 64px; border-radius: var(--r-okrag); background: var(--kolor-panel-2); font-size: var(--f-xl); font-weight: 600; }

/* --- Mapa stolow (E08) --- */
.mapa-stolow { flex-grow: 1; position: relative; background-color: var(--mapa-tlo);
  background-image: repeating-linear-gradient(0deg, var(--mapa-siatka) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--mapa-siatka) 0 1px, transparent 1px 40px); overflow: auto; }
.stolik { position: absolute; width: 120px; height: 80px; }
.stolik .krzeslo { position: absolute; width: 26px; height: 7px; border-radius: 3px; }
.stolik button { position: absolute; left: 0; top: 11px; width: 120px; height: 58px; border-radius: var(--r-m); font-size: 22px; font-weight: 700; color: var(--kolor-tekst-na-akcencie); }
.stolik .znacznik-czasu { position: absolute; top: -16px; background: var(--kolor-tekst-wyciszony); color: var(--kolor-tekst-na-akcencie); font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 3px; }
.stolik .rezerwacja { position: absolute; right: -6px; top: -8px; width: 26px; height: 26px; background: var(--akcent-fiolet); color: var(--kolor-tekst-na-akcencie); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 3px; }
.mapa-narzedzia { position: absolute; left: 16px; bottom: 16px; height: 48px; display: flex; align-items: center; background: var(--kolor-panel); border-radius: var(--r-s); }
.mapa-strony { position: absolute; right: 16px; bottom: 16px; display: flex; background: var(--kolor-panel); border-radius: var(--r-s); padding: 4px; gap: 4px; }
.mapa-strony button { height: 44px; border-radius: var(--r-s); font-size: 15px; font-weight: 600; padding: 0 16px; color: var(--kolor-tekst); }
.mapa-strony button.aktywna { background: var(--akcent-marka); color: var(--kolor-tekst-na-akcencie); }

/* --- Platnosc (E10) --- */
.ekran-platnosci { height: 100%; display: flex; align-items: stretch; justify-content: center; padding: var(--sp-5) 60px; background: var(--kolor-tlo-scena); gap: 0; }
.panel-konto { width: 500px; display: flex; flex-direction: column; background: var(--kolor-panel-3); }
.panel-platnosc { width: 560px; display: flex; flex-direction: column; background: var(--kolor-tlo); }
.siatka-metody { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); padding: var(--sp-4); }
.metoda-platnosci { height: 120px; border-radius: var(--r-s); background: var(--kolor-panel); box-shadow: 0 1px 3px var(--kolor-cien); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.metoda-platnosci svg { width: 30px; height: 30px; }
.siatka-dodatki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); padding: var(--sp-3); }
.dodatek-platnosci { height: 80px; border-radius: var(--r-s); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.klawiatura-kwoty { display: grid; grid-template-columns: repeat(3, 72px); gap: var(--sp-2); justify-content: center; padding: var(--sp-4); }
.klawiatura-kwoty button { height: 64px; border-radius: var(--r-m); background: var(--kolor-panel); font-size: var(--f-xl); font-weight: 600; }

/* --- Listy (E07 otwarte rachunki, E11 historia) --- */
.lista-kart { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); overflow-y: auto; flex-grow: 1; }
.karta-listy { border-radius: var(--r-m); background: var(--kolor-panel); box-shadow: 0 1px 3px var(--kolor-cien); padding: var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); }
/* Stan rachunku jako mala kropka przed nazwa (zielona = otwarty, czerwona = zalegly) zamiast grubego paska z lewej. */
.karta-listy::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--akcent-marka); flex-shrink: 0; }
.karta-listy.zalegly::before { background: var(--akcent-blad); }
.karta-listy .nazwa { flex-grow: 1; min-width: 0; font-size: var(--f-l); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karta-listy .info { font-size: var(--f-s); color: var(--kolor-tekst-wyciszony); white-space: nowrap; flex-shrink: 0; }

/* --- Kasa (E03/E12), Szybka sprzedaz (E15), Zaplecze (E13/E16) --- */
.ekran-formularz { height: 100%; display: flex; align-items: center; justify-content: center; background: var(--kolor-tlo-scena); }
.karta-formularz { width: 420px; background: var(--kolor-panel); border-radius: var(--r-l); box-shadow: 0 8px 24px var(--kolor-cien); padding: var(--sp-4); }
.karta-formularz h2 { margin: 0 0 var(--sp-3); font-size: var(--f-xl); }
.tabela-raport { width: 100%; border-collapse: collapse; font-size: var(--f-s); }
.tabela-raport td, .tabela-raport th { padding: 6px 8px; border-bottom: 1px solid var(--kolor-obwodka-2); text-align: left; }

.ekran-zaplecze { height: 100%; display: flex; }
.zaplecze-menu { width: 220px; background: var(--kolor-panel); border-right: 1px solid var(--kolor-obwodka); display: flex; flex-direction: column; padding: var(--sp-2); gap: 2px; }
.zaplecze-menu button { height: var(--dotyk-min); text-align: left; padding: 0 var(--sp-3); border-radius: var(--r-s); font-size: var(--f-m); }
.zaplecze-menu button.aktywna { background: var(--akcent-marka); color: var(--kolor-tekst-na-akcencie); }
.zaplecze-tresc { flex-grow: 1; padding: var(--sp-4); overflow-y: auto; }
.tabela-zaplecze { width: 100%; border-collapse: collapse; }
.tabela-zaplecze td, .tabela-zaplecze th { padding: 8px; border-bottom: 1px solid var(--kolor-obwodka-2); text-align: left; font-size: var(--f-m); }
.znacznik-kolor { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 6px; }

.szybka-sprzedaz-formula { padding: var(--sp-4); font-size: var(--f-xxl); font-weight: 600; text-align: right; }

/* --- Uklad kelnera (telefon, ~390x844) --- */
.kelner { display: flex; flex-direction: column; height: 100%; width: 100%; background: var(--kolor-tlo); }
.kelner .belka { height: 56px; }
.kelner .pas-kategorii { height: 52px; background: var(--akcent-marka); }
.kelner .siatka-produktow { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 96px; }
.kelner-podsumowanie {
  margin: 0 var(--sp-2) var(--sp-2); height: 60px; background: var(--kolor-panel);
  border-radius: var(--r-m); box-shadow: 0 1px 3px var(--kolor-cien);
  display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2) 0 14px;
}
.kelner-podsumowanie .info { display: flex; flex-direction: column; flex-grow: 1; }
.kelner-podsumowanie .info .liczba { font-size: 13px; color: var(--kolor-tekst-wyciszony); }
.kelner-podsumowanie .info .kwota { font-size: 19px; font-weight: 700; color: var(--akcent-sukces); }
.kelner-nawigacja { height: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--akcent-info); }
.kelner-nawigacja button { color: var(--kolor-tekst-na-akcencie); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; border-left: 1px solid var(--kolor-obwodka-2); }
.kelner-nawigacja button:first-child { border-left: 0; }
.kelner-lista { flex-grow: 1; overflow-y: auto; }

.kelner .siatka-opcje-rachunku { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kelner .karta-modal { width: 92vw; }
.kelner .mapa-stolow { min-height: 320px; }

.pasek-informacyjny { padding: var(--sp-3); text-align: center; color: var(--kolor-tekst-wyciszony); }
.pusto { padding: var(--sp-5); text-align: center; color: var(--kolor-tekst-wyciszony); }

/* Runda 2 — stan dostawy pozycji (RED-17) i zaległe bony (RED-11). */
.stan-dostawy { font-size: var(--f-s); font-weight: 500; color: var(--kolor-tekst-wyciszony); margin-left: var(--sp-2); white-space: nowrap; }
.stan-dostawy--uwaga { color: var(--akcent-blad); font-weight: 700; }
.pasek-ostrzegawczy { display: block; width: 100%; padding: var(--sp-3); background: var(--akcent-blad); color: var(--kolor-tekst-na-akcencie); font-size: var(--f-m); font-weight: 700; text-align: center; }
.karta-dostawy { flex-wrap: wrap; }
.karta-dostawy::before { background: var(--akcent-blad); }
.karta-dostawy.karta-dostawy--storno::before { background: var(--akcent-ostrzezenie); }
.karta-dostawy .info { white-space: normal; flex-basis: 100%; }
.karta-dostawy .wiersz-akcji { display: flex; gap: var(--sp-2); flex-basis: 100%; justify-content: flex-end; flex-wrap: wrap; }