:root {
  /* Mowi przegladarce, w ktora strone ma malowac to, czego my nie malujemy:
     listy rozwijane <select>, kalendarze przy polach z data, podpowiedzi
     autouzupelniania, pola liczbowe. Bez tego w ciemnym motywie rozwijana
     lista wyskakiwala biala, z czarnym pismem, na srodku ciemnego ekranu. */
  color-scheme: light;
  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --brand: #ee6e1b;
  --brand-dark: #c85610;
  --brand-light: #ffb066;
  --navy: #0f172a;
  --live: #34d399;
  --ai: #0891b2; --ai-dark: #0e7490;
  --ai-bg: #e0f7fa; --ai-tx: #0e7490; --ai-bd: #a5e4ec;
  --danger-bg: #fef2f2; --danger-tx: #b91c1c; --danger-bd: #fecaca;
  --warn-bg: #fffbeb;  --warn-tx: #92400e;  --warn-bd: #fde68a;
  --info-bg: #eff6ff;  --info-tx: #1e40af;  --info-bd: #bfdbfe;
  /* Negocjacje (fiolet) i oferta wygasla (stal) - dwa statusy ofert, ktore nie
     miesza sie z blekitem "wyslana" ani z czerwienia "odrzucona". */
  --nego-bg: #f5f3ff;  --nego-tx: #6d28d9;  --nego-bd: #ddd6fe;
  --stal-bg: #f1f5f9;  --stal-tx: #475569;  --stal-bd: #cbd5e1;
  /* Tlo ciemnych plakietek i wlaczonych filtrow W TRESCI strony. NIE --navy:
     navy zostaje ciemny takze w motywie ciemnym, wiec plakietka „DANE KLIENTA"
     czy wlaczony filtr zlewaly sie z tlem i nie bylo widac, co jest wybrane.
     Pasek boczny dalej uzywa --navy - tam ciemne tlo jest wlasnie o to. */
  --pigulka: var(--navy); --pigulka-jasniej: #1e293b; --pigulka-obwodka: transparent;
  --shadow: 0 10px 30px rgba(2, 8, 23, .08);

  /* SKALA PISMA - siedem stopni na cala aplikacje.
     Wczesniej bylo 38 roznych rozmiarow, czesto rozniacych sie o 0,02rem
     (nie do odroznienia okiem, za to widac balagan): sam nagłowek h3 mial
     dziewiec rozmiarow, "zwykly tekst" - szesc. Kazdy rozmiar w arkuszach
     wskazuje teraz na jeden z tych stopni, wiec ten sam rodzaj tekstu
     wyglada tak samo na kazdej zakladce.
       micro - etykietki wersalikami nad wartoscia
       sm    - tekst pomocniczy, meta, naglowki tabel
       base  - ZWYKLY TEKST: komorki tabel, opisy, pola formularzy, przyciski
       md    - tekst wyrozniony, naglowki kart
       lg    - tytuly sekcji i okien, duze liczby
       xl    - tytul strony
       hero  - napis wiodacy na kafelku powitalnym */
  --fs-micro: .62rem;
  --fs-sm:    .74rem;
  --fs-base:  .84rem;
  --fs-md:    .92rem;
  --fs-lg:    1.05rem;
  --fs-xl:    1.3rem;
  --fs-hero:  1.7rem;

  /* Szerokosc paska bocznego w jednym miejscu - pasek i odsuniecie tresci
     musza sie zgadzac co do piksela, wiec nie moga byc dwiema liczbami. */
  --pasek-szer: 236px;
  /* Mocny tekst (liczby, daty, naglowki kafli). NIE --navy: navy to kolor
     PASKA i pigulek, wiec zostaje ciemny takze w ciemnym motywie - uzyty jako
     kolor pisma znikal wtedy w tle. */
  --tekst-mocny: var(--navy);
}
/* Motyw ciemny wybrany w Ustawieniach - te same wartosci, co przy motywie
   systemowym. Wybor konta wygrywa z ustawieniem Windowsa w obie strony:
   "jasny" nie zciemnieje wieczorem, "ciemny" nie rozjasni sie rano. */
:root[data-motyw="ciemny"] {
  color-scheme: dark;
  --bg: #0b1120; --surface: #151e2d; --surface-2: #111927;
  --text: #e2e8f0; --muted: #94a3b8; --border: #293548;
  --brand: #f5851f; --brand-dark: #ea6a1e; --brand-light: #ffb066;
  --ai: #22d3ee; --ai-dark: #0e7490;
  --ai-bg: #0b2e34; --ai-tx: #67e8f9; --ai-bd: #155e63;
  --danger-bg: #2a1416; --danger-tx: #fca5a5; --danger-bd: #7f1d1d;
  --warn-bg: #241c0d; --warn-tx: #fcd34d; --warn-bd: #78350f;
  --info-bg: #0f1e33; --info-tx: #93c5fd; --info-bd: #1e3a8a;
  --nego-bg: #1e162f; --nego-tx: #c4b5fd; --nego-bd: #4c1d95;
  --pigulka: #33415a; --pigulka-jasniej: #45566f; --pigulka-obwodka: #55688a;
  --stal-bg: #16202f; --stal-tx: #94a3b8; --stal-bd: #33415a;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --tekst-mocny: #e8eefc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]):not([data-motyw="ciemny"]) {
    color-scheme: dark;
    --bg: #0b1120; --surface: #151e2d; --surface-2: #111927;
    --text: #e2e8f0; --muted: #94a3b8; --border: #293548;
    --brand: #f5851f; --brand-dark: #ea6a1e; --brand-light: #ffb066;
    --ai: #22d3ee; --ai-dark: #0e7490;
    --ai-bg: #0b2e34; --ai-tx: #67e8f9; --ai-bd: #155e63;
    --danger-bg: #2a1416; --danger-tx: #fca5a5; --danger-bd: #7f1d1d;
    --warn-bg: #241c0d; --warn-tx: #fcd34d; --warn-bd: #78350f;
    --info-bg: #0f1e33; --info-tx: #93c5fd; --info-bd: #1e3a8a;
    --nego-bg: #1e162f; --nego-tx: #c4b5fd; --nego-bd: #4c1d95;
    --pigulka: #33415a; --pigulka-jasniej: #45566f; --pigulka-obwodka: #55688a;
    --stal-bg: #16202f; --stal-tx: #94a3b8; --stal-bd: #33415a;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --tekst-mocny: #e8eefc;
  }
}

* { box-sizing: border-box; }
/* Ikona bez podanych wymiarow rozciaga sie do wysokosci kontenera, a ten
   rosnie razem z nia - z malego dzwonka przy uwadze robil sie znak na pol
   ekranu. Domyslny rozmiar „na wysokosc pisma" to najnizsza specyficznosc,
   wiec kazda reguła z konkretnym rozmiarem (a jest ich w tym pliku ponad sto)
   dalej wygrywa. Tu chodzi tylko o to, zeby brak rozmiaru nie konczyl sie
   ikona wielkosci ekranu. */
svg { width: 1em; height: 1em; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }

/* --- Brand --- */
.brand { display: flex; align-items: center; gap: .7rem; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: transparent url("waterm-logo.png") -5px center / auto 41px no-repeat;
  overflow: hidden;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: var(--fs-md); }
.brand-text span { font-size: var(--fs-sm); color: var(--muted); }

/* --- Alerts --- */
.alert { padding: .65rem .85rem; border-radius: 9px; border: 1px solid; font-size: var(--fs-md); margin-bottom: .9rem; }
.alert-error   { background: var(--danger-bg); color: var(--danger-tx); border-color: var(--danger-bd); }
.alert-warning { background: var(--warn-bg);  color: var(--warn-tx);  border-color: var(--warn-bd); }
.alert-info    { background: var(--info-bg);  color: var(--info-tx);  border-color: var(--info-bd); }

/* ============ LOGIN ============ */
body.login-page {
  background:
    linear-gradient(135deg, rgba(2, 6, 23, .90), rgba(15, 23, 42, .78)),
    url("waterm-bg.jpg") center / cover no-repeat fixed;
}
.login-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 1.5rem; gap: 1rem;
}
.login-logo { display: block; height: 44px; width: auto; margin: 0 auto .4rem; }
.login-sub { text-align: center; color: rgba(226, 232, 240, .7); font-size: var(--fs-base); margin: 0 0 .4rem; }
.login-card {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 2rem 1.8rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.login-card h1 { font-size: var(--fs-xl); margin: 1.2rem 0 1rem; }
.login-card label { font-size: var(--fs-base); font-weight: 600; margin-bottom: .3rem; }
.login-card input[type=text],
.login-card input[type=email],
.login-card input[type=password] {
  width: 100%; padding: .6rem .7rem; margin-bottom: .9rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px; font-size: var(--fs-md);
}
.login-card input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.checkbox { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: var(--fs-md); margin-bottom: 1.1rem; }
.checkbox input { width: auto; accent-color: var(--brand); }
.login-card .checkbox input:focus { outline: none; }
.btn-primary {
  width: 100%; padding: .7rem; border: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; font-weight: 700; font-size: var(--fs-lg);
}
.btn-primary:hover { filter: brightness(1.05); }
.hint { color: var(--muted); font-size: var(--fs-base); text-align: center; margin: 1rem 0 0; }
.login-footer { color: var(--muted); font-size: var(--fs-base); }

/* Ciemna, szklana karta na tle zdjecia Waterm */
.login-page .login-card {
  background: rgba(15, 23, 42, .85);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  color: #e2e8f0;
}
.login-page .login-card h1 { color: #fff; text-align: center; }
.login-page .login-card label { color: #cbd5e1; }
.login-page .login-card input[type=text],
.login-page .login-card input[type=email],
.login-page .login-card input[type=password] {
  background: rgba(255, 255, 255, .07);
  color: #fff;
  border-color: rgba(255, 255, 255, .16);
}
.login-page .login-card input::placeholder { color: rgba(226, 232, 240, .45); }
.login-page .checkbox { color: #cbd5e1; }
.login-page .hint { color: rgba(226, 232, 240, .6); }
.login-page .login-footer { color: rgba(226, 232, 240, .75); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.login-rodo { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; margin-top: .6rem;
  max-width: 26rem; }
.login-page .login-rodo { color: rgba(226, 232, 240, .62); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
/* Ten sam wzorzec, co reszta klikalnego tekstu: kolor tekstu i pogrubienie,
   pomaranczowy dopiero po najechaniu. Klasa wyrosla z linku "nie pamietam
   hasla" na ekranie logowania, ale uzywa jej dzis pietnascie miejsc w tresci
   (Inwestycje, Magazyn, Karta pracy) - i tam swiecila pomaranczem od razu.
   Sam ekran logowania zostaje przy pomaranczu regula nizej: na ciemnym tle
   to jedyny akcent i nie ma z czym konkurowac. */
.forgot-link { color: var(--text); font-weight: 700; text-decoration: none; }
.forgot-link:hover, .forgot-link:focus-visible { color: var(--brand); text-decoration: underline; }
.login-page .forgot-link { color: #f5851f; }
/* Komunikat walidacji pod polem (miejsce zarezerwowane, brak przeskoku, nie nachodzi na input) */
.field-msg {
  visibility: hidden;
  display: flex; align-items: center; gap: .4rem;
  margin: 0 0 .9rem; padding: .45rem .65rem;
  background: rgba(252, 165, 165, .12);
  border: 1px solid rgba(252, 165, 165, .4);
  border-radius: 7px;
  font-size: var(--fs-base); line-height: 1.3; color: #fca5a5;
}
.field-msg::before { content: "⚠"; flex-shrink: 0; }
.login-card button.btn-primary:disabled { opacity: .5; cursor: not-allowed; filter: none; }

/* Checklista wymagań nowego hasła (auto-zaznaczane checkboxy) */
.pw-rules {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem;
  margin: -.3rem 0 1.1rem; padding: .7rem .8rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
}
.pw-rule { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-base); color: var(--muted); }
.pw-rule input[type=checkbox] { width: 14px; height: 14px; accent-color: #22c55e; pointer-events: none; }
.pw-rule:has(input:checked) { color: #16a34a; font-weight: 600; }
.login-page .pw-rules { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.login-page .pw-rule { color: rgba(226, 232, 240, .6); }
.login-page .pw-rule:has(input:checked) { color: #4ade80; }

/* ============ APP SHELL ============ */
.layout { display: flex; min-height: 100vh; }
/* Pasek boczny przypiety do viewportu - nie znika przy przewijaniu tresci. */
.sidebar {
  width: var(--pasek-szer); flex-shrink: 0; background: var(--navy);
  border-top: 3px solid #020617;
  padding: 1rem .85rem;
  display: flex; flex-direction: column; gap: 1.1rem;
  position: fixed; top: 0; left: 0; bottom: 0; height: 100vh;
  overflow-y: auto; z-index: 20;
}
/* "Krawedz LED" - ciagly, ciemny granatowo-czarny poblask na calej wysokosci
   paska (wczesniej pomaranczowy - zmienione, zeby pomaranczowy zostal
   akcentem dla przyciskow/ikon, a nie dla tej krawedzi). */
/* `fixed`, a nie `absolute` (wydajnosc, 08.09.2026). Jako `absolute` ta
   krawedz nalezala do PRZEWIJANEJ zawartosci paska, wiec przy kazdej klatce
   przewijania menu przegladarka odmalowywala 3-pikselowy pasek z 14-pikselowym
   rozmyciem na calej wysokosci listy - stad scinanie przy jezdzeniu po
   zakladkach. `fixed` przykleja ja do okna: rysuje sie raz i nie rusza.
   Wyglada tak samo, bo pasek boczny i tak stoi nieruchomo. */
.sidebar::after {
  content: ""; position: fixed; top: 0; left: var(--pasek-szer); bottom: 0; width: 3px;
  margin-left: -2px; z-index: 21; pointer-events: none;
  background: linear-gradient(180deg, #1e293b, #020617 50%, #1e293b);
  box-shadow: 0 0 14px 2px rgba(2, 6, 23, .8);
}
.brand-text strong { color: #fff; }
.brand-text span { color: rgba(255, 255, 255, .6); }
.sidebar-divider { border-top: 1px solid #fff; }
.nav { display: flex; flex-direction: column; gap: .2rem; }
/* Konto zostaje na dole paska takze wtedy, gdy lista zakladek jest dluzsza
   niz ekran. Wczesniej trzeba bylo przewinac pasek do samego konca, zeby
   w ogole je zobaczyc - a to jedyne wyjscie do wlasnych ustawien i wylogowania. */
.nav-bottom {
  margin-top: auto; padding-top: .8rem; border-top: 1px solid #fff;
  /* -1rem + padding: pasek ma dolne wypelnienie 1rem, wiec bez tego pod
     przyklejonym kafelkiem przeswitywalyby przewijane zakladki. */
  position: sticky; bottom: -1rem; z-index: 3;
  padding-bottom: 1rem; background: var(--navy);
  box-shadow: 0 -10px 14px -6px var(--navy);
}
.nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .6rem; border-radius: 8px; color: #fff;
  font-size: var(--fs-base); font-weight: 600; letter-spacing: .01em;
}
.nav-item:hover { background: rgba(255, 255, 255, .09); }
.nav-item.active { background: var(--brand); }
.nav-ico { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; }
.nav-ico svg { width: 100%; height: 100%; }
.badge {
  margin-left: auto; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  padding: .05rem .4rem; border-radius: 6px; background: var(--ai-bg);
  color: var(--ai-tx); border: 1px solid var(--ai-bd);
}
.nav-item.active .badge { background: rgba(255,255,255,.2); color: #fff; border-color: transparent; }
/* Zakladka wewnetrzna INPI - inny kolor niz "admin", zeby na pierwszy rzut oka
   bylo widac, ze tego klient nie oglada. */
.badge-inpi {
  text-transform: none; letter-spacing: .01em; white-space: nowrap; font-size: var(--fs-micro);
  background: rgba(224, 122, 95, .16); color: #e07a5f; border-color: rgba(224, 122, 95, .35);
}

/* `position: relative` zostaje dla menu konta otwieranego w tresci strony;
   w pasku bocznym ten sam element jest przyklejony do dolu (nizej), a sticky
   tez jest pozycjonowaniem, wiec dymek nadal ma sie wzgledem czego ustawic. */
.account-menu { position: relative; }
.sidebar .account-menu.nav-bottom { position: sticky; bottom: -1rem; }
.account-trigger {
  display: flex; align-items: center; gap: .65rem; cursor: pointer;
  padding: .45rem .5rem; border-radius: 9px; list-style: none;
}
.account-trigger::-webkit-details-marker { display: none; }
.account-trigger:hover { background: rgba(255, 255, 255, .09); }
.avatar {
  width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
  background: var(--brand); color: #fff; font-size: var(--fs-sm); font-weight: 700;
  display: grid; place-items: center;
}
.account-name {
  color: #fff; font-size: var(--fs-base); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-popup {
  position: absolute; bottom: calc(100% + .4rem); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: .35rem; display: flex; flex-direction: column;
}
.account-popup a {
  padding: .5rem .6rem; border-radius: 7px; font-size: var(--fs-base); font-weight: 600; color: var(--text);
}
.account-popup a:hover { background: var(--surface-2); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; margin-left: var(--pasek-szer); }
/* Plywajaca kafelka sekcji - czysty granat spojny z paskiem bocznym, delikatny
   szklany polysk i cienka pomaranczowa kreska u dolu (bez wzorow/figur). */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 12px; z-index: 5;
  margin: 12px 22px 0; padding: .55rem 1.1rem;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(120deg, var(--navy) 0%, #1e293b 55%, var(--navy) 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, .12),
    0 14px 28px rgba(2, 8, 23, .35);
  /* UWAGA: NIE promuj tego paska transformem ani `will-change` (probowane
     08.09.2026). Lista podpowiedzi „Skocz do" jest `fixed` i siedzi W SRODKU
     paska - transform zrobilby z paska jej uklad odniesienia, a skrypt liczy
     jej polozenie wzgledem OKNA i lista wyladowalaby w zlym miejscu. */
}
/* Pojedynczy, delikatny "szklany" polysk po przekatnej - bez wzoru, bez halasu. */
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .09) 48%, transparent 64%);
}
/* Delikatny watermark logo Waterm w kafelce - widoczny, ale przygaszony. */
.topbar::after {
  content: ""; position: absolute; right: 1.4rem; top: 50%; transform: translateY(-50%);
  width: 110px; height: 28px; z-index: 1;
  background: url("waterm-logo.png") right center / contain no-repeat;
  opacity: .22; pointer-events: none;
}
.topbar-accent {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--brand-light), var(--brand), var(--brand-light));
}
.page-title {
  font-weight: 600; font-size: var(--fs-base); letter-spacing: .01em; color: #fff;
  position: relative; z-index: 3;
}
/* Pasek wyszukiwania w topbarze - na razie samo UI, przygotowane pod przyszle dane. */
.topbar-search {
  display: flex; align-items: center; gap: .5rem;
  position: relative; z-index: 3;
  flex: 0 1 230px; min-width: 0;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px; padding: .32rem .75rem; margin: 0 1rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.topbar-search svg { width: 13px; height: 13px; color: rgba(255, 255, 255, .75); flex-shrink: 0; }
.topbar-search input {
  background: transparent; border: 0; outline: 0; width: 100%;
  color: #fff; font-size: var(--fs-base); font-family: inherit;
}
.topbar-search input::placeholder { color: rgba(255, 255, 255, .55); }
.topbar-search:focus-within {
  background: rgba(255, 255, 255, .2); border-color: var(--ai);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .18);
}
@media (max-width: 860px) { .topbar-search { display: none; } }
.user-box { display: flex; align-items: center; gap: .7rem; }
.user-name { font-weight: 600; font-size: var(--fs-md); }
.role-pill { font-size: var(--fs-sm); font-weight: 700; padding: .12rem .5rem; border-radius: 999px; }
.role-admin { background: var(--ai-bg); color: var(--ai-tx); }
.role-emp   { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
/* Superadministrator = konto INPI: wszystko co administrator + czesc wydzielona. */
.role-super { background: rgba(224, 122, 95, .16); color: #b8552f;
              border: 1px solid rgba(224, 122, 95, .35); }
.btn-logout {
  font-size: var(--fs-base); font-weight: 600; padding: .3rem .6rem;
  border: 1px solid var(--border); border-radius: 7px; color: var(--muted);
}
.btn-logout:hover { background: var(--surface-2); color: var(--text); }

/* `width: 100%` wyglada na zbedne przy `margin: 0 auto`, ale nie jest.
   `.main` to kontener flex w pionie, a element z automatycznymi marginesami
   NIE rozciaga sie w poprzek - dostaje szerokosc swojej tresci. Na laptopie
   nie bylo tego widac (max-width i tak przycinal), ale na telefonie szeroka
   tabela rozpychala `.content` ponad szerokosc ekranu i cala strona jechala
   w bok, zamiast przewijac sie w swoim pudelku. */
.content { padding: 1.6rem 1.5rem; max-width: 1120px; width: 100%; min-width: 0; margin: 0 auto; }

/* Tylko na pulpicie: .content traci wlasny max-width/padding poziomy - cala
   tresc (hero, panele, karty, pasy zdjec) rozciaga sie od lewej do prawej
   krawedzi strony (od sidebaru po prawy brzeg okna), bez wysrodkowania w
   waskiej kolumnie. Inne strony (konto, moduly, ustawienia, co nowego)
   korzystaja z domyslnej, wysrodkowanej reguly .content powyzej. */
.dashboard-page .content { padding: 1.6rem 0; max-width: none; margin: 0; }
/* Ofertowanie: prostokat (hero-section) ma siegac tak daleko jak pasek
   topbar, nie stac wysrodkowany w waskiej kolumnie - to samo zdjecie
   marginesu (22px) co ma topbar, zeby krawedzie dokladnie sie pokrywaly. */
.ofertowanie-page .content { padding: 1.6rem 22px; max-width: none; margin: 0; }
/* Te same marginesy dla pozostalych ekranow zbudowanych na hero: tresc ma
   siegac tak samo daleko jak pasek u gory, a nie stac w waskiej kolumnie
   z pustka po bokach. */
.konto-page .content,
.ustawienia-page .content,
.system-page .content,
.opieka-page .content,
.aktywnosc-page .content,
/* Tablica zadan idzie przez cala szerokosc ekranu: trzy kartki w rzedzie
   potrzebuja miejsca, a wysrodkowana kolumna 1120px zostawiala po bokach
   pustke szersza niz sama kartka. */
.zadania-page .content,
.changelog-page .content { padding: 1.6rem 22px; max-width: none; margin: 0; }
.dashboard-page .hero-section,
.dashboard-page .dash-section {
  /* margin (nie padding!) = dokladnie tyle, ile .topbar ma margin-left/right -
     dzieki temu cale pudelka (hero, panele) zaczynaja/koncza sie w tym samym
     miejscu co pasek "Pulpit" nad nimi, a nie tylko tekst w ich srodku. */
  margin-left: 22px; margin-right: 22px;
}

/* Podzial na strony jak u wozkowni: szersza lewa (listy) i wezsza prawa
   (wykres, szybkie akcje). */
/* 1.5fr / 1fr zamiast 2.1fr / 1fr: po przeniesieniu Szybkiej notatki pod
   obie kolumny zostal tu jeden panel po lewej i jeden po prawej, wiec skos
   szerokosci rzucal sie w oczy. Prawa kolumna nadal jest wezsza - slupki
   statystyk nie potrzebuja tyle miejsca, co lista klientow do obdzwonienia -
   ale roznica przestala wygladac na przypadkowa. */
.dash-columns { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.2rem; align-items: start; }
/* Notatka zamyka ekran wlasnym pasem na cala szerokosc - pole nie musi byc
   przez to wyzsze, bo zyskalo poziomo. */
.dash-notatka .quick-note { min-height: 92px; }
.dash-col { min-width: 0; }
/* Wezsza prawa kolumna - "chudsze" panele: mniejsze wypelnienia i wizual. */
.dash-col:last-child .report-panel,
.dash-col:last-child .module-panel { padding: .85rem 1rem; }
.dash-col:last-child .overview-visual { min-height: 110px; }
.dash-col:last-child .overview-visual svg { width: 68px; height: 68px; }
.dash-col:last-child .overview-features { padding: .9rem 1rem; gap: .7rem; }
@media (max-width: 860px) { .dash-columns { grid-template-columns: 1fr; } }

/* NAGLOWKI - jeden punkt odniesienia dla calej aplikacji.
   Wczesniej nie bylo zadnej reguly na h1-h6, wiec naglowek bez wlasnej klasy
   spadal na domyslke przegladarki (h1 = 2em) i wypadal ze skali reszty strony.
   Naglowki sa grubsze od tekstu z zalozenia - stad 700/800, gdy zwykly tekst
   ma wage domyslna. Konkretne klasy stron moga nadpisac rozmiar, ale startuja
   z tego samego miejsca. */
h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: var(--fs-xl); font-weight: 800; }
h2 { font-size: var(--fs-lg); font-weight: 800; }
h3 { font-size: var(--fs-md); font-weight: 700; }
h4, h5, h6 { font-size: var(--fs-base); font-weight: 700; }
.mono-num { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

/* Wejscie na pulpit - sekcje pojawiaja sie kaskadowo z gory na dol, a kafle w ich
   srodku (moduly, funkcje, statystyki) dostaja dodatkowy mikro-offset, wiec calosc
   "wchodzi" plynnie zamiast wyskakiwac naraz. --reveal-delay ustawiany inline na
   kazdej sekcji, dziedziczony przez dzieci. Wylaczane przy prefers-reduced-motion. */
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  animation: reveal-in .85s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--reveal-delay, 0) * 150ms);
}
.module-row .module-tile,
.overview-features .overview-feature,
.stat-card-row .stat-card {
  animation: reveal-in .7s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--reveal-delay, 0) * 150ms + 130ms);
}
.module-row .module-tile:nth-child(2),
.overview-features .overview-feature:nth-child(2),
.stat-card-row .stat-card:nth-child(2) { animation-delay: calc(var(--reveal-delay, 0) * 150ms + 220ms); }
.module-row .module-tile:nth-child(3),
.overview-features .overview-feature:nth-child(3),
.stat-card-row .stat-card:nth-child(3) { animation-delay: calc(var(--reveal-delay, 0) * 150ms + 310ms); }
.module-row .module-tile:nth-child(4),
.overview-features .overview-feature:nth-child(4),
.stat-card-row .stat-card:nth-child(4) { animation-delay: calc(var(--reveal-delay, 0) * 150ms + 400ms); }
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .module-row .module-tile,
  .overview-features .overview-feature,
  .stat-card-row .stat-card {
    animation: none; opacity: 1;
  }
}

/* Wejscie na KAZDA zakladke - to samo, co robi pulpit, tylko nadawane z
   shell.html na sekcje strony, zeby nie trzeba bylo dopisywac klasy w kazdym
   szablonie. Krotsze i gestsze niz na pulpicie: tam wchodzi kilka kafli,
   tu bywa i kilkanascie tabel. Klasa jest zdejmowana po animacji (skrypt
   w shell.html) - inaczej `transform` na kontenerze psuje pozycjonowanie
   okien na srodku ekranu. */
.wejscie {
  animation: reveal-in .5s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--wejscie-delay, 0) * 70ms);
}

/* Plynne dojechanie do sekcji zamiast skoku (np. "Pokaż towary" -> "Towary
   na stanie"). scroll-padding-top odsuwa cel spod plywajacego paska. */
html { scroll-behavior: smooth; scroll-padding-top: 86px; }

/* Podswietlenie sekcji, do ktorej wlasnie zjechalismy - inaczej po dlugim
   przewinieciu nie widac, ktora czesc strony byla celem. JEDNO plynne
   podswietlenie na 3 sekundy - bez pulsowania: poprzednia wersja migala
   trzema falami jasnosci, co przy czestym uzyciu (np. kazde "Pokaz towary"
   w Magazynie) zaczelo razic. Teraz: szybkie pojawienie sie, spokojny
   postoj, plynne zniknieciem. */
.cel-skoku {
  animation: cel-blysk 1.5s cubic-bezier(.4, 0, .2, 1) both;
  border-radius: 12px; position: relative; z-index: 1;
}
@keyframes cel-blysk {
  0%   { box-shadow: 0 0 0 0 rgba(238, 110, 27, 0), 0 0 0 rgba(238, 110, 27, 0); }
  8%   { box-shadow: 0 0 0 3px rgba(238, 110, 27, .5), 0 0 20px rgba(238, 110, 27, .28); }
  78%  { box-shadow: 0 0 0 3px rgba(238, 110, 27, .5), 0 0 20px rgba(238, 110, 27, .28); }
  100% { box-shadow: 0 0 0 0 rgba(238, 110, 27, 0), 0 0 0 rgba(238, 110, 27, 0); }
}

/* Wiersz tabeli nie przyjmuje cienia (border-collapse zjada box-shadow),
   wiec cel skoku pokazujemy tlem komorek - tak samo widac, ktory wiersz
   byl szukany. Ten sam ksztalt: jedno plynne podswietlenie, bez pulsowania. */
tr.cel-skoku { animation: none; }
tr.cel-skoku > td { animation: cel-blysk-wiersz 1.5s ease-out both; }
@keyframes cel-blysk-wiersz {
  0%   { background: rgba(238, 110, 27, 0); }
  8%   { background: rgba(238, 110, 27, .3); }
  78%  { background: rgba(238, 110, 27, .3); }
  100% { background: transparent; }
}
tr.cel-skoku > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wejscie { animation: none; opacity: 1; }
  .cel-skoku, tr.cel-skoku > td { animation: none; }
}

/* Sekcja "hero" pulpitu - skrocona do minimum: eyebrow z zegarem/dniem + skroty
   po prawej, oraz rzad skroconych statystyk. Bez powitania/tekstu - mniej
   wysokosci. Dwie dekoracje ("smaczki"): miekka poswiata w rogu + przygaszony
   znak wodny ikony pieca (nawiazanie do HVAC), obie za trescia (z-index: 0). */
.hero-section {
  position: relative; overflow: hidden;
  background-image: linear-gradient(135deg, var(--navy), #1e293b);
  color: #fff; border-radius: 14px; padding: 1rem 1.25rem .6rem; margin-bottom: 1.6rem;
  box-shadow: var(--shadow);
}
.hero-glow {
  position: absolute; top: -60%; right: -8%; width: 55%; height: 220%; z-index: 0;
  background: radial-gradient(circle, rgba(238, 110, 27, .28), transparent 70%);
  pointer-events: none;
  animation: hero-glow-pulse 6s ease-in-out infinite;
}
@keyframes hero-glow-pulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-glow { animation: none; } }
/* Poswiata pulsuje bez konca, wiec przegladarka odmalowuje ten rog nawet
   wtedy, gdy naglowek dawno zjechal z ekranu. Przy dlugich listach to jest
   darmowa praca w tle - zatrzymujemy ja, gdy naglowka nie widac. */
.hero-section { view-timeline-name: --hero; }
@supports (animation-timeline: view()) {
  .hero-glow { animation-timeline: view(); animation-range: entry 0% exit 100%; }
}
/* Piec w CALOSCI widoczny, wysrodkowany pionowo przy prawej krawedzi. */
.hero-watermark {
  position: absolute; right: 1.8rem; top: 50%; transform: translateY(-50%);
  z-index: 0; pointer-events: none;
  width: 96px; height: 96px; color: rgba(255, 255, 255, .12);
}
.hero-watermark svg { width: 100%; height: 100%; }
/* Siatka kropek + wolno plynacy ukosny "skan" swiatla - futurystyczny akcent
   nawiazujacy do interfejsow AI, pod trescia (z-index: 0). */
/* WYDAJNOSC (08.09.2026): wzor i „skan" to teraz DWIE warstwy, bo tylko jedna
   z nich sie rusza. Wczesniej byl jeden element z dwoma tlami i animowanym
   `background-position` - a przesuwanie tla to za kazda klatka PRZEMALOWANIE
   calego naglowka razem z maska, i to bez konca, na kazdej stronie aplikacji.
   Stad scinanie przy przewijaniu: przegladarka malowala naglowek 60 razy na
   sekunde niezaleznie od tego, co robil czlowiek.
   Teraz kropki stoja (samo tlo, malowane raz), a swiatlo jedzie `transform`
   na osobnej warstwie - to robi uklad skladajacy obraz, bez przemalowania.
   Do tego animacja chodzi tylko wtedy, gdy naglowek jest na ekranie. */
.hero-ai-pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, .9) 0%, transparent 72%);
          mask-image: linear-gradient(135deg, rgba(0, 0, 0, .9) 0%, transparent 72%);
}
.hero-ai-pattern::after {
  content: ""; position: absolute; top: -80%; left: -80%; width: 260%; height: 260%;
  background-image:
    linear-gradient(115deg, transparent 42%, rgba(238, 110, 27, .12) 50%, transparent 58%);
  will-change: transform;
  animation: hero-scan 10s linear infinite;
}
@keyframes hero-scan {
  0%   { transform: translate3d(-30%, -30%, 0); }
  100% { transform: translate3d(30%, 30%, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero-ai-pattern::after { animation: none; } }
/* Bez `animation-timeline: view()` - przy poswiacie to dziala, bo tam ruch
   ma byc ledwo widoczny, ale skan przypiety do przewijania stalby w miejscu,
   dopoki ktos nie rusza kolkiem. Animacja transformu poza ekranem i tak nie
   kosztuje przemalowania, wiec nie ma czego wylaczac. */
.hero-info-row {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem;
  margin-top: .15rem;
}
.hero-info-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-chip {
  display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); font-weight: 600;
  color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: .28rem .65rem;
}
a.hero-chip:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.hero-chip-ico { width: 13px; height: 13px; display: inline-flex; }
.hero-chip-ico svg { width: 100%; height: 100%; }
.hero-brand-row {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: .1rem 0 .2rem;
}
/* WATERM z piecem w plytce PRZED napisem (jak w Ofertowaniu) i malym
   opisem pod tytulem (oferty-hero-sub). */
.hero-brand-big {
  display: block; font-size: var(--fs-hero); font-weight: 800; color: #fff;
  letter-spacing: .03em; line-height: 1.15;
}
.hero-top {
  position: relative; z-index: 1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .6) !important; text-transform: uppercase; letter-spacing: .06em;
  margin: 0 !important;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--live); flex-shrink: 0;
  animation: live-pulse 2.2s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  70%  { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-hero {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: var(--fs-base); padding: .5rem 1rem; border-radius: 8px;
  background: var(--brand); color: #fff; white-space: nowrap;
}
.btn-hero svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn-hero:hover { filter: brightness(.95); }
.btn-hero-ghost {
  background: transparent; color: var(--brand-light); border: 1px solid var(--brand);
}
.btn-hero-ghost:hover { background: rgba(238, 110, 27, .15); }

/* Spojne wyroznienie przy najechaniu - przyciski, chipy i karty lekko
   sie powiekszaja (poza kaflami modulow/ikona pieca, ktore maja wlasny,
   bardziej rozbudowany efekt zdefiniowany osobno). */
.btn-hero,
.hero-chip,
.stat-card {
  transition: transform .15s ease, filter .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-hero:hover,
.hero-chip:hover,
.stat-card:hover { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .btn-hero:hover, .hero-chip:hover, .stat-card:hover { transform: none; }
}

/* Rzad ikon-statystyk w prostokacie hero (jak u wozkowni): mala plytka
   z pomaranczowa ikona + liczba + przygaszony podpis, oddzielone cienka
   linia od tresci powyzej. */
.hero-stat-row {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem;
  margin-top: .8rem; padding-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero-stat { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.hero-stat-ico {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  color: var(--brand-light); display: grid; place-items: center;
}
.hero-stat-ico svg { width: 17px; height: 17px; }
.hero-stat-value { font-size: var(--fs-md); font-weight: 800; color: #fff; line-height: 1.15; }
.hero-stat-label { font-size: var(--fs-micro); color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .hero-stat-row { grid-template-columns: repeat(2, 1fr); } }

.dash-section { margin-bottom: 1.6rem; }
.dash-section-title {
  display: inline-block;
  font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #fff; margin: 0 0 .9rem;
  border: 1px solid var(--navy); border-radius: 999px;
  background: linear-gradient(135deg, var(--navy), #1e293b); padding: .38rem 1rem;
  box-shadow: 0 4px 10px -4px rgba(15, 23, 42, .5);
}
/* Naglowek-pigulka siedzi WEWNATRZ obramowanego panelu sekcji (module-panel /
   report-panel), jako pierwszy element - nie nad panelem. */
.module-panel > .dash-section-title,
.report-panel > .dash-section-title { position: relative; z-index: 1; margin-bottom: .9rem; }
/* Panele ulozone jeden pod drugim w kolumnie pulpitu - staly odstep. */
.dash-col > * + * { margin-top: 1.3rem; }
/* "O systemie" wewnatrz panelu z naglowkiem - bez wlasnej, drugiej ramki. */
.module-panel .overview { border: 0; border-radius: 12px; position: relative; z-index: 1; }

/* "O systemie" - jedno zdjecie + lista funkcji obok, zamiast trzech osobnych
   kolorowych bannerow przerywajacych uklad. Tresc (wszystkie 3 opisy) bez zmian. */
/* W waskiej prawej kolumnie: wizual na gorze, funkcje pod spodem. */
.overview {
  display: grid; grid-template-columns: 1fr;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden;
}
.overview-visual {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--navy), #1e293b); min-height: 150px; padding: 1rem;
}
.overview-visual svg { position: relative; z-index: 1; width: 90px; height: 90px; }
/* Siatka "schematu" zamiast kropek - lepiej pasuje do grafiki wezlow/polaczen. */
.overview-pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .85) 0%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .85) 0%, transparent 75%);
}
.overview-features { display: flex; flex-direction: column; justify-content: center; gap: .85rem; padding: 1.1rem 1.3rem; }
.overview-feature { display: flex; gap: .8rem; align-items: flex-start; }
.overview-feature-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--surface-2); color: var(--brand); display: grid; place-items: center;
}
.overview-feature-ico svg { width: 15px; height: 15px; }
.overview-feature h3 { margin: 0 0 .2rem; font-size: var(--fs-base); color: var(--text); }
.overview-feature p { margin: 0; font-size: var(--fs-base); color: var(--muted); line-height: 1.5; }
@media (max-width: 720px) {
  .overview { grid-template-columns: 1fr; }
  .overview-visual { min-height: 140px; }
}

/* Wszystkie grupy zakladek w jednym panelu (zamiast 3 osobnych sekcji, zeby nie
   zajmowaly za duzo miejsca) - male etykiety grup do rozroznienia, cienki
   podzial miedzy nimi. Kolorowe kola-ikony, kazdy modul wlasny odcien z ustalonej
   palety (mc-a..h), plakietka "admin" zostaje jedynym tekstowym sygnalem dostepu. */
.module-panel {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1rem 1.2rem;
}
/* Bez naglowka i plakietek "admin" - niski pasek, tylko ikony + nazwy. */
.module-panel-tight { padding-top: .55rem; padding-bottom: .55rem; }
/* Ta sama "rodzina" wzorow co siatka kropek w prostokacie/O systemie (nie
   osobny motyw HVAC) - kropki + delikatny akcent marki, zeby pasowalo do
   reszty strony. */
.module-panel-pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(15, 23, 42, .1) 1px, transparent 1.4px),
    radial-gradient(circle at 100% 0%, rgba(238, 110, 27, .1), transparent 60%);
  background-size: 24px 24px, 100% 100%;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, rgba(0, 0, 0, .9) 0%, transparent 65%);
          mask-image: radial-gradient(ellipse at 100% 0%, rgba(0, 0, 0, .9) 0%, transparent 65%);
}
/* Jeden rzad kafli rozlozony na cala szerokosc paska (space-between) - jesli
   nie miesci sie w szerokosci, przewija sie w poziomie. Duza ikona z biala
   obwodka na gorze, nazwa wysrodkowana pod spodem. */
.module-row {
  display: flex; flex-wrap: nowrap; justify-content: space-between; overflow-x: auto; gap: 1rem;
  /* WYDAJNOSC (08.09.2026): pasek ikon jezdzi w poziomie NAD wzorem panelu
     (kropki + maska). Bez tych trzech linii kazde przesuniecie paska kazalo
     przemalowac takze wzor pod nim - stad scinanie ekranu przy przewijaniu
     skrotow. `contain` mowi przegladarce, ze zmiany w srodku nie wychodza
     poza pasek, `translateZ(0)` daje mu wlasna warstwe, a `overscroll-behavior`
     nie pozwala, zeby dojechanie do konca paska zaczelo przewijac strone. */
  contain: paint;
  transform: translateZ(0);
  overscroll-behavior-x: contain;
}
.module-tile {
  display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center;
  flex: 0 0 auto; width: 106px; padding: .3rem .3rem;
}
.module-tile-ico {
  width: 74px; height: 74px; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(2, 8, 23, .07), 0 8px 16px -7px rgba(2, 8, 23, .4);
  transition: transform .15s ease, box-shadow .15s ease;
}
.module-tile-ico svg { width: 31px; height: 31px; }
.module-tile:hover .module-tile-ico { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 1px rgba(2, 8, 23, .07), 0 12px 20px -7px rgba(2, 8, 23, .48); }
.module-tile-text { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 0; }
.module-tile-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.mc-a { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); }
.mc-b { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.mc-c { background: linear-gradient(135deg, #10b981, #059669); }
.mc-d { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.mc-e { background: linear-gradient(135deg, #ec4899, #db2777); }
.mc-f { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.mc-g { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.mc-h { background: linear-gradient(135deg, #64748b, #475569); }
/* Dalsza czesc palety (mc-i..mc-x). Zakladek jest ponad dwadziescia, a osiem
   odcieni musialo sie po drodze powtarzac - dwa sasiednie kola wychodzily
   w tym samym kolorze i pasek skrotow czytal sie jak jedna plama. Kolejne
   odcienie sa dobrane tak, zeby skakac po kole barw, a nie isc odcien po
   odcieniu; przypisanie koloru do zakladki siedzi w `main.KOLORY_ZAKLADEK`. */
.mc-i { background: linear-gradient(135deg, #f59e0b, #d97706); }
.mc-j { background: linear-gradient(135deg, #ef4444, #dc2626); }
.mc-k { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.mc-l { background: linear-gradient(135deg, #84cc16, #4d7c0f); }
.mc-m { background: linear-gradient(135deg, #a855f7, #7e22ce); }
.mc-n { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.mc-o { background: linear-gradient(135deg, #d946ef, #a21caf); }
.mc-p { background: linear-gradient(135deg, #22c55e, #15803d); }
.mc-q { background: linear-gradient(135deg, #fb7185, #e11d48); }
.mc-r { background: linear-gradient(135deg, #be123c, #881337); }
.mc-s { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
.mc-t { background: linear-gradient(135deg, #818cf8, #4338ca); }
.mc-u { background: linear-gradient(135deg, #b45309, #78350f); }
.mc-v { background: linear-gradient(135deg, #65a30d, #365314); }
.mc-w { background: linear-gradient(135deg, #9333ea, #581c87); }
.mc-x { background: linear-gradient(135deg, #475569, #1e293b); }

/* Kafelki KPI - bez ramki-panelu wokol: wieksze, polprzezroczysty kolorowy
   gradient nad zdjeciem firmy, kazdy kafel INNY kadr zdjecia i kat gradientu. */
.stat-card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; margin-bottom: .6rem; }
.stat-card {
  position: relative; overflow: hidden; border-radius: 13px; padding: .95rem 1.05rem;
  color: #fff; box-shadow: var(--shadow); min-height: 112px;
  background-image: linear-gradient(135deg, rgba(238, 110, 27, .9), rgba(200, 86, 16, .88)), url("waterm-bg.jpg");
  background-size: cover; background-position: center 20%;
}
.stat-card:nth-child(2) {
  background-image: linear-gradient(160deg, rgba(16, 185, 129, .9), rgba(5, 150, 105, .88)), url("waterm-bg.jpg");
  background-position: left 65%;
}
.stat-card:nth-child(3) {
  background-image: linear-gradient(115deg, rgba(139, 92, 246, .9), rgba(124, 58, 237, .88)), url("waterm-bg.jpg");
  background-position: right 35%;
}
.stat-card:nth-child(4) {
  background-image: linear-gradient(200deg, rgba(59, 130, 246, .9), rgba(37, 99, 235, .88)), url("waterm-bg.jpg");
  background-position: center 80%;
}
.stat-card-label { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(255, 255, 255, .78); }
.stat-card-value { font-size: var(--fs-xl); font-weight: 800; margin-top: .3rem; color: #fff; }
/* BEZ `backdrop-filter` (wydajnosc, 08.09.2026) - ta sama zasada, co przy
   oknie karty pojazdu nizej: rozmycie tla kaze przegladarce liczyc rozmycie
   spod KAZDEGO takiego kolka przy kazdej klatce przewijania, a kolek bywa na
   ekranie po kilka naraz (rzedy kafli statystyk). Na kolorowym kafelku efektu
   i tak nie widac - zostaje samo pojasnione tlo, ktore nic nie kosztuje. */
.stat-card-ico {
  position: absolute; top: .8rem; right: .8rem; width: 26px; height: 26px;
  border-radius: 999px; background: rgba(255, 255, 255, .22);
  display: grid; place-items: center; color: #fff;
}
.stat-card-ico svg { width: 13px; height: 13px; }
.stat-note { font-size: var(--fs-base); color: var(--muted); margin: 0 0 1.8rem; }

.report-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 1.15rem 1.3rem; }
.report-panel h3 { margin: 0 0 .2rem; font-size: var(--fs-md); }
.report-panel .muted { display: block; margin-bottom: .9rem; }
/* Wykres "Wystawione oferty" - slupki miesieczne (jak u wozkowni): wartosc
   nad slupkiem, miesiac pod nim, biezacy miesiac pomaranczowy. */
.report-panel-chart { padding-bottom: 1.1rem; }
.report-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.chart-legend {
  display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: .3rem .7rem; white-space: nowrap;
}
.chart-legend-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--brand); flex-shrink: 0; }
/* Kazdy slupek to prostokat z przygaszonym "duchem" pieca w srodku
   (odpowiednik wozka widlowego na kaflach wozkowni). */
.bar-chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7rem; height: 200px; margin: .8rem 0 .5rem; }
.bar-col { display: flex; flex-direction: column; align-items: center; gap: .45rem; min-width: 0; }
.bar-val { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); line-height: 1; }
.bar-rect {
  position: relative; overflow: hidden; width: 100%; flex: 1; border-radius: 8px;
  background: linear-gradient(180deg, var(--surface-2), var(--bg));
  border: 1px solid var(--border);
  transition: border-color .15s ease;
}
.bar-rect:hover { border-color: var(--brand); }
/* Slupki w pelnym ekranie "wyrastaja" od dolu z lekkim opoznieniem kazdy. */
.chart-modal .bar-rect {
  animation: bar-grow .45s cubic-bezier(.22, 1, .36, 1) both;
  transform-origin: bottom;
}
@keyframes bar-grow { from { transform: scaleY(.08); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chart-modal .bar-rect { animation: none; } }
.bar-rect svg {
  position: absolute; left: 50%; bottom: .4rem; transform: translateX(-50%);
  width: 32px; height: 32px; color: var(--muted); opacity: .25;
}
.bar-rect-active {
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
  border-color: transparent;
}
.bar-rect-active svg { color: #fff; opacity: .4; }
.bar-month { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }

/* Przycisk podgladu (palec) obok legendy wykresu - wiekszy, pomaranczowy. */
.report-panel-tools { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
.chart-nav {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted); cursor: pointer; flex-shrink: 0;
  display: grid; place-items: center;
  transition: color .15s ease, border-color .15s ease;
}
.chart-nav:hover { color: var(--brand); border-color: var(--brand); }
.chart-nav svg { width: 14px; height: 14px; }
.chart-expand {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  border: 1px solid rgba(238, 110, 27, .4); background: rgba(238, 110, 27, .1);
  color: var(--brand); cursor: pointer; display: grid; place-items: center;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.chart-expand:hover {
  transform: scale(1.08); background: rgba(238, 110, 27, .18);
  box-shadow: 0 6px 14px -6px rgba(238, 110, 27, .55);
}
.chart-expand svg { width: 21px; height: 21px; }
@media (prefers-reduced-motion: reduce) { .chart-expand:hover { transform: none; } }

/* Przycisk "Dzis" - powrot do biezacego okresu. */
.chart-today {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: var(--fs-sm); font-weight: 700; padding: .34rem .75rem; border-radius: 999px;
  cursor: pointer; font-family: inherit;
  transition: color .15s ease, border-color .15s ease;
}
.chart-today:hover { color: var(--brand); border-color: var(--brand); }

/* Pasek statystyk wybranego okresu (wartosci ruszaja razem z danymi). */
.chart-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: 1rem;
}
.chart-stat {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: .55rem .75rem; display: flex; flex-direction: column; gap: .15rem;
}
.chart-stat-label {
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.chart-stat-value { font-size: var(--fs-lg); font-weight: 800; color: var(--text); }
@media (max-width: 640px) { .chart-stats { grid-template-columns: repeat(2, 1fr); } }

/* Pelnoekranowy widok wykresu: przyciemnione tlo, karta na caly ekran,
   pasek wyboru okresu (strzalki + Rok/Miesiac) u gory. */
.chart-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(2, 6, 23, .6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.chart-modal[hidden] { display: none; }
/* Okno, nie caly ekran: podglad ma pokazac wiecej niz kafel na stronie, ale
   nadal byc okienkiem "na wierzchu" - stad ok. 70% widoku zamiast rozpychania
   sie do krawedzi. */
.chart-modal-box {
  width: min(70vw, 1180px); max-width: 100%;
  height: min(72vh, 780px); min-width: 0;
  display: flex; flex-direction: column; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.1rem 1.4rem; box-shadow: var(--shadow);
}
@media (max-width: 900px) {
  .chart-modal-box { width: 100%; height: 88vh; }
}
.chart-modal-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.chart-modal-bar h3 { margin: 0 0 .15rem; font-size: var(--fs-lg); }
.chart-modal-controls { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.chart-nav-prev svg { transform: rotate(180deg); }
.chart-period { min-width: 92px; text-align: center; font-weight: 700; font-size: var(--fs-base); }
.chart-mode {
  display: inline-flex; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px;
}
.chart-mode-btn {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 700; padding: .3rem .8rem; border-radius: 999px;
  font-family: inherit;
}
.chart-mode-btn.is-active { background: var(--brand); color: #fff; }
.chart-modal-close { margin-left: .5rem; }
.chart-modal-chart { flex: 1; height: auto; margin: 0 0 .6rem; }
/* Podpowiedz na slupkach (jak na wykresach krypto): tytul okresu + wiersze
   z kolorowa kropka, etykieta i wartoscia. Podaza za kursorem. */
.chart-tooltip {
  position: fixed; z-index: 120; pointer-events: none; min-width: 168px;
  background: var(--navy); color: #fff;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
  padding: .6rem .75rem; box-shadow: 0 14px 30px rgba(2, 6, 23, .5);
  font-size: var(--fs-sm);
}
.chart-tooltip[hidden] { display: none; }
.chart-tooltip-title {
  font-size: var(--fs-sm); font-weight: 800; margin-bottom: .45rem;
  padding-bottom: .35rem; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.chart-tooltip-row { display: flex; align-items: center; gap: .45rem; margin-top: .28rem; }
.chart-tooltip-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.chart-tooltip-label { color: rgba(255, 255, 255, .75); }
.chart-tooltip-value { margin-left: auto; font-weight: 700; }

/* Tryb "dni miesiaca" (31 slupkow): ciasniej, bez duchow pieca i kresek nad
   slupkami, mniejsze podpisy. */
.bar-chart-dense { gap: .3rem; }
.bar-chart-dense .bar-rect svg { display: none; }
.bar-chart-dense .bar-val { display: none; }
.bar-chart-dense .bar-month { font-size: var(--fs-micro); font-weight: 600; }

/* Szybki dobor mocy - unikatowy dla Waterm kalkulator wskaznikowy:
   metraz x W/m2 (ocieplenie) x wysokosc x strefa klimatyczna + c.w.u. */
.calc-lead { display: block; margin: 0 0 .8rem; }
.calc-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem .9rem; }
@media (max-width: 720px) { .calc-fields { grid-template-columns: 1fr 1fr; } }
.calc-field label {
  display: block; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); margin-bottom: .3rem;
}
.calc-field input, .calc-field select {
  width: 100%; padding: .5rem .65rem; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-base); font-family: inherit;
}
.calc-field input:focus, .calc-field select:focus {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
.calc-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: .9rem; }
@media (max-width: 720px) { .calc-results { grid-template-columns: 1fr 1fr; } }
.calc-tile {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: .55rem .7rem; display: flex; flex-direction: column; gap: .2rem;
}
.calc-tile-label {
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.calc-tile-value { font-size: var(--fs-md); font-weight: 800; color: var(--text); white-space: nowrap; }
.calc-tile-main {
  background: linear-gradient(135deg, var(--navy), #1e293b); border-color: transparent;
}
.calc-tile-main .calc-tile-label { color: rgba(255, 255, 255, .65); }
.calc-tile-main .calc-tile-value { color: #fff; }
.calc-note { font-size: var(--fs-sm); color: var(--muted); margin: .6rem 0 0; }
.report-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; padding: 1.2rem 1rem; color: var(--muted); }
.report-empty-ico { width: 30px; height: 30px; color: var(--muted); }
.report-empty-ico svg { width: 100%; height: 100%; }

.report-note { font-size: var(--fs-base); color: var(--muted); margin: 0; }

/* Mala plytka z ikona przy pozycjach listy (np. zalaczniki inwestycji). */
.report-preview-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--surface-2); color: var(--brand); display: grid; place-items: center;
}
.report-preview-ico svg { width: 15px; height: 15px; }

/* "Ostatnie oferty" / "Zadzwon dzis" - prawdziwe listy wierszy: ikona w kole,
   dwie linie tekstu, wartosc po prawej. Do czasu danych wiersze pokazuja
   "szkielety" (migoczace paski), zeby bylo widac przyszly uklad. */
.list-panel { position: relative; }
.soon-tag {
  position: absolute; top: 1rem; right: 1.1rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: .26rem .6rem;
}
.list-rows { display: flex; flex-direction: column; margin: .8rem 0 .9rem; }
.list-row {
  display: flex; align-items: center; gap: .75rem; padding: .6rem 0;
  border-top: 1px solid var(--border);
}
.list-row:first-child { border-top: 0; padding-top: .2rem; }
.list-row-ico {
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  background: rgba(238, 110, 27, .1); color: var(--brand);
  display: grid; place-items: center;
}
.list-row-ico svg { width: 16px; height: 16px; }
.list-row-ico-red { background: rgba(239, 68, 68, .1); color: #ef4444; }
.list-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .38rem; }
.list-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: .38rem; }
.skeleton {
  display: block; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s linear infinite;
}
.skeleton-title { height: 11px; }
.skeleton-sub { height: 7px; opacity: .75; }
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

@media (max-width: 640px) {
  .hero-top { flex-direction: column; align-items: flex-start; }
}

/* Tabela (panel uzytkownikow) */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.tbl th, .tbl td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--border); font-size: var(--fs-base); vertical-align: middle; }
.tbl th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .03em; }
.tbl tr:last-child td { border-bottom: none; }
/* Pasek akcentu: prawdziwe obramowanie lewej krawedzi karty - dzieki temu
   ZAGINA SIE razem z zaokraglonymi rogami (gora i dol), a nie konczy przed
   nimi. Pomaranczowy dla jasnych sekcji, czarny dla ciemnych paneli. */
.accent-card { border-left: 4px solid var(--brand); }
.accent-card-dark { border-left-color: #020617; }
.accent-card-white { border-left-color: #fff; }
.accent-card-red { border-left-color: #ef4444; }
.muted { color: var(--muted); font-size: var(--fs-base); }
.tablica-zakres {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: -.3rem 0 .9rem; font-size: var(--fs-sm);
}
.tablica-zakres svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: .15rem; }
/* PRZYCISK DZIAŁANIA - jeden wyglad na cala aplikacje.
   Wczesniej byly dwie rodziny robiace to samo: `.btn-akcja` (pelny kolor,
   biale pismo, zaokraglony) na kartach zadan i ofert, oraz `.btn-small`
   (blady obrys, pomaranczowe pismo) wszedzie indziej - w konfiguratorze,
   na karcie zadania, w harmonogramie, przy godzinach. Efekt: „Zmien
   wykonawce" obok „Usun" wygladalo jak napis obok przycisku, a nie jak dwa
   przyciski. Teraz `.btn-small` ma ten sam ksztalt, wysokosc i wage co
   `.btn-akcja`, tylko w wersji spokojnej (granat/stal z motywu).

   WSZYSTKIE kolory ida ze zmiennych motywu - `--pigulka` jest ciemna i w
   jasnym, i w ciemnym motywie, wiec biale pismo ma kontrast w obie strony.
   Wczesniejsze `background: var(--surface)` z pismem `var(--brand)` w ciemnym
   motywie robilo przycisk prawie niewidoczny na tle karty. */
.btn-small {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  height: 30px; padding: 0 .8rem; border-radius: 8px;
  border: 1px solid var(--pigulka-obwodka); background: var(--pigulka); color: #fff;
  font-family: inherit; font-size: var(--fs-base); font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(2, 8, 23, .18);
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn-small:hover { background: var(--pigulka-jasniej); color: #fff;
  box-shadow: 0 3px 8px rgba(2, 8, 23, .22); }
.btn-small:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(2, 8, 23, .18); }
.btn-small:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }
.btn-small[disabled], .btn-small:disabled { opacity: .5; cursor: default; box-shadow: none; }
/* `<summary class="btn-small">` (np. „Zmien wykonawce") to nadal przycisk -
   trojkacik od <details> tylko psulby wyrownanie z sasiadami. */
summary.btn-small { list-style: none; }
summary.btn-small::-webkit-details-marker { display: none; }
summary.btn-small::marker { content: ""; }

/* Naglowek strony (tytul + akcja) - uzywany w modulach z lista/formularzem
   (Ofertowanie i podobne), zamiast osobnego wzoru na kazdej podstronie. */
.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.3rem; }
.page-head h1 { margin: 0 0 .3rem; font-size: var(--fs-lg); }
.page-head p { margin: 0; }

/* Prostokat "Oferty" - ten sam granatowy .hero-section co na pulpicie
   (bez dekoracji specyficznych dla pulpitu - marka/zegar), pelnej szerokosci
   paska tresci: tytul + 3 przyciski w gornym wierszu, 4 kafle statystyk pod spodem. */
.oferty-hero-top {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 1rem; position: relative; z-index: 1; margin: .3rem 0 .1rem;
}
.oferty-hero-brand { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.hero-przyciski-grupa { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.oferty-hero-ico {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff;
  display: grid; place-items: center; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .55);
}
.oferty-hero-ico svg { width: 24px; height: 24px; }
/* Zdjecie pojazdu w hero strony sekcji - ten sam rozmiar co ikona-plakietka,
   zeby uklad naglowka byl identyczny niezaleznie od tego, czy auto ma
   wgrane zdjecie. */
.oferty-hero-foto {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  overflow: hidden; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .25);
}
.oferty-hero-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oferty-hero-title { font-size: var(--fs-xl); font-weight: 800; color: #fff; margin: 0; line-height: 1.15; }
.oferty-hero-sub { font-size: var(--fs-sm); color: rgba(255, 255, 255, .65); }

/* Maly, "pigulkowy" przycisk glownej akcji w hero. */
.btn-hero-sm {
  display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
  font-size: var(--fs-base); font-weight: 700; padding: .45rem .95rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff;
  box-shadow: 0 6px 14px -6px rgba(238, 110, 27, .7);
  transition: transform .15s ease, filter .15s ease;
}
.btn-hero-sm:hover { transform: scale(1.05); filter: brightness(1.06); }
.btn-hero-sm svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) { .btn-hero-sm:hover { transform: none; } }

.btn-add {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-base); font-weight: 700; padding: .48rem .9rem; border-radius: 8px;
  background: var(--brand); color: #fff; white-space: nowrap; border: none; cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btn-add:hover { filter: brightness(.95); transform: scale(1.03); }
.btn-add svg { width: 14px; height: 14px; }

/* Formularze w tresci aplikacji (poza login-page, ktora ma wlasny, ciemny wariant). */
/* `min-width: 0` na polu I na jego owijce - inaczej pole rozpycha kolumne.
   Puste `<input>` ma wlasna szerokosc wewnetrzna (domyslnie ~20 znakow),
   a kolumna siatki ma `min-width: auto`, czyli nie moze zwezic sie ponizej
   tresci pola. Bez tego dluzszy wpisany tekst rozciaga kolumne, a z nia caly
   formularz - to samo, co rozjezdzalo karte konta (zob. `.konto-nowy-form`).
   Samo `width: 100%` tego nie zalatwia: mowi, ile pole ma zajac, a nie jak
   waska moze byc kolumna. */
.field { margin-bottom: 1rem; min-width: 0; }
.field label { display: block; font-size: var(--fs-base); font-weight: 600; margin-bottom: .35rem; color: var(--text); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; padding: .55rem .7rem; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-md); font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 150px; }

/* Plakietki statusu oferty / wariantu - ta sama konwencja co role-pill. */
.status-pill { font-size: var(--fs-sm); font-weight: 700; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }
.status-robocza      { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.status-wyslana      { background: var(--info-bg); color: var(--info-tx); }
.status-w_negocjacji { background: var(--nego-bg); color: var(--nego-tx); border: 1px solid var(--nego-bd); }
.status-wygasla      { background: var(--stal-bg); color: var(--stal-tx); border: 1px dashed var(--stal-bd); }
.status-zaakceptowana{ background: var(--ok-bg); color: var(--ok-tx); border: 1px solid var(--ok-bd); }
.status-odrzucona    { background: var(--danger-bg); color: var(--danger-tx); }
.wariant-pill { font-size: var(--fs-sm); font-weight: 700; padding: .12rem .5rem; border-radius: 999px; background: var(--ai-bg); color: var(--ai-tx); white-space: nowrap; }

.section-block { margin-bottom: 2rem; }
.section-block-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.empty-hint { color: var(--muted); font-size: var(--fs-base); padding: 1rem 0; }

.account-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.account-header h1 { font-size: var(--fs-lg); margin: 0 0 .35rem; }
.avatar-lg { width: 48px; height: 48px; font-size: var(--fs-lg); }
.account-actions { display: flex; gap: .7rem; margin-top: 1.2rem; }

.placeholder { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.placeholder-ico { width: 48px; height: 48px; margin: 0 auto .5rem; color: var(--muted); }
.placeholder-ico svg { width: 100%; height: 100%; }
.placeholder h1 { color: var(--text); margin: .2rem 0 .5rem; }

/* Zakladka "Co nowego" - historia postepu dla klienta, ikona pieca w zaokraglonej
   granatowej plytce + pionowa oś czasu pogrupowana wg dnia. */
.changelog-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.8rem; }
.changelog-hero-ico {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy), #1e293b); color: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow);
}
.changelog-hero-ico svg { width: 24px; height: 24px; }
.changelog-hero h1 { margin: 0 0 .3rem; font-size: var(--fs-lg); }
.changelog-hero p { margin: 0; color: var(--muted); font-size: var(--fs-md); }

.changelog { display: flex; flex-direction: column; gap: 1.1rem; }
.changelog-day {
  position: relative;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 1.2rem 1.4rem;
}
.changelog-date {
  font-size: var(--fs-base); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 0 0 .7rem; display: flex; align-items: center; gap: .5rem;
}
.changelog-latest {
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; color: var(--ai-tx);
  background: var(--ai-bg); border: 1px solid var(--ai-bd); border-radius: 999px; padding: .1rem .5rem;
}
.changelog-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.changelog-list li {
  position: relative; padding-left: 1.2rem; font-size: var(--fs-md); color: var(--text); line-height: 1.5;
}
.changelog-list li::before {
  content: ""; position: absolute; left: 0; top: .55rem; width: 5px; height: 5px;
  border-radius: 999px; background: var(--brand-light);
}

/* Tu byla poprzednia proba widoku na telefonie: pasek boczny scisniety do
   64 px z samymi ikonami. Nie dzialala - nazwa zakladki to w szablonie zwykly
   tekst, a nie <span>, wiec napisy zostawaly i wychodzily poza waski pasek,
   ktory dodatkowo dalej zabieral tresci 64 px z niecalych 400. Zastapiona
   szuflada wysuwana przyciskiem (blok „WIDOK NA TELEFONIE" na koncu pliku).
   Z calego bloku zostaje tylko ustawienie dymka konta, zeby na waskim
   ekranie nie wychodzil poza pasek. */
@media (max-width: 720px) {
  .user-name { display: none; }
}

/* ============================================================
   Sekcja Opieka IT (zakladka /m/opieka_it + /opieka-it/*)
   Dopisane na koncu pliku, na zmiennych z :root — dziala w
   jasnym i ciemnym motywie tak samo jak reszta pulpitu.
   ============================================================ */
:root { --ok-bg:#f0fdf4; --ok-tx:#15803d; --ok-bd:#bbf7d0; }
/* Wariant ciemny MUSI byc podpiety i pod recznie wybrany motyw, i pod
   systemowy. Wczesniej byl tylko pod systemowy, wiec po wybraniu „ciemny"
   w Ustawieniach plakietki „aktywne" czy „polisa aktualna" zostawaly
   jasnozielone i swiecily na ciemnym ekranie. */
:root[data-motyw="ciemny"] { --ok-bg:#0d2418; --ok-tx:#86efac; --ok-bd:#166534; }
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) { --ok-bg:#0d2418; --ok-tx:#86efac; --ok-bd:#166534; }
}
.opieka .lead { color: var(--muted); margin-top: 0; }
.opieka h2 { font-size: var(--fs-lg); margin: 2rem 0 .6rem; padding-bottom: .3rem;
             border-bottom: 1px solid var(--border); }
.opieka h3 { font-size: var(--fs-md); margin: 1.2rem 0 .4rem; color: var(--muted); }
.opieka .karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
                 gap: 1rem; margin: 1.2rem 0; }
.opieka .karta { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
                 padding: 1.1rem; text-decoration: none; color: inherit; display: block;
                 box-shadow: var(--shadow); }
.opieka .karta:hover { border-color: var(--brand); }
.opieka .karta h3 { margin: .2rem 0 .5rem; color: var(--text); font-size: var(--fs-lg); }
.opieka .karta p  { margin: .2rem 0; color: var(--muted); font-size: var(--fs-md); }
.opieka .plakietka { display: inline-block; padding: .1rem .55rem; border-radius: 7px;
                     font-size: var(--fs-base); font-weight: 600; border: 1px solid; }
.opieka .plakietka.ok    { background: var(--ok-bg);     color: var(--ok-tx);     border-color: var(--ok-bd); }
.opieka .plakietka.uwaga { background: var(--warn-bg);   color: var(--warn-tx);   border-color: var(--warn-bd); }
.opieka .plakietka.zle   { background: var(--danger-bg); color: var(--danger-tx); border-color: var(--danger-bd); }
.opieka .plakietka.szary { background: var(--surface-2); color: var(--muted);     border-color: var(--border); }
.opieka table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); margin: .6rem 0;
                background: var(--surface); }
.opieka th, .opieka td { border: 1px solid var(--border); padding: .45rem .65rem;
                         text-align: left; vertical-align: top; }
.opieka th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: var(--fs-base); }
.opieka td.l { font-variant-numeric: tabular-nums; white-space: nowrap; }
.opieka .brak { background: var(--surface-2); border: 1px dashed var(--border); border-radius: 10px;
                padding: 1rem; color: var(--muted); font-size: var(--fs-md); }
.opieka .przewin { overflow-x: auto; }
.opieka code { background: var(--surface-2); border: 1px solid var(--border); padding: .05rem .35rem;
               border-radius: 5px; font-size: var(--fs-sm); }

/* ============================================================
   Kreator nowej oferty - krokowy proces jak w sklepie:
   pasek postepu u gory, jeden krok na ekranie, podsumowanie
   przed utworzeniem. Uzytkownik widzi tylko prostokat
   "Ofertowanie" + pasek + biezacy krok.
   ============================================================ */
.wizard-steps {
  position: relative;
  display: flex; align-items: flex-start;
  max-width: 720px; margin: 0 auto 1.5rem;
}
.wizard-line {
  position: absolute; top: 16px; left: 12.5%; right: 12.5%; height: 3px;
  border-radius: 999px; background: var(--border); z-index: 0;
}
.wizard-line-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark));
  transition: width .35s ease;
}
.wizard-step {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
.wizard-step-dot {
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--border);
  color: var(--muted); font-size: var(--fs-base); font-weight: 800;
  transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.wizard-step-label { font-size: var(--fs-micro); font-weight: 700; color: var(--muted); text-align: center; }
.wizard-step.is-active .wizard-step-dot {
  border-color: var(--brand); color: var(--brand);
  box-shadow: 0 0 0 4px rgba(238, 110, 27, .16);
}
.wizard-step.is-active .wizard-step-label { color: var(--text); }
.wizard-step.is-done .wizard-step-dot { background: var(--brand); border-color: var(--brand); color: #fff; }

.wizard-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.3rem 1.5rem; max-width: 720px; margin: 0 auto;
}
.wizard-pane[hidden] { display: none; }
.wizard-pane-title { margin: 0 0 1rem; font-size: var(--fs-lg); }
.req { color: var(--brand); }
.opt { font-weight: 600; color: var(--muted); font-size: var(--fs-sm); }
.field-hint { font-size: var(--fs-sm); color: var(--muted); margin: .3rem 0 0; }

.wizard-actions {
  display: flex; align-items: center; gap: 1rem;
  max-width: 720px; margin: 1.1rem auto 0;
}
.wizard-actions-spacer { flex: 1; }
/* Przyciski kreatora: jednobarwne, przezroczyste (ghost) z ikonami w tym
   samym kolorze co tekst. */
.btn-wizard {
  display: inline-flex; align-items: center; gap: .45rem;
  background: transparent; border: 1px solid var(--border); color: var(--text);
  font-size: var(--fs-base); font-weight: 700; padding: .55rem 1.15rem; border-radius: 9px;
  cursor: pointer; font-family: inherit; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.btn-wizard:hover { background: var(--surface-2); border-color: var(--muted); }
/* display z .btn-wizard bije domyslne [hidden] przegladarki - bez tego
   "Wstecz" i przycisk zapisu widac na kazdym kroku kreatora. */
.btn-wizard[hidden] { display: none; }
.btn-wizard svg { width: 14px; height: 14px; flex-shrink: 0; color: currentColor; }
.btn-wizard-back-ico svg { transform: rotate(180deg); }
.btn-wizard-strong { border-width: 2px; border-color: var(--text); }

/* Ikona przy tytule kroku. */
.wizard-pane-title { display: flex; align-items: center; gap: .55rem; }
/* Ikony w kreatorze: jednobarwne, na przezroczystym tle. */
.wizard-title-ico {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  display: inline-grid; place-items: center;
}
.wizard-title-ico svg { width: 15px; height: 15px; }

/* Dwie symetryczne wizytowki w podsumowaniu: klient i opiekun z awatarami. */
.wizard-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .9rem; }
@media (max-width: 560px) { .wizard-profiles { grid-template-columns: 1fr; } }
.wizard-profile {
  display: flex; align-items: center; gap: .7rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: .75rem .9rem;
}
.wizard-avatar {
  width: 42px; height: 42px; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center; font-size: var(--fs-md); font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}
.wizard-avatar-navy { background: linear-gradient(135deg, var(--navy), #1e293b); }
.wizard-profile-text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.wizard-profile-text strong { font-size: var(--fs-base); overflow-wrap: anywhere; }
.wizard-profile-text span { font-size: var(--fs-sm); color: var(--muted); }
.wizard-profile-tag {
  margin-left: auto; flex-shrink: 0;
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--brand); background: rgba(238, 110, 27, .1);
  border: 1px solid rgba(238, 110, 27, .3); border-radius: 999px; padding: .2rem .55rem;
}

/* Symetryczna siatka 2x2 grup podsumowania, kazda grupa z wlasna ikona. */
.wizard-sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .9rem; }
@media (max-width: 640px) { .wizard-sum-grid { grid-template-columns: 1fr; } }
.wizard-sum-group {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: .8rem .95rem;
}
.wizard-sum-group h3 {
  display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem;
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.wizard-sum-ico {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  display: inline-grid; place-items: center;
}
.wizard-sum-ico svg { width: 12px; height: 12px; }
.wizard-sum-group dl { margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.wizard-sum-group dl > div { display: flex; justify-content: space-between; gap: .8rem; font-size: var(--fs-base); }
.wizard-sum-group dt { color: var(--muted); font-weight: 600; }
.wizard-sum-group dd { margin: 0; font-weight: 700; color: var(--text); text-align: right; overflow-wrap: anywhere; }

.wizard-print-note {
  display: flex; align-items: center; gap: .55rem; margin: 0;
  font-size: var(--fs-base); color: var(--muted);
  background: rgba(238, 110, 27, .07); border: 1px dashed rgba(238, 110, 27, .4);
  border-radius: 9px; padding: .6rem .8rem;
}
.wizard-print-note svg { width: 15px; height: 15px; color: var(--brand); flex-shrink: 0; }

/* ============================================================
   Statystyki na pulpicie (realne dane), pasek priorytetow i
   wykres z danymi w Ofertowaniu, notatka, poprawki tabeli.
   ============================================================ */

/* Panel "Statystyki" - liczniki, kafel z suma i paski statusow. */
.stats-count-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: .8rem; }
.stats-count {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: .55rem .7rem; text-align: center;
}
.stats-count-value { display: block; font-size: var(--fs-lg); font-weight: 800; color: var(--text); }
.stats-count-label {
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.stats-money {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  background: linear-gradient(135deg, var(--navy), #1e293b); color: #fff;
  border-radius: 10px; padding: .65rem .85rem; margin-bottom: .9rem;
}
.stats-money-label {
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: rgba(255, 255, 255, .65);
}
.stats-money-value { font-size: var(--fs-lg); font-weight: 800; }
.stats-bars { display: flex; flex-direction: column; gap: .5rem; }
.stats-bar-row {
  display: grid; grid-template-columns: 96px 1fr 28px; align-items: center;
  gap: .6rem; font-size: var(--fs-sm);
}
.stats-bar-label { color: var(--muted); font-weight: 600; }
.stats-bar-track {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
}
.stats-bar-fill { display: block; height: 100%; border-radius: 999px; }
.stats-bar-robocza { background: #f59e0b; }
.stats-bar-wyslana { background: #3b82f6; }
.stats-bar-zaakceptowana { background: #10b981; }
.stats-bar-odrzucona { background: #ef4444; }
.stats-bar-count { text-align: right; font-weight: 700; color: var(--text); }

/* Pasek priorytetow pod prostokatem Ofert. */
.oferty-toolbar {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: .6rem .9rem; margin-bottom: 1.2rem;
}
.oferty-toolbar-label {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-right: .2rem;
}
.status-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-sm); font-weight: 700; border-radius: 999px;
  padding: .3rem .7rem; border: 1px solid;
}
.status-chip-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.status-chip-amber { color: var(--warn-tx); background: var(--warn-bg); border-color: var(--warn-bd); }
.status-chip-blue  { color: var(--info-tx); background: var(--info-bg); border-color: var(--info-bd); }
.status-chip-green { color: var(--ok-tx);   background: var(--ok-bg);   border-color: var(--ok-bd); }
.status-chip-nego  { color: var(--nego-tx); background: var(--nego-bg); border-color: var(--nego-bd); }
.oferty-toolbar-links { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* Wykres w Ofertowaniu - slupki wypelnione realna suma miesiaca. */
.oferty-chart { margin-bottom: 1.2rem; }
.oferty-chart .bar-chart { height: 165px; }
.bar-fill {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  background: linear-gradient(180deg, var(--brand-light), var(--brand));
  border-radius: 7px 7px 0 0; min-height: 4px;
}
.bar-chart-data .bar-rect-active {
  background: linear-gradient(180deg, var(--surface-2), var(--bg));
  border-color: var(--brand);
}
.bar-chart-data .bar-rect svg { z-index: 1; }
.bar-chart-data .bar-val { white-space: nowrap; font-size: var(--fs-micro); }

/* Tabela ofert: podswietlenie wiersza, rowne przyciski akcji. */
.tbl tbody tr { transition: background .12s ease; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl-actions { text-align: right; white-space: nowrap; }
.tbl-actions form { display: inline-block; margin: 0; vertical-align: middle; }
.tbl-actions .btn-small { vertical-align: middle; }
.btn-small svg { width: 13px; height: 13px; flex-shrink: 0; color: currentColor; }
/* Skasowanie czegos ma wygladac tak samo wszedzie - ta sama czerwien, co
   przy „Usun" na kartce zadania i przy ofercie. */
.btn-small-danger { background: #dc2626; border-color: transparent; color: #fff; }
.btn-small-danger:hover { background: #b91c1c; color: #fff; }
/* Wariant spokojny - ten sam ksztalt i wysokosc co .btn-small (wiec stoi
   z nim RowNO, nie wyzej/nizej), ale bez wypelnienia - dla akcji drugorzednej
   obok gownej (np. "Anuluj" obok "Usun" w oknie potwierdzenia). Wczesniej
   "Anuluj" bylo .btn-wizard, ktore ma inna wysokosc (dopelnienie zamiast
   sztywnej wysokosci) - dwa przyciski w jednym rzedzie wygladaly nierowno. */
.btn-small-cichy { background: transparent; color: var(--text); border-color: var(--border); box-shadow: none; }
.btn-small-cichy:hover { background: var(--surface-2); color: var(--text); border-color: var(--muted); box-shadow: none; }
/* Wariant „to jest TA akcja na ekranie" - pomaranczowy, jak „Otworz" i „Nowe
   zadanie". Do zapisania formularza albo dodania wpisu, nie do wszystkiego. */
.btn-small-glowny { background: var(--brand); border-color: transparent; }
.btn-small-glowny:hover { background: var(--brand-dark); color: #fff; }
/* Zapisywanie zmiany (poziomy, dane osobowe) - zielony, odrozniony od
   pomaranczowych akcji "otworz/utworz". Podwojna klasa (.btn-small.btn-small-ok),
   zeby wygrac ze specyficznoscia .konta-zapisz - ten sam guzik czesto nosi
   obie klasy (margines z jednej, kolor z drugiej), a .konta-zapisz sam w
   sobie tez wymusza tlo. */
.btn-small.btn-small-ok { background: #16a34a; border-color: transparent; color: #fff; }
.btn-small.btn-small-ok:hover { background: #15803d; color: #fff; }

/* Akcje przy ofercie: dwa przyciski tej samej wysokosci i szerokosci -
   pomaranczowy "Otworz", czerwony "Usun", ikony biale. Wczesniej byly to dwa
   blade przyciski obrysowane, kazdy innej szerokosci (roznej dlugosci napis),
   wiec kolumna akcji wygladala na krzywa. */
.oferty-suma { text-align: right; white-space: nowrap; font-weight: 700; }
.akcje-oferty { display: flex; gap: .4rem; justify-content: flex-end; }
.akcje-oferty > * { flex: 0 0 106px; margin: 0; }
.btn-akcja {
  display: inline-flex; width: 100%; height: 30px;
  align-items: center; justify-content: center; gap: .35rem;
  padding: 0 .6rem; border: 1px solid transparent; border-radius: 8px;
  font-size: var(--fs-base); font-weight: 700; line-height: 1;
  color: #fff; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(2, 8, 23, .18);
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn-akcja svg { width: 13px; height: 13px; flex-shrink: 0; color: #fff; }
.btn-akcja:hover { box-shadow: 0 3px 8px rgba(2, 8, 23, .22); }
.btn-akcja:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(2, 8, 23, .18); }
.btn-akcja:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }
.btn-akcja-otworz { background: var(--brand); }
.btn-akcja-otworz:hover { background: var(--brand-dark); }
.btn-akcja-usun { background: #dc2626; }
.btn-akcja-usun:hover { background: #b91c1c; }

/* --- Ten sam klient pod kilkoma numerami kartoteki ------------------------ */
/* Kolory wylacznie ze zmiennych motywu - panel stoi na karcie klienta, ktora
   ludzie ogladaja i w jasnym, i w ciemnym motywie. */
.dubel-panel {
  margin: 0 0 1rem; padding: .9rem 1.05rem; border-radius: 12px;
  background: var(--warn-bg); border: 1px solid var(--warn-bd);
}
.dubel-glowa { display: flex; align-items: flex-start; gap: .8rem; }
.dubel-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--warn-bd); color: var(--warn-tx);
}
.dubel-ico svg { width: 17px; height: 17px; }
.dubel-tytul { margin: 0; font-size: var(--fs-md); font-weight: 800; color: var(--warn-tx); }
.dubel-opis { margin: .15rem 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text); }
.dubel-panel-skrot .btn-small { margin-top: .8rem; }
.dubel-lista { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .35rem; }
.dubel-poz {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .45rem .65rem; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border);
}
/* Kolor marki OD RAZU, nie dopiero na hover - bez tego wpis wygladal
   identycznie jak zwykly, nieklikalny tekst (wszystkie 30 duplikatow
   jednym kolorem) i nie bylo widac, ze da sie w niego kliknac. */
.dubel-nazwa { font-weight: 700; font-size: var(--fs-base); color: var(--brand); text-decoration: none; }
.dubel-nazwa:hover { color: var(--brand-dark); text-decoration: underline; }
.dubel-numer { font-weight: 600; color: var(--muted); }
.dubel-gdzie { font-size: var(--fs-sm); color: var(--muted); }
/* Po czym poznajemy, ze to ten sam podmiot - bez tego panel mowilby „to
   duplikat" i kazal w to wierzyc. */
.dubel-powod {
  font-size: var(--fs-sm); color: var(--info-tx);
  background: var(--info-bg); border: 1px solid var(--info-bd);
  border-radius: 999px; padding: .05rem .5rem;
}
.dubel-ile { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
/* Duplikat bez wlasnej karty klienta (inny typ kontrahenta w Subiekcie) -
   wyglada jak reszta wiersza, tylko bez podkreslenia przy najechaniu, zeby
   nie obiecywac klikniecia, ktore nigdzie nie prowadzi. */
.dubel-nazwa-bez-karty { cursor: default; }
.dubel-bez-karty-znak {
  margin-left: .4rem; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: .05rem .4rem;
}

/* Skrot regol materialowych na stronie ofert - lista progow w jednej linii
   kazdy i jeden rzad pol do dopisania kolejnego. Pelny widok (os progow,
   dziury, test metrazu) zostaje na podstronie Regul. */
.regoly-skrot-lead { margin: 0 0 .9rem; }
.regoly-skrot-lista { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }
.regoly-skrot-poz {
  display: flex; align-items: center; gap: .7rem;
  padding: .45rem .7rem; border: 1px solid var(--border);
  border-radius: 9px; background: var(--surface-2);
}
.regoly-skrot-poz form { margin: 0; margin-left: auto; }
.regoly-skrot-zakres { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }
.regoly-skrot-zakres svg { width: 14px; height: 14px; color: var(--brand); }
.regoly-skrot-kwota { font-weight: 700; color: var(--brand); }
.regoly-skrot-opis { font-size: var(--fs-sm); }
.regoly-skrot-usun { min-width: 96px; }
/* Siatka, nie flex: pola i przycisk maja stac w JEDNYM rzedzie. Przy flexie
   pola rozciagaly sie na cala szerokosc i "Dodaj" spadal do drugiej linii. */
.regoly-skrot-form {
  display: grid; grid-template-columns: 1fr 1fr 1fr 2fr auto;
  align-items: end; gap: .6rem; margin: 0;
}
.regoly-skrot-form .field { margin: 0; min-width: 0; }
.regoly-skrot-dodaj { width: 106px; height: 34px; }
@media (max-width: 900px) {
  .regoly-skrot-form { grid-template-columns: 1fr 1fr; }
  .regoly-skrot-form .regoly-skrot-opis-pole { grid-column: 1 / -1; }
  .regoly-skrot-dodaj { grid-column: 1 / -1; justify-self: start; }
}
.regoly-skrot-link { display: inline-flex; margin-top: 1rem; }

/* Szybka notatka - brudnopis z autozapisem w przegladarce. */
.quick-note {
  width: 100%; min-height: 110px; resize: vertical;
  padding: .6rem .7rem; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  font-family: inherit; font-size: var(--fs-base); line-height: 1.5;
}
.quick-note:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.quick-note-status { font-size: var(--fs-sm); color: var(--muted); margin: .4rem 0 0; min-height: 1em; }

/* Ofertowanie: Szybki dobor mocy (60%) i Wartosc ofert (40%) obok siebie
   na tym samym poziomie; lista ofert pod nimi na cala szerokosc. */
.oferty-columns {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.2rem;
  align-items: stretch; margin-bottom: 1.2rem;
}
.oferty-col { min-width: 0; display: flex; flex-direction: column; gap: 1.2rem; }
/* Panele musza rosnac z trescia. Przy `flex: 1` wszystkie dostawaly rowna
   wysokosc, wiec rozwiniete "Kontakty" wylewaly sie poza panel (a przy
   overflow: hidden - byly przyciete). Rozciagamy tylko panel, ktory jest
   w kolumnie sam - tam wypelnienie wysokosci wyglada dobrze. */
.oferty-col > * { flex: 0 0 auto; }
/* `flex: 1 0 auto`, nie `flex: 1` - to drugie znaczy `flex-basis: 0`, czyli
   wysokosc bez zwiazku z trescia, a `overflow: hidden` na panelu obcinal
   wtedy nadmiar bez sladu. */
.oferty-col > *:only-child { flex: 1 0 auto; }
.oferty-col .oferty-chart { margin-bottom: 0; }
/* Wykres w wezszej kolumnie - wartosci nad slupkami moga sie zawijac. */
.oferty-col .bar-chart-data .bar-val { white-space: normal; text-align: center; line-height: 1.2; }
@media (max-width: 1000px) { .oferty-columns { grid-template-columns: 1fr; } }
/* Pewnosc, ze zadna dekoracja nie przykrywa pol kalkulatora. */
.calc-fields, .calc-results { position: relative; z-index: 1; }

/* Pasek-separator z etykieta: pozioma linia przez cala szerokosc, na srodku
   ciemna pigulka z nazwa sekcji i licznikiem - wyraznie oddziela narzedzia
   od listy utworzonych ofert. */
.section-divider {
  position: relative; display: flex; align-items: center; justify-content: center;
  margin: 1.8rem 0 1.4rem;
}
.section-divider::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
}
.section-divider-label {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--pigulka), var(--pigulka-jasniej));
  border: 1px solid var(--pigulka-obwodka); color: #fff;
  font-size: var(--fs-base); font-weight: 700; border-radius: 999px; padding: .45rem 1.1rem;
  box-shadow: var(--shadow);
}
.section-divider-label svg { width: 14px; height: 14px; color: var(--brand-light); flex-shrink: 0; }
/* Naglowek wewnatrz kolumny pulpitu - ciasniej, bez zbednego odstepu u gory. */
.dash-col .section-divider { margin: 0 0 .9rem; }
.dash-col > .section-divider + * { margin-top: 0; }
.dash-section > .section-divider:first-child { margin-top: 0; }
.section-divider-count {
  background: var(--brand); color: #fff; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 800; padding: .08rem .5rem;
}

/* ============================================================
   Kreator: uklad z panelem propozycji po prawej + ekran
   potwierdzenia utworzenia oferty (zielony ptaszek).
   ============================================================ */
.wizard-layout {
  display: grid; grid-template-columns: 1fr 280px; gap: 1.2rem;
  max-width: 1040px; margin: 0 auto; align-items: start;
}
.wizard-main { min-width: 0; }
.wizard-main .wizard-panel { max-width: none; }
.wizard-main .wizard-actions { max-width: none; }
@media (max-width: 900px) { .wizard-layout { grid-template-columns: 1fr; } }

/* Rozwijane propozycje: klikniecie chipa wstawia tekst do pola. */
.wizard-sugg-col { display: flex; flex-direction: column; gap: .7rem; position: sticky; top: 74px; }
.wizard-sugg {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 0; overflow: hidden;
}
.wizard-sugg summary {
  display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none;
  padding: .65rem .85rem; font-size: var(--fs-sm); font-weight: 700; color: var(--text);
}
.wizard-sugg summary::-webkit-details-marker { display: none; }
.wizard-sugg summary::after {
  content: "›"; margin-left: auto; color: var(--muted);
  transform: rotate(90deg); transition: transform .15s ease;
}
.wizard-sugg[open] summary::after { transform: rotate(-90deg); }
.wizard-sugg-ico {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  display: inline-grid; place-items: center;
}
.wizard-sugg-ico svg { width: 12px; height: 12px; }
.sugg-list { display: flex; flex-direction: column; gap: .4rem; padding: 0 .85rem .8rem; }
.sugg-chip {
  text-align: left; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: .45rem .6rem;
  font-size: var(--fs-sm); line-height: 1.35; cursor: pointer; font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.sugg-chip:hover { border-color: var(--muted); background: var(--surface); }

/* Mrugniecie pola po wstawieniu propozycji. */
.field .is-filled { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Adres inwestycji - wlasny, wyrozniony blok w kreatorze oferty. Wczesniej
   siedzial jako trzecie pole w rzedzie obok nazwy i metrazu: caly adres nie
   miescil sie w jednej trzeciej szerokosci, wiec rzad sie rozjezdzal, a pole,
   po ktorym ekipa trafia na budowe, wygladalo na najmniej wazne z trzech. */
.adres-blok {
  margin: .4rem 0 1.1rem; padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--brand-light); border-left: 4px solid var(--brand);
  border-radius: 12px; background: var(--surface-2);
}
.adres-blok-tytul {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: 0 .45rem; margin-left: -.45rem;
  font-size: var(--fs-md); font-weight: 800; color: var(--tekst-mocny);
}
.adres-blok-tytul svg { width: 17px; height: 17px; color: var(--brand); }
.adres-blok-sub { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
/* Szerokosci pod to, co sie wpisuje: ulica najszersza, kod najwezszy - dzieki
   temu rzad konczy sie rowno i nic sie nie zawija w polowie slowa. */
.adres-pola { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .8rem; }
.adres-pola .field { margin: 0; }
.adres-ulica  { flex: 3 1 240px; min-width: 200px; }
.adres-kod    { flex: 0 0 118px; }
.adres-miasto { flex: 2 1 180px; min-width: 160px; }
.adres-kod input { letter-spacing: .06em; }
.adres-stopka {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .7rem;
}
/* Bez wybranego klienta przycisk „Przepisz adres" jest schowany i zostawal
   po nim pusty rzad, ktory tylko odsuwal wynik od pol. */
.adres-stopka:not(:has(> :not([hidden]))) { display: none; }
/* `display: inline-flex` z .btn-small wygrywa z domyslnym [hidden] przegladarki,
   wiec przycisk bez wybranego klienta i tak byl widoczny. */
.adres-przepisz { flex-shrink: 0; }
.adres-przepisz[hidden] { display: none; }

/* WYNIK BLOKU: zlozony adres. Wczesniej byla to szara linijka wielkosci
   przypisu, doklejona z boku przycisku - czyli to, po co sie tu przychodzi,
   wygladalo na najmniej wazne w calej ramce. Teraz stoi pod kreska, ma
   wlasna etykiete i pismo, ktore widac z odleglosci reki. */
.adres-wynik {
  display: flex; align-items: center; gap: .75rem;
  margin-top: .9rem; padding-top: .9rem;
  border-top: 1px dashed var(--border);
}
.adres-wynik-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.adres-wynik-ico svg { width: 18px; height: 18px; }
.adres-wynik-tresc { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.adres-wynik-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.adres-podglad {
  margin: 0; font-size: var(--fs-md); color: var(--muted);
  line-height: 1.35; overflow-wrap: anywhere;
}
/* Wypelniony adres: wieksze pismo, kolor tekstu mocnego i pomaranczowy znak
   obok - ten sam akcent, ktory trzyma cala ramke. */
.adres-podglad-jest {
  font-size: var(--fs-lg); font-weight: 800; color: var(--tekst-mocny);
  letter-spacing: -.005em;
}
.adres-wynik-jest .adres-wynik-ico {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  color: var(--brand);
}
.adres-wynik-jest .adres-wynik-label { color: var(--brand); }
/* W waskim panelu legenda z podtytulem lamala sie na dwie linie i wychodzila
   poza ramke bloku - podtytul schodzi wtedy pod tytul, a nie obok. */
@media (max-width: 560px) {
  .adres-blok-tytul { flex-direction: column; align-items: flex-start; gap: .1rem; }
}

/* Adres montazu na karcie klienta w Ofertowaniu - na wierzchu, nie jako szara
   linijka pod tytulem. To po niego siega kazdy, kto ma tam pojechac. */
.inw-adres {
  display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem;
  padding: .7rem .9rem; border: 1px solid var(--brand-light);
  border-left: 4px solid var(--brand); border-radius: 12px; background: var(--surface-2);
}
.inw-adres-ico {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 9px; background: var(--brand); color: #fff;
}
.inw-adres-ico svg { width: 16px; height: 16px; }
.inw-adres-tresc { display: flex; flex-direction: column; min-width: 0; }
.inw-adres-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.inw-adres-wartosc {
  font-size: var(--fs-md); font-weight: 700; color: var(--tekst-mocny);
  overflow-wrap: anywhere;
}
.inw-adres-metraz {
  margin-left: auto; flex-shrink: 0; padding: .2rem .6rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-base); font-weight: 700; color: var(--tekst-mocny);
}
/* Brak adresu opisujemy jako brak, nie chowamy calego paska. */
.inw-adres-pusty { border-color: var(--border); border-left-color: var(--muted); background: var(--surface); }
.inw-adres-pusty .inw-adres-ico { background: var(--muted); }
.inw-adres-pusty .inw-adres-wartosc { color: var(--muted); font-weight: 500; font-size: var(--fs-base); }
.inw-podtytul {
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--fs-md); margin: 1.1rem 0 .5rem;
}
.inw-podtytul svg { width: 15px; height: 15px; color: var(--brand); }
.inw-btn-oferta { width: 150px; }
.inw-pola { display: flex; flex-wrap: wrap; gap: .7rem; }
.inw-pola .field { margin: 0; }
.inw-pole-nazwa { flex: 3 1 260px; }
.inw-pole-metraz { flex: 1 1 140px; }

/* ============ KATALOG: karta towaru ============ */
/* Cztery liczby, ktore decyduja przy rozmowie z klientem - po ile idzie,
   ile mamy, na jak dlugo starczy i czy to jeszcze schodzi. Wczesniej trzeba
   je bylo skladac z trzech tabel nizej. */
.towar-pasek {
  display: grid; gap: .7rem; margin: 0 0 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.towar-kafel {
  display: flex; flex-direction: column; gap: .18rem;
  padding: .85rem .95rem .9rem; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); box-shadow: var(--shadow);
}
.towar-kafel-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.towar-kafel-wartosc {
  font-size: var(--fs-lg); font-weight: 800; color: var(--tekst-mocny);
  font-variant-numeric: tabular-nums;
}
.towar-kafel-opis { font-size: var(--fs-sm); color: var(--muted); }
.towar-kafel-glowny { border-color: var(--brand-light); border-left: 4px solid var(--brand); }
.towar-kafel-uwaga { border-color: var(--warn-bd); background: var(--warn-bg); }
.towar-kafel-uwaga .towar-kafel-label, .towar-kafel-uwaga .towar-kafel-opis { color: var(--warn-tx); }

.towar-rok {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem; margin-bottom: 1.6rem; box-shadow: var(--shadow);
}
.towar-rok-tytul {
  display: block; font-size: var(--fs-base); font-weight: 700;
  color: var(--tekst-mocny); margin-bottom: .7rem;
}
.towar-rok-tytul .muted { font-weight: 500; }
.towar-rok-slupki {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: end; gap: .3rem; height: 120px;
}
.towar-rok-kol {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: .25rem; height: 100%; min-width: 0;
}
.towar-rok-val { font-size: var(--fs-micro); font-weight: 700; color: var(--muted); line-height: 1; }
.towar-rok-slupek {
  display: block; width: 100%; min-height: 2px; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
  transition: filter .15s ease;
}
.towar-rok-kol:hover .towar-rok-slupek { filter: brightness(1.15); }
.towar-rok-msc { font-size: var(--fs-micro); font-weight: 600; color: var(--muted); line-height: 1; }
@media (max-width: 640px) {
  .adres-kod, .adres-miasto { flex: 1 1 140px; }
}

/* Ekran "Oferta utworzona": przyciemnione tlo, karta z animowanym,
   wielkim zielonym ptaszkiem, numerem i data. */
.created-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(2, 6, 23, .65); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.created-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 2.2rem 2.4rem; text-align: center; max-width: 460px; width: 100%;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.created-check { display: inline-block; width: 96px; height: 96px; color: #10b981; }
.created-check svg { width: 100%; height: 100%; }
.created-check-circle {
  stroke-dasharray: 145; stroke-dashoffset: 145;
  animation: check-draw .6s ease-out forwards;
}
.created-check-mark {
  stroke-dasharray: 36; stroke-dashoffset: 36;
  animation: check-draw .35s ease-out .45s forwards;
}
@keyframes check-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .created-check-circle, .created-check-mark { animation: none; stroke-dashoffset: 0; }
}
.created-box h2 { margin: .8rem 0 .2rem; font-size: var(--fs-xl); }
.created-num { margin: 0; font-size: var(--fs-lg); font-weight: 800; color: var(--text); }
.created-date { margin: .15rem 0 0; font-size: var(--fs-base); color: var(--muted); }
.created-question { margin: 1rem 0 .9rem; font-size: var(--fs-base); color: var(--text); }
.created-actions { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.created-btn { min-width: 150px; height: 36px; justify-content: center; }

/* ============ OFERTA: pasek akcji i warunki ============ */
/* Status, wartosc i wydruk to trzy zupelnie rozne wagi - wczesniej staly
   obok siebie w naglowku jako goly `select` i dwa blade przyciski, z ktorych
   jeden byl wyjsciem ze strony, a drugi robil dokument dla klienta. */
.oferta-pasek {
  display: grid; gap: 1rem; align-items: center; margin-bottom: 1rem;
  grid-template-columns: auto auto 1fr;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1rem 1.2rem; box-shadow: var(--shadow);
}
.oferta-pasek-label {
  display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .3rem;
}
.oferta-pasek-status form { display: flex; align-items: center; gap: .5rem; margin: 0; }
.oferta-pasek-status select { min-width: 160px; }
.oferta-pasek-pill { padding: .25rem .7rem; font-size: var(--fs-base); }
.oferta-pasek-suma {
  padding-left: 1rem; border-left: 1px solid var(--border);
}
.oferta-pasek-kwota {
  font-size: var(--fs-xl); font-weight: 800; color: var(--tekst-mocny);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.oferta-pasek-akcje {
  display: flex; flex-direction: column; align-items: flex-end; gap: .25rem;
  justify-self: end; text-align: right;
}
.oferta-btn-pdf { width: 165px; height: 38px; }
.oferta-pasek-pdf-nota {
  margin: 0; font-size: var(--fs-sm); color: var(--muted); max-width: 22rem;
}
@media (max-width: 900px) {
  .oferta-pasek { grid-template-columns: 1fr; }
  .oferta-pasek-suma { padding-left: 0; border-left: 0; }
  .oferta-pasek-akcje { align-items: flex-start; justify-self: start; text-align: left; }
}

/* Cztery rzeczy, o ktore klient pyta przez telefon. Byly szarym zdaniem
   w jednej linijce, wiec czytalo sie je jak przypis. */
.oferta-warunki {
  display: grid; gap: .7rem; margin-bottom: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}
.oferta-warunek {
  display: grid; align-items: center; gap: .1rem .7rem;
  grid-template-columns: auto 1fr;
  padding: .75rem .9rem; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface);
}
.oferta-warunek-ico {
  grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 9px; background: var(--surface-2); color: var(--brand);
  border: 1px solid var(--border);
}
.oferta-warunek-ico svg { width: 15px; height: 15px; }
.oferta-warunek-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.oferta-warunek-wartosc {
  font-size: var(--fs-md); font-weight: 700; color: var(--tekst-mocny);
  overflow-wrap: anywhere;
}
.oferta-warunek-rabat { border-color: var(--brand-light); background: var(--surface-2); }
.oferta-uwagi-label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.oferta-uwagi-label svg { width: 14px; height: 14px; color: var(--brand); }

/* Wiersze list z realnymi danymi (Zadzwon dzis, przeglady). */
.list-row-title { font-size: var(--fs-base); font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.list-row-sub { font-size: var(--fs-sm); color: var(--muted); }

/* ============================================================
   Flota: duza wyszukiwarka pojazdu + karty pojazdow
   ============================================================ */
.fleet-search {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 1.1rem 1.2rem; margin-bottom: 1.4rem; box-shadow: var(--shadow);
}
.fleet-search-box {
  display: flex; align-items: center; gap: .7rem;
  background: var(--surface-2); border: 2px solid var(--border); border-radius: 999px;
  padding: .75rem 1.2rem; cursor: text;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fleet-search-box:focus-within {
  border-color: var(--brand); box-shadow: 0 0 0 4px rgba(238, 110, 27, .14);
}
.fleet-search-ico { display: inline-flex; color: var(--muted); flex-shrink: 0; }
.fleet-search-ico svg { width: 19px; height: 19px; }
.fleet-search-box input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: 0;
  color: var(--text); font-family: inherit; font-size: var(--fs-md);
}
.fleet-search-box input::placeholder { color: var(--muted); }
.fleet-search-box input::-webkit-search-cancel-button { display: none; }
.fleet-search-clear {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; padding: .2rem; border-radius: 999px; flex-shrink: 0;
}
.fleet-search-clear:hover { color: var(--text); }
.fleet-search-clear svg { width: 14px; height: 14px; }

.fleet-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.fleet-filter {
  display: inline-flex; align-items: center; gap: .45rem;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: .4rem .9rem; cursor: pointer;
  font-family: inherit; font-size: var(--fs-base); font-weight: 700;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.fleet-filter:hover { color: var(--text); border-color: var(--muted); }
.fleet-filter.is-active { color: #fff; background: var(--pigulka); border-color: var(--pigulka); }
.fleet-filter-count {
  background: var(--surface-2); color: var(--muted); border-radius: 999px;
  padding: .05rem .45rem; font-size: var(--fs-sm); font-weight: 800;
}
.fleet-filter.is-active .fleet-filter-count { background: rgba(255, 255, 255, .18); color: #fff; }
.fleet-search-info { margin: .8rem 0 0; font-size: var(--fs-sm); color: var(--muted); min-height: 1em; }

.fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.1rem; }
.fleet-card {
  /* Karta floty jako pierwsza dostala wlasna, czterostopniowa skale pisma.
     Sprawdzila sie, wiec jest juz skala calej aplikacji (--fs-* w :root)
     i karta korzysta z niej razem z reszta stron - wlasnych zmiennych nie ma. */
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .8rem;
}
.fleet-card[hidden] { display: none; }

/* Trzy stany widoczne od razu, w jednym miejscu, w jednej formie - zamiast
   zgadywac po braku plakietki, ze auto jest "normalne". Kolejnosc czytania
   karty: stan -> tablica -> nazwa (zob. _pojazd_karta.html). */
.fleet-stan {
  display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start;
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; border-radius: 999px; padding: .22rem .6rem .22rem .55rem;
  border: 1px solid transparent;
}
.fleet-stan svg { width: 10px; height: 10px; }
.fleet-stan-aktywny { color: var(--ok-tx); background: var(--ok-bg); border-color: var(--ok-bd); }
.fleet-stan-poza-ewidencja { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
.fleet-stan-sprzedany { color: #fff; background: #1e293b; border-color: #1e293b; }

/* Auto w uzyciu, ale poza ewidencja srodkow trwalych (zob. flota_dane.py,
   POJAZDY_POZA_EWIDENCJA) - wyszarzone tlo, zeby odrozniac od "normalnego"
   srodka trwalego, ale bez przygaszania tekstu/plakietek (alarm o polisie
   ma zostac dobrze widoczny). */
.fleet-card-poza-ewidencja { background: var(--surface-2); }
.fleet-card-poza-ewidencja .fleet-visual { opacity: .82; }
/* Sprzedane/zlikwidowane - zdjecie na czarno-bialo i przygaszone tlo, zeby
   bylo widac na pierwszy rzut oka, ze to juz nie jest czynna flota. Tekst
   i plakietki zostaja czytelne - dokumenty i historia dalej maja sluzyc. */
.fleet-card-sprzedany { background: var(--surface-2); }
.fleet-card-sprzedany .fleet-visual { opacity: .65; filter: grayscale(.9); }

/* Sprzedane auta razem w jednej wspolnej ramce - karty w srodku tej samej
   wielkosci co reszta floty (zadnego pomniejszania), ramka po prostu
   zajmuje tyle miejsca w siatce, ile te dwie pelnowymiarowe karty potrzebuja
   (span 2 kolumny), wiec laduje naturalnie zaraz po autach w uzyciu. */
.fleet-sprzedane-ramka {
  grid-column: span 2;
  /* NIE staly granat: w ciemnym motywie kreskowana ramka miala prawie kolor
     tla i wygladalo to, jakby jej nie bylo. */
  border: 2px dashed var(--pigulka-jasniej);
  border-radius: 14px;
  padding: 1.6rem 1.1rem 1.1rem;
  position: relative;
  background: color-mix(in srgb, var(--pigulka-jasniej) 5%, transparent);
}
/* Na waskim ekranie siatka floty ma jedna kolumne - „span 2" wymuszalby
   druga, przez co karty aut wyjezdzaly poza ekran. */
@media (max-width: 900px) { .fleet-sprzedane-ramka { grid-column: auto; } }
.fleet-sprzedane-ramka-etykieta {
  position: absolute;
  top: -.7rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: #1e293b;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.fleet-sprzedane-ramka-etykieta svg { width: 10px; height: 10px; }
.fleet-sprzedane-ramka-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.1rem;
}

.fleet-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.fleet-plate {
  display: inline-block; font-size: var(--fs-sm); font-weight: 800; letter-spacing: .06em;
  background: var(--pigulka); color: #fff; border-radius: 5px; padding: .18rem .5rem;
}
/* W naglowku karty pojazdu tablica to zwykly bialy napis, bez plakietki -
   stoi juz na ciemnym prostokacie hero, wiec obramowanie bylo pudelkiem w
   pudelku (prosba 26.08.2026). Plakietki na kartach floty, w Inwestycjach
   i w dymku mapy zostaja - tam siedza na jasnym tle i musza sie odcinac. */
.oferty-hero-sub .fleet-plate {
  background: none; padding: 0; border-radius: 0; color: #fff;
}
/* Tablica i znaczniki zrodla w jednym rzedzie - osobno od nazwy, zeby pill
   nie lamal sie w polowie dlugiego modelu (byl z tego balagan). */
.fleet-id-row { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.fleet-name { margin: .3rem 0 0; font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
/* Marka i model to jeden tytul - ta sama grubosc i kolor, zeby nazwa auta
   nie rozpadala sie wizualnie na dwa napisy. */
.fleet-model { font-weight: inherit; color: inherit; }

.fleet-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem .9rem; margin: 0; align-items: start; }
/* Etykieta jest naglowkiem pola i tak ma wygladac: normalny rozmiar, grubo,
   w kolorze tekstu. Wartosc pod nia - zwykla czcionka.
   Wczesniej bylo odwrotnie (drobny szary wersalik u gory, pogrubiona wartosc
   pod spodem), przez co "NIP" i "Telefon" ginely, a rzucaly sie w oczy same
   liczby - bez tego, czego dotycza. */
.fleet-facts dt {
  font-size: var(--fs-base); font-weight: 700; letter-spacing: 0;
  color: var(--text); margin-bottom: .1rem;
}
.fleet-facts dd { margin: 0; font-size: var(--fs-base); font-weight: 400; color: var(--text); }
/* Wartosci liczbowe zostaja monospace, ale juz bez pogrubienia - o wadze
   decyduje etykieta. */
.fleet-facts dd.mono-num { font-weight: 400; }
.fleet-missing { font-weight: 600; color: var(--muted); font-style: italic; }
.fleet-gps { display: flex; flex-direction: column; gap: .1rem; }
.fleet-gps .fleet-doc-meta { font-size: var(--fs-sm); font-weight: 600; }

/* Podglad pozycji: pojedynczy kafelek OSM jako zwykly <img> (bez Leaflet w
   ramce) - zero martwych przyciskow powiekszania, zero cudzego paska "Report
   a problem / Donate". Powiekszanie i przesuwanie tylko przez przycisk
   ponizej, na pelnej mapie OpenStreetMap. */
/* Mapa osadzona na stronie (ramka OSM) - przesuwanie i powiekszanie dziala
   w jej wnetrzu, wiec wlasny "Wroc" dalej robi to, co obiecuje. Stala
   wysokosc zamiast proporcji 1:1 - kwadrat na pelnej szerokosci zajmowal
   pol ekranu (zgloszenie 26.08.2026). */
.fleet-map-osadzona {
  position: relative; width: 100%; height: 420px; overflow: hidden;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2);
}
.fleet-map-osadzona iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.fleet-map-osadzona .fleet-map-tile { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Wlasna pinezka (L.divIcon) - zielona kropka z delikatnym pulsem, zeby dalo
   sie ja znalezc wzrokiem na gestej mapie. Reaguje na najechanie (dymek
   krotki) i klikniecie (pelne dane pojazdu). */
.mapa-pin { background: none; border: 0; }
.mapa-pin-ksztalt {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 3px 5px rgba(2, 6, 23, .55));
}
/* Kropla w kolorze marki, biale obrysy i biale oczko w srodku - czytelna
   i na jasnej, i na ciemnej mapie. */
.mapa-pin-ksztalt path { fill: var(--brand); stroke: #fff; stroke-width: 1.6; }
.mapa-pin-ksztalt circle { fill: #fff; }
.mapa-pin-puls {
  position: absolute; left: 50%; bottom: 0; width: 22px; height: 22px;
  margin: 0 0 -11px -11px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 40%, transparent);
  animation: mapa-pin-puls 2.4s ease-out infinite;
}
@keyframes mapa-pin-puls {
  0% { transform: scale(.6); opacity: .9; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .mapa-pin-puls { animation: none; } }
.mapa-pin:hover .mapa-pin-ksztalt path { fill: var(--brand-dark); }

/* Dymek po kliknieciu pinezki. Leaflet rysuje wlasne tlo, wiec ustawiamy
   tylko typografie i kolory z motywu - inaczej w ciemnym motywie dymek
   zostawal bialy z bialym tekstem. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface); color: var(--text);
  box-shadow: 0 8px 24px rgba(2, 8, 23, .35);
}
.leaflet-popup-content { margin: .7rem .85rem; font-family: inherit; }
.leaflet-tooltip {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  font-family: inherit; font-size: var(--fs-micro); font-weight: 700;
}
.mapa-dymek-glowa { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .5rem; }
.mapa-dymek-auto { font-size: var(--fs-base); font-weight: 800; }
.mapa-dymek-dane { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.mapa-dymek-dane dt { font-size: var(--fs-micro); font-weight: 700; color: var(--muted); }
.mapa-dymek-dane dd { margin: 0; font-size: var(--fs-sm); }
.mapa-dymek-uwaga { display: block; margin-top: .15rem; font-size: var(--fs-micro); color: var(--muted); font-style: italic; }
.fleet-map-foot + .fleet-doc-note { margin-top: .5rem; }

.fleet-map { display: flex; flex-direction: column; gap: .5rem; max-width: 380px; }
.fleet-map-preview {
  position: relative; width: 100%; max-width: 380px; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2);
}
.fleet-map-tile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fleet-map-pin {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #16a34a; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  transform: translate(-50%, -50%);
}
.fleet-map-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.fleet-map-credit { font-size: var(--fs-micro); color: var(--muted); }
.fleet-map-btn {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 700; color: #fff; background: var(--brand);
  border-radius: 8px; padding: .35rem .65rem;
}
.fleet-map-btn:hover { filter: brightness(.94); }
.fleet-map-btn svg { width: 12px; height: 12px; }

.fleet-warn {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  font-size: var(--fs-sm); color: var(--warn-tx);
  background: var(--warn-bg); border: 1px solid var(--warn-bd);
  border-radius: 9px; padding: .5rem .7rem;
}
.fleet-warn svg { width: 14px; height: 14px; flex-shrink: 0; }

.fleet-docs { border-top: 1px solid var(--border); padding-top: .7rem; }
.fleet-docs summary {
  display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none;
  font-size: var(--fs-sm); font-weight: 700; color: var(--text);
}
.fleet-docs summary::-webkit-details-marker { display: none; }
.fleet-docs summary::after {
  content: "›"; margin-left: auto; color: var(--muted);
  transform: rotate(90deg); transition: transform .15s ease;
}
.fleet-docs[open] summary::after { transform: rotate(-90deg); }
.fleet-doc-list { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.fleet-doc-list li {
  display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm);
  padding: .4rem .5rem; border-radius: 8px; transition: background .12s ease;
}
.fleet-doc-list li:hover { background: var(--surface-2); }
.fleet-doc-typ {
  flex-shrink: 0; font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; border-radius: 999px; padding: .15rem .5rem;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.fleet-doc-polisa { background: var(--info-bg); color: var(--info-tx); border-color: var(--info-bd); }
.fleet-doc-dowód-rejestracyjny { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-bd); }
.fleet-doc-karta-paliwowa { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-bd); }
.fleet-doc-finansowanie { background: var(--ai-bg); color: var(--ai-tx); border-color: var(--ai-bd); }
.fleet-doc-nazwa {
  flex: 1; min-width: 0; color: var(--text); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fleet-doc-link:hover .fleet-doc-nazwa,
.fleet-doc-link:focus-visible .fleet-doc-nazwa { color: var(--brand); }
.fleet-doc-meta { color: var(--muted); flex-shrink: 0; font-size: var(--fs-micro); }
/* Obrot skanu. Przygaszone, zeby nie konkurowaly z nazwa dokumentu, ale
   widoczne od razu - i pelna sila przy klawiaturze (:focus-within), inaczej
   idacy tabem nie wiedzialby, gdzie stoi. */
.dok-obrot { display: flex; gap: .15rem; flex-shrink: 0; opacity: .45; transition: opacity .12s ease; }
.fleet-doc-list li:hover .dok-obrot, .dok-obrot:focus-within { opacity: 1; }
.dok-obrot-btn {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  border-radius: 6px; cursor: pointer; line-height: 1;
  font-size: var(--fs-sm); padding: .15rem .35rem;
}
.dok-obrot-btn:hover { color: var(--brand); border-color: var(--brand); }
.fleet-doc-note { margin: .7rem 0 0; font-size: var(--fs-micro); color: var(--muted); }
.fleet-doc-none { margin: 0; font-size: var(--fs-sm); color: var(--muted); border-top: 1px solid var(--border); padding-top: .7rem; }

/* Strona jednej sekcji pojazdu (pojazd_sekcja.html) - tresc idzie na CALA
   szerokosc, dokladnie tak jak prostokat hero nad nia (.hero-section tez
   nie ma max-width). Miala tu kolejno 720px wysrodkowane, potem 900px od
   lewej - i za kazdym razem panele konczyly sie w polowie ekranu, a prawa
   polowa zostawala pusta, podczas gdy hero szedl przez cala szerokosc
   (zgloszenie 26.08.2026, czwarte podejscie - dopiero zrzut ekranu pokazal,
   ze chodzi o szerokosc KONTENERA, nie o wyrownanie tekstu w srodku). */
.sekcja-tresc { max-width: none; }

/* Ladny komunikat "brak danych", tekst od lewej do prawej (nie na srodku
   strony) - dla map/list/historii bez tresci (mapa bez GPS, auto bez
   nadajnika, brak historii/dokumentow/postojow). */
.sekcja-pusta {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.3rem 1.4rem; color: var(--muted);
}
.sekcja-pusta-ico {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-2); color: var(--muted);
}
.sekcja-pusta-ico svg { width: 20px; height: 20px; }
.sekcja-pusta-tekst { display: flex; flex-direction: column; gap: .15rem; text-align: left; }
.sekcja-pusta-tekst strong { color: var(--text); font-size: var(--fs-base); font-weight: 800; }
.sekcja-pusta-tekst span { font-size: var(--fs-sm); line-height: 1.5; }

/* Podpowiedz pod wyszukiwarka sekcji - na stale widoczna (w przeciwienstwie
   do .fleet-search-info, ktora pokazuje wynik dopiero po wpisaniu czegos),
   zeby bylo od razu wiadomo, po czym mozna szukac i w jakim formacie daty. */
.fleet-search-podpowiedz { margin: .5rem 0 0; font-size: var(--fs-micro); color: var(--muted); }

/* Wiersz "auto pod tym adresem" pod zleceniem serwisowym - to samo, co os
   dnia na karcie pojazdu, tylko widziane od strony zlecenia. Podpiety pod
   wiersz zlecenia, wiec bez wlasnej ramki: ma czytac sie jak przypis, a nie
   jak druga tabela. */
.zlecenie-postoje > td { background: var(--surface-2); padding-top: .5rem; padding-bottom: .6rem; }
.zlecenie-postoje-label {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.zlecenie-postoje-label svg { width: 12px; height: 12px; }
.zlecenie-postoje-list {
  list-style: none; margin: .35rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .35rem;
}
.zlecenie-postoje-list li {
  padding-left: .6rem; border-left: 2px solid var(--warn-bd);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .7rem;
  font-size: var(--fs-sm);
}
.zlecenie-postoje .fleet-doc-note { margin: .5rem 0 0; }

/* Os dnia (postoje pojazdu) - dwie linijki na wpis: kiedy/jak dlugo, potem
   gdzie (wlasne miejsce / hipoteza wizyty z odlegloscia / nieznane). */
/* Postoje pogrupowane w tygodnie, kazdy zwijany (<details>). Naglowek niesie
   komplet liczb, zeby zwiniety tydzien tez cos mowil - inaczej trzeba by go
   rozwijac tylko po to, zeby sprawdzic, czy jest tam cokolwiek. */
/* Tygodnie odsuniete od siebie na tyle, zeby czytaly sie jak osobne sekcje,
   a nie jak wiersze jednej listy. Pomaranczowy pasek z lewej - ta sama
   konwencja co podsekcje dokumentow i `.accent-card` w reszcie aplikacji. */
.postoje-tygodnie { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1rem; }
.postoje-tydzien {
  border: 1px solid var(--border); border-left: 4px solid var(--brand);
  border-radius: 0 10px 10px 0; background: var(--surface);
}
.postoje-tydzien[hidden] { display: none; }
.postoje-tydzien[open] { background: var(--surface-2); }
.postoje-tydzien-naglowek {
  display: flex; align-items: center; gap: .65rem; cursor: pointer; list-style: none;
  padding: .75rem .9rem; border-radius: 0 10px 10px 0;
  font-size: var(--fs-base); font-weight: 800;
}
.postoje-tydzien[open] .postoje-tydzien-naglowek { border-bottom: 1px solid var(--border); }
.postoje-tydzien-naglowek::-webkit-details-marker { display: none; }
.postoje-tydzien-naglowek:hover { color: var(--brand); }
/* Strzalka: w prawo gdy zwiniete, w dol gdy rozwiniete. Obrot na spanie
   (ma przejscie), nie na svg - inaczej dwa transformy bija sie o ten sam
   element i przejscie nie dziala. */
.postoje-tydzien-strzalka {
  display: grid; place-items: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--surface-2); color: var(--brand);
  transition: transform .15s ease, background .15s ease;
}
.postoje-tydzien-strzalka svg { width: 18px; height: 18px; }
.postoje-tydzien[open] .postoje-tydzien-strzalka { transform: rotate(90deg); }
.postoje-tydzien-naglowek:hover .postoje-tydzien-strzalka { background: var(--surface); }
.postoje-tydzien-zakres { flex-shrink: 0; }
.postoje-tydzien-teraz {
  flex-shrink: 0; font-size: var(--fs-micro); font-weight: 700; text-transform: lowercase;
  color: var(--ok-tx); background: var(--ok-bg); border: 1px solid var(--ok-bd);
  border-radius: 999px; padding: .1rem .5rem;
}
.postoje-tydzien-liczby { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex-shrink: 0; }
.postoje-tydzien-wizyt {
  font-size: var(--fs-micro); font-weight: 700; color: var(--warn-tx);
  background: var(--warn-bg); border: 1px solid var(--warn-bd);
  border-radius: 999px; padding: .1rem .5rem; white-space: nowrap;
}
.postoje-tydzien > .fleet-postoje-list { margin: 0; padding: .8rem .9rem .85rem; }
.fleet-postoje-pusto { margin: .8rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
.fleet-postoje-pusto[hidden] { display: none; }

/* Dokumenty w jednej sekcji, ale z naglowkami wg rodzaju. Naglowek grupy jest
   lzejszy od naglowka-pigulki calej sekcji - to podzial wewnatrz niej, nie
   druga sekcja. */
.dok-grupa + .dok-grupa { margin-top: 1.3rem; }
/* Pomaranczowy pasek z lewej - ta sama konwencja co `.accent-card` (4px
   var(--brand)), zeby naglowek czytal sie jako PODsekcja tej jednej sekcji,
   a nie jako kolejna osobna sekcja. */
.dok-grupa-naglowek {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .2rem;
  font-size: var(--fs-sm); font-weight: 800; color: var(--text);
  padding: .45rem .7rem;
  border-left: 4px solid var(--brand);
  background: var(--surface-2);
  border-radius: 0 8px 8px 0;
}
.dok-grupa-ico { display: flex; flex-shrink: 0; color: var(--muted); }
.dok-grupa-ico svg { width: 14px; height: 14px; }
.dok-grupa-naglowek .fleet-filter-count { margin-left: auto; }

/* Wyszukiwarka sekcji zostaje na gorze przy przewijaniu - przy kilkudziesieciu
   postojach trzeba bylo wracac na sama gore, zeby poprawic frazę. Chowa sie
   POD pasek gorny (ten ma z-index 5 i sticky top 12px), stad nizszy z-index
   i offset uwzgledniajacy jego wysokosc; JS doprecyzowuje `top` po zmierzeniu
   paska, ta wartosc to sensowny zapas, gdyby JS nie wstal. Tylko na stronie
   sekcji - lista floty ma wlasny uklad i nie prosila o to. */
.sekcja-tresc .fleet-search { position: sticky; top: 82px; z-index: 4; }
/* Wyszukiwarka przewija strone do pierwszego trafienia - wiersz ma sie
   zatrzymac POD przyklejonym paskiem, nie pod nim schowac. Dokladna wartosc
   ustawia JS po zmierzeniu paska; ta tutaj to zapas, gdyby JS nie wstal. */
.sekcja-tresc [data-szukaj-wiersz] { scroll-margin-top: var(--waterm-margines-przewijania, 190px); }

/* Trafienie wyszukiwarki - pomaranczowy znacznik przy lewej krawedzi wiersza,
   tuz obok daty. Widac, KTORE wpisy pasuja, a nie tylko ze lista zmalala. */
.fleet-postoje-list li.jest-trafienie,
.fleet-doc-list li.jest-trafienie {
  border-left: 3px solid var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.fleet-doc-list li.jest-trafienie { padding-left: .5rem; border-radius: 0 8px 8px 0; }

.fleet-postoje-list { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.fleet-postoje-list[hidden] { display: none; }
.fleet-postoje-list li {
  padding: .3rem .5rem .3rem .6rem; border-left: 2px solid var(--border);
  border-radius: 0 8px 8px 0;
  display: flex; flex-direction: column; gap: .15rem;
  transition: background .12s ease, border-color .12s ease;
}
.fleet-postoje-list li:hover { background: var(--surface-2); border-color: var(--brand); }
.fleet-postoj-czas { font-size: var(--fs-sm); color: var(--text); font-weight: 600; }
/* Ikona osobno (nie-rozciagajacy sie flex-item), reszta zdania w JEDNYM
   kontenerze tekstowym - inaczej kazdy fragment (zdanie, pogrubione
   nazwisko klienta, adres w nawiasie) staje sie osobnym, sztywnym elementem
   flex i zamiast plynac jak zwykly tekst od lewej do prawej, ustawiaja sie
   obok siebie w wlasnych, waskich kolumienkach (zgloszenie 26.08.2026). */
.fleet-postoj-miejsce { font-size: var(--fs-micro); color: var(--muted); display: flex; align-items: flex-start; gap: .35rem; }
.fleet-postoj-miejsce-ico { flex-shrink: 0; margin-top: .1rem; display: flex; }
.fleet-postoj-miejsce-ico svg { width: 11px; height: 11px; }
.fleet-postoj-miejsce-tekst { flex: 1; min-width: 0; }
.fleet-postoj-wlasne { color: var(--ok-tx); }
.fleet-postoj-hipoteza { color: var(--warn-tx); }
.fleet-postoj-hipoteza b { color: inherit; }
.fleet-empty { padding: 2rem 1rem; text-align: center; }

/* Flota: znacznik zrodla wartosci i plakietki podsumowujace pojazd. */
/* Jeden, spojny kolor (pomaranczowy - marka) dla drobnych znacznikow
   informacyjnych na calej stronie (zrodlo danych, stawka, notatka przy
   liczbie...). Celowo NIE ten sam co `.zrodlo-odczyt` (_zrodlo.html) -
   tamten kolor jest ostrzegawczy z powodu, ktory zostaje: mowi "hipoteza,
   nie fakt" po incydencie z 28.07.2026 i nie moze wtopic sie w zwykla
   plakietke informacyjna. */
.fleet-src {
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--brand-dark); background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  border-radius: 999px; padding: .05rem .35rem; vertical-align: middle; cursor: help;
}
/* Numer polisy w osobnej linii pod data - w waskiej kolumnie karty ciag
   lamal sie w srodku ("PGMFRT-" u gory, "03545577" nizej). */
.fleet-src-blok { display: table; margin-top: .25rem; white-space: nowrap; }
.fleet-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.fleet-tag {
  font-size: var(--fs-micro); font-weight: 700; border-radius: 999px; padding: .2rem .6rem;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.fleet-tag-red { background: var(--danger-bg); color: var(--danger-tx); border-color: var(--danger-bd); }
.fleet-tag-amber { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-bd); }
.fleet-tag-green { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-bd); }

/* Flota: sylwetka pojazdu na karcie (rysunek wektorowy wg typu nadwozia -
   baza nie przechowuje zdjec, tylko sciezki do plikow). */
.fleet-visual {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 92px; border-radius: 11px; margin-bottom: .2rem;
  background: linear-gradient(135deg, var(--surface-2), var(--bg));
  border: 1px solid var(--border); color: var(--muted);
}
.fleet-visual svg { width: 62%; max-width: 190px; height: auto; }
.fleet-visual-po-terminie { color: #ef4444; background: linear-gradient(135deg, var(--danger-bg), var(--surface-2)); }
.fleet-visual-konczy-sie { color: #d97706; background: linear-gradient(135deg, var(--warn-bg), var(--surface-2)); }
.fleet-visual-aktualna { color: #10b981; background: linear-gradient(135deg, var(--ok-bg), var(--surface-2)); }
.fleet-visual-typ {
  position: absolute; right: .6rem; bottom: .5rem;
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: .12rem .5rem;
}

/* Dokumenty na karcie pojazdu: link (gdy plik dostepny) albo przycisk
   kopiujacy sciezke (gdy kopia dysku nie jest jeszcze podpieta). */
/* Nazwy dokumentow: BIALE i pogrubione, pomaranczowe dopiero po najechaniu -
   ten sam wzorzec, co `.link-tresci` i `.karta-lista-tytul`. Kluczowe bylo
   zdjecie pomaranczowego jako koloru domyslnego: w tym module pomaranczowy
   znaczy TRAFIENIE wyszukiwarki i akcent podsekcji, wiec nie moze przy okazji
   znaczyc "to jest link". Pogrubienie zostaje - to nazwy wlasne w liscie
   pelnej dat i plakietek (prosby 26.08.2026). */
.fleet-doc-link {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--text); font-weight: 700; text-decoration: none;
}
.fleet-doc-link:hover, .fleet-doc-link:focus-visible { color: var(--brand); text-decoration: underline; }
.fleet-doc-link svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--muted); }
.fleet-doc-link:hover svg, .fleet-doc-link:focus-visible svg { color: var(--brand); }
.fleet-doc-kopiuj {
  text-align: left; background: transparent; border: 0; padding: 0;
  color: var(--text); font-family: inherit; font-size: inherit;
  font-weight: 700; cursor: pointer;
}
.fleet-doc-kopiuj:hover, .fleet-doc-kopiuj:focus-visible { color: var(--brand); text-decoration: underline; }
.fleet-doc-kopiuj.is-skopiowane { color: var(--ok-tx); font-weight: 700; text-decoration: none; }

/* Flota: zdjecie pojazdu wgrane przez pracownika + przycisk dodania.
   Rownowaga kolumn w karcie - wszystkie pozycje w tym samym rytmie. */
.fleet-visual { overflow: hidden; height: 150px; }
.fleet-visual.has-foto { border-color: var(--border); background: var(--surface-2); }
.fleet-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Przycisk zdjecia zszedl z prawego gornego rogu do lewego DOLNEGO: gorny
   prawy rog karty nalezy od 27.08.2026 do czerwonego "x" (zdjecie auta
   z floty), a prawy dolny zajmuje plakietka nadwozia. */
.fleet-foto-form { position: absolute; left: .55rem; bottom: .55rem; margin: 0; }
.fleet-foto-btn {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  font-size: var(--fs-micro); font-weight: 700; border-radius: 999px; padding: .28rem .65rem;
  background: rgba(255, 255, 255, .92); color: var(--navy);
  border: 1px solid rgba(2, 6, 23, .12); box-shadow: 0 2px 6px rgba(2, 6, 23, .18);
  transition: background .15s ease;
}
.fleet-foto-btn:hover { background: #fff; }
.fleet-foto-btn svg { width: 12px; height: 12px; }
.fleet-foto-btn input { display: none; }

/* Sekcja "co jest w aucie" w tym samym ukladzie co dane techniczne:
   etykieta na gorze, wartosc pod nia, rowne kolumny. */
.fleet-facts-docs { border-top: 1px solid var(--border); padding-top: .75rem; }
.fleet-facts-docs dd { font-size: var(--fs-base); }
.fleet-ok { color: var(--ok-tx); }

/* Zdjecie pojazdu: wyzszy kadr i pelna szerokosc karty, zeby zdjecie
   bylo wyswietlane blisko wlasnej rozdzielczosci (mniej skalowania
   = ostry obraz). Klikniecie otwiera oryginal. */
.fleet-visual.has-foto { height: 190px; padding: 0; }
.fleet-foto-link { display: block; width: 100%; height: 100%; }
.fleet-visual img { object-position: center 55%; }

/* Podblok w kreatorze (zakladanie klienta i inwestycji w kroku 1). */
.wizard-podblok {
  border: 1px dashed var(--border); border-radius: 10px;
  padding: .9rem 1rem .2rem; margin-bottom: 1rem; background: var(--surface-2);
}
.wizard-podblok[hidden] { display: none; }

/* Wyrazny przycisk "Otworz karte klienta" na karcie realizacji. */
.realizacja-stopka {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: .75rem;
}
/* Ten sam przepis co .btn-powrot (przezroczysty, ramka, okragla wypelniona
   ikona) - guzik "idz dalej" i guzik "wroc" maja wygladac 1:1 tak samo,
   rozniac sie tylko ikona i napisem, zeby dwa stojace obok siebie czytaly
   sie jako jedna rodzina przyciskow, a nie dwa rozne style.
   `color: var(--text)` (nie stary --navy) jest juz bezpieczny w ciemnym
   motywie - poprzednia, wypelniona wersja tego przycisku istniala wlasnie
   dlatego, ze wczesniejszy obrys mial ten blad (patrz historia commitow). */
.btn-karta-klienta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem .4rem .4rem; border-radius: 999px;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--text); font-size: var(--fs-base); font-weight: 700;
  text-decoration: none; font-family: inherit; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.btn-karta-klienta:hover {
  border-color: var(--navy); background: var(--surface);
  transform: translateX(2px);
}
.btn-karta-klienta:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-karta-klienta-ico {
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 999px; background: var(--pigulka); color: #fff;
}
.btn-karta-klienta:hover .btn-karta-klienta-ico { background: #000; }
.btn-karta-klienta-ico svg { width: 13px; height: 13px; }
/* Wariant na kolorowym/ciemnym tle hero - tak samo jak .btn-powrot-hero. */
.btn-karta-klienta-hero { border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-karta-klienta-hero:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.btn-karta-klienta-hero .btn-karta-klienta-ico { background: rgba(0, 0, 0, .45); color: #fff; }
.btn-karta-klienta-hero:hover .btn-karta-klienta-ico { background: #000; }
.realizacja-stopka .fleet-doc-meta { margin-left: auto; }

/* "Skad ten klient" - kanal sprzedazy wyrozniony w karcie. */
.klient-kanal {
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border);
}
.klient-kanal-tytul {
  display: block; margin-bottom: .5rem;
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}

/* Listy na karcie klienta (co kupil, historia serwisu). Dlugie nazwy towarow
   maja sie lamac, a nie rozpychac panelu - stad min-width: 0 i lamanie slow. */
.karta-lista { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; }
.karta-lista li {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .55rem 0; border-bottom: 1px solid var(--border); min-width: 0;
}
.karta-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.karta-lista-glowna { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.karta-lista-tytul {
  font-size: var(--fs-base); font-weight: 700; color: var(--text); min-width: 0;
  overflow-wrap: anywhere; text-decoration: none;
}
a.karta-lista-tytul:hover { color: var(--brand); text-decoration: underline; }

/* Link do rekordu w tabeli/liscie (klient, dokument, kontrahent): zwykly
   tekst, pomaranczowy dopiero po najechaniu. Kolorowy od razu robil z calej
   kolumny sciane pomaranczowych napisow, w ktorej nic sie nie wyrozniało
   (prosba 26.08.2026 - najpierw dla dokumentow floty, teraz dla klientow
   w Katalogu). Osobna klasa, a nie poprawka `.forgot-link` - tamta siedzi
   w kilkunastu miejscach, z ekranem logowania wlacznie. */
.link-tresci { color: var(--text); font-weight: 700; text-decoration: none; }
.link-tresci:hover, .link-tresci:focus-visible { color: var(--brand); text-decoration: underline; }

/* KLIKALNY TEKST W TRESCI - REGULA DOMYSLNA, nie do dopisywania recznie.
   Ustalenie (powtorzone 30.08.2026): kazdy tekst, w ktory da sie kliknac
   i ktory prowadzi gdzies dalej, ma byc POGRUBIONY w kolorze zwyklego tekstu,
   a POMARANCZOWY dopiero po najechaniu. `.link-tresci` wyzej mowi to samo od
   dawna - tyle ze trzeba bylo pamietac, zeby ja dopisac przy kazdym nowym
   odnosniku. Nie pamietano: 39 linkow w tresci (nazwiska klientow w
   Dluznikach, inwestycje w Harmonogramie i Godzinach, „i N dalszych" na
   Tablicy) nie mialo ZADNEJ klasy, wiec dziedziczylo `a { color: inherit }` -
   ani pogrubienia, ani reakcji na najechanie.
   Teraz link bez wlasnej klasy dostaje konwencje SAM i nowy ekran nie moze
   juz z niej wypasc. `:not([class])` jest celowe: odnosnik, ktory ma wlasna
   klase (przycisk, kafel, zakladka, plakietka, chip filtra), ma tez wlasny,
   zamierzony wyglad - i tego nie nadpisujemy. */
.content a:not([class]) { color: var(--text); font-weight: 700; text-decoration: none; }
.content a:not([class]):hover,
.content a:not([class]):focus-visible { color: var(--brand); text-decoration: underline; }
.karta-lista-kwota { margin-left: auto; flex-shrink: 0; font-size: var(--fs-base); font-weight: 700; }
.karta-lista-opis { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.karta-lista-rodzaj {
  display: inline-block; font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; border-radius: 999px; padding: .1rem .4rem; margin-right: .3rem;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}

/* Rozwijane sekcje na karcie klienta nie moga sie rozlewac poza panel. */
.module-panel .fleet-docs, .report-panel .fleet-docs { min-width: 0; }
.fleet-doc-list li { min-width: 0; flex-wrap: wrap; }
.fleet-doc-nazwa { overflow-wrap: anywhere; }
.module-panel, .report-panel { min-width: 0; overflow-wrap: anywhere; }
.oferty-col { min-width: 0; }

/* Drugi rzad filtrow (roczniki w Inwestycjach) - lzejszy niz filtry glowne,
   zeby bylo widac, ze to inna os filtrowania. */
.fleet-rok {
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  border-radius: 999px; padding: .3rem .75rem; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  display: inline-flex; align-items: center; gap: .4rem;
}
.fleet-rok:hover { color: var(--text); border-color: var(--muted); }
.fleet-rok.is-active { color: var(--text); border-color: var(--text); background: var(--surface-2); }

/* Rok w tabeli "Podzial na lata" - klikalny (filtruje i zjezdza do listy),
   ale ma wygladac dokladnie jak zwykly pogrubiony tekst sprzed tej zmiany -
   bez koloru linku, bez podkreslenia. Klikalnosc bez zmiany wygladu. */
.rok-skok {
  background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: none;
}

/* Przycisk powrotu do zakladki (kreatory, karty szczegolow). Przezroczysty,
   z wyrazna ramka i ciemna okragla ikona strzalki - ten sam wyglad wszedzie.
   Wariant -hero jest na ciemnym prostokacie, wiec ma jasne kolory. */
.btn-powrot {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem .4rem .4rem; border-radius: 999px;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--text); font-size: var(--fs-base); font-weight: 700;
  text-decoration: none; font-family: inherit; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.btn-powrot:hover {
  border-color: var(--navy); background: var(--surface);
  transform: translateX(-2px);
}
.btn-powrot:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-powrot[hidden] { display: none; }
.btn-powrot-ico {
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 999px; background: var(--pigulka); color: #fff;
}
.btn-powrot-ico svg { width: 13px; height: 13px; transform: rotate(180deg); }
.btn-powrot:hover .btn-powrot-ico { background: #000; }

.btn-powrot-hero {
  border-color: rgba(255, 255, 255, .35); color: #fff;
}
.btn-powrot-hero:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.btn-powrot-hero .btn-powrot-ico { background: rgba(0, 0, 0, .45); color: #fff; }
.btn-powrot-hero:hover .btn-powrot-ico { background: #000; }
@media (prefers-reduced-motion: reduce) { .btn-powrot:hover { transform: none; } }

/* Pasek filtrow katalogu: etykieta nad kontrolka, wszystko w jednym rzedzie. */
.katalog-filtry {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; margin-top: .9rem;
}
.katalog-filtr { display: flex; flex-direction: column; gap: .25rem; min-width: 9.5rem; flex: 1 1 9.5rem; }
.katalog-filtr-waski { min-width: 6rem; flex: 0 1 6.5rem; }
.katalog-filtr > span {
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.katalog-filtr select, .katalog-filtr input {
  width: 100%; padding: .45rem .55rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text);
  font-family: inherit; font-size: var(--fs-base);
}
.katalog-filtr select:focus, .katalog-filtr input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.katalog-reset { padding: .45rem .8rem; font-size: var(--fs-base); }
#katalogWyniki { transition: opacity .12s ease; }
#katalogWyniki.is-ladowanie { opacity: .45; }

/* Karta towaru: ceny i stany obok siebie, na waskim ekranie jedno pod drugim. */
.katalog-kolumny { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; }
@media (max-width: 900px) { .katalog-kolumny { grid-template-columns: 1fr; } }
.katalog-kolumny .section-block { margin-bottom: 0; }
/* Ikona zamiast inicjalow w kaflu towaru. */
.klient-avatar svg { width: 18px; height: 18px; }

/* Wyszukiwarka klientow: wyniki filtruja sie w kafelkach ponizej paska.
   Podczas pobierania blok lekko przygasa, zeby bylo widac, ze pracuje. */
#klienciWyniki { transition: opacity .12s ease; }
#klienciWyniki.is-ladowanie { opacity: .45; }
/* display z .fleet-search-clear bije domyslne [hidden] przegladarki. */
.fleet-search-clear[hidden] { display: none; }

/* Potwierdzenie usuniecia na srodku ekranu (zamiast okienka przegladarki):
   numer tego, co zniknie, jest najwazniejszym elementem komunikatu. */
.confirm-modal {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(2, 6, 23, .6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.confirm-modal[hidden] { display: none; }
.confirm-box {
  width: min(420px, 100%); text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.6rem 1.5rem 1.3rem; box-shadow: var(--shadow);
}
.confirm-ico {
  display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto .9rem;
  border-radius: 999px; background: var(--danger-bg); color: var(--danger-tx);
  border: 1px solid var(--danger-bd);
}
.confirm-ico svg { width: 22px; height: 22px; }
.confirm-title { margin: 0; font-size: var(--fs-lg); }
.confirm-numer {
  margin: .55rem 0 0; font-size: var(--fs-lg); font-weight: 800; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: .35rem .6rem; display: inline-block;
}
.confirm-numer[hidden] { display: none; }
.confirm-text { margin: .8rem 0 0; font-size: var(--fs-base); line-height: 1.5; color: var(--muted); }
.confirm-actions {
  display: flex; justify-content: center; gap: .6rem; margin-top: 1.3rem; flex-wrap: wrap;
}
.confirm-actions .confirm-ok { font-size: var(--fs-base); padding: .45rem .9rem; font-weight: 700; }
.confirm-ico[hidden] { display: none; }
/* Wariant "cos przybedzie" - zielony ptaszek zamiast czerwonego dzwonka.
   Kolor niesie tu tresc: czerwone okno zabiera, zielone dodaje. */
.confirm-ico-ok { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-bd); }
.confirm-actions .confirm-ok-dodaj {
  background: var(--ok-tx); border: 1px solid var(--ok-tx); color: #fff;
}
.confirm-actions .confirm-ok-dodaj:hover { filter: brightness(1.08); }

/* Blad formatu pod polem formularza (kod pocztowy, e-mail, NIP, kwota).
   Osobno od .field-msg z ekranu logowania: tam miejsce jest zarezerwowane
   na stale, tu komunikat pojawia sie tylko przy zlym polu. */
.pole-blad {
  display: flex; align-items: flex-start; gap: .35rem;
  margin: .35rem 0 0; font-size: var(--fs-sm); line-height: 1.35;
  color: var(--danger-tx);
}
.pole-blad::before { content: "⚠"; flex-shrink: 0; }
.pole-blad[hidden] { display: none; }
input.pole-zle, select.pole-zle, textarea.pole-zle {
  border-color: var(--danger-tx) !important;
  background: var(--danger-bg);
}

/* Opis pojazdu/realizacji jest klikalny i otwiera cala karte na srodku
   ekranu - wspolny wzorzec dla inwestycje.html (realizacje). Flota juz
   z niego nie korzysta (cztery osobne przyciski nizej), ale te klasy
   zostaja - inwestycje.html dalej ich uzywa. */
.fleet-card.is-klikalna { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.fleet-card.is-klikalna:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.fleet-card-open { cursor: pointer; border-radius: 8px; }
.fleet-card-open:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.fleet-card-open:hover .fleet-name { color: var(--brand); }
.fleet-card-open .fleet-name::after {
  content: "›"; margin-left: .3rem; color: var(--muted); font-weight: 700;
}

/* Flota: cztery przyciski na dole kazdej karty - kazdy prowadzi na osobna
   strone z JEDNA konkretna informacja (mapa / historia polis / dokumenty /
   postoje), zawsze w tym samym ukladzie 2x2, niezaleznie od tego, ile
   dokumentow czy historii ma dane auto. Kazdy ma wlasna ikone w kolorowym
   kolku i wlasny odcien (info/warn/ai/ok) - cztery jednakowe szare pigulki
   nie dawalo sie odroznic na pierwszy rzut oka (ustalenie 26.08.2026). */
.fleet-card-linki {
  display: grid; grid-template-columns: 1fr 1fr; gap: .55rem;
  margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--border);
}
.fleet-card-link {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .6rem .5rem .5rem; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
  font-size: var(--fs-sm); font-weight: 700;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.fleet-card-link:hover {
  border-color: var(--akcent); background: var(--surface);
  box-shadow: 0 4px 12px -6px rgba(2, 8, 23, .35); transform: translateY(-1px);
}
.fleet-card-link-glowna { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.fleet-card-link-ico {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--akcent-tlo); color: var(--akcent);
}
.fleet-card-link-ico svg { width: 13px; height: 13px; }
.fleet-card-link-tekst {
  min-width: 0; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fleet-card-link .fleet-filter-count { flex-shrink: 0; background: var(--surface); color: var(--muted); }
.fleet-card-link-mapa      { --akcent: var(--info-tx); --akcent-tlo: var(--info-bg); }
.fleet-card-link-historia  { --akcent: var(--warn-tx); --akcent-tlo: var(--warn-bg); }
.fleet-card-link-dokumenty { --akcent: var(--ai-tx);   --akcent-tlo: var(--ai-bg); }
.fleet-card-link-postoje   { --akcent: var(--ok-tx);   --akcent-tlo: var(--ok-bg); }
@media (max-width: 420px) {
  .fleet-card-linki { grid-template-columns: 1fr; }
}

/* BEZ ROZMYCIA TLA. `backdrop-filter` kaze przegladarce rozmywac CALA strone
   pod oknem przy kazdej klatce - przy dlugiej liscie kart (kilkanascie
   wejsciowek plus ukryte zrodla) przewijanie zaczynalo sie sciac. Ciemniejsza
   przeslona daje ten sam efekt „reszta strony odchodzi na drugi plan" i nic
   nie kosztuje. Wspolny modal - uzywaja go tez inwestycje.html, pracownicy.html
   i ustawienia konta, nie tylko flota. */
.veh-modal {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(2, 6, 23, .74);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  /* Zawartosc okna nie ma wplywu na uklad strony pod spodem. */
  contain: layout paint;
}
.veh-modal[hidden] { display: none; }
.veh-modal-box {
  width: min(660px, 100%); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 1rem 1.3rem 1.2rem; box-shadow: var(--shadow);
}
.veh-modal-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border);
}
.veh-modal-title { margin: 0; font-size: var(--fs-lg); }
/* Pasek przewijania nie moze zaslaniac dat po prawej stronie wierszy. */
.veh-modal-body {
  overflow-y: auto; scrollbar-gutter: stable;
  padding: 1rem .5rem 0 0; min-width: 0;
}
/* Kopia karty w oknie: bez wlasnej ramki i tla - okno jest juz karta.
   Uzywa tego tez inwestycje.html (wlasna karta na srodku ekranu). */
.fleet-card-w-oknie { border: 0; padding: 0; background: transparent; }
.fleet-card-w-oknie .fleet-visual.has-foto { height: 230px; }

/* Alert zaleglosci w panelu Statystyki: ma przyciagac wzrok, ale zostac
   czescia sekcji - stad czerwona krawedz i pulsujaca kropka zamiast
   krzykliwego czerwonego prostokata. */
.alert-tile {
  position: relative; display: flex; align-items: center; gap: .8rem;
  margin-top: 1rem; padding: .85rem 1rem;
  background: linear-gradient(135deg, var(--danger-bg), var(--surface));
  border: 1px solid var(--danger-bd); border-left: 4px solid #ef4444;
  border-radius: 12px; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.alert-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(239, 68, 68, .75);
}
@media (prefers-reduced-motion: reduce) { .alert-tile:hover { transform: none; } }
.alert-tile-puls {
  position: absolute; top: .7rem; right: .8rem;
  width: 8px; height: 8px; border-radius: 999px; background: #ef4444;
  animation: alert-puls 2.2s ease-out infinite;
}
@keyframes alert-puls {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); }
  70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@media (prefers-reduced-motion: reduce) { .alert-tile-puls { animation: none; } }
.alert-tile-ico {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 6px 14px -8px rgba(185, 28, 28, .9);
}
.alert-tile-ico svg { width: 18px; height: 18px; }
.alert-tile-tresc { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.alert-tile-label {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--danger-tx);
}
.alert-tile-kwota { font-size: var(--fs-lg); font-weight: 800; color: var(--text); line-height: 1.15; }
.alert-tile-opis { font-size: var(--fs-sm); color: var(--muted); }
.alert-tile-strzalka { margin-left: auto; color: var(--danger-tx); display: inline-flex; flex-shrink: 0; }
.alert-tile-strzalka svg { width: 15px; height: 15px; }

/* ============================================================
   Klienci: karta kontrahenta na liscie + stronicowanie
   ============================================================ */
.klient-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .8rem;
  text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.klient-card:hover {
  transform: translateY(-2px); border-color: var(--brand);
  box-shadow: 0 12px 24px -16px rgba(2, 6, 23, .6);
}
@media (prefers-reduced-motion: reduce) { .klient-card:hover { transform: none; } }
.klient-card-head { display: flex; align-items: flex-start; gap: .7rem; }
.klient-avatar {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: var(--fs-base); font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--navy), #1e293b);
}
.klient-card-tytul { min-width: 0; flex: 1; }
.klient-card-tytul h3 {
  margin: 0 0 .15rem; font-size: var(--fs-md); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.klient-card-adres { font-size: var(--fs-sm); color: var(--muted); }

.stronicowanie {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 1.4rem; flex-wrap: wrap;
}
.stronicowanie-info { font-size: var(--fs-base); font-weight: 700; color: var(--muted); }
.stronicowanie .btn-wizard svg { width: 13px; height: 13px; }
.stronicowanie a:first-child svg { transform: rotate(180deg); }

/* Pasek udzialu w raportach - prosty wskaznik w wierszu tabeli. */
/* ============ RAPORTY ============ */
/* Rowne polowki: listy „Najwieksi klienci" i „Najlepiej sprzedajace sie" staly
   dotad w waskiej kolumnie po prawej i nazwy towarow lamaly sie po trzy razy. */
.raporty-kolumny {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  align-items: start; margin-bottom: 1.2rem;
}
@media (max-width: 1100px) { .raporty-kolumny { grid-template-columns: 1fr; } }

/* Z czego byl przychod - kafle nad tabela lat. */
.rap-rok-glowa {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: var(--shadow);
}
.rap-rok-kafle {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.rap-rok-kafel {
  display: flex; flex-direction: column; gap: .18rem;
  padding: .8rem .9rem; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface-2);
}
.rap-rok-kafel-mocny { border-color: var(--brand-light); border-left: 4px solid var(--brand); }
.rap-rok-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.rap-rok-wartosc {
  font-size: var(--fs-lg); font-weight: 800; color: var(--tekst-mocny);
  font-variant-numeric: tabular-nums;
}
.rap-rok-opis { font-size: var(--fs-sm); color: var(--muted); }

/* Jeden pasek skladu przychodu zamiast trzech kolumn liczb - udzialy widac
   od razu, a kwoty i tak stoja obok. */
.rap-sklad {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
}
.rap-sklad-cz { display: block; height: 100%; }
.rap-sklad-si { background: #3b82f6; }
.rap-sklad-sp { background: #8b5cf6; }
.rap-sklad-su { background: var(--brand); }
.rap-sklad-legenda {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin-top: .35rem; font-size: var(--fs-sm); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rap-kropka {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  margin-right: .25rem; vertical-align: baseline;
}

/* Panel skrotu z wyjsciem do pelnych danych. */
.rap-panel { display: flex; flex-direction: column; }
.rap-panel-glowa {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .8rem; margin-bottom: .8rem;
}
.rap-panel-glowa .muted { font-size: var(--fs-sm); }
/* Duza, pomaranczowa lupa - ma sie rzucac w oczy, bo to jedyne wejscie
   w pelne dane. */
.rap-lupa {
  display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
  border: 0; border-radius: 11px; background: var(--brand); color: #fff;
  cursor: pointer; box-shadow: 0 2px 6px rgba(2, 8, 23, .2);
  transition: background .15s ease, transform .1s ease;
}
.rap-lupa:hover { background: var(--brand-dark); }
.rap-lupa:active { transform: translateY(1px); }
.rap-lupa svg { width: 19px; height: 19px; }
.rap-skrot {
  display: grid; gap: .5rem; margin-bottom: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.rap-skrot-poz {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .55rem .7rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.rap-skrot-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.rap-skrot-wartosc {
  font-size: var(--fs-md); font-weight: 800; color: var(--tekst-mocny);
  font-variant-numeric: tabular-nums;
}
.rap-btn-wiecej { width: 100%; height: 36px; margin-top: .9rem; }
/* Okno z pelnymi danymi: tabela przewija sie w srodku, naglowek i nota stoja. */
.rap-okno { max-width: 1100px; }
.rap-okno-tresc { overflow: auto; max-height: 62vh; margin: .6rem 0; }
.rap-okno-tresc .tbl thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }

.raport-pasek {
  display: block; height: 8px; border-radius: 999px; min-width: 2px;
  background: linear-gradient(90deg, var(--brand), #f9a03f);
}

/* Stronicowanie: nieaktywne "Poprzednia/Nastepna" na krancach listy. */
.stronicowanie .btn-wizard.is-nieaktywny {
  opacity: .4; cursor: default; pointer-events: none;
}
.stronicowanie { flex-wrap: wrap; gap: .5rem; }
.stronicowanie .btn-wizard { padding: .45rem .8rem; }

/* "Zadzwonil" w liscie przegladow: imie i nazwisko musi byc czytelne,
   a nie ucinane przez white-space: nowrap w komorce akcji. */
.tbl-actions:has(.kontakt-znacznik) { white-space: normal; }
.kontakt-znacznik {
  display: inline-flex; align-items: center; gap: .5rem; text-align: left;
  background: var(--ok-bg); border: 1px solid var(--ok-bd); border-radius: 10px;
  padding: .4rem .7rem; max-width: 100%;
}
.kontakt-znacznik-ico {
  display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 999px; background: var(--ok-tx); color: #fff;
}
.kontakt-znacznik-ico svg { width: 12px; height: 12px; }
.kontakt-znacznik-tekst { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.kontakt-znacznik-tekst b { font-size: var(--fs-base); color: var(--ok-tx); overflow-wrap: anywhere; }
.kontakt-znacznik-tekst .mono-num { font-size: var(--fs-sm); color: var(--muted); }
#magWyniki, #serwisWyniki { transition: opacity .12s ease; scroll-margin-top: 5rem; }
#magWyniki.is-ladowanie, #serwisWyniki.is-ladowanie { opacity: .45; }
/* Nazwisko dzwoniacego w jednej linii; tabela w razie czego przewinie sie
   poziomo (table-wrap ma overflow-x: auto), zamiast lamac znacznik. */
.kontakt-znacznik-tekst b, .kontakt-znacznik-tekst .mono-num { white-space: nowrap; }
.tbl td:has(.kontakt-znacznik) { min-width: 13rem; }
/* Znacznik "zadzwoniono" i "Cofnij" jedno pod drugim - przycisk cofania jest
   rzadko potrzebny, wiec nie ma stac przed znacznikiem, ale ma byc widoczny
   bez szukania. */
.kontakt-akcje { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.kontakt-akcje form { margin: 0; }
.kontakt-cofnij { width: 100px; height: 26px; font-size: var(--fs-sm); }
.kontakt-dzwon { width: 132px; }

/* --- Opieka IT: kafle liczbowe (kopie zapasowe, dane w systemie) ------------
   Ten sam ksztalt co kafle w Aktywnosci, ale wieksza liczba: tu czyta sie
   pojedyncze wartosci ("208.5 GB"), a nie porownuje kolumny. */
.kop-kafle { display: grid; gap: .7rem; margin: 1rem 0 1.4rem;
             grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.kop-kafel { background: var(--surface); border: 1px solid var(--border);
             border-radius: 12px; padding: .85rem 1rem; }
.kop-liczba { font-size: var(--fs-xl); font-weight: 700; color: var(--text); line-height: 1.15;
              font-variant-numeric: tabular-nums; }
.kop-etykieta { font-size: var(--fs-base); color: var(--muted); margin-top: .3rem; line-height: 1.35; }
.kop-kafel-uwaga .kop-liczba { color: var(--danger-tx); }

.opieka-podpis { color: var(--muted); font-size: var(--fs-base); margin: .2rem 0 .8rem; max-width: 60rem; }

/* Lancuch pochodzenia danych - poziomy na szerokim ekranie, pionowy na telefonie. */
.dane-lancuch { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem;
                margin: .8rem 0 1.4rem; }
.dane-krok { flex: 1 1 11rem; background: var(--surface); border: 1px solid var(--border);
             border-radius: 10px; padding: .7rem .85rem; display: flex; flex-direction: column; gap: .25rem; }
.dane-krok b { font-size: var(--fs-md); color: var(--text); }
.dane-krok span { font-size: var(--fs-base); color: var(--muted); line-height: 1.35; }
.dane-strzalka { align-self: center; color: var(--muted); font-size: var(--fs-lg); }
@media (max-width: 700px) { .dane-strzalka { display: none; } }

.dane-uwagi { font-size: var(--fs-base); color: var(--muted); }

/* Pochodzenie wartosci: fakt ze zrodla / wpis czlowieka / odczyt automatyczny.
   Odczyt dostaje kolor ostrzegawczy, bo to hipoteza - po wpadkach z 28.07.2026
   (tablica z kodu pocztowego, "wygasle" OC przy aktualnej polisie w folderze)
   nie moze wygladac tak samo pewnie jak dane wpisane przez czlowieka. */
.zrodlo {
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  border-radius: 999px; padding: .05rem .35rem; vertical-align: middle;
  cursor: help; white-space: nowrap; border: 1px solid transparent;
}
a.zrodlo { text-decoration: none; cursor: pointer; }
a.zrodlo:hover { filter: brightness(.94); text-decoration: none; }
.zrodlo-kartoteka { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
.zrodlo-reczne { color: var(--ok-tx); background: var(--ok-bg); border-color: var(--ok-bd); }
.zrodlo-odczyt { color: var(--warn-tx); background: var(--warn-bg); border-color: var(--warn-bd); }
.zrodlo-legenda {
  margin: 0 0 1rem; padding: .6rem .85rem; font-size: var(--fs-sm); line-height: 1.7;
  color: var(--muted); background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--warn-bd); border-radius: 10px;
}

/* Plik, z ktorego wyczytano wartosc - podswietlony po klknieciu w znacznik
   "odczyt", zeby nie trzeba go bylo szukac wzrokiem na dlugiej liscie. */
.fleet-doc-list li.jest-zrodlem {
  background: var(--warn-bg); border-radius: 8px;
  box-shadow: inset 3px 0 0 var(--warn-tx);
  padding-left: .5rem; margin-left: -.5rem;
}

/* ---------- Konta i poziomy dostepu (Ustawienia) ---------- */
/* Kazdy poziom ma swoj kolor - ten sam pasek przy wierszu i przy szczegolach,
   wiec widac przynaleznosc bez czytania etykiety. Kolory z palety aplikacji,
   zeby ekran nalezal do reszty systemu, a nie wygladal jak wklejka. */
/* Kolor pisma DOBRANY DO JASNOSCI poziomu. Bialy tekst na jasnym cyjanie,
   jasnym pomaranczu czy jasnej zieleni ma kontrast 1.8:1 - w motywie ciemnym
   plakietki „Ksiegowosc", „Produkcja" czy „Zarzad posredni" byly przez to
   nieczytelne. Ciemne poziomy zostaja z bialym pismem. */
.konta-tbl tr.konta-p-zarzad         { --poziom: var(--brand);       --poziom-pismo: #fff; }
.konta-tbl tr.konta-p-posredni       { --poziom: var(--brand-light); --poziom-pismo: #1a1206; }
.konta-tbl tr.konta-p-ksiegowosc     { --poziom: var(--ai);          --poziom-pismo: #04222b; }
.konta-tbl tr.konta-p-handlowa       { --poziom: #6366f1;            --poziom-pismo: #fff; }
.konta-tbl tr.konta-p-handlowa_basic { --poziom: #94a3b8;            --poziom-pismo: #121a27; }
.konta-tbl tr.konta-p-produkcja      { --poziom: #34d399;            --poziom-pismo: #04241a; }

/* Ten sam kolor obowiazuje takze karte w oknie. */
.konto-karta.konta-p-zarzad         { --poziom: var(--brand);       --poziom-pismo: #fff; }
.konto-karta.konta-p-posredni       { --poziom: var(--brand-light); --poziom-pismo: #1a1206; }
.konto-karta.konta-p-ksiegowosc     { --poziom: var(--ai);          --poziom-pismo: #04222b; }
.konto-karta.konta-p-handlowa       { --poziom: #6366f1;            --poziom-pismo: #fff; }
.konto-karta.konta-p-handlowa_basic { --poziom: #94a3b8;            --poziom-pismo: #121a27; }
.konto-karta.konta-p-produkcja      { --poziom: #34d399;            --poziom-pismo: #04241a; }

.konta-tbl td { vertical-align: middle; }
.konta-tbl tbody td:first-child {
  box-shadow: inset 3px 0 0 var(--poziom, var(--border));
}
.konta-osoba { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.konta-osoba > div { min-width: 0; }
.konta-inicjaly {
  flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: .02em;
  color: var(--poziom, var(--muted)); background: var(--surface-2);
  border: 1px solid var(--border);
}
.konta-meta { display: block; font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
/* Konta rowne sobie z ustalenia (Patrycjusz i Marcin) - znacznik ma byc
   czytelny, ale nie glosniejszy niz nazwisko nad nim. */
.konta-para {
  display: inline-block; margin-top: .2rem; font-size: var(--fs-sm); font-weight: 600;
  color: var(--poziom, var(--muted)); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: .05rem .45rem;
}

.konta-wybor select {
  font: inherit; font-size: var(--fs-base); font-weight: 600; color: var(--text);
  padding: .3rem 1.6rem .3rem .55rem; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); cursor: pointer;
  box-shadow: inset 3px 0 0 var(--poziom, var(--border));
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right .75rem center, right .55rem center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.konta-wybor select:hover { border-color: var(--poziom, var(--brand)); }
.konta-wybor select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.konta-znak {
  font-size: var(--fs-sm); font-weight: 700; border-radius: 999px; padding: .15rem .55rem;
  border: 1px solid transparent; white-space: nowrap;
}
.konta-znak-ok    { color: var(--ok-tx);   background: var(--ok-bg);   border-color: var(--ok-bd); }
.konta-znak-uwaga { color: var(--warn-tx); background: var(--warn-bg); border-color: var(--warn-bd); }

/* Pasek akcji: dwie kolumny o stalej szerokosci. Przyciski nie zmieniaja juz
   etykiet, a rowna siatka trzyma je w pionie miedzy wierszami - wczesniej
   dluzszy napis przesuwal caly pasek. */
.konta-th-akcje { text-align: right; white-space: nowrap; }
.konta-akcje {
  display: grid; grid-template-columns: 6.5rem 9.5rem 7rem; gap: .4rem;
  justify-content: end; align-items: center;
}
.konta-akcje .btn-small { width: 100%; justify-content: center; white-space: nowrap; }

/* Karta konta w oknie na srodku ekranu. */
.konto-karta { display: block; }
.konto-karta-glowa {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding-bottom: .8rem; margin-bottom: .9rem; border-bottom: 1px solid var(--border);
}
.konto-karta-glowa h3 { margin: 0; font-size: var(--fs-lg); }
.konto-karta-glowa > div { min-width: 0; flex: 1; }
.konta-inicjaly-duze { width: 2.8rem; height: 2.8rem; font-size: var(--fs-md); }
.konto-karta-poziom {
  font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: .25rem .7rem; border-radius: 999px; white-space: nowrap;
  color: var(--poziom-pismo, var(--surface)); background: var(--poziom, var(--muted));
}
.konto-karta-opis { margin: .9rem 0 .8rem; font-size: var(--fs-base); color: var(--text); }

.konta-prawa { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.konta-prawo {
  font-size: var(--fs-sm); font-weight: 600; border-radius: 8px; padding: .2rem .55rem;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
}
.konta-prawo.ma { color: var(--ok-tx); background: var(--ok-bg); border-color: var(--ok-bd); }
.konta-prawo.nie-ma::before { content: "— "; }

.konta-zakladki { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .5rem; }
.konta-zakladki > div { display: flex; flex-wrap: wrap; gap: .3rem; }
.konta-zakladki-label {
  flex-shrink: 0; width: 4.5rem; font-size: var(--fs-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.konta-zakl {
  font-size: var(--fs-sm); font-weight: 600; border-radius: 7px; padding: .18rem .5rem;
  color: var(--text); background: var(--surface); border: 1px solid var(--poziom, var(--border));
}
.konta-zakl-brak {
  color: var(--muted); background: transparent; border-style: dashed;
  border-color: var(--border); text-decoration: line-through;
  text-decoration-color: var(--border);
}
.konta-stopka { margin: .8rem 0 0; font-size: var(--fs-sm); color: var(--muted); }

@media (max-width: 720px) {
  .konta-akcje { grid-template-columns: 1fr; justify-content: stretch; }
  .konta-zakladki { flex-direction: column; gap: .25rem; }
  .konta-zakladki-label { width: auto; }
}

/* Kwota zasloniona przed poziomem bez prawa do cen. Kropki zamiast pustego
   miejsca - widac, ze cos tu jest, tylko nie dla tego konta. */
.kwota-ukryta {
  display: inline-block; letter-spacing: .12em; color: var(--muted);
  background: var(--surface-2); border: 1px dashed var(--border);
  border-radius: 6px; padding: 0 .4rem; cursor: help; font-weight: 700;
}

/* Potwierdzenie udanej akcji - "ptaszek" przed trescia. */
.alert-sukces { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-bd); }
.alert-sukces::before { content: "✓ "; font-weight: 800; }

/* Wybor poziomow: kilka naraz, kazdy w swoim kolorze. Pigulki zamiast listy,
   bo trzeba widziec od razu, ktore konto laczy dwa zakresy. */
.konta-poziomy { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; max-width: 22rem; }
.konta-poziom-opcja {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  padding: .12rem .5rem .12rem .35rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
}
.konta-poziom-opcja:hover { border-color: var(--poziom, var(--brand)); color: var(--text); }
/* Wyglad zaznaczonego poziomu wisi na STANIE POLA, nie na klasie doklejanej
   przy renderowaniu strony. Klasa mowila prawde tylko do pierwszego
   klikniecia: zaznaczales kolejny poziom i nic sie nie zmienialo, bo zmiane
   widac bylo dopiero po zapisie i przeladowaniu. `:has()` zalatwia to bez
   skryptu, a `.jest-wybrany` zostaje dla przegladarki, ktora go nie zna. */
.konta-poziom-opcja.jest-wybrany,
.konta-poziom-opcja:has(input:checked) {
  color: var(--text); border-color: var(--poziom, var(--brand));
  box-shadow: inset 3px 0 0 var(--poziom, var(--brand));
  background: color-mix(in srgb, var(--poziom, var(--brand)) 12%, var(--surface));
}
/* ...i odwrotnie: po odznaczeniu pigulka wraca do postaci podstawowej, nawet
   jesli klase `jest-wybrany` wpisal serwer. */
.konta-poziom-opcja.jest-wybrany:has(input:not(:checked)) {
  color: var(--muted); border-color: var(--border);
  box-shadow: none; background: var(--surface);
}
.konta-poziom-opcja input { accent-color: var(--poziom, var(--brand)); margin: 0; }
.konta-zapisz { margin-top: .35rem; }
/* Kolor poziomu i dobrane do niego pismo definiujemy na SAMEJ klasie
   poziomu, bez prefiksu tabeli czy karty - te same plakietki wystepuja
   w trzech miejscach i przy trzech osobnych zestawach regul jeden z nich
   zawsze zostawal z bialym pismem na jasnym tle (kontrast 1.8:1). */
.konta-p-zarzad         { --poziom: var(--brand);       --poziom-pismo: #fff; }
.konta-p-posredni       { --poziom: var(--brand-light); --poziom-pismo: #2a1a08; }
.konta-p-ksiegowosc     { --poziom: var(--ai);          --poziom-pismo: #04222b; }
.konta-p-handlowa       { --poziom: #6366f1;            --poziom-pismo: #fff; }
.konta-p-handlowa_basic { --poziom: #94a3b8;            --poziom-pismo: #121a27; }
.konta-p-magazyn        { --poziom: #0ea5e9;            --poziom-pismo: #03202e; }
.konta-p-produkcja      { --poziom: #34d399;            --poziom-pismo: #04241a; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============ MAGAZYN: przekroj calego stanu ============ */
/* Tabela nizej mowi "co lezy". Ten pasek mowi, co z tego wynika - gdzie siedza
   pieniadze i ktora czesc stanu w ogole nie wchodzi do wyliczonej wartosci. */
.magazyn-przekroj {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.1rem 1.2rem; margin-bottom: 1.6rem; box-shadow: var(--shadow);
}
.mag-kafle {
  display: grid; gap: .7rem; margin-bottom: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.mag-kafel {
  display: flex; flex-direction: column; gap: .18rem; position: relative;
  padding: .85rem .95rem .9rem; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface-2); overflow: hidden;
}
.mag-kafel-ico {
  position: absolute; top: .7rem; right: .8rem;
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 8px; background: var(--surface); color: var(--muted);
  border: 1px solid var(--border);
}
.mag-kafel-ico svg { width: 14px; height: 14px; }
.mag-kafel-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); padding-right: 2rem;
}
.mag-kafel-wartosc {
  font-size: var(--fs-lg); font-weight: 800; color: var(--tekst-mocny);
  font-variant-numeric: tabular-nums;
}
.mag-kafel-opis { font-size: var(--fs-sm); color: var(--muted); }
/* Kafel wiodacy i kafel ostrzegawczy - te dwie liczby czyta sie pierwsze. */
.mag-kafel-mocny { border-color: var(--brand-light); border-left: 4px solid var(--brand); }
.mag-kafel-mocny .mag-kafel-ico { color: var(--brand); border-color: var(--brand-light); }
.mag-kafel-uwaga { border-color: var(--warn-bd); background: var(--warn-bg); }
.mag-kafel-uwaga .mag-kafel-ico { color: var(--warn-tx); border-color: var(--warn-bd); }
.mag-kafel-uwaga .mag-kafel-label, .mag-kafel-uwaga .mag-kafel-opis { color: var(--warn-tx); }

.mag-marki { display: grid; gap: .4rem; }
.mag-marki-tytul {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .15rem;
}
.mag-marka {
  display: grid; align-items: center; gap: .7rem;
  grid-template-columns: minmax(90px, 150px) 1fr auto auto;
}
.mag-marka-nazwa {
  font-size: var(--fs-base); font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mag-marka-pasek {
  display: block; height: 9px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); overflow: hidden;
}
.mag-marka-wypelnienie {
  display: block; height: 100%; min-width: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-light), var(--brand));
}
.mag-marka-kwota { font-size: var(--fs-base); font-weight: 700; color: var(--tekst-mocny); }
.mag-marka-ile { font-size: var(--fs-sm); color: var(--muted); min-width: 4.5rem; text-align: right; }
.mag-btn-towary { width: 138px; }
@media (max-width: 760px) {
  .mag-marka { grid-template-columns: 1fr auto; }
  .mag-marka-pasek { grid-column: 1 / -1; }
}

/* ============ E-COMMERCE (sprzedaz internetowa) ============ */
/* Wlasny wykres slupkowy: .bar-chart z pulpitu ma na stale szesc kolumn
   i slupki pelnej wysokosci - odpowiada na pytanie "ktory miesiac", a tutaj
   trzeba odpowiedziec "ile" przy 24 miesiacach obok siebie. */
/* Glowa panelu: tytul po lewej, legenda i „lapka” pelnego ekranu po prawej -
   tak samo, jak przy wykresie ofert. */
.ecom-chart-glowa {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.ecom-chart-glowa h3 { margin: 0 0 .15rem; font-size: var(--fs-md); }
/* PODSUMOWANIE ROK PO ROKU - druga czesc TEJ SAMEJ sekcji, pod wykresem.
   Kreska u gory zamiast nowego prostokata: to dalej „Sprzedaz miesiac po
   miesiacu", tylko z innej strony - rok zamiast miesiaca. */
.ecom-lata-h {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin: 1.1rem 0 .5rem; padding-top: .9rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-md); font-weight: 700; color: var(--text);
}
.ecom-lata-h svg { width: 18px; height: 18px; color: var(--brand); }
.ecom-chart {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: end; gap: .25rem; height: 210px; margin: .6rem 0 .2rem;
}
.ecom-chart-col {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: .3rem; height: 100%; min-width: 0;
}
.ecom-chart-val {
  font-size: var(--fs-micro); font-weight: 700; color: var(--muted); line-height: 1;
}
.ecom-chart-slupek {
  width: 100%; min-height: 2px; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
  transition: filter .15s ease;
}
.ecom-chart-col { cursor: default; }
.ecom-chart-col:hover .ecom-chart-slupek { filter: brightness(1.15); }
.ecom-chart-msc {
  font-size: var(--fs-micro); font-weight: 600; color: var(--muted); line-height: 1;
}
/* Waskie ekrany: podpisy miesiecy nie zmieszcza sie pionowo obok siebie. */
@media (max-width: 900px) {
  .ecom-chart-val { display: none; }
  .ecom-chart-msc { writing-mode: vertical-rl; }
}

/* Podpis w kolorowym kaflu statystyki. Domyslny .stat-note ma kolor --muted,
   liczony na biale tlo panelu - na gradiencie kafla byl nieczytelny. */
.stat-card .stat-note { color: rgba(255, 255, 255, .85); }
.stat-card .stat-note b { color: #fff; }

/* ============ USTAWIENIA (sekcje) + rozbudowane menu konta ============ */
/* Spis sekcji na gorze Ustawien - kotwice, nie zakladki na JS. */
.ust-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }
.ust-nav-link {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-base); font-weight: 700; color: var(--text);
}
.ust-nav-link:hover { border-color: var(--brand); color: var(--brand); }
.ust-nav-link svg { width: 14px; height: 14px; }
.ust-sekcja { margin-bottom: 2rem; }
.ust-opis { margin: 0 0 1rem; font-size: var(--fs-base); color: var(--muted); max-width: 62rem; }
.ust-akcje { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.ust-akcje .btn-small { display: inline-flex; align-items: center; gap: .4rem; }
.ust-akcje svg { width: 13px; height: 13px; }

/* Blok akcji wewnatrz karty konta (haslo, usuniecie) - wyrozniony, bo to
   po niego najczesciej otwiera sie karte. */
.konto-blok {
  margin: 1rem 0; padding: .85rem .95rem; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.konto-blok-label {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem;
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.konto-blok-label svg { width: 12px; height: 12px; }
/* Przyciski w karcie konta maja pelne etykiety ("Wyslij link do nowego hasla"),
   wiec musza moc sie zawinac - .konta-akcje z tabeli trzyma je w jednej linii
   i przycinalo tekst. */
/* Przyciski akcji w rogu sekcji (prawy dol), nie przyklejone do lewej pod
   trescia - tak samo w kazdej sekcji karty konta. */
.konta-akcje-karta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; white-space: normal; }
/* `height: auto` (zamiast staej wysokosci .btn-small) dawal roznej
   wielkosci przyciski w tym samym rzedzie - krotkie napisy ("Usun konto")
   mialy inna wysokosc/obramowanie niz dlugie ("Wyslij link do nowego
   hasla"). `min-height` zostawia miejsce na zawiniecie dlugiego napisu,
   ale wszystkie krotsze przyciski (wiekszosc) wychodza teraz TAKIE SAME. */
.konta-akcje-karta .btn-small {
  display: inline-flex; align-items: center; gap: .4rem;
  white-space: normal; text-align: left; height: auto; min-height: 30px;
}
.konta-akcje-karta svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Menu konta w pasku bocznym - kto jestem, z jakim zakresem, i dopiero akcje. */
.account-popup-glowa {
  display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem .55rem;
}
.account-popup-kto { min-width: 0; display: flex; flex-direction: column; }
.account-popup-kto b { font-size: var(--fs-base); }
.account-popup-kto .konta-meta { overflow: hidden; text-overflow: ellipsis; }
.account-popup-plakietki {
  display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 .6rem .55rem;
  border-bottom: 1px solid var(--border); margin-bottom: .35rem;
}
.account-popup-akcje { display: flex; flex-direction: column; }
.account-popup-akcje a { display: flex; align-items: center; gap: .5rem; }
.account-popup-akcje svg { width: 13px; height: 13px; flex-shrink: 0; }
/* Kolor "wyloguj" jawnie na klasie: wczesniej wisial na :last-child, a po
   dolozeniu pozycji trafialby w przypadkowy link. */

/* ============ MENU W GRUPACH + KOLOROWE MENU KONTA ============ */
/* Grupy zakladek. Naglowek jest czescia ciemnego paska - sam tekst i cienka
   kreska pod spodem, zadnych szarych plaskich pasow doklejonych z wierzchu. */
.nav-grupa { display: flex; flex-direction: column; gap: .2rem; margin-top: .9rem; }
.nav-grupa:first-of-type { margin-top: .5rem; }
.nav-grupa-label {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 .25rem .25rem; font-size: var(--fs-micro); font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em;
  color: rgba(255, 255, 255, .42);
}
/* Kreska ciagnie sie od napisu do konca paska - dzieli, nie ramkuje. */
.nav-grupa-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .16), transparent);
}
/* Aktywna zakladka: pomaranczowy pasek przy krawedzi zamiast samego wypelnienia
   - widac ja takze katem oka, gdy wzrok jest w tresci strony. */
.nav-item.active { box-shadow: inset 3px 0 0 #fff3; }

/* Menu konta w kolorach paska bocznego, a nie biala kartka na granacie. */
.account-popup {
  background: #16233a; border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 14px 34px rgba(2, 8, 23, .55);
}
.account-popup a { color: rgba(255, 255, 255, .88); }
.account-popup a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.account-popup-glowa { color: #fff; }
.account-popup-kto b { color: #fff; }
.account-popup-kto .konta-meta { color: rgba(255, 255, 255, .55); }
.account-popup-plakietki { border-bottom-color: rgba(255, 255, 255, .12); }
.account-popup .konto-karta-poziom {
  background: rgba(255, 255, 255, .12); color: #fff; border-color: transparent;
}
/* Wylogowanie: jasny odcien, ktory na ciemnym menu czyta sie tak samo dobrze
   jak reszta pozycji, a kolorem dalej mowi, ze to wyjscie.
   Kolor wisi na wlasnej klasie, nie na `a:last-child` - tamten selektor mial
   wyzsza specyficznosc (pseudoklasa) i wygrywal niezaleznie od kolejnosci,
   przez co napis zostawal w kolorze tekstu ze skory jasnej, czyli prawie
   niewidoczny na granacie. */
.account-popup .account-popup-wyloguj { color: #fecaca; font-weight: 700; }
.account-popup .account-popup-wyloguj svg { color: #fca5a5; }
.account-popup .account-popup-wyloguj:hover { background: rgba(252, 165, 165, .16); color: #fff; }

/* Wejscie do karty konta w tabeli: pelnoprawny przycisk w kolorze marki,
   a nie kolejny bialy prostokat w rzedzie bialych prostokatow. Nie zawija
   sie i nie rozpycha kolumny - stad staly uklad i nowrap. */
.konta-akcje { display: flex; justify-content: flex-end; }
.btn-small.konta-btn-szczegoly {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700;
}
.btn-small.konta-btn-szczegoly:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-small.konta-btn-szczegoly svg { width: 13px; height: 13px; flex-shrink: 0; }
.konta-th-akcje { text-align: right; }
/* ============ PASKI PRZEWIJANIA ============ */
/* Suwak jest granatowy - w kolorze naglowkow sekcji i ciemnych prostokatow.
   Pomaranczowy zostaje wylacznie znacznikiem "tu jestes / tu sie klika"
   (aktywna zakladka, przyciski); suwak niczego nie wybiera, wiec nie ma
   powodu mowic tym samym glosem. Domyslny pasek przegladarki byl szary,
   ze strzalkami, i wygladal jak element z zupelnie innego systemu. */
* { scrollbar-width: thin; scrollbar-color: var(--navy) transparent; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--navy); border-radius: 2px;
  /* 4 px kreski + przezroczyste marginesy: ta sama grubosc co pasek przy
     sekcji, ale z polem do trafienia myszka. */
  border: 4px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #1e293b; background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }
/* Strzalek nie ma - suwak wystarczy, a przy tej szerokosci i tak bylyby
   nietrafialne. */
*::-webkit-scrollbar-button { display: none; }
/* W ciemnym motywie granat zlewa sie z tlem, a szary suwak ledwo bylo widac.
   Idzie ten sam bialy, co w pasku bocznym - suwak ma byc widoczny od razu,
   bez szukania go wzrokiem przy krawedzi. */
:root[data-motyw="ciemny"], :root[data-motyw="ciemny"] * { scrollbar-color: rgba(255, 255, 255, .9) transparent; }
:root[data-motyw="ciemny"]::-webkit-scrollbar-thumb,
:root[data-motyw="ciemny"] *::-webkit-scrollbar-thumb { background: #fff; }
:root[data-motyw="ciemny"] *::-webkit-scrollbar-thumb:hover { background: #fff; background-clip: content-box; }
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]), :root:not([data-motyw="jasny"]) * { scrollbar-color: rgba(255, 255, 255, .9) transparent; }
  :root:not([data-motyw="jasny"])::-webkit-scrollbar-thumb,
  :root:not([data-motyw="jasny"]) *::-webkit-scrollbar-thumb { background: #fff; }
  :root:not([data-motyw="jasny"]) *::-webkit-scrollbar-thumb:hover { background: #fff; background-clip: content-box; }
}

/* W ciemnym pasku bocznym granat bylby niewidoczny - suwaki (pionowy przy
   menu i poziomy pod nim) sa biale, w kolorze pisma zakladek. Sam pasek
   zostaje bez zmian. */
.sidebar, .sidebar * { scrollbar-color: #fff transparent; }
.sidebar::-webkit-scrollbar, .sidebar *::-webkit-scrollbar { width: 10px; height: 10px; }
.sidebar::-webkit-scrollbar-thumb, .sidebar *::-webkit-scrollbar-thumb {
  background: #fff; border-radius: 2px;
  border: 3px solid transparent; background-clip: content-box;
}
.sidebar::-webkit-scrollbar-thumb:hover, .sidebar *::-webkit-scrollbar-thumb:hover {
  background: #fff; background-clip: content-box;
}

/* Poziomy pasek pod szeroka tabela - ten sam suwak, widoczny od razu, bo
   inaczej nikt nie zauwaza, ze tabela ma dalszy ciag w prawo. */
.table-wrap { overflow-x: auto; }


/* ============ PASEK BOCZNY - poruszanie sie ============ */
/* Zakladka pod kursorem lekko wysuwa sie w prawo, a ikona rozjasnia - ruch
   jest maly, ale wystarcza, zeby bylo widac, na czym stoi kursor przy
   kilkunastu pozycjach jedna pod druga. */
.nav-item { position: relative; transition: background .15s ease, transform .15s ease; }
.nav-item:hover { transform: translateX(2px); }
.nav-ico { color: rgba(255, 255, 255, .62); transition: color .15s ease; }
.nav-item:hover .nav-ico, .nav-item.active .nav-ico { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .nav-item, .nav-item:hover { transition: none; transform: none; }
}
/* Aktywna zakladka dostaje jasna kropke przy krawedzi - widac ja katem oka,
   gdy wzrok jest w tresci strony. */
.nav-item.active::before {
  content: ""; position: absolute; left: -.85rem; top: 50%;
  width: 4px; height: 18px; margin-top: -9px; border-radius: 0 3px 3px 0;
  background: #fff;
}

/* ============ PRACOWNICY: karta pracy ============ */
.prac-form { padding: .8rem .95rem; margin-bottom: 1.1rem; }
.prac-form-pola {
  display: grid; gap: .5rem .7rem; margin: 0 0 .6rem;
  grid-template-columns: 150px minmax(240px, 2fr) minmax(160px, 1fr) 90px;
}
.prac-grupa > .field { margin: 0 0 .6rem; }
.prac-grupa > *:last-child { margin-bottom: 0; }
.prac-form .field { margin: 0; }
.prac-dodaj { width: 100%; height: 40px; margin-top: .3rem; font-size: var(--fs-md); }
.prac-dodaj svg { width: 15px; height: 15px; }
@media (max-width: 900px) { .prac-form-pola { grid-template-columns: 1fr; } }

/* Formularz w jednej sekcji - trzy grupy zostaja, ale w srodku jednej ramki.
   Wczesniej byly trzema osobnymi kartami i wygladaly jak trzy niezalezne
   formularze, z ktorych nie bylo wiadomo, ktory sie wysyla. */
.prac-sekcja { padding: .95rem 1.05rem 1rem; margin-bottom: 1.2rem; }
.prac-sekcja-glowa { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.prac-sekcja-ico {
  display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 11px; background: var(--brand); color: #fff;
}
.prac-sekcja-ico svg { width: 19px; height: 19px; }
.prac-sekcja-tytul { margin: 0; font-size: var(--fs-lg); }
.prac-sekcja-sub { font-size: var(--fs-sm); color: var(--muted); }

.prac-dziennik { display: flex; flex-direction: column; gap: .8rem; }
.prac-dzien { padding: 0; overflow: hidden; }
/* Pasek nad lista dni: co widac i jedyne wyjscie w cala historie. Stoi tu,
   bo dotyczy TEJ listy - wczesniej siedzial w prostokacie nad formularzem,
   czyli przy czyms zupelnie innym. */
.prac-spis-pasek {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 0 0 .7rem;
}
.prac-spis-opis { font-size: var(--fs-sm); color: var(--muted); }
.prac-spis-link {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--brand);
  text-decoration: none;
}
.prac-spis-link:hover { text-decoration: underline; }
.prac-spis-link svg { width: 13px; height: 13px; }
/* Dzien jako wyrozniona sekcja - data w pasku, nie w szarej linijce.
   Pasek jest jednoczesnie <summary>, wiec caly dzien zwija sie klikiem
   w naglowek; strzalka po prawej mowi, w ktora strone. */
.prac-dzien-glowa {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem 1.1rem; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  cursor: pointer; list-style: none;
}
.prac-dzien-glowa::-webkit-details-marker { display: none; }
.prac-dzien-glowa:hover { background: var(--surface); }
/* Strzalka rozwijania - obraca sie po otwarciu, zeby bylo widac stan. */
.prac-dzien-glowa::after {
  content: ""; flex: none; order: 99; margin-left: .2rem;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s ease;
}
.prac-dzien[open] > .prac-dzien-glowa::after { transform: rotate(-135deg); }
.prac-dzien-znacznik {
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 8px; background: var(--brand); color: #fff;
}
.prac-dzien-znacznik svg { width: 14px; height: 14px; }
.prac-dzien-data { font-size: var(--fs-md); font-weight: 800; color: var(--tekst-mocny); }
.prac-dzien-nazwa { font-size: var(--fs-sm); color: var(--muted); }
.prac-dzien-ile {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.prac-wpisy { padding: .7rem 1.1rem .9rem; }

/* Wpis rozlozony na nazwane pola: kazda wartosc wie, czym jest. Wczesniej
   staly obok siebie jako plakietki bez podpisow („Montaz 08:00-16:00 GDA...")
   i trzeba bylo zgadywac, co jest czym. */
.prac-wpis-pola {
  display: grid; gap: .5rem .9rem; margin: 0 0 .5rem;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
/* WPIS JAKO KARTA O STALYM KSZTALCIE (03.09.2026). Osiem rubryk w siatce
   4 x 2 - zawsze te same miejsca, puste z kreska - zeby wpisy jednego dnia
   dalo sie czytac wiersz pod wierszem, a nie zgadywac za kazdym razem,
   gdzie tym razem wyladowaly godziny. Na gorze opis roboty i suma godzin. */
.prac-wpisy .prac-wpis-karta {
  display: flex; flex-direction: column; gap: .55rem;
  padding: .75rem .9rem .7rem; border: 1px solid var(--border); border-left-width: 3px;
  border-left-color: var(--brand); border-radius: 12px; background: var(--surface);
}
.prac-wpis-glowa {
  display: flex; align-items: flex-start; gap: .7rem;
  padding-bottom: .55rem; border-bottom: 1px dashed var(--border);
}
.prac-wpis-lp {
  flex-shrink: 0; width: 1.6rem; height: 1.6rem; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 999px;
  font-size: var(--fs-micro); font-weight: 800; color: var(--brand-dark);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
}
.prac-wpis-co { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.prac-wpis-co-lab {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.prac-wpis-karta .prac-wpis-opis { font-weight: 600; line-height: 1.4; }
.prac-wpis-karta .prac-wpis-godziny {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-width: 4.4rem; padding: .3rem .7rem;
  border-radius: 10px; color: var(--brand-dark);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
}
.prac-wpis-godziny-val { font-size: var(--fs-xl); font-weight: 800; line-height: 1.1; }
.prac-wpis-godziny-lab {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.prac-wpis-karta .prac-wpis-pola {
  margin: 0; gap: .55rem .8rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.prac-wpis-karta .prac-pole-wpisu {
  padding: .45rem .6rem; border-radius: 8px; background: var(--surface-2);
}
.prac-wpis-karta .prac-pole-wpisu dd { font-size: var(--fs-sm); }
.prac-pole-pusto { color: var(--muted); font-weight: 500; }
.prac-wpis-karta .prac-wpis-uwagi { margin: 0; font-style: normal; }
.prac-wpis-uwagi-lab { font-weight: 700; font-style: normal; }
.prac-wpis-karta .prac-usun-form { align-self: flex-end; }
@media (max-width: 900px) {
  .prac-wpis-karta .prac-wpis-pola { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.prac-pole-wpisu { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.prac-pole-wpisu dt {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.prac-pole-wpisu dd {
  margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--text);
  overflow-wrap: anywhere;
}
.prac-dzien-godzin {
  margin-left: auto; font-size: var(--fs-sm); font-weight: 800;
  color: var(--brand); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: .1rem .55rem;
}
.prac-wpisy { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.prac-wpisy li {
  display: flex; align-items: flex-start; gap: .6rem;
  padding-left: .7rem; border-left: 2px solid var(--border);
}
.prac-wpis-tresc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.prac-wpis-opis { font-size: var(--fs-md); color: var(--text); overflow-wrap: anywhere; }
.prac-wpis-gdzie {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--fs-micro); color: var(--muted);
}
.prac-wpis-gdzie svg { width: 11px; height: 11px; flex-shrink: 0; }
.prac-wpis-godziny { flex-shrink: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.prac-otworz { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.prac-otworz svg { width: 13px; height: 13px; }

/* ============ KONTA: kolor poziomu niesiony przez caly wiersz ============ */
/* Nazwisko i adres w ramce w kolorze poziomu - ten sam kolor co plakietki
   wyboru obok, wiec wiersz przypisuje sie do poziomu jednym spojrzeniem. */
.konta-osoba-ramka {
  padding: .5rem .7rem; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--poziom, var(--border)) 70%, transparent);
  background: color-mix(in srgb, var(--poziom, var(--surface-2)) 16%, var(--surface));
  box-shadow: inset 3px 0 0 var(--poziom, var(--border));
}
.konta-osoba-ramka .konta-inicjaly {
  background: var(--poziom, var(--surface-2)); color: var(--poziom-pismo, #fff);
  border-color: transparent;
}

/* Plakietki wyboru poziomu w swoich kolorach takze wtedy, gdy NIE sa wybrane -
   wczesniej byly szare i kolor pojawial sie dopiero po zaznaczeniu, wiec nie
   dalo sie ich rozpoznac, zanim sie kliknelo. */
.konta-poziom-opcja {
  font-size: var(--fs-sm);
  /* Domieszka idzie w kolor PISMA strony, nie w staly granat - w ciemnym
     motywie granat gasil plakietke do czarnego na czarnym. */
  color: color-mix(in srgb, var(--poziom, var(--muted)) 55%, var(--tekst-mocny));
  border-color: color-mix(in srgb, var(--poziom, var(--border)) 65%, transparent);
  background: color-mix(in srgb, var(--poziom, var(--surface-2)) 18%, var(--surface));
  padding: .2rem .6rem .2rem .4rem;
}
.konta-poziom-opcja:hover {
  border-color: var(--poziom, var(--brand));
  background: color-mix(in srgb, var(--poziom, var(--surface-2)) 30%, var(--surface));
}
/* Wybrany poziom - pelny kolor, zeby nie trzeba bylo szukac ptaszka. */
.konta-poziom-opcja.jest-wybrany {
  background: var(--poziom, var(--brand)); border-color: var(--poziom, var(--brand));
  color: var(--poziom-pismo, #fff); font-weight: 700; box-shadow: none;
}
.konta-poziom-opcja.jest-wybrany input { accent-color: var(--poziom-pismo, #fff); }

/* "Zapisz poziomy" to zapis zmiany uprawnien - ma wygladac jak przycisk,
   ktorym jest, a nie jak podpis pod lista. Ten sam prostokat w kolorze marki,
   co reszta akcji w tabeli. */
.konta-zapisz {
  margin-top: .5rem; padding: .35rem .8rem;
  background: var(--brand); border: 1px solid var(--brand); color: #fff;
  font-size: var(--fs-base); font-weight: 700;
}
.konta-zapisz:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* Status konta wiekszy - to jedna z dwoch rzeczy, ktorych sie tu szuka. */
.konta-znak { font-size: var(--fs-base); padding: .25rem .7rem; display: inline-block; }
/* Konto dziala, ale nikt sie z niego jeszcze nie zalogowal. */
.konta-znak-nowe { color: var(--info-tx); background: var(--info-bg); border-color: var(--info-bd); }
.konta-znak-kiedy {
  display: block; margin-top: .25rem; font-size: var(--fs-micro); color: var(--muted);
}

/* ============ KONTA: poprawki kolorow (po uwagach) ============ */
/* Niezaznaczone rangi wracaja na biale - kolorowe wszystkie naraz robily
   z kolumny tecze i nie bylo widac, ktora jest wybrana. Kolor niesie teraz
   tylko zaznaczony poziom oraz ramka przy nazwisku. */
.konta-poziom-opcja {
  color: var(--muted);
  background: var(--surface);
  border-color: var(--border);
}
.konta-poziom-opcja:hover {
  border-color: var(--poziom, var(--brand));
  background: var(--surface-2);
  color: var(--text);
}
.konta-poziom-opcja.jest-wybrany {
  background: var(--poziom, var(--brand)); border-color: var(--poziom, var(--brand));
  color: var(--poziom-pismo, #fff); font-weight: 700;
}

/* "Pracownik" w kolorze sekcji - to zwykla, domyslna rola, a wygladala jak
   wyszarzona i mniej wazna od pozostalych. */
.role-emp {
  background: color-mix(in srgb, var(--brand) 14%, var(--surface));
  color: var(--brand-dark); border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
}

/* Konto wylaczone to nie ostrzezenie, tylko stan zamkniety - czerwony,
   inaczej niz "czeka na haslo", ktore jest tymczasowe. */
.konta-znak-nieaktywne {
  color: var(--danger-tx); background: var(--danger-bg); border-color: var(--danger-bd);
}

/* Karta pracy - rubryki w grupach, jak na papierowym formularzu. Grupa ma
   wlasna ramke i naglowek w obwodce: na papierze te sekcje byly osobnymi
   prostokatami i dopiero to sprawialo, ze formularz dalo sie czytac. */
/* Rowne odstepy w calej sekcji: kazda grupa ma to samo pole wewnetrzne ze
   wszystkich czterech stron, ten sam odstep miedzy grupami i ten sam odstep
   pod naglowkiem. Wczesniej gora byla przycieta pod wystajaca plakietke
   (padding 1.1rem, margines naglowka -1.75rem), przez co pierwsza rubryka
   stala blizej ramki niz ostatnia. */
/* Zageszczone 03.09.2026: uzytkownicy skarzyli sie na malo przejrzysty
   formularz - mniej powietrza miedzy rubrykami, zeby cala grupa miescila
   sie w jednym spojrzeniu. */
.prac-grupa {
  margin-bottom: .75rem; padding: .8rem .85rem;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2);
}
.prac-grupa:last-of-type { margin-bottom: 1rem; }
.prac-grupa-label {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .65rem; padding: 0;
  font-size: var(--fs-lg); font-weight: 800; letter-spacing: .01em;
  color: var(--tekst-mocny); background: none; border: 0; box-shadow: none;
  text-transform: none;
}
/* Ikona w kwadracie w kolorze marki - naglowek czyta sie jako naglowek,
   a nie jako kolejna plakietka wsrod plakietek. */
.prac-grupa-label > svg {
  width: 17px; height: 17px; flex-shrink: 0; color: #fff;
  box-sizing: content-box; padding: 7px; border-radius: 9px; background: var(--brand);
}

/* `.prac-glowa` / `.prac-historia` (prostokat „Ostatnie 7 dni / N wpisow"
   z duza ikona w rogu) zdjete 19.08.2026 razem z samym prostokatem -
   powtarzal liczby z naglowka i kafelkow hero. Wejscie w cala historie
   stoi teraz w pasku nad lista dni (`.prac-spis-link`). */
.prac-btn-historia { width: auto; padding: 0 1rem; height: 38px; }
.prac-wiecej { display: flex; justify-content: center; margin: 1.2rem 0 0; }

/* Skroty nad rubrykami - dzien, zmiana, rodzaj roboty jednym klikiem. */
/* Jeden rytm odstepow w calej sekcji: kazdy blok konczy sie tym samym
   odstepem, wiec rubryki nie stoja raz ciasniej, raz luzniej. */
.prac-szybkie {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .55rem;
}
.prac-chip {
  padding: .32rem .75rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: 700;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.prac-chip:hover { border-color: var(--brand); color: var(--brand); }
.prac-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.prac-szybkie-data { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); }
.prac-podpis {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .3rem;
}
/* Podpis wewnatrz grupy stoi nad kolejnym blokiem, wiec potrzebuje odstepu
   OD tego, co bylo wyzej - poza pierwszym, ktory idzie tuz pod naglowkiem. */
.prac-grupa > .prac-podpis + .prac-szybkie + .prac-podpis,
.prac-grupa > .prac-form-pola + .prac-podpis { margin-top: .3rem; }
.prac-data-opis { font-weight: 700; color: var(--tekst-mocny); }

/* Rubryka „wpisz swoje albo wez z listy": pole tekstowe + ikona po prawej,
   ktora rozwija panel z podpowiedziami. Zwykly `datalist` byl niewidoczny -
   nie bylo zadnego znaku, ze pole cokolwiek podpowiada. */
.pole-z-ikona, .pole-z-lista { position: relative; display: block; }
.pole-z-ikona input, .pole-z-lista input { padding-right: 2.6rem !important; }
/* W karcie pracy te inputy siedza w .field, ktore daje im ciemne tlo -
   nowsze uzycia (Pracuje pod, Wskaz dokument z kartoteki) nie maja tej
   owijki, wiec bez wlasnego tla wpadaly na domyslny, JASNY wyglad
   przegladarki - jedyny jasny element na ciemnej stronie. Ten sam
   przepis co .field input, zeby wygladalo 1:1 wszedzie, z owijka czy bez. */
.pole-z-lista input[type="text"], .pole-z-lista input[type="search"] {
  width: 100%; padding: .55rem .7rem; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-md); font-family: inherit;
}
.pole-z-lista input[readonly] { cursor: pointer; }

/* "Wylacz filtr" (Inwestycje) - wieksze, czerwone obramowanie, czarny
   napis (celowo NIE kolor z motywu - to ma rzucac sie w oczy jak
   ostrzezenie niezaleznie od jasnego/ciemnego tla). */
.btn-wylacz-filtr {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.1rem; border-radius: 10px;
  border: 2px solid #dc2626; background: #fff; color: #111;
  font-size: var(--fs-md); font-weight: 700; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.btn-wylacz-filtr:hover { background: #fee2e2; border-color: #b91c1c; }
.btn-wylacz-filtr svg { color: #dc2626; }
/* "Wroc" stojacy w jednym rzedzie z czerwonym "Wylacz filtr" ma byc tej samej
   wielkosci - dwa guziki obok siebie rozne o kilka pikseli czytaja sie jak
   niedorobka. Rowna ich wspolna `min-height` (globalne box-sizing: border-box,
   wiec to jest pelna wysokosc razem z ramka), a nie przepisywanie paddingow -
   te maja rozne wnetrza (okragla ikona vs sam tekst). Wariant jest OSOBNA
   klasa, zeby nie ruszac `.btn-powrot` w calej reszcie aplikacji. */
.btn-wylacz-filtr,
.btn-powrot.btn-powrot-rowny { min-height: 44px; }
.btn-powrot.btn-powrot-rowny {
  padding: .3rem 1.1rem .3rem .4rem; border-radius: 10px; border-width: 2px;
  font-size: var(--fs-md);
}
/* ".pole-z-lista-globalna" (wspolny widget "wybierz z listy" poza karta
   pracy - "Pracuje pod", "Wskaz dokument z kartoteki"...) - bez owijki
   .field (ktora w karcie pracy daje width:100%), wiec wlasna szerokosc,
   zeby pole nie kurczylo sie do domyslnej wielkosci inputu. */
.pole-z-lista-globalna { min-width: 15rem; }
.pole-z-lista-globalna input[type="text"] { width: 100%; cursor: pointer; }
.pole-ikona {
  position: absolute; top: 50%; right: .35rem; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--brand); cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pole-ikona:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.pole-ikona svg { width: 15px; height: 15px; }
.pole-ikona-lista svg { transform: rotate(90deg); transition: transform .15s ease; }
/* Przycisk listy z ikona inna niz strzalka (ludzie przy „Z kim") - obrot
   strzalki by ja polozyl na boku. */
.pole-ikona-lista.pole-ikona-bez-obrotu svg,
.pole-z-lista.jest-otwarta .pole-ikona-lista.pole-ikona-bez-obrotu svg { transform: none; }
.pole-z-lista.jest-otwarta .pole-ikona-lista { background: var(--brand); border-color: var(--brand); color: #fff; }
.pole-z-lista.jest-otwarta .pole-ikona-lista svg { transform: rotate(270deg); }

/* `display: flex` wygrywa z domyslnym `[hidden] { display: none }` przegladarki,
   wiec bez tej linijki wszystkie panele staly otwarte naraz. */
.pole-lista[hidden] { display: none; }
/* Pozycja odsiana przez pisanie MUSI zniknac. `display: flex` z reguly nizej
   wygrywa z domyslnym `[hidden] { display: none }` przegladarki, wiec bez tej
   linijki filtrowanie listy (auta, zaloga, godziny) nie robilo nic widocznego:
   skrypt ustawial `hidden`, a pozycje dalej stały na ekranie. Zgloszenie
   27.08.2026: „wpisujesz For... i pokazuja sie tylko wyszukiwania z takimi
   literami" - wlasnie tego brakowalo. */
.pole-lista-poz[hidden] { display: none; }
.pole-lista {
  position: absolute; z-index: 40; top: calc(100% + .3rem); left: 0; right: 0;
  max-height: 260px; overflow-y: auto;
  display: flex; flex-direction: column; padding: .3rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
  box-shadow: 0 14px 34px rgba(2, 8, 23, .28);
}
.pole-lista-poz {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  font: inherit; font-size: var(--fs-base); font-weight: 600; color: var(--text);
  background: none; border: 0; border-radius: 7px; padding: .45rem .6rem; cursor: pointer;
}
.pole-lista-poz:hover { background: var(--surface-2); color: var(--brand); }
.pole-lista-inicjaly {
  display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 999px; background: var(--surface-2); color: var(--muted);
  font-size: var(--fs-micro); font-weight: 800;
}
.pole-lista-poz:hover .pole-lista-inicjaly { background: var(--brand); color: #fff; }
.pole-lista-godziny { max-height: 220px; }
.pole-lista-pusto { margin: 0; padding: .5rem .6rem; font-size: var(--fs-sm); color: var(--muted); }
.prac-wynik { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.prac-wynik-jest { color: var(--tekst-mocny); font-weight: 700; }
.prac-wynik-blad { color: var(--danger-tx); font-weight: 700; }

/* „Z kim": cala zaloga jako klikalne nazwiska zamiast listy, w ktorej
   trzeba bylo trzymac Ctrl. */
.prac-osoby { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .6rem; }
/* Dwie klasy w selektorze, bo `.field label { display: block }` ma wyzsza
   specyficznosc niz sama `.prac-osoba` i rozbijalo to plakietke na dwie linie. */
.prac-osoby .prac-osoba {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .3rem .7rem .3rem .35rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-sm); font-weight: 600;
  transition: border-color .12s ease, background .12s ease;
}
/* Wyzsza specyficznosc niz `.prac-form input { width: 100% }` nizej - bez tego
   ukryty checkbox rozpychal sie na cala szerokosc i spychal nazwisko pod
   inicjaly. */
.prac-form .prac-osoba input, .prac-osoba input {
  position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; margin: 0; border: 0;
}
.prac-osoba-inicjaly {
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 999px; background: var(--surface-2); color: var(--muted);
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: .02em;
}
.prac-osoba:hover { border-color: var(--brand); }
.prac-osoba:has(input:checked) { border-color: var(--brand); background: var(--warn-bg); }
.prac-osoba:has(input:checked) .prac-osoba-inicjaly { background: var(--brand); color: #fff; }
.prac-osoba:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.prac-form-pola { display: grid; gap: .5rem .7rem; margin-bottom: .5rem; }
.prac-pola-4 { grid-template-columns: repeat(4, 1fr); }
.prac-pola-2 { grid-template-columns: repeat(2, 1fr); }
.prac-pola-2-1 { grid-template-columns: minmax(200px, 1fr) 2fr; }
/* Rodzaj pracy + „Gdzie" + „U kogo" - trzy rubryki w jednym rzedzie. */
.prac-pola-3 { grid-template-columns: minmax(180px, 1fr) 1.4fr 1.4fr; }
.prac-form textarea, .prac-form select, .prac-form input {
  width: 100%; padding: .45rem .6rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: var(--fs-base); color: var(--text);
}
.prac-form select[multiple] { padding: .2rem; }
.prac-form textarea { resize: vertical; }
@media (max-width: 1000px) {
  .prac-pola-4, .prac-pola-2, .prac-pola-2-1, .prac-pola-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .prac-pola-4, .prac-pola-2, .prac-pola-2-1, .prac-pola-3 { grid-template-columns: 1fr; }
}

/* Plakietki przy wpisie - rodzaj roboty, godziny, auto. */
.prac-wpis-plakietki { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .2rem; }
.prac-tag {
  font-size: var(--fs-micro); font-weight: 700; padding: .1rem .45rem;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted);
}
.prac-tag-praca { color: var(--brand-dark); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.prac-tag-dzien { color: var(--info-tx); background: var(--info-bg); border-color: var(--info-bd); }
/* Urlop/chorobowe/wolne - dzien bez pracy ma byc widoczny inaczej niz robota. */
.prac-tag-wolne { color: var(--warn-tx); background: var(--warn-bg); border-color: var(--warn-bd); }
.prac-tag-przerwa { opacity: .7; font-weight: 600; }
.prac-wpis-meta { display: flex; flex-wrap: wrap; gap: .7rem; }
.prac-wpis-uwagi {
  font-size: var(--fs-micro); color: var(--muted); font-style: italic; margin-top: .15rem;
}

/* ============ OFERTOWANIE: wykres roczny + podsumowanie ============ */
/* 12 chudszych slupkow zamiast 6 szerokich - .bar-chart ma na stale szesc
   kolumn, wiec rok potrzebuje wlasnej siatki. */
.bar-chart-rok { grid-template-columns: repeat(12, 1fr); gap: .35rem; }
.bar-chart-rok .bar-val { font-size: var(--fs-micro); font-weight: 700; }
.bar-chart-rok .bar-month { font-size: var(--fs-micro); font-weight: 600; }
.bar-chart-rok .bar-rect { border-radius: 5px; }
.bar-chart-rok .bar-rect svg { display: none; }   /* przy tej szerokosci ikona to juz plama */
@media (max-width: 1100px) {
  .bar-chart-rok .bar-val { display: none; }
  .bar-chart-rok .bar-month { writing-mode: vertical-rl; }
}

/* Najwazniejsze liczby zaraz pod slupkami. */
.wykres-podsumowanie {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .6rem; margin-top: 1rem; padding-top: .9rem;
  border-top: 1px solid var(--border);
}
.wykres-kafel {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .6rem .7rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.wykres-kafel-label {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.wykres-kafel-wartosc { font-size: var(--fs-md); font-weight: 800; color: var(--text); }
.wykres-kafel-opis { font-size: var(--fs-micro); color: var(--muted); }
/* Biezacy miesiac wyrozniony - to jedyna liczba, na ktora da sie jeszcze wplynac. */
.wykres-kafel-biezacy {
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}
.wykres-kafel-biezacy .wykres-kafel-wartosc { color: var(--brand-dark); }

/* Przycisk w kolorze sekcji - dla wejsc, ktore prowadza dalej w ten sam
   obszar (Klienci, Reguly materialowe). */
.btn-small.btn-sekcja {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; gap: .4rem;
}
.btn-small.btn-sekcja:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-small.btn-sekcja svg { width: 13px; height: 13px; }

/* Wejscia z paska Ofertowania ("Klienci", "Reguly materialowe") to nie sa
   drobne akcje przy wierszu, tylko przejscia do osobnych narzedzi - stad
   pelny rozmiar zamiast malego przycisku. */
.btn-sekcja-duzy {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.05rem; border-radius: 11px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; font-size: var(--fs-base); font-weight: 800; letter-spacing: .01em;
  border: 1px solid transparent;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 32%, transparent);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-sekcja-duzy svg { width: 17px; height: 17px; }
.btn-sekcja-duzy:hover {
  transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 40%, transparent);
}
@media (prefers-reduced-motion: reduce) { .btn-sekcja-duzy:hover { transform: none; } }

/* ============ WYKRES: gleba i swiatlo ============
   Slupek byl plaskim prostokatem - przy 12 miesiacach obok siebie wszystko
   zlewalo sie w jedna szara sciane. Teraz kazdy ma swiatlo od gory, cien
   pod spodem i cieniutka siatke w tle, wiec od razu widac rytm roku.
   Podpis "wartosc" wjezdza po najechaniu, zamiast walczyc o miejsce. */
.oferty-chart .bar-chart {
  position: relative;
  background:
    repeating-linear-gradient(180deg,
      color-mix(in srgb, var(--text) 6%, transparent) 0 1px,
      transparent 1px 25%);
  border-radius: 10px;
  padding: .3rem .35rem 0;
}
.oferty-chart .bar-rect {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 6px rgba(2, 8, 23, .06);
  transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease, border-color .15s ease;
}
.oferty-chart .bar-col:hover .bar-rect {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6),
              0 10px 20px color-mix(in srgb, var(--brand) 30%, transparent);
  border-color: var(--brand);
}
.oferty-chart .bar-fill {
  background: linear-gradient(180deg,
    color-mix(in srgb, #fff 35%, var(--brand-light)) 0%,
    var(--brand) 55%, var(--brand-dark) 100%);
  box-shadow: inset -3px 0 6px rgba(2, 8, 23, .16),
              inset 3px 0 5px rgba(255, 255, 255, .28),
              0 0 14px color-mix(in srgb, var(--brand) 35%, transparent);
}
/* Slupek biezacego miesiaca pulsuje swiatlem - to jedyna liczba, na ktora
   da sie jeszcze wplynac. */
.oferty-chart .bar-rect-active .bar-fill { animation: bar-puls 2.6s ease-in-out infinite; }
@keyframes bar-puls {
  0%, 100% { box-shadow: inset -3px 0 6px rgba(2, 8, 23, .16),
                         inset 3px 0 5px rgba(255, 255, 255, .28),
                         0 0 10px color-mix(in srgb, var(--brand) 30%, transparent); }
  50%      { box-shadow: inset -3px 0 6px rgba(2, 8, 23, .16),
                         inset 3px 0 5px rgba(255, 255, 255, .28),
                         0 0 22px color-mix(in srgb, var(--brand) 60%, transparent); }
}
.oferty-chart .bar-col:hover .bar-val { color: var(--brand-dark); transform: translateY(-2px); }
.oferty-chart .bar-val { transition: color .15s ease, transform .15s ease; }
@media (prefers-reduced-motion: reduce) {
  .oferty-chart .bar-col:hover .bar-rect,
  .oferty-chart .bar-col:hover .bar-val { transform: none; }
  .oferty-chart .bar-rect-active .bar-fill { animation: none; }
}

/* Kafle pod wykresem - lekka gleba zamiast plaskiego prostokata, zeby
   czytaly sie jako jedna rodzina ze slupkami nad nimi. */
.wykres-kafel {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  box-shadow: 0 2px 8px rgba(2, 8, 23, .05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wykres-kafel:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(2, 8, 23, .1); }
/* Poswiata w rogu - ten sam jezyk, co znak wodny na kafelku powitalnym. */
.wykres-kafel::after {
  content: ""; position: absolute; right: -30px; top: -34px;
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.wykres-kafel-biezacy::after { background: radial-gradient(circle, color-mix(in srgb, var(--brand) 42%, transparent), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .wykres-kafel:hover { transform: none; } }

/* ============ PULPIT: "Na dzis" ============ */
/* Lista stoi w weszej kolumnie pulpitu, wiec wiersz jest siatka o stalych
   kolumnach (ikona - tresc - bok - strzalka), a nie flexem, ktory przy dlugiej
   nazwie klienta rozpychal plakietke "Serwis" i lamal rowny prawy brzeg. */
.na-dzis-panel { display: flex; flex-direction: column; }
.na-dzis-tag { align-self: flex-start; }
.na-dzis {
  list-style: none; margin: .75rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .4rem;
}
.na-dzis > li { margin: 0; }
.na-dzis-poz {
  display: grid; align-items: center; gap: .1rem .7rem;
  grid-template-columns: 30px minmax(0, 1fr) auto 14px;
  padding: .6rem .7rem; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border); color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.na-dzis-poz:hover {
  border-color: var(--brand); border-left-color: var(--brand);
  box-shadow: 0 2px 10px rgba(2, 8, 23, .07); transform: translateX(2px);
}
/* Pilne - to, co juz jest po terminie, a nie tylko sie zbliza. */
.na-dzis-pilne {
  border-left-color: var(--danger-tx);
  background: color-mix(in srgb, var(--danger-bg) 45%, var(--surface));
}
.na-dzis-pilne:hover { border-color: var(--danger-bd); border-left-color: var(--danger-tx); }
.na-dzis-ico {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.na-dzis-pilne .na-dzis-ico { background: var(--danger-bg); color: var(--danger-tx); border-color: var(--danger-bd); }
.na-dzis-ico svg { width: 15px; height: 15px; }
.na-dzis-tresc { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.na-dzis-co {
  font-size: var(--fs-base); font-weight: 700; line-height: 1.3;
  overflow-wrap: anywhere;
}
.na-dzis-opis { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.na-dzis-bok {
  display: flex; flex-direction: column; align-items: flex-end; gap: .2rem;
  flex-shrink: 0;
}
.na-dzis-gdzie {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .02em;
  padding: .12rem .45rem; border-radius: 999px; white-space: nowrap;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
/* Slowo "po terminie" zamiast samego czerwonego tla - kolor sam w sobie nie
   jest informacja dla kogos, kto go nie rozroznia. */
.na-dzis-flaga {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .02em;
  padding: .12rem .45rem; border-radius: 999px; white-space: nowrap;
  background: var(--danger-bg); color: var(--danger-tx); border: 1px solid var(--danger-bd);
}
/* Strzalka lezy cicho, dopiero pod kursorem mowi "tu sie klika". */
/* NIE var(--border): obwodka w ciemnym motywie ma prawie kolor tla, wiec
   strzalka po prostu znikala. Przygaszony tekst jest cichy w obu motywach
   i dalej widoczny. */
.na-dzis-strzalka {
  display: inline-flex; color: var(--muted); opacity: .6;
  transition: color .15s ease, transform .15s ease;
}
.na-dzis-strzalka svg { width: 14px; height: 14px; }
.na-dzis-poz:hover .na-dzis-strzalka { color: var(--brand); opacity: 1; transform: translateX(2px); }
.na-dzis-pilne:hover .na-dzis-strzalka { color: var(--danger-tx); }
@media (prefers-reduced-motion: reduce) {
  .na-dzis-poz:hover, .na-dzis-poz:hover .na-dzis-strzalka { transform: none; }
}

/* ============ PASEK U GORY: skok po zakladkach i sekcjach ============ */
.topbar-search { position: relative; }

/* Neutralny "wroc o krok" w pasku gornym - ikona bez podpisu, bo nie
   obiecuje zadnego konkretnego miejsca (w odroznieniu od "Wroc do X"). */
.topbar-wstecz {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; margin-right: .5rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08);
  color: #fff; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.topbar-wstecz svg { width: 15px; height: 15px; transform: rotate(180deg); }
.topbar-wstecz:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); }
.topbar-wstecz:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }
.topbar-wstecz[hidden] { display: none; }
/* Lista podpowiedzi jest `fixed`, a nie `absolute`: pasek u gory ma
   `overflow: hidden` (potrzebne dla zaokraglen i polysku), wiec wszystko,
   co wystaje ponizej jego krawedzi, zostaloby przyciete. Pozycje ustawia
   skrypt z polozenia pola. */
.skok-lista {
  position: fixed; z-index: 60;
  list-style: none; margin: 0; padding: .3rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; box-shadow: var(--shadow); max-height: 60vh; overflow-y: auto;
}
.skok-lista[hidden] { display: none; }
.skok-poz a {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  padding: .45rem .6rem; border-radius: 8px;
  font-size: var(--fs-base); font-weight: 600; color: var(--text);
}
.skok-poz.jest-wybrana a, .skok-poz a:hover { background: var(--brand); color: #fff; }
.skok-opis {
  flex-shrink: 0; font-size: var(--fs-micro); font-weight: 600; color: var(--muted);
}
.skok-poz.jest-wybrana .skok-opis, .skok-poz a:hover .skok-opis { color: rgba(255, 255, 255, .8); }

/* ============ REGULY MATERIALOWE: konfigurator ============
   Tabelka mowila, ile kosztuje jeden prog. O regulach decyduje jednak to, jak
   ukladaja sie OBOK SIEBIE - dziura miedzy progami to oferta bez materialow.
   Stad os progow (jeden rzut oka na cala skale metrazu), nazwane problemy
   i sprawdzenie na sucho, zanim ktos wystawi oferte. */
.regoly-panel { margin-bottom: 1.6rem; }
.regoly-os {
  position: relative; height: 46px; margin: .3rem 0 .35rem;
  border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--border); overflow: hidden;
}
.regoly-os-pas {
  position: absolute; top: 6px; bottom: 6px;
  border-radius: 7px; display: grid; place-items: center;
  background: linear-gradient(180deg,
    color-mix(in srgb, #fff 30%, var(--brand-light)), var(--brand) 60%, var(--brand-dark));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 6px rgba(2, 8, 23, .12);
  border: 1px solid color-mix(in srgb, var(--brand-dark) 60%, transparent);
}
/* Zakres bez gornej granicy nie konczy sie krawedzia - rozmywa sie w prawo. */
.regoly-os-otwarty {
  border-right: none; border-radius: 7px 0 0 7px;
  mask-image: linear-gradient(90deg, #000 78%, transparent);
}
.regoly-os-kwota {
  font-size: var(--fs-micro); font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(2, 8, 23, .35);
}
.regoly-os-skala {
  display: flex; justify-content: space-between;
  font-size: var(--fs-micro); color: var(--muted); margin-bottom: .9rem;
}
.regoly-problemy { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.regoly-problem {
  display: flex; align-items: flex-start; gap: .45rem;
  font-size: var(--fs-sm); padding: .45rem .6rem; border-radius: 9px;
  background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-bd);
}
.regoly-problem svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: .1rem; }
.regoly-problem-luka, .regoly-problem-koniec, .regoly-problem-zaslania {
  background: var(--danger-bg); color: var(--danger-tx); border-color: var(--danger-bd);
}
.regoly-ok {
  display: flex; align-items: center; gap: .45rem; margin: 0 0 .9rem;
  font-size: var(--fs-sm); color: var(--ok-tx, #15803d);
}
.regoly-ok svg { width: 14px; height: 14px; }
.regoly-test {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding-top: .9rem; border-top: 1px solid var(--border);
}
.regoly-test label { font-size: var(--fs-sm); font-weight: 700; }
.regoly-test-pole { position: relative; }
.regoly-test-pole input {
  width: 130px; padding: .45rem 2.2rem .45rem .6rem;
  border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: var(--fs-base);
}
.regoly-test-jednostka {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-sm); color: var(--muted); pointer-events: none;
}
.regoly-test-wynik { font-size: var(--fs-sm); color: var(--muted); flex: 1; min-width: 220px; }
.regoly-test-jest { color: var(--text); font-weight: 700; }
.regoly-test-brak { color: var(--danger-tx); font-weight: 700; }
.regoly-podglad {
  margin: .2rem 0 1rem; font-size: var(--fs-sm); color: var(--muted);
  padding: .5rem .65rem; border-radius: 9px;
  background: var(--surface-2); border: 1px dashed var(--border);
}
.regoly-podglad-info { color: var(--text); border-style: solid; border-color: var(--brand); }
.regoly-podglad-blad { color: var(--danger-tx); background: var(--danger-bg); border-color: var(--danger-bd); border-style: solid; }

/* ============ OKNO WYKRESU: ustawienia i warstwy ============
   Okno bylo powiekszonym rysunkiem tego samego wykresu - te same slupki, te
   same kreski zamiast liczb. Teraz ma wlasne ustawienia (co liczymy, ktore
   statusy, slupek dzielony czy jeden, narastajaco) i liczby pod nimi. */
.chart-ustawienia {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem;
  padding: .6rem .7rem; margin-bottom: .8rem;
  border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border);
}
.chart-miara-btn {
  padding: .3rem .7rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted);
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.chart-miara-btn.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chart-statusy { display: flex; flex-wrap: wrap; gap: .35rem; }
/* Status wlaczony do sumy swieci swoim kolorem; wylaczony gasnie - widac,
   czym sie patrzy, bez czytania podpisow. */
.chart-status-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .55rem; border-radius: 999px; cursor: pointer;
  font-size: var(--fs-micro); font-weight: 700;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  opacity: .45; transition: opacity .12s ease;
}
.chart-status-chip:has(.chart-status:checked) { opacity: 1; }
.chart-status-chip .chart-status { accent-color: var(--brand); width: 13px; height: 13px; }
.chart-przelacznik {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-sm); color: var(--muted); cursor: pointer;
}
.chart-przelacznik input { accent-color: var(--brand); }
/* Warstwa statusu w slupku - jedna na drugiej, od dolu. */
.bar-seg {
  position: absolute; left: 0; right: 0; z-index: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.bar-seg:last-child { border-radius: 7px 7px 0 0; }
/* Linia sredniej nad slupkami. */
.chart-plot { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chart-plot .bar-chart { flex: 1; }
.chart-srednia-linia {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed color-mix(in srgb, var(--text) 45%, transparent);
  pointer-events: none;
}
.chart-srednia-etykieta {
  position: absolute; right: 0; top: -1.05rem;
  font-size: var(--fs-micro); font-weight: 700; color: var(--muted);
  background: var(--surface); padding: 0 .3rem; border-radius: 4px;
}

/* ============ SZYBKI DOBOR MOCY: wniosek na dole ============
   Kalkulator konczyl sie czterema kaflami i pustym miejscem do samego dolu
   kolumny, a rozmowa z klientem konczy sie pytaniem "to co bierzemy i ile to
   kosztuje w sezonie". Wniosek odpowiada na to jednym zdaniem - i przy okazji
   dociaga panel do wysokosci wykresu obok. */
.oferty-columns { align-items: stretch; }
.oferty-col { display: flex; flex-direction: column; }
/* `flex: 1` znaczy `flex-basis: 0`, czyli „wysokosc bez zwiazku z trescia" -
   a `.module-panel` ma `overflow: hidden`, wiec nadmiar znikal bez sladu:
   na karcie klienta formularz „Dodaj adres inwestycji" byl ucinany w polowie
   (widac bylo Ulice i Nr domu, a kod, miejscowosc, uwagi i przycisk „Dodaj"
   juz nie - i nie dalo sie go wyslac). `flex: 1 0 auto` zostawia rozciaganie
   do wysokosci sasiada, ale zabrania kurczenia sie ponizej wlasnej tresci. */
.oferty-col > .module-panel, .oferty-col > .report-panel {
  flex: 1 0 auto; display: flex; flex-direction: column;
}
.calc-wniosek {
  margin-top: auto; padding: .85rem .95rem; border-radius: 12px;
  background: linear-gradient(135deg, var(--navy), #1e293b);
  color: #fff; position: relative; overflow: hidden;
}
.calc-wniosek::after {
  content: ""; position: absolute; right: -40px; top: -50px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 110, 27, .35), transparent 70%);
  pointer-events: none;
}
.calc-wniosek-glowa { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.calc-wniosek-label {
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255, 255, 255, .65);
}
.calc-wniosek-moc { font-size: var(--fs-xl); font-weight: 800; color: var(--brand-light); }
.calc-wniosek-tresc { margin: .35rem 0 .7rem; font-size: var(--fs-sm); color: rgba(255, 255, 255, .88); }
.calc-wniosek-liczby {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem;
}
.calc-wniosek-poz {
  display: flex; flex-direction: column; gap: .12rem;
  padding: .45rem .55rem; border-radius: 9px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
}
.calc-wniosek-poz-label {
  font-size: var(--fs-micro); color: rgba(255, 255, 255, .6);
  text-transform: uppercase; letter-spacing: .03em; font-weight: 700;
}
.calc-wniosek-poz-wartosc { font-size: var(--fs-base); font-weight: 700; color: #fff; }
.calc-wniosek-poz-wartosc input {
  width: 62px; padding: .1rem .3rem; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .1);
  color: #fff; font-size: var(--fs-base); font-weight: 700;
}
.calc-wniosek-uwaga { margin: .6rem 0 0; font-size: var(--fs-micro); color: rgba(255, 255, 255, .55); }

/* ============ OFERTOWANIE: ciasniejszy rytm, wyzsze slupki, kafle ============
   Naglowki sekcji stały tak daleko od paska "Wymaga reakcji" i od wlasnej
   tresci, ze czytaly sie jak trzy osobne strony. Skracamy odstepy nad i pod
   pigulka - zwiazek naglowka z panelem pod nim ma byc widoczny od razu. */
.ofertowanie-page .oferty-toolbar { margin-bottom: .55rem; }
.ofertowanie-page .oferty-columns { gap: 1rem; }
.ofertowanie-page .oferty-col { gap: .5rem; }
.ofertowanie-page .oferty-columns .section-divider { margin: .35rem 0 0; }
.ofertowanie-page .oferty-columns .section-divider-label { padding: .38rem 1rem; }

/* Slupki wyzsze: przy 12 miesiacach i 165 px roznica miedzy dobrym a slabym
   miesiacem miescila sie w kilku pikselach. */
.ofertowanie-page .oferty-chart .bar-chart { height: 250px; }
@media (max-width: 1000px) { .ofertowanie-page .oferty-chart .bar-chart { height: 200px; } }

/* Miejsce bez liczby: trzy kropki zamiast kreski. Kreska w kolumnie liczb
   czyta sie jak wartosc (minus), kropki - jak "czeka na dane". */
.pusto { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.pusto i {
  width: 6px; height: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 55%, transparent);
  animation: pusto-fala 1.7s ease-in-out infinite;
}
.pusto i:nth-child(2) { animation-delay: .22s; }
.pusto i:nth-child(3) { animation-delay: .44s; }
@keyframes pusto-fala {
  0%, 100% { opacity: .3; transform: translateY(1px); }
  50%      { opacity: 1;  transform: translateY(-2px); }
}
.pusto-mini { gap: 2px; }
.pusto-mini i { width: 3px; height: 3px; animation-duration: 2.2s; }
.calc-tile-main .pusto i, .calc-wniosek .pusto i { background: rgba(255, 255, 255, .7); }
@media (prefers-reduced-motion: reduce) { .pusto i { animation: none; opacity: .55; } }

/* Kafle pod wykresem w jezyku tej strony: pomaranczowa krecha z lewej jak
   w przyciskach sekcji, ikona tego, o czym kafel mowi, i granatowa liczba
   jak w pigulkach naglowkow. Biezacy miesiac - odwrocony, granatowy. */
.ofertowanie-page .wykres-podsumowanie {
  grid-template-columns: repeat(2, 1fr); gap: .55rem; margin-top: .9rem;
}
@media (max-width: 640px) { .ofertowanie-page .wykres-podsumowanie { grid-template-columns: 1fr; } }
.ofertowanie-page .wykres-kafel {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: .55rem; row-gap: 0;
  padding: .6rem .75rem .6rem .65rem; border-radius: 12px;
  border-left: 3px solid var(--brand);
}
.wykres-kafel-ico {
  grid-row: span 3; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand-dark); flex-shrink: 0;
}
.wykres-kafel-ico svg { width: 16px; height: 16px; }
.ofertowanie-page .wykres-kafel-label { font-size: var(--fs-micro); letter-spacing: .05em; }
.ofertowanie-page .wykres-kafel-wartosc { color: var(--tekst-mocny); line-height: 1.15; }
.ofertowanie-page .wykres-kafel::after { right: -34px; top: -38px; }
/* Ten miesiac to jedyna liczba, na ktora da sie jeszcze wplynac - stad
   odwrocenie kolorow, a nie tylko inne tlo. */
.ofertowanie-page .wykres-kafel-biezacy {
  background: linear-gradient(150deg, var(--navy), #1e293b);
  border-color: var(--brand); border-left-color: var(--brand);
}
.ofertowanie-page .wykres-kafel-biezacy .wykres-kafel-label { color: rgba(255, 255, 255, .72); }
.ofertowanie-page .wykres-kafel-biezacy .wykres-kafel-wartosc { color: #fff; }
.ofertowanie-page .wykres-kafel-biezacy .wykres-kafel-opis { color: rgba(255, 255, 255, .7); }
.ofertowanie-page .wykres-kafel-biezacy .wykres-kafel-ico {
  background: color-mix(in srgb, var(--brand) 38%, transparent); color: #fff;
}

/* ============================================================
   MOJE KONTO (karta konta) i USTAWIENIA - dwa osobne ekrany.
   Karta konta odpowiada na "kim jestem w systemie i co z moim
   dostepem", Ustawienia na "czy system ma skad brac dane".
   Wczesniej oba pytania staly na jednym ekranie i zaden nie
   mial naglowka, po ktorym da sie je rozroznic.
   ============================================================ */

/* --- Naglowek karty konta: inicjaly, kim jestem, dwa wejscia --- */
.konto-hero-top {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: .9rem 0 1.1rem; position: relative; z-index: 1;
}
.konto-hero-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 20px; flex-shrink: 0;
  background: linear-gradient(150deg, var(--brand), var(--brand-dark));
  color: #fff; font-size: var(--fs-xl); font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 40%, transparent);
}
.konto-hero-kim { min-width: 0; }
.konto-hero-imie { margin: 0; font-size: var(--fs-xl); font-weight: 800; color: #fff; }
.konto-hero-plakietki { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .25rem; }
.konto-hero-kontakt { margin: 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, .7); }
.konto-hero-akcje { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.konto-hero-z { font-size: var(--fs-sm); font-weight: 700; color: rgba(255, 255, 255, .55); }
/* Drugie wejscie w naglowku - obrys zamiast plamy koloru, zeby nie walczylo
   z "Zmien haslo". */
.btn-hero-ghost {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  font-size: var(--fs-sm); font-weight: 700; background: rgba(255, 255, 255, .08);
  transition: background .15s ease, border-color .15s ease;
}
.btn-hero-ghost:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .6); }
.btn-hero-ghost svg { width: 13px; height: 13px; }

/* Fakty konta - trzy kolumny na szerokim ekranie, etykieta nad wartoscia. */
.konto-fakty {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .75rem 1.2rem; margin: 0;
}
.konto-fakty dt {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: .12rem;
}
.konto-fakty dd { margin: 0; font-size: var(--fs-base); color: var(--text); }
.konto-opis-poziomu {
  display: flex; align-items: flex-start; gap: .5rem; margin: 1rem 0 0;
  padding: .7rem .85rem; border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  font-size: var(--fs-sm); color: var(--text);
}
.konto-opis-poziomu svg { width: 15px; height: 15px; color: var(--brand-dark); flex-shrink: 0; margin-top: .1rem; }

/* Prawa konta jako trzy kafle "mam / nie mam" - kolor niesie te sama
   informacje co napis, nie zastepuje jej. */
.konto-prawa-siatka {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem;
}
.konto-prawo-kafel {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: .55rem; padding: .65rem .8rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2);
}
.konto-prawo-ico {
  grid-row: span 2; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--border); color: var(--muted);
}
.konto-prawo-ico svg { width: 16px; height: 16px; }
/* Plakietki „Widzisz: Ofertowanie, Klienci..." na karcie konta - wieksze
   (prosba 03.09.2026), zeby czytalo sie je jak przyciski, nie jak drobne znaczki. */
.konto-page .konta-zakladki > div { gap: .45rem; }
.konto-page .konta-zakl {
  font-size: var(--fs-md); font-weight: 700; padding: .32rem 1.1rem; border-radius: 10px;
}
.konto-prawo-nazwa { font-size: var(--fs-base); font-weight: 700; color: var(--text); }
.konto-prawo-stan { font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.konto-prawo-kafel.ma {
  background: color-mix(in srgb, var(--ok-bg) 70%, var(--surface));
  border-color: var(--ok-bd);
}
.konto-prawo-kafel.ma .konto-prawo-ico { color: var(--ok-tx); border-color: var(--ok-bd); }
.konto-prawo-kafel.ma .konto-prawo-stan { color: var(--ok-tx); }
.konto-prawo-kafel.nie-ma .konto-prawo-nazwa { color: var(--muted); }

/* Haslo i sesje - dwa rownolegle bloki, kazdy z jednym duzym przyciskiem. */
.konto-akcje-siatka {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem;
}
.konto-akcja { display: flex; flex-direction: column; }
.konto-akcja-tytul {
  display: flex; align-items: center; gap: .45rem; margin: 0 0 .4rem;
  font-size: var(--fs-md); font-weight: 800; color: var(--text);
}
.konto-akcja-tytul svg { width: 16px; height: 16px; color: var(--brand-dark); }
.konto-akcja-opis { margin: 0 0 auto; padding-bottom: .9rem; font-size: var(--fs-sm); color: var(--muted); }
.konto-akcja form { margin: 0; }
.btn-sekcja-duzy-danger {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  box-shadow: 0 6px 16px rgba(220, 38, 38, .3);
}
.btn-sekcja-duzy-danger:hover { box-shadow: 0 10px 22px rgba(220, 38, 38, .4); }

/* Zdarzenie w dzienniku: nazwa po polsku, kolor wg wagi. Samo "login"
   w kolumnie nic nie mowilo komus, kto nie zna kodu. */
.konto-zdarzenie {
  display: inline-flex; align-items: center; padding: .16rem .55rem;
  border-radius: 999px; font-size: var(--fs-sm); font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.konto-zdarzenie-login { background: var(--info-bg); border-color: var(--info-bd); color: var(--info-tx); }
.konto-zdarzenie-password_change,
.konto-zdarzenie-password_reset { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-tx); }
.konto-zdarzenie-poziom_dostepu { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-tx); }
.konto-zdarzenie-usuniecie_konta,
.konto-zdarzenie-sesje_zakonczone { background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger-tx); }

/* --- Ustawienia: kafle stanu (integracje, dostep) --- */
.ust-kafle {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .7rem;
}
.ust-kafel {
  display: grid; grid-template-columns: auto 1fr; column-gap: .7rem;
  padding: .8rem .9rem; border-radius: 13px;
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  box-shadow: 0 2px 8px rgba(2, 8, 23, .05);
}
.ust-kafel-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.ust-kafel-ico svg { width: 18px; height: 18px; }
.ust-kafel-tresc { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ust-kafel-label {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.ust-kafel-wartosc { font-size: var(--fs-md); font-weight: 800; color: var(--tekst-mocny); line-height: 1.2; }
.ust-kafel-z { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.ust-kafel-opis { font-size: var(--fs-sm); color: var(--muted); }
/* Stan integracji niesie kolor krechy z lewej - zielona zyje, bursztynowa
   wymaga czlowieka. Napis mowi to samo, kolor tylko przyspiesza. */
.ust-kafel-ok { border-left-color: var(--ok-tx); }
.ust-kafel-ok .ust-kafel-ico { color: var(--ok-tx); border-color: var(--ok-bd); background: var(--ok-bg); }
.ust-kafel-uwaga { border-left-color: var(--warn-tx); }
.ust-kafel-uwaga .ust-kafel-ico { color: var(--warn-tx); border-color: var(--warn-bd); background: var(--warn-bg); }

/* Ustawienia dla kogos bez prawa `konta` - jedno zdanie i wyjscie tam,
   gdzie naprawde ma co ustawiac. */
.ust-pusto { text-align: center; padding: 2rem 1.2rem; }
.ust-pusto-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 18px; margin-bottom: .7rem;
  background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand-dark);
}
.ust-pusto-ico svg { width: 26px; height: 26px; }
.ust-pusto h3 { margin: 0 0 .4rem; font-size: var(--fs-lg); font-weight: 800; }
.ust-pusto p { margin: 0 auto; max-width: 46rem; font-size: var(--fs-base); color: var(--muted); }
.ust-pusto .ust-akcje { justify-content: center; }
/* Wejscie do drugiego ekranu stoi na koncu spisu, po kresce - zeby bylo
   widac, ze wychodzi poza te zakladke. */
.ust-nav-obok {
  margin-left: auto; border-style: dashed;
  border-color: color-mix(in srgb, var(--brand) 45%, transparent); color: var(--brand-dark);
}
@media (max-width: 720px) { .ust-nav-obok { margin-left: 0; } }

/* Nazwa zdarzenia nie lamie sie na trzy linie - kolumna moze byc szersza. */
.konto-zdarzenie { white-space: nowrap; }

/* Ustawienia sa dla ludzi z firmy, nie dla nas: tabele z nazwami tabel bazy,
   device_id i logiem importu chowamy pod rozwijany blok. Kto ich potrzebuje -
   klika; reszta widzi zdanie po polsku i kafel ze stanem. */
.ust-technika {
  margin-top: 1rem; border: 1px dashed var(--border); border-radius: 12px;
  background: var(--surface-2); padding: .2rem .6rem;
}
.ust-technika > summary {
  cursor: pointer; padding: .55rem .3rem; list-style: none;
  font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
}
.ust-technika > summary::-webkit-details-marker { display: none; }
.ust-technika > summary::before { content: "▸ "; color: var(--brand); font-weight: 800; }
.ust-technika[open] > summary::before { content: "▾ "; }
.ust-technika > summary:hover { color: var(--brand-dark); }
.ust-technika .table-wrap { margin-bottom: .6rem; }

/* Uwaga pod sekcja - wyjasnienie, ktore nie jest ostrzezeniem, wiec bez
   czerwieni: szara ramka i ikona notatki. */
.ust-uwaga {
  display: flex; align-items: flex-start; gap: .5rem; margin: 1.1rem 0 0;
  padding: .75rem .9rem; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--muted); max-width: 62rem;
}
.ust-uwaga b { color: var(--text); }
.ust-uwaga svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; margin-top: .1rem; }

/* ============================================================
   USTAWIENIA KONTA - przelaczniki, ktore naprawde cos robia.
   Zakladka jest dla kazdego pracownika i dotyczy wylacznie jego
   ekranu; konfiguracja firmy siedzi w "System i dane".
   ============================================================ */

/* --- Gestosc widoku: kompaktowa mniej oddycha, ale miesci wiecej wierszy --- */
:root[data-gestosc="kompakt"] {
  --fs-micro: .68rem; --fs-sm: .78rem; --fs-base: .84rem;
  --fs-md: .96rem;  --fs-lg: 1rem;    --fs-xl: 1.2rem;
}
:root[data-gestosc="kompakt"] .tbl th,
:root[data-gestosc="kompakt"] .tbl td { padding-top: .35rem; padding-bottom: .35rem; }
:root[data-gestosc="kompakt"] .module-panel,
:root[data-gestosc="kompakt"] .report-panel { padding: .85rem .95rem; }
:root[data-gestosc="kompakt"] .ust-sekcja { margin-bottom: 1.3rem; }
:root[data-gestosc="kompakt"] .section-divider { margin: 1.1rem 0 .9rem; }

/* --- Animacje wylaczone: to samo, co przy systemowym "ogranicz ruch" --- */
:root[data-animacje="nie"] *,
:root[data-animacje="nie"] *::before,
:root[data-animacje="nie"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* --- Formularz ustawien: jedno pole = opis po lewej, przelacznik po prawej --- */
.ust-form { margin: 0; }
.ust-pole {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: .95rem 0; border-bottom: 1px solid var(--border);
}
.ust-pole:last-child { border-bottom: 0; padding-bottom: .2rem; }
.ust-pole:first-child { padding-top: .2rem; }
.ust-pole-opis { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ust-pole-nazwa { font-size: var(--fs-md); font-weight: 800; color: var(--text); }
.ust-pole-pomoc { font-size: var(--fs-sm); color: var(--muted); max-width: 46rem; }

/* Wybor jak w grze: kilka kafelkow obok siebie, zaznaczony swieci marka. */
.ust-wybor { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.ust-opcja {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: var(--fs-base); font-weight: 700; color: var(--text);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ust-opcja input { position: absolute; opacity: 0; pointer-events: none; }
.ust-opcja:hover { border-color: var(--brand); transform: translateY(-1px); }
.ust-opcja:has(input:checked) {
  border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 25%, transparent);
}
.ust-opcja:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Podglad motywu - dwa paski w kolorach, ktore wybierasz, zeby nie zgadywac
   z samej nazwy, jak to bedzie wygladac. */
.ust-opcja-podglad {
  width: 26px; height: 18px; border-radius: 5px; border: 1px solid var(--border);
  display: inline-block; flex-shrink: 0;
}
.ust-opcja-jasny .ust-opcja-podglad { background: linear-gradient(160deg, #ffffff 55%, #e2e8f0); }
.ust-opcja-ciemny .ust-opcja-podglad { background: linear-gradient(160deg, #0b1120 55%, #293548); }
.ust-opcja-system .ust-opcja-podglad { background: linear-gradient(110deg, #ffffff 49%, #0b1120 51%); }

/* Przelacznik wl/wyl - taki, jakiego kazdy szuka w ustawieniach telefonu. */
.ust-przelacznik {
  display: inline-flex; align-items: center; gap: .6rem; margin-left: auto;
  cursor: pointer; font-size: var(--fs-base); font-weight: 700; color: var(--muted);
}
.ust-przelacznik input { position: absolute; opacity: 0; pointer-events: none; }
.ust-przelacznik-tor {
  width: 46px; height: 26px; border-radius: 999px; position: relative;
  background: var(--border); transition: background .18s ease;
}
.ust-przelacznik-tor::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(2, 8, 23, .35); transition: transform .18s ease;
}
.ust-przelacznik:has(input:checked) .ust-przelacznik-tor { background: var(--brand); }
.ust-przelacznik:has(input:checked) .ust-przelacznik-tor::after { transform: translateX(20px); }
.ust-przelacznik:has(input:checked) .ust-przelacznik-napis { color: var(--brand-dark); }
.ust-przelacznik:has(input:focus-visible) .ust-przelacznik-tor { outline: 2px solid var(--brand); outline-offset: 2px; }

.ust-select {
  margin-left: auto; min-width: 15rem; padding: .55rem .8rem; border-radius: 11px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-family: inherit; font-size: var(--fs-base); font-weight: 700;
}
.ust-select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

/* Pasek zapisu - przyklejony na dole ekranu, zeby nie trzeba bylo wracac
   na gore po zmianie ostatniego przelacznika. */
.ust-zapis {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  margin: 0 0 1.6rem; padding: .8rem .95rem; border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border); backdrop-filter: blur(6px);
  box-shadow: 0 -6px 18px rgba(2, 8, 23, .08);
}
.ust-zapis-info { font-size: var(--fs-sm); color: var(--muted); flex: 1 1 20rem; }

/* Skroty do konta - wiersze klikalne na cala szerokosc, ze strzalka. */
.ust-skroty { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .6rem; }
.ust-skrot {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
  padding: .85rem .95rem; border-radius: 13px;
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ust-skrot:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(2, 8, 23, .1); }
.ust-skrot-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-dark);
}
.ust-skrot-ico svg { width: 18px; height: 18px; }
.ust-skrot-tekst { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ust-skrot-tekst b { font-size: var(--fs-base); color: var(--text); }
.ust-skrot-tekst span { font-size: var(--fs-sm); color: var(--muted); }
.ust-skrot-strzalka { color: var(--muted); display: inline-flex; }
.ust-skrot-strzalka svg { width: 16px; height: 16px; }
.ust-skrot-system { border-left-color: var(--navy); }
.ust-skrot-system .ust-skrot-ico { background: color-mix(in srgb, var(--tekst-mocny) 14%, transparent); color: var(--tekst-mocny); }
@media (max-width: 700px) {
  .ust-wybor, .ust-przelacznik, .ust-select { margin-left: 0; }
}

/* ============ OPIEKA IT: kafle, ktore niosa liczbe ============
   Byly cztery biale prostokaty z naglowkiem i zdaniem opisu - z takiego ekranu
   nie dalo sie odczytac, czy cokolwiek dziala. Teraz kazdy kafel ma ikone,
   plakietke stanu, trzy liczby i zdanie, po co to komu. */
.opieka-karty {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: .9rem; align-items: start;
}
.opieka-karta {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .6rem;
  padding: 1rem 1.1rem 1.1rem; border-radius: 16px;
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); border-top: 3px solid var(--border);
  box-shadow: 0 3px 12px rgba(2, 8, 23, .06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.opieka-karta:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(2, 8, 23, .12); }
/* Poswiata w rogu w kolorze stanu - ten sam jezyk, co kafle na pulpicie. */
.opieka-karta::after {
  content: ""; position: absolute; right: -40px; top: -46px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.opieka-karta-ok { border-top-color: var(--ok-tx); }
.opieka-karta-ok::after { background: radial-gradient(circle, color-mix(in srgb, var(--ok-tx) 18%, transparent), transparent 70%); }
.opieka-karta-uwaga { border-top-color: var(--warn-tx); }
.opieka-karta-uwaga::after { background: radial-gradient(circle, color-mix(in srgb, var(--warn-tx) 22%, transparent), transparent 70%); }
.opieka-karta-zle { border-top-color: var(--danger-tx); }
.opieka-karta-zle::after { background: radial-gradient(circle, color-mix(in srgb, var(--danger-tx) 22%, transparent), transparent 70%); }
.opieka-karta-dane { border-top-color: var(--brand); }

.opieka-karta-glowa { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; }
.opieka-karta-glowa h3 { margin: 0; font-size: var(--fs-md); font-weight: 800; color: var(--text); }
.opieka-karta-pod { font-size: var(--fs-micro); color: var(--muted); }
.opieka-karta-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand-dark);
}
.opieka-karta-ico svg { width: 20px; height: 20px; }
.opieka-karta-ok .opieka-karta-ico { background: var(--ok-bg); color: var(--ok-tx); }
.opieka-karta-uwaga .opieka-karta-ico { background: var(--warn-bg); color: var(--warn-tx); }
.opieka-karta-zle .opieka-karta-ico { background: var(--danger-bg); color: var(--danger-tx); }
.opieka-znak {
  align-self: start; white-space: nowrap;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.opieka-karta-ok .opieka-znak { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-tx); }
.opieka-karta-uwaga .opieka-znak { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-tx); }
.opieka-karta-zle .opieka-znak { background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger-tx); }
.opieka-karta-tresc { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* Trzy liczby w rzedzie - to po nie sie tu wchodzi. */
.opieka-liczby {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  padding: .6rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.opieka-liczby > div { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.opieka-liczba { font-size: var(--fs-md); font-weight: 800; color: var(--tekst-mocny); line-height: 1.15; }
.opieka-podpis { font-size: var(--fs-micro); color: var(--muted); }
.opieka-stopka { margin: 0; font-size: var(--fs-micro); color: var(--muted); }
.opieka-stopka b { color: var(--text); }

/* Zajetosc dysku paskiem - procent w slupku widac szybciej niz w liczbie. */
.opieka-dysk { display: flex; flex-direction: column; gap: .25rem; }
.opieka-dysk-glowa {
  display: flex; justify-content: space-between; gap: .6rem;
  font-size: var(--fs-sm); color: var(--muted);
}
.opieka-pasek {
  display: block; height: 9px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.opieka-pasek > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-light), var(--brand));
}
.opieka-pasek-uwaga > span { background: linear-gradient(90deg, #fbbf24, #dc2626); }

/* ============ CO NOWEGO: os czasu zamiast listy punktow ============
   Wpisy z kilkunastu dni w jednej plaskiej liscie zlewaly sie w sciane tekstu -
   nie bylo widac, gdzie konczy sie jeden dzien, a zaczyna drugi. Data siedzi
   teraz na osi, a dzien jest karta z ponumerowanymi zmianami. */
.os-czasu { display: flex; flex-direction: column; }
.os-dzien { display: grid; grid-template-columns: 44px 1fr; gap: .9rem; }
.os-znacznik { display: flex; flex-direction: column; align-items: center; }
.os-kropka {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface); border: 2px solid var(--border); color: var(--muted);
}
.os-kropka svg { width: 16px; height: 16px; }
.os-linia { flex: 1; width: 2px; background: var(--border); margin: .3rem 0; }
.os-dzien-nowy .os-kropka {
  background: linear-gradient(150deg, var(--brand), var(--brand-dark));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 40%, transparent);
}

.os-tresc {
  margin-bottom: 1rem; padding: .9rem 1.1rem 1rem; border-radius: 15px;
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(2, 8, 23, .05);
}
.os-dzien-nowy .os-tresc { border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.os-glowa { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.os-data { font-size: var(--fs-md); font-weight: 800; color: var(--tekst-mocny); }
.os-licznik {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .1rem .55rem;
}
.os-nowe {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; background: var(--brand); border-radius: 999px; padding: .1rem .55rem;
}
.os-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.os-wpis {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  padding: .55rem .1rem; border-top: 1px solid var(--border);
}
.os-wpis:first-child { border-top: 0; padding-top: 0; }
.os-numer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; margin-top: .1rem;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand-dark); font-size: var(--fs-micro); font-weight: 800;
}
.os-tekst { font-size: var(--fs-base); color: var(--text); line-height: 1.55; }
@media (max-width: 640px) {
  .os-dzien { grid-template-columns: 28px 1fr; gap: .6rem; }
  .os-kropka { width: 26px; height: 26px; }
  .os-kropka svg { width: 12px; height: 12px; }
}

/* Wielkosc pisma z ustawien konta - skala calej aplikacji, nie tylko naglowkow.
   Ten sam mechanizm co gestosc: atrybut na <html>, wiec dziala od pierwszego
   malowania strony. */
:root[data-pismo="male"] {
  --fs-micro: .68rem; --fs-sm: .78rem; --fs-base: .85rem;
  --fs-md: .95rem;   --fs-lg: 1rem;    --fs-xl: 1.2rem;
}
:root[data-pismo="duze"] {
  --fs-micro: .82rem; --fs-sm: .92rem; --fs-base: 1.02rem;
  --fs-md: 1.16rem;  --fs-lg: 1.3rem;  --fs-xl: 1.6rem;
}
/* Podglad przy wyborze: nazwa opcji pisana wielkoscia, ktora wybierasz. */
.ust-opcja-pismo-male .ust-opcja-nazwa { font-size: .8rem; }
.ust-opcja-pismo-duze .ust-opcja-nazwa { font-size: 1.1rem; }

/* Wejscie w drugi ekran w kolorze marki - bialy napis na pomaranczowym,
   zeby bylo widac, ze to przycisk, a nie kolejna zakladka spisu. */
.ust-nav-obok {
  margin-left: auto; border-style: solid;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 32%, transparent);
}
.ust-nav-obok:hover { color: #fff; border-color: transparent; filter: brightness(1.06); }
.ust-nav-obok svg { color: #fff; }

/* Wyjscie ze zmiany hasla dla kogos, kto juz jest zalogowany. Przy linku
   z maila i przy wymuszonej pierwszej zmianie tego przycisku nie ma. */
.btn-wroc {
  display: block; width: 100%; margin-top: .7rem; padding: .6rem 1rem;
  border-radius: 11px; text-align: center;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: var(--fs-base); font-weight: 700;
  transition: border-color .15s ease, background .15s ease;
}
.btn-wroc:hover { border-color: var(--brand); color: var(--brand-dark); }

/* Plakietka "Zapisywane automatycznie" - wyglada jak przycisk, bo zajmuje jego
   miejsce, ale niczego nie robi: kazdy przelacznik zapisuje sie sam. */
.ust-auto { cursor: default; box-shadow: none; }
.ust-auto:hover { transform: none; filter: none; }

/* Opieka IT: jedna duza sekcja "Dane w systemie", a w niej cztery kafle stanu. */
.opieka-glowna {
  padding: 1.1rem 1.2rem 1.3rem; border-radius: 18px;
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); border-top: 3px solid var(--brand);
  box-shadow: 0 4px 16px rgba(2, 8, 23, .06);
}
.opieka-glowna-glowa {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .9rem; margin-bottom: 1.1rem; padding-bottom: .9rem;
  border-bottom: 1px solid var(--border);
}
.opieka-glowna-glowa h2 { margin: 0 0 .2rem; font-size: var(--fs-lg); font-weight: 800; }
.opieka-glowna-glowa p { margin: 0; font-size: var(--fs-sm); color: var(--muted); max-width: 70rem; }
.opieka-glowna-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 15px; flex-shrink: 0;
  background: linear-gradient(150deg, var(--brand), var(--brand-dark)); color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 35%, transparent);
}
.opieka-glowna-ico svg { width: 22px; height: 22px; }
@media (max-width: 820px) {
  .opieka-glowna-glowa { grid-template-columns: auto 1fr; }
  .opieka-glowna-glowa .btn-sekcja-duzy { grid-column: 1 / -1; justify-content: center; }
}

/* Plakietka superadministratora: ciemny pomaranczowy napis (#b8552f) siedzial
   na ciemnym tle i praktycznie znikal. W ciemnym motywie rozjasniamy napis
   i mocniej podkladamy tlo - jasny zostaje bez zmian. */
:root[data-motyw="ciemny"] .role-super {
  color: #ffb489; background: rgba(224, 122, 95, .24); border-color: rgba(224, 122, 95, .5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]):not([data-motyw="ciemny"]) .role-super {
    color: #ffb489; background: rgba(224, 122, 95, .24); border-color: rgba(224, 122, 95, .5);
  }
}

/* Ikona miejsca, do ktorego wraca przycisk - strzalka w kolku mowi "wstecz",
   a ikona po nazwie od razu podpowiada, dokad. Jeden wzor na cala aplikacje
   (makro _powrot.html), rozni sie tylko ikona i nazwa. */
.btn-powrot-cel {
  display: inline-flex; align-items: center; margin-left: .1rem;
  color: var(--muted); opacity: .85;
}
.btn-powrot-cel svg { width: 14px; height: 14px; }
.btn-powrot:hover .btn-powrot-cel { color: var(--brand-dark); opacity: 1; }
.btn-powrot-hero .btn-powrot-cel { color: rgba(255, 255, 255, .75); }
.btn-powrot-hero:hover .btn-powrot-cel { color: #fff; }
/* Powrot na podstronach Opieki IT stoi nad trescia, z odstepem od naglowka. */
.opieka-powrot { margin: 0 0 1rem; }

/* Szukanie klienta w kreatorze oferty - pole z podpowiedziami zamiast listy
   z kilkunastoma tysiacami pozycji. */
.klient-szukajka { position: relative; }
.klient-szukajka input { width: 100%; }
.klient-podpowiedzi {
  position: absolute; left: 0; right: 0; top: calc(100% + .3rem); z-index: 30;
  margin: 0; padding: .3rem; list-style: none; max-height: 18rem; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 34px rgba(2, 8, 23, .18);
}
.klient-podpowiedzi[hidden] { display: none; }
.klient-podpowiedz {
  display: flex; flex-direction: column; gap: .05rem; cursor: pointer;
  padding: .45rem .6rem; border-radius: 9px;
}
.klient-podpowiedz b { font-size: var(--fs-base); color: var(--text); }
.klient-podpowiedz span { font-size: var(--fs-micro); color: var(--muted); }
.klient-podpowiedz:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.klient-podpowiedz-pusto { padding: .6rem; font-size: var(--fs-sm); color: var(--muted); }
.klient-wybrany {
  margin: .45rem 0 0; padding: .4rem .7rem; border-radius: 9px;
  background: var(--ok-bg); border: 1px solid var(--ok-bd); color: var(--ok-tx);
  font-size: var(--fs-sm); font-weight: 700;
}

/* Widoczny fokus przy wedrowce strzalkami po Ustawieniach - bez tego nie
   wiadomo, na czym sie stoi. */
.ust-opcja:focus-visible, .ust-przelacznik:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.ust-opcja:focus-visible { border-color: var(--brand); }

/* ============================================================
   WIDOK NA TELEFONIE I MALYM TABLECIE
   ------------------------------------------------------------
   Aplikacja byla zbudowana pod jedna szerokosc: pasek boczny na
   stale zajmuje 236 px, a tresc zaczyna sie za nim. Na ekranie
   telefonu (typowo 360-430 px) zostawalo na tresc niecale 150 px
   i wszystko sie rozjezdzalo - stad ten blok.
   Zasada: uklad z laptopa zostaje bez zmian, ponizej progu pasek
   chowa sie za przycisk, a tresc dostaje cala szerokosc ekranu.
   ============================================================ */

/* Przycisk menu i przyciemnienie tla istnieja w kazdym rozmiarze (sa w HTML),
   ale widac je dopiero ponizej progu. */
.pasek-przycisk { display: none; }
.pasek-zaslona { display: none; }

@media (max-width: 760px) {
  /* --- 1. Pasek boczny jako szuflada ------------------------------------ */
  .sidebar {
    width: min(82vw, 290px);
    transform: translateX(-102%);          /* 102%, zeby schowac tez poblask krawedzi */
    transition: transform .22s ease;
    will-change: transform;
  }
  :root[data-pasek="otwarty"] .sidebar {
    transform: none;
    box-shadow: 0 0 44px rgba(2, 6, 23, .6);
  }
  /* Krawedz LED jest przyklejona do OKNA (zob. `.sidebar::after`), a szuflada
     jezdzi transformem - liczylaby sie wtedy wzgledem szuflady, nie ekranu.
     Na telefonie i tak nie jest potrzebna: otwarta szuflada ma wlasny cien. */
  .sidebar::after { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
  }
  .pasek-zaslona {
    display: block; position: fixed; inset: 0; z-index: 19;
    background: rgba(2, 6, 23, .55);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  :root[data-pasek="otwarty"] .pasek-zaslona { opacity: 1; pointer-events: auto; }

  /* Tresc odzyskuje miejsce po pasku. */
  .main { margin-left: 0; }

  /* --- 2. Przycisk menu w pasku u gory ---------------------------------- */
  .pasek-przycisk {
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; z-index: 3; flex-shrink: 0;
    width: 34px; height: 34px; margin-right: .55rem;
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px;
    background: rgba(255, 255, 255, .12); cursor: pointer; padding: 0;
  }
  .pasek-przycisk:hover { background: rgba(255, 255, 255, .2); }
  .pasek-przycisk:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }
  /* Trzy kreski z jednego elementu - srodkowa to on sam, skrajne to cienie. */
  .pasek-przycisk-kreski,
  .pasek-przycisk-kreski::before,
  .pasek-przycisk-kreski::after {
    content: ""; display: block; width: 16px; height: 2px; border-radius: 2px;
    background: #fff;
  }
  .pasek-przycisk-kreski { position: relative; }
  .pasek-przycisk-kreski::before { position: absolute; top: -5px; }
  .pasek-przycisk-kreski::after  { position: absolute; top: 5px; }

  /* --- 3. Pasek u gory i marginesy tresci ------------------------------- */
  .topbar {
    top: 8px; margin: 8px 10px 0; padding: .5rem .6rem;
    border-radius: 12px;
  }
  /* Watermark logo nie miesci sie obok przycisku i tytulu - na telefonie
     tytul zakladki jest wazniejszy niz znak firmowy w tle. */
  .topbar::after { display: none; }
  .page-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .content { padding: 1.1rem .85rem; }
  .dashboard-page .content { padding: 1.1rem 0; }
  .ofertowanie-page .content,
  .konto-page .content,
  .ustawienia-page .content,
  .system-page .content,
  .opieka-page .content,
  .aktywnosc-page .content,
  .zadania-page .content,
  .changelog-page .content { padding: 1.1rem 10px; }
  .dashboard-page .hero-section,
  .dashboard-page .dash-section { margin-left: 10px; margin-right: 10px; }

  /* --- 4. Nic nie wystaje poza ekran ------------------------------------ */
  /* Dlugie slowa bez spacji (adresy e-mail, numery katalogowe, linki) same
     nie zawijaja i to one najczesciej rozpychaja strone w bok. */
  .content { overflow-wrap: anywhere; }
  /* Tabele przewijaja sie w swoim pudelku, a nie razem z cala strona. */
  .table-wrap, .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Rzedy przyciskow (akcje, filtry, plakietki) lamia sie do nowej linii
     zamiast wypychac karte. */
  .zd-akcje, .zd-wiersz-akcje, .zd-filtry, .konta-akcje,
  .fleet-filtry, .prac-chipy, .hero-actions, .oferty-actions,
  .tbl-actions, .section-divider, .nt-punkt-stopka, .nt-karta-stopka {
    flex-wrap: wrap;
  }
  .konta-akcje { grid-template-columns: 1fr 1fr; justify-content: stretch; }
  /* Obrazy i osadzenia nie szersze niz ich miejsce. */
  img, svg, video, iframe, canvas, pre { max-width: 100%; }
}

/* Ponizej 640 px (telefon trzymany w pionie) siatki schodza do jednej kolumny,
   bo dwie sa juz nieczytelne. */
@media (max-width: 640px) {
  .hero-stat-row { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .stats-count-row { grid-template-columns: 1fr; }
  .calc-fields, .calc-results { grid-template-columns: 1fr 1fr; }
  .mag-marka { grid-template-columns: 1fr auto; }
  .na-dzis-poz { grid-template-columns: 30px minmax(0, 1fr) 14px; }
  .konta-akcje { grid-template-columns: 1fr; }
  .ust-skrot, .opieka-karta-glowa, .opieka-glowna-glowa {
    grid-template-columns: auto 1fr;
  }
  /* Naglowek strony i przycisk obok niego stoja jeden pod drugim - obok
     siebie zostawaly z nich dwa waskie paski. */
  .hero-glowa, .oferty-hero-top, .sekcja-glowa {
    flex-direction: column; align-items: flex-start; gap: .6rem;
  }
  /* Bez zawijania caly wiersz „Pulpit · godzina · data" musial sie zmiescic
     w jednej linii, wiec kurczyl sie do „PULPI / T" i „14:43:0 / 9". */
  .hero-eyebrow { flex-wrap: wrap; row-gap: .15rem; }
  .content { padding-left: .7rem; padding-right: .7rem; }
}

/* ============================================================
   ADRESY INWESTYCJI NA KARCIE KLIENTA
   ------------------------------------------------------------
   Wpis byl wierszem listy: nazwa u gory, a pod nia jedna szara
   linijka wielkosci przypisu, w ktorej adres, uwagi, data i
   nazwisko lezaly obok siebie oddzielone kropkami. Adres - czyli
   to, po co ktokolwiek tu zaglada - wygladal tak samo wazny jak
   data dopisania. Teraz kazda inwestycja to wlasna kafelka, a
   adres jest w niej napisem wiodacym.
   ============================================================ */
.inw-lista { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .55rem; }
.inw-poz {
  display: flex; align-items: flex-start; gap: .8rem; min-width: 0;
  padding: .85rem .95rem; border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.inw-poz:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
  border-left-color: var(--brand); box-shadow: var(--shadow); }
.inw-poz-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  color: var(--brand);
}
.inw-poz-ico svg { width: 17px; height: 17px; }
.inw-poz-tresc { display: flex; flex-direction: column; gap: .12rem; min-width: 0; flex: 1; }
/* Nazwa inwestycji to etykieta nad adresem („Blok B, klatka 3"), a nie tytul
   wpisu - po adres siega sie czesciej. */
.inw-poz-nazwa {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
}
.inw-poz-adres {
  font-size: var(--fs-lg); font-weight: 800; color: var(--tekst-mocny);
  line-height: 1.3; letter-spacing: -.005em; overflow-wrap: anywhere;
}
.inw-poz-uwagi {
  font-size: var(--fs-base); color: var(--text); line-height: 1.45;
  overflow-wrap: anywhere; margin-top: .18rem;
}
.inw-poz-meta {
  font-size: var(--fs-sm); color: var(--muted); margin-top: .3rem;
  overflow-wrap: anywhere;
}
.inw-poz-akcja { margin: 0; flex-shrink: 0; }

/* ============================================================
   OPIEKA IT: LICENCJE I DOSTEPY DO FOLDEROW
   ------------------------------------------------------------
   Trzy warstwy na jednym ekranie, ktorych nie wolno pomylic:
   zdjecie stanu licencji, zdjecie stanu dostepow i - osobno,
   innym kolorem - decyzje wlascicieli o tym, co z tym robimy.
   ============================================================ */

/* Data stanu u samej gory. Bez niej ekran zacznie klamac przy pierwszej
   zmianie po stronie dostawcy, a listy wygladaja tak samo wiarygodnie
   tydzien i rok po pobraniu - stad ramka, a nie szara linijka. */
.lic-stan {
  display: flex; align-items: flex-start; gap: .8rem;
  margin: 1rem 0 1.4rem; padding: .85rem 1rem; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
}
.lic-stan-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  color: var(--brand);
}
.lic-stan-ico svg { width: 16px; height: 16px; }
.lic-stan > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.lic-stan b { font-size: var(--fs-md); color: var(--tekst-mocny); }
.lic-stan span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.lic-zrodlo { overflow-wrap: anywhere; }

/* Znaczniki przy wierszach: to nie sa bledy, tylko rzeczy, ktore trzeba
   widziec (adres spoza domeny, brak nazwiska, folder poufny). */
.lic-znak {
  display: inline-block; margin-left: .35rem; white-space: nowrap;
  font-size: var(--fs-micro); font-weight: 700;
  padding: .05rem .4rem; border-radius: 999px;
  background: var(--stal-bg); color: var(--stal-tx); border: 1px solid var(--stal-bd);
}
.lic-znak-uwaga, .lic-znak-obca {
  background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-bd);
}
.lic-znak-wrazliwy {
  background: var(--danger-bg); color: var(--danger-tx); border-color: var(--danger-bd);
}
.lic-znak-zlecone {
  background: var(--info-bg); color: var(--info-tx); border-color: var(--info-bd);
}

/* Pakiet decydujacy o koszcie - ta jedna rzecz ma byc czytelna z drugiego
   konca stolu, bo o nia pyta ksiegowosc. */
.lic-pakiet {
  display: inline-block; font-size: var(--fs-sm); font-weight: 800;
  padding: .12rem .55rem; border-radius: 999px; white-space: nowrap;
}
.lic-pakiet-standard { background: var(--brand); color: #fff; }
.lic-pakiet-basic { background: var(--stal-bg); color: var(--stal-tx); border: 1px solid var(--stal-bd); }
.lic-pakiet-inna { background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-bd); }

.lic-poz {
  display: inline-block; margin: .1rem .25rem .1rem 0;
  font-size: var(--fs-sm); padding: .1rem .5rem; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
/* Darmowa pozycja przygaszona: jest na liscie, bo konto ja ma, ale w rachunku
   sie nie liczy i nie ma po co konkurowac wzrokowo z platna. */
.lic-poz-darmowa { color: var(--muted); border-style: dashed; }

.lic-uwaga {
  margin: .8rem 0 1rem; padding: .7rem .9rem; border-radius: 10px;
  background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn-tx);
  font-size: var(--fs-base); line-height: 1.55;
}

/* Macierz folder x osoba. Tabela „kto ma co" czyta sie duzo szybciej niz
   55 wierszy listy - widac dziury, a to o dziury w dostepie do kadr
   i rozliczen tu chodzi. Szeroka, wiec siedzi w .przewin. */
.lic-macierz { min-width: 46rem; }
.lic-macierz th, .lic-macierz td { text-align: center; }
.lic-macierz-rog, .lic-folder { text-align: left !important; white-space: nowrap; }
.lic-folder { font-weight: 700; color: var(--tekst-mocny); }
.lic-osoba { vertical-align: bottom; }
/* Dziewiec nazwisk poziomo nie miesci sie w zadnej rozsadnej szerokosci -
   stad pionowy naglowek. */
.lic-osoba span {
  display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em;
  white-space: nowrap; padding: .2rem 0;
}
.lic-komorka { font-size: var(--fs-md); }
.lic-ma { color: var(--brand); font-weight: 800; }
.lic-nie-ma { color: var(--border); }
.lic-wiersz-wrazliwy td { background: color-mix(in srgb, var(--danger-bg) 60%, transparent); }

.lic-zapisy { list-style: none; margin: .5rem 0 1.2rem; padding: 0; display: grid; gap: .35rem; }
.lic-zapisy li {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .5rem .7rem; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--fs-base);
}
.lic-zapis-stary { color: var(--muted); text-decoration: line-through; }
.lic-zapis-strzalka { color: var(--brand); font-weight: 800; }

/* Decyzje - inna warstwa niz zdjecie stanu, wiec i inny ksztalt: kafelki
   z kolorem zaleznym od tego, czy sprawa czeka na czlowieka. */
.lic-decyzje { display: grid; gap: .6rem; margin-bottom: 1.4rem; }
.lic-decyzja {
  padding: .85rem 1rem; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
}
.lic-decyzja-uwaga { border-left-color: var(--warn-tx); }
.lic-decyzja-ruch  { border-left-color: var(--brand); }
.lic-decyzja-nasze { border-left-color: var(--ai); }
.lic-decyzja-ok    { border-left-color: var(--ok-tx); }
.lic-decyzja-glowa {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem;
}
.lic-decyzja-znak {
  font-size: var(--fs-sm); font-weight: 800; white-space: nowrap;
  padding: .12rem .55rem; border-radius: 999px;
}
.lic-decyzja-znak-uwaga { background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-bd); }
.lic-decyzja-znak-ruch  { background: var(--brand); color: #fff; }
.lic-decyzja-znak-nasze { background: var(--ai-bg); color: var(--ai-tx); border: 1px solid var(--ai-bd); }
.lic-decyzja-znak-ok    { background: var(--ok-bg); color: var(--ok-tx); border: 1px solid var(--ok-bd); }
.lic-decyzja-konto { font-size: var(--fs-base); font-weight: 700; color: var(--tekst-mocny); overflow-wrap: anywhere; }
.lic-decyzja-osoba { font-size: var(--fs-sm); color: var(--muted); }
.lic-decyzja-opis { margin: 0; font-size: var(--fs-base); line-height: 1.55; color: var(--text); }
.lic-decyzja-stopka { margin: .45rem 0 0; font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .lic-osoba span { font-size: var(--fs-micro); }
}

/* ============================================================
   JAK SKONCZYLA SIE OFERTA
   ------------------------------------------------------------
   Zaakceptowana i odrzucona maja sie roznic KOLOREM I SLOWEM.
   Sam kolor nie wystarcza: zielona i czerwona pigulka wygladaja
   podobnie na wydruku, przy sloncu na laptopie w aucie i dla
   kogos, kto tych kolorow nie rozroznia - a „dlaczego nie
   przeszla" z koloru nie wynika w ogole.
   ============================================================ */

/* --- Baner na karcie oferty ---------------------------------------------- */
.oferta-decyzja {
  display: flex; align-items: flex-start; gap: .85rem;
  margin: 0 0 1rem; padding: .9rem 1.1rem; border-radius: 14px;
  border: 1px solid var(--border); border-left: 4px solid var(--border);
  background: var(--surface);
}
.oferta-decyzja-zaakceptowana {
  background: var(--ok-bg); border-color: var(--ok-bd); border-left-color: var(--ok-tx);
}
.oferta-decyzja-odrzucona {
  background: var(--danger-bg); border-color: var(--danger-bd); border-left-color: var(--danger-tx);
}
.oferta-decyzja-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--border);
}
.oferta-decyzja-ico svg { width: 18px; height: 18px; }
.oferta-decyzja-zaakceptowana .oferta-decyzja-ico { color: var(--ok-tx); border-color: var(--ok-bd); }
.oferta-decyzja-odrzucona .oferta-decyzja-ico { color: var(--danger-tx); border-color: var(--danger-bd); }
.oferta-decyzja-tresc { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.oferta-decyzja-glowa { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.oferta-decyzja-glowa b { font-size: var(--fs-lg); font-weight: 800; }
.oferta-decyzja-zaakceptowana .oferta-decyzja-glowa b { color: var(--ok-tx); }
.oferta-decyzja-odrzucona .oferta-decyzja-glowa b { color: var(--danger-tx); }
/* Dopisek slowem - to on niesie znaczenie, gdy koloru nie widac. */
.oferta-decyzja-dopisek { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.oferta-decyzja-powod {
  margin: .3rem 0 0; font-size: var(--fs-md); line-height: 1.55; color: var(--text);
  overflow-wrap: anywhere;
}
.oferta-decyzja-powod-label { font-weight: 800; }
.oferta-decyzja-pusto { color: var(--muted); font-size: var(--fs-base); }
.oferta-decyzja-stopka { margin: .35rem 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* --- Pole powodu przy zmianie statusu ------------------------------------ */
/* Pasek statusu jest jednorzedowym flexem, wiec pole na powod musi jawnie
   zajac caly rzad - jako zwykly element flexa kurczylo sie do resztki miejsca
   po prawej i etykieta lądowala obok listy statusow zamiast pod nia. */
.oferta-pasek-status form { flex-wrap: wrap; }
.oferta-decyzja-pole {
  display: grid; gap: .3rem; margin-top: .6rem;
  padding-top: .6rem; border-top: 1px dashed var(--border);
  flex: 1 0 100%; width: 100%; max-width: 34rem;
}
.oferta-decyzja-pole[hidden] { display: none; }
.oferta-decyzja-pole label { font-size: var(--fs-base); font-weight: 700; color: var(--text); }
.oferta-decyzja-pole textarea {
  width: 100%; padding: .5rem .65rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-base); resize: vertical;
}
.oferta-decyzja-akcje { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .2rem; }

/* --- Wiersz listy ofert --------------------------------------------------- */
/* Pasek z boku wiersza - przy trzydziestu wierszach oko lapie krawedz,
   a nie odcien tla malej plakietki. */
.oferta-wiersz-zaakceptowana td:first-child { box-shadow: inset 3px 0 0 var(--ok-tx); }
.oferta-wiersz-odrzucona td:first-child { box-shadow: inset 3px 0 0 var(--danger-tx); }
.oferta-wiersz-odrzucona td { opacity: .82; }
.oferta-wiersz-odrzucona:hover td { opacity: 1; }

/* Kolumna statusu dostaje wlasna szerokosc - inaczej dopisek i powod lamia
   sie po dwa slowa na linijke i wiersz rosnie na pol ekranu. Ten sam zabieg,
   co przy znaczniku kontaktu w liscie do dzwonienia. */
.tbl td:has(.oferta-dopisek) { min-width: 15rem; }
.oferta-dopisek {
  display: block; margin-top: .2rem; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .01em;
}
.oferta-dopisek-zaakceptowana { color: var(--ok-tx); }
.oferta-dopisek-odrzucona { color: var(--danger-tx); }
/* Powod przycinamy do dwoch linii - pelna tresc jest w dymku i na karcie.
   Wiersz tabeli nie moze urosnac do akapitu przez czyjas dluga notatke. */
.oferta-powod {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: .15rem; max-width: 22rem;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.4;
  overflow-wrap: anywhere;
}
.oferta-powod-brak { font-style: italic; }

/* ============================================================
   KARTA KLIENTA: DWIE ZAKLADKI
   ------------------------------------------------------------
   „Druga zakladka w karcie klienta: O projekcie" (27.07.2026).
   Zakladki sa LINKAMI, nie przelacznikami w skrypcie: adres da sie
   wyslac („popatrz na projekt tego klienta"), a po dopisaniu adresu
   inwestycji strona wraca dokladnie tam, gdzie sie bylo.
   ============================================================ */
.karta-zakladki {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.karta-zakladka {
  display: flex; align-items: center; gap: .6rem; min-width: 0;
  /* DLUZSZE i w JEDNEJ LINII (prosba 30.08.2026). Wiecej powietrza po bokach
     plus `white-space: nowrap`, zeby napis nigdy nie lamal sie na dwa wiersze. */
  padding: .65rem 1.5rem; border-radius: 12px; text-decoration: none;
  white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border);
  border-bottom: 3px solid var(--border);
  font-size: var(--fs-md); font-weight: 700; color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.karta-zakladka:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
/* Wybrana zakladka ma sie roznic KSZTALTEM, nie samym odcieniem - pasek
   u dolu widac takze wtedy, gdy ekran jest przyblakly albo ustawiony bokiem
   do slonca. */
.karta-zakladka.jest-wybrana {
  border-bottom-color: var(--brand); color: var(--tekst-mocny);
  background: var(--surface-2);
}
.karta-zakladka-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.karta-zakladka.jest-wybrana .karta-zakladka-ico {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  color: var(--brand);
}
.karta-zakladka-ico svg { width: 15px; height: 15px; }
/* Tytul zakladki („Klient") i podpis („dane, rozliczenia, historia") stoja
   OBOK SIEBIE, w jednej linii (prosba 30.08.2026). Wczesniej byly jeden nad
   drugim - przycisk rosl w gore zamiast w bok i czytal sie jak dwa napisy,
   a nie jak jedna zakladka z dopowiedzeniem. Kropka miedzy nimi rysuje sie
   sama, wiec w szablonie nie ma znaku, ktory istnieje tylko dla ozdoby. */
.karta-zakladka-tekst {
  display: flex; flex-direction: row; align-items: baseline; gap: .45rem; min-width: 0;
}
.karta-zakladka-tytul { line-height: 1.2; }
.karta-zakladka-pod {
  font-size: var(--fs-sm); font-weight: 500; color: var(--muted); white-space: nowrap;
}
.karta-zakladka-pod::before { content: "·"; margin-right: .45rem; opacity: .55; }

/* --- Uklad zakladki „O projekcie" ---------------------------------------- */
.projekt-uklad { display: grid; gap: 1.2rem; }

/* Dwa adresy obok siebie, bo to wlasnie ich mylenie konczy sie ekipa pod
   zlym domem. Adres inwestycji jest wyrozniony - to on jest odpowiedzia
   na pytanie „gdzie jedziemy". */
.projekt-adres-para {
  display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem;
}
.projekt-adres {
  padding: .8rem .95rem; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.projekt-adres-mocny {
  border-left: 3px solid var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, var(--surface-2));
}
.projekt-adres-label {
  display: block; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.projekt-adres-mocny .projekt-adres-label { color: var(--brand); }
/* TRESC POGRUBIONA we wszystkich trzech kaflach - adresie inwestycji,
   korespondencyjnym i kontakcie (prosba 30.08.2026). Wczesniej pogrubiony byl
   sam naglowek, a tresc szla zwykla waga; to sa jednak trzy rzeczy, po ktore
   ekipa siega w biegu - numer, pod ktory ma zadzwonic, i adres, pod ktory ma
   dojechac - wiec to ONE maja rzucac sie w oczy, a nie ich podpisy. */
.projekt-adres-tresc {
  margin: .25rem 0 .3rem; font-size: var(--fs-md); font-weight: 700;
  line-height: 1.4; color: var(--text); overflow-wrap: anywhere;
}
.projekt-adres-mocny .projekt-adres-tresc {
  font-size: var(--fs-lg); font-weight: 700; color: var(--tekst-mocny);
}
.projekt-adres-brak { color: var(--muted); font-weight: 600; font-style: italic; }

/* Koncept projektu w kafelce inwestycji - to czyta ekipa jadaca na budowe. */
.inw-poz-koncept {
  display: block; margin-top: .35rem; padding: .5rem .65rem; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-base); line-height: 1.55; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.inw-poz-koncept-label {
  display: block; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand);
  margin-bottom: .15rem;
}
.inw-koncept-edycja { margin-top: .45rem; }
.inw-koncept-edycja > summary {
  cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  width: max-content;
}
.inw-koncept-edycja > summary:hover { color: var(--brand); }
.inw-koncept-edycja label {
  display: block; margin: .5rem 0 .25rem;
  font-size: var(--fs-base); font-weight: 600; color: var(--text);
}
.inw-koncept-edycja textarea {
  width: 100%; max-width: 42rem; padding: .5rem .65rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-base); resize: vertical;
}

@media (max-width: 760px) {
  .projekt-adres-para { grid-template-columns: 1fr; }
  .karta-zakladka-pod { display: none; }
}

/* --- Zakladka projektu: alarm gwarancyjny i tabela urzadzen --------------- */
/* Termin gwarancji to jedyna rzecz na tym ekranie, ktora sama z siebie
   kosztuje pieniadze: po jej przekroczeniu naprawe placi Waterm zamiast
   producenta, a nikt sie nie dowiaduje, dopoki klient nie zadzwoni. */
.projekt-alarm {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .85rem 1rem; border-radius: 14px;
  background: var(--warn-bg); border: 1px solid var(--warn-bd);
  border-left: 4px solid var(--warn-tx);
}
.projekt-alarm-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--warn-bd); color: var(--warn-tx);
}
.projekt-alarm-ico svg { width: 17px; height: 17px; }
.projekt-alarm > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.projekt-alarm b { font-size: var(--fs-md); color: var(--warn-tx); }
.projekt-alarm span { font-size: var(--fs-base); color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.projekt-wiersz-uwaga td { background: color-mix(in srgb, var(--warn-bg) 70%, transparent); }
.projekt-gw-data { display: block; margin-top: .15rem; font-size: var(--fs-sm); color: var(--muted); }
/* Trzy kafelki adresowe zamiast dwoch - adres roboty, adres do faktury
   i telefon, bo ekipa potrzebuje ich naraz. */
.projekt-adres-para { grid-template-columns: repeat(3, 1fr); }
.projekt-adres a { color: var(--brand); font-weight: 700; }
@media (max-width: 1000px) { .projekt-adres-para { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .projekt-adres-para { grid-template-columns: 1fr; } }
/* Naglowek kolumny gwarancji lamal sie na „GWARANCJ / A" - kolumna dopasowuje
   sie do plakietek, ktore sa wezsze niz samo slowo. */
.projekt-th-gw { white-space: nowrap; min-width: 11rem; }
/* Naglowki tej tabeli nie moga sie lamac („ZAK / UP", „GWARANCJ / A") -
   kolumny dopasowuja sie do wezszej tresci niz same slowa. */
#urzadzenia-projektu th { white-space: nowrap; }

/* --- Wytyczne wykonawcze i wykonane czynnosci przy inwestycji ------------- */
/* Dwie rzeczy o roznym autorze: wytyczne pisze kierownictwo („jak to zrobic"),
   czynnosci pracownicy („co zrobiono"). Roznia sie kolorem krawedzi, zeby na
   pierwszy rzut oka bylo widac, ktore jest ktore - a nie dopiero po nazwisku. */
.proj-blok {
  margin-top: .5rem; padding: .55rem .7rem; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
}
.proj-blok-wytyczne { border-left-color: var(--brand); }
.proj-blok-czynnosci { border-left-color: var(--ai); }
.proj-blok-harmonogram { border-left-color: var(--info-tx); }
.proj-blok-glowa {
  display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; margin-bottom: .3rem;
}
.proj-blok-tytul {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
}
.proj-blok-wytyczne .proj-blok-tytul { color: var(--brand); }
.proj-blok-czynnosci .proj-blok-tytul { color: var(--ai-tx); }
.proj-blok-harmonogram .proj-blok-tytul { color: var(--info-tx); }
.proj-blok-kto { font-size: var(--fs-micro); color: var(--muted); }
.proj-wpisy { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.proj-wpis {
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: .4rem;
  padding: .35rem .5rem; border-radius: 7px; background: var(--surface-2);
}
.proj-wpis-tresc {
  grid-column: 1; margin: 0; font-size: var(--fs-base); line-height: 1.5;
  color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap;
}
.proj-wpis-meta { grid-column: 1; font-size: var(--fs-micro); color: var(--muted); }
.proj-wpis-usun { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.proj-wpis-x {
  border: 0; background: none; cursor: pointer; padding: 0 .2rem;
  font-size: var(--fs-md); line-height: 1; color: var(--muted);
}
.proj-wpis-x:hover { color: var(--danger-tx); }
.proj-pusto { margin: 0; font-size: var(--fs-sm); color: var(--muted); font-style: italic; }
.proj-dopisz { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .4rem; }
.proj-dopisz input[type=text] { flex: 1 1 16rem; min-width: 0; }
.proj-dopisz input {
  padding: .35rem .55rem; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-base);
}
.proj-dopisz input[type=date] { flex: 0 0 auto; }
/* Godziny stoja OBOK tresci, nie w osobnym formularzu: „pracownik zglasza
   wykonane czynnosci razem z godzinami pracy". Waskie pole, bo to najwyzej
   cztery znaki, a szerokie sugerowaloby zdanie. */
.proj-dopisz .proj-dopisz-godziny { flex: 0 0 5rem; text-align: right; }
/* Suma godzin zgloszonych przy tej jednej inwestycji - w naglowku bloku,
   zeby dalo sie ja odczytac bez sumowania wpisow wzrokiem. */
.proj-blok-godz {
  font-size: var(--fs-micro); font-weight: 700;
  padding: .05rem .4rem; border-radius: 999px;
  background: var(--ai-bg); color: var(--ai-tx); border: 1px solid var(--ai-bd);
}
.proj-wpis-godz { color: var(--ai-tx); }
/* Poprawka samej liczby przy zapisanym wpisie - schowana, bo to rzadka akcja. */
.proj-wpis-godz-edycja { grid-column: 1; font-size: var(--fs-micro); }
.proj-wpis-godz-edycja > summary {
  cursor: pointer; color: var(--muted); width: fit-content; padding: .1rem 0;
}
.proj-wpis-godz-edycja > summary:hover { color: var(--text); }
.proj-wpis-godz-edycja form {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .25rem;
}
.proj-wpis-godz-edycja input {
  width: 5rem; text-align: right; padding: .25rem .45rem; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-sm);
}
.proj-wpis-godz-edycja .field-hint { margin: 0; flex: 1 1 12rem; }
/* Mikrofon przy polu wpisu. Przycisk dokleja JavaScript i tylko tam, gdzie
   przegladarka zna rozpoznawanie mowy - w CSS opisujemy wiec cos, czego na
   czesci urzadzen w ogole nie bedzie. Kropka pulsuje w trakcie sluchania:
   bez tego nie wiadomo, czy telefon nagrywa, czy juz skonczyl. */
.dyktuj-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font-size: var(--fs-sm); line-height: 1;
}
.dyktuj-btn svg { width: 1.05rem; height: 1.05rem; }
.dyktuj-btn:hover { color: var(--text); border-color: var(--muted); }
.dyktuj-btn.dyktuj-slucha {
  color: var(--danger-tx); border-color: var(--danger-tx); animation: dyktujPuls 1.2s infinite;
}
@keyframes dyktujPuls { 50% { opacity: .35; } }
[data-animacje="nie"] .dyktuj-btn.dyktuj-slucha { animation: none; }
/* Jedno zdanie, gdy mikrofon nie moze ruszyc (brak zgody, brak mikrofonu).
   Lamie wiersz w calym pasku pol, zeby nie scisnac pola tresci. */
.dyktuj-info {
  flex: 1 0 100%; font-size: var(--fs-micro); color: var(--danger-tx); margin-top: .2rem;
}

/* --- Godziny na budowie --------------------------------------------------- */
/* „Ile godzin zespol spedzil" to pytanie glowne, „ile to kosztowalo" - dalsze.
   Stad jedna duza liczba i dwie mniejsze obok, a nie trzy rowne kafelki. */
.godz-podsumowanie {
  display: flex; align-items: flex-end; gap: 1.6rem; flex-wrap: wrap;
  margin: .8rem 0 1rem; padding-bottom: .9rem;
  border-bottom: 1px dashed var(--border);
}
.godz-glowna { display: flex; flex-direction: column; }
.godz-liczba {
  font-size: var(--fs-hero); font-weight: 800; line-height: 1;
  color: var(--tekst-mocny); font-variant-numeric: tabular-nums;
}
.godz-podpis { font-size: var(--fs-sm); color: var(--muted); margin-top: .2rem; }
/* Brak godzin nie jest liczba, wiec nie udaje liczby - mniejszy, szary napis
   zamiast wielkiego „0 h", ktore czytaloby sie jak „nikt tam nie pracowal". */
.godz-liczba-brak {
  font-size: var(--fs-lg); font-weight: 700; line-height: 1.1; color: var(--muted);
}
/* `align-self: flex-start` NADPISUJE `align-items: flex-end` rodzica - ten
   sam efekt byl potrzebny tylko miedzy .godz-glowna (duza liczba) a rzedem
   mniejszych statystyk. W SAMYM rzedzie robil szkode: "Robocizna"/"Koszt
   razem" maja trzecia linijke (stawka/skladniki), "Materialy" nie - przy
   wspolnym flex-end etykiety i kwoty nie stawaly na tej samej wysokosci
   miedzy kolumnami, mimo ze kazda kolumna sama w sobie wygladala poprawnie. */
.godz-obok { display: flex; flex-direction: column; min-width: 7rem; align-self: flex-start; }
.godz-obok-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.godz-obok-wartosc {
  font-size: var(--fs-lg); font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Rozne stawki na roznych realizacjach to fakt z danych, nie usterka -
   ale ma byc widac, ze jedna liczba nie opisuje calosci. */
.godz-obok-nota { font-size: var(--fs-micro); color: var(--warn-tx); margin-top: .15rem; }
/* Nota, ktora tylko dopowiada (jedna stawka, z czego sklada sie koszt) - nie
   ma udawac ostrzezenia, wiec idzie szarym. Ostrzega tylko rozjazd stawek. */
.godz-obok-nota-cicha { color: var(--muted); }
@media (max-width: 640px) { .godz-podsumowanie { gap: 1rem; } }
/* Godziny zgloszone przez pracownikow. Stoja pod arkuszem i wygladaja inaczej
   niz on, bo to inne zrodlo: niezatwierdzone i nie dodane do sumy z arkusza. */
.godz-zgloszone {
  display: flex; gap: .55rem; align-items: flex-start; margin-top: .9rem;
  padding: .55rem .7rem; border-radius: 9px;
  background: var(--ai-bg); border: 1px solid var(--ai-bd);
  font-size: var(--fs-sm); color: var(--text);
}
.godz-zgloszone-ico { flex: 0 0 auto; color: var(--ai-tx); line-height: 0; margin-top: .1rem; }
.godz-zgloszone-ico svg { width: 1.05rem; height: 1.05rem; }
.godz-zgloszone b { color: var(--ai-tx); }
.godz-zgloszone-nota { display: block; margin-top: .15rem; font-size: var(--fs-micro); color: var(--muted); }
/* Realizacja dopieta po numerze zamowienia, bo import nie mial powiazania.
   Widac to na ekranie, zeby nikt nie musial zgadywac, skad sie tam wziela. */
.godz-po-numerze {
  display: inline-block; margin-left: .35rem; white-space: nowrap;
  font-size: var(--fs-micro); font-weight: 700;
  padding: .05rem .4rem; border-radius: 999px;
  background: var(--stal-bg); color: var(--stal-tx); border: 1px solid var(--stal-bd);
}

/* --- Godziny do akceptacji ------------------------------------------------ */
/* „Kazda zmiana w godzinach pracy idzie do akceptacji Artura". Stan zgloszenia
   musi byc widac przy wpisie, a nie tylko w kolejce: pracownik ma wiedziec, czy
   jego godziny sa policzone, a kierownictwo - ze ktos na decyzje czeka.
   Kolory z tego samego zestawu, co statusy ofert: oczekiwanie na zolto
   (trzeba czegos od czlowieka), odmowa na czerwono. */
.proj-blok-czeka {
  font-size: var(--fs-micro); font-weight: 700;
  padding: .05rem .4rem; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-bd);
}
.godz-stan {
  grid-column: 1; display: flex; flex-direction: column; gap: .15rem;
  margin-top: .3rem; padding: .35rem .5rem; border-radius: 7px;
  font-size: var(--fs-sm);
}
.godz-stan-czeka {
  background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-bd);
}
.godz-stan-odrzucone {
  background: var(--danger-bg); color: var(--danger-tx); border: 1px solid var(--danger-bd);
}
.godz-stan-glowa { overflow-wrap: anywhere; }
/* „Bylo 7,5 h" to kontekst decyzji, nie druga liczba do przeczytania. */
.godz-stan-bylo { font-weight: 400; opacity: .8; }
.godz-stan-meta { font-size: var(--fs-micro); opacity: .85; }
.godz-stan-brak {
  grid-column: 1; font-size: var(--fs-micro); color: var(--muted); font-style: italic;
}
.godz-stan-akcje { display: flex; align-items: flex-start; gap: .4rem; flex-wrap: wrap; margin-top: .25rem; }
.godz-stan-akcje form { margin: 0; }
/* Odmowa jest schowana pod jednym kliknieciem, bo to rzadszy przypadek -
   ale pole na powod otwiera sie razem z nia, nie po zapisie: bez powodu
   serwer i tak nie przyjmie odmowy. */
.godz-stan-odmowa { font-size: var(--fs-micro); }
.godz-stan-odmowa > summary { cursor: pointer; padding: .3rem 0; width: fit-content; }
.godz-stan-odmowa form {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: .25rem 0 0;
}
.godz-stan-odmowa input[type=text] {
  flex: 1 1 14rem; min-width: 0; padding: .25rem .45rem; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-sm);
}
.proj-dopisz-nota { margin: .3rem 0 0; }

/* --- Harmonogram budowy -------------------------------------------------- */
/* „Poczatek, etapy, final" - jedna lista czytana z gory na dol, bo tak idzie
   budowa. Data stoi PIERWSZA i wyrownana do lewej: pytanie brzmi „co i kiedy",
   a przy skanowaniu wzrokiem szuka sie terminu, nie nazwy etapu.
   Kolorem swieci wylacznie to, co wymaga ruchu - termin, ktory minal,
   a punktu nikt nie odhaczyl. Reszta jest spokojna, zeby ten jeden wiersz
   dalo sie znalezc bez czytania calosci. */
.harm-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.harm-poz {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline; gap: .15rem .55rem;
  padding: .3rem .5rem; border-radius: 7px; background: var(--surface-2);
}
.harm-data { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.harm-bez-daty { font-weight: 400; font-style: italic; color: var(--muted); }
.harm-nazwa { font-size: var(--fs-base); color: var(--text); overflow-wrap: anywhere; }
/* Poczatek i final to nie etapy - maja swoja range napisana wprost, bo bez
   niej „Wejscie na budowe" byloby na liscie jednym z wielu punktow. */
.harm-ranga {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--info-tx);
}
.harm-stan { font-size: var(--fs-micro); color: var(--muted); white-space: nowrap; }
.harm-meta { grid-column: 2 / -1; font-size: var(--fs-micro); color: var(--muted); }
.harm-akcje { display: flex; align-items: center; gap: .3rem; }
.harm-akcje form { margin: 0; }
.harm-stan-zrobione { opacity: .8; }
.harm-stan-zrobione .harm-stan { color: var(--ok-tx); }
.harm-stan-po-terminie {
  background: var(--warn-bg); border: 1px solid var(--warn-bd); padding: .25rem .45rem;
}
.harm-stan-po-terminie .harm-stan { color: var(--warn-tx); font-weight: 700; }
.harm-stan-po-terminie .harm-data { color: var(--warn-tx); }
.harm-stan-dzis .harm-stan { color: var(--info-tx); font-weight: 700; }
/* Ile punktow juz za nami - w naglowku, zeby nie liczyc ich wzrokiem. */
.proj-blok-postep {
  font-size: var(--fs-micro); font-weight: 700;
  padding: .05rem .4rem; border-radius: 999px;
  background: var(--info-bg); color: var(--info-tx); border: 1px solid var(--info-bd);
}
.harm-dopisz select {
  padding: .35rem .55rem; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-base);
}
.harm-dopisz .field-hint { flex: 1 1 100%; margin: .1rem 0 0; }
/* Przesuwanie terminu jest schowane pod kliknieciem: robi sie je rzadziej niz
   odhacza punkty, a rozwiniete pole daty przy kazdym wierszu zamienialoby
   harmonogram w formularz. */
.harm-przesun { grid-column: 1 / -1; font-size: var(--fs-micro); }
.harm-przesun > summary {
  cursor: pointer; color: var(--muted); width: fit-content; padding: .1rem 0;
}
.harm-przesun > summary:hover { color: var(--text); }
.harm-przesun form {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .25rem;
}
.harm-przesun input {
  padding: .25rem .45rem; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm);
}
.harm-przesun input[type=text] { flex: 1 1 12rem; min-width: 0; }
.harm-przesun .field-hint { flex: 1 1 100%; margin: 0; }
@media (max-width: 640px) {
  /* Na telefonie data zostaje na gorze wiersza, a nazwa etapu bierze cala
     szerokosc - inaczej dluzsza nazwa lamie sie na cztery litery w kolumnie. */
  .harm-poz { grid-template-columns: minmax(0, 1fr) auto; }
  .harm-data { grid-column: 1 / -1; }
  .harm-meta { grid-column: 1 / -1; }
}

/* --- Ekran zbiorczy: terminy wszystkich budow ---------------------------- */
/* Wiersz mowi trzy rzeczy w stalej kolejnosci: KIEDY, CO, GDZIE. Klient
   i inwestycja sa tu rownie wazne co nazwa etapu - „montaz jednostki" bez
   budowy nie mowi, dokad jechac. */
.harm-wiersze { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.harm-wiersz {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start; gap: .2rem .7rem;
  padding: .45rem .6rem; border-radius: 8px; background: var(--surface-2);
}
.harm-wiersz-data { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.harm-wiersz-tresc { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.harm-wiersz-co { font-size: var(--fs-base); color: var(--text); overflow-wrap: anywhere; }
.harm-wiersz-gdzie { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.harm-wiersz-gdzie a { color: var(--brand); text-decoration: none; }
.harm-wiersz-gdzie a:hover { text-decoration: underline; }
.harm-wiersz-meta { font-size: var(--fs-micro); color: var(--muted); }
.harm-wiersz-akcje { display: flex; align-items: center; gap: .35rem; }
.harm-wiersz-akcje form { margin: 0; }
.harm-wiersz.harm-stan-po-terminie {
  background: var(--warn-bg); border: 1px solid var(--warn-bd);
}
.harm-wiersz.harm-stan-po-terminie .harm-wiersz-data,
.harm-wiersz.harm-stan-po-terminie .harm-wiersz-meta b { color: var(--warn-tx); }
.harm-wiersz.harm-stan-dzis .harm-wiersz-data,
.harm-wiersz.harm-stan-dzis .harm-wiersz-meta b { color: var(--info-tx); }
.harm-wiersz.harm-stan-zrobione { opacity: .85; }
.harm-wiersz.harm-stan-zrobione .harm-wiersz-data { color: var(--muted); font-weight: 400; }
/* Sekcja „po terminie" ma swietlic sie cala, nie tylko wierszami: to jedyna
   rzecz na tym ekranie, ktora znaczy „ktos ma to wziac dzis". */
.harm-sekcja-pilne { border-left: 3px solid var(--warn-bd); }
.harm-sekcja-dzis { border-left: 3px solid var(--info-bd); }
.harm-zrobione > summary {
  cursor: pointer; display: flex; align-items: center; gap: .5rem;
  list-style: none;
}
.harm-zrobione > summary::-webkit-details-marker { display: none; }
.harm-zrobione[open] > summary { margin-bottom: .5rem; }
@media (max-width: 640px) {
  .harm-wiersz { grid-template-columns: minmax(0, 1fr) auto; }
  .harm-wiersz-data { grid-column: 1 / -1; }
}
/* Zdanie o tym, co czeka na akceptacje - w panelu godzin na karcie klienta.
   Stoi OSOBNO od sumy przyjetej, bo nie wchodzi do niej. */
.godz-zgloszone-czeka {
  display: block; margin-top: .2rem; font-size: var(--fs-sm); color: var(--warn-tx);
}
.godz-zgloszone-czeka b { color: inherit; }

/* Kolejka na osobnym ekranie: jeden wiersz = jedna zmiana. Liczba idzie na
   lewo w stalej kolumnie, zeby dalo sie przejsc kolejke wzrokiem po liczbach,
   a nie po zdaniach. */
.godz-kolejka { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; }
.godz-kolejka-poz {
  display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .7rem; align-items: start;
  padding: .6rem .7rem; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.godz-kolejka-liczby { display: flex; flex-direction: column; }
.godz-kolejka-po {
  font-size: var(--fs-lg); font-weight: 800; line-height: 1.1; color: var(--warn-tx);
  font-variant-numeric: tabular-nums;
}
.godz-kolejka-przed { font-size: var(--fs-micro); color: var(--muted); }
.godz-kolejka-tresc { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.godz-kolejka-co {
  margin: 0; font-size: var(--fs-base); line-height: 1.45; color: var(--text);
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.godz-kolejka-gdzie { font-size: var(--fs-sm); color: var(--muted); }
.godz-kolejka-meta { font-size: var(--fs-micro); color: var(--muted); }
.godz-kolejka-akcje { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }
.godz-kolejka-akcje form { margin: 0; }
@media (max-width: 720px) {
  /* Na telefonie liczba i decyzja ida pod tresc - trzy kolumny scisnely by
     tresc wpisu do dwoch slow na wiersz. */
  .godz-kolejka-poz { grid-template-columns: 1fr; }
  .godz-kolejka-liczby { flex-direction: row; align-items: baseline; gap: .45rem; }
}

/* Historia decyzji - do sprawdzenia, kto i kiedy przyjal godziny. Czytana
   rzadziej niz kolejka, wiec mniejsza i bez przyciskow. */
.godz-historia { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .35rem; }
.godz-historia-poz {
  display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start;
  padding: .35rem .5rem; border-radius: 7px; background: var(--surface-2);
}
.godz-historia-stan {
  display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap;
  font-size: var(--fs-micro); font-weight: 700;
  padding: .1rem .4rem; border-radius: 999px;
}
.godz-historia-stan svg { width: .85rem; height: .85rem; }
.godz-historia-przyjeta {
  background: var(--ok-bg); color: var(--ok-tx); border: 1px solid var(--ok-bd);
}
.godz-historia-odrzucona {
  background: var(--danger-bg); color: var(--danger-tx); border: 1px solid var(--danger-bd);
}
.godz-historia-liczby { font-weight: 700; font-size: var(--fs-sm); color: var(--text); }
.godz-historia-meta { display: block; font-size: var(--fs-micro); color: var(--muted); }
.godz-historia-powod {
  display: block; margin-top: .1rem; font-size: var(--fs-micro); color: var(--danger-tx);
  overflow-wrap: anywhere;
}

/* --- Zamowienie i oferta, z ktorej wyszlo -------------------------------- */
/* „Zamowienie ma byc powiazane z konkretna wybrana oferta" (27.07.2026).
   Numer oferty stoi POD numerem zamowienia, w jednej kolumnie: to dopowiedzenie
   do tego numeru, a osobna kolumna „Oferta" stalaby pusta przy wiekszosci
   wierszy (powiazanie ma dzis co czwarte zamowienie). */
.dok-zrodlo {
  display: block; margin-top: .15rem;
  font-size: var(--fs-micro); color: var(--muted); line-height: 1.4;
}
.dok-zrodlo b { color: var(--text); font-weight: 600; }
/* Zdanie nad tabela: ile zamowien wskazuje oferte. Liczby sa z calej kartoteki,
   nie z pokazanych pietnastu wierszy - stad osobna nota, a nie stopka tabeli. */
.dok-powiazania-nota { margin-top: .35rem; }
.dok-powiazania-nota b { color: var(--text); }
/* Symbol dokumentu, ktory realizuje oferte, a nie jest zamowieniem (faktura,
   pro forma). Widac wtedy, ze to nie zamowienie - bez przekrecania nazwy. */
.dok-symbol {
  font-size: var(--fs-micro); font-weight: 700; white-space: nowrap;
  padding: .05rem .35rem; border-radius: 999px;
  background: var(--stal-bg); color: var(--stal-tx); border: 1px solid var(--stal-bd);
}

/* --- Produkcja: narzedzie mistrza ---------------------------------------- */
/* Ekran ma dwie polowy: to, co system sam wylapal z danych, i wlasne kartki
   mistrza. Bloki „co stoi" wygladaja jak bloki przy inwestycji (ta sama
   glowa .proj-blok-glowa), bo to ta sama rzecz widziana z drugiej strony -
   tam jedna budowa, tu wszystkie naraz. */
.prod-blok {
  margin-top: .6rem; padding: .55rem .7rem; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
}
.prod-blok-terminy { border-left-color: var(--warn-bd); }
.prod-blok-cisza { border-left-color: var(--ai); }
.prod-blok-karty { border-left-color: var(--brand); }
.prod-blok-godziny { border-left-color: var(--info-tx); }
.prod-blok .field-hint { margin: .35rem 0 0; }
.prod-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.prod-poz {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline; gap: .2rem .6rem;
  padding: .35rem .5rem; border-radius: 7px; background: var(--surface-2);
}
.prod-poz-data { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.prod-poz-tresc { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.prod-poz-co { font-size: var(--fs-base); color: var(--text); overflow-wrap: anywhere; }
.prod-poz-co a, .prod-poz-gdzie a { color: var(--brand); text-decoration: none; }
.prod-poz-co a:hover, .prod-poz-gdzie a:hover { text-decoration: underline; }
.prod-poz-gdzie { font-size: var(--fs-micro); color: var(--muted); overflow-wrap: anywhere; }
.prod-poz-stan { font-size: var(--fs-micro); color: var(--muted); white-space: nowrap; }
.prod-poz.prod-stan-po-terminie { background: var(--warn-bg); border: 1px solid var(--warn-bd); }
.prod-poz.prod-stan-po-terminie .prod-poz-stan b,
.prod-poz.prod-stan-po-terminie .prod-poz-data { color: var(--warn-tx); }
.prod-poz.prod-stan-dzis .prod-poz-stan b { color: var(--info-tx); }

/* Przypomnienia: zdanie napisane reka, wiec tresc ma byc najwieksza rzecza
   w wierszu - data i „dla kogo" schodza do drugiej linii. */
.prod-przyp { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.prod-przyp-poz {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .6rem;
  align-items: start; padding: .45rem .6rem; border-radius: 8px;
  background: var(--surface-2);
}
.prod-przyp-co {
  margin: 0; font-size: var(--fs-base); color: var(--text);
  line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap;
}
.prod-przyp-meta { font-size: var(--fs-micro); color: var(--muted); }
.prod-przyp-akcje { display: flex; align-items: center; gap: .35rem; }
.prod-przyp-akcje form { margin: 0; }
.prod-przyp-poz.prod-stan-po-terminie {
  background: var(--warn-bg); border: 1px solid var(--warn-bd);
}
.prod-przyp-poz.prod-stan-po-terminie .prod-przyp-meta b { color: var(--warn-tx); }
.prod-przyp-poz.prod-stan-dzis .prod-przyp-meta b { color: var(--info-tx); }
.prod-przyp-poz.prod-stan-zrobione { opacity: .8; }
.prod-dodaj { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: 0; }
.prod-dodaj input[type=text] { flex: 1 1 22rem; min-width: 0; }
.prod-dodaj input, .prod-dodaj select {
  padding: .35rem .55rem; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-base);
}
.prod-dodaj .field-hint { flex: 1 1 100%; margin: 0; }

/* Odhaczenie przypomnienia wprost z pulpitu. Pozycja „na dzis" jest linkiem,
   wiec formularz stoi OBOK niego, nie w srodku - przycisk w linku nie jest
   poprawnym HTML-em i klika sie sam razem z pozycja. */
.na-dzis-li-akcja { display: flex; align-items: stretch; gap: .4rem; }
.na-dzis-li-akcja .na-dzis-poz { flex: 1 1 auto; min-width: 0; }
.na-dzis-odhacz { display: flex; align-items: center; margin: 0; }
@media (max-width: 640px) {
  .prod-poz { grid-template-columns: minmax(0, 1fr) auto; }
  .prod-poz-data { grid-column: 1 / -1; }
}

/* =========================================================================
   TABLICA ZADAN - ekran startowy
   Decyzja z 27.07.2026: „Pulpit zmieniamy na Tablice zadan". Uklad jest
   z tablicy w hali: kolumny, a w nich kartki. Kolumna mowi KIEDY, kartka
   CO i GDZIE. Kolor niesie wylacznie pilnosc - czerwien tylko dla rzeczy
   po terminie, bo gdy swieci wszystko, nie swieci nic.
   ========================================================================= */

/* Trzy liczby w kafelku powitalnym - skroty do kolumn. Zastapily cztery
   kafle raportowe, w ktorych od poczatku staly myslniki. */
.tablica-liczby {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem;
  position: relative; z-index: 1;
}
.tablica-liczba {
  display: flex; flex-direction: column; gap: .1rem; min-width: 7.5rem;
  padding: .5rem .85rem; border-radius: 12px; text-decoration: none;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; transition: background .15s ease, transform .15s ease;
}
.tablica-liczba:hover { background: rgba(255, 255, 255, .18); transform: translateY(-1px); }
.tablica-liczba-val { font-size: var(--fs-xl); font-weight: 800; line-height: 1.1; }
.tablica-liczba-lab {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em;
  opacity: .85;
}
/* Zero po terminie to dobra wiadomosc i ma tak wygladac - czerwien zapala sie
   dopiero przy realnej zaleglosci. */
.tablica-liczba-pilne .tablica-liczba-val { color: #ffd9d0; }
.tablica-liczba-dzis .tablica-liczba-val { color: var(--brand-light); }

/* --- siatka kolumn --- */
.tablica {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.tab-kolumna {
  display: flex; flex-direction: column; gap: .45rem;
  padding: .6rem .6rem .7rem; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow);
  /* Pasek na gorze zamiast koloru calej kolumny: tlo kolumny zostaje
     spokojne, a pilnosc widac z drugiego konca pokoju. */
  border-top: 3px solid var(--border);
}
.tab-kolumna-po-terminie { border-top-color: var(--danger-tx); }
.tab-kolumna-dzis { border-top-color: var(--brand); }
.tab-kolumna-wkrotce { border-top-color: var(--info-tx); }
.tab-kolumna-kiedys { border-top-color: var(--border); }
.tab-kolumna-glowa {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  padding: .1rem .15rem .25rem;
}
.tab-kolumna-tytul {
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.tab-kolumna-po-terminie .tab-kolumna-tytul { color: var(--danger-tx); }
.tab-kolumna-dzis .tab-kolumna-tytul { color: var(--brand); }
.tab-kolumna-wkrotce .tab-kolumna-tytul { color: var(--info-tx); }
.tab-kolumna-licznik {
  font-size: var(--fs-micro); font-weight: 800; min-width: 1.35rem;
  padding: .05rem .35rem; border-radius: 999px; text-align: center;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.tab-kolumna-po-terminie .tab-kolumna-licznik {
  background: var(--danger-bg); color: var(--danger-tx); border-color: var(--danger-bd);
}
.tab-kolumna-dzis .tab-kolumna-licznik {
  background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-bd);
}
.tab-kolumna-wkrotce .tab-kolumna-licznik {
  background: var(--info-bg); color: var(--info-tx); border-color: var(--info-bd);
}
/* Pusta kolumna mowi zdanie, a nie znika: brak sekcji czyta sie jak awaria. */
.tab-kolumna-pusto {
  margin: 0; padding: .5rem .3rem; font-size: var(--fs-sm);
  color: var(--muted); font-style: italic;
}
.tab-kolumna-wiecej {
  margin: .1rem 0 0; padding: 0 .2rem; font-size: var(--fs-micro); color: var(--muted);
}

/* --- kartka --- */
.tab-karty { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.tab-karta-li { display: flex; flex-direction: column; gap: .3rem; }
.tab-karta {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem;
  padding: .55rem .6rem; border-radius: 11px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.tab-karta:hover {
  transform: translateY(-2px); border-color: var(--brand);
  box-shadow: 0 8px 18px rgba(2, 8, 23, .10);
}
.tab-karta-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.8rem; height: 1.8rem; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.tab-karta-ico svg { width: 1rem; height: 1rem; }
.tab-karta-tresc { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.tab-karta-co {
  font-size: var(--fs-base); font-weight: 600; color: var(--text);
  line-height: 1.35; overflow-wrap: anywhere;
}
.tab-karta-opis {
  font-size: var(--fs-micro); color: var(--muted); line-height: 1.45;
  overflow-wrap: anywhere;
}
.tab-karta-stopka {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .1rem;
}
/* Skad ta rzecz pochodzi - male, na koncu kartki. Modul jest tu kontekstem,
   a nie tytulem: na tablicy liczy sie robota, nie zakladka. */
.tab-karta-gdzie {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  padding: .05rem .35rem; border-radius: 999px;
  background: var(--surface); color: var(--muted); border: 1px solid var(--border);
}
.tab-karta-data { font-size: var(--fs-micro); font-weight: 700; color: var(--muted); }
/* Kolumna po terminie: kartka ma czerwona krawedz i ikone, ale tlo zostaje
   jasne - czerwone plamy w czterech kolumnach zamienialy tablice w alarm. */
.tab-kolumna-po-terminie .tab-karta { border-color: var(--danger-bd); }
.tab-kolumna-po-terminie .tab-karta-ico {
  background: var(--danger-bg); color: var(--danger-tx); border-color: var(--danger-bd);
}
.tab-kolumna-po-terminie .tab-karta-data { color: var(--danger-tx); }
.tab-kolumna-dzis .tab-karta-ico {
  background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-bd);
}
.tab-kolumna-wkrotce .tab-karta-ico {
  background: var(--info-bg); color: var(--info-tx); border-color: var(--info-bd);
}
/* Przycisk stoi POD kartka, nie w niej: kartka jest linkiem, a przycisk
   w linku nie jest poprawnym HTML-em i klikalby sie razem z nia. */
.tab-karta-odhacz { display: flex; justify-content: flex-end; margin: 0; }
.tablica-zrodla { margin-top: .6rem; }

/* Pusta tablica - jeden panel zamiast czterech pustych kolumn. */
.tablica-pusta { display: flex; align-items: center; gap: .9rem; }
.tablica-pusta-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; flex: 0 0 auto; border-radius: 12px;
  background: var(--ok-bg); color: var(--ok-tx); border: 1px solid var(--ok-bd);
}
.tablica-pusta-ico svg { width: 1.4rem; height: 1.4rem; }
.tablica-pusta p { margin: .2rem 0 0; }

/* Cztery kolumny mieszcza sie na monitorze, dwie na laptopie w polowie
   ekranu, jedna na telefonie. Kolumny NIE zwijaja sie w akordeon: tablica
   ma byc widoczna cala naraz, tak jak ta w hali. */
@media (max-width: 1200px) {
  .tablica { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tablica { grid-template-columns: minmax(0, 1fr); }
  .tablica-liczba { flex: 1 1 6rem; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tab-karta, .tablica-liczba { transition: none; }
  .tab-karta:hover, .tablica-liczba:hover { transform: none; }
}

/* --- Produkcja i Harmonogram: liczby z kartoteki -------------------------- */
/* Cztery liczby mowiace, ile roboty firma ma w toku wedlug Subiekta. Stoja nad
   listami, bo pierwsze pytanie mistrza brzmi „ile tego jest", a dopiero drugie
   „co konkretnie". */
.prod-kafle, .harm-stan-firmy {
  display: grid; gap: .5rem; margin: .1rem 0 .7rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.prod-kafel, .harm-stan-kafel {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .55rem .7rem; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.prod-kafel-val, .harm-stan-val {
  font-size: var(--fs-lg); font-weight: 800; color: var(--tekst-mocny); line-height: 1.15;
}
.prod-kafel-lab, .harm-stan-lab {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.prod-kafel-opis, .harm-stan-opis { font-size: var(--fs-micro); color: var(--muted); }
/* Braki materialowe to jedyna z tych liczb, ktora znaczy „ktos ma cos zrobic". */
.prod-kafel-uwaga {
  background: var(--warn-bg); border-color: var(--warn-bd);
}
.prod-kafel-uwaga .prod-kafel-val, .prod-kafel-uwaga .prod-kafel-lab { color: var(--warn-tx); }
.prod-blok-braki { border-left-color: var(--danger-tx); }
.prod-blok-zlecenia { border-left-color: var(--ai); }
.prod-blok-zamowienia { border-left-color: var(--brand); }
.prod-poz-co a { color: var(--brand); text-decoration: none; }
.prod-poz-co a:hover { text-decoration: underline; }
/* Budowy bez planu - lista zapraszajaca do ulozenia harmonogramu, wiec
   przycisk stoi po prawej w kazdym wierszu. */
.harm-sekcja-plan { border-left: 3px solid var(--brand); }
.harm-wiersz-plan .harm-wiersz-akcje a { text-decoration: none; }

/* Przelacznik „wszystko / tylko moje" nad tablica. Ten sam ksztalt, co filtry
   w reszcie systemu (plakietki, nie zakladki), zeby nie wprowadzac trzeciego
   sposobu przelaczania widoku. */
.tablica-filtr {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin: 0 0 .6rem;
}
.tablica-filtr-opcja {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: 999px; text-decoration: none;
  font-size: var(--fs-sm); font-weight: 600;
  background: var(--surface); color: var(--muted); border: 1px solid var(--border);
  transition: color .15s ease, border-color .15s ease;
}
.tablica-filtr-opcja:hover { color: var(--text); border-color: var(--brand); }
.tablica-filtr-opcja .mono-num {
  font-size: var(--fs-micro); font-weight: 800;
  padding: .02rem .3rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.tablica-filtr-opcja.jest-wybrany {
  background: var(--pigulka); color: #fff; border-color: var(--pigulka-obwodka);
}
.tablica-filtr-opcja.jest-wybrany .mono-num {
  background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff;
}
.tablica-filtr-nota { font-size: var(--fs-sm); color: var(--muted); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .tablica-filtr-opcja { transition: none; } }

/* ============================================================
   LISTA ZADAN na ekranie startowym (zastapila cztery kolumny kart)

   Cztery waskie kolumny obok siebie dawaly kazdej rzeczy jedna czwarta
   szerokosci ekranu - miescil sie tytul uciety w polowie i data, a wszystko,
   co system o sprawie wie (kto za nia odpowiada, skad przyszla, ile juz
   czeka), nie mialo sie gdzie zmiescic. Lista idzie w dol, wiec pozycja ma
   cala szerokosc i moze powiedziec o sobie wszystko.

   Kolor niesie RANGE, nie modul: krytyczne czerwone, wysokie pomaranczowe,
   srednie blekitne, niskie stalowe. Dzieki temu liste skanuje sie wzrokiem
   po lewej krawedzi, bez czytania.
   ============================================================ */

/* Rangi - jeden zestaw zmiennych, uzywany przez pasek, kropke i pigulke terminu. */
.tz-ranga-krytyczna { --tz-kolor: var(--danger-tx); --tz-tlo: var(--danger-bg); --tz-obwodka: var(--danger-bd); }
.tz-ranga-wysoka    { --tz-kolor: var(--warn-tx);   --tz-tlo: var(--warn-bg);   --tz-obwodka: var(--warn-bd); }
.tz-ranga-srednia   { --tz-kolor: var(--info-tx);   --tz-tlo: var(--info-bg);   --tz-obwodka: var(--info-bd); }
.tz-ranga-niska     { --tz-kolor: var(--stal-tx);   --tz-tlo: var(--stal-bg);   --tz-obwodka: var(--stal-bd); }

.tz-kropka {
  display: inline-block; width: .5rem; height: .5rem; border-radius: 999px;
  margin-right: .3rem; background: var(--muted);
}
.tz-kropka-krytyczna { background: var(--danger-tx); }
.tz-kropka-wysoka    { background: var(--warn-tx); }
.tz-kropka-srednia   { background: var(--info-tx); }
.tz-kropka-niska     { background: var(--stal-tx); }

/* ---------- pasek podsumowania nad lista ---------- */
.tz-podsumowanie {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem;
  padding: .7rem .95rem; margin-bottom: 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow);
}
.tz-pods-el { display: flex; align-items: baseline; gap: .4rem; }
.tz-pods-val { font-size: var(--fs-lg); font-weight: 800; color: var(--tekst-mocny); }
.tz-pods-lab { font-size: var(--fs-sm); color: var(--muted); }
.tz-pods-el-moje .tz-pods-val { color: var(--brand); }
.tz-legenda {
  display: flex; flex-wrap: wrap; gap: .1rem .8rem; margin-left: auto;
  font-size: var(--fs-micro); color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700;
}
.tz-legenda-el { display: inline-flex; align-items: center; }

/* ---------- sekcja ---------- */
.tz-lista { display: flex; flex-direction: column; gap: 1.4rem; }
.tz-sekcja { scroll-margin-top: 5rem; }

.tz-sekcja-glowa {
  display: flex; align-items: flex-start; gap: .7rem;
  padding-bottom: .5rem; margin-bottom: .7rem;
  border-bottom: 1px solid var(--border);
}
/* Pionowa kreska w kolorze sekcji - powtorzenie tego samego sygnalu, ktory
   niesie lewa krawedz wierszy pod spodem. */
.tz-sekcja-znak {
  flex: none; width: 4px; align-self: stretch; min-height: 2.2rem;
  border-radius: 999px; background: var(--muted);
}
.tz-sekcja-po-terminie .tz-sekcja-znak { background: var(--danger-tx); }
.tz-sekcja-dzis .tz-sekcja-znak        { background: var(--brand); }
.tz-sekcja-wkrotce .tz-sekcja-znak     { background: var(--info-tx); }
.tz-sekcja-kiedys .tz-sekcja-znak      { background: var(--stal-tx); }

.tz-sekcja-tytul-blok { min-width: 0; }
.tz-sekcja-tytul {
  margin: 0; font-size: var(--fs-lg); font-weight: 800; color: var(--tekst-mocny);
  display: flex; align-items: center; gap: .5rem;
}
.tz-sekcja-licznik {
  font-size: var(--fs-sm); font-weight: 800; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .05rem .45rem;
}
.tz-sekcja-pod { margin: .15rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
.tz-sekcja-chipy {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-left: auto;
  justify-content: flex-end; max-width: 55%;
}
.tz-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--fs-micro); font-weight: 700; white-space: nowrap;
  padding: .12rem .45rem; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.tz-chip .mono-num {
  font-weight: 800; color: var(--tekst-mocny);
  background: var(--surface); border-radius: 999px; padding: 0 .28rem;
}
.tz-chip-alarm { background: var(--danger-bg); color: var(--danger-tx); border-color: var(--danger-bd); }
.tz-chip-moje  { background: var(--warn-bg);   color: var(--warn-tx);   border-color: var(--warn-bd); }

/* ---------- wiersz ---------- */
.tz-wiersze { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }

.tz-wiersz {
  position: relative; display: flex; align-items: stretch;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tz-wiersz:hover {
  transform: translateY(-1px); border-color: var(--tz-obwodka, var(--border));
  box-shadow: var(--shadow);
}
/* Lewa krawedz w kolorze rangi - po niej skanuje sie liste bez czytania. */
.tz-pasek { flex: none; width: 5px; background: var(--tz-kolor, var(--muted)); }

.tz-tresc {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: .7rem;
  padding: .75rem .85rem; text-decoration: none; color: inherit;
}
.tz-ikona {
  flex: none; display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 10px;
  background: var(--tz-tlo, var(--surface-2)); color: var(--tz-kolor, var(--muted));
  border: 1px solid var(--tz-obwodka, var(--border));
}
.tz-ikona svg { width: 1.05rem; height: 1.05rem; }

.tz-srodek { min-width: 0; display: flex; flex-direction: column; gap: .18rem; }
.tz-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.tz-tytul {
  font-size: var(--fs-md); font-weight: 700; color: var(--tekst-mocny);
  line-height: 1.25;
}
.tz-plakietka {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: .08rem .4rem; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.tz-plakietka-moje  { background: var(--warn-bg);   color: var(--warn-tx);   border-color: var(--warn-bd); }
.tz-plakietka-alarm { background: var(--danger-bg); color: var(--danger-tx); border-color: var(--danger-bd); }

.tz-opis {
  font-size: var(--fs-base); color: var(--muted); line-height: 1.4;
  /* Opis skladany po stronie Pythona bywa dlugi (data, kto, ile dni, zrodlo).
     Dwie linijki wystarcza, zeby zrozumiec sprawe; reszta jest na karcie. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tz-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem;
  margin-top: .12rem; font-size: var(--fs-sm); color: var(--muted);
}
.tz-meta-el { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.tz-meta-el svg { width: .8rem; height: .8rem; opacity: .7; }
.tz-meta-modul { font-weight: 700; color: var(--text); }
.tz-meta-bez { font-style: italic; }
.tz-meta-klik { color: var(--brand); font-weight: 700; }

/* ---------- prawa strona: termin i przyciski ---------- */
.tz-prawa {
  flex: none; display: flex; flex-direction: column; align-items: flex-end;
  justify-content: center; gap: .35rem;
  padding: .75rem .85rem .75rem .4rem;
  border-left: 1px dashed var(--border);
}
.tz-termin {
  font-size: var(--fs-sm); font-weight: 800; white-space: nowrap;
  padding: .15rem .5rem; border-radius: 999px;
  background: var(--tz-tlo, var(--surface-2)); color: var(--tz-kolor, var(--muted));
  border: 1px solid var(--tz-obwodka, var(--border));
}
.tz-akcja { margin: 0; }
.tz-akcja .btn-small { white-space: nowrap; }

.tz-wiecej {
  margin: .5rem 0 0; font-size: var(--fs-sm); color: var(--muted); font-style: italic;
}

/* ---------- sekcje puste, zwiniete do jednej linijki ---------- */
.tz-puste-sekcje {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0;
  font-size: var(--fs-sm); color: var(--muted);
}
.tz-puste-el { display: inline-flex; align-items: center; gap: .3rem; }
.tz-puste-el svg { width: .85rem; height: .85rem; color: var(--live); }

/* ---------- waski ekran ---------- */
@media (max-width: 720px) {
  .tz-sekcja-glowa { flex-wrap: wrap; }
  .tz-sekcja-chipy { max-width: 100%; margin-left: 0; justify-content: flex-start; }
  .tz-wiersz { flex-wrap: wrap; }
  .tz-tresc { flex: 1 1 100%; }
  /* Przyciski schodza pod tresc i ida w poziomie - inaczej waska kolumna
     po prawej scisnelaby "Odbieram" do dwoch znakow. */
  .tz-prawa {
    flex: 1 1 100%; flex-direction: row; align-items: center;
    justify-content: flex-start; flex-wrap: wrap;
    border-left: 0; border-top: 1px dashed var(--border);
    padding: .5rem .85rem .65rem;
  }
  .tz-legenda { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .tz-wiersz { transition: none; } }

/* ============================================================
   OSTRZEZENIA POD POLEM na kartach logowania / resetu hasla

   Problem: na karcie `.login-card` pole nie ma opakowania `.field` - etykieta
   i input sa bezposrednimi dziecmi karty, a odstep do nastepnej rubryki niesie
   sam input (`margin-bottom: .9rem`). Komunikat walidacji wstawiany PO inpucie
   ladowal wiec za tym odstepem: 0,9 rem od swojego pola i tylko 0,3 rem od
   etykiety nastepnego. Czytal sie jak podpis tej nastepnej rubryki, a nie jak
   ostrzezenie o polu wyzej - i zlewal sie z reszta napisow na karcie.

   Rozwiazanie: pole z bledem ODDAJE swoj dolny odstep komunikatowi. Ostrzezenie
   przykleja sie do rubryki, ktorej dotyczy, a odstep do nastepnej niesie juz
   samo ostrzezenie. Zero zmian w szablonach - dziala tak samo na logowaniu,
   resecie hasla, przypomnieniu hasla i zmianie hasla, i zadziala na kazdym
   kolejnym ekranie zbudowanym na tej karcie.
   ============================================================ */

/* 1. Pole z bledem zwija swoj dolny odstep - komunikat staje tuz pod nim. */
.login-card input.pole-zle,
.login-card select.pole-zle,
.login-card textarea.pole-zle { margin-bottom: .35rem; }

/* 2. To samo dla komunikatu z zarezerwowanym miejscem (`.field-msg` na ekranie
      przypomnienia hasla): stoi w DOM na stale, wiec input nie dostaje klasy
      bledu i odstep trzeba zdjac z samego sasiedztwa. */
.login-card input:has(+ .field-msg) { margin-bottom: .35rem; }

/* 3. Odstep do nastepnej rubryki niesie teraz ostrzezenie, nie pole. */
.login-card .pole-blad,
.login-card .field-msg { margin: 0 0 .9rem; }

/* 4. Ostrzezenie jako ramka, nie luzny tekst - zeby nie dalo sie go pomylic
      z etykieta ani z podpowiedzia pod polem. Ten sam ksztalt, co `.field-msg`,
      zeby oba komunikaty na karcie wygladaly identycznie. */
.login-card .pole-blad {
  align-items: center;
  padding: .45rem .65rem; border-radius: 7px;
  background: var(--danger-bg); border: 1px solid var(--danger-bd);
  color: var(--danger-tx);
}

/* 5. Ciemna szklana karta na tle zdjecia: `--danger-tx` to w motywie jasnym
      ciemna czerwien (#b91c1c), ktora na prawie czarnym tle byla nieczytelna.
      Karta ma wlasny, jasny wariant - niezaleznie od motywu konta, bo sama
      jest ciemna zawsze. */
.login-page .login-card .pole-blad {
  background: rgba(252, 165, 165, .12);
  border-color: rgba(252, 165, 165, .4);
  color: #fca5a5;
}

/* 6. Checklista wymagan hasla podciagala sie o 0,3 rem pod pole - gdy miedzy
      polem a nia stoi ostrzezenie, ten podciag nachodzil na jego dolny odstep. */
.pole-blad + .pw-rules,
.field-msg + .pw-rules { margin-top: 0; }

/* ============================================================
   KOKPIT ZADAN - ekran startowy

   Zasada calego ukladu: GRADACJA GESTOSCI. Im pilniejsza sekcja, tym wiecej
   miejsca i szczegolow dostaje pozycja; im mniej pilna, tym gestszy zapis.
   Rzecz po terminie to kafel z opisem (trzeba przy niej podjac decyzje),
   rzecz z tego tygodnia to jedna linijka (wystarczy CO i KIEDY), rzecz
   „do wziecia" to zeton (wystarczy wiedziec, ze istnieje).

   Dzieki temu tablica przestala rosnac w pionie razem z liczba zadan: sekcje
   maja ograniczona wysokosc i przewijaja sie w srodku, a ekran dzieli sie na
   pol zamiast ciagnac jedna kolumna w dol.

   Nietypowe elementy, kazdy niesie informacje:
   - pasek pilnosci u gory: segmenty proporcjonalne do liczby rzeczy, klikalne
   - numer w tle kafla: kolejnosc w sekcji, „01" pali sie najbardziej
   - skos w naglowku sekcji i klin w rogu kafla krytycznego
   - przycisk CELU przy kazdej pozycji: mowi, z ktorej zakladki jest sprawa,
     i prowadzi dokladnie tam, gdzie sie ja robi
   ============================================================ */

/* Kolory sekcji - jeden zestaw zmiennych na sekcje, dziedziczony przez naglowek,
   kafle, wiersze i zetony w srodku. */
.kok-sekcja-spoznione { --kok: var(--danger-tx); --kok-bg: var(--danger-bg); --kok-bd: var(--danger-bd); }
.kok-sekcja-dzisiaj   { --kok: var(--brand);     --kok-bg: var(--warn-bg);   --kok-bd: var(--warn-bd); }
.kok-sekcja-wazne       { --kok: var(--stal-tx);   --kok-bg: var(--stal-bg);   --kok-bd: var(--stal-bd); }

/* ---------- PASEK PILNOSCI ---------- */
.kok-pasek {
  display: flex; gap: 3px; margin-bottom: 1rem;
  height: 2.6rem; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow);
}
.kok-segment {
  position: relative; flex: 1 1 0; min-width: 2.6rem;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  text-decoration: none; color: #fff; overflow: hidden;
  font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
  transition: flex-grow .25s ease, filter .15s ease;
}
.kok-segment:hover { filter: brightness(1.12); }
.kok-segment-ile { font-size: var(--fs-md); font-weight: 800; }
/* Nazwa sekcji chowa sie w waskim segmencie - liczba zostaje zawsze. */
.kok-segment-nazwa { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .kok-segment-nazwa { display: none; } }

/* Skos zamiast plaskiego prostokata - pasek ma sie czytac jak wskaznik,
   a nie jak cztery przyciski sklejone bokami. */
.kok-segment-spoznione { background: linear-gradient(100deg, #b91c1c, #ef4444); }
.kok-segment-tydzien   { background: linear-gradient(100deg, var(--brand-dark), var(--brand)); }
.kok-segment-luz       { background: linear-gradient(100deg, #475569, #64748b); }

/* ---------- BENTO ---------- */
.kok-siatka {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; align-items: start;
}
/* „Spoznione" i „Na ten tydzien" dziela gorny rzad po polowie; „Do wziecia"
   idzie pod nimi przez cala szerokosc. Sekcja samotna w gornym rzedzie tez
   bierze calosc, zeby nie zostawala pusta kolumna. */
.kok-sekcja-wazne,
.kok-sekcja-pelna { grid-column: 1 / -1; }

.kok-sekcja {
  min-width: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); overflow: hidden;
  scroll-margin-top: 5rem;
}
/* Cienka wstega w kolorze sekcji na samej gorze panelu. */
.kok-sekcja::before {
  content: ""; display: block; height: 3px; background: var(--kok, var(--muted));
}

.kok-glowa {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .7rem .9rem; background: var(--surface);
  border-bottom: 1px solid var(--border);
  /* Skos w tle naglowka - stad „nietypowy", ale nadal spokojny: kolor sekcji
     rozmyty pod katem, nie plaska plama. */
  background-image: linear-gradient(100deg,
      color-mix(in srgb, var(--kok, var(--muted)) 14%, transparent) 0 38%,
      transparent 62%);
}
.kok-glowa-lewa { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.kok-licznik {
  flex: none; display: grid; place-items: center;
  min-width: 2.4rem; height: 2.4rem; padding: 0 .4rem;
  border-radius: 11px; font-size: var(--fs-lg); font-weight: 800;
  color: #fff; background: var(--kok, var(--muted));
}
.kok-glowa-tekst { min-width: 0; }
.kok-tytul { margin: 0; font-size: var(--fs-md); font-weight: 800; color: var(--tekst-mocny); }
.kok-pod { margin: .1rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
.kok-chipy {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-left: auto;
  justify-content: flex-end; max-width: 46%;
}

/* Wnetrze sekcji ma SUFIT WYSOKOSCI - to jest ta zmiana, przez ktora tablica
   przestala zajmowac cztery ekrany w pionie. Przewija sie w srodku, naglowek
   zostaje przyklejony. */
.kok-tresc { padding: .8rem .9rem; overflow-y: auto; overscroll-behavior: contain; }
.kok-g-kafle .kok-tresc   { max-height: 27rem; }
.kok-g-wiersze .kok-tresc { max-height: 17rem; }

/* ---------- GESTOSC 1: KAFLE ---------- */
.kok-kafle {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: .6rem;
}
.kok-kafel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .3rem;
  padding: .6rem .7rem .6rem 1rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
/* Wstega na lewej krawedzi - po niej skanuje sie kafle bez czytania.
   Niesie ten sam kolor, co zagiecie w prawym rogu (`--kok-rog`), czyli
   ZAKLADKE, a nie range: szary na dzisiaj, pomaranczowy w najwazniejszych,
   czerwony w spoznionych (ustalenie 19.08.2026). Wczesniej szla z rangi
   (`--tz-kolor`) i przez to ta sama sprawa zmieniala kolor przy przejsciu
   miedzy zakladkami, chociaz nic sie z nia nie stalo. Ranga zostaje widoczna
   tam, gdzie nie kloci sie z zakladka - w ikonie i plakietce terminu. */
.kok-kafel::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--kok-rog, var(--tz-kolor, var(--muted)));
}
.kok-kafel:hover {
  transform: translateY(-2px); box-shadow: var(--shadow);
  border-color: var(--tz-obwodka, var(--border));
}
/* ZAGIECIE KARTKI w prawym gornym rogu KAZDEJ karty, w kolorze swojej
   zakladki (ustalenie 19.08.2026). Dotad mial je tylko klin „krytyczne"
   w Spoznionych - a skoro ten sam ksztalt czyta sie tam jako „to jest
   z tej szuflady", to niech niesie zakladke wszedzie: szary na dzisiaj,
   pomaranczowy w najwazniejszych, czerwony w spoznionych. Kolor idzie
   zmienna ustawiona na sekcji, wiec kafel nie musi nic o sobie wiedziec.
   `pointer-events: none`, bo to ozdoba - nie ma przechwytywac klikniec
   w tytul karty pod spodem. */
.kok-kafel::after {
  content: ""; position: absolute; top: 0; right: 0; pointer-events: none;
  border-width: 0 1.5rem 1.5rem 0; border-style: solid;
  border-color: transparent var(--kok-rog, var(--muted)) transparent transparent;
  opacity: .85;
}
.kok-sekcja-dzisiaj   { --kok-rog: #6b7280; }
.kok-sekcja-wazne     { --kok-rog: #f97316; }
.kok-sekcja-spoznione { --kok-rog: var(--danger-tx); }
/* Kolor zakladki niesie tez IKONA przy tytule (i plakietka terminu), a nie
   tylko zagiecie i wstega. Musi to byc selektor POTOMKA (`.sekcja .kafel`),
   nie sama sekcja: `--tz-*` ustawiaja na kaflu klasy rangi (.tz-ranga-*),
   a deklaracja na samym elemencie bije wartosc odziedziczona po rodzicu -
   ikona zostawalaby w kolorze rangi. Dwie klasy vs jedna, wiec zakladka
   wygrywa. Rzecz odhaczona (.jest-zrobione, nizej w pliku) nadpisuje to
   z powrotem na zielen i tak ma zostac. */
.kok-sekcja-dzisiaj .kok-kafel {
  --tz-kolor: #6b7280; --tz-tlo: rgba(107, 114, 128, .13); --tz-obwodka: rgba(107, 114, 128, .45);
}
.kok-sekcja-wazne .kok-kafel {
  --tz-kolor: #f97316; --tz-tlo: rgba(249, 115, 22, .13); --tz-obwodka: rgba(249, 115, 22, .45);
}
.kok-sekcja-spoznione .kok-kafel {
  --tz-kolor: var(--danger-tx); --tz-tlo: var(--danger-bg); --tz-obwodka: var(--danger-bd);
}
.kok-numer {
  position: absolute; right: .5rem; bottom: -.35rem; pointer-events: none;
  font-size: 2.6rem; font-weight: 800; line-height: 1;
  color: var(--tz-kolor, var(--muted)); opacity: .1;
}
.kok-kafel-gora { display: flex; align-items: center; gap: .45rem; }
.kok-ikona {
  flex: none; display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem; border-radius: 8px;
  background: var(--tz-tlo, var(--surface)); color: var(--tz-kolor, var(--muted));
  border: 1px solid var(--tz-obwodka, var(--border));
}
.kok-ikona svg { width: .9rem; height: .9rem; }
.kok-termin {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; padding: .1rem .4rem; border-radius: 999px;
  background: var(--tz-tlo, var(--surface)); color: var(--tz-kolor, var(--muted));
  border: 1px solid var(--tz-obwodka, var(--border)); white-space: nowrap;
}
.kok-kafel-tytul {
  font-size: var(--fs-base); font-weight: 700; color: var(--tekst-mocny);
  text-decoration: none; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kok-kafel-tytul:hover { color: var(--brand); }
.kok-kafel-opis {
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kok-kafel-stopka {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin-top: .15rem; position: relative; z-index: 1;
}
.kok-kafel-moje { border-color: var(--warn-bd); }

/* ---------- PRZYCISK CELU (wspolny dla wszystkich gestosci) ---------- */
.kok-cel {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .18rem .5rem; border-radius: 999px; text-decoration: none;
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.kok-cel:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.kok-cel-strzalka { display: inline-flex; }
.kok-cel svg { width: .75rem; height: .75rem; }
.kok-moje {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: .12rem .4rem; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-bd);
  white-space: nowrap;
}
.kok-akcja { margin: 0; }
.kok-akcja .btn-small { white-space: nowrap; }

/* ---------- GESTOSC 2: WIERSZE ---------- */
.kok-wiersze { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.kok-wiersz {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .5rem .4rem .6rem; border-radius: 10px;
  border: 1px solid transparent; border-left: 3px solid var(--tz-kolor, var(--muted));
  background: var(--surface-2);
}
.kok-wiersz:hover { border-color: var(--border); border-left-color: var(--tz-kolor, var(--muted)); }
.kok-w-ikona { flex: none; display: grid; place-items: center; color: var(--tz-kolor, var(--muted)); }
.kok-w-ikona svg { width: .95rem; height: .95rem; }
.kok-w-tytul {
  /* 700 jak reszta klikalnych tytulow (.link-tresci, .karta-lista-tytul,
     .fleet-doc-link) - byla jedyna z 600 i odstawala. */
  flex: 1 1 auto; min-width: 0; font-size: var(--fs-base); font-weight: 700;
  color: var(--tekst-mocny); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kok-w-tytul:hover { color: var(--brand); }
.kok-w-termin {
  flex: none; font-size: var(--fs-sm); font-weight: 700;
  color: var(--tz-kolor, var(--muted)); white-space: nowrap;
}

/* ---------- GESTOSC 3: ZETONY ---------- */
.kok-zetony { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.kok-zeton { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; }
.kok-zeton-link {
  display: inline-flex; align-items: center; gap: .35rem; max-width: 24rem;
  padding: .22rem .3rem .22rem .45rem; border-radius: 999px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color .12s ease, background .12s ease;
}
.kok-zeton-link:hover { border-color: var(--brand); background: var(--surface); }
.kok-zeton-ico { flex: none; display: grid; place-items: center; color: var(--tz-kolor, var(--muted)); }
.kok-zeton-ico svg { width: .8rem; height: .8rem; }
.kok-zeton-tekst {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Zakladka docelowa wpisana w zeton - to jest tu przycisk celu, tyle ze
   zrosniety z pozycja, bo przy jednolinijkowym zapisie osobny przycisk
   zajalby wiecej miejsca niz sama tresc. */
.kok-zeton-cel {
  flex: none; font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: .08rem .4rem; border-radius: 999px;
  background: var(--kok-bg, var(--surface)); color: var(--kok, var(--muted));
  border: 1px solid var(--kok-bd, var(--border));
}

.kok-wiecej { margin: .5rem 0 0; padding: 0 .9rem .8rem; font-size: var(--fs-sm); }
.kok-wiecej a { color: var(--muted); font-style: italic; }
.kok-wiecej a:hover { color: var(--brand); }

/* ---------- waski ekran ---------- */
@media (max-width: 900px) {
  .kok-siatka { grid-template-columns: 1fr; }
  .kok-sekcja { grid-column: 1 / -1; }
  .kok-chipy { max-width: 100%; }
}
@media (max-width: 620px) {
  .kok-glowa { flex-wrap: wrap; }
  .kok-chipy { margin-left: 0; justify-content: flex-start; }
  .kok-kafle { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kok-kafel, .kok-segment, .kok-cel { transition: none; }
  .kok-kafel:hover { transform: none; }
}

/* ============================================================
   TABLICA ZADAN - trzy sekcje i fakty zamiast zdania

   Poprzednia wersja miala cztery sekcje i opis pozycji sklejony kropkami
   („ostatni w 2024 · tel. 530221225"). Zdanie trzeba bylo przeczytac w calosci,
   zeby wylowic z niego numer telefonu - a serwisant szuka wzrokiem konkretu,
   nie czyta akapitu. Fakty ida teraz w dwoch kolumnach: etykieta po lewej,
   wartosc po prawej, kazda w swoim wierszu.
   ============================================================ */

/* Kafel potrzebuje wiecej szerokosci niz wczesniej - w srodku stoi tabelka
   faktow, a nie dwie linijki tekstu. */
.kok-kafle { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .7rem; }
.kok-kafel { padding: .7rem .8rem .7rem 1.05rem; gap: .45rem; }

/* Tytul wszedl do gornego rzedu, obok ikony - dzieki temu pierwsza linijka
   kafla mowi od razu CO i NA KIEDY, bez schodzenia wzrokiem nizej. */
.kok-kafel-gora { align-items: flex-start; gap: .5rem; }
.kok-kafel-gora .kok-kafel-tytul { flex: 1 1 auto; min-width: 0; }
.kok-kafel-gora .kok-termin { flex: none; margin-left: auto; }
.kok-kafel-tytul { font-size: var(--fs-md); }

/* Fakty: siatka etykieta / wartosc. Etykieta przygaszona i mala, wartosc
   czytelna - wzrok leci po prawej kolumnie i lapie konkrety. */
.kok-fakty {
  display: grid; grid-template-columns: auto 1fr; gap: .12rem .6rem;
  margin: 0; padding: .45rem .55rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
}
.kok-fakty dt {
  font-size: var(--fs-micro); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap; align-self: center;
}
.kok-fakty dd {
  margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  line-height: 1.35; min-width: 0; overflow-wrap: anywhere;
}
/* Telefon i inne wartosci klikalne - numer ma dac sie wybrac z telefonu
   jednym dotknieciem, a nie przepisywac z ekranu. */
.kok-fakt-link {
  color: var(--brand); font-weight: 800; text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.kok-fakt-link:hover { color: var(--brand-dark); }

/* Wiersz w sekcji „Do wziecia" niesie jeden fakt - najczesciej nazwe klienta
   albo auta, czyli to, co odroznia go od sasiada z tej samej rodziny. */
.kok-w-fakt {
  flex: none; max-width: 14rem; font-size: var(--fs-sm); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Sekcja „Do wziecia" jest zapasem, nie robota na teraz - jej panel ma byc
   wyraznie spokojniejszy od dwoch nad nim. */
.kok-sekcja-wazne .kok-glowa { background-image: none; }
.kok-sekcja-wazne .kok-licznik { background: var(--stal-tx); }

@media (max-width: 620px) {
  .kok-fakty { grid-template-columns: 1fr; gap: 0; padding: .4rem .5rem; }
  .kok-fakty dt { margin-top: .3rem; }
  .kok-w-fakt { display: none; }
}

/* ============================================================
   TABLICA ZADAN - trzy przyciski skoku, postep sekcji, przyciski akcji

   Proporcjonalna belka na gorze zniknela. Mowila, JAK ROZKLADA SIE robota,
   ale zeby cokolwiek z niej wyczytac, trzeba bylo porownywac szerokosci
   segmentow - a czlowiek wchodzacy rano na ekran chce kliknac, nie mierzyc.
   Zastapily ja trzy duze, podpisane przyciski.

   Pasek zszedl POD naglowek kazdej sekcji i zmienil sens: nie pokazuje juz
   proporcji miedzy sekcjami, tylko POSTEP w tej jednej. Tor ma kolor sekcji,
   wypelnienie jest zielone - kazde „Zrobione" przesuwa sekcje z czerwieni
   albo pomaranczu w zielen.
   ============================================================ */

/* ---------- trzy przyciski skoku ---------- */
.kok-skoki {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem; margin-bottom: 1.1rem;
}
.kok-skok {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem .9rem; border-radius: 14px; text-decoration: none;
  background: var(--surface); border: 2px solid var(--kok, var(--border));
  box-shadow: var(--shadow); color: var(--text);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.kok-skok:hover { transform: translateY(-2px); background: var(--kok-bg, var(--surface-2)); }
.kok-skok-spoznione { --kok: var(--danger-tx); --kok-bg: var(--danger-bg); }
.kok-skok-dzisiaj   { --kok: var(--brand);     --kok-bg: var(--warn-bg); }
.kok-skok-wazne       { --kok: var(--stal-tx);   --kok-bg: var(--stal-bg); }

.kok-skok-ile {
  flex: none; display: grid; place-items: center;
  min-width: 2.9rem; height: 2.9rem; padding: 0 .5rem; border-radius: 12px;
  font-size: var(--fs-xl); font-weight: 800; color: #fff;
  background: var(--kok, var(--muted));
}
.kok-skok-tekst { display: flex; flex-direction: column; min-width: 0; }
.kok-skok-nazwa {
  font-size: var(--fs-md); font-weight: 800; color: var(--tekst-mocny);
  line-height: 1.2;
}
.kok-skok-pod { font-size: var(--fs-sm); color: var(--muted); line-height: 1.3; }
.kok-skok-strzalka { margin-left: auto; color: var(--kok, var(--muted)); flex: none; }
.kok-skok-strzalka svg { width: 1.1rem; height: 1.1rem; }
/* Sekcja domknieta do konca - przycisk robi sie zielony. */
.kok-skok.jest-domkniety { --kok: #16a34a; --kok-bg: #f0fdf4; border-color: #16a34a; }
:root[data-motyw="ciemny"] .kok-skok.jest-domkniety { --kok-bg: #0d2418; }

/* ---------- pasek postepu sekcji ---------- */
.kok-postep {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .9rem .6rem; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.kok-postep-tor {
  flex: 1 1 auto; height: .55rem; border-radius: 999px; overflow: hidden;
  /* Tor w kolorze sekcji - to jest ta czesc, ktora ZOSTALA do zrobienia. */
  background: var(--kok, var(--muted));
}
.kok-postep-wypelnienie {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #16a34a, #22c55e);
  transition: width .3s ease;
}
.kok-postep-opis {
  flex: none; display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--muted); white-space: nowrap;
}
.kok-postep-opis svg { width: .9rem; height: .9rem; color: #16a34a; }
.kok-postep.jest-domkniety .kok-postep-opis { color: #16a34a; }

/* ---------- przyciski akcji przy pozycji ---------- */
/* Byly to male, szare przyciski „btn-small" ginace w stopce kafla. Teraz maja
   wlasny ksztalt, ikone i kolor - to jest glowny ruch na tym ekranie. */
.kok-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .65rem; border-radius: 8px; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 800; white-space: nowrap;
  border: 1px solid transparent;
  transition: filter .12s ease, background .12s ease;
}
.kok-btn svg { width: .85rem; height: .85rem; }
.kok-btn-zrobione { background: #16a34a; color: #fff; }
.kok-btn-zrobione:hover { filter: brightness(1.1); }
.kok-btn-odbieram { background: var(--brand); color: #fff; }
.kok-btn-odbieram:hover { filter: brightness(1.1); }
.kok-btn-cofnij {
  background: transparent; color: var(--muted); border-color: var(--border);
  font-weight: 700;
}
.kok-btn-cofnij:hover { background: var(--surface-2); color: var(--text); }

/* ---------- pozycja odhaczona ---------- */
.kok-zrobione-znak {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--fs-sm); font-weight: 800; color: #16a34a;
}
.kok-zrobione-znak svg { width: .9rem; height: .9rem; }
.kok-kafel.jest-zrobione,
.kok-wiersz.jest-zrobione {
  --tz-kolor: #16a34a; --tz-tlo: #f0fdf4; --tz-obwodka: #bbf7d0;
  opacity: .72;
}
:root[data-motyw="ciemny"] .kok-kafel.jest-zrobione,
:root[data-motyw="ciemny"] .kok-wiersz.jest-zrobione { --tz-tlo: #0d2418; --tz-obwodka: #166534; }
.kok-kafel.jest-zrobione .kok-kafel-tytul,
.kok-wiersz.jest-zrobione .kok-w-tytul { text-decoration: line-through; }
.kok-kafel.jest-zrobione:hover, .kok-wiersz.jest-zrobione:hover { opacity: 1; }
/* Tabelka faktow przy rzeczy zalatwionej to juz tylko archiwum - chowamy ja,
   zeby domkniete pozycje nie zajmowaly tyle miejsca, co otwarte. */
.kok-kafel.jest-zrobione .kok-fakty { display: none; }

/* Zrobione: ZAGIECIE w prawym gornym rogu karty - ten sam jezyk co klin
   rangi krytycznej (.tz-ranga-krytyczna::after) kilka linii wyzej, tylko
   szaro-pomaranczowe zamiast czerwonego, i przypiete flush do samego rogu
   (top:0/right:0, promien tylko na zewnetrznym rogu) - stad "zagiecie",
   nie plywajaca plakietka. Na WSZYSTKICH trzech zakladkach (dzisiaj, wazne,
   spoznione), nie tylko w Spoznionych - zamknieta sprawa ma to byc widac
   od razu, w ktorejkolwiek kolumnie akurat stoi. */
.kok-kafel.jest-zrobione { padding-top: 1.9rem; }
.kok-kafel.jest-zrobione .kok-zrobione-znak {
  position: absolute; top: 0; right: 0; z-index: 2;
  background: #4b5563; color: #fff; font-weight: 700;
  padding: .3rem .65rem .25rem .55rem;
  border-radius: 0 11px 0 10px;
  border-bottom: 2px solid #f97316; border-left: 2px solid #f97316;
}
.kok-kafel.jest-zrobione .kok-zrobione-znak svg { color: #f97316; }
:root[data-motyw="ciemny"] .kok-kafel.jest-zrobione .kok-zrobione-znak { background: #374151; }
/* Zagiecie zakladki gasnie razem ze sprawa - sprawa juz zamknieta nie ma po
   co dalej krzyczec kolorem z rogu karty, a poza tym w tym samym rogu stoi
   juz plakietka „Zrobione" i oba ksztalty bilyby sie ze soba. */
.kok-kafel.jest-zrobione::after { display: none; }

/* ---------- czytelniejsze naglowki ---------- */
.kok-tytul { font-size: var(--fs-lg); letter-spacing: -.01em; }
.kok-glowa { padding: .8rem .9rem .7rem; }
.kok-licznik { min-width: 2.7rem; height: 2.7rem; font-size: var(--fs-xl); }

@media (max-width: 900px) {
  .kok-skoki { grid-template-columns: 1fr; gap: .5rem; }
  .kok-postep-opis { font-size: var(--fs-micro); }
}
@media (prefers-reduced-motion: reduce) {
  .kok-skok, .kok-postep-wypelnienie, .kok-btn { transition: none; }
  .kok-skok:hover { transform: none; }
}

/* ============================================================
   LICZNIK SPOZNIENIA

   Data „25.05.2026" jest martwa - czyta sie ja jak kazda inna liczbe na
   ekranie. Licznik, ktory rusza sie na oczach, mowi co innego: to nie jest
   stan rzeczy, tylko strata, ktora wlasnie rosnie. Sekundy sa tu po to,
   zeby bylo widac ruch, a nie zeby ktos je liczyl.
   ============================================================ */

.kok-spoznione {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: .1rem; flex: none; margin-left: auto; text-align: right;
}
.kok-spoznione-data {
  font-size: var(--fs-micro); font-weight: 700; color: var(--muted);
  white-space: nowrap;
}
.kok-timer {
  display: inline-block; padding: .12rem .45rem; border-radius: 7px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  font-size: var(--fs-sm); font-weight: 800; white-space: nowrap;
  color: #fff; background: var(--danger-tx);
  /* Puls raz na sekunde, w rytmie licznika. Delikatny - ma przyciagac oko
     przy pierwszym spojrzeniu na ekran, a nie migac przez caly dzien. */
  animation: kok-puls 1s ease-in-out infinite;
}
:root[data-motyw="ciemny"] .kok-timer { background: #dc2626; color: #fff; }

@keyframes kok-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); }
  50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
}

/* W jednolinijkowym wierszu („Najwazniejsze") licznik stoi obok tytulu -
   bez ramki na cala szerokosc, zeby nie rozpychal wiersza. */
.kok-wiersz .kok-timer { flex: none; font-size: var(--fs-micro); }

/* Pozycja odhaczona przestaje sie palic - licznik gasnie razem z nia,
   inaczej „Zrobione" i czerwony sekundnik przeczylyby sobie nawzajem. */
.jest-zrobione .kok-timer {
  background: var(--stal-bg); color: var(--muted); animation: none;
}
.jest-zrobione .kok-spoznione-data { text-decoration: line-through; }

@media (prefers-reduced-motion: reduce) {
  .kok-timer { animation: none; }
}
@media (max-width: 620px) {
  .kok-spoznione { align-items: flex-start; text-align: left; margin-left: 0; }
}

/* ============================================================
   TABLICA ZADAN - jedna oprawiona tablica z trzema zakladkami

   Trzy sekcje stały wczesniej jedna pod druga i ekran ciagnal sie w dol.
   Teraz to jest JEDNA tablica w ramce: u gory trzy kafelki-zakladki, pod nimi
   tresc tej wybranej. Kafelek przelacza tablice, a nie tylko przewija strone.
   ============================================================ */

.kok-tablica {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--surface); box-shadow: var(--shadow);
  padding: 1rem;
}
/* Dekoracja tablicy - delikatna siatka i poswiata w rogu, zeby calosc czytala
   sie jak jedna plansza, a nie jak trzy panele obok siebie. Pod trescia,
   bez wplywu na klikanie. */
.kok-tablica-tlo {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 80% at 100% 0%,
      color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 60%),
    linear-gradient(0deg, transparent 0 calc(100% - 1px), var(--border) 100%) 0 0 / 100% 34px,
    linear-gradient(90deg, transparent 0 calc(100% - 1px), var(--border) 100%) 0 0 / 34px 100%;
  opacity: .45;
}
.kok-tablica > *:not(.kok-tablica-tlo) { position: relative; z-index: 1; }

/* ---------- trzy kafelki-zakladki ---------- */
.kok-skoki {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem; margin-bottom: 1rem;
}
.kok-skok {
  display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
  padding: .95rem 1.05rem; border-radius: 16px; cursor: pointer;
  background: var(--surface-2); border: 2px solid var(--border);
  color: var(--text); font: inherit;
  transition: transform .12s ease, box-shadow .12s ease,
              background .12s ease, border-color .12s ease;
}
.kok-skok:hover { transform: translateY(-2px); border-color: var(--kok, var(--border)); }
/* Zakladka wybrana - pelny kolor sekcji, zeby na pierwszy rzut oka bylo
   wiadomo, ktora tresc jest pod spodem. */
.kok-skok.jest-aktywny {
  background: var(--surface); border-color: var(--kok, var(--brand));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kok, var(--brand)) 18%, transparent),
              var(--shadow);
}
.kok-skok-ile {
  flex: none; display: grid; place-items: center;
  min-width: 3.4rem; height: 3.4rem; padding: 0 .55rem; border-radius: 14px;
  font-size: var(--fs-hero); font-weight: 800; line-height: 1; color: #fff;
  background: var(--kok, var(--muted));
}
.kok-skok-tekst { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1 1 auto; }
.kok-skok-nazwa {
  font-size: var(--fs-lg); font-weight: 800; color: var(--tekst-mocny); line-height: 1.15;
}
.kok-skok-pod { font-size: var(--fs-base); color: var(--muted); line-height: 1.3; }
/* Miniaturowy pasek postepu na kafelku - ten sam podzial, co w sekcji. */
.kok-skok-pasek {
  display: flex; height: .4rem; margin-top: .25rem;
  border-radius: 999px; overflow: hidden; background: var(--stal-bd);
}

/* ---------- panele ---------- */
.kok-panele { min-width: 0; }
.kok-sekcja {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: none; overflow: hidden;
}
.kok-sekcja[hidden] { display: none; }
.kok-glowa { background: var(--surface); }
.kok-tresc { background: var(--surface-2); }
.kok-g-kafle .kok-tresc { max-height: 30rem; }

.kok-pusto {
  display: flex; align-items: center; gap: .45rem; margin: 0; padding: 1.2rem .2rem;
  font-size: var(--fs-md); color: var(--muted);
}
.kok-pusto svg { width: 1.1rem; height: 1.1rem; color: #16a34a; }

/* ---------- pasek postepu: zielony / czerwony / szary ---------- */
.kok-postep-tor {
  display: flex; flex: 1 1 auto; height: .7rem;
  border-radius: 999px; overflow: hidden;
  /* Szare tlo = robota niezrobiona, ktora nie jest krytyczna. */
  background: var(--stal-bd);
}
.kok-postep-zrobione {
  display: block; height: 100%;
  background: linear-gradient(90deg, #16a34a, #22c55e);
  transition: width .3s ease;
}
.kok-postep-krytyczne {
  display: block; height: 100%;
  background: linear-gradient(90deg, #dc2626, #ef4444);
  transition: width .3s ease;
}
.kok-postep-opis { font-size: var(--fs-base); }

/* ---------- wieksze naglowki i przyciski ---------- */
.kok-tytul { font-size: var(--fs-xl); }
.kok-pod { font-size: var(--fs-base); line-height: 1.4; }
.kok-licznik { min-width: 3rem; height: 3rem; font-size: var(--fs-hero); }
.kok-btn { padding: .42rem .85rem; font-size: var(--fs-base); border-radius: 9px; }
.kok-btn svg { width: 1rem; height: 1rem; }
.kok-cel { padding: .26rem .65rem; font-size: var(--fs-sm); }
.kok-cel svg { width: .85rem; height: .85rem; }
.kok-kafel-tytul { font-size: var(--fs-lg); }

/* ---------- zestawienie tygodniowe ---------- */
.kok-tydzien {
  margin-top: 1.2rem; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
}
.kok-tydzien-glowa {
  display: flex; align-items: center; gap: .8rem; cursor: pointer;
  padding: .9rem 1rem; list-style: none;
}
.kok-tydzien-glowa::-webkit-details-marker { display: none; }
.kok-tydzien-glowa:hover { background: var(--surface-2); }
.kok-tydzien-ikona {
  flex: none; display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 12px;
  background: #16a34a; color: #fff;
}
.kok-tydzien-ikona svg { width: 1.2rem; height: 1.2rem; }
.kok-tydzien-tekst { display: flex; flex-direction: column; min-width: 0; }
.kok-tydzien-tytul { font-size: var(--fs-lg); font-weight: 800; color: var(--tekst-mocny); }
.kok-tydzien-pod { font-size: var(--fs-base); color: var(--muted); }
.kok-tydzien-ile {
  margin-left: auto; flex: none; font-size: var(--fs-xl); font-weight: 800;
  color: #16a34a;
}
/* Strzalka rozwijania - obraca sie po otwarciu, zeby bylo widac stan. */
.kok-tydzien-glowa::after {
  content: ""; flex: none; width: .55rem; height: .55rem; margin-left: .6rem;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s ease;
}
.kok-tydzien[open] .kok-tydzien-glowa::after { transform: rotate(-135deg); }

.kok-tydzien-tresc { padding: 0 1rem 1rem; }
.kok-tydzien-dzien { padding-top: .8rem; }
.kok-tydzien-data {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem;
  font-size: var(--fs-sm); font-weight: 800; color: var(--tekst-mocny);
  text-transform: uppercase; letter-spacing: .03em;
}
.kok-tydzien-data .mono-num {
  font-size: var(--fs-micro); color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .05rem .4rem;
}
.kok-tydzien-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.kok-tydzien-lista li {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  padding: .35rem .5rem; border-radius: 8px; background: var(--surface-2);
  border-left: 3px solid #16a34a;
}
.kok-tydzien-godz { flex: none; font-size: var(--fs-sm); color: var(--muted); }
.kok-tydzien-co {
  flex: 1 1 auto; min-width: 0; font-size: var(--fs-base); font-weight: 600;
  color: var(--text);
}
.kok-tydzien-gdzie, .kok-tydzien-kto {
  flex: none; font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: .1rem .45rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); background: var(--surface);
}
.kok-tydzien-pusto { margin: 0; padding: 0 1rem 1rem; font-size: var(--fs-base); color: var(--muted); }

/* ---------- Produkcja: wlasny kolor kafelka skrotu ---------- */
/* Stal i zebate kolo zamiast ptaszka - zakladka ma sie kojarzyc z hala,
   a nie z odhaczaniem zadan. */
.module-tile-ico.mc-produkcja { background: linear-gradient(135deg, #64748b, #334155); }

@media (max-width: 900px) {
  .kok-skoki { grid-template-columns: 1fr; gap: .5rem; }
  .kok-tablica { padding: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kok-skok, .kok-postep-zrobione, .kok-postep-krytyczne { transition: none; }
  .kok-skok:hover { transform: none; }
}

/* ============================================================
   TABLICA ZADAN - kolory zakladek, notatka przy zamykaniu, hero

   Kod barw jest jeden na caly ekran, od gory do dolu:
     CZERWIEN  - spoznione (termin minal)
     BURSZTYN  - najwazniejsze (pali sie, ale termin jeszcze nie minal)
     STAL      - na dzisiaj (biezaca robota, spokojny kolor)
   Dzieki temu liczba w naglowku, kafelek zakladki i pasek postepu mowia
   to samo tym samym kolorem.
   ============================================================ */

/* Na dzisiaj - spokojna stal. To jest biezaca robota, nie alarm. */
.kok-sekcja-dzisiaj, .kok-skok-dzisiaj { --kok: #475569; --kok-bg: var(--stal-bg); --kok-bd: var(--stal-bd); }
/* Najwazniejsze - bursztyn. Wazne, ale to jeszcze nie zaleglosc. */
.kok-sekcja-wazne, .kok-skok-wazne { --kok: #b45309; --kok-bg: var(--warn-bg); --kok-bd: var(--warn-bd); }
.kok-sekcja-spoznione, .kok-skok-spoznione { --kok: var(--danger-tx); --kok-bg: var(--danger-bg); --kok-bd: var(--danger-bd); }
:root[data-motyw="ciemny"] .kok-sekcja-dzisiaj,
:root[data-motyw="ciemny"] .kok-skok-dzisiaj { --kok: #94a3b8; }
:root[data-motyw="ciemny"] .kok-sekcja-wazne,
:root[data-motyw="ciemny"] .kok-skok-wazne { --kok: #f59e0b; }

.kok-sekcja-wazne .kok-glowa { background-image: linear-gradient(100deg,
    color-mix(in srgb, var(--kok) 14%, transparent) 0 38%, transparent 62%); }
.kok-sekcja-wazne .kok-licznik { background: var(--kok); }

/* ---------- podpowiedz na kafelku zakladki ---------- */
.kok-skok-wskazowka {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem;
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--kok, var(--muted));
}
.kok-skok-strzalka { display: inline-flex; }
.kok-skok-wskazowka svg { width: .8rem; height: .8rem; }
/* Po wybraniu zakladki podpowiedz zmienia tresc - nie klamie o stanie. */
.kok-skok-wskazowka-wybrane { display: none; }
.kok-skok.jest-aktywny .kok-skok-wskazowka-tekst { display: none; }
.kok-skok.jest-aktywny .kok-skok-wskazowka-wybrane { display: inline; }
.kok-skok.jest-aktywny .kok-skok-strzalka { transform: rotate(180deg); }

/* ---------- plakietka „z Na dzisiaj" ---------- */
.kok-skad {
  display: inline-flex; align-items: center; gap: .25rem; flex: none;
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: .1rem .45rem; border-radius: 999px;
  background: var(--stal-bg); color: #475569; border: 1px solid var(--stal-bd);
  white-space: nowrap;
}
.kok-skad svg { width: .75rem; height: .75rem; }
:root[data-motyw="ciemny"] .kok-skad { color: #cbd5e1; }

/* ---------- notatka w oknie potwierdzenia ---------- */
.confirm-notatka { margin: .2rem 0 .9rem; text-align: left; }
.confirm-notatka-etykieta {
  display: block; margin-bottom: .3rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
}
.confirm-notatka-pole {
  width: 100%; resize: vertical; padding: .6rem .7rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  font-family: inherit; font-size: var(--fs-base); line-height: 1.5;
}
.confirm-notatka-pole:focus {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}

/* ---------- zestawienie tygodniowe: cofanie i notatka ---------- */
.kok-tydzien-cofnij { margin-left: auto; }
.kok-tydzien-notatka {
  flex: 1 1 100%; margin: .25rem 0 0; padding: .35rem .5rem;
  font-size: var(--fs-sm); color: var(--muted); font-style: italic;
  background: var(--surface); border-left: 2px solid var(--border); border-radius: 6px;
}

/* ============================================================
   NAGLOWEK EKRANU (hero) - wieksze przyciski, kolorowe liczby
   ============================================================ */

.hero-actions { gap: .7rem; flex-wrap: wrap; }
/* Przyciski byly male jak zwykle linki w tekscie, a to sa dwie najczestsze
   akcje na tym ekranie. Teraz maja rozmiar przycisku, ikone w kolku i wyrazna
   krawedz. */
.btn-hero {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.15rem; border-radius: 12px;
  font-size: var(--fs-md); font-weight: 800;
  box-shadow: 0 6px 18px rgba(2, 8, 23, .18);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2, 8, 23, .26); }
.btn-hero svg { width: 1.05rem; height: 1.05rem; }


/* Wiecej powietrza w calym naglowku - byl gesty jak tabela. */
.hero-section.tablica-hero { padding: 1.5rem 1.6rem 1.7rem; }
.hero-info-row { gap: 1rem; margin-top: 1.1rem; }
.hero-brand-row { margin-bottom: .3rem; }

@media (max-width: 720px) {
  .tablica-liczby { gap: .5rem; }
  .tablica-liczba { padding: .6rem .7rem; gap: .5rem; }
  .btn-hero { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-hero, .tablica-liczba { transition: none; }
  .btn-hero:hover, .tablica-liczba:hover { transform: none; }
}

/* ============================================================
   SMUKLEJSZY NAGLOWEK I POZIOME KAFELKI

   Poprzednia wersja rosla w gore: gruby prostokat naglowka, wysokie kafle
   z liczbami, wysokie kafelki zakladek. Kazdy element byl czytelny osobno,
   ale razem zjadaly pol ekranu, zanim pokazalo sie choc jedno zadanie.
   Teraz wszystko idzie W POZIOM: niskie, dlugie paski zamiast klockow.
   ============================================================ */

/* Naglowek - nizszy i z mniejszym wewnetrznym marginesem. */
.hero-section.tablica-hero { padding: 1.1rem 1.3rem 1.2rem; }
.hero-brand-row { margin-bottom: .2rem; }
.hero-info-row { gap: .7rem; margin-top: .8rem; }
.hero-brand-big { font-size: var(--fs-xl); }

/* Przyciski akcji - nadal wyrazne, ale nizsze. */
.btn-hero { padding: .5rem .9rem; font-size: var(--fs-base); border-radius: 10px; }
.btn-hero svg { width: .95rem; height: .95rem; }


/* ---------- kafelki zakladek: niskie i dlugie ---------- */
.kok-tablica { padding: .8rem; border-radius: 16px; }
.kok-skoki { gap: .5rem; margin-bottom: .8rem; }
.kok-skok {
  align-items: center; gap: .6rem;
  padding: .55rem .75rem; border-radius: 12px; border-width: 1px;
}
.kok-skok.jest-aktywny { box-shadow: inset 0 0 0 2px var(--kok, var(--brand)); }
.kok-skok-ile {
  min-width: 2.4rem; height: 2.4rem; border-radius: 10px;
  font-size: var(--fs-xl);
}
.kok-skok-tekst { gap: .05rem; }
.kok-skok-nazwa { font-size: var(--fs-md); }
.kok-skok-pod { font-size: var(--fs-sm); }
/* Pasek postepu na kafelku - cienka kreska, nie belka. */
.kok-skok-pasek { height: .25rem; margin-top: .2rem; }
/* Podpowiedz o klikaniu schodzi do jednej linijki obok reszty. */
.kok-skok-wskazowka { margin-top: .1rem; font-size: 0.58rem; }

/* Naglowek sekcji tez nizszy - tytul i opis w jednej kolumnie, bez zapasu. */
.kok-glowa { padding: .6rem .8rem .55rem; }
.kok-tytul { font-size: var(--fs-lg); }
.kok-pod { font-size: var(--fs-sm); }
.kok-licznik { min-width: 2.4rem; height: 2.4rem; font-size: var(--fs-xl); }
.kok-postep { padding: .4rem .8rem .45rem; }
.kok-postep-tor { height: .45rem; }
.kok-postep-opis { font-size: var(--fs-sm); }
.kok-tresc { padding: .65rem .8rem; }

@media (max-width: 900px) {
  .tablica-liczby { grid-template-columns: 1fr; }
}



/* Ikona pieca przy imieniu w naglowku - wieksza o 15%
   (44 -> 51 px, wnetrze 24 -> 28 px). */
.oferty-hero-ico { width: 51px; height: 51px; }
.oferty-hero-ico svg { width: 28px; height: 28px; }
.oferty-hero-foto { width: 51px; height: 51px; }

/* ============================================================
   DLACZEGO OFERTY NIE PRZECHODZA - hipoteza przy ofercie i zestawienie

   Hipoteza systemu ma wygladac INACZEJ niz ustalenie czlowieka: przerywana
   ramka i znacznik „odczyt systemu" zamiast pelnej ramki. To nie jest ozdoba
   - po pol roku nikt nie pamieta, czy zdanie „najpewniej cena" ktos sprawdzil,
   czy policzyla je aplikacja.
   ============================================================ */

.oferta-hipoteza {
  margin: .5rem 0 .2rem; padding: .6rem .75rem;
  border: 1px dashed var(--ai-bd); border-radius: 10px;
  background: var(--ai-bg);
}
.oferta-hipoteza-glowa {
  display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem;
}
.oferta-hipoteza-znacznik {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; padding: .1rem .45rem; border-radius: 999px;
  background: var(--ai); color: #fff;
}
.oferta-hipoteza-pewnosc {
  font-size: var(--fs-micro); font-weight: 700; color: var(--ai-tx);
  text-transform: uppercase; letter-spacing: .04em;
}
.oferta-hipoteza-zdanie {
  margin: 0 0 .3rem; font-size: var(--fs-md); font-weight: 700;
  color: var(--tekst-mocny);
}
.oferta-hipoteza-przeslanki {
  margin: 0 0 .5rem; padding-left: 1.1rem;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.45;
}
.oferta-hipoteza-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.oferta-hipoteza-akcje form { margin: 0; }
.oferta-hipoteza-nota { font-size: var(--fs-sm); color: var(--muted); }

/* ---------- zestawienie na liscie ofert ---------- */
.wnioski-panel { display: flex; flex-direction: column; gap: .6rem; }
.wnioski-zdanie {
  margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--tekst-mocny);
  line-height: 1.4;
}
.wnioski-slupki { display: flex; flex-direction: column; gap: .1rem; }
.wnioski-slupek-rzad {
  display: grid; grid-template-columns: 10rem 1fr 2.2rem;
  align-items: center; gap: .6rem;
}
.wnioski-slupek-etykieta {
  font-size: var(--fs-base); font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wnioski-slupek-tor {
  height: .7rem; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); overflow: hidden;
}
.wnioski-slupek-wypelnienie {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand));
}
.wnioski-slupek-ile {
  font-size: var(--fs-md); font-weight: 800; color: var(--tekst-mocny);
  text-align: right;
}
/* Przyklad prawdziwego zdania spod slupka - liczba bez cytatu nie mowi,
   co ludzie faktycznie pisza, a to jest cala tresc tej wiedzy. */
.wnioski-przyklad {
  margin: 0 0 .45rem 10.6rem; font-size: var(--fs-sm); color: var(--muted);
  font-style: italic; line-height: 1.35;
}
.wnioski-braki {
  margin: 0; padding: .5rem .65rem; border-radius: 9px;
  background: var(--warn-bg); border: 1px solid var(--warn-bd);
  color: var(--warn-tx); font-size: var(--fs-base); line-height: 1.45;
}

@media (max-width: 720px) {
  .wnioski-slupek-rzad { grid-template-columns: 1fr 2.2rem; }
  .wnioski-slupek-tor { grid-column: 1 / -1; }
  .wnioski-przyklad { margin-left: 0; }
}

/* ============================================================
   TA OFERTA W SUBIEKCIE - para dokumentow i to, co z niej wyszlo

   Dwa stany wygladaja INACZEJ, bo znacza co innego: ustalona para ma pelna
   ramke (to jest fakt), propozycja automatu - przerywana i znacznik „odczyt".
   ============================================================ */

.subiekt-blok {
  margin: .8rem 0; padding: .8rem .9rem;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.subiekt-glowa {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .5rem;
}
.subiekt-tytul {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-md); font-weight: 800; color: var(--tekst-mocny);
}
.subiekt-tytul svg { width: 1rem; height: 1rem; color: var(--muted); }
.subiekt-znacznik {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: .1rem .45rem; border-radius: 999px;
  border: 1px solid transparent;
}
/* Reczne to ustalenie czlowieka - zielone. Odczyt to hipoteza przyjeta
   jednym kliknieciem - blekitne, ten sam kolor co inne odczyty w systemie. */
.subiekt-znacznik-reczne { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-bd); }
.subiekt-znacznik-odczyt { background: var(--ai-bg); color: var(--ai-tx); border-color: var(--ai-bd); }

.subiekt-para {
  margin: 0 0 .5rem; font-size: var(--fs-md); color: var(--tekst-mocny);
}
.subiekt-lista { list-style: none; margin: 0 0 .4rem; padding: 0;
  display: flex; flex-direction: column; gap: .25rem; }
.subiekt-lista li {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .35rem .5rem; border-radius: 8px; background: var(--surface-2);
  border-left: 3px solid var(--brand);
}
.subiekt-symbol {
  font-size: var(--fs-micro); font-weight: 800; padding: .08rem .4rem;
  border-radius: 999px; background: var(--pigulka); color: #fff;
}
.subiekt-kwota { margin-left: auto; font-weight: 800; color: var(--tekst-mocny); }

/* Propozycja automatu - przerywana ramka, jak przy hipotezie powodu decyzji. */
.subiekt-propozycja {
  margin: .3rem 0 .6rem; padding: .6rem .7rem;
  border: 1px dashed var(--ai-bd); border-radius: 10px; background: var(--ai-bg);
}
.subiekt-propozycja-glowa { display: flex; gap: .4rem; margin: 0 0 .3rem; }
.subiekt-propozycja-zdanie {
  margin: 0 0 .3rem; font-size: var(--fs-md); color: var(--tekst-mocny);
}
.subiekt-nota { margin: 0 0 .5rem; font-size: var(--fs-base); color: var(--muted); }

.subiekt-form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .3rem 0 0; }
.subiekt-etykieta { flex: 1 1 100%; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.subiekt-pole {
  flex: 1 1 14rem; min-width: 0; max-width: 26rem; padding: .4rem .5rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-base);
}
.subiekt-pole:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Przycisk nie moze zniknac na dol wiersza, gdy select rosnie - stale
   miejsce, select oddaje pierwszenstwo. */
.subiekt-form .btn-small { flex: 0 0 auto; }
.subiekt-form .pole-z-lista-globalna { flex: 1 1 14rem; max-width: 26rem; }

/* Kasowanie klienta w Ofertowaniu - celowo osobno od paska nawigacji nad
   nim (Wroc / Karta klienta), zeby akcja niszczaca nie wygladala jak
   trzecia pozycja tej samej rodziny przyciskow. */
/* Gdy klient nie ma inwestycji, formularz stoi sam pod naglowkiem - wtedy
   potrzebuje odstepu. Gdy stoi w rzedzie obok "Nowa oferta" (typowy
   przypadek), .inw-usun-w-rzedzie zeruje ten odstep, zeby nie odrywac
   guzika od reszty rzedu (byl przez to "rozjechany" wzgledem sasiada). */
.oferty-klient-usun { display: flex; margin: -.6rem 0 1.4rem; }
.inw-usun-w-rzedzie.oferty-klient-usun { margin: 0; }

/* Formularz "dodaj material": .btn-small ma na stale 30px wysokosci, a
   sasiednie pola (etykieta + input) sa wyzsze - przycisk mial wyglada na
   przycietego. Wyrownanie do dolu jest OK, ale sama wysokosc guzika ma
   dogonic pole, przy ktorym stoi. */
.inw-material-form {
  display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end;
}
.inw-material-form .btn-small { height: 2.6rem; }

/* ============================================================
   PRODUKCJA I HARMONOGRAM - wiecej faktow w wierszu, wyrazniejsze kafle
   ============================================================ */

/* ---------- Produkcja: brygada mistrza ---------- */
.prod-blok-brygada { border-left: 3px solid var(--brand); }
.prod-brygada {
  list-style: none; margin: .3rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.prod-brygada-os {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .6rem .3rem .35rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
/* Inicjaly zamiast awatara - przy kilkunastu osobach wzrok trafia w kolko
   szybciej niz w nazwisko. */
.prod-brygada-ini {
  flex: none; display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; font-size: var(--fs-micro); font-weight: 800;
}
.prod-brygada-imie { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.prod-brygada-rola {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: .05rem .35rem; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-bd);
}
/* Ludzie bez przypisanego przelozonego - to nie jest ozdoba, tylko dziura
   w organizacji: nikt nie wie, kto ich rozlicza. */
.prod-brygada-braki {
  margin: .5rem 0 0; padding: .45rem .6rem; border-radius: 8px;
  background: var(--warn-bg); border: 1px solid var(--warn-bd);
  color: var(--warn-tx); font-size: var(--fs-sm); line-height: 1.45;
}

/* ---------- Produkcja: zlecenia ---------- */
.prod-tel { color: var(--brand); font-weight: 700; text-decoration: none;
  border-bottom: 1px dashed currentColor; }
.prod-tel:hover { color: var(--brand-dark); }
.prod-znak-stoi {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: .06rem .4rem; border-radius: 999px;
  background: var(--stal-bg); color: var(--stal-tx); border: 1px solid var(--stal-bd);
}
.prod-znak-alarm {
  display: inline-block; margin-left: .3rem;
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: .06rem .4rem; border-radius: 999px;
  background: var(--danger-bg); color: var(--danger-tx); border: 1px solid var(--danger-bd);
}

/* ---------- Harmonogram: kafle stanu ---------- */
.harm-stan-procent {
  font-size: var(--fs-base); font-weight: 800; color: var(--muted);
  margin-left: .25rem;
}
/* Pasek pokrycia planem - liczba „82 z 185" nie mowi tego, co widac na pasku. */
.harm-stan-pasek {
  display: block; height: .4rem; margin: .35rem 0 .3rem;
  border-radius: 999px; background: var(--stal-bd); overflow: hidden;
}
.harm-stan-pasek-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #16a34a, #22c55e);
}
.harm-stan-uwaga .harm-stan-pasek-fill {
  background: linear-gradient(90deg, var(--brand-dark), var(--brand));
}
.harm-stan-uwaga { border-color: var(--warn-bd); }
.harm-stan-alarm { border-color: var(--danger-bd); }
.harm-stan-alarm .harm-stan-val { color: var(--danger-tx); }

@media (max-width: 720px) {
  .prod-brygada-os { flex: 1 1 100%; }
}

/* ---------- sekcje Produkcji: wstega w kolorze i powietrze ---------- */
.prod-sekcja { position: relative; overflow: hidden; padding-top: 1rem; }
/* Cienka wstega u gory panelu mowi, ktora to sekcja - alarm, robota, notatki.
   Ten sam chwyt, co przy sekcjach Tablicy zadan. */
.prod-sekcja::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
}
.prod-sekcja-pilne::before { background: var(--danger-tx); }
.prod-sekcja-robota::before { background: var(--brand); }
.prod-sekcja-przypomnienia::before { background: #8b5cf6; }
.prod-sekcja-opis {
  margin: .1rem 0 .8rem; font-size: var(--fs-base); color: var(--muted);
  line-height: 1.45;
}
/* Ikona przy tytule sekcji - dotad tytuly byly samym tekstem i wszystkie
   trzy wygladaly tak samo wazne. */
.dash-section-title svg { width: 1rem; height: 1rem; vertical-align: -2px;
  margin-right: .35rem; opacity: .75; }

/* Bloki wewnatrz sekcji dostaja wyrazniejszy naglowek i wiecej odstepu. */
.prod-blok { margin-top: .9rem; padding-top: .2rem; }
.proj-blok-tytul { font-size: var(--fs-md); font-weight: 800; color: var(--tekst-mocny); }
.proj-blok-glowa {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding-bottom: .35rem; margin-bottom: .45rem;
  border-bottom: 1px solid var(--border);
}
.proj-blok-kto { font-size: var(--fs-sm); color: var(--muted); }

/* ---------- Harmonogram: kafle stanu ---------- */
.harm-stan-firmy { gap: .7rem; }
.harm-stan-kafel {
  border-radius: 14px; padding: .8rem .95rem;
  transition: border-color .12s ease, transform .12s ease;
}
.harm-stan-kafel:hover { transform: translateY(-2px); }
.harm-stan-val { font-size: var(--fs-xl); }
.harm-stan-lab { font-size: var(--fs-base); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .harm-stan-kafel:hover { transform: none; }
}

/* ============================================================
   KARTA PRACY - sekcje pod wpisami
   ------------------------------------------------------------
   Karta papierowa konczyla sie na wierszach. Ta ma jeszcze powiedziec, co
   z tego wyszlo: na czym zszedl czas i gdzie sie bywalo. Liczby sa z wpisow,
   nie z szacunku - rodzaj roboty wybiera sie z listy wlasnie po to.
   Kolory wylacznie ze zmiennych motywu.
   ============================================================ */
.kp-rozbicie { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.kp-rozbicie-poz {
  display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr auto;
  align-items: center; gap: .75rem;
}
.kp-rozbicie-nazwa { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.kp-rozbicie-pasek {
  height: 10px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); overflow: hidden;
}
.kp-rozbicie-pasek > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark));
}
.kp-rozbicie-godz { font-size: var(--fs-base); font-weight: 700; color: var(--tekst-mocny);
  white-space: nowrap; }

.kp-miejsca { display: flex; flex-wrap: wrap; gap: .4rem; }
.kp-miejsce {
  font-size: var(--fs-sm); padding: .2rem .6rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
@media (max-width: 700px) {
  .kp-rozbicie-poz { grid-template-columns: 1fr auto; }
  .kp-rozbicie-pasek { grid-column: 1 / -1; }
}

/* ============================================================
   ZESPOL W GRUPACH WEDLUG ROLI
   ------------------------------------------------------------
   Grupy ida od najszerszego dostepu do najwezszego, w tej samej kolejnosci,
   co w panelu kont - oba ekrany maja sie czytac tak samo. Kolor znacznika
   bierze sie z gotowych klas `konta-p-*`, wiec rola ma ten sam kolor tutaj
   i przy wyborze poziomu.
   ============================================================ */
.zesp-grupa { margin-bottom: 1.4rem; }
.zesp-grupa-glowa { display: grid; grid-template-columns: 6px 1fr; gap: .75rem;
  align-items: start; margin-bottom: .5rem; }
.zesp-znacznik { grid-row: 1 / span 2; width: 6px; height: 100%; min-height: 2.4rem;
  border-radius: 999px; background: var(--pigulka); }
.zesp-grupa-tytul { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.zesp-grupa-tytul b { font-size: var(--fs-md); color: var(--tekst-mocny); }
.zesp-grupa-licznik {
  font-size: var(--fs-sm); font-weight: 700; padding: .05rem .5rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.zesp-grupa-godz { font-size: var(--fs-sm); color: var(--muted); }
.zesp-grupa-opis { grid-column: 2; margin: 0; font-size: var(--fs-sm); color: var(--muted);
  line-height: 1.45; }
/* Konto jeszcze wylaczone: osoba w zespole JEST, tylko nie moze sie zalogowac.
   Przygaszamy wiersz, ale go nie chowamy - to wlasnie ta lista mowi, ile kont
   zostalo do wlaczenia. */
.zesp-nieaktywny { opacity: .62; }
.zesp-nieaktywny:hover { opacity: 1; }
.zesp-grupa-czeka {
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  padding: .05rem .5rem; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-bd);
}

/* ============================================================
   KONTA W SEKCJACH RANG + WEJSCIOWKA PRACOWNIKA
   ------------------------------------------------------------
   Karta konta ma ksztalt elektronicznej wejsciowki - tej, ktora odbija sie
   przy wejsciu do firmy: nadruk z nazwa firmy i ranga u gory, zdjecie
   (tu: inicjaly) obok nazwiska, dane w rubrykach i pasek stanu na dole,
   jak dioda na czytniku. Wszystko, co sie na koncie ROBI, otwiera przycisk
   na dole - w oknie na srodku ekranu, tak samo jak karta pojazdu we Flocie.
   Kolory rang biora sie z gotowych klas `konta-p-*`, wiec ranga ma ten sam
   kolor tutaj, w zespole i przy wyborze poziomu.
   ============================================================ */
/* Sekcja OBEJMUJE karty, a nie stoi nad nimi jako maly naglowek: rama
   w kolorze rangi i wspolne tlo mowia, dokad te kartki naleza. */
.ranga-sekcja { margin-bottom: 1.4rem; padding: .9rem 1rem 1rem; border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border); border-top: 4px solid var(--poziom, var(--pigulka)); }
.ranga-glowa { margin-bottom: .9rem; }
.ranga-tytul { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ranga-tytul b { font-size: var(--fs-md); color: var(--tekst-mocny); }
.ranga-licznik { font-size: var(--fs-sm); font-weight: 700; padding: .05rem .5rem;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); }
.ranga-opis { grid-column: 2; margin: 0; font-size: var(--fs-sm); color: var(--muted);
  line-height: 1.45; }
.ranga-pusto { grid-column: 1 / -1; margin: 0; padding: .7rem .9rem; border-radius: 10px;
  background: var(--surface-2); border: 1px dashed var(--border);
  font-size: var(--fs-sm); color: var(--muted); }

/* Siatka wejsciowek: CZTERY w rzedzie na stale, a nie tyle, ile sie zmiesci.
   Przy `auto-fill` sekcja z szescioma osobami lamala sie w przypadkowym
   miejscu i kazda ranga wygladala inaczej. Kartka jest przez to szersza,
   a przy szerszej kartce tresc miesci sie w dwoch kolumnach zamiast jednej
   dlugiej kolumny - i cala sekcja zajmuje o polowe mniej wysokosci. */
.wejsciowki { display: grid; gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wejsciowka {
  /* Kazda kartka to zamkniety kawalek: przegladarka nie przelicza ukladu
     calej siatki, gdy zmienia sie jedna z nich, i moze pominac rysowanie
     tych poza ekranem. Przy kilkunastu kartach widac to na przewijaniu. */
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: auto 16rem;
  display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(2, 8, 23, .08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wejsciowka:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2, 8, 23, .14); }
/* Nadruk u gory - w kolorze rangi, bo to jest pierwsza rzecz widoczna
   z odleglosci ramienia, dokladnie jak na prawdziwej wejsciowce. */
.wejsciowka-pasek {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .85rem; background: var(--poziom, var(--pigulka));
}
/* Pismo na nadruku bierze kolor z rangi (`--poziom-pismo`), bo czesc rang ma
   jasne tlo - biale litery na jasnym bursztynie znikaly. */
.wejsciowka-firma { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .18em;
  color: var(--poziom-pismo, #fff); }
/* Konto z siedmioma poziomami ma napis dluzszy niz nadruk - przycinamy go
   wielokropkiem zamiast pozwalac mu wyjsc poza karte. Pelna lista poziomow
   jest w karcie pracownika. */
.wejsciowka-ranga { font-size: var(--fs-sm); font-weight: 700;
  color: var(--poziom-pismo, #fff);
  background: rgba(0, 0, 0, .16); border-radius: 999px; padding: .05rem .55rem;
  white-space: nowrap; max-width: 62%; overflow: hidden; text-overflow: ellipsis; }
/* CALA tresc karty na pol: po lewej kto to jest i czy wejsciowka dziala,
   po prawej rubryki z liczbami. Wczesniej stan i godziny szly przez cala
   szerokosc jeden pasek pod drugim i karta rosla w pionie bez potrzeby. */
.wejsciowka-srodek { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0 .5rem;
  align-items: start; flex: 1; }
.wejsciowka-lewo { display: flex; flex-direction: column; gap: .5rem;
  padding: .9rem .2rem .8rem .95rem; }
.wejsciowka-tresc { display: flex; align-items: center; gap: .7rem; }
.wejsciowka-foto {
  display: grid; place-items: center; flex-shrink: 0; width: 58px; height: 58px;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--fs-lg); font-weight: 800; color: var(--tekst-mocny);
}
.wejsciowka-kto { display: flex; flex-direction: column; min-width: 0; }
.wejsciowka-imie { font-size: var(--fs-md); color: var(--tekst-mocny); line-height: 1.25; }
/* Login i adres jedna linia z wielokropkiem, a nie lamane w polowie slowa
   ("artur.wiertel@water / m.pl") - na wejsciowce liczy sie ksztalt, a pelny
   adres i tak jest w karcie pod przyciskiem. */
.wejsciowka-login, .wejsciowka-mail { font-size: var(--fs-sm); color: var(--muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wejsciowka-imie { overflow: hidden; text-overflow: ellipsis; }
/* Nazwisko pod imieniem, nie obok - wlasna linia, ten sam wyglad, tylko
   nizej. */
.wejsciowka-nazwisko { display: block; overflow: hidden; text-overflow: ellipsis; }
/* Rubryki jak na dokumencie: etykieta wersalikami, wartosc pod nia. */
.wejsciowka-dane { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .6rem;
  margin: 0; padding: .9rem .95rem .8rem .2rem;
  border-left: 1px dashed var(--border); }
.wejsciowka-dane dt { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.wejsciowka-dane dd { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  min-width: 0; overflow-wrap: anywhere; }
/* Bez `min-width: 0` komorka siatki nie kurczy sie ponizej swojej tresci -
   dlugi adres albo dwuczlonowe nazwisko rozpychalo wtedy cala rubryke i napisy
   wychodzily poza kartke. */
.wejsciowka-dane > div { min-width: 0; }
.wejsciowka-dane dt { min-width: 0; overflow-wrap: anywhere; }
.wejsciowka-kto { min-width: 0; }
.wejsciowka-lewo, .wejsciowka-tresc { min-width: 0; }
.wejsciowka-stan { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  margin-top: auto; }
.wejsciowka-btn { margin: .6rem .85rem .85rem; }
/* Konto wylaczone - wejsciowka, ktora nie otworzy drzwi. */
.wejsciowka-wylaczona { opacity: .68; }
.wejsciowka-wylaczona:hover { opacity: 1; }
/* Ponizej pelnego ekranu schodzimy po jednej kolumnie naraz - kartka ma
   zostac czytelna, a nie scisnac sie do paska. */
@media (max-width: 1500px) { .wejsciowki { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1150px) { .wejsciowki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  {
  .wejsciowki { grid-template-columns: 1fr; }
  .wejsciowka-srodek { grid-template-columns: 1fr; }
  .wejsciowka-tresc { padding: .8rem .85rem .3rem; }
  .wejsciowka-dane { padding: 0 .85rem .6rem; }
}

/* --- Nawigacja po rangach + wyszukiwarka nad kartami ---------------------- */
/* Przy kilkunastu osobach pierwsze pytanie brzmi „gdzie jest ta jedna",
   a nie „kto tu w ogole jest" - stad skoki do rang i szukanie po nazwisku
   NAD kartami, a nie pod nimi. */
.konta-nawigacja { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.konta-skoki { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Wlasny wyglad pigulek, a NIE `.zd-filtr` z zadania.css - tamten arkusz nie
   jest wczytywany na tej zakladce, wiec skoki wygladaly jak goly tekst. */
.konta-skoki a {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-base); font-weight: 600; padding: .32rem .7rem;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); text-decoration: none;
  white-space: nowrap;
}
.konta-skoki a:hover { border-color: var(--brand); color: var(--brand); }
.konta-skoki a:target, .konta-skoki a:focus-visible { outline: 2px solid var(--brand-light);
  outline-offset: 2px; }
.konta-skoki .zd-filtr-licznik {
  font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
  background: var(--surface-2); border-radius: 999px; padding: 0 .4rem;
}
.konta-szukaj {
  display: flex; align-items: center; gap: .5rem;
  padding: .1rem .8rem; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  max-width: 34rem;
}
.konta-szukaj svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.konta-szukaj input {
  flex: 1; min-width: 0; height: 34px; border: 0; background: none;
  color: var(--text); font: inherit; font-size: var(--fs-base); outline: none;
}
.konta-szukaj:focus-within { border-color: var(--brand); }
.konta-pusto-szukanie { margin: 0; font-size: var(--fs-base); color: var(--muted); }

/* Liczby z karty pracy na wejsciowce - wiersz nad przyciskami. */
.wejsciowka-praca {
  display: flex; gap: .9rem; flex-wrap: wrap;
  padding: .45rem .85rem; border-top: 1px dashed var(--border);
  font-size: var(--fs-sm); color: var(--muted);
}
.wejsciowka-praca b { color: var(--tekst-mocny); }
.wejsciowka-akcje { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
  margin: 0; padding: .6rem .95rem .8rem; border-top: 1px solid var(--border);
  background: var(--surface-2); }
.wejsciowka-akcje .btn-small { width: 100%; }
@media (max-width: 760px) {
  .wejsciowka-akcje { grid-template-columns: 1fr; }
}

/* --- Kafel „Dodaj pracownika" i puste rangi ------------------------------- */
/* Puste miejsce w rzedzie to najlepszy moment na „dodaj kogos tutaj": ranga
   jest juz wybrana, wiec zakladanie konta zaczyna sie od nazwiska. */
.wejsciowka-dodaj {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; min-height: 12rem; padding: 1rem;
  border: 1.5px dashed var(--border); border-radius: 14px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: var(--fs-base); text-align: center; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.wejsciowka-dodaj b { font-size: var(--fs-md); color: var(--text); }
.wejsciowka-dodaj:hover { border-color: var(--brand); color: var(--brand); background: var(--surface); }
.wejsciowka-dodaj:hover b { color: var(--brand); }
.wejsciowka-dodaj-znak {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--fs-lg); font-weight: 800; line-height: 1;
}
.ranga-pusto {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin: 0; padding: .9rem 1rem; border-radius: 10px;
  background: var(--surface); border: 1px dashed var(--border);
}
.ranga-pusto b { color: var(--tekst-mocny); font-size: var(--fs-base); }
.ranga-pusto p { margin: .1rem 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* Formularz zakladania konta w oknie karty. */
.konto-nowy-form { display: grid; gap: .7rem; }
.konto-nowy-form label { display: grid; gap: .25rem; font-size: var(--fs-sm);
  font-weight: 600; color: var(--text); }
.konto-nowy-form input[type="text"], .konto-nowy-form input[type="email"] {
  padding: .5rem .65rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-md);
  /* POLA ROSLY PRZY PISANIU (zgloszenie 29.08.2026): „Login" i „Adres e-mail"
     rozpychaly sie po kliknieciu i cala karta konta sie rozjezdzala. Puste
     `<input>` ma wlasna szerokosc wewnetrzna (domyslnie ~20 znakow), a kolumna
     siatki ma `min-width: auto` - czyli nie moze zwezic sie ponizej tresci
     pola. Dluzszy adres rozpychal wiec kolumne, a z nia formularz i karte.
     `width: 100%` + `min-width: 0` nizej wiazą pole z kolumna, a nie odwrotnie:
     to siatka mowi, ile pole ma miejsca, a pisanie niczego nie rozciaga. */
  width: 100%; min-width: 0;
}
.konto-nowy-form label, .konto-nowy-dwa > label { min-width: 0; }
.konto-nowy-dwa { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; min-width: 0; }
.konto-nowy-aktywne { display: flex !important; align-items: center; gap: .5rem;
  font-weight: 500; color: var(--muted); }
.konto-nowy-aktywne input { width: 16px; height: 16px; }
@media (max-width: 620px) { .konto-nowy-dwa { grid-template-columns: 1fr; } }

/* SZUKANIE NIE DZIALALO przez ten jeden brak: `[hidden]` to w przegladarce
   `display: none` z arkusza domyslnego, a `.wejsciowka` ustawia `display: flex`
   - wlasna regula wygrywa, wiec karta z ustawionym `hidden` dalej byla widoczna
   i filtr wygladal na zepsuty. Tu mowimy to wprost. */
.wejsciowka[hidden],
.ranga-sekcja[hidden],
.wejsciowka-dodaj[hidden] { display: none !important; }

/* ============================================================
   POLE WYBORU - JEDEN WYGLAD W CALEJ APLIKACJI
   ------------------------------------------------------------
   Natywny <select> wyglada inaczej w kazdej przegladarce i w kazdym motywie:
   szary prostokat z systemowa strzalka, obok naszych zaokraglonych pol
   i przyciskow. Wystepuje w kilkunastu miejscach (przelozony w karcie
   pracownika, opiekun oferty, rodzaj wpisu, magazyn, status oferty...), wiec
   dostaje wspolny wyglad tutaj, a nie osobna regule przy kazdym ekranie.

   Wielokrotny wybor (<select multiple>) ZOSTAJE listą do zaznaczania - tylko
   ubrana w te sama ramke; strzalka i staly wzrost sa wtedy niepotrzebne.
   ============================================================ */
select:not([multiple]):not(.ust-select):not(.konta-wybor select) {
  appearance: none; -webkit-appearance: none;
  padding: .45rem 2rem .45rem .7rem; border-radius: 9px;
  border: 1px solid var(--border); background-color: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-base); line-height: 1.3; cursor: pointer;
  /* Strzalka rysowana tlem - jedna, ta sama, niezalezna od systemu. */
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 1rem center, right .8rem center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: border-color .15s ease, box-shadow .15s ease;
}
select:not([multiple]):hover { border-color: var(--muted); }
select:not([multiple]):focus-visible {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
select:disabled { opacity: .55; cursor: default; }
/* Lista rozwijana malowana przez system - bez tego w ciemnym motywie
   wyskakiwala biala na czarnym ekranie. */
select option { background: var(--surface); color: var(--text); }

select[multiple] {
  padding: .35rem; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit;
  font-size: var(--fs-base); min-height: 8rem;
}
select[multiple]:focus-visible {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
select[multiple] option { padding: .25rem .45rem; border-radius: 6px; }
select[multiple] option:checked {
  background: color-mix(in srgb, var(--brand) 22%, var(--surface));
  color: var(--tekst-mocny); font-weight: 600;
}

/* --- Modyfikacja danych konta: tryb edycji ma wygladac inaczej ------------- */
/* Dopoki blok jest zwiniety, widac same dane. Po rozwinieciu robi sie zolty
   i mowi wprost, ze teraz sie PISZE, a nie oglada - przy siedmiu formularzach
   w jednym oknie latwo zmienic nie to, co sie chcialo. */
.konto-edycja > summary {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  cursor: pointer; list-style: none;
}
.konto-edycja > summary::-webkit-details-marker { display: none; }
.konto-edycja > summary::marker { content: ""; }
.konto-edycja-podglad {
  flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.konto-edycja-przycisk { pointer-events: none; }   /* klika sie caly naglowek */
/* Strzalka pokazujaca, ze caly naglowek jest klikalny (zwija/rozwija) -
   w dol, gdy zwiniete, w gore po rozwinieciu. Ten sam obrot, co przy
   rozwijanych listach (.pole-ikona-lista). */
.konto-edycja-strzalka { display: inline-flex; margin-left: .2rem; }
.konto-edycja-strzalka svg { width: 12px; height: 12px; transform: rotate(90deg); transition: transform .15s ease; }
.konto-edycja[open] .konto-edycja-strzalka svg { transform: rotate(270deg); }
.konto-edycja[open] {
  background: var(--warn-bg); border-color: var(--warn-bd);
  box-shadow: inset 3px 0 0 var(--warn-tx);
}
.konto-edycja[open] > summary .konto-blok-label { color: var(--warn-tx); }
.konto-edycja[open] .konto-edycja-podglad { display: none; }
.konto-edycja-form { margin-top: .7rem; }

/* ============================================================
   KARTA PRACOWNIKA - RYTM I PISMO
   ------------------------------------------------------------
   Blokow w karcie jest siedem (dane, poziomy, dostep, haslo, brygada,
   przelozony, usuniecie) i kazdy urosl osobno: inne odstepy nad przyciskiem
   i pod nim, przypisy raz mniejsze raz wieksze, pogrubienia na wszystkim -
   od etykiety po opis. Tutaj sprowadzamy to do jednej miary.

   ZASADA PISMA: pogrubione jest to, co niesie tresc decyzji - naglowek bloku,
   nazwisko, przycisk. Opisy, przypisy i etykiety pol ida normalna grubosca.
   ============================================================ */
.veh-modal-body .konto-blok { margin: .8rem 0; padding: .9rem; }
.veh-modal-body .konto-blok:first-child { margin-top: 0; }
.veh-modal-body .konto-blok:last-child { margin-bottom: 0; }

/* KARTA KONTA NA WLASNEJ PODSTRONIE (08.09.2026). Ta sama tresc, co dotad
   w oknie na srodku ekranu, tylko rozlozona na calej szerokosci prostokata:
   bloki maja wiecej powietrza, bo nie walcza juz o miejsce w malym okienku,
   a naglowek karty nie powtarza tytulu z prostokata wyzej. */
.konto-strona .konto-karta-glowa { display: none; }
.konto-strona .konto-blok { margin: 1rem 0; padding: 1rem 1.1rem; }
.konto-strona .konto-blok:first-child { margin-top: 0; }
.konto-strona .konto-blok:last-child { margin-bottom: 0; }
/* Rubryki i plakietki pod blokami - jak w karcie pojazdu: kreska nad nimi
   mowi, ze konczy sie to, co sie ZMIENIA, a zaczyna to, co sie CZYTA. */
.konto-strona .fleet-facts {
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
/* Powrot pod karta - siedem blokow to za duzo, zeby wracac na sama gore. */
.konto-strona-stopka {
  display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .4rem;
}

/* Jeden odstep miedzy wszystkim, co stoi w bloku jedno pod drugim. */
.konto-blok > * + * { margin-top: .6rem; }
.konto-blok-label { margin-bottom: 0; }
.konta-akcje-karta { gap: .5rem; }

/* Przypis pod przyciskami: ten sam rozmiar we wszystkich blokach (byl raz
   micro, raz sm) i bez pogrubien - to jest wyjasnienie, nie decyzja. */
.konto-blok .fleet-doc-note {
  margin: 0; font-size: var(--fs-sm); font-weight: 400; line-height: 1.5;
  color: var(--muted);
}
.konto-blok .fleet-doc-note b { font-weight: 600; color: var(--text); }

/* Etykiety pol formularza - czytelne, ale nie krzyczace. Grubosc zostawiamy
   przyciskom i nazwiskom. */
.konto-nowy-form label { font-weight: 500; color: var(--muted); }
.konto-nowy-form label input { font-weight: 500; color: var(--text); }
.konto-nowy-form > * + * { margin-top: 0; }
.konto-nowy-form { gap: .6rem; }
.konto-nowy-form .btn-small { justify-self: start; }

/* Pigulki poziomow: rowny odstep i jedna wysokosc, zeby rzad nie falowal. */
.konta-poziomy { display: flex; flex-wrap: wrap; gap: .4rem; border: 0; margin: 0; padding: 0; }
.konta-poziom-opcja { min-height: 26px; }

/* --- Alarm swiezosci danych na pulpicie ------------------------------------ */
.dash-nieswieze-lista { margin: .4rem 0 .5rem; padding-left: 1.2rem; line-height: 1.6; }
.alert-link { font-weight: 700; text-decoration: underline; color: inherit; }

/* --- Nawigator sekcji pod hero (wstrzykiwany z shell.html) ----------------- */
.sekcje-nawigacja {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: -.4rem 0 1.4rem; padding: .7rem .9rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.sekcje-nawigacja a {
  font-size: var(--fs-base); font-weight: 600; padding: .32rem .7rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  text-decoration: none; white-space: nowrap; transition: border-color .15s ease, color .15s ease;
}
.sekcje-nawigacja a:hover { border-color: var(--brand); color: var(--brand); }
/* Na laptopie te same sekcje niesie pasek boczny (`.nav-podsekcje`), wiec ten
   pasek stalby na ekranie jako ta sama lista drugi raz. Zostaje na telefonie,
   gdzie pasek boczny jest schowany za przyciskiem menu - prog 760 px jest ten
   sam, na ktorym pasek boczny znika. */
@media (min-width: 761px) { .sekcje-nawigacja { display: none; } }

/* --- Sekcje otwartej strony pod aktywna zakladka (wstrzykiwane z shell.html) ---
   SZYNA, KTORA COS ZNACZY. Pionowa kreska po lewej nie jest ozdoba ani samym
   wcieciem: to ta strona w miniaturze, ulozona tak samo - z gory na dol.
   Odcinek nad kropka „jestes tutaj" jest WYPELNIONY kolorem marki, reszta
   zostaje przygaszona, wiec katem oka widac nie tylko ktora sekcja, ale i jak
   gleboko w stronie sie jest. To jedyna rzecz, na ktora pozwalamy sobie tu
   z kolorem - reszta spisu ma byc cicha, bo to pasek nawigacji, a nie ekran.

   Kazda pozycja rysuje WLASNY odcinek szyny (`::before`), a nie jedna wspolna
   ramka na liscie - inaczej nie dalo by sie pokolorowac samej przebytej czesci.
   Hierarchia wzgledem zakladki wyzej idzie waga pisma i kolorem, nie rozmiarem:
   pozycje sa tej samej wielkosci co zakladki, ale lzejsze i przygaszone. */
.nav-podsekcje {
  display: flex; flex-direction: column;
  margin: .4rem 0 .5rem 1.2rem;
}
.nav-podsekcja {
  position: relative;
  display: flex; align-items: center; gap: .5rem;
  /* Wieksze wciecie z lewej (prosba 30.08.2026): tekst odsuniety od szyny,
     zeby kropka miala wlasne miejsce i nie dotykala pierwszej litery. */
  padding: .42rem .55rem .42rem 1.5rem;
  border-radius: 8px;
  font-size: var(--fs-base); font-weight: 500; line-height: 1.35;
  color: rgba(255, 255, 255, .72); text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}
/* Nazwa sekcji lamie sie MIEDZY SLOWAMI - nigdy w srodku slowa i nigdy
   z myslnikiem (prosba 30.08.2026). Przegladarka dzielila dlugie nazwy na
   sylaby („Najlepiej sprzeda-jace sie"), a spis nawigacji ma sie czytac
   jednym rzutem oka, nie literowac. Nazwy sa krotkie z zalozenia:
   `watermSekcje` przepuszcza tylko naglowki do 40 znakow. */
.nav-podsekcja-nazwa {
  min-width: 0;
  hyphens: none; -webkit-hyphens: none;
  overflow-wrap: normal; word-break: normal;
}
/* Odcinek szyny nalezacy do tej pozycji. Pierwszy i ostatni sa przyciete
   i zaokraglone, zeby szyna nie wbijala sie w zakladke nad soba ani nie
   wisiala w powietrzu pod ostatnia sekcja. */
.nav-podsekcja::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: rgba(255, 255, 255, .13);
  transition: background-color .18s ease;
}
.nav-podsekcja:first-child::before { top: .34rem; border-radius: 2px 2px 0 0; }
.nav-podsekcja:last-child::before { bottom: .34rem; border-radius: 0 0 2px 2px; }
/* Przebyta czesc strony - do kropki „jestes tutaj" wlacznie. */
.nav-podsekcja.minieta::before,
.nav-podsekcja.jest-tu::before { background: var(--brand); }
/* Przy pozycji biezacej odcinek gasnie ku dolowi: kolor konczy sie tam, gdzie
   konczy sie to, co juz przewinieto. */
.nav-podsekcja.jest-tu::before {
  background: linear-gradient(180deg, var(--brand) 45%, rgba(255, 255, 255, .13) 100%);
}

/* Kropka - punkt na mapie strony. Siedzi DOKLADNIE na szynie i przerywa ja
   obwodka w kolorze paska, wiec czyta sie jako znacznik na linii, a nie jako
   punktor listy. */
.nav-podsekcja-znak {
  position: absolute; left: -2.5px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 999px; background: rgba(255, 255, 255, .26);
  box-shadow: 0 0 0 3px var(--navy);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.nav-podsekcja.minieta .nav-podsekcja-znak { background: rgba(238, 110, 27, .65); }

.nav-podsekcja:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-podsekcja:hover .nav-podsekcja-znak { background: rgba(255, 255, 255, .55); }
.nav-podsekcja:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 1px; color: #fff;
}

/* JESTES TUTAJ. Bialy tekst, grubsza waga i kropka, ktora rosnie i dostaje
   miekka poswiate - tyle wystarczy. Bez ramki i bez wyrozniajacego tla:
   szyna po lewej mowi juz, gdzie jestesmy, a drugi sygnal o tym samym tylko
   halasowalby w waskim pasku. */
.nav-podsekcja.jest-tu { color: #fff; font-weight: 700; }
.nav-podsekcja.jest-tu .nav-podsekcja-znak {
  background: var(--brand); transform: scale(1.5);
  box-shadow: 0 0 0 3px var(--navy), 0 0 10px 2px rgba(238, 110, 27, .55);
}

/* Spis nalezy do zakladki, ktora wlasnie sie otworzyla, wiec i pojawia sie
   razem z nia - kolejno od gory, w tempie, ktore widac, ale nie kaze czekac. */
@media (prefers-reduced-motion: no-preference) {
  .nav-podsekcja {
    animation: podsekcja-wejscie .24s ease-out backwards;
    animation-delay: calc(var(--kolejnosc, 0) * 22ms);
  }
}
@keyframes podsekcja-wejscie {
  from { opacity: 0; transform: translateX(-5px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-podsekcja, .nav-podsekcja-znak, .nav-podsekcja::before { transition: none; }
}

/* ============ STRUKTURA ZESPOLU (Pracownicy -> kto pod kogo podlega) ============
   DRZEWO GENEALOGICZNE: korzen na gorze, dzieci rozchodza sie w bok pod
   rodzicem, polaczone pionem i poprzeczka. Klasyczny uklad z <ul>/<li>, gdzie
   wszystkie kreski rysuja pseudoelementy - w HTML nie ma ani jednego znacznika
   sluzacego wylacznie do rysowania.

   Jak powstaja kreski (to jest cala sztuczka, wiec warto ja opisac):
     - kazde <li> dostaje gorny odstep i dwie polowki poprzeczki: ::before to
       polowa biegnaca w LEWO od srodka karty, ::after to polowa w PRAWO;
     - pierwszemu dziecku kasujemy lewa polowke, ostatniemu prawa - dzieki temu
       poprzeczka konczy sie dokladnie nad skrajnymi kartami, a nie wystaje
       w pustke;
     - jedynak nie dostaje poprzeczki wcale, tylko prosty pion;
     - <ul> z dziecmi ma wlasny pion wychodzacy spod karty rodzica.
   Wszystko liczone w procentach od srodka karty, wiec dziala niezaleznie od
   tego, ile dzieci ma dany wezel i jak szerokie sa karty. */
.hier-plansza {
  position: relative;
  padding: 1.4rem 1rem 1.5rem; border-radius: 16px;
  /* Drzewo rozchodzi sie w bok, wiec przy szerokiej brygadzie musi miec wlasny
     poziomy suwak. Bez tego rozpychalo by cala strone i to ONA jezdzilaby
     w bok razem z menu. */
  overflow-x: auto; overflow-y: hidden;
}
.hier-tlo {
  position: absolute; inset: auto auto -40% -10%; width: 55%; height: 150%;
  background: radial-gradient(circle, rgba(238, 110, 27, .13), transparent 70%);
  pointer-events: none;
}
.hier-korzen, .hier-galezie {
  display: flex; justify-content: center; align-items: flex-start;
  list-style: none; margin: 0; padding: 0; position: relative;
}
/* Kilka pni obok siebie (Artur i Justyna stoja na rownym szczeblu) - miedzy
   nimi wiekszy odstep, zeby bylo widac, ze to dwa osobne drzewa, a nie
   rodzenstwo pod wspolnym rodzicem. */
.hier-korzen { gap: 2.2rem; min-width: min-content; }
/* ---- SZCZYT JAKO PARA (Artur i Justyna) ----
   Dwie karty obok siebie zlaczone poprzeczka, a spod jej srodka schodzi pion
   do calej reszty firmy - dokladnie jak para w drzewie genealogicznym. Dzieki
   temu widac, ze TB, Celina i reszta podlegaja IM OBOJGU, a nie jednemu
   z nich; pole „Pracuje pod" trzyma jednego przelozonego, ale prawda o firmie
   jest taka, a nie inna. */
.hier-szczyt {
  position: relative; display: flex; flex-direction: column; align-items: center;
  min-width: min-content;
}
.hier-para {
  position: relative; display: flex; align-items: stretch; gap: 2.6rem;
}
.hier-para > .hier-karta { z-index: 1; }

/* ZLACZE POD PARA. Spod kazdej karty schodzi kreska, obie spotykaja sie na
   poprzeczce nizej, a z jej srodka jeden pion idzie do calej reszty firmy.
   Kreski MIEDZY kartami nie ma - Artur i Justyna nie podlegaja sobie
   nawzajem, wiec nic ich nie ma laczyc w poziomie na wysokosci nazwisk.

   Ksztalt „U" to jeden prostokat z trzema krawedziami (lewa, prawa, dolna).
   Boki stoja dokladnie pod SRODKAMI kart, a nie w 25%/75% szerokosci: obie
   karty maja te sama szerokosc, wiec polowa karty od kazdej krawedzi trafia
   w srodek niezaleznie od odstepu miedzy nimi. Przy trzech osobach na
   szczycie „U" objelby skrajne karty - srodkowa zostalaby bez kreski, ale
   dzis zarzad jest dwuosobowy. */
.hier-zlacze {
  position: relative; display: block; width: 100%;
  height: calc(var(--hier-stopien) + var(--hier-stopien));
}
.hier-zlacze::before {
  content: ""; position: absolute; top: 0;
  left: calc(var(--hier-karta-szer) / 2); right: calc(var(--hier-karta-szer) / 2);
  height: var(--hier-stopien);
  border-bottom: 2px solid var(--hier-kreska);
  border-left: 2px solid var(--hier-kreska);
  border-right: 2px solid var(--hier-kreska);
  border-radius: 0 0 10px 10px;
}
/* Pion z poprzeczki w dol - do rzedu z reszta firmy. */
.hier-zlacze::after {
  content: ""; position: absolute; top: var(--hier-stopien); left: 50%;
  transform: translateX(-50%);
  width: 2px; height: var(--hier-stopien); background: var(--hier-kreska);
}
:root { --hier-karta-szer: 10.5rem; --hier-stopien: 1.3rem; }
.hier-podpis {
  margin: .7rem 0 0; font-size: var(--fs-micro); color: var(--muted);
  text-align: center; font-weight: 700;
}
.hier-podpis-osobno {
  margin-top: 1.6rem; padding-top: 1rem; border-top: 1px dashed var(--border);
}
/* Pion spod srodka pary do poprzeczki pierwszego pietra.
   Selektory z `ul` z rozmyslem: nizej w pliku stoja reguly `.hier-korzen >
   .hier-wezel` (kasujace poprzeczke korzeniom) o tej samej specyficznosci -
   przy remisie wygralaby ta pozniejsza, wiec dokladamy element, zeby to
   ustawienie bylo mocniejsze niezaleznie od kolejnosci w pliku. */
ul.hier-korzen-pod-para { position: relative; padding-top: 1.6rem; gap: .55rem; }
ul.hier-korzen-pod-para::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 1.6rem; background: var(--hier-kreska);
}
/* Pod para pierwsze pietro ma juz normalna poprzeczke rodzenstwa. */
ul.hier-korzen-pod-para > .hier-wezel { padding-top: 1.5rem; }
ul.hier-korzen-pod-para > .hier-wezel::before,
ul.hier-korzen-pod-para > .hier-wezel::after { display: block; }
.hier-galezie { gap: .55rem; padding-top: 1.5rem; }
/* Pion wychodzacy spod karty rodzica w strone poprzeczki dzieci. */
.hier-galezie::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 2px; height: 1.5rem; background: var(--hier-kreska);
  transform: translateX(-50%);
}
.hier-wezel {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding-top: 1.5rem; flex: none;
}
/* Korzenie nie maja rodzica, wiec ani poprzeczki, ani odstepu na nia. */
.hier-korzen > .hier-wezel { padding-top: 0; }
.hier-korzen > .hier-wezel::before,
.hier-korzen > .hier-wezel::after { display: none; }
/* Dwie polowki poprzeczki nad karta: lewa i prawa. */
.hier-wezel::before, .hier-wezel::after {
  content: ""; position: absolute; top: 0; width: 50%; height: 1.5rem;
  border-top: 2px solid var(--hier-kreska);
}
.hier-wezel::before { right: 50%; }
.hier-wezel::after  { left: 50%; border-left: 2px solid var(--hier-kreska); }
/* Skrajne dzieci: poprzeczka konczy sie nad nimi zaokraglonym rogiem
   zamiast wystawac w bok. */
.hier-wezel:first-child::before { border: 0; }
.hier-wezel:last-child::after {
  border-top: 0; border-left: 0;
  border-right: 2px solid var(--hier-kreska); border-radius: 0 8px 0 0;
  right: 50%; left: auto;
}
.hier-wezel:first-child::after { border-radius: 8px 0 0 0; }
/* Jedynak - sam pion, bez poprzeczki rozchodzacej sie w boki. */
.hier-wezel:only-child::before { display: none; }
.hier-wezel:only-child::after {
  border-top: 0; border-right: 0; border-radius: 0;
  left: 50%; right: auto; transform: translateX(-1px);
}
:root { --hier-kreska: var(--border); }
:root[data-motyw="ciemny"] { --hier-kreska: rgba(255, 255, 255, .22); }

/* ---- karta osoby ---- */
.hier-karta {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  width: var(--hier-karta-szer); padding: .7rem .6rem .75rem; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--hier-kolor, var(--border)); border-radius: 12px;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.hier-karta:hover {
  transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand);
}
/* Pietro niesie kolor gornej krawedzi - po niej widac szczebel bez czytania. */
.hier-p0 { --hier-kolor: var(--brand); }
.hier-p1 { --hier-kolor: #f59e0b; }
.hier-p2 { --hier-kolor: #38bdf8; }
.hier-p3 { --hier-kolor: var(--muted); }
.hier-ini {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; font-weight: 800; font-size: var(--fs-sm); color: #fff;
  background: linear-gradient(135deg, var(--hier-kolor, var(--muted)), var(--navy));
}
.hier-imie {
  font-size: var(--fs-base); font-weight: 700; color: var(--tekst-mocny);
  line-height: 1.25;
}
.hier-rola {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .03em;
  padding: .08rem .45rem; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.hier-znak {
  display: inline-flex; align-items: center; gap: .22rem;
  font-size: var(--fs-micro); font-weight: 700; color: var(--brand);
}
.hier-znak svg { width: 11px; height: 11px; }
.hier-znak-off { color: var(--warn-tx); }
/* Mistrz - wyrozniony, bo to on jest wezlem, pod ktorym wisi cala brygada. */
.hier-mistrz { box-shadow: 0 0 0 1px var(--brand-light, var(--brand)) inset; }
.hier-ile {
  font-size: var(--fs-micro); color: var(--muted); white-space: nowrap;
  margin-top: .1rem; padding-top: .3rem; border-top: 1px dashed var(--border);
  width: 100%;
}
.hier-ile .mono-num { font-size: var(--fs-base); font-weight: 800; color: var(--text); }
/* Konto jeszcze niewlaczone - blade, ale WIDOCZNE: te osoby w firmie pracuja,
   tylko nie maja jeszcze dostepu, wiec nie moga zniknac ze struktury. */
.hier-nieaktywny { opacity: .62; border-style: dashed; }
.hier-nieaktywny:hover { opacity: 1; }
.hier-uwaga { display: flex; align-items: center; gap: .4rem; margin-top: .8rem; }
.hier-uwaga svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--warn-tx); }

@media (max-width: 640px) {
  /* Na telefonie drzewo w bok nie ma szans - karty i odstepy schodza do
     minimum, a plansza i tak zostaje przewijalna w poziomie. */
  .hier-karta { width: 8.2rem; padding: .55rem .4rem .6rem; }
  .hier-ini { width: 32px; height: 32px; }
  .hier-galezie { gap: .35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hier-karta, .hier-karta:hover { transition: none; transform: none; }
}

/* ---- STRUKTURA: wyrazniejsze odgrodzenie sekcji ----
   Plansza z drzewem sasiaduje z panelem kont i z Zespolem, a wszystkie trzy
   sa jasnymi prostokatami - przy przewijaniu zlewaly sie w jedno i nie bylo
   wiadomo, gdzie konczy sie struktura. Wlasne tlo, mocniejsza ramka i wyrazny
   odstep robia z niej osobna plansze, a nie kolejny akapit. */
.hier-plansza {
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  margin-bottom: 2.2rem;
}
#prac-struktura { margin-top: .4rem; }

/* ---- karta jako przycisk ---- */
button.hier-karta { font: inherit; cursor: pointer; text-align: center; }
button.hier-karta:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---- podswietlenie linii podleglosci ----
   Wybrana osoba, jej przelozeni i jej podwladni zostaja w pelnym kolorze,
   reszta przygasa. Wygaszamy PRZEZROCZYSTOSCIA calej karty, a nie zmiana
   kolorow pojedynczych elementow - dzieki temu dziala tak samo w kazdym
   motywie i nie trzeba pilnowac kilkunastu regul osobno. */
.hier-plansza.jest-wybor .hier-karta { opacity: .28; filter: grayscale(.5); }
.hier-plansza.jest-wybor .hier-karta.hier-wybrany,
.hier-plansza.jest-wybor .hier-karta.hier-nad,
.hier-plansza.jest-wybor .hier-karta.hier-pod { opacity: 1; filter: none; }
.hier-karta.hier-wybrany {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
}
.hier-karta.hier-nad {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px color-mix(in srgb, #38bdf8 35%, transparent);
}
.hier-karta.hier-pod {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 32%, transparent);
}
/* Kreski tez przygasaja, zeby podswietlona linia byla naprawde widoczna. */
.hier-plansza.jest-wybor { --hier-kreska: color-mix(in srgb, var(--border) 45%, transparent); }

/* ---- legenda pod drzewem ---- */
.hier-legenda {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin: 1.1rem 0 0; padding-top: .8rem;
  border-top: 1px dashed var(--border);
  font-size: var(--fs-micro); color: var(--muted); font-weight: 700;
}
.hier-legenda-kropka {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  margin-left: .5rem; border: 2px solid;
}
.hier-legenda-kropka:first-child { margin-left: 0; }
.hier-legenda-nad { border-color: #38bdf8; }
.hier-legenda-wybrany { border-color: var(--brand); }
.hier-legenda-pod { border-color: #22c55e; }
.hier-wyczysc {
  margin-left: auto; font: inherit; font-weight: 700; cursor: pointer;
  padding: .25rem .7rem; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text);
}
.hier-wyczysc:hover { border-color: var(--brand); color: var(--brand); }

/* ---- legenda: wieksza i wyrownana do lewej ----
   Byla drobnym szarym paskiem pisanym najmniejszym stopniem - przy 15 kartach
   i trzech kolorach trzeba bylo sie w nia wpatrywac. Wiekszy stopien, wieksze
   kropki i wyrazniejszy kontrast; przycisk „Pokaz wszystkich" zostaje po
   prawej, zeby nie rozbijal ciagu trzech znaczen. */
.hier-legenda {
  justify-content: flex-start;
  gap: 1.1rem;
  font-size: var(--fs-base);
  color: var(--text);
}
.hier-legenda-poz { display: inline-flex; align-items: center; gap: .45rem; }
.hier-legenda-kropka {
  width: 14px; height: 14px; border-width: 3px; margin-left: 0;
}

/* ---- przelacznik drzewo / lista ---- */
.hier-przelacznik { margin: 0 0 .9rem; }
.hier-widok {
  display: inline-flex; align-items: center; gap: .45rem;
  font: inherit; font-size: var(--fs-base); font-weight: 700; cursor: pointer;
  padding: .45rem .95rem; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  transition: border-color .12s ease, color .12s ease;
}
.hier-widok:hover { border-color: var(--brand); color: var(--brand); }
.hier-widok svg { width: 15px; height: 15px; }

/* ---- SPIS: to samo drzewo jako zwykla lista ---- */
/* Spis siedzi w oknie na srodku ekranu, wiec bez marginesu na dole -
   odstep daje juz `veh-modal-body`. Kolumny sa waskie i zawijaja sie same,
   dzieki czemu ta sama siatka dziala i w szerokim oknie na laptopie,
   i w waskim na telefonie. */
.hier-spis {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.hier-spis-grupa {
  padding: .85rem 1rem; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
}
.hier-spis-szef {
  margin: 0 0 .45rem; font-size: var(--fs-md); font-weight: 800;
  color: var(--tekst-mocny);
}
.hier-spis-lista { margin: 0; padding-left: 1.1rem; }
.hier-spis-lista li { font-size: var(--fs-base); color: var(--text); margin: .2rem 0; }
.hier-spis-znak {
  font-size: var(--fs-micro); font-weight: 700; color: var(--brand);
  padding: .05rem .4rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
}
.hier-spis-znak-off { color: var(--warn-tx); }

/* ---- pasek pod drzewem: legenda i przyciski o ok. 5% wieksze niz pierwotnie ----
   Poprzedni rozmiar byl "techniczny" - czytelny dla kogos, kto wie, czego
   szuka. Ten pasek jest instrukcja obslugi drzewa, wiec ma byc widoczny
   z pierwszego spojrzenia. Oba przyciski trzymamy razem po prawej. */
.hier-legenda { font-size: .88rem; gap: 1.15rem; padding-top: .9rem; }
.hier-legenda-poz { gap: .45rem; }
.hier-legenda-kropka { width: 14px; height: 14px; border-width: 3px; }
.hier-legenda-akcje {
  margin-left: auto; display: inline-flex; align-items: center;
  gap: .5rem; flex-wrap: wrap;
}
.hier-widok {
  font-size: .88rem; padding: .48rem 1rem; gap: .45rem; border-width: 2px;
}
.hier-widok svg { width: 16px; height: 16px; }
/* `margin-left` przenosi sie na wspolna owijke - inaczej „Pokaz wszystkich"
   odpychalby „Pokaz przypisania" na drugi koniec paska zamiast stanac obok. */
.hier-wyczysc {
  margin-left: 0; font-size: .88rem; padding: .48rem 1rem; border-width: 2px;
}
@media (max-width: 640px) {
  .hier-legenda { font-size: .82rem; gap: .75rem; }
  .hier-legenda-akcje { margin-left: 0; width: 100%; }
  .hier-widok, .hier-wyczysc { font-size: .82rem; padding: .4rem .8rem; }
}

/* ---- szczyt po zmianie ksztaltu zlacza (22.08.2026) ----
   Podpis stoi teraz NAD kartami, wiec margines idzie na dol, nie na gore.
   Pion pod para rysuje `.hier-zlacze`, wiec `ul.hier-korzen-pod-para` nie
   moze dokladac drugiego - inaczej kreska schodzila w dol dwa razy, raz na
   drugiej, i wygladalo to na pogrubienie w losowym miejscu. */
.hier-podpis { margin: 0 0 .8rem; }
.hier-podpis-osobno { margin: 1.6rem 0 .8rem; }
ul.hier-korzen-pod-para { padding-top: 0; }
ul.hier-korzen-pod-para::before { content: none; }
@media (max-width: 640px) {
  /* Karta wezsza, wiec boki „U" musza zejsc sie odpowiednio blizej. */
  :root { --hier-karta-szer: 8.2rem; --hier-stopien: 1.1rem; }
}

/* ---- poprawka 22.08.2026: zlacze pary bylo ogromna klamra ----
   `.hier-zlacze` mialo `width: 100%`, a stalo w `.hier-szczyt`, ktore jest
   zwyklym blokiem - czyli szeroke na CALA plansze. Odsuniecie bokow o polowe
   karty od tej szerokosci dawalo klamre obejmujaca wszystkich pod spodem,
   zamiast krotkiej kreski schodzacej na srodek.
   Para i zlacze siedza teraz we wspolnej owijce szerokiej dokladnie tyle,
   co dwie karty z odstepem - i to od NIEJ liczy sie polowa karty. */
.hier-para-blok {
  width: max-content; max-width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: stretch;
}


/* ---- podciagniecie galezi z ludzmi w lewo (22.08.2026) ----
   Rozmiary kart zostaja stare - problemem nie byla wielkosc, tylko puste
   miejsce. Osoby bez nikogo pod soba (Tomasz Barejka, Celina, Aleksandra,
   Bartosz, Piotr) maja pod soba pusty pas, bo nie maja dzieci. Pierwsza
   galaz z ludzmi wsuwa sie w ten pas ujemnym marginesem i ciagnie za soba
   nastepne - dzieki temu Adrian staje mniej wiecej pod Piotrem, zamiast
   wypychac caly rzad w prawo poza ekran.

   Przesuniecie to dokladnie SZEROKOSC JEDNEJ KARTY z odstepem, czyli jedna
   „kolumna" w lewo - liczone ze zmiennych, wiec nie rozjedzie sie przy
   zmianie szerokosci karty. Wartosc jest celowo skromna: chodzi o wsuniecie
   sie w wolne miejsce, a nie o nakladanie kart na siebie. */
.hier-wezel-podciagnij {
  margin-left: calc((var(--hier-karta-szer) + var(--hier-odstep, .55rem)) * -1);
}
@media (max-width: 640px) {
  /* Na telefonie i tak przewija sie w poziomie, a podciagniecie przy waskim
     ekranie tylko zbliza karty do siebie - zostawiamy rzad bez przesuniecia. */
  .hier-wezel-podciagnij { margin-left: 0; }
}

/* Zacheta przed legenda - mowi wprost, ze kolory zaczna cos znaczyc dopiero
   po kliknieciu w osobe. Po wybraniu kogos znika (chowa ja skrypt), bo wtedy
   legenda opisuje juz to, co faktycznie widac na drzewie. */
.hier-legenda-zacheta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 800; color: var(--brand);
}
.hier-legenda-zacheta svg { width: 14px; height: 14px; }

/* ============ KARTA PRACY: podsumowanie 7 / 30 dni ============ */
.kp-okresy { padding: 0; overflow: hidden; }
.kp-okresy-glowa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.2rem; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.kp-okresy-tytul { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.kp-okresy-ico {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--brand); color: #fff;
}
.kp-okresy-ico svg { width: 19px; height: 19px; }
.kp-okresy-h { margin: 0; font-size: var(--fs-lg); color: var(--tekst-mocny); }
.kp-okresy-sub { font-size: var(--fs-sm); color: var(--muted); }
/* Zakladki okresu - pigulki, ten sam jezyk co filtry w Klientach i Flocie. */
.kp-okresy-zakladki { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.kp-okres-tab {
  font: inherit; font-size: var(--fs-base); font-weight: 700; cursor: pointer;
  padding: .45rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.kp-okres-tab:hover { border-color: var(--brand); color: var(--brand); }
.kp-okres-tab.jest-aktywny {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.kp-okres { padding: 1.1rem 1.2rem 1.3rem; }
.kp-okres-zakres {
  margin: 0 0 .9rem; font-size: var(--fs-sm); color: var(--muted); font-weight: 700;
}
/* Liczby okresu - ten sam ksztalt, co kafelki `hero-stat` w naglowkach. */
.kp-liczby {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.kp-liczba {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .7rem .8rem; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.kp-liczba-val { font-size: var(--fs-xl); font-weight: 800; color: var(--tekst-mocny); line-height: 1.1; }
.kp-liczba-lab { font-size: var(--fs-micro); color: var(--muted); font-weight: 700; }
/* Podsekcja - „na co poszly godziny" pod liczbami. */
.kp-podsekcja { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.kp-podsekcja-h {
  margin: 0 0 .7rem; font-size: var(--fs-md); color: var(--tekst-mocny);
}
.kp-slupki { display: flex; flex-direction: column; gap: .4rem; }
.kp-slupek { display: grid; grid-template-columns: 10rem 1fr 4rem; align-items: center; gap: .7rem; }
.kp-slupek-lab { font-size: var(--fs-base); color: var(--text); }
.kp-slupek-tor {
  height: 10px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); overflow: hidden;
}
.kp-slupek-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark));
}
.kp-slupek-val { font-size: var(--fs-sm); font-weight: 800; color: var(--muted); text-align: right; }
@media (max-width: 640px) {
  .kp-slupek { grid-template-columns: 1fr 3.5rem; }
  .kp-slupek-tor { grid-column: 1 / -1; order: 3; }
}

/* ---- karta pracy: podsekcje w jednej sekcji + podglad jednego dnia ---- */
.kp-podsekcja-dni {
  display: flex; align-items: center; gap: .45rem;
  margin: 1.6rem 0 .7rem; padding-top: 1.2rem;
  border-top: 1px dashed var(--border);
  font-size: var(--fs-md); color: var(--tekst-mocny);
}
.kp-podsekcja-dni svg { width: 16px; height: 16px; color: var(--brand); }
/* „Szczegoly" w naglowku dnia - po prawej, obok liczby godzin. */
.prac-dzien-podglad {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  font-size: var(--fs-micro); font-weight: 700; color: var(--brand);
  padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
}
.prac-dzien-podglad:hover { border-color: var(--brand); background: var(--surface-2); }
.prac-dzien-podglad:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.prac-dzien-podglad svg { width: 11px; height: 11px; }
/* Wnetrze okna z jednym dniem. */
.kp-dzien-naglowek { margin-bottom: 1rem; }
.kp-dzien-wpis {
  padding: .8rem .9rem; margin-bottom: .6rem; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.kp-dzien-wpis-glowa {
  display: flex; align-items: baseline; gap: .6rem; margin-bottom: .6rem;
}
.kp-dzien-wpis-nr {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--brand); color: #fff;
  font-size: var(--fs-micro); font-weight: 800;
}
.kp-dzien-wpis-tytul {
  flex: 1; font-size: var(--fs-md); font-weight: 700; color: var(--tekst-mocny);
}
.kp-dzien-wpis-godz { flex: none; font-weight: 800; color: var(--brand); }
.kp-dzien-wpis-uwagi {
  margin: .5rem 0 0; padding-top: .5rem; border-top: 1px dashed var(--border);
  font-size: var(--fs-sm); color: var(--muted);
}

/* ============ KARTA PRACY: tydzien / reszta miesiaca / wykres dnia ============ */
.kp-tydzien { padding: 0; overflow: hidden; margin-bottom: 1rem; }
.kp-tydzien-glowa {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .85rem 1rem; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.kp-tydzien-ico {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--brand); color: #fff;
}
.kp-tydzien-ico svg { width: 16px; height: 16px; }
.kp-tydzien-tekst { display: flex; flex-direction: column; min-width: 0; }
.kp-tydzien-h { margin: 0; font-size: var(--fs-md); color: var(--tekst-mocny); }
.kp-tydzien-zakres { font-size: var(--fs-sm); color: var(--muted); }
.kp-tydzien-suma {
  margin-left: auto; font-size: var(--fs-sm); color: var(--muted); font-weight: 700;
  white-space: nowrap;
}
.kp-tydzien-suma .mono-num { font-size: var(--fs-md); color: var(--text); font-weight: 800; }
.kp-tydzien-dni { padding: .9rem 1rem 1rem; }

/* Reszta miesiaca - zwinieta, ten sam jezyk co „Zrobione w tym tygodniu". */
.kp-reszta {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); overflow: hidden; margin-bottom: 1rem;
}
.kp-reszta-glowa {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .8rem 1rem; list-style: none; font-weight: 700;
}
.kp-reszta-glowa::-webkit-details-marker { display: none; }
.kp-reszta-glowa:hover { background: var(--surface-2); }
.kp-reszta-glowa svg { width: 15px; height: 15px; color: var(--brand); }
.kp-reszta-ile { margin-left: auto; color: var(--muted); font-weight: 800; }
.kp-reszta[open] .kp-reszta-glowa { border-bottom: 1px solid var(--border); }
.kp-reszta[open] .kp-reszta-glowa .kp-reszta-tekst::after { content: " — zwiń"; opacity: .6; }
.kp-reszta-tresc { padding: .9rem 1rem 1rem; }

/* ---- WYKRES DNIA: os 5:00-21:00 z blokami roboty ---- */
.kp-os { margin-bottom: 1rem; }
.kp-os-tor {
  position: relative; height: 44px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  /* Delikatna siatka co trzy godziny - tlo, nie kreski do liczenia. */
  background-image: repeating-linear-gradient(90deg,
    transparent 0, transparent calc(18.75% - 1px),
    var(--border) calc(18.75% - 1px), var(--border) 18.75%);
}
.kp-os-blok {
  position: absolute; top: 6px; bottom: 6px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 7px; padding: 0 .35rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; box-shadow: 0 1px 4px rgba(2, 8, 23, .25);
}
.kp-os-blok-tekst {
  font-size: var(--fs-micro); font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.kp-os-godziny { position: relative; height: 1.1rem; margin-top: .25rem; }
.kp-os-godzina {
  position: absolute; transform: translateX(-50%);
  font-size: var(--fs-micro); color: var(--muted); font-weight: 700;
}

/* ---- karta pracy: jedna lista miesiaca + szczegoly w dniu (22.08.2026) ---- */
/* Dni spoza biezacego tygodnia sa w HTML od poczatku, tylko ukryte - dzieki
   temu „caly miesiac" to ta SAMA lista, a nie drugi spis obok. */
.kp-dzien-starszy { display: none; }
.kp-caly-miesiac .kp-dzien-starszy { display: block; }
.prac-dzien-tresc { padding: .8rem 1.1rem 1rem; }
.prac-dzien-tresc .prac-wpisy { padding: 0; }
.kp-liczby-dnia { margin-bottom: .9rem; }
.kp-podsekcja-dnia { margin-top: .9rem; padding-top: .8rem; }

/* Przycisk „Pokaz caly miesiac" - POD lista, w tej samej karcie. */
.kp-wiecej-pas {
  padding: .2rem 1rem 1rem; display: flex; justify-content: center;
}
.kp-wiecej-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-size: var(--fs-base); font-weight: 700; cursor: pointer;
  padding: .55rem 1.2rem; border-radius: 999px;
  border: 1.5px dashed var(--border); background: transparent; color: var(--text);
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.kp-wiecej-btn:hover {
  border-style: solid; border-color: var(--brand);
  color: var(--brand); background: var(--surface-2);
}
.kp-wiecej-btn svg { width: 15px; height: 15px; transition: transform .15s ease; }
.kp-caly-miesiac .kp-wiecej-btn svg { transform: rotate(180deg); }
.kp-wiecej-ile { color: var(--muted); font-weight: 800; }
/* ---- kasowanie wpisu: duzy, czerwony przycisk ----------------------------
   Byl bladym, obwiedzionym napisem obok tresci - przy pieciu wpisach w dniu
   trzeba go bylo szukac, a to jedyne NIEODWRACALNE dzialanie na tej karcie.
   Prosba 27.08.2026: wiekszy i czerwony. Kolory wpisane wprost, nie ze
   zmiennych motywu: ostrzezenie ma wygladac tak samo w jasnym i ciemnym. */
/* Przycisk stoi po PRAWEJ stronie wiersza i w jego osi, a nie przyklejony do
   gory po lewej - tak nie wchodzi w tresc wpisu (poprawka 27.08.2026). */
.prac-usun-form { align-self: center; margin-left: auto; }
.prac-usun {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  /* Nizszy niz poprzednio, ale szerszy: ma byc widoczny, nie masywny. */
  min-height: 36px; min-width: 8.5rem; padding: 0 1.3rem; cursor: pointer;
  border-radius: 10px; font: inherit; font-size: var(--fs-sm); font-weight: 800;
  border: 1px solid #b91c1c; background: #dc2626; color: #fff;
  box-shadow: 0 5px 12px -9px rgba(220, 38, 38, .95);
  transition: filter .12s ease, transform .12s ease;
}
.prac-usun svg { width: 16px; height: 16px; }
.prac-usun:hover { filter: brightness(1.08); transform: translateY(-1px); }
.prac-usun:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .prac-usun:hover { transform: none; } }

/* Skad podpowiedz - „miejscowość", „ulica", „klient", „ostatnio". Dwie
   identyczne nazwy (miejscowosc i ulica czesto nazywaja sie tak samo) inaczej
   nie daja sie rozroznic. */
.pole-lista-rodzaj {
  margin-left: auto; padding-left: .6rem;
  font-size: var(--fs-micro); color: var(--muted); font-weight: 700;
}
.pole-lista-poz { display: flex; align-items: center; }

/* --- mapa pojazdu: wlasne przyciski zoomu i przejscie do postojow --- */

/* Ramka trzyma mape i przyciski zoomu obok siebie. Przyciski stoja POZA
   kontenerem Leafleta (a nie w nim), zeby klikniecie nie ladowalo w mape. */
.fleet-map-ramka { position: relative; }
.mapa-zoom {
  position: absolute; top: .7rem; right: .7rem; z-index: 400;
  display: flex; flex-direction: column; gap: .35rem;
}
.mapa-zoom[hidden] { display: none; }
.mapa-zoom-btn {
  width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-size: 1.2rem; font-weight: 800; line-height: 1; font-family: inherit;
  box-shadow: 0 2px 8px rgba(2, 6, 23, .35);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.mapa-zoom-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.mapa-zoom-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mapa-zoom-srodek svg { width: 17px; height: 17px; }

/* Przycisk "Otworz w OpenStreetMap" o 15% wiekszy - to jedyne wyjscie z tej
   sekcji na pelna mape, wiec ma byc widoczne. */
.fleet-map-btn { font-size: calc(var(--fs-sm) * 1.15); padding: .4rem .75rem; }
.fleet-map-btn svg { width: 14px; height: 14px; }



/* ============================================================
   Ekran logowania w oprawie pieca (`login-piec` na <body>)
   ------------------------------------------------------------
   Waterm montuje piece i klimatyzacje, wiec logowanie stoi w czyms, co czyta
   sie jak front kotla: ciemna obudowa z metaliczna krawedzia, plakietka z
   ikona pieca u gory i cieply blask spod prostokata, jakby w srodku sie palilo.
   Blask to jedyny odwazny element - reszta zostaje cicha, bo to ekran, na
   ktorym sie pracuje codziennie, a nie oglada.

   Zasieg: `.login-page` (tlo, style pol) dziela CZTERY ekrany - logowanie,
   przypomnienie hasla, reset i zmiana hasla. Oprawa wchodzi wylacznie pod
   `.login-piec`, ktore stoi tylko na logowaniu.
   ============================================================ */
.login-piec .piec {
  position: relative;
  padding: 2.4rem 2.2rem 2.2rem;
  border-radius: 24px;
  background: linear-gradient(168deg, rgba(30, 41, 59, .92), rgba(2, 6, 23, .94));
  border: 1px solid rgba(255, 255, 255, .14);
  /* Metaliczna krawedz: jasny blik u gory, ciemny cien u dolu, glboki rzut. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 30px 70px -28px rgba(0, 0, 0, .85);
}

/* Cieply blask spod prostokata - "ogien w srodku". Pod spodem (z-index 0),
   wiec nie przykrywa pol formularza. */
.login-piec .piec-blask {
  position: absolute; left: 50%; bottom: -6px; z-index: 0;
  width: 72%; height: 120px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
              rgba(238, 110, 27, .38), rgba(238, 110, 27, .10) 55%, transparent 72%);
  filter: blur(18px); pointer-events: none;
  animation: piec-zar 5.5s ease-in-out infinite;
}
@keyframes piec-zar {
  0%, 100% { opacity: .75; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .login-piec .piec-blask { animation: none; } }

/* Plakietka na obudowie - jak tabliczka znamionowa na piecu. */
.login-piec .piec-plakietka {
  position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
  z-index: 2; display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .85rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; font-size: var(--fs-micro); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(238, 110, 27, .9);
}
.login-piec .piec-plakietka-ico { display: flex; }
.login-piec .piec-plakietka-ico svg { width: 13px; height: 13px; }

/* Prostokat logowania: szerokosc 380 -> 407 px, wysokosc z TRESCI.
   Powrot do stanu z 26.08.2026 (prosba 08.09.2026: „dziwny prostokat").
   Sztywna wysokosc `min-height` - probowana w trzech wartosciach: 30, 36
   i 33rem - dawala karte wyrazne wyzsza, niz ma co w niej stanac: formularz
   konczyl sie w polowie, a pod nim zostawal pusty pas. Zamiast kreccenia
   jedna liczba karta rosnie tym, co w niej jest, i tyle: cztery rubryki to
   niska karta, notka „na tym komputerze zalogowany jest X" albo komunikat
   bledu ja wydluza. `justify-content` juz nie jest potrzebne - nie ma
   nadmiaru wysokosci do rozdzielenia. */
.login-piec .login-card {
  position: relative; z-index: 1;
  /* Boki zostaja z reguly bazowej (1.8rem) - poszerzamy sama karte, a nie
     jej marginesy; przyciski pod obudowa licza sie z tej samej liczby. */
  max-width: 407px;
  padding-top: 4rem; padding-bottom: 4rem;
}

/* "Zapamietaj mnie" wieksze - napis i sam ptaszek. Domyslny checkbox ma
   ~13 px i przy powiekszonej karcie gubil sie przy dolnej krawedzi. */
/* Wlasny ptaszek: BIALY na pomaranczowym tle. Systemowy checkbox tego nie
   umie - `accent-color` maluje wypelnienie pudelka, a znaczek dobiera sam
   pod kontrast, wiec na pomaranczu wyszedlby ciemny. Stad `appearance: none`
   i ptaszek rysowany maska. */
.login-piec .login-card .checkbox input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; margin: 0;
  border: 2px solid #fff; border-radius: 5px; background: transparent;
  display: grid; place-content: center;
}
.login-piec .login-card .checkbox input::before {
  content: ""; width: 11px; height: 11px; background: #fff;
  transform: scale(0); transition: transform .12s ease;
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 22%, 84% 6%, 38% 68%);
}
.login-piec .login-card .checkbox input:checked::before { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .login-piec .login-card .checkbox input::before { transition: none; }
}

/* Wzor kropek w obudowie pieca. Klasa jest wspolna z hero, wiec tutaj tylko
   docinamy go do zaokraglenia obudowy - `.piec` nie ma `overflow: hidden`,
   bo tabliczka znamionowa wystaje ponad krawedz i zostalaby scieta. */
.login-piec .piec .hero-ai-pattern { border-radius: 24px; }

/* Oba dzialania POD prostokatem, jedno pod drugim: najpierw "Zaloguj sie",
   pod nim reset. Kolejnosc pionowa czyta sie jak kolejnosc krokow - obok
   siebie wygladaly na rownorzedne wybory, a nie sa. */
.login-piec .piec-akcje {
  display: flex; flex-direction: column; gap: .6rem;
  /* Rowno z krawedziami obudowy: szerokosc karty (407px) + boki obudowy
     (2 x 2.2rem). Inaczej przyciski wystaja albo sa wciete wzgledem pieca. */
  width: 100%; max-width: calc(407px + 4.4rem); margin-top: 1.3rem;
}
.login-piec .piec-akcja {
  flex: 1; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; font-size: var(--fs-base); font-weight: 700;
  font-family: inherit; text-decoration: none; cursor: pointer;
}
/* Drugie dzialanie jest cichsze - logowanie to glowna droga, reset wyjatek. */
.login-piec .piec-akcja-cicha {
  background: transparent; color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, .22);
}
.login-piec .piec-akcja-cicha:hover { border-color: var(--brand); color: var(--brand); }
.login-piec .piec-akcja-cicha:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 560px) {
  .login-piec .piec { padding: 2rem 1.2rem 1.8rem; }
}

/* Kto siedzi na tym komputerze. Bylo `alert-info` - niebieskie pudelko, ktore
   gryzlo sie z ciepla obudowa pieca i krzyczalo jak blad, chociaz to zwykla
   informacja. Teraz cieply ton spiety z blaskiem obudowy, mniejsze pismo,
   a nazwisko - jedyna rzecz, ktora sie tu czyta - bialo i grubo.

   Kolory wpisane wprost, a nie z tokenow motywu: karta logowania ma na stale
   ciemne tlo (`.login-page .login-card`), wiec jasne warianty `--warn-*`
   z motywu jasnego daloby jasne pudelko na ciemnej karcie.

   Powod istnienia tego komunikatu: w biurze Waterm jeden komputer obsluguje
   kilka osob i cudza sesja potrafi wisiec tygodniami (zob. 12.08.2026). */
.login-piec .login-kto {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 0 0 1.1rem; padding: .7rem .85rem;
  border-radius: 10px;
  background: rgba(238, 110, 27, .12);
  border: 1px solid rgba(238, 110, 27, .34);
  color: #f0d6c2;
  font-size: var(--fs-sm); line-height: 1.5;
}
.login-piec .login-kto-ico {
  display: flex; flex-shrink: 0; margin-top: .1rem; color: var(--brand);
}
.login-piec .login-kto-ico svg { width: 15px; height: 15px; }
.login-piec .login-kto-tresc { min-width: 0; }
.login-piec .login-kto strong { color: #fff; font-weight: 800; }

/* --- drobne korekty naglowka i "Zapamietaj mnie" na ekranie logowania --- */

/* Logo i podpis odrobine wieksze - karta urosla, wiec przy starych rozmiarach
   gora robila sie pusta. Skok maly (44 -> 50 px, fs-base -> fs-md), zeby
   zostac przy proporcjach, a nie zrobic z logo bannera. */
.login-piec .login-logo { height: 50px; margin-bottom: .5rem; }
.login-piec .login-sub { font-size: var(--fs-md); }

/* "Zaloguj sie" minimalnie wyzej - sciagniety gorny margines, dolny zostaje,
   zeby nie przykleic naglowka do pierwszego pola. */
.login-piec .login-card h1 { margin-top: .7rem; }

/* "Zapamietaj mnie" w wlasnej ramce: to jedyny WYBOR w tym formularzu (reszta
   to pola do wypelnienia), wiec ma wygladac jak przelacznik, a nie jak
   doklejony wiersz. Cale pudelko jest <label>, wiec klikniecie gdziekolwiek
   przelacza ptaszka - stad `cursor: pointer` na calosci. */
.login-piec .login-card .checkbox {
  /* Te same wartosci co przycisk "Zaloguj sie" (.btn-primary): biale pismo,
     grubosc 700, fs-lg, promien 9px, pomarancz marki. Rozni sie tylko tym,
     ze przycisk jest wypelniony, a to obramowanie - bo to wybor, nie akcja. */
  display: inline-flex; align-items: center; gap: .6rem;
  /* `align-self`, bo `.login-card` to kolumna flex i dziecko domyslnie
     rozciaga sie na cala szerokosc - a przycisk ma obejmowac SAMA TRESC. */
  align-self: flex-start;
  margin: 1.1rem 0 0;                  /* minimalnie nizej niz pola nad nim */
  padding: .48rem .85rem;              /* minimalnie mniejszy niz poprzednio */
  /* Pelne wypelnienie tym samym gradientem co "Zaloguj sie", biale pismo
     i biala ramka. Od przycisku akcji odroznia go teraz obwodka i rozmiar,
     a nie sam ksztalt. */
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border: 1.5px solid #fff;
  border-radius: 9px;
  color: #fff; font-weight: 700; font-size: var(--fs-md);
  cursor: pointer;
  transition: filter .15s ease;
}
.login-piec .login-card .checkbox:hover { filter: brightness(1.07); }
/* Fokus z klawiatury na calej ramce, nie na samym ptaszku - inaczej przy
   tabowaniu nie widac, ze sie tu jest. */
/* Fokus BIALY, nie pomaranczowy: przycisk jest teraz pomaranczowy, wiec
   pomaranczowa obwodka na nim znikala i przy tabowaniu nie bylo widac, ze
   sie tu jest. Obwodka na calej ramce, a nie na samym ptaszku. */
.login-piec .login-card .checkbox:focus-within {
  outline: 2px solid #fff; outline-offset: 3px;
}

/* --- reset hasla: wskaznik etapow i opis pod naglowkiem --- */

/* Dwa etapy resetu. Numerowanie jest tu uzasadnione, bo to NAPRAWDE
   sekwencja: najpierw link na maila, potem ustawienie hasla. Etap zrobiony
   dostaje ptaszek zamiast cyfry - liczba, ktora sie juz nie liczy, tylko
   myli. */
.login-piec .etapy {
  display: flex; align-items: center; gap: .5rem;
  list-style: none; margin: 0 0 1.2rem; padding: 0;
}
.login-piec .etap {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-sm); font-weight: 700; color: rgba(226, 232, 240, .5);
}
/* Kreska miedzy etapami - pokazuje, ze jeden prowadzi do drugiego. */
.login-piec .etap + .etap::before {
  content: ""; width: 18px; height: 1px; margin-right: .2rem;
  background: rgba(255, 255, 255, .22);
}
.login-piec .etap-znak {
  display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%; font-size: var(--fs-micro); font-weight: 800;
  border: 1.5px solid rgba(255, 255, 255, .25);
}
.login-piec .etap-aktywny { color: #fff; }
.login-piec .etap-aktywny .etap-znak {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-color: transparent; color: #fff;
}
.login-piec .etap-zrobiony { color: rgba(226, 232, 240, .8); }
.login-piec .etap-zrobiony .etap-znak {
  border-color: var(--ok-bd); color: var(--ok-tx); background: transparent;
}

/* Zdanie wyjasniajace pod naglowkiem. Bylo `hint` z inline stylami w kazdym
   szablonie osobno - jedna klasa zamiast trzech kopii. */
.login-piec .login-opis {
  margin: 0 0 1.1rem; text-align: left;
  font-size: var(--fs-base); line-height: 1.55; color: rgba(226, 232, 240, .75);
}

/* Reguly hasla w karcie resetu - zwarte, zeby dwa pola i cztery warunki
   miescily sie bez rozpychania obudowy. */
.login-piec .pw-rules { margin-bottom: .9rem; }

/* --- przejscia miedzy sekcjami pojazdu ("Zobacz tez") --- */

/* JEDEN wzorzec dla wszystkich sekcji. Wczesniej Nawigacja miala pelny kafel,
   a Postoje waski pasek - dwa wyglady na to samo dzialanie, przy czym ten
   waski gubil sie pod dluga lista. Barwa ikony idzie za sekcja DOCELOWA, tak
   samo jak przyciski na karcie floty, wiec kolor znaczy wszedzie to samo. */
/* Cala grupa przejsc w jednej ramce z pomaranczowym paskiem biegnacym przez
   CALA jej wysokosc - ten sam 4px var(--brand) co `.accent-card`, wiec pasek
   znaczy w calej aplikacji to samo. Boki lekko zaokraglone; lewy rog zostaje
   ostry, zeby pasek byl prosta kreska od gory do dolu, a nie scinal sie na
   koncach. */
.przejscia {
  margin-top: 1.5rem; padding: .9rem 1rem 1rem;
  border: 1px solid var(--border); border-left: 4px solid var(--brand);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
}
/* Naglowek w srodku traci wlasny pasek - niesie go teraz cala ramka, a dwa
   paski jeden przy drugim wygladalyby jak blad. */
.przejscia > .dok-grupa-naglowek,
.przejscia-panel > .dok-grupa-naglowek {
  border-left: 0; background: transparent; padding-left: 0; border-radius: 0;
}
.przejscie-kafel {
  display: flex; align-items: center; gap: .85rem; margin-top: .6rem;
  padding: .9rem 1rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); text-decoration: none;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.przejscie-kafel:hover {
  border-color: var(--akcent); transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(2, 8, 23, .45);
}
.przejscie-kafel:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.przejscie-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--akcent-tlo); color: var(--akcent);
}
.przejscie-ico svg { width: 18px; height: 18px; }
/* `flex: 1` na tresci odpycha licznik i strzalke do prawej krawedzi - i to
   dziala tak samo z licznikiem, jak i bez niego. Prostsze i pewniejsze niz
   zerowanie `margin-left: auto` selektorami warunkowymi. */
.przejscie-tresc { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.przejscie-tresc strong { font-size: var(--fs-base); font-weight: 800; }
.przejscie-tresc span { font-size: var(--fs-micro); color: var(--muted); line-height: 1.4; }
.przejscie-kafel .fleet-filter-count { flex-shrink: 0; }
.przejscie-strzalka { flex-shrink: 0; display: flex; color: var(--muted); }
.przejscie-strzalka svg { width: 16px; height: 16px; }
.przejscie-kafel:hover .przejscie-strzalka { color: var(--akcent); }

/* Barwa sekcji docelowej - te same pary co `.fleet-card-link-*`. */
.przejscie-mapa      { --akcent: var(--info-tx); --akcent-tlo: var(--info-bg); }
.przejscie-historia  { --akcent: var(--warn-tx); --akcent-tlo: var(--warn-bg); }
.przejscie-dokumenty { --akcent: var(--ai-tx);   --akcent-tlo: var(--ai-bg); }
.przejscie-postoje   { --akcent: var(--ok-tx);   --akcent-tlo: var(--ok-bg); }

/* Przejscia jako samodzielny panel (Nawigacja): stoja poza panelami
   zaleznymi od GPS, wiec musza same nosic odstep - w pozostalych sekcjach
   siedza w srodku panelu i biora go z `.przejscia`. */

/* ===== Znacznik "dodane recznie" =========================================
   Ustalenie 27.08.2026: wszystko, co dopisal czlowiek - a nie system klienta -
   ma to mowic wprost, na rogu swojego prostokata. Nie chodzi o ozdobe: karta
   auta wyglada tak samo niezaleznie od tego, czy dane przyszly z Subiekta, czy
   ktos wpisal je z reki, a to zupelnie inna pewnosc.

   Rog jest wstega w rogu karty (przycieta obrotem), a nie zwyklym napisem
   w naglowku - dzieki temu widac go przy skanowaniu siatki wzrokiem, nie
   trzeba czytac karty. Wariant `-pigulka` jest do wierszy tabel, gdzie wstega
   nie ma sie na czym oprzec. */
.karta-recznie { position: relative; overflow: hidden; }
/* Wstega siedzi w LEWYM gornym rogu (ustalenie 27.08.2026) - prawy rog nalezy
   do przycisku zdejmowania z floty i dwie rzeczy nie moga wchodzic sobie
   w to samo miejsce. */
.karta-rog {
  position: absolute; top: 12px; left: -34px; z-index: 2;
  transform: rotate(-45deg); transform-origin: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: .2rem 2.4rem; pointer-events: none;
  box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .55);
}
.karta-rog-pigulka {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--brand-soft, rgba(238, 110, 27, .14));
  color: var(--brand-dark); border: 1px solid rgba(238, 110, 27, .35);
  font-size: .68rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px;
  white-space: nowrap;
}
.karta-rog-pigulka svg { width: 11px; height: 11px; }

/* Zdjecie auta z floty: kwadratowy czerwony "x" w PRAWYM gornym rogu karty,
   tam gdzie kazdy szuka zamkniecia. Kwadrat, nie kolko - zeby nie mylil sie
   z okraglymi plakietkami stanu, i zeby bylo widac, ze to akcja, a nie znacznik.
   Kazda karta floty jest przez to `position: relative`; przy autach dopisanych
   recznie wstega stoi po drugiej stronie. */
.fleet-card { position: relative; }
.fleet-rog-akcja {
  position: absolute; top: .6rem; right: .6rem; z-index: 3;
  width: 30px; height: 30px; display: inline-flex; align-items: center;
  justify-content: center; border: none; border-radius: 8px; cursor: pointer;
  background: #d64545; color: #fff; padding: 0;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .6);
  transition: transform .12s ease, filter .12s ease;
}
.fleet-rog-akcja:hover { transform: scale(1.08); filter: brightness(1.08); }
.fleet-rog-akcja svg { width: 15px; height: 15px; }
/* Powrot do floty - ten sam kwadrat, ale to nie jest kasowanie, wiec i nie
   czerwony. */
.fleet-rog-akcja-powrot { background: var(--brand); }
@media (prefers-reduced-motion: reduce) { .fleet-rog-akcja:hover { transform: none; } }

/* Drugi krzyzyk przy aucie juz zdjetym z floty - "usun na dobre". Stoi obok
   przycisku powrotu, nie zamiast niego: jedno klikniecie przywraca, drugie
   kasuje, wiec musza byc rozroznialne na pierwszy rzut oka. Ciemniejsza
   czerwien i obwodka - to jest ten grozniejszy z dwoch. */
.fleet-rog-form-druga { position: absolute; top: .6rem; right: 3.1rem; z-index: 3; }
.fleet-rog-akcja-usun {
  position: static; background: #8f1d1d; border: 1px solid rgba(255, 255, 255, .35);
}

/* Ukryte pojazdy - zwiniete na samym dole floty. Zamiast znikac bez sladu
   (czego przy kartotece Subiekta i tak nie umiemy zrobic), auto schodzi tutaj,
   jeden klik od powrotu. */
.ukryte-pojazdy {
  max-width: 1040px; margin: 1.5rem auto 0;
  border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-2);
}
.ukryte-pojazdy summary {
  display: flex; align-items: center; gap: .55rem; cursor: pointer; list-style: none;
  padding: .7rem 1rem; font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
}
.ukryte-pojazdy summary::-webkit-details-marker { display: none; }
.ukryte-pojazdy-ico { display: inline-grid; place-items: center; color: var(--muted); }
.ukryte-pojazdy-ico svg { width: 14px; height: 14px; }
.ukryte-pojazdy-info { font-weight: 600; color: var(--muted); margin-left: auto; }
.ukryte-pojazdy-lista { list-style: none; margin: 0; padding: 0 1rem 1rem; display: grid; gap: .5rem; }
.ukryte-pojazdy-lista li {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: .55rem .8rem;
}
.ukryte-pojazdy-opis { color: var(--muted); font-size: var(--fs-sm); flex: 1; min-width: 0; }

/* ==========================================================================
   KREATOR — warstwa wizualna (27.08.2026)
   Kreatory dostaly wiecej tresci (pojazd ma piec krokow, dokument cztery),
   a wygladaly jak jeden dlugi formularz w ramce: bez podzialu na sekcje, bez
   koloru, bez informacji "gdzie jestem". To sa te braki, po kolei.

   Zasada: kolor niesie stan, nie ozdabia. Pomaranczowy pojawia sie wylacznie
   tam, gdzie cos jest AKTYWNE albo WYMAGANE - krok, na ktorym stoisz, pole
   obowiazkowe, przycisk konczacy robote. Reszta jest szara i cicha, zeby te
   trzy rzeczy bylo widac z drugiego konca biurka.
   ========================================================================== */

/* --- Pasek kroków: wlasna karta, nie luzne kropki ------------------------ */
.wizard-steps {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1rem 1.4rem .85rem; max-width: 760px; box-shadow: 0 1px 2px rgba(2, 6, 23, .04);
}
.wizard-line {
  top: 33px; height: 4px;
  /* Linia biegnie od SRODKA pierwszej kropki do srodka ostatniej. Liczba
     krokow bywa rozna (3, 4, 5), wiec zamiast zgadywanego procentu bierzemy
     ja z `--kroki`, ktore ustawia kreator.js. */
  left: calc(50% / var(--kroki, 4)); right: calc(50% / var(--kroki, 4));
}
.wizard-step-dot {
  width: 38px; height: 38px; border-width: 2px;
  box-shadow: 0 1px 2px rgba(2, 6, 23, .05);
}
/* Krok zrobiony jest KLIKALNY (kreator.js pozwala cofnac sie na niego),
   wiec kursor i podswietlenie musza to zapowiadac. */
.wizard-step.is-done { cursor: pointer; }
.wizard-step.is-done:hover .wizard-step-dot { filter: brightness(1.08); }
.wizard-step.is-active .wizard-step-dot {
  box-shadow: 0 0 0 5px rgba(238, 110, 27, .18); transform: scale(1.04);
}
.wizard-step-label { max-width: 11ch; line-height: 1.25; }
.wizard-step.is-active .wizard-step-label { color: var(--brand-dark); }

/* --- Panel kroku: szyna koloru z lewej + naglowek z licznikiem ----------- */
.wizard-panel {
  /* BEZ `overflow: hidden`: rozwijana lista wyboru wychodzi poza panel
     i przy obcinaniu po prostu znikala. Szyna koloru ma wlasny promien
     (nizej), wiec nie potrzebuje juz obcinania, zeby trzymac sie rogow. */
  position: relative; border-radius: 16px;
  padding: 1.4rem 1.6rem 1.5rem 1.9rem;
  box-shadow: 0 2px 10px -8px rgba(2, 6, 23, .35);
}
.wizard-panel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
}
.wizard-pane-title {
  align-items: center; gap: .6rem; padding-bottom: .9rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}
.wizard-title-ico {
  background: rgba(238, 110, 27, .12); border-color: rgba(238, 110, 27, .3);
  color: var(--brand-dark);
}
/* Licznik kroku - "Krok 2 z 5". Wstawia go kreator.js, zeby zaden szablon nie
   musial wiedziec, ile ma krokow. */
.wizard-krok-chip {
  margin-left: auto; flex-shrink: 0;
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .25rem .7rem;
}

/* --- Pola: rzedy jako sekcje, obowiazkowe widoczne od razu --------------- */
.wizard-pane .field-row { gap: 1.1rem; }
.wizard-pane .field-row + .field-row,
.wizard-pane .field-row + .field,
.wizard-pane .field + .field-row {
  border-top: 1px dashed var(--border); padding-top: 1.1rem; margin-top: .2rem;
}
.wizard-pane .field label { display: flex; align-items: center; gap: .35rem; }
.wizard-pane .field input,
.wizard-pane .field select,
.wizard-pane .field textarea { background: var(--surface); }
.wizard-pane .field input:hover,
.wizard-pane .field select:hover,
.wizard-pane .field textarea:hover { border-color: var(--muted); }
.wizard-pane .field-hint { display: flex; gap: .4rem; line-height: 1.4; }
.wizard-pane .field-hint::before {
  content: ""; flex-shrink: 0; width: 3px; border-radius: 2px; margin: .15rem 0;
  background: var(--border);
}
/* Gwiazdka przy polu obowiazkowym czytala sie jak przypis. Zamiast niej stoi
   slowo - ta sama tresc, tylko od razu zrozumiala. Sam znak "*" z szablonu
   chowamy zerowym rozmiarem pisma, zeby nie trzeba bylo poprawiac kazdego
   kreatora z osobna. */
.req {
  font-size: 0; color: var(--brand-dark); background: rgba(238, 110, 27, .12);
  border-radius: 5px; padding: .05rem .35rem; font-weight: 800;
}
.req::after {
  content: "wymagane"; font-size: var(--fs-micro); letter-spacing: .03em;
  text-transform: uppercase;
}

/* --- Podsumowanie: karty z paskiem naglowka ------------------------------ */
.wizard-sum-group { padding: 0; overflow: hidden; }
.wizard-sum-group h3 {
  margin: 0; padding: .6rem .85rem; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.wizard-sum-group dl { padding: .7rem .85rem .8rem; gap: 0; }
.wizard-sum-group dl > div { padding: .32rem 0; border-bottom: 1px dashed var(--border); }
.wizard-sum-group dl > div:last-child { border-bottom: none; }

/* --- Notka pod podsumowaniem: kartka z szyna, nie zwykly akapit ---------- */
.wizard-print-note {
  border-left: 3px solid var(--brand); background: rgba(238, 110, 27, .07);
  border-radius: 0 10px 10px 0; padding: .7rem .9rem;
}

/* --- Rzad akcji: przyklejony do dolu ekranu ------------------------------ */
.wizard-actions {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: .7rem .9rem; box-shadow: 0 -6px 18px -14px rgba(2, 6, 23, .5);
}
.btn-wizard-strong {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 14px -8px rgba(238, 110, 27, .9);
}
.btn-wizard-strong:hover { background: var(--brand-dark); border-color: transparent; }
#wizardNext { border-color: var(--brand); color: var(--brand-dark); font-weight: 800; }
#wizardNext:hover { background: rgba(238, 110, 27, .09); }

/* --- Propozycje z boku: te same reguly koloru ---------------------------- */
.wizard-sugg[open] summary { border-bottom: 1px solid var(--border); }
.wizard-sugg[open] .wizard-sugg-ico {
  background: rgba(238, 110, 27, .12); border-color: rgba(238, 110, 27, .3);
  color: var(--brand-dark);
}
.sugg-chip:hover { border-color: var(--brand); color: var(--brand-dark); }

@media (max-width: 700px) {
  .wizard-steps { padding: .8rem .7rem .7rem; }
  .wizard-step-label { font-size: 10px; max-width: 8ch; }
  .wizard-panel { padding: 1.1rem 1rem 1.2rem 1.4rem; }
}

/* ==========================================================================
   ZAMKNIETA ZAKLADKA (27.08.2026)
   Zakladki nie znikaja juz z menu, gdy ktos nie ma do nich dostepu - stoja
   przygaszone, z klodka, a wejscie konczy sie ekranem ponizej. Ukryta
   zakladka nie istnieje dla czlowieka, wiec nikt nie poprosi o dostep do
   czegos, o czym nie wie.
   ========================================================================== */
.nav-item.nav-zamkniety { opacity: .5; }
.nav-item.nav-zamkniety:hover { opacity: .75; }
.nav-klodka { margin-left: auto; display: inline-grid; place-items: center; opacity: .8; }
.nav-klodka svg { width: 12px; height: 12px; }

.zamknieta {
  max-width: 520px; margin: 3rem auto; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 2.6rem 2rem 2rem; position: relative;
}
/* Ikona zakladki na srodku - duza i wyciszona, zeby od razu bylo wiadomo,
   O KTORA zakladke chodzi, zanim ktos przeczyta naglowek. */
.zamknieta-ikona {
  display: inline-grid; place-items: center; width: 92px; height: 92px;
  border-radius: 26px; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); opacity: .75;
}
.zamknieta-ikona svg { width: 46px; height: 46px; }
.zamknieta-klodka {
  position: absolute; top: 2.6rem; left: 50%; margin-left: 22px;
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 999px; background: var(--brand); color: #fff;
  border: 3px solid var(--surface);
}
.zamknieta-klodka svg { width: 16px; height: 16px; }
.zamknieta h1 { margin: 1.1rem 0 .4rem; font-size: var(--fs-xl); }
.zamknieta-tresc { margin: 0 auto .7rem; max-width: 40ch; color: var(--text); }
.zamknieta-kto { margin: 0 auto 1.4rem; max-width: 44ch; color: var(--muted); font-size: var(--fs-sm); }
.zamknieta-akcje { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* Inicjaly zamiast ikony w naglowku Tablicy zadan + status uprawnien. */
.oferty-hero-ini {
  font-size: var(--fs-lg); font-weight: 800; letter-spacing: .02em;
  color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border: none;
}
.hero-ranga {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .3rem;
  font-size: var(--fs-micro); font-weight: 700; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .15rem .6rem;
}
.hero-ranga-ico { display: inline-grid; place-items: center; color: var(--brand); }
.hero-ranga-ico svg { width: 11px; height: 11px; }


/* ==========================================================================
   KREATOR — druga warstwa (27.08.2026, po obejrzeniu pierwszej)
   Uwagi z ekranu: prostokat za waski, pola za male, rubryki bez podzialu,
   pasek postepu tylko nad srodkiem strony, listy wyboru jak systemowy select.
   Ponizej po kolei.
   ========================================================================== */

/* --- Kreator dostaje wlasna, szersza siatke ------------------------------ */
/* Kreator zajmuje CALA szerokosc strony, a nie kolumne na srodku (prosba
   27.08.2026). Przy pieciu krokach i kilkunastu rubrykach kolumna na srodku
   marnowala pol ekranu, a tresc i tak czyta sie od lewej krawedzi. */
.kreator-page .wizard-layout {
  max-width: none; margin: 0; gap: 1.4rem;
  grid-template-columns: minmax(0, 1fr) 300px;
}
@media (max-width: 1000px) { .kreator-page .wizard-layout { grid-template-columns: 1fr; } }

/* Pasek postepu na CALA szerokosc strony - krokow bywa piec, a scisniete
   w 760 px etykiety lamaly sie po dwa slowa. */
.kreator-page .wizard-steps { max-width: none; padding: 1.15rem 2rem 1rem; }
.kreator-page .wizard-line { top: 36px; }
.kreator-page .wizard-step-dot { width: 42px; height: 42px; font-size: var(--fs-lg); }
.kreator-page .wizard-step-label { max-width: 16ch; font-size: var(--fs-sm); }

/* Wiekszy prostokat i wieksze pola - to jest ekran do wpisywania, a nie do
   czytania: rubryka ma byc wygodna pod palcem i pod wzrokiem. */
.kreator-page .wizard-panel { padding: 1.6rem 1.9rem 1.8rem 2.2rem; }
.kreator-page .wizard-pane-title { font-size: var(--fs-xl); }
.kreator-page .field input,
.kreator-page .field select,
.kreator-page .field textarea {
  min-height: 46px; font-size: var(--fs-base); padding: .6rem .8rem; border-radius: 10px;
}
.kreator-page .field textarea { min-height: 90px; }
.kreator-page .field label { font-size: var(--fs-base); margin-bottom: .4rem; }

/* --- Sekcja: naglowek w obramowaniu, bez pomaranczowego paska -----------
   Poprawki z 27.08.2026 (druga tura uwag):
     * pomaranczowe paski naglowkow WYRZUCONE - kolor zostaje tylko na szynie
       przy krawedzi panelu, wiec pomaranczowy znowu cos znaczy, zamiast byc
       tlem co drugiego elementu;
     * naglowek sekcji to ciemna belka w obramowaniu z bialym, wytluszczonym
       napisem - czyta sie jak podpis rubryki w formularzu papierowym;
     * `overflow: hidden` MUSI byc zdjete: rozwijana lista wyboru jest
       pozycjonowana absolutnie i przy obcinaniu po prostu znikala - stad
       „nie widac, co wybrac". */
.kreator-sekcja {
  border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 1.2rem; background: var(--surface);
}
.kreator-sekcja:last-child { margin-bottom: 0; }
.kreator-sekcja-pasek {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  padding: .65rem 1rem; font-size: var(--fs-base); font-weight: 800;
  /* Kolory ze zmiennych motywu: `--pigulka` jest ciemna w obu motywach, ale
     w ciemnym rozjasnia sie na tyle, zeby belka nie zlala sie z tlem strony
     (zob. komentarz przy definicji `--pigulka`). --navy zostaje paskowi. */
  color: #fff; background: linear-gradient(135deg, var(--pigulka), var(--pigulka-jasniej));
  border: 1px solid var(--pigulka-obwodka); border-radius: 13px 13px 0 0;
  letter-spacing: .02em; text-align: left;
}
.kreator-sekcja-ico { display: inline-grid; place-items: center; color: #fff; }
.kreator-sekcja-ico svg { width: 15px; height: 15px; }
.kreator-sekcja-tresc { padding: 1.1rem 1.1rem .4rem; text-align: left; }
.kreator-sekcja-tresc .field-row + .field-row { border-top: 1px dashed var(--border); }
.kreator-sekcja-opis {
  margin: -.2rem 0 .9rem; color: var(--muted); font-size: var(--fs-sm);
}
.kreator-sekcja-nota {
  display: flex; align-items: center; gap: .45rem; margin: .2rem 0 1rem;
  color: var(--muted); font-size: var(--fs-sm);
}
.kreator-sekcja-nota svg { width: 14px; height: 14px; color: var(--brand); flex-shrink: 0; }

/* Wszystko w kreatorze czyta sie OD LEWEJ: etykiety, wartosci, podsumowanie.
   Wyrownanie do prawej w podsumowaniu rozjezdzalo kolumny - oko musialo
   skakac miedzy lewa a prawa krawedzia. */
.kreator-page .wizard-panel,
.kreator-page .field,
.kreator-page .field label,
.kreator-page .wizard-sum-group dt,
.kreator-page .wizard-sum-group dd { text-align: left; }
.kreator-page .wizard-sum-group dl > div {
  display: grid; grid-template-columns: minmax(9rem, 40%) 1fr; gap: .6rem;
}
.kreator-page .field-row { justify-content: flex-start; }

/* --- Podsumowanie: podzial na sekcje, bez pomaranczowego tla ------------- */
.wizard-pane-suma .wizard-sum-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.kreator-suma-wstep { margin: -.3rem 0 1.1rem; color: var(--muted); }
.wizard-pane-suma .wizard-sum-group { border-color: var(--border); }
.wizard-pane-suma .wizard-sum-group h3 {
  background: linear-gradient(135deg, var(--pigulka), var(--pigulka-jasniej));
  color: #fff; border-bottom: none; border-radius: 11px 11px 0 0;
}
.wizard-pane-suma .wizard-sum-ico { border-color: rgba(255, 255, 255, .45); color: #fff; }
.wizard-pane-suma .wizard-sum-group dd { color: var(--text); }
/* Pusta rubryka w podsumowaniu ma byc widoczna jako pusta, a nie mylona
   z wpisana wartoscia. */
.wizard-pane-suma .wizard-sum-group dd:not([data-wypelnione]) { color: var(--muted); }
.wizard-pane-suma .wizard-sum-group dd:not([data-wypelnione]) { color: var(--muted); }

/* --- Pole z lista (ten sam wybor, co w karcie pracy) --------------------- */
.kreator-page .pole-z-lista .pole-lista { max-height: 320px; }
.kreator-page .pole-z-lista input[type="text"] {
  min-height: 46px; padding: .6rem 2.6rem .6rem .8rem; border-radius: 10px;
  background: var(--surface); font-size: var(--fs-base);
}
.kreator-page .pole-ikona { width: 34px; height: 34px; right: .45rem; }

/* --- Szyna koloru przy krawedzi panelu: zaokraglona u gory i u dolu ------
   Prosta belka konczyla sie ostrym kantem przy zaokraglonym rogu panelu.
   Teraz ma ten sam promien, wiec "wchodzi" na gore i na dol razem z ramka. */
.wizard-panel::before { border-radius: 16px 0 0 16px; }
/* --- Przyciski kreatora minimalnie wieksze ------------------------------- */
/* --- Przyciski: nizsze, ale dluzsze ------------------------------------- */
.kreator-page .btn-wizard {
  padding: .5rem 1.9rem; font-size: var(--fs-base); border-radius: 10px;
  min-width: 9.5rem; justify-content: center;
}
.kreator-page .btn-wizard svg { width: 15px; height: 15px; }

/* --- Prostokat naglowka na stronie kreatora jest nizszy ------------------
   Po kliknieciu "Dalej" ma byc widac CALY krok, a nie sam jego poczatek -
   wiec naglowek zajmuje tyle, ile trzeba, zeby wiedziec, gdzie sie jest. */
.kreator-page .hero-section { padding: 1.1rem 1.4rem 1.2rem; margin-bottom: .9rem; }
.kreator-page .oferty-hero-title { font-size: var(--fs-xl); }
.kreator-page .hero-watermark { opacity: .05; }

/* --- Etykieta rubryki jak plakietka w obramowaniu ------------------------
   Prosba 27.08.2026: "numer rejestracyjny dac w obramowanie, taki jakby
   przycisk". Etykieta przestaje byc golym napisem nad polem - jest podpisem
   rubryki, ktory widac przy skanowaniu formularza wzrokiem. Napis „wymagane"
   siedzi w tej samej plakietce, wiec jedno spojrzenie mowi i co to za pole,
   i czy trzeba je wypelnic. */
.kreator-page .field label {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px; padding: .3rem .7rem; margin-bottom: .45rem;
  font-weight: 700; color: var(--text);
}
/* Pola wyboru (checkbox) maja etykiete OBOK kwadracika, nie nad polem -
   tam plakietka byla by tylko ramka wokol calego zdania. */
.kreator-page .konto-nowy-aktywne,
.kreator-page .konta-poziom-opcja,
.kreator-page .pw-rule { background: none; border: 0; padding: 0; }

/* Naglowek kroku i sekcje takze od lewej krawedzi, bez wciecia na srodek. */
.kreator-page .wizard-main { width: 100%; }
.kreator-page .wizard-panel { margin: 0; max-width: none; }
.kreator-page .wizard-actions { max-width: none; margin-left: 0; margin-right: 0; }

/* --- Kolumna podpowiedzi: obie karty tej samej wielkosci -----------------
   „Marki z naszej floty" i „Uwagi" mialy rozna wysokosc (jedna otwarta, druga
   zwinieta, rozna liczba pozycji), wiec kolumna wygladala na niedokonczona.
   Rowne wiersze siatki + wlasne przewijanie listy chipow zamiast rozpychania
   karty. */
.kreator-page .wizard-sugg-col { display: grid; grid-auto-rows: 1fr; align-content: start; }
.kreator-page .wizard-sugg { display: flex; flex-direction: column; min-height: 0; }
.kreator-page .wizard-sugg .sugg-list { overflow-y: auto; }

/* --- Caly kreator o 7% mniejszy (prosba 27.08.2026) ----------------------
   `zoom` zamiast przeliczania kazdego rozmiaru z osobna: skaluje pasek krokow,
   panel, pola i kolumne podpowiedzi razem, wiec proporcje zostaja te same,
   a uklad dalej liczy sie normalnie (w odroznieniu od `transform: scale`,
   ktore zostawiloby po sobie puste miejsce). */
.kreator-page .wizard-steps,
.kreator-page .wizard-layout { zoom: .93; }

/* --- Listy systemowe (<select>) dociagniete do wygladu pol z lista ---------
   W Ofertowaniu czesc list wskazuje KONKRETNY rekord (inwestycja, opiekun,
   wariant, warunki platnosci) - tam wysylamy identyfikator, wiec pole musi
   zostac <select>em. Zeby jednak kreator wygladal jednolicie, dostaje ten sam
   rozmiar, ramke i strzalke, co pole z lista. */
.kreator-page .field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem center, right .85rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.kreator-page .field select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

/* --- Rangi i dostepy: karty zamiast wiersza tabeli -----------------------
   Ranga to nie wiersz danych, tylko zestaw ustawien - lista zakladek bywa
   dluga i w komorce tabeli lamala sie na cztery linijki, rozpychajac rzad.
   Karta daje jej wlasne miejsce, a przyciski stoja pod trescia, nie na koncu
   dlugiego wiersza. */
.rangi-siatka {
  display: grid; gap: 1rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.rangi-karta {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .6rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.1rem 1.2rem;
}
.rangi-karta-glowa { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rangi-karta-glowa h2 { margin: 0; font-size: var(--fs-lg); }
.rangi-karta-kont {
  margin-left: auto; font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .1rem .6rem;
}
.rangi-karta-opis { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.rangi-karta-prawa { display: flex; gap: .35rem; flex-wrap: wrap; }
.rangi-karta-zakladki { margin: 0; }
.rangi-karta-zakladki dt {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--text);
}
.rangi-karta-zakladki dt svg { width: 13px; height: 13px; color: var(--brand); }
.rangi-karta-zakladki dd { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.rangi-karta-akcje {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .6rem;
  border-top: 1px dashed var(--border);
}

/* ===== Karta pracy: spis rok po roku ====================================
   Papierowa karta miala przekladki na miesiace - tutaj jest to samo. Rok jest
   sekcja, miesiac podsekcja, dni w srodku. Wszystko na <details>, wiec dziala
   bez JS-u, a skrypt wyszukiwania tylko chowa to, co nie pasuje. */
.kp-lata { display: flex; flex-direction: column; gap: .7rem; margin-top: .8rem; }
.kp-rok {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden;
}
.kp-rok[hidden], .kp-miesiac[hidden] { display: none; }
.kp-rok-glowa, .kp-miesiac-glowa {
  display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none;
  padding: .8rem 1rem; font-weight: 800;
}
.kp-rok-glowa::-webkit-details-marker,
.kp-miesiac-glowa::-webkit-details-marker { display: none; }
.kp-rok-glowa { font-size: var(--fs-lg); background: var(--surface-2); }
.kp-rok-nazwa { letter-spacing: .02em; }
.kp-rok-liczby, .kp-miesiac-liczby {
  margin-left: auto; font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
}
.kp-rok-strzalka, .kp-miesiac-strzalka {
  display: inline-grid; place-items: center; color: var(--brand);
  transition: transform .15s ease;
}
.kp-rok-strzalka svg, .kp-miesiac-strzalka svg { width: 14px; height: 14px; }
.kp-rok[open] > .kp-rok-glowa .kp-rok-strzalka,
.kp-miesiac[open] > .kp-miesiac-glowa .kp-miesiac-strzalka { transform: rotate(90deg); }

.kp-miesiace { display: flex; flex-direction: column; gap: .5rem; padding: .6rem .8rem .9rem; }
.kp-miesiac {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.kp-miesiac-glowa { font-size: var(--fs-base); }
.kp-miesiac-nazwa { text-transform: capitalize; }
.kp-miesiac-dni { padding: 0 .7rem .7rem; display: flex; flex-direction: column; gap: .5rem; }


/* Pasek szukania w karcie pracy stoi tuz pod naglowkiem „Moja praca" i niesie
   w sobie takze opis zakresu oraz przejscie do calej historii - trzy podpisy
   tej samej rzeczy jeden pod drugim zeszly do jednego paska (27.08.2026). */
.kp-szukaj { margin: 0 0 .9rem; }
/* JEDNA RAMKA „Spis dni" (03.09.2026): naglowek z liczba dni i wyjsciem
   w cala historie, pod nim pasek wyszukiwania i lata. */
.kp-spis { padding: 0; overflow: hidden; }
.kp-spis-glowa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.2rem; background: var(--surface-2);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.kp-spis-glowa .prac-spis-link { margin-left: 0; }
.kp-spis-glowa .fleet-filter-count { margin-left: .4rem; vertical-align: middle; }
.kp-spis-szukaj { padding: 1rem 1.2rem .2rem; }
.kp-spis-szukaj .kp-szukaj { margin-bottom: .6rem; }
.kp-spis-tresc { padding: 1rem 1.2rem 1.2rem; }
.kp-spis .kp-lata { margin-top: 0; }
/* Skrot dnia w naglowku: godziny, roboty i miejsca bez rozwijania. */
.prac-dzien-skrot {
  display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  margin-left: .2rem; font-size: var(--fs-sm); color: var(--text);
}
.prac-dzien-skrot-godz { font-weight: 800; color: var(--tekst-mocny); }
.prac-dzien-skrot-gdzie {
  display: inline-flex; align-items: center; gap: .25rem; color: var(--muted);
}
.prac-dzien-skrot-gdzie svg { width: 12px; height: 12px; }
@media (max-width: 700px) { .prac-dzien-skrot { flex-basis: 100%; margin-left: 0; } }
.kp-szukaj .prac-spis-pasek {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  flex-wrap: wrap; margin: .5rem 0 .2rem;
}


/* ============ SKLEP: KLIENCI DO KONTAKTU (zaproszenia na konto instalatora) ===
   Lista, przy ktorej sie DZWONI - wiec numer telefonu jest najwiekszym
   elementem wiersza po nazwie firmy, a nie drobnym napisem w metryczce.
   Kazda pozycja to jedna sprawa: kto, od kiedy czeka, i formularz, ktorym sie
   ja domyka. */
/* KAZDY KLIENT WLASNA, WYRAZNIE ODDZIELONA SEKCJA (prosba 30.08.2026) -
   pozycje zlewaly sie w jedna sciane. To jest lista, przy ktorej sie DZWONI:
   trzeba na pierwszy rzut oka widziec, gdzie konczy sie jedna rozmowa,
   a zaczyna nastepna. Stad wieksza przerwa, mocniejsza ramka, numer porzadkowy
   w rogu i wlasny cien - kazda pozycja to osobna kartka na biurku. */
/* JEDNA SEKCJA = JEDEN PROSTOKAT (prosba 30.08.2026). Cala lista siedzi teraz
   w panelu, tak samo jak "Bez numeru" i "Zalatwione" nizej - inaczej pozycje
   wisialy na golym tle strony i sekcja zlewala sie z nastepna. Panel jest
   jasny (--surface), kartki w srodku ciemniejsze (--surface-2), wiec jedno
   nie znika w drugim. Odstep u gory na numer porzadkowy pierwszej kartki. */
.sklep-panel { padding-top: 1.5rem; }
.sklep-lista { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1.4rem; counter-reset: sklep-poz; }
.sklep-poz { position: relative; padding: 1.1rem 1.2rem 1rem; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 4px solid color-mix(in srgb, var(--brand) 55%, var(--border));
  box-shadow: 0 10px 20px -18px rgba(2, 8, 23, .55); }
/* UWAGA: NIE dawaj tu `content-visibility: auto` (probowane 08.09.2026).
   Wlacza ono takze `contain: style`, a to zamyka liczniki CSS wewnatrz
   kartki - numer porzadkowy nizej przestalby liczyc i kazda pozycja
   pokazywalaby „1". Do tego `contain: paint` scielo by ten numer, bo
   plakietka celowo wystaje ponad gorna krawedz kartki. */
/* Numer porzadkowy - odpowiada na pytanie "ile jeszcze zostalo" bez liczenia. */
.sklep-poz::before {
  counter-increment: sklep-poz; content: counter(sklep-poz);
  position: absolute; top: -.7rem; left: 1rem;
  min-width: 1.5rem; padding: .05rem .45rem; border-radius: 999px;
  font-size: var(--fs-micro); font-weight: 700; text-align: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
/* Po terminie - lewa krawedz na czerwono. Pozycja NIE znika i nie zmienia
   miejsca: „spoznione" ma byc widoczne, a nie schowane. */
.sklep-poz-spozniona { box-shadow: inset 4px 0 0 var(--danger, #dc2626); }
.sklep-poz-glowa { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .6rem 1rem; margin-bottom: .5rem; }
.sklep-poz-kto { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.sklep-poz-nazwa { font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.sklep-poz-meta { font-size: var(--fs-sm); color: var(--muted); }
.sklep-telefon {
  display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0;
  padding: .5rem .9rem; border-radius: 999px; text-decoration: none;
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: .01em;
  color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: 0 6px 16px -8px rgba(2, 8, 23, .5);
}
.sklep-telefon:hover { filter: brightness(1.06); }
.sklep-telefon svg { width: 17px; height: 17px; }
.sklep-poz-fakty { display: flex; flex-wrap: wrap; gap: .35rem .9rem;
  font-size: var(--fs-sm); color: var(--muted); margin-bottom: .5rem; }
.sklep-fakt { display: inline-flex; align-items: center; gap: .3rem; }
.sklep-fakt-blad { color: var(--danger, #dc2626); font-weight: 600; }
.sklep-notatka { margin: 0 0 .6rem; font-size: var(--fs-sm); color: var(--text);
  padding: .4rem .65rem; border-radius: 8px; background: var(--bg);
  border-left: 3px solid var(--border); }
.sklep-form { border-top: 1px dashed var(--border); padding-top: .7rem; }
.sklep-form-pola { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; }
.sklep-form .field { margin-bottom: .35rem; }
.sklep-form-akcje { display: flex; justify-content: flex-end; }
.sklep-poz-inne { display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: flex-end; margin-top: .5rem;
  border-top: 1px solid var(--border); padding-top: .55rem; }
.sklep-lista-prosta { list-style: none; margin: .6rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .4rem; font-size: var(--fs-sm); }
.sklep-lista-prosta li { display: flex; flex-wrap: wrap; align-items: center;
  gap: .3rem .7rem; padding: .4rem 0; border-bottom: 1px solid var(--border); }
.sklep-lista-prosta li:last-child { border-bottom: none; }
.sklep-instrukcja { margin: .3rem 0 .6rem; padding-left: 1.2rem; line-height: 1.65; }
.sklep-instrukcja li { margin-bottom: .35rem; }
/* PODSEKCJA W ZAKLADCE E-COMMERCE. Sekcja („Klienci do kontaktu") opisuje
   rzecz, podsekcja („Lista do dzwonienia") prowadzi do roboty - wiec musi byc
   widac, ze to osobny krok w srodku prostokata, a nie kolejny akapit. Stad
   kreska u gory, wlasne tlo i akcent marki przy lewej krawedzi. */
.sklep-podsekcja {
  margin-top: .9rem; padding: .8rem .9rem .9rem;
  border-top: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: 0 10px 10px 0; background: var(--surface-2);
}
.sklep-podsekcja-h {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin: 0 0 .3rem; font-size: var(--fs-md); font-weight: 700; color: var(--text);
}
.sklep-podsekcja-h svg { width: 18px; height: 18px; color: var(--brand); }
.sklep-podsekcja p { margin: 0 0 .6rem; }
/* Wyszukiwarka ekranu - odstep taki, jak miedzy sekcjami, zeby pasek nie
   przykleil sie do ostrzezen nad nim. */
.sklep-szukaj { margin: 1.2rem 0 .4rem; }
/* TRAFIENIE ZAPALA SAMA NAZWE KLIENTA, nie cala kartke (poprawka 30.08.2026).
   Zapalona na pomaranczowo kartka z formularzem, plakietkami i trzema
   przyciskami w srodku byla nieczytelna - a szuka sie zawsze po nazwie, wiec
   to ona ma odpowiedziec „tu jestem". Podswietlenie obejmuje CALA nazwe, a nie
   trafiony fragment: firma nazywa sie „Instalacje Kowalski sp. z o.o.", a nie
   „kowal". */
.sklep-poz-nazwa.jest-trafienie,
.kosz-nazwa.jest-trafienie,
.sklep-lista-prosta li b.jest-trafienie {
  border-radius: 6px; padding: .05rem .35rem; margin-left: -.35rem;
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  box-shadow: inset 2px 0 0 var(--brand);
  color: var(--brand-dark);
}

/* PODSEKCJE „Do zadzwonienia" - po terminie i w terminie. Kreska z podpisem
   i licznikiem w srodku prostokata: sekcja zostaje jedna, a widac w niej dwie
   kupki roboty. Pilna dostaje czerwona szyne, zwykla - markowa. */
.sklep-podsekcja-blok + .sklep-podsekcja-blok { margin-top: 1.6rem; }
.sklep-podsekcja-blok > .sklep-podsekcja-h {
  margin: 0 0 .2rem; padding: .55rem .7rem;
  border-radius: 10px; border-left: 3px solid var(--brand);
  background: var(--surface-2);
}
.sklep-podsekcja-blok > .sklep-podsekcja-h.sklep-podsekcja-pilna {
  border-left-color: var(--danger, #dc2626);
  background: color-mix(in srgb, var(--danger, #dc2626) 8%, var(--surface-2));
}
.sklep-podsekcja-blok > .sklep-podsekcja-h.sklep-podsekcja-pilna svg { color: var(--danger, #dc2626); }
.sklep-podsekcja-opis {
  margin: 0 0 1rem; padding-left: .7rem;
  font-size: var(--fs-sm); color: var(--muted);
}
/* Naglowek podsekcji w zwyklym prostokacie („Narzedzia listy", „Jak to
   dziala") - bez tla, za to z kreska nad soba. Pierwszy nie ma czego
   oddzielac, wiec kreski nie dostaje. */
.module-panel > .sklep-podsekcja-h {
  margin: 1.2rem 0 .5rem; padding-top: .9rem;
  border-top: 1px solid var(--border);
}
.module-panel > .sklep-podsekcja-h:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.sklep-narzedzia { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }

/* KROK NA KARTCE („Po rozmowie", „Jesli rozmowa nie doszla do skutku").
   Kartka szla dotad jednym ciagiem: fakty, formularz, przyciski - bez slowa
   o tym, ktora czesc robi sie KIEDY. Cienka kreska z podpisem dzieli ja na
   to, co przed telefonem, i to, co po nim. */
.sklep-krok {
  display: flex; align-items: center; gap: .4rem;
  margin: .9rem 0 .5rem; padding-top: .6rem;
  border-top: 1px dashed var(--border);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text);
  text-transform: none;
}
.sklep-krok svg { width: 15px; height: 15px; color: var(--brand); }
.sklep-krok-cichy { color: var(--muted); font-weight: 600; }
.sklep-krok-cichy svg { color: var(--muted); }
/* Formularz ma juz swoja kreske z gory - z podpisem nad nim byla by druga. */
.sklep-krok + .sklep-form { border-top: none; padding-top: 0; }
/* Znak „dodane recznie" przy nazwie - ta sama konwencja, co pigulka kreatora
   w pozostalych zakladkach: dane z Subiekta i dane z reki to inna pewnosc. */
.sklep-znak-reczny {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .05rem .4rem; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand-dark); font-weight: 700; font-size: var(--fs-micro);
}
.sklep-znak-reczny svg { width: 12px; height: 12px; }
@media (max-width: 700px) {
  .sklep-form-pola { grid-template-columns: 1fr; }
  .sklep-telefon { width: 100%; justify-content: center; }
}


/* ============ ZROBIONE W TYM TYGODNIU: SIEDEM DNI, KAZDY OSOBNO ============
   Wczesniej byl to ciag wpisow z doklejona data i wszystko zlewalo sie w jedna
   plame. Teraz kazdy dzien to WLASNA sekcja z naglowkiem i licznikiem - takze
   dzien pusty, bo „w czwartek nie zamknieto niczego" jest odpowiedzia tak samo,
   jak lista z pieciu rzeczy. */
.kok-dzien {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); padding: .1rem .8rem .6rem;
  margin-bottom: .7rem;
}
.kok-dzien-glowa {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem 0 .5rem; border-bottom: 1px solid var(--border);
}
.kok-dzien-nazwa { font-weight: 700; font-size: var(--fs-base); color: var(--text); }
.kok-dzien-data { color: var(--muted); font-size: var(--fs-sm); }
/* Licznik po prawej - od razu widac, ktory dzien byl gesty, bez czytania listy. */
.kok-dzien-ile {
  margin-left: auto; font-weight: 700; font-size: var(--fs-sm);
  min-width: 1.6rem; text-align: center; padding: .05rem .45rem;
  border-radius: 999px; background: var(--surface-2); color: var(--muted);
}
.kok-dzien-znacznik {
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: .05rem .4rem; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand);
}
/* Dzien bez wpisow zostaje na liscie, ale przygaszony - ma byc widoczna luka,
   a nie brak dnia. */
.kok-dzien-pusty { background: transparent; border-style: dashed; }
.kok-dzien-pusty .kok-dzien-glowa { border-bottom: none; }
.kok-dzien-nic { margin: 0 0 .2rem; font-size: var(--fs-sm); color: var(--muted); font-style: italic; }
.kok-dzien-dzis { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.kok-zrobione-poz { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
/* Przyciski wiersza w jednej grupie, dosunietej do prawej krawedzi. */
.kok-zrobione-akcje { margin-left: auto; display: flex; gap: .4rem; align-items: center; }

/* COFNIJ W KOLORZE (prosba 30.08.2026). Cofniecie odhaczenia zmienia stan
   sprawy, wiec ma wygladac jak decyzja, a nie jak trzeci szary napis w rzedzie.
   Czerwony wariant „cichy": obwodka i tekst, bez pelnego wypelnienia - to nadal
   ruch odwracalny, nie kasowanie. */
.kok-btn-cofnij {
  color: var(--danger, #dc2626); font-weight: 700;
  border-color: color-mix(in srgb, var(--danger, #dc2626) 45%, var(--border));
  background: color-mix(in srgb, var(--danger, #dc2626) 8%, transparent);
}
.kok-btn-cofnij:hover {
  color: #fff; background: var(--danger, #dc2626);
  border-color: var(--danger, #dc2626);
}
/* SZCZEGOLY NA ZIELONO (prosba 30.08.2026). Zielony obok czerwonego
   "Cofnij" niesie tu sens, a nie sam kolor: podglad niczego nie zmienia,
   cofniecie zmienia stan sprawy. Po kolorze widac to, zanim sie przeczyta. */
.kok-btn-podglad {
  font-weight: 700;
  color: var(--ok-tx, #15803d);
  border-color: color-mix(in srgb, var(--ok-tx, #15803d) 45%, var(--border));
  background: color-mix(in srgb, var(--ok-tx, #15803d) 8%, transparent);
}
.kok-btn-podglad:hover {
  color: #fff; background: var(--ok-tx, #15803d);
  border-color: var(--ok-tx, #15803d);
}
/* Kafel w oknie podgladu jest kopia kafla z tablicy, wiec siedzi w `ol.kok-kafle`
   - w oknie ma byc jeden na cala szerokosc, bez siatki i bez marginesu. */
.veh-modal-body .kok-kafle { display: block; margin: 0; padding: 0; }
.veh-modal-body .kok-kafel { margin: 0; }

/* Tresc okna z podgladem odhaczonej sprawy. */
.zrobione-szczegoly { display: grid; gap: .55rem; margin: 0; }
.zrobione-poz { display: grid; grid-template-columns: 8rem 1fr; gap: .6rem; align-items: start; }
.zrobione-poz dt { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.zrobione-poz dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.zrobione-wyjscie { margin: 1rem 0 0; }
@media (max-width: 620px) {
  .zrobione-poz { grid-template-columns: 1fr; gap: .1rem; }
  .kok-zrobione-akcje { margin-left: 0; width: 100%; }
}

/* KLIENCI DO KONTAKTU JAKO PROSTOKATY (03.09.2026) - ten sam kafelek, co
   w Klientach, plus dolna linijka z tym, co zmienia sie po telefonie. */
.sklep-karta-stopka {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem;
  margin: 0; padding-top: .6rem; border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--muted);
}
.sklep-karta-notatka { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; }
.sklep-karta-notatka svg { width: 13px; height: 13px; flex-shrink: 0; }
/* Karta klienta do kontaktu: numer telefonu duzy, na wierzchu. */
.sklep-telefon-duzy {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .9rem;
  font-size: var(--fs-xl, 1.35rem); font-weight: 800;
}
.sklep-telefon-duzy svg { width: 20px; height: 20px; }
/* Wyglad `.sklep-brak-numeru` stoi nizej, przy krokach karty klienta -
   brak numeru przestal byc szarym zdaniem, a stal sie powodem, dla ktorego
   tej sprawy nie da sie ruszyc. */
.hero-stat-value-tekst { font-size: var(--fs-md); line-height: 1.3; }

/* Kalendarz pod ikona „Dzien" na karcie pracy - niewidoczny, ale zywy:
   showPicker() musi miec prawdziwe pole `type=date` do otwarcia. */
.pole-kalendarz-ukryty {
  position: absolute; right: 0; top: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; padding: 0 !important; border: 0;
}

/* ============ KREATORY: WSZYSTKO W JEDNYM KADRZE (prosba 03.09.2026) ============
   Naglowek, pasek postepu, krok i przyciski maja miescic sie na ekranie bez
   przewijania. Prostokat naglowka jest nizszy (bez wzorow w tle i bez
   wiersza „Kreator"), pasek postepu i rubryki ciasniejsze, a rzad
   przyciskow „Dalej / Wroc do..." PRZYKLEJONY do dolu okna - zawsze widac,
   jak isc dalej, nawet gdy krok ma wiecej rubryk niz miesci ekran. */
.kreator-page .hero-section { padding: .7rem 1.1rem .7rem; margin-bottom: .8rem; }
.kreator-page .hero-section .hero-top { display: none; }
.kreator-page .hero-section .hero-ai-pattern,
.kreator-page .hero-section .hero-watermark { display: none; }
.kreator-page .oferty-hero-title { font-size: var(--fs-lg); }
.kreator-page .oferty-hero-sub { font-size: var(--fs-sm); }
.kreator-page .oferty-hero-ico { width: 38px; height: 38px; }
.kreator-page .oferty-hero-ico svg { width: 20px; height: 20px; }

.kreator-page .wizard-steps { padding: .4rem 1.5rem .3rem; margin-bottom: .8rem; }
.kreator-page .wizard-line { top: 18px; }
.kreator-page .wizard-step { gap: .25rem; }
.kreator-page .wizard-step-dot { width: 30px; height: 30px; font-size: var(--fs-sm); }
.kreator-page .wizard-step-label { font-size: var(--fs-micro); }

.kreator-page .wizard-panel { padding: .9rem 1.2rem 1rem 1.4rem; }
.kreator-page .wizard-pane-title { font-size: var(--fs-lg); margin-bottom: .6rem; }
.kreator-page .field { margin-bottom: .55rem; }
.kreator-page .field label { font-size: var(--fs-sm); margin-bottom: .2rem; }
.kreator-page .field input,
.kreator-page .field select,
.kreator-page .field textarea {
  min-height: 38px; font-size: var(--fs-sm); padding: .4rem .65rem; border-radius: 8px;
}
.kreator-page .field textarea { min-height: 62px; }
.kreator-page .field-hint { font-size: var(--fs-micro); margin-top: .15rem; }
.kreator-page .kreator-sekcja { margin-bottom: .7rem; }
.kreator-page .kreator-sekcja-pasek { padding: .35rem .7rem; font-size: var(--fs-sm); }
.kreator-page .kreator-sekcja-tresc { padding: .6rem .8rem .3rem; }
.kreator-page .field-row { gap: .6rem; }

.kreator-page .wizard-actions {
  position: sticky; bottom: 0; z-index: 5;
  margin-top: .8rem; padding: .6rem 0 .7rem;
  background: var(--bg, var(--surface-2));
  border-top: 1px solid var(--border);
}

/* ===== PRACA W KONTEKSCIE INNEGO KONTA =====================================
   Sygnal ma byc NIE DO PRZEOCZENIA, bo cena pomylki jest wysoka: wpis pod cudzym
   nazwiskiem. Pierwsza wersja byla za cicha (zgloszenie Macieja 04.09.2026:
   "jest malo widoczne") - mala plakietka w pasku bocznym i baner, ktory na
   ciemnym motywie zlewal sie z tlem.

   Teraz sygnal jest w PIECIU miejscach naraz, kazde niezalezne: ramka wokol
   calego okna, pas nad trescia, kolor gornej belki, kafelek konta w pasku
   bocznym i tytul karty przegladarki. Gdyby ktores przestalo dzialac po zmianie
   szablonu, zostaja cztery.

   Kolory: fiolet #7c3aed / #a78bfa. Wybrany, bo firmowy jest pomaranczowy,
   a ostrzegawcze czerwien i zolc sa juz zajete przez alarmy - kontekst nie jest
   bledem, tylko innym stanem pracy. */
:root { --kontekst: #7c3aed; --kontekst-jasny: #a78bfa; --kontekst-tlo: #ede9fe;
        --kontekst-tekst: #3b0764; }
:root[data-motyw="ciemny"], html[data-motyw="ciemny"] {
  --kontekst: #a78bfa; --kontekst-jasny: #c4b5fd;
  --kontekst-tlo: #1e162f; --kontekst-tekst: #ddd6fe;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) {
    --kontekst: #a78bfa; --kontekst-jasny: #c4b5fd;
    --kontekst-tlo: #1e162f; --kontekst-tekst: #ddd6fe;
  }
}

/* 1. RAMKA WOKOL CALEGO OKNA - widoczna niezaleznie od tego, gdzie sie patrzy
      i jak daleko przewinieto strone. */
html[data-kontekst]:not([data-kontekst=""]) body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  border: 4px solid var(--kontekst);
}

/* 2. GORNA BELKA w kolorze kontekstu */
html[data-kontekst]:not([data-kontekst=""]) .topbar {
  background: linear-gradient(90deg, #4c1d95 0%, #6d28d9 100%);
  border-bottom: 2px solid var(--kontekst-jasny);
}
html[data-kontekst]:not([data-kontekst=""]) .topbar .page-title,
html[data-kontekst]:not([data-kontekst=""]) .topbar a { color: #f5f3ff; }
html[data-kontekst]:not([data-kontekst=""]) .topbar-accent { background: var(--kontekst-jasny); }

/* 3. PAS NAD TRESCIA - przyklejony, wiec przewijanie go nie chowa */
.kontekst-pasek {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 14px 18px;
  background: var(--kontekst-tlo);
  border: 2px solid var(--kontekst); border-left: 8px solid var(--kontekst);
  border-radius: 10px; color: var(--kontekst-tekst);
  box-shadow: 0 4px 16px rgba(124, 58, 237, .25);
}
.kontekst-znak {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--kontekst); color: #fff; font-size: 21px; font-weight: 800;
}
.kontekst-tresc { display: flex; flex-direction: column; gap: 3px; flex: 1 1 320px; }
.kontekst-naglowek { font-size: 17px; font-weight: 700; letter-spacing: .2px; }
.kontekst-naglowek b { color: var(--kontekst); }
.kontekst-podpis { font-size: 13px; opacity: .85; }
.kontekst-plakietki { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.kontekst-detal {
  padding: 2px 9px; border-radius: 999px; font-size: 12px;
  background: var(--kontekst); color: #fff;
}
.kontekst-nieaktywne { background: var(--warn-tx); color: #241c0d; }
.kontekst-wyjscie {
  flex: none; padding: 10px 18px; border-radius: 8px; white-space: nowrap;
  background: var(--kontekst); color: #fff; font-weight: 700; text-decoration: none;
  border: 2px solid transparent;
}
.kontekst-wyjscie:hover { background: #6d28d9; border-color: var(--kontekst-jasny); }

/* 4. KAFELEK KONTA w pasku bocznym. Awatar nosi inicjaly WLASCICIELA - inaczej
      pokazywal cudze litery obok wlasnego nazwiska. */
.account-trigger-kontekst {
  background: var(--kontekst-tlo) !important;
  border: 2px solid var(--kontekst) !important;
  border-radius: 10px;
}
.account-kontekst { display: block; margin-top: 4px; line-height: 1.25; }
.account-kontekst-lab {
  display: block; font-size: 9px; font-weight: 800; letter-spacing: 1.1px;
  color: var(--kontekst-jasny); text-transform: uppercase;
}
.account-kontekst-kto {
  display: block; font-size: 13px; font-weight: 700; color: var(--kontekst-jasny);
}

/* Lista wyboru osoby */
.kontekst-lista { list-style: none; margin: 16px 0 0; padding: 0; }
.kontekst-poz {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.kontekst-poz-nieaktywna { background: var(--surface-2); }
.kontekst-kto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Wpis karty pracy zrobiony przez kogos innego w kontekscie tej osoby. */
.prac-wpis-wpisal {
  display: block; margin-top: 3px;
  color: #6d28d9; font-size: 12px; font-style: italic;
}

/* Numer dokumentu Subiekta jako odnosnik do jego karty (makro _dokument.html,
   05.09.2026). Kreska pod numerem mowi „to sie otwiera", kolor zostaje jak
   w tekscie, zeby tabele nie zrobily sie niebieskie od linkow. */
.link-dok { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.link-dok:hover { color: var(--brand-dark); text-decoration-style: solid; }
.link-dok-cichy { font-size: var(--fs-micro); font-weight: 600; color: var(--muted); }

/* ============ 05.09.2026: przejrzystosc i klikalnosc ============ */
/* Dwie zakladki karty klienta (Klient / O projekcie) na CALA szerokosc,
   rowne polowy. */
.karta-zakladki { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.karta-zakladka { justify-content: center; white-space: normal; }

/* KAZDY odnosnik w tresci (numer dokumentu, nazwa klienta, towar) po
   najechaniu robi sie pomaranczowy - jeden sygnal „to sie otwiera" w calej
   aplikacji. */
.content a:not(.btn-small):not(.btn-wizard):not(.btn-hero-sm):not(.btn-hero-ghost):not(.btn-powrot):not(.btn-akcja):not(.btn-sekcja-duzy):not(.karta-zakladka):not(.nav-item):not(.prac-spis-link):hover,
.link-dok:hover, .link-tresci:hover, .tbl a:hover, .fleet-name a:hover, .karta-lista-tytul:hover {
  color: var(--brand) !important; text-decoration-color: var(--brand);
}
.fleet-name a { color: inherit; text-decoration: none; }
.fleet-name a:hover { text-decoration: underline; }

/* Przyciski dopisywania w „Gdzie to jest" (zakladka Projekt). */
.projekt-adres-akcje { display: flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.projekt-adres .karta-rog-pigulka { margin-top: .3rem; }
/* Dwa przyciski w „Gdzie to jest" - o 10% wieksze, ROWNE (siatka dwu
   jednakowych kolumn) i w jednej linii (prosba 05.09.2026). */
.projekt-adres-akcje { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-left: auto; }
.projekt-adres-akcje .btn-small {
  height: 33px; padding: 0 .95rem; font-size: calc(var(--fs-base) * 1.1); white-space: nowrap;
}
@media (max-width: 720px) { .projekt-adres-akcje { grid-template-columns: 1fr; width: 100%; } }
/* „Popraw" przy wpisach dopisanych recznie (zasada 05.09.2026: co dopisane,
   da sie poprawic). Przy dokumentach i postojach - cichy odnosnik jak kosz. */
.btn-popraw-hero { margin-left: .5rem; vertical-align: middle; }
.dok-popraw, .dok-popraw-mini {
  display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fs-micro);
  font-weight: 700; color: var(--muted); text-decoration: none; margin-left: .4rem;
}
.dok-popraw svg, .dok-popraw-mini svg { width: 12px; height: 12px; }
.dok-popraw:hover, .dok-popraw-mini:hover { color: var(--brand); }
.inw-poz-popraw { margin-right: .4rem; }
/* „Usun wpis i zacznij od nowa" w kreatorze - czerwien dopiero po najechaniu,
   zeby nie krzyczala glosniej niz sam formularz. */
.btn-wizard-danger { color: var(--muted); border-style: dashed; }
.btn-wizard-danger:hover { color: var(--warn-tx, #b42318); border-color: var(--warn-bd, #f04438); background: var(--warn-bg, #fef3f2); }
/* WPIS DNIA NA CALA SZEROKOSC (prosba 05.09.2026). Karta dziedziczyla po
   `.prac-wpisy li` wyrownanie do lewej (`align-items: flex-start`), przez co
   naglowek i siatka osmiu kafelkow kurczyly sie do swojej tresci i po prawej
   zostawal pusty pas. Teraz rozciagaja sie do krawedzi, a „Usun" stoi
   w prawym gornym rogu karty, obok sumy godzin. */
.prac-wpisy .prac-wpis-karta { align-items: stretch; position: relative; }
.prac-wpis-karta .prac-wpis-glowa, .prac-wpis-karta .prac-wpis-pola { width: 100%; }
.prac-wpis-karta .prac-wpis-glowa { padding-right: 5.2rem; }
.prac-wpis-karta .prac-usun-form { position: absolute; top: .7rem; right: .8rem; align-self: auto; }
@media (max-width: 700px) {
  .prac-wpis-karta .prac-wpis-glowa { padding-right: 0; }
  .prac-wpis-karta .prac-usun-form { position: static; align-self: flex-end; }
}
/* Kilku klientow / kilka miejsc w jednym wpisie karty pracy - kazdy w swojej
   linii, zeby lista po sredniku nie zlewala sie w jeden ciag. */
.prac-wiele { display: block; }
.prac-wiele + .prac-wiele { margin-top: .15rem; }


/* ============ USUNIETE (kosz calej aplikacji) ============================
   Ekran odpowiada po kolei na trzy pytania: CO zniknelo, KTO to zdjal
   i KIEDY - a po rozwinieciu takze CO W TYM BYLO. Uklad jest wiec taki sam,
   jak na liscie do dzwonienia: jedna sekcja to jeden prostokat, a w srodku
   osobne kartki, zeby nie zlewaly sie w sciane. */
.kosz-szukaj { margin: 1.2rem 0 .4rem; }
.kosz-lista { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1rem; }
.kosz-poz {
  position: relative; padding: .9rem 1rem; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 4px solid color-mix(in srgb, var(--danger, #dc2626) 45%, var(--border));
}
.kosz-poz-glowa {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: .5rem 1rem;
}
.kosz-poz-kto { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
/* Rodzaj rzeczy - male, wytluszczone, z ikona zakladki, z ktorej pochodzi.
   Odpowiada na „czego to w ogole dotyczy", zanim czlowiek przeczyta nazwe. */
.kosz-rodzaj {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.kosz-rodzaj svg { width: 13px; height: 13px; }
.kosz-nazwa { font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.kosz-poz-meta { font-size: var(--fs-sm); color: var(--muted); }
.kosz-kiedy {
  display: flex; flex-direction: column; align-items: flex-end; gap: .15rem;
  font-size: var(--fs-sm); color: var(--muted); flex-shrink: 0;
}
.kosz-kto { display: inline-flex; align-items: center; gap: .3rem; }
.kosz-kto svg { width: 13px; height: 13px; }
/* Co poszlo razem z ta rzecza - jedno zdanie, zeby nie robic z tego listy
   dwudziestu osobnych pozycji w koszu. */
.kosz-razem {
  display: flex; align-items: center; flex-wrap: wrap; gap: .3rem;
  margin: .7rem 0 0; padding-top: .6rem;
  border-top: 1px dashed var(--border);
  font-size: var(--fs-sm); color: var(--muted);
}
.kosz-razem svg { width: 14px; height: 14px; color: var(--brand); }
.kosz-plakietka {
  padding: .05rem .4rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-micro); font-weight: 600; color: var(--text);
}
.kosz-tresc { margin-top: .7rem; }
.kosz-tresc > summary { list-style: none; cursor: pointer; display: inline-block; }
.kosz-tresc > summary::-webkit-details-marker { display: none; }
/* Migawka wiersza - rubryki w siatce, jak `fleet-facts` przy pojezdzie.
   Nazwy kolumn zostaja techniczne (`data_wystawienia`), bo to jest zapis
   z bazy, a nie formularz - udawanie ladnych etykiet gubiloby, ktore pole
   naprawde bylo wypelnione. */
.kosz-dane {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .4rem .9rem; margin: .8rem 0 .6rem;
}
.kosz-dane > div {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .35rem .5rem; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border); min-width: 0;
}
.kosz-dane dt {
  font-size: var(--fs-micro); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.kosz-dane dd {
  margin: 0; font-size: var(--fs-sm); color: var(--text);
  overflow-wrap: anywhere;
}
.kosz-podtytul { margin: .9rem 0 .2rem; font-size: var(--fs-md); }
@media (max-width: 700px) {
  .kosz-kiedy { align-items: flex-start; }
}
/* Rzecz, ktora juz wrocila na swoje miejsce - zielona szyna zamiast
   czerwonej. Zostaje w koszu, bo historia „kto usunal, kto przywrocil" jest
   tu najciekawsza rzecza; ma tylko wygladac inaczej niz to, co dalej lezy. */
.kosz-poz-wrocila { border-left-color: var(--ok-tx, #16a34a); }
/* Rzad akcji przy rzeczy: przywrocenie, wejscie w zakladke albo powod,
   dla ktorego powrot dzis nie wyjdzie. */
.kosz-akcje {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed var(--border);
  font-size: var(--fs-sm);
}
.kosz-akcje form { display: inline; }

/* ============ ARCHIWUM: SEKCJE DO ROZWINIECIA =============================
   Jedna sekcja na zakladke, kazda zwijana. Naglowek mowi, CO w niej lezy,
   a nie tylko jak nazywa sie zakladka - dlugie archiwum ma sie dac ogarnac
   wzrokiem bez czytania kazdej kartki. */
.kosz-sekcja { margin: 1.2rem 0 0; }
.kosz-sekcja-glowa {
  display: flex; align-items: center; gap: .7rem; cursor: pointer;
  padding: .7rem .9rem; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  list-style: none;
}
.kosz-sekcja-glowa::-webkit-details-marker { display: none; }
.kosz-sekcja-glowa:hover { background: var(--surface-2); }
.kosz-sekcja-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand-dark);
}
.kosz-sekcja-ico svg { width: 17px; height: 17px; }
.kosz-sekcja-tytul { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.kosz-sekcja-tytul b { font-size: var(--fs-md); color: var(--text); }
.kosz-sekcja-opis {
  font-size: var(--fs-sm); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Strzalka obraca sie przy rozwinieciu - jedyny znak, ze to sie klika. */
.kosz-sekcja-strzalka { display: grid; place-items: center; color: var(--muted); }
.kosz-sekcja-strzalka svg { width: 15px; height: 15px; transform: rotate(90deg); transition: transform .15s ease; }
.kosz-sekcja[open] > .kosz-sekcja-glowa .kosz-sekcja-strzalka svg { transform: rotate(-90deg); }
.kosz-sekcja[open] > .kosz-sekcja-glowa { border-radius: 12px 12px 0 0; }
.kosz-sekcja > .kosz-panel { border-radius: 0 0 12px 12px; border-top: none; }
/* Sekcja z rzeczami, ktore juz wrocily - zielona szyna zamiast markowej. */
.kosz-sekcja-wrocone > .kosz-sekcja-glowa { border-left-color: var(--ok-tx, #16a34a); }
.kosz-sekcja-wrocone > .kosz-sekcja-glowa .kosz-sekcja-ico {
  background: color-mix(in srgb, var(--ok-tx, #16a34a) 14%, transparent);
  color: var(--ok-tx, #16a34a);
}

/* KTO I KIEDY - wyrozniony podpis przy kazdej rzeczy (prosba 08.09.2026).
   To jest drugie pytanie po „co to bylo", wiec nie moze byc szarym drobiazgiem
   w rogu: kolko z inicjalami, nazwisko wytluszczone, godzina pod spodem. */
.kosz-podpis {
  display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
  padding: .35rem .6rem .35rem .4rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
}
.kosz-podpis-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--navy); color: #fff;
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: .02em;
}
.kosz-podpis-tresc { display: flex; flex-direction: column; line-height: 1.25; }
.kosz-podpis-tresc b { font-size: var(--fs-sm); color: var(--text); }
.kosz-podpis-tresc span { font-size: var(--fs-micro); color: var(--muted); }

/* Sekcja, w ktorej cos znaleziono - pomaranczowy naglowek, ta sama konwencja,
   co trafienie w nazwie rzeczy. Odpowiada na „GDZIE to jest", zanim czlowiek
   przeczyta liste. Reszta sekcji zostaje spokojna - szukanie ma wskazywac,
   a nie kolorowac pol ekranu. */
.kosz-sekcja.jest-trafienie > .kosz-sekcja-glowa {
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
}
.kosz-sekcja.jest-trafienie > .kosz-sekcja-glowa .kosz-sekcja-tytul b { color: var(--brand-dark); }

/* ============ ARCHIWUM: WPIS ZWINIETY DO SAMEJ NAZWY =====================
   Sekcja ma sie czytac jak SPIS: rodzaj, nazwa, data - trzydziesci rzeczy
   jedna pod druga, a nie trzydziesci prostokatow z przyciskami. Dopiero
   rozwiniecie jednej pozycji pokazuje, kto ja zdjal i co da sie z nia zrobic. */
.kosz-poz {
  padding: 0; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid color-mix(in srgb, var(--danger, #dc2626) 45%, var(--border));
  overflow: hidden;
}
.kosz-wpis-glowa {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: .5rem .7rem; list-style: none;
}
.kosz-wpis-glowa::-webkit-details-marker { display: none; }
.kosz-wpis-glowa:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.kosz-wpis-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.kosz-wpis-ico svg { width: 14px; height: 14px; }
.kosz-wpis-kto { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1; }
.kosz-wpis-kto .kosz-nazwa { font-size: var(--fs-md); }
.kosz-wpis-data { font-size: var(--fs-sm); color: var(--muted); flex-shrink: 0; }
.kosz-znak-wrocil { flex-shrink: 0; }
.kosz-wpis[open] > .kosz-wpis-glowa {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--brand) 6%, transparent);
}
.kosz-wpis[open] > .kosz-wpis-glowa .kosz-sekcja-strzalka svg { transform: rotate(-90deg); }
.kosz-wpis-tresc { padding: .8rem .9rem .9rem; }
.kosz-wpis-tresc > * + * { margin-top: .7rem; }
/* Rzad faktow, ktorych nie widac z samej nazwy: jak rzecz zniknela, ile tresci
   zapisano, gdzie stala w bazie, czy jest zdjecie. */
.kosz-fakty { display: flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: var(--fs-sm); color: var(--muted); }
.kosz-fakt { display: inline-flex; align-items: center; gap: .3rem; }
.kosz-fakt svg { width: 14px; height: 14px; }
/* Przyciski OBOK SIEBIE, jeden rzad: po lewej to, co zmienia stan rzeczy,
   po prawej podglad, ktory niczego nie rusza. */
.kosz-akcje { justify-content: flex-start; }
.kosz-akcje > [data-podglad] { margin-left: auto; }

/* PODGLAD „co w tym bylo" - tresc okna na srodku ekranu. */
.kosz-podglad-naglowek {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem;
  margin: 0 0 .8rem; font-size: var(--fs-sm);
}
.kosz-podglad-foto {
  margin: 0 0 .9rem; padding: .5rem; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.kosz-podglad-foto img {
  display: block; width: 100%; max-height: 60vh; object-fit: contain;
  border-radius: 8px; background: var(--bg);
}
.kosz-podglad-foto figcaption { margin-top: .4rem; font-size: var(--fs-sm); }
/* METRYCZKA NA GORZE PODGLADU: co, skad, kto, kiedy, jak i w jakim stanie.
   Wczesniej okno zaczynalo sie od surowej tabeli rubryk - czyli od odpowiedzi
   na pytanie, ktore pada dopiero jako czwarte. */
.kosz-metryczka {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .5rem .9rem; margin: 0 0 1rem;
  padding: .8rem .9rem; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.kosz-metryczka > div { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.kosz-metryczka dt {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--fs-micro); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.kosz-metryczka dt svg { width: 13px; height: 13px; }
.kosz-metryczka dd {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin: 0; font-size: var(--fs-sm); color: var(--text); overflow-wrap: anywhere;
}
.kosz-metryczka-kto .kosz-podpis-ico { width: 24px; height: 24px; }

/* PRZYWROCONE - pasek przyklejony do dolu ekranu (prosba 08.09.2026), tak samo
   jak gorny pasek jest przyklejony do gory. Zwiniety jest waska belka
   z licznikiem i nie zabiera miejsca; rozwiniety pokazuje liste z WLASNYM
   przewijaniem, zeby nie przykryl calej strony.

   Zeby to dzialalo, sekcja stoi na samym koncu tresci - `sticky` trzyma
   element przy dole okna tylko dopoki jego naturalne miejsce jest ponizej.
   Cien u gory oddziela pasek od tresci, ktora pod niego wjezdza. */
.kosz-sekcja-wrocone {
  position: sticky; bottom: 12px; z-index: 6;
  margin-top: 1.6rem;
}
.kosz-sekcja-wrocone > .kosz-sekcja-glowa {
  box-shadow: 0 -6px 18px -10px rgba(2, 8, 23, .45), 0 10px 24px -14px rgba(2, 8, 23, .5);
}
.kosz-sekcja-wrocone > .kosz-panel {
  max-height: 46vh; overflow-y: auto;
  box-shadow: 0 14px 30px -18px rgba(2, 8, 23, .5);
}
/* Na telefonie przyklejony pasek zjadalby jedna trzecia ekranu przy kazdym
   przewinieciu - tam zostaje zwyklą sekcja na koncu strony. */
@media (max-width: 760px) {
  .kosz-sekcja-wrocone { position: static; }
  .kosz-sekcja-wrocone > .kosz-panel { max-height: none; }
}
/* DLACZEGO - przyczyna wpisana w chwili usuwania. Stoi zaraz pod podpisem
   („kto" i „czemu" czyta sie razem) i ma wlasne, ciepłe tlo, zeby nie zginela
   miedzy faktami technicznymi. */
.kosz-powod {
  display: flex; align-items: flex-start; gap: .4rem;
  margin: 0; padding: .45rem .6rem; border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--brand) 55%, var(--border));
  font-size: var(--fs-sm); color: var(--text);
}
.kosz-powod svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: .1rem; color: var(--brand-dark); }
/* Naglowek panelu z akcja po prawej - „Dane do rozmowy" i przycisk poprawy
   tuz przy danych, ktorych dotyczy. */
.sklep-panel-glowa {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem;
}
.sklep-panel-glowa > .dash-section-title { margin: 0; }
/* ============ KARTA KLIENTA: JEDEN PROSTOKAT, W NIM ETAPY ================
   Przebudowa 08.09.2026, w dwoch krokach.

   Najpierw: cztery prostokaty o tej samej wadze (dane, formularz, wyjscia
   awaryjne, historia) nie odpowiadaly na jedyne pytanie, z ktorym sie ten
   ekran otwiera - CO MAM TERAZ ZROBIC. Ekran stal sie wiec przebiegiem
   rozmowy: zadzwon -> zapisz adres -> a jesli nie wyszlo.

   Potem („wszystko jest zbyt oddzielone"): etapy zjechaly do JEDNEGO
   prostokata, jeden pod drugim, oddzielone kreska - a nie odlegloscia miedzy
   pieciu kartami w dwoch kolumnach. Numer telefonu i dane firmy, po ktore
   siega sie w trakcie tej samej rozmowy, stoja obok siebie, a nie w innych
   miejscach ekranu. Podzial zostal, rozrzucenie znikło. */
.sklep-karta { padding: 0; overflow: hidden; }
.sklep-etap { padding: 1.1rem 1.2rem; }
.sklep-etap + .sklep-etap { border-top: 1px solid var(--border); }
.sklep-etap-glowa { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .8rem; }
.sklep-etap-glowa > div { min-width: 0; }
.sklep-etap-nr {
  display: grid; place-items: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); font-weight: 800; font-size: var(--fs-sm);
}
.sklep-etap-nr svg { width: 16px; height: 16px; }
.sklep-etap-tytul { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.sklep-etap-opis { margin: .15rem 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* ETAP, PO KTORY SIE TU PRZYCHODZI. Jedno miejsce na ekranie ma byc mocne -
   reszta trzyma sie spokojnie, zeby to bylo widac. Szyna przy lewej krawedzi
   zamiast osobnej ramki: karta zostaje jedna. */
.sklep-etap-glowny { box-shadow: inset 4px 0 0 var(--brand); }
.sklep-etap-glowny .sklep-etap-nr {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.sklep-btn-glowny { padding: .55rem 1.1rem; font-size: var(--fs-md); }

/* Wyjscia awaryjne - przygaszone, bo to nie jest to, po co sie dzwoni. */
.sklep-etap-boczny { background: var(--surface-2); }
.sklep-etap-boczny .sklep-etap-tytul { font-size: var(--fs-md); color: var(--muted); }

/* Sprawa zamknieta - zielona szyna zamiast numeru etapu: nie ma juz nic
   do zrobienia, jest tylko odpowiedz, co sie stalo. */
.sklep-zamkniete .sklep-etap { box-shadow: inset 4px 0 0 var(--ok-tx, #16a34a); }
.sklep-etap-nr-ok {
  background: color-mix(in srgb, var(--ok-tx, #16a34a) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--ok-tx, #16a34a) 40%, var(--border)) !important;
  color: var(--ok-tx, #16a34a) !important;
}
/* Dane firmy W ETAPIE 1 - pod numerem, bo siega sie po nie w trakcie tej
   samej rozmowy. Wezsze rubryki niz domyslne `fleet-facts`, zeby zmiescily
   sie w dwoch, trzech kolumnach i nie rozpychaly karty. */
.sklep-fakty-firmy { margin-top: .9rem; }
.sklep-fakty-firmy > div { padding: .4rem .55rem; }

/* Brak numeru telefonu to nie jest drobiazg - to powod, dla ktorego tej
   sprawy nie da sie ruszyc. Mowi wiec wprost, co z tym zrobic. */
.sklep-brak-numeru {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 0; padding: .7rem .8rem; border-radius: 10px;
  background: color-mix(in srgb, var(--danger, #dc2626) 8%, transparent);
  border-left: 3px solid var(--danger, #dc2626);
  font-size: var(--fs-sm); color: var(--text);
}
.sklep-brak-numeru svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: .1rem; color: var(--danger, #dc2626); }

/* PRZEBIEG SPRAWY - zwiniety, na dole tej samej kolumny. To zapis tego, co
   sie juz wydarzylo: potrzebny, gdy ktos pyta „a kto z nimi rozmawial", a nie
   w trakcie samej rozmowy. */
.sklep-przebieg { margin-top: 1.1rem; }
.sklep-przebieg-glowa {
  display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none;
}
.sklep-przebieg-glowa::-webkit-details-marker { display: none; }
.sklep-przebieg-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.sklep-przebieg-ico svg { width: 15px; height: 15px; }
.sklep-przebieg-tytul { display: flex; flex-direction: column; gap: .05rem; flex: 1; min-width: 0; }
.sklep-przebieg-tytul .muted { font-size: var(--fs-sm); }
.sklep-przebieg[open] > .sklep-przebieg-glowa { margin-bottom: .8rem; }
.sklep-przebieg[open] > .sklep-przebieg-glowa .kosz-sekcja-strzalka svg { transform: rotate(-90deg); }

/* ============ KARTA KLIENTA NA JEDEN EKRAN ================================
   Prosba 08.09.2026: „zrob tak, aby wszystko zmiescilo sie na jednym widoku
   strony". Ekran, przy ktorym sie DZWONI, nie moze wymagac przewijania -
   telefon w reku, a odpowiedz „co dalej" ma byc widoczna od razu.

   Nic nie zniknelo, wszystko zescielo sie w pionie:
     - cztery kafle liczb -> jeden pasek (ta sama tresc: ikona, liczba, podpis);
     - naglowek nizszy, bez wzoru w tle;
     - numer telefonu i dane firmy obok siebie, a nie jedno pod drugim;
     - trzeci etap w jednej linii: podpis po lewej, dwa wyjscia po prawej. */
.karta-kontaktu .hero-section { padding: .9rem 1.25rem 1rem; margin-bottom: .9rem; }
.karta-kontaktu .oferty-hero-title { font-size: var(--fs-xl); }
.karta-kontaktu .hero-watermark { opacity: .06; }
.karta-kontaktu .hero-top { margin-bottom: .2rem; }

/* Cztery liczby w jednej linii - te same, co wczesniej w kaflach. */
.kontakt-paski {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-top: .8rem;
}
.kontakt-pasek {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .65rem; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .85); font-size: var(--fs-sm);
}
.kontakt-pasek b { color: #fff; font-weight: 700; }
.kontakt-pasek svg { width: 14px; height: 14px; opacity: .8; }

/* Numer i dane firmy obok siebie - jeden ruch, mniej wysokosci. */
.sklep-etap-dwa {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(240px, 1.2fr);
  gap: .8rem 1.1rem; align-items: start;
}
.karta-kontaktu .sklep-etap { padding: .85rem 1rem; }
.karta-kontaktu .sklep-etap-glowa { margin-bottom: .6rem; }
.karta-kontaktu .sklep-fakty-firmy { margin-top: 0; }
.karta-kontaktu .sklep-fakty-firmy > div { padding: .3rem .5rem; }
.karta-kontaktu .sklep-form-pola { gap: .4rem .9rem; }
.karta-kontaktu .sklep-notatka { margin: .6rem 0 0; }
.karta-kontaktu .sklep-przebieg { margin-top: .8rem; padding: .7rem .9rem; }

/* Trzeci etap: podpis i przyciski w jednym wierszu. */
.sklep-etap-linia {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem 1rem; flex-wrap: wrap;
}
.sklep-etap-linia .sklep-etap-glowa { margin-bottom: 0; }
.sklep-etap-linia .sklep-poz-inne { margin: 0; padding: 0; border: 0; }

@media (max-width: 900px) {
  .sklep-etap-dwa { grid-template-columns: 1fr; }
}

/* POPRAW obok USUN przy wpisie karty pracy (prosba 08.09.2026: „przy kazdym
   wpisie mozliwosc klikniecia w niego i usuniecia oraz edytowania").
   Ten sam ksztalt, co przycisk kasowania - ale spokojny: poprawka jest
   odwracalna, skasowanie nie. Czerwien zostaje jedynemu nieodwracalnemu
   dzialaniu na tej karcie. */
.prac-popraw {
  margin-left: auto; text-decoration: none;
  border-color: var(--border); background: var(--surface); color: var(--text);
  box-shadow: none;
}
.prac-popraw + .prac-usun-form { margin-left: .5rem; }
.prac-popraw:hover { background: var(--surface-2); filter: none; }
/* Pasek „Poprawiasz wpis z ..." nad formularzem - zeby nie dalo sie pomylic
   poprawki z dopisaniem nowego dnia. */
.prac-poprawiam {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-left: 3px solid var(--brand);
  font-size: var(--fs-sm); color: var(--text);
}
.prac-poprawiam svg { width: 16px; height: 16px; color: var(--brand-dark); flex-shrink: 0; }
.prac-poprawiam > span { flex: 1; min-width: 0; }

/* ===================================================================
   POPRAW / USUN PRZY KAZDYM WPISIE  (makro `_wpis.html`, rejestr `wpisy.py`)
   ===================================================================
   Jeden wyglad na cala aplikacje. Dotad kazdy ekran rysowal te pare
   przyciskow po swojemu - raz krzyzyk, raz napis, raz nic - i po samym
   wygladzie nie dalo sie poznac, czy w ten wpis mozna kliknac.

   Przyciski stoja w JEDNEJ linii i nie zawijaja sie osobno: „Popraw"
   i „Usun" to jedna decyzja o tym samym wpisie, a rozdzielone miedzy
   wiersze czytaja sie jak dwie rozne sprawy. */
.wpis-akcje {
  display: inline-flex; align-items: center; gap: .3rem;
  flex-wrap: nowrap; vertical-align: middle;
}
.wpis-akcje-usun { display: inline; margin: 0; }

/* Wariant do list, gdzie na napisy nie ma miejsca (`wpis.ikonki`).
   Przygaszone, dopoki nie najedzie sie na wiersz - wpis ma byc trescia,
   a nie ramka z przyciskami. */
.wpis-akcje-male { gap: .1rem; opacity: .55; transition: opacity .12s ease; }
tr:hover .wpis-akcje-male,
li:hover .wpis-akcje-male,
.wpis-akcje-male:focus-within,
.wpis-akcje-male:hover { opacity: 1; }
.wpis-ikonka {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; padding: 0;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--muted); font-size: var(--fs-md); line-height: 1;
  text-decoration: none;
}
.wpis-ikonka svg { width: 13px; height: 13px; }
.wpis-ikonka:hover { background: var(--surface-2, rgba(127,127,127,.12)); color: var(--text); }
.wpis-ikonka-usun:hover { color: var(--danger-tx); }

/* KAFELEK KLIENTA DOPISANEGO W APLIKACJI - z „Popraw" i „Usuń" w rogu.
   Kafelek przestal byc linkiem, bo formularza (a takim jest przycisk „Usun")
   nie wolno zagniezdzic w <a>, a i klikniecie w krzyzyk otwieraloby przy
   okazji karte klienta. Link na cala karte robi teraz przezroczysta warstwa
   `.klient-card-link` rozciagnieta na kafelku; przyciski leza NAD nia. */
.klient-card-wlasny { position: relative; }
.klient-card-link {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; text-decoration: none;
}
.klient-card-wlasny .wpis-akcje { position: relative; z-index: 2; }
/* Ikonki w kafelku sa zawsze widoczne (nie tylko po najechaniu, jak
   w wierszach list): na dotyku nie ma „najechania", a to jest ekran, na
   ktorym te dwa przyciski maja byc znalezione od razu. */
.klient-card-wlasny .wpis-akcje-male { opacity: 1; }