/* Cost Chef — jedyny arkusz stylów (D91). Linkowany przez src/app/layout.tsx (drzewo Next.js)
   i przez src/web/views/plainPage.ts (strony-napisy handlerów). Wartości tokenów są częścią
   specyfikacji (docs/superpowers/specs/2026-09-10-cost-chef-ux-powloka-design.md, §4.1),
   a ich kontrast pilnuje tests/integration/cssTokens.test.ts — zmiana koloru bez tego testu
   nie przechodzi bramki. */

/* ===== 1. Tokeny ===== */
:root {
  color-scheme: light;
  --tlo: #fbfaf8;
  --tlo-panel: #f4f1ec;
  --powierzchnia: #ffffff;
  --linia: #e6e2db;
  --tusz: #1a1a1a;
  --wyciszony: #6b6b6b;
  --akcent: #1f4e3d;
  --akcent-tlo: #eaf2ee;
  --alarm: #b8452a;
  --alarm-tlo: #fdf1ec;
  --o-1: 4px;
  --o-2: 8px;
  --o-3: 12px;
  --o-4: 16px;
  --o-5: 24px;
  --o-6: 32px;
  --promien-pole: 6px;
  --promien-karta: 10px;
  --szerokosc-menu: 176px;
  --wysokosc-paska: 56px;
}

/* ===== 2. Podstawa ===== */
* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tusz);
  background: var(--tlo);
  line-height: 1.5;
}
h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
h2 { font-size: 1.15rem; font-weight: 700; margin: var(--o-5) 0 var(--o-2); }
p { margin: 0 0 var(--o-3); }
a { color: var(--akcent); }
code { font-size: .9em; }
:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }

/* ===== 3. Powłoka ===== */
.powloka { display: grid; grid-template-columns: var(--szerokosc-menu) minmax(0, 1fr); min-height: 100vh; }
.menu {
  background: var(--tlo-panel);
  border-right: 1px solid var(--linia);
  padding: var(--o-4) var(--o-3);
  display: flex;
  flex-direction: column;
  gap: var(--o-1);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.menu-marka { font-weight: 700; font-size: 1.05rem; }
.menu-lokal { color: var(--wyciszony); font-size: .9rem; margin-bottom: var(--o-3); }
.menu-grupa { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wyciszony); margin: var(--o-3) 0 var(--o-1) var(--o-2); }
.menu-pozycja {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--o-2);
  padding: var(--o-2);
  border-radius: var(--promien-pole);
  color: var(--tusz);
  text-decoration: none;
}
.menu-pozycja:hover { background: var(--powierzchnia); }
.menu-pozycja[aria-current="page"] { background: var(--akcent); color: #fff; font-weight: 600; }
.licznik {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 .45em;
  border-radius: 999px;
  background: var(--alarm);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.menu-pozycja[aria-current="page"] .licznik { background: #fff; color: var(--akcent); }
/* Pozycja bez danych (spec dostępności menu §6): szara, bez tła po najechaniu, z dopiskiem pod
   etykietą. Bieżąca (wejście z adresu) nie dostaje tła akcentu — szary tekst na nim nie ma
   kontrastu — tylko pasek akcentu po lewej. */
.menu-pozycja--zablokowana { color: var(--wyciszony); cursor: default; }
.menu-pozycja--zablokowana:hover { background: none; }
.menu-pozycja--zablokowana[aria-current="page"] { background: var(--tlo-panel); color: var(--wyciszony); box-shadow: inset 3px 0 0 var(--akcent); }
.menu-dopisek { display: block; font-size: .75rem; font-weight: 400; }
.menu-stopka { margin-top: auto; padding-top: var(--o-3); border-top: 1px solid var(--linia); font-size: .85rem; color: var(--wyciszony); word-break: break-all; }
.menu-stopka form { margin-top: var(--o-2); }
.tresc { padding: var(--o-5) var(--o-6) var(--o-6); max-width: 1100px; min-width: 0; }
.pasek-dolny { display: none; }

/* Strony bez menu: logowanie, „sprawdź skrzynkę", 404 */
.strona-prosta { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--o-4); background: var(--tlo-panel); }
.karta-prosta { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 12px; padding: var(--o-5); width: 100%; max-width: 380px; }
.karta-prosta h1 { font-size: 1.25rem; margin-bottom: var(--o-1); }
.karta-prosta form { display: grid; gap: var(--o-2); }

/* ===== 4. Komponenty ===== */
.naglowek-strony { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--o-3); margin-bottom: var(--o-2); }
.wstep { color: var(--wyciszony); max-width: 60ch; margin-bottom: var(--o-4); }
.przelacznik-miesiaca { display: inline-flex; align-items: center; gap: var(--o-2); border: 1px solid var(--linia); border-radius: var(--promien-pole); background: var(--powierzchnia); padding: var(--o-1) var(--o-3); font-weight: 600; }
.przelacznik-miesiaca a { text-decoration: none; padding: 0 var(--o-1); }

.karta { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien-karta); padding: var(--o-4); margin-bottom: var(--o-3); }
.karta > h2:first-child { margin-top: 0; }
/* „Najważniejsze teraz" (spec Przeglądu §6.4): jedna karta wyróżniona krawędzią akcentu, nie kolorem alarmu. */
.najwazniejsze { border-left: 4px solid var(--akcent); }
.najwazniejsze > p:first-child { margin-bottom: var(--o-1); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--o-3); }

