/* K!Home - interfejs pod telefon. Jeden plik, bez frameworka.
   Kolory stanow sa jedyna rzecza, ktora niesie tu znaczenie, wiec kazdy stan ma
   takze slowo obok, a nie sam kolor. Marka to dwa kolory z logo: czerwien dzwonka
   i grafit. Czerwien zostaje dla rzeczy, ktore kosztuja: rachunkow i zaleglosci. */

:root {
  --tlo: #E9ECEA;
  --karta: #FFFFFF;
  --tekst: #1E2223;
  --cichy: #626B6E;
  --kreska: #D6DBD9;
  --wegiel: #232728;
  --dzwon: #E5402F;
  --marka: var(--wegiel);
  --po-terminie: #C8321F;
  --pilne: #A86600;
  --wkrotce: #3A6E8F;
  --spokojnie: #2F7D5B;
  --naglowki: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #151819;
    --karta: #202526;
    --tekst: #ECEFEE;
    --cichy: #9AA4A6;
    --kreska: #323A3C;
    --wegiel: #2E3537;
    --dzwon: #F2604F;
    --marka: #3A4346;
    --po-terminie: #F2857C;
    --pilne: #E8A93A;
    --wkrotce: #8FB8D8;
    --spokojnie: #6CC59A;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 16px/1.5 "Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  padding-top: env(safe-area-inset-top);
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--dzwon); outline-offset: 2px; }

