/*
  Panel uzytkownika i operatora. Paleta, przyciski, pola i komunikaty siedza w `tokens.css` — tutaj
  jest tylko uklad i komponenty specyficzne dla panelu.

  Kolory podaje sie **wylacznie** przez zmienne z `tokens.css`. Wczesniej ten plik mial wpisane na
  sztywno `#b91c1c`, `#2563eb` i `#cbd5e1`, wiec w trybie ciemnym swiecily na granatowym tle i nie
  dawaly sie poprawic w jednym miejscu.
*/

/* --- rama strony --------------------------------------------------------------------------- */

main { max-width: 60rem; margin: 0 auto; padding: 2rem var(--gap); }
/* Widoki raportowe rozpychaja sie same; formularze zostaja waskie. */
main:has(.report), main:has(.tiles) { max-width: 82rem; }

/* 1.5rem, nie 1rem: rytm pionowy panelu ma jedna wartosc, wiec tytul strony odsuwa sie tak samo
   jak kazdy inny blok. */
h1 { font-size: clamp(1.4rem, 3vw, 1.75rem); letter-spacing: -.01em; margin: 0 0 1.5rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 0 0 .4rem; }

/* Rytm pionowy panelu: **jedna** wartosc dla wszystkich blokow lezacych bezposrednio w `main`.
   Zmierzone przed poprawka na roznych stronach: 0, 8, 16, 24 i 32 px — kazdy przypadkowy, bo
   wynikal z domyslnych marginesow akapitu, tabeli i naglowka, a nie z jakiejkolwiek decyzji.
   Sasiadujace sekcje na dashboardzie zlewaly sie w jeden blok (0 px). */
main > * { margin-block: 0; }
main > * + * { margin-top: 1.5rem; }
/* Naglowek nalezy do tresci pod soba, wiec ta jedna para jest ciasniejsza od reszty rytmu. */
main > :is(h2, h3) + * { margin-top: .5rem; }

/* Naglowek na poczatku kontenera nie potrzebuje wlasnego marginesu gornego: w karcie (`display:
   grid`) marginesy nie kolapsuja z `gap`, wiec `h2` dawal 53 px pustki u gory przy 20 px u dolu —
   karta wygladala na przekrzywiona. */
:where(.card, .lead-stat, section) > :is(h2, h3):first-child { margin-top: 0; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  padding: .5rem var(--gap); border-bottom: 1px solid var(--line); flex-wrap: wrap;
  background: var(--paper-soft);
}
.brand {
  display: inline-flex; align-items: center; min-height: var(--touch);
  font-weight: 700; text-decoration: none; color: var(--ink);
}
nav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
nav a {
  display: inline-flex; align-items: center; min-height: var(--touch);
  padding: 0 .6rem; border-radius: .4rem;
  color: var(--ink-soft); text-decoration: none; font-size: .95rem;
}
nav a:hover { color: var(--ink); background: var(--paper); }
/* Strona, na ktorej user stoi, musi byc rozpoznawalna bez czytania adresu. */
nav a[aria-current="page"] { color: var(--ink); background: var(--paper); font-weight: 600; }

.banner { padding: .7rem var(--gap); display: flex; gap: var(--gap); align-items: center; flex-wrap: wrap; }
.banner-warning {
  background: var(--warn-soft); color: var(--warn);
  border-bottom: 1px solid currentColor; font-weight: 600;
}

/* --- ekrany logowania i rejestracji ------------------------------------------------------- */

/* Formularz uwierzytelniania to jedyna tresc na stronie, wiec dostaje wlasna, waska kolumne i
   wysrodkowanie. Wczesniej wisial w lewym gornym rogu kolumny 60 rem, z 421 px pustki pod soba. */
body.auth main { max-width: 25rem; padding: clamp(1.5rem, 6vh, 4rem) var(--gap) 3rem; }
body.auth h1 { text-align: center; margin-bottom: 1.5rem; }
body.auth form.card { gap: 1rem; max-width: none; }
body.auth form.card button { width: 100%; }
body.auth .after-form {
  text-align: center; margin: 1.25rem 0 0; color: var(--ink-soft); font-size: .95rem;
}

/* --- karty i sekcje ----------------------------------------------------------------------- */

.card {
  display: grid; gap: .75rem; padding: 1.25rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-soft);
}
/* W karcie odstepy daje `gap`, wiec domyslne marginesy akapitow i list tylko je dubluja. Zmierzone:
   `p` z marginesem 16 px dawal 37 px u gory karty i 21 px u dolu, gdy ostatnim elementem byl
   przycisk — karta wygladala na przekrzywiona bez zadnej regulki, ktora by to nakazywala. */
.card > :is(p, ul, ol, dl, h2, h3, table) { margin-block: 0; }
form.card { max-width: 26rem; }
section.card { max-width: none; margin-top: var(--gap); gap: .5rem; }
dl.card { grid-template-columns: auto 1fr; align-items: baseline; }
dl.card dt { font-weight: 600; }
dl.card dd { margin: 0; }

form.inline { display: inline-flex; gap: .4rem; margin: 0; align-items: center; }

/* --- tabele ------------------------------------------------------------------------------- */

/* Tabela raportu na telefonie nie zmiesci sie nigdy, wiec przewija sie **w swojej ramce**, a nie
   rozpycha calej strony w poziomie. */
