/* =========================================================================
   Budżet domowy — „Paragon”

   Kierunek: aplikacja pożycza gramatykę paragonu, bo to obiekt, z którego
   ten budżet się faktycznie składa. Wąska kolumna, kwoty wyrównane do prawej
   cyframi tabelarycznymi, kreski przerywane jak linia oderwania, suma miesiąca
   w pozycji „SUMA” na karcie z postrzępioną krawędzią.

   To nie ozdoba: układ paragonu JEST układem do porównywania kwot wzrokiem.

   Interfejs jest monochromatyczny. Jedyny kolor w całej aplikacji pochodzi
   z danych — z kolorów kategorii. Dzięki temu wykres nigdy nie konkuruje
   o uwagę z przyciskami.

   Tryb: świadomie tylko jasny. Paleta 8 kategorii została zwalidowana pod
   kątem daltonizmu na jasnym tle (wszystkie 56 możliwych piątek przechodzą).
   Na ciemnym tle pasmo jasności jest za wąskie, żeby te same odcienie
   zachowały rozróżnialność — a zmiana odcieni oznaczałaby, że kategoria ma
   inny kolor w dzień i w nocy. Szczegóły w README.
   ========================================================================= */

:root {
  /* Papier i atrament */
  --paper:        #fcfcfb;
  --card:         #ffffff;
  --ink:          #1a1c21;
  --ink-2:        #565b63;
  --ink-muted:    #878d96;
  --rule:         #e3e2dd;
  --rule-strong:  #c9c7c0;

  /* Stany budżetu — kolory zarezerwowane, nigdy nie używane jako kolor kategorii */
  --good:  #1f7a4d;
  --warn:  #a8620a;
  --over:  #b3253a;
  --good-bg: #e8f4ee;
  --warn-bg: #faf0e2;
  --over-bg: #fbe9eb;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --kolumna: 34rem;
  --r: 10px;
  --cien: 0 1px 2px rgba(26, 28, 33, .05), 0 6px 20px -12px rgba(26, 28, 33, .18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }

/* --- Głos paragonu: małe etykiety pisane maszyną ------------------------ */
.meta {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- Kwoty: zawsze cyfry tabelaryczne, zawsze do prawej ----------------- *
 * Tabularne cyfry mają równą szerokość, więc kwoty ustawiają się w kolumnę
 * i da się je porównać samym kształtem, bez czytania. To cała sztuczka
 * paragonu i jedyny powód, dla którego ten układ działa.                   */
.kwota {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-align: right;
}

.kwota-duza { font-size: 2.5rem; font-weight: 650; line-height: 1.05; }
.kwota-srednia { font-size: 1.125rem; font-weight: 600; }

/* --- Układ -------------------------------------------------------------- */
.kolumna {
  max-width: var(--kolumna);
  margin: 0 auto;
  padding: 0 1rem;
}

.naglowek-ekranu {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0 1rem;
}
.naglowek-ekranu h1 { font-size: 1.25rem; font-weight: 640; margin: 0; letter-spacing: -.01em; }

.karta {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 1rem;
  margin-bottom: .875rem;
  box-shadow: var(--cien);
}
.karta > h2 {
  font-size: .8125rem; font-weight: 600; margin: 0 0 .75rem;
  color: var(--ink-2); letter-spacing: .01em;
}

/* --- SYGNATURA: karta sumy z oderwaną krawędzią ------------------------- *
 * Jedyny odważny element w całym interfejsie. Pojawia się raz na ekranie,
 * wyłącznie pod sumą miesiąca, i nigdy na elementach wykresu.              */
.paragon {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-bottom: none;
  border-radius: var(--r) var(--r) 0 0;
  padding: 1.25rem 1rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--cien);
}
.paragon::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: 100%;
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Cpath d='M0 0 L8 9 L16 0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 16px 9px;
  filter: drop-shadow(0 1px 0 var(--rule));
}