/* Piec zakladek na dole, w zasiegu kciuka. Reszta menu siedzi pod "Wiecej". */
body.z-zakladkami { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.zakladki {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: flex;
  background: var(--karta);
  border-top: 1px solid var(--kreska);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}
.zakladki a {
  flex: 1;
  position: relative;
  text-align: center;
  font-size: 11px;
  color: var(--cichy);
  text-decoration: none;
}
.zakladki svg {
  display: block;
  width: 24px; height: 24px;
  margin: 0 auto 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zakladki a.ta { color: var(--tekst); font-weight: 600; }
.zakladki a.ta svg { color: var(--dzwon); }
.licznik-zakladki {
  position: absolute;
  top: -4px; left: 54%;
  min-width: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--dzwon);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
}

.karta {
  background: var(--karta);
  border: 0;
  box-shadow: inset 4px 0 0 var(--kreska);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.karta .tytul { font-weight: 600; }

main { max-width: 720px; margin: 0 auto; padding: 16px 16px 48px; }

h1, h2, h3 { font-family: var(--naglowki); letter-spacing: -0.01em; }
h1 { font-size: 28px; font-weight: 800; line-height: 1.15; margin: 12px 0 8px; }
h2.grupa {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
  margin: 22px 2px 8px;
}
h2.grupa span { font: 400 13px "Instrument Sans", sans-serif; color: var(--cichy); }

.cicho { color: var(--cichy); font-size: 14px; }
.pusto { color: var(--cichy); padding: 16px 0; }
.blad {
  background: color-mix(in srgb, var(--po-terminie) 12%, transparent);
  color: var(--po-terminie);
  padding: 10px 12px;
  border-radius: 12px;
}

.lista { display: flex; flex-direction: column; gap: 8px; }

.pozycja {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  background: var(--karta);
  border: 0;
  box-shadow: inset 4px 0 0 var(--kreska);
  border-radius: 16px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}
.pozycja .tytul { font-weight: 600; }
/* Ikona ma pomagac w odnalezieniu pozycji wzrokiem, a nie krzyczec, wiec jest
   wielkosci tekstu i stoi w stalej szerokosci, zeby nazwy sie rownaly. */
.ikona {
  display: inline-block;
  width: 1.4em;
  text-align: center;
  font-style: normal;
}
.pozycja .termin { text-align: right; white-space: nowrap; }
.pozycja .termin .cicho { display: block; font-size: 13px; }

.stan-po_terminie { box-shadow: inset 4px 0 0 var(--po-terminie); }
.stan-po_terminie .termin strong { color: var(--po-terminie); }
.stan-pilne { box-shadow: inset 4px 0 0 var(--pilne); }
.stan-pilne .termin strong { color: var(--pilne); }
.stan-wkrotce { box-shadow: inset 4px 0 0 var(--wkrotce); }
.stan-spokojnie { box-shadow: inset 4px 0 0 var(--spokojnie); }

.stan-etykieta {
  background: var(--karta);
  border: 0;
  box-shadow: inset 4px 0 0 var(--kreska);
  border-radius: 16px;
  padding: 12px 14px;
}

form { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
form.wiersz { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--cichy); }
input, select, textarea {
  font: inherit;
  color: var(--tekst);
  background: var(--karta);
  border: 1px solid var(--kreska);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 44px;
}
textarea { min-height: 66px; }

button, .przycisk {
  font: inherit;
  font-weight: 600;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  background: var(--marka);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  min-height: 44px;
  cursor: pointer;
}
.przycisk.cichy { background: var(--karta); color: var(--tekst); border: 1px solid var(--kreska); }
button.tekstowy {
  background: none;
  color: var(--cichy);
  padding: 8px 0;
  font-weight: 400;
  text-decoration: underline;
}

.filtr { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.filtr a {
  font-size: 14px;
  text-decoration: none;
  color: var(--cichy);
  border: 1px solid var(--kreska);
  border-radius: 999px;
  padding: 4px 12px;
}
.filtr a.wybrany { background: var(--wegiel); border-color: var(--wegiel); color: #fff; }

label.ptaszek {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: var(--tekst);
}
label.ptaszek input { min-height: auto; width: auto; }

.logowanie { max-width: 360px; margin: 12vh auto 0; }
.logowanie h1 { font-size: 28px; margin-bottom: 0; }

/* Wyszukiwarka umow: pole i przycisk w jednej linii, bo na telefonie dwa wiersze
   na jedno pytanie to marnowanie ekranu. */
form.szukajka {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
form.szukajka input { flex: 1 1 160px; }

/* Tresc umowy ze skanu. Zawijamy, bo OCR zwraca dlugie linie, a poziomy pasek
   przewijania na telefonie jest nie do trafienia. */
.tresc-umowy pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cichy);
  background: var(--karta);
  border: 1px solid var(--kreska);
  border-radius: 10px;
  padding: 12px 14px;
  max-height: 60vh;
  overflow-y: auto;
}

/* Koszty (faza 11). Wykresy sa z HTML-a i CSS-u, bez biblioteki: jedna miara (zlotowki),
   jedna seria, jeden kolor. Dlugosc slupka niesie wielkosc, a kwota stoi obok slowami,
   wiec wykres czyta sie takze wtedy, gdy kolory nie dochodza. */
.kafelki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.kafelek {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--karta);
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
}
.kafelek strong { font: 800 24px var(--naglowki); }
.kafelek .zle { color: var(--po-terminie); }
.kafelek .dobrze { color: var(--spokojnie); }

.legenda { margin: 0 0 8px; }

.wykres {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--karta);
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
}
.slupek-wiersz {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 10px;
}
/* Etykieta nie zawija sie: "paz 2025" rozbite na dwie linie rozjezdza caly wiersz. */
.slupek-wiersz .etykieta { text-align: left; white-space: nowrap; font-size: 13px; }
/* Nazwy oplat sa dluzsze niz miesiace i moga sie lamac - dostaja szersza kolumne. */
.slupek-wiersz.szeroki { grid-template-columns: 96px 1fr auto; }
.slupek-wiersz.szeroki .etykieta { white-space: normal; }

/* Tor slupka. Slupek ronie od lewej krawedzi - jednej, wspolnej dla wszystkich
   wierszy - i ma zaokraglony tylko koniec z danymi. */
.tor { position: relative; display: block; height: 16px; }
.slupek {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--dzwon);
  border-radius: 0 4px 4px 0;
}
/* Kreska: ten sam miesiac rok wczesniej. Nie druga seria, tylko punkt odniesienia,
   dlatego jest szara i cienka. Obwodka w kolorze karty odcina ja od slupka,
   gdy obie wartosci sa zblizone. */