.kwota-duza { font-size: 1.9rem; font-weight: 800; letter-spacing: -.01em; color: var(--akcent); margin: var(--o-1) 0; font-variant-numeric: tabular-nums; }
.kwota-duza--strata { color: var(--alarm); }
/* D181 — przy nieznanym przychodzie duża liczba to KOSZTY: ani zysk (akcent), ani strata (alarm). */
.kwota-duza--koszty { color: var(--tusz); }
.karta--niepelna .kwota-duza { opacity: .55; }
.pasek-celu { height: 8px; background: var(--linia); border-radius: 999px; overflow: hidden; margin: var(--o-2) 0 var(--o-1); }
.pasek-celu > span { display: block; height: 100%; background: var(--akcent); }
.para-liczb { display: flex; gap: var(--o-5); color: var(--wyciszony); flex-wrap: wrap; margin: 0; }
.para-liczb b { color: var(--tusz); }
/* Pasek stanu Przeglądu (spec Przeglądu §6.2): kropka niesie stan RAZEM ze słowem w zdaniu. */
.pasek-stanu { list-style: none; margin: 0 0 var(--o-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--o-2) var(--o-5); font-size: .9rem; }
.stan-pozycja { display: flex; align-items: center; gap: var(--o-2); }
.kropka { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--wyciszony); }
.stan-pozycja--ok .kropka { background: var(--akcent); }
.stan-pozycja--alarm .kropka { background: var(--alarm); }

/* Spec §4.4 — trzy odmiany paska komunikatu, ale tylko dwa wyglądy: „informacja"
   i „potwierdzenie" mają wg specyfikacji ten sam akcent, więc PODSTAWA jest ich wyglądem
   i `.baner--info` / `.baner--ok` nie potrzebują własnych reguł. Nadpisuje wyłącznie alarm.
   Nazwy obu odmian zostają w markupie: niosą znaczenie, którego kolor tu nie rozróżnia. */
.baner { padding: var(--o-3) var(--o-4); margin: 0 0 var(--o-3); border-left: 4px solid var(--akcent); background: var(--akcent-tlo); border-radius: var(--promien-pole); }
.baner--alarm { border-left-color: var(--alarm); background: var(--alarm-tlo); }

.znacznik { display: inline-block; padding: 0 .6em; border-radius: 999px; background: var(--akcent-tlo); color: var(--akcent); font-size: .8rem; font-weight: 600; line-height: 1.7; white-space: nowrap; }
.znacznik--alarm { background: var(--alarm-tlo); color: var(--alarm); }
.znacznik--szary { background: var(--tlo-panel); color: var(--wyciszony); }