.paragon-suma { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.paragon-suma .kwota-duza { flex: 1; }

/* Linia oderwania — dzieli sekcje wewnątrz karty */
.kreska {
  border: 0;
  border-top: 1px dashed var(--rule-strong);
  margin: .875rem 0;
}

/* --- Wiersz paragonu: nazwa z lewej, kwota z prawej, kropki między ------ */
.wiersz {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .4375rem 0;
}
.wiersz + .wiersz { border-top: 1px solid var(--rule); }
.wiersz-nazwa { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.wiersz-nazwa { flex-shrink: 1; }
.wiersz-nazwa span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Procent chowamy dopiero na naprawdę wąskich ekranach (poniżej 336 px) —
   na typowym telefonie mieści się razem z pełną nazwą kategorii. */
@media (max-width: 21rem) {
  .legenda-procent { display: none; }
}
.wiersz-wypelniacz {
  flex: 1;
  border-bottom: 1px dotted var(--rule-strong);
  transform: translateY(-.2em);
  min-width: 1rem;
}

/* Próbka koloru kategorii — jedyne miejsce, gdzie w UI pojawia się kolor.
   Zawsze obok nazwy, nigdy zamiast niej. */
.probka {
  width: 10px; height: 10px; border-radius: 2px;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}

/* Wiersz wydatku ma własny układ: nazwa i data w kolumnie po lewej (może się
   skracać), kwota po prawej (nigdy się nie zawija), akcje w osobnym rzędzie. */
.wydatek { cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .5rem .5rem; padding: .5rem 0; }
.wydatek + .wydatek { border-top: 1px solid var(--rule); }
.wydatek-opis { min-width: 0; grid-column: 2; }
.wydatek-opis > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wydatek-opis > small { display: block; margin-top: .0625rem; }
.wydatek-akcje { grid-column: 2 / 4; display: flex; align-items: baseline; gap: 1rem; justify-content: flex-end; padding-top: .25rem; }
.wydatek-akcje button { font-size: .8125rem; }

/* --- Wybór zdjęcia paragonu: aparat jest głównym sposobem dodania ------- */
.plik { position: relative; display: block; }
.plik input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.plik-przycisk {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px dashed var(--rule-strong); border-radius: 8px;
  padding: .75rem; color: var(--ink-2); font-size: .875rem; background: var(--card);
}
.plik input:focus-visible + .plik-przycisk { outline: 2px solid var(--ink); outline-offset: 2px; }

/* --- Formularze --------------------------------------------------------- */
label { display: block; }
.pole { margin-bottom: .875rem; }
.pole > .meta { display: block; margin-bottom: .3125rem; }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], textarea, select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: .625rem .75rem;
  appearance: none;
}
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Pole kwoty — bohater ekranu dodawania */
.pole-kwota input {
  font-size: 2.25rem;
  font-weight: 650;
  text-align: right;
  padding: .5rem .75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* --- Kafelki kategorii -------------------------------------------------- */
.kafelki { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.kafelek {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .625rem .25rem;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.2;
  transition: border-color .12s, background .12s;
}
.kafelek em { font-style: normal; font-size: 1.25rem; }
.kafelek[aria-pressed="true"] {
  border-color: var(--ink);
  background: #f4f4f1;
  color: var(--ink);
  font-weight: 600;
}

/* --- Przełącznik „kto zapłacił” ---------------------------------------- */
.segment { display: flex; border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden; }
.segment button {
  flex: 1; font: inherit; font-size: .875rem; padding: .5rem .25rem;
  background: var(--card); border: 0; cursor: pointer; color: var(--ink-2);
}
.segment button + button { border-left: 1px solid var(--rule-strong); }
.segment button[aria-pressed="true"] { background: var(--ink); color: #fff; font-weight: 600; }

/* --- Przyciski ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600;
  padding: .6875rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--ink);
  background: var(--ink); color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-cichy { background: var(--card); color: var(--ink); border-color: var(--rule-strong); }
.btn-pelny { width: 100%; }
.btn-maly { padding: .375rem .625rem; font-size: .8125rem; }
.btn-tekst {
  background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.btn-usun { color: var(--over); }

/* --- Paski postępu (budżety, cele) ------------------------------------- *
 * Stan niesie kolor ORAZ tekst pod spodem — nigdy sam kolor.              */
.pasek { height: 6px; border-radius: 3px; background: #edece8; overflow: hidden; margin: .375rem 0 .25rem; }
.pasek > div { height: 100%; border-radius: 3px; transition: width .3s ease; }
.pasek-ok   > div { background: var(--good); }
.pasek-uwaga> div { background: var(--warn); }
.pasek-nad  > div { background: var(--over); }

.znacznik {
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .05em;
  padding: .125rem .375rem; border-radius: 4px;
}
.znacznik-ok    { background: var(--good-bg); color: var(--good); }
.znacznik-uwaga { background: var(--warn-bg); color: var(--warn); }
.znacznik-nad   { background: var(--over-bg); color: var(--over); }

/* --- Nawigacja dolna (zasięg kciuka) ----------------------------------- */
.nawigacja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex;
  background: rgba(252, 252, 251, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.nawigacja a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: .125rem;
  padding: .5rem .25rem .4375rem;
  text-decoration: none;
  color: var(--ink-muted);
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .06em; text-transform: uppercase;
}
.nawigacja a em { font-style: normal; font-size: 1.1875rem; line-height: 1; }
.nawigacja a[aria-current="page"] { color: var(--ink); }
.nawigacja a.dodaj em {
  background: var(--ink); color: #fff;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.125rem; font-weight: 400;
}

/* --- Wykresy ------------------------------------------------------------ */
.wykres { width: 100%; display: block; overflow: visible; }
.legenda { display: flex; flex-wrap: wrap; gap: .25rem .875rem; margin-top: .75rem; }
.legenda-poz { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--ink-2); }

/* Osie i siatka mają być ledwo widoczne — dane są bohaterem, nie linijka. */
.os-tekst { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-muted); }
.siatka { stroke: var(--rule); stroke-width: 1; }

.dymek {
  position: fixed; z-index: 40; pointer-events: none;
  background: var(--ink); color: #fff;
  font-size: .75rem; padding: .375rem .5rem; border-radius: 6px;
  transform: translate(-50%, -130%);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.dymek .kwota { font-weight: 650; }

/* --- Stany puste, błędy, ładowanie ------------------------------------- */
.pusto { text-align: center; padding: 2.5rem 1rem; color: var(--ink-muted); }
.pusto strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: .25rem; }

.blad {
  background: var(--over-bg); color: var(--over);
  border: 1px solid #f0c9ce; border-radius: 8px;
  padding: .625rem .75rem; margin-bottom: .875rem; font-size: .875rem;
}
.sukces {
  background: var(--good-bg); color: var(--good);
  border: 1px solid #c9e5d5; border-radius: 8px;
  padding: .625rem .75rem; margin-bottom: .875rem; font-size: .875rem;
}

/* --- Ekran logowania ---------------------------------------------------- */
.logowanie { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }
.logowanie .paragon { width: 100%; max-width: 22rem; margin: 0; }

/* --- Arkusz edycji: na telefonie wjeżdża na pełny ekran ----------------- */
.arkusz-tlo {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(26, 28, 33, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.arkusz {
  background: var(--paper);
  width: 100%; max-width: var(--kolumna);
  max-height: 92dvh; overflow-y: auto;
  border-radius: var(--r) var(--r) 0 0;
  padding: 0 1rem calc(1rem + env(safe-area-inset-bottom));
  animation: wjazd .18s ease-out;
}
@keyframes wjazd { from { transform: translateY(2rem); opacity: .6 } to { transform: none; opacity: 1 } }

.arkusz-pasek {
  position: sticky; top: 0; z-index: 1;
  background: var(--paper);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .875rem 0 .75rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: .875rem;
}
.arkusz-pasek h2 { margin: 0; font-size: 1rem; font-weight: 640; }

@media (min-width: 46rem) {
  .arkusz-tlo { align-items: center; }
  .arkusz { border-radius: var(--r); max-height: 88dvh; }
}

/* --- Podgląd paragonu --------------------------------------------------- */
.podglad {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(26, 28, 33, .88);
  display: grid; place-items: center; padding: 1rem;
}
.podglad img { max-width: 100%; max-height: 85dvh; border-radius: 8px; }

/* --- Raport ------------------------------------------------------------- */
.raport-tekst {
  font-family: var(--font-mono); font-size: .75rem; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  max-height: 26rem; overflow: auto;
  background: #f7f7f4; border: 1px solid var(--rule); border-radius: 8px;
  padding: .75rem; margin: 0;
}

/* --- Ruch: minimum, i tylko gdy użytkownik go nie wyłączył ------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Szersze ekrany ----------------------------------------------------- */
@media (min-width: 46rem) {
  body { padding-bottom: 2rem; }
  .nawigacja {
    position: sticky; top: 0; bottom: auto;
    max-width: var(--kolumna); margin: 0 auto; border-top: 0; border-bottom: 1px solid var(--rule);
  }
  .kafelki { grid-template-columns: repeat(4, 1fr); }
}