.kreska {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--cichy);
  box-shadow: 0 0 0 2px var(--karta);
}
.slupek-wiersz .wartosc { text-align: right; font-size: 14px; white-space: nowrap; }
.slupek-wiersz .wartosc .cicho { font-size: 12px; }

/* --- Przeglad: przelacznik domu, karta z licznikiem i tasma 30 dni ------------- */

.gora > .domy { min-width: 0; }
.gora { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 12px; }
.znak { border-radius: 10px; flex: none; }
.domy {
  display: flex;
  margin: 0;
  padding: 3px;
  background: var(--karta);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}
.domy a {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cichy);
  text-decoration: none;
  white-space: nowrap;
}
.domy a.ten { background: var(--wegiel); color: #fff; }

/* Jedyny glosny element aplikacji. Liczba dni stoi tu duzo, bo to jedyna informacja,
   ktorej szuka sie wzrokiem przy kazdym otwarciu. */
.licznik {
  position: relative;
  background: var(--wegiel);
  color: #fff;
  border-radius: 26px;
  padding: 18px 18px 14px;
}
.licznik .ile { margin: 0; font: 800 64px/0.95 var(--naglowki); letter-spacing: -0.04em; }
.licznik .ile small { font-size: 22px; letter-spacing: 0; margin-left: 6px; }
.licznik .co { margin: 6px 0 0; font-size: 15px; opacity: 0.85; }
.licznik .zalegle {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--dzwon);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
}
.tasma { display: flex; gap: 3px; align-items: flex-end; height: 40px; margin-top: 16px; }
.tasma i { flex: 1; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); }
.tasma i.dzis { height: 16px; background: #fff; }
.tasma i.faktura { height: 36px; background: var(--dzwon); }
.tasma i.inne { height: 22px; background: rgba(255, 255, 255, 0.6); }
.tasma-opis { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 0; font-size: 11px; opacity: 0.6; }

.baner {
  display: block;
  margin-top: 10px;
  padding: 11px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--dzwon) 14%, var(--karta));
  color: var(--tekst);
  font-weight: 600;
  text-decoration: none;
}