.table-scroll { overflow-x: auto; }
/* Bez wlasnego `margin-top`: odstep nad tabela nalezy do rytmu strony (`main > * + *`), inaczej
   tabela bedaca bezposrednim dzieckiem `main` wylamuje sie z niego o 8 px. */
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
/* `.75rem` w pionie daje wiersz ~45 px, czyli cel dotykowy o rozmiarze kontrolki. Alternatywa —
   44 px na sam link — podwoilaby wysokosc tabeli z czterdziestoma wierszami. */
th, td { text-align: left; padding: .75rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
/* Link w komorce zajmuje cala jej wysokosc, wiec palec trafia w wiersz, nie w 18-pikselowy tekst. */
.report td a { display: block; padding: .1rem 0; }
thead th {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
  border-bottom-width: 2px; white-space: nowrap;
}
tbody tr:hover { background: var(--paper-soft); }
.report th.numeric, .report td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.report tr.row-note td { border-bottom: none; padding-top: 0; font-size: .85rem; color: var(--ink-soft); }

/* --- filtry, paginacja -------------------------------------------------------------------- */

/* Bez wlasnego marginesu: odstep nad filtrami i paginacja nalezy do rytmu strony. */
.filters { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.filters .spacer { flex: 1; }
.filters a {
  display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 .7rem;
  border: 1px solid var(--line); border-radius: .4rem; text-decoration: none; color: var(--ink-soft);
}
.filters a:hover { color: var(--ink); border-color: var(--ink-soft); }
.filters a.active {
  color: var(--brand-ink); background: var(--brand); border-color: var(--brand); font-weight: 600;
}
.pager {
  display: flex; gap: var(--gap); align-items: center; flex-wrap: wrap; color: var(--ink-soft);
}
.pager a { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 .5rem; }

/* --- dashboard: wiodaca liczba i horyzonty --------------------------------------------------- */

/* Jedna liczba prowadzaca plus jedna akcja. Poprzednia wersja miala cztery kafelki tej samej wagi i
   akcje („przejdz do planu") jako goly link na samym dole — najwazniejsze pytanie produktu nie mialo
   na ekranie zadnego pierwszenstwa. */
.lead-stat {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  flex-wrap: wrap; padding: 1.5rem;
  border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--radius); background: var(--paper-soft);
}
.lead-stat h2 { margin: 0; font-size: 1rem; color: var(--ink-soft); font-weight: 600; }
.lead-value {
  margin: .15rem 0 .35rem; font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1;
}
.lead-stat .hint { margin: 0; max-width: 44ch; }

.horizons { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--gap); }
.horizon {
  display: grid; gap: .2rem; padding: 1.1rem; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-soft);
}
.horizon:hover { border-color: var(--brand); }
.horizon-range { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.horizon-count { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.horizon-share { font-size: .85rem; color: var(--ink-soft); }
/* Pasek udzialu: zawsze widoczny tor, zeby zero czytalo sie jako zero, a nie jako brak elementu. */
.horizon-bar { display: block; height: .375rem; margin-top: .35rem; border-radius: 999px; background: var(--line); }
.horizon-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--brand); }

/* --- kafelki (pozostale widoki) ----------------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--gap); }
.tile {
  display: grid; gap: .25rem; padding: 1.1rem; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-soft);
}
.tile:hover { border-color: var(--brand); }
.tile .value { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.tile .label { font-size: .85rem; color: var(--ink-soft); }
.two-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--gap); }

/* Bez `margin: 0`: klasa typograficzna nie decyduje o odstepach. W karcie zeruje je regula
   `.card > p`, a bezposrednio w `main` odstep nalezy do rytmu strony. */
.big { font-size: 1.4rem; font-weight: 700; }
.delta { font-size: .9rem; font-weight: 500; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--danger); }
.delta.flat { color: var(--ink-soft); }
.explain { font-weight: 600; }

dl.kv { display: grid; grid-template-columns: auto 1fr; gap: .4rem var(--gap); margin: 0; }
dl.kv dt { font-weight: 600; color: var(--ink-soft); }
dl.kv dd { margin: 0; }
ul.movers { margin: 0; padding: 0; list-style: none; }
/* Wiersz listy jest celem dotykowym, nie 19-pikselowy tekst linku. Pieciopozycyjna lista rosnie
   przez to o ~120 px i to jest uczciwa cena za mozliwosc trafienia palcem. */
ul.movers li {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  flex-wrap: wrap; border-bottom: 1px solid var(--line);
}
ul.movers li:last-child { border-bottom: 0; }
/* Cel dotykowy to element, ktory reaguje na klikniecie — wiersz o wysokosci 44 px z linkiem
   wysokim na 25 px nie spelnia wymogu, bo palec musi trafic w sam link. */
ul.movers li a { flex: 1 1 8rem; display: flex; align-items: center; min-height: var(--touch); }

/* --- sparkline karty oferty --------------------------------------------------------------- */

/* Wyblakly slupek = dzien niekwalifikowany (brak towaru albo brak pomiaru). Sam kolor tego nie
   przekazuje, dlatego kazdy slupek ma `title` z data i liczba sztuk. */
.sparkline { display: flex; align-items: flex-end; gap: 2px; height: 4rem; }
.sparkline .bar { flex: 1; min-height: 1px; background: var(--brand); border-radius: 1px; }
.sparkline .bar.unqualified { background: var(--line); }