.lista-akcji { display: flex; flex-direction: column; }
.wiersz-akcji { display: flex; justify-content: space-between; align-items: center; gap: var(--o-3); padding: var(--o-2) 0; }
.lista-akcji .wiersz-akcji + .wiersz-akcji { border-top: 1px solid var(--linia); }
.akcje { display: flex; gap: var(--o-2); flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.akcje form { margin: 0; }

.pusty-stan { text-align: center; padding: var(--o-6) var(--o-4); color: var(--wyciszony); }
.pusty-stan b { display: block; color: var(--tusz); font-size: 1.05rem; margin-bottom: var(--o-1); }
.pusty-stan form, .pusty-stan .przycisk { margin-top: var(--o-3); }

.kroki { list-style: none; margin: 0; padding: 0; }
.krok { display: flex; gap: var(--o-3); padding: var(--o-3) 0; }
.krok + .krok { border-top: 1px solid var(--linia); }
.krok-numer { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; border: 2px solid var(--linia); color: var(--wyciszony); }
.krok--zrobiony .krok-numer { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.krok--nastepny .krok-numer { border-color: var(--akcent); color: var(--akcent); }
.krok p { margin: 0; }
.krok p + p, .krok p + form, .krok form + p { margin-top: var(--o-2); }
.krok--pozniej > div { opacity: .6; }

.krok > div { flex: 1; min-width: 0; }
.kroki .kroki { margin-top: var(--o-2); }

/* Stan zlecenia pobrania faktur w kroku 4/5 ekranu KSeF — ta sama odmiana kolorów co blok stanu. */
.krok .zlecenie { margin-top: var(--o-2); padding: var(--o-2) var(--o-3); border-left: 3px solid var(--linia); }
.zlecenie--ok { border-color: var(--akcent); background: var(--akcent-tlo); }
.zlecenie--alarm { border-color: var(--alarm); background: var(--alarm-tlo); }
.zlecenie--w_toku { border-color: var(--akcent); }
.zlecenie--w_toku b { animation: stan-puls 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .zlecenie--w_toku b { animation: none; } }

/* Blok stanu połączenia (ekran KSeF): jedno miejsce, które mówi, czy lokal jest połączony.
   Znak w kółku i kolor niosą odmianę, zanim ktoś przeczyta tytuł. */
.stan-polaczenia { display: flex; gap: var(--o-3); align-items: flex-start; padding: var(--o-4); margin: 0 0 var(--o-3); border: 1px solid var(--linia); border-radius: var(--promien-karta); background: var(--powierzchnia); }
.stan-polaczenia p { margin: 0; }
.stan-polaczenia p + p { margin-top: var(--o-1); }
.stan-polaczenia .przycisk { margin-top: var(--o-2); }
.stan-tytul { font-weight: 700; font-size: 1.15rem; }
.stan-znak { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; border: 2px solid var(--linia); color: var(--wyciszony); }
.stan-polaczenia--ok { border-color: var(--akcent); background: var(--akcent-tlo); }
.stan-polaczenia--ok .stan-znak { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.stan-polaczenia--alarm { border-color: var(--alarm); background: var(--alarm-tlo); }
.stan-polaczenia--alarm .stan-znak { background: var(--alarm); border-color: var(--alarm); color: #fff; }
.stan-polaczenia--w_toku { border-color: var(--akcent); }
.stan-polaczenia--w_toku .stan-znak { border-color: var(--akcent); color: var(--akcent); animation: stan-puls 1.4s ease-in-out infinite; }
@keyframes stan-puls { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .stan-polaczenia--w_toku .stan-znak { animation: none; } }
.dopisek-srodowiska { margin: calc(-1 * var(--o-2)) 0 var(--o-4); }
.nip-zapisany { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.rozwijane > summary { cursor: pointer; color: var(--akcent); font-weight: 600; }
.rozwijane[open] > summary { margin-bottom: var(--o-2); }

.tabela { border-collapse: collapse; width: 100%; }
.tabela th, .tabela td { padding: var(--o-2); border-bottom: 1px solid var(--linia); text-align: left; vertical-align: top; }
.tabela th { font-weight: 600; color: var(--wyciszony); font-size: .9rem; }
.kwota { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rosnie { color: var(--alarm); font-weight: 700; }
.maleje { color: var(--akcent); }
.bez-zmian { color: var(--wyciszony); }

.dla-administratora { font-size: .9rem; color: var(--wyciszony); margin-top: var(--o-2); }
.dla-administratora summary { cursor: pointer; color: var(--akcent); }
.dla-administratora code { display: block; margin-top: var(--o-1); padding: var(--o-2); background: var(--tlo-panel); border-radius: var(--promien-pole); word-break: break-all; }

label { display: block; margin: var(--o-2) 0 var(--o-1); font-weight: 600; }
input, select, textarea { font: inherit; padding: var(--o-2) var(--o-3); border: 1px solid var(--linia); border-radius: var(--promien-pole); background: var(--powierzchnia); color: var(--tusz); max-width: 100%; }
textarea { width: 100%; }
button, .przycisk {
  font: inherit;
  font-weight: 600;
  padding: var(--o-2) var(--o-4);
  border-radius: var(--promien-pole);
  border: 1.5px solid var(--akcent);
  background: var(--akcent);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.4;
}
button.drugorzedny, .przycisk--drugorzedny { background: var(--powierzchnia); color: var(--akcent); }
button.niszczacy { background: var(--alarm); border-color: var(--alarm); }
.formularz-inline { display: inline-flex; gap: var(--o-2); align-items: center; margin: 0; flex-wrap: wrap; }
.formularz-inline label { display: inline; margin: 0; }
.formularz-blok { display: grid; gap: var(--o-2); max-width: 480px; }

.rozmowa { display: flex; flex-direction: column; }
.tura { max-width: 78%; padding: var(--o-2) var(--o-4); border-radius: 14px; margin: var(--o-2) 0; }
.tura--ty { background: var(--akcent); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.tura--model { background: var(--powierzchnia); border: 1px solid var(--linia); border-bottom-left-radius: 4px; }
.tura-kto { margin: 0 0 var(--o-1); font-size: .8rem; opacity: .8; }
.tura-tresc { margin: 0; white-space: pre-wrap; }
.slad { margin-top: var(--o-2); font-size: .9rem; }
.slad summary { cursor: pointer; color: var(--akcent); }
.slad code { word-break: break-all; }
.podpowiedzi { display: flex; flex-wrap: wrap; gap: var(--o-2); margin: var(--o-3) 0; }
.podpowiedzi button { background: var(--powierzchnia); color: var(--tusz); border-color: var(--linia); border-radius: 999px; font-weight: 500; }
.lista-rozmow { margin: var(--o-1) 0 var(--o-3); padding-left: var(--o-5); }
.stopka-czatu { border-top: 1px solid var(--linia); margin-top: var(--o-5); padding-top: var(--o-3); }
.stopka-strony { display: flex; justify-content: space-between; align-items: center; gap: var(--o-3); flex-wrap: wrap; color: var(--wyciszony); margin-top: var(--o-4); }

/* ===== 5. Pomocnicze ===== */
.wyciszone { color: var(--wyciszony); font-size: .9rem; }
.lista-zdan { margin: 0; padding-left: 1.2em; }
.lista-zdan li { margin-bottom: var(--o-1); }

/* Spec utarg-foto §5.3 — ekran sprawdzenia raportu z kasy: oryginał obok formularza. */
.raport-fiskalny { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--o-4); align-items: start; }
.raport-fiskalny figure { margin: 0 0 var(--o-3); }
.raport-fiskalny img, .raport-fiskalny object { display: block; width: 100%; border: 1px solid var(--linia); border-radius: var(--promien-karta); }
.raport-fiskalny object { min-height: 70vh; }
.raport-fiskalny .tabela input { width: 100%; }

/* ===== 6. Wąski ekran: jeden punkt przełamania (spec §2.1, §4.4) ===== */
@media (max-width: 899px) {
  .raport-fiskalny { grid-template-columns: minmax(0, 1fr); }
  .pasek-stanu { flex-direction: column; gap: var(--o-1); }
  html { font-size: 16px; }
  .powloka { grid-template-columns: minmax(0, 1fr); }
  .menu { display: none; }
  .tresc { padding: var(--o-4) var(--o-4) calc(var(--wysokosc-paska) + var(--o-6)); }

  .pasek-dolny {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--wysokosc-paska);
    background: var(--powierzchnia);
    border-top: 1px solid var(--linia);
    z-index: 10;
  }
  .pasek-dolny > a, .pasek-dolny > .menu-pozycja--zablokowana, .pasek-dolny summary {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: var(--wysokosc-paska); padding: var(--o-1); font-size: .8rem; color: var(--wyciszony);
    text-decoration: none; cursor: pointer; list-style: none; position: relative;
  }
  .pasek-dolny summary::-webkit-details-marker { display: none; }
  .pasek-dolny > a[aria-current="page"], .pasek-dolny details[open] > summary { color: var(--akcent); font-weight: 700; }
  .pasek-dolny .licznik { position: absolute; top: 4px; right: 18%; }
  /* Na pasku nie ma miejsca na dopisek — zostaje dla czytnika, znika z oka. */
  .pasek-dolny > .menu-pozycja--zablokowana .menu-dopisek {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .pasek-dolny > .menu-pozycja--zablokowana[aria-current="page"] { background: none; box-shadow: inset 0 3px 0 var(--akcent); }
  /* Zablokowana pozycja paska: bez kursora-rączki i przygaszona — dopisek jest tu ukryty dla oka,
     więc to jedyny widoczny znak, że stuknięcie nic nie da (spec dostępności menu §6, D143). */
  .pasek-dolny > .menu-pozycja--zablokowana { cursor: default; opacity: .55; }
  .panel-dolny {
    position: fixed; left: 0; right: 0; bottom: var(--wysokosc-paska);
    background: var(--powierzchnia); border-top: 1px solid var(--linia);
    border-radius: 14px 14px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .15);
    padding: var(--o-3) var(--o-4) var(--o-4); display: flex; flex-direction: column; gap: var(--o-1);
  }
  .panel-dolny .menu-pozycja { min-height: 44px; }

  button, .przycisk, input, select, textarea { min-height: 44px; }
  .karta-prosta form button { width: 100%; }

  .tabela thead { display: none; }
  .tabela tr { display: block; border: 1px solid var(--linia); border-radius: var(--promien-karta); padding: var(--o-2) var(--o-3); margin-bottom: var(--o-2); background: var(--powierzchnia); }
  .tabela td { display: flex; justify-content: space-between; gap: var(--o-3); border: 0; padding: var(--o-1) 0; text-align: right; }
  .tabela td[data-etykieta]::before { content: attr(data-etykieta); color: var(--wyciszony); text-align: left; }
  .tabela td.drugorzedna, .tabela th.drugorzedna { display: none; }

  .wiersz-akcji { flex-direction: column; align-items: stretch; }
  .akcje { justify-content: flex-start; }
  .tura { max-width: 92%; }
}