/* Wiersz przegladu: data jak z kartki kalendarza, nazwa, kwota. */
.wiersz {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--karta);
  border-radius: 16px;
  padding: 11px 14px 11px 10px;
  text-decoration: none;
  color: inherit;
}
.wiersz .data { width: 46px; flex: none; text-align: center; line-height: 1; }
.wiersz .data b { display: block; font: 800 22px var(--naglowki); }
.wiersz .data b.ikona { width: auto; font-size: 20px; }
.wiersz .data span { font-size: 11px; color: var(--cichy); }
.wiersz .srodek { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wiersz .nazwa { font-weight: 600; }
.wiersz .pod { font-size: 13px; color: var(--cichy); overflow-wrap: anywhere; }
.wiersz .kwota { font: 600 16px var(--naglowki); white-space: nowrap; }
.wiersz.stan-po_terminie .data b { color: var(--po-terminie); }
.wiersz.stan-pilne .data b { color: var(--pilne); }
.znacznik {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 6px;
  margin-left: 4px;
  vertical-align: 1px;
  background: color-mix(in srgb, var(--dzwon) 14%, transparent);
  color: var(--dzwon);
}

/* --- Wiecej ------------------------------------------------------------------ */
.menu-lista { background: var(--karta); border-radius: 16px; margin-bottom: 14px; overflow: hidden; }
.menu-lista a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--kreska);
}
.menu-lista a:last-child { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- Akcje pod rachunkiem: oplacone i przypomnij pozniej -------------------- */
.wiersz-blok { display: flex; flex-direction: column; }
.wiersz-blok > .wiersz,
.wiersz-blok > .pozycja { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.akcje-faktury {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  padding: 0 12px 10px 66px;
  background: var(--karta);
  border-radius: 0 0 16px 16px;
}
.wiersz-blok > .pozycja + .akcje-faktury { padding-left: 14px; }
.akcje-faktury form.w-linii { margin: 0; }
button.maly, summary.maly {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}
summary.maly {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--kreska);
  color: var(--tekst);
  line-height: 20px;
}
summary.maly::-webkit-details-marker { display: none; }
details.odloz[open] { flex-basis: 100%; }
.odloz-formularz { margin: 10px 0 0; gap: 8px; }
.szybkie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.szybkie input[type="date"] { min-height: 34px; padding: 4px 8px; }
button.cichy { background: var(--karta); color: var(--tekst); border: 1px solid var(--kreska); }
.wiersz .notatka { font-size: 13px; font-style: italic; color: var(--tekst); }

/* --- Ekran jednego rachunku -------------------------------------------------- */
.wstecz { display: inline-block; margin: 2px 0 12px; color: var(--cichy); font-size: 15px; text-decoration: none; }
.rach-gora { display: flex; align-items: center; gap: 12px; }
.rach-gora h1 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.2; }
.rach-gora p { margin: 0; color: var(--cichy); font-size: 14px; overflow-wrap: anywhere; }
.dost {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 15px;
  color: #fff;
  font: 800 15px var(--naglowki);
  letter-spacing: 0.02em;
}
.dost-0 { background: #0A4D8C; }
.dost-1 { background: #B4521E; }
.dost-2 { background: #2F7D5B; }
.dost-3 { background: #6B4C9A; }
.dost-4 { background: #9C2F4A; }
.dost-5 { background: var(--wegiel); }
.kwota-duza { margin: 20px 0 2px; font: 800 52px/1 var(--naglowki); letter-spacing: -0.03em; }
.kwota-duza small { font-size: 22px; letter-spacing: 0; }
.termin-rach { margin: 4px 0 0; color: var(--cichy); font-size: 15px; }
.termin-rach b { color: var(--tekst); }
.stan-tekst-po_terminie b { color: var(--po-terminie); }
.stan-tekst-pilne b { color: var(--pilne); }
.znacznik.ok { background: color-mix(in srgb, var(--spokojnie) 16%, transparent); color: var(--spokojnie); }
.porownanie {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--karta);
  box-shadow: inset 4px 0 0 var(--kreska);
  font-size: 14px;
}
.porownanie b { display: block; font-size: 15px; }
.por-uwaga { box-shadow: inset 4px 0 0 var(--pilne); }
.por-dobrze { box-shadow: inset 4px 0 0 var(--spokojnie); }
.historia { margin-top: 14px; }
.slupki-rach { display: flex; gap: 6px; align-items: flex-end; height: 80px; }
.slupki-rach span { flex: 1; background: var(--kreska); border-radius: 6px 6px 2px 2px; }
.slupki-rach span.ta { background: var(--dzwon); }
.slupki-opis { display: flex; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--cichy); }
.slupki-opis span { flex: 1; text-align: center; }
.pola { margin-top: 14px; background: var(--karta); border-radius: 16px; }
.pola > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--kreska);
  font-size: 14px;
  text-align: right;
}
.pola > div:last-child { border-bottom: 0; }
.pola > div > span { color: var(--cichy); text-align: left; flex: none; }
.pola .zle { color: var(--po-terminie); font-style: normal; }
.akcje-rach { display: flex; gap: 8px; margin-top: 16px; }
.akcje-rach > * { flex: 1; }
.akcje-rach form { margin: 0; }
.akcje-rach button, .akcje-rach .przycisk { width: 100%; }
.odloz-rach { margin-top: 8px; }
.odloz-rach > summary { display: block; list-style: none; cursor: pointer; }
.odloz-rach > summary::-webkit-details-marker { display: none; }
.odloz-rach .odloz-formularz { background: var(--karta); border-radius: 16px; padding: 12px 14px; }
.link-oplaty { margin: 18px 2px 0; font-size: 14px; color: var(--cichy); }