/* ═══════════════════════════════════════════════════════════════════════════
   warsztat360 — arkusz stylów

   Trzy założenia, z których wynika reszta:

   1. Ten ekran ogląda się w hali, przy otwartej bramie, w marcowym słońcu.
      Dlatego minimalny kontrast tekstu to 7:1, a nie 4,5:1 — norma WCAG AA
      jest liczona dla biura, nie dla tabletu obok podnośnika.
   2. Klika się go w rękawicach. Minimalny cel dotykowy to 48 px, a na widoku
      hali 56 px. Ikona bez podpisu nie istnieje.
   3. Kolor niesie znaczenie, więc nie może być dekoracją. 60% powierzchni jest
      szare i białe, 30% grafitowe (nawigacja), 10% to kolory sygnałowe.
      Paleta sygnałów pochodzi z Okabe-Ito: rozróżnialna przy deuteranopii
      i protanopii, czyli u ~8% mężczyzn — a mechanicy to głównie mężczyźni.
      Każdy status niesie dodatkowo kształt (ikonę) i słowo, nigdy sam kolor.

   Fonty systemowe — zero pobrań z zewnątrz, bo CSP i tak ich nie wpuści.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Neutralne ──────────────────────────────────────────────────────── */
  --c-white:#fff;
  --c-bg:#F2F5F7;
  --c-surface:#fff;
  --c-surface-alt:#F7F9FA;
  --c-zebra:#F7F9FA;
  --c-border:#D5DBE0;
  --c-border-strong:#B3BDC5;

  --c-text:#161E26;          /* 16,8:1 na bieli — czytelne w słońcu */
  --c-text-muted:#48606F;    /*  7,1:1 */
  --c-text-disabled:#6B7C87;

  /* ─── Grafit (nawigacja, nagłówki) ───────────────────────────────────── */
  --c-graf-900:#10161C;
  --c-graf-800:#161E26;
  --c-graf-700:#1E2933;
  --c-graf-600:#2B3945;
  --c-graf-400:#5B6C7A;
  --c-graf-200:#A9B7C2;

  /* ─── Niebieski (akcja główna) ───────────────────────────────────────── */
  --c-blue-50:#EDF4FA;  --c-blue-100:#D6E7F5; --c-blue-200:#AACCE9;
  --c-blue-300:#72AADA; --c-blue-500:#1471C4; --c-blue-600:#0B5FA5;
  --c-blue-700:#084B84; --c-blue-800:#063A66;

  /* ─── Sygnały ────────────────────────────────────────────────────────── */
  --c-green:#00713C;    --c-green-bg:#E1F3E8;  --c-green-700:#005A30;
  --c-amber:#9A5B00;    --c-amber-bg:#FFF2D6;  --c-amber-700:#7A4800;
  --c-red:#C62719;      --c-red-bg:#FBE5E3;    --c-red-700:#9E1F13;
  --c-violet:#5F3D9C;   --c-violet-bg:#EEE8F8; --c-violet-700:#4B2F7D;
  --c-teal:#00697A;     --c-teal-bg:#E0F1F4;
  --c-grey:#5B6C7A;     --c-grey-bg:#EBEFF2;

  --c-focus:#FFD400;    --c-focus-ciemny:#161E26;

  /* ─── Rytm ───────────────────────────────────────────────────────────── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --r-sm:4px; --r-md:7px; --r-lg:11px; --r-xl:16px;

  --sh-1:0 1px 2px rgba(22,30,38,.09);
  --sh-2:0 2px 8px rgba(22,30,38,.11);
  --sh-3:0 10px 28px rgba(22,30,38,.16);

  /* Wysokość kontrolek: 42 px na biurku, 52 px na dotyku. Podniesione
     przez media query poniżej, nie przez osobny arkusz. */
  --ctl-h:42px;
  --row-h:44px;
  --nav-w:228px;
  --panel-w:460px;

  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* Polskie tablice mają krój wąski i kanciasty. Kroju z rozporządzenia
     nie wolno osadzać (licencja, a CSP i tak nie wpuści pobrania), więc
     bierzemy najbliższy wąski grotesk dostępny w systemie: Windows ma
     Arial Narrow, Android Roboto Condensed, Debian Liberation Sans Narrow. */
  --font-tablica:"Arial Narrow","Liberation Sans Narrow","Roboto Condensed",
                 "DejaVu Sans Condensed","Helvetica Neue",system-ui,sans-serif;
  /* Bazowa 15,5 px, nie 14 — użytkownik ma 50 lat i patrzy pod kątem. */
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.96875rem;
  --fs-md:1.0625rem; --fs-lg:1.25rem; --fs-xl:1.5rem; --fs-2xl:1.9rem;
}

*, *::before, *::after { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--c-bg); color:var(--c-text);
  font:var(--fs-base)/1.45 var(--font);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

/* Cyfry o stałej szerokości wszędzie, gdzie porównuje się je wzrokiem:
   kwoty w kolumnie, przebiegi, numery zleceń. */
.num,.kwota,.tel,.vin,.rej,.czas,td.num,.tabular {
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.vin { font-family:var(--font-mono); letter-spacing:.04em; font-size:.9em; }
/* ─── Tablica rejestracyjna ──────────────────────────────────────────────────
   Numer rejestracyjny wygląda w całym programie jak tablica, a nie jak
   pogrubiony napis — i nie jest to ozdoba. Mechanik szukający auta na placu
   dopasowuje KSZTAŁT, nie czyta znaków; niebieski pasek z lewej rozpoznaje się
   przedświadomie i działa jeszcze przy wysokości 20 px. Doradca przeglądający
   tablicę zleceń robi dokładnie to samo, tylko szybciej.

   Rysowane w całości w CSS, na istniejącej klasie .rej. Żaden szablon nie
   wymagał zmiany, a zmiana objęła też kafelki kanbana budowane w JavaScripcie
   i wszystko, co powstanie później.

   Wymiary są w em, więc plakietka skaluje się rozmiarem tekstu ustawionym
   przez konkretny ekran: 13 px w drugim wierszu tabeli daje tablicę ~19 px,
   21 px na kafelku ~30 px, 34 px w hali ~49 px. Proporcje zostają te same. */

.rej {
  display:inline-flex; align-items:center; vertical-align:middle;
  min-height:1.38em; padding:0 .32em 0 0; gap:.26em;
  background:#fff; color:#14171A;
  border:max(1px, .05em) solid #2A3038;
  border-radius:.16em;
  font-family:var(--font-tablica);
  font-weight:700; font-stretch:condensed;
  letter-spacing:.05em; line-height:1;
  text-transform:uppercase; white-space:nowrap;
  /* Wytłoczenie: jasna krawędź u góry, cień pod spodem. Przy 20 px ledwie
     widoczne — i o to chodzi. Plakietka ma wyglądać na przedmiot, nie na
     przycisk, więc cień jest płytszy niż w kartach. */
  box-shadow:inset 0 .06em 0 rgba(255,255,255,.85),
             0 .04em .09em rgba(20,23,26,.18);
  /* Bez tego przeglądarka wycina tła przy druku i z tablicy zostaje sam
     napis — a protokół przyjęcia i faktura idą do klienta na papierze. */
  print-color-adjust:exact; -webkit-print-color-adjust:exact;
}

/* Pusty numer (auto bez tablic — po kradzieży albo przed rejestracją) nie ma
   rysować samego niebieskiego paska.
   MINA: <input> NIE MA dzieci, więc pasuje do :empty zawsze. Bez wykluczenia
   znika całe pole formularza — i to nie jest hipoteza, tylko błąd złapany
   dopiero na zrzucie ekranu. */
.rej:empty:not(input):not(textarea) { display:none; }

/* Pasek unijny. Domyślnie PL — data-kraj="DE" zmienia napis i nic poza tym.
   MINA: font-size na pseudoelemencie przestawia jego własny em, więc szerokość
   podana jest w JEGO jednostkach: .62em rodzica ÷ .42 = 1.48em. Wpisanie tu
   .62em dałoby pasek dwa i pół raza za wąski. */
.rej::before {
  content:"PL";
  flex:none; align-self:stretch;
  width:1.33em; min-width:9px;
  font-size:.42em; font-weight:700; letter-spacing:.02em;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:.22em;
  color:#FFCC00;
  background:#0A3EA8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23FFCC00'%3E%3Ccircle cx='12' cy='3' r='1.7'/%3E%3Ccircle cx='16.5' cy='4.2' r='1.7'/%3E%3Ccircle cx='19.8' cy='7.5' r='1.7'/%3E%3Ccircle cx='21' cy='12' r='1.7'/%3E%3Ccircle cx='19.8' cy='16.5' r='1.7'/%3E%3Ccircle cx='16.5' cy='19.8' r='1.7'/%3E%3Ccircle cx='12' cy='21' r='1.7'/%3E%3Ccircle cx='7.5' cy='19.8' r='1.7'/%3E%3Ccircle cx='4.2' cy='16.5' r='1.7'/%3E%3Ccircle cx='3' cy='12' r='1.7'/%3E%3Ccircle cx='4.2' cy='7.5' r='1.7'/%3E%3Ccircle cx='7.5' cy='4.2' r='1.7'/%3E%3C/g%3E%3C/svg%3E")
             no-repeat center .18em / .92em .92em;
  border-radius:.3em 0 0 .3em;
  print-color-adjust:exact; -webkit-print-color-adjust:exact;
}
.rej[data-kraj]::before { content:attr(data-kraj); }

/* Auto spoza Unii (UA, GB po brexicie) — pasek zostaje, gwiazdki znikają.
   Rysowanie ich tam byłoby po prostu nieprawdą. */
.rej[data-kraj="UA"]::before,
.rej[data-kraj="GB"]::before,
.rej[data-kraj="CH"]::before,
.rej[data-kraj="NO"]::before { background-image:none; align-items:center;
                               padding-bottom:0; }

/* Tablica tymczasowa ma w Polsce znaki czerwone, nie czarne. */
.rej.tymczasowa { color:#C62719; }

/* Pole formularza. Pseudoelementy nie działają na <input>, więc pasek
   rysujemy gradientem tła, a lewy wcięcie robi miejsce na niego. */
input.rej {
  padding-left:1.05em;
  background:linear-gradient(90deg, #0A3EA8 0 .56em, #fff .56em);
  border-color:#2A3038;
  print-color-adjust:exact; -webkit-print-color-adjust:exact;
}

a { color:var(--c-blue-600); text-underline-offset:2px; }
a:hover { color:var(--c-blue-700); }

/* Obwódka skupienia musi być widoczna na grafitowej nawigacji i na bieli
   naraz, stąd żółć z ciemnym pierścieniem — działa na obu tłach. */
:focus-visible {
  outline:3px solid var(--c-focus); outline-offset:1px;
  box-shadow:0 0 0 5px var(--c-focus-ciemny); border-radius:3px;
}
@media (prefers-reduced-motion:reduce) {
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

h1,h2,h3,h4 { margin:0; font-weight:650; letter-spacing:-.015em; line-height:1.25; }
h2 { font-size:var(--fs-md); }
h3 { font-size:var(--fs-base); }
p { margin:0 0 var(--sp-3); }
p:last-child { margin-bottom:0; }

/* ═══ Układ ═══════════════════════════════════════════════════════════════ */

.aplikacja { display:grid; grid-template-columns:var(--nav-w) minmax(0,1fr); min-height:100vh; }

.nawigacja {
  background:linear-gradient(176deg, var(--c-graf-800) 0%, var(--c-graf-900) 100%);
  color:#fff; display:flex; flex-direction:column;
  padding:var(--sp-4) var(--sp-3) var(--sp-3); gap:1px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.nawigacja .znak { display:flex; align-items:center; gap:9px; padding:0 var(--sp-2) var(--sp-5); }
.nawigacja .znak b { font-size:19px; font-weight:650; letter-spacing:-.025em; }
.nawigacja .znak b span { color:var(--c-blue-300); }
.nawigacja a {
  display:flex; align-items:center; gap:11px; color:#B6C4CF; text-decoration:none;
  padding:10px var(--sp-3); border-radius:var(--r-md); font-size:14.5px; font-weight:500;
  position:relative; line-height:1.25; min-height:42px;
}
.nawigacja a .ikona { flex:none; opacity:.82; }
.nawigacja a:hover { background:rgba(255,255,255,.08); color:#fff; }
.nawigacja a:hover .ikona { opacity:1; }
.nawigacja a.aktywny { background:var(--c-blue-600); color:#fff; font-weight:650; }
.nawigacja a.aktywny .ikona { opacity:1; }
.nawigacja a.aktywny::before {
  content:""; position:absolute; left:-12px; top:8px; bottom:8px;
  width:3px; border-radius:0 2px 2px 0; background:var(--c-blue-300);
}
/* Licznik przy pozycji menu — ile zleceń czeka, ile faktur niezapłaconych.
   To jedyne miejsce, gdzie liczba ma prawo krzyczeć. */
.nawigacja a .licznik {
  margin-left:auto; background:var(--c-red); color:#fff; font-size:11.5px;
  font-weight:700; min-width:20px; height:20px; border-radius:10px;
  display:grid; place-items:center; padding:0 6px;
}
.nawigacja a .licznik.spokojny { background:rgba(255,255,255,.18); }
.nawigacja .sekcja {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.11em;
  color:var(--c-graf-400); padding:var(--sp-5) var(--sp-3) var(--sp-2); font-weight:700;
}
.nawigacja .stopka { margin-top:auto; padding-top:var(--sp-3); border-top:1px solid rgba(255,255,255,.13); }
.nawigacja .stopka .kto { display:flex; align-items:center; gap:9px; padding:var(--sp-2) var(--sp-3) var(--sp-3); }
.nawigacja .stopka .inicjaly {
  flex:none; width:32px; height:32px; border-radius:50%; background:var(--c-blue-600);
  display:grid; place-items:center; font-size:12.5px; font-weight:700;
}
.nawigacja .stopka .opis { font-size:11.5px; color:#8FA3B2; line-height:1.35; min-width:0; }
.nawigacja .stopka .opis b {
  display:block; color:#fff; font-size:13px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nawigacja .stopka-akcje { display:flex; gap:2px; }
.nawigacja .stopka-akcje a { flex:1; justify-content:center; font-size:12.5px; padding:8px 4px; gap:6px; }

.tresc { min-width:0; display:flex; flex-direction:column; }
.pasek {
  background:var(--c-surface); border-bottom:1px solid var(--c-border);
  padding:var(--sp-3) var(--sp-6); display:flex; align-items:center; gap:var(--sp-3);
  position:sticky; top:0; z-index:20; min-height:60px;
}
.pasek h1 { font-size:var(--fs-lg); font-weight:650; }
.pasek .podtytul { color:var(--c-text-muted); font-size:var(--fs-sm); }
.pasek .rozpychacz { flex:1; }
.strona { padding:var(--sp-6); flex:1; min-width:0; }
.strona.pelna { padding:0; }
.strona.waska { max-width:820px; }

/* ═══ Przyciski ═══════════════════════════════════════════════════════════ */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:var(--ctl-h); padding:0 var(--sp-4);
  border:1px solid var(--c-border-strong); border-radius:var(--r-md);
  background:var(--c-surface); color:var(--c-text);
  font:600 var(--fs-base)/1 var(--font); cursor:pointer; text-decoration:none;
  white-space:nowrap; transition:background .12s, border-color .12s;
}
.btn:hover { background:var(--c-surface-alt); border-color:var(--c-graf-400); }
.btn:active { transform:translateY(1px); }
.btn[disabled], .btn.wylaczony {
  opacity:.5; cursor:not-allowed; pointer-events:none;
}
.btn.glowny { background:var(--c-blue-600); border-color:var(--c-blue-600); color:#fff; }
.btn.glowny:hover { background:var(--c-blue-700); border-color:var(--c-blue-700); }
.btn.zielony { background:var(--c-green); border-color:var(--c-green); color:#fff; }
.btn.zielony:hover { background:var(--c-green-700); border-color:var(--c-green-700); }
.btn.czerwony { background:var(--c-surface); border-color:var(--c-red); color:var(--c-red-700); }
.btn.czerwony:hover { background:var(--c-red-bg); }
.btn.pelny-czerwony { background:var(--c-red); border-color:var(--c-red); color:#fff; }
.btn.cichy { border-color:transparent; background:transparent; color:var(--c-text-muted); }
.btn.cichy:hover { background:var(--c-grey-bg); color:var(--c-text); }
.btn.maly { min-height:34px; padding:0 var(--sp-3); font-size:var(--fs-sm); }
.btn.duzy { min-height:52px; padding:0 var(--sp-6); font-size:var(--fs-md); }
.btn.szeroki { width:100%; }
.btn .ikona { flex:none; }

.grupa-przyciskow { display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }

/* ═══ Formularze ══════════════════════════════════════════════════════════ */

.pole { display:flex; flex-direction:column; gap:5px; min-width:0; }
.pole > label, .etykieta {
  font-size:var(--fs-sm); font-weight:600; color:var(--c-text-muted);
}
.pole .podpowiedz { font-size:var(--fs-xs); color:var(--c-text-disabled); }
.pole.blad input, .pole.blad select, .pole.blad textarea { border-color:var(--c-red); }
.pole .komunikat-bledu { font-size:var(--fs-xs); color:var(--c-red-700); font-weight:600; }
.pole .ostrzezenie {
  font-size:var(--fs-xs); color:var(--c-amber-700); font-weight:600;
  display:flex; gap:5px; align-items:flex-start;
}

input[type=text], input[type=number], input[type=date], input[type=time],
input[type=email], input[type=tel], input[type=password], input[type=search],
select, textarea {
  min-height:var(--ctl-h); padding:0 var(--sp-3); width:100%;
  border:1px solid var(--c-border-strong); border-radius:var(--r-md);
  background:var(--c-surface); color:var(--c-text);
  font:var(--fs-base)/1.4 var(--font);
}
textarea { padding:var(--sp-2) var(--sp-3); min-height:88px; resize:vertical; line-height:1.5; }
select {
  appearance:none; padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2348606F' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
input:disabled, select:disabled, textarea:disabled {
  background:var(--c-grey-bg); color:var(--c-text-disabled);
}
input::placeholder, textarea::placeholder { color:var(--c-text-disabled); }

/* Pola kwotowe i ilościowe wyrównane do prawej — tak się je porównuje. */
input.kwota, input.num { text-align:right; font-variant-numeric:tabular-nums; }

.wiersz-pol { display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.wiersz-pol.dwa { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wiersz-pol.trzy { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* Przełącznik i pole wyboru: cały wiersz jest klikalny, nie sam kwadracik
   14×14. W rękawicy trafienie w kwadracik jest loterią. */
.wybor {
  display:flex; align-items:center; gap:10px; min-height:44px;
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); cursor:pointer;
}
.wybor:hover { background:var(--c-surface-alt); }
.wybor input[type=checkbox], .wybor input[type=radio] {
  width:20px; height:20px; flex:none; accent-color:var(--c-blue-600); margin:0;
}
.wybor span { font-size:var(--fs-base); }

/* Segmentowany przełącznik — zamiast selecta tam, gdzie opcji są 2-4.
   Jedno kliknięcie zamiast trzech (otwórz, przewiń, wybierz). */
.segmenty { display:inline-flex; border:1px solid var(--c-border-strong); border-radius:var(--r-md); overflow:hidden; }
.segmenty label {
  padding:0 var(--sp-4); min-height:var(--ctl-h); display:flex; align-items:center;
  font-size:var(--fs-sm); font-weight:600; cursor:pointer; background:var(--c-surface);
  border-right:1px solid var(--c-border); color:var(--c-text-muted); white-space:nowrap;
}
.segmenty label:last-child { border-right:0; }
.segmenty input { position:absolute; opacity:0; pointer-events:none; }
.segmenty input:checked + span, .segmenty label.wybrany { }
.segmenty label:has(input:checked) { background:var(--c-blue-600); color:#fff; }
.segmenty label:hover:not(:has(input:checked)) { background:var(--c-blue-50); color:var(--c-blue-700); }

/* ═══ Karty i sekcje ══════════════════════════════════════════════════════ */

.karta {
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.karta > .naglowek {
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--c-border);
  display:flex; align-items:center; gap:var(--sp-3); min-height:52px;
}
.karta > .naglowek h2 { font-size:var(--fs-base); font-weight:650; }
.karta > .naglowek .rozpychacz { flex:1; }
.karta > .cialo { padding:var(--sp-4); }
.karta > .cialo.zwarte { padding:0; }
.karta > .stopka {
  padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--c-border);
  background:var(--c-surface-alt); border-radius:0 0 var(--r-lg) var(--r-lg);
  display:flex; gap:var(--sp-2); align-items:center;
}

.siatka { display:grid; gap:var(--sp-4); }
.siatka.dwie { grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
.siatka.trzy { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.siatka.cztery { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }

/* ═══ Tabele ══════════════════════════════════════════════════════════════ */

.tabela-otoczka { overflow-x:auto; }
table.tabela { width:100%; border-collapse:collapse; font-size:var(--fs-base); }
table.tabela th {
  text-align:left; font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.06em; color:var(--c-text-muted); font-weight:700;
  padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--c-border-strong);
  white-space:nowrap; background:var(--c-surface); position:sticky; top:0; z-index:2;
}
table.tabela th.num, table.tabela td.num { text-align:right; }
table.tabela td {
  padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--c-border);
  height:var(--row-h); vertical-align:middle;
}
table.tabela tbody tr:nth-child(even) td { background:var(--c-zebra); }
table.tabela tbody tr:hover td { background:var(--c-blue-50); }
table.tabela tbody tr.klikalny { cursor:pointer; }
table.tabela tfoot td {
  font-weight:700; border-top:2px solid var(--c-border-strong); border-bottom:0;
  background:var(--c-surface-alt);
}
table.tabela .drugi-wiersz { display:block; font-size:var(--fs-xs); color:var(--c-text-muted); }

.pusto {
  padding:var(--sp-10) var(--sp-6); text-align:center; color:var(--c-text-muted);
}
.pusto .duzy { font-size:var(--fs-md); font-weight:600; color:var(--c-text); margin-bottom:var(--sp-2); }

/* ═══ Znaczniki stanu ═════════════════════════════════════════════════════ */
/* Każdy niesie kolor, obramowanie i tekst. Sam kolor nigdy nie decyduje. */

.znacznik {
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
  border-radius:999px; font-size:var(--fs-xs); font-weight:700;
  border:1px solid transparent; white-space:nowrap; line-height:1.5;
}
.zn-szary   { background:var(--c-grey-bg);   color:var(--c-graf-700);   border-color:#CBD4DA; }
.zn-niebie  { background:var(--c-blue-100);  color:var(--c-blue-800);   border-color:var(--c-blue-200); }
.zn-zielony { background:var(--c-green-bg);  color:var(--c-green-700);  border-color:#B4DCC4; }
.zn-bursz   { background:var(--c-amber-bg);  color:var(--c-amber-700);  border-color:#EBCF92; }
.zn-czerwony{ background:var(--c-red-bg);    color:var(--c-red-700);    border-color:#F0BBB5; }
.zn-fiolet  { background:var(--c-violet-bg); color:var(--c-violet-700); border-color:#CFC0EA; }
.zn-morski  { background:var(--c-teal-bg);   color:var(--c-teal);       border-color:#A8D3DA; }

/* ═══ Komunikaty ══════════════════════════════════════════════════════════ */

.komunikat-blok {
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); margin-bottom:var(--sp-4);
  border-left:4px solid; font-size:var(--fs-base); display:flex; gap:10px; align-items:flex-start;
}
.komunikat-blok.sukces { background:var(--c-green-bg); border-color:var(--c-green); color:var(--c-green-700); }
.komunikat-blok.blad   { background:var(--c-red-bg);   border-color:var(--c-red);   color:var(--c-red-700); }
.komunikat-blok.uwaga  { background:var(--c-amber-bg); border-color:var(--c-amber); color:var(--c-amber-700); }
.komunikat-blok.info   { background:var(--c-blue-50);  border-color:var(--c-blue-500); color:var(--c-blue-800); }

.toast-strefa {
  position:fixed; bottom:var(--sp-5); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:var(--sp-2); z-index:900; pointer-events:none;
}
.toast {
  background:var(--c-graf-800); color:#fff; padding:var(--sp-3) var(--sp-5);
  border-radius:var(--r-md); box-shadow:var(--sh-3); font-size:var(--fs-base);
  font-weight:600; animation:toast-wjazd .18s ease-out;
}
.toast.blad { background:var(--c-red-700); }
.toast.sukces { background:var(--c-green-700); }
@keyframes toast-wjazd { from { opacity:0; transform:translateY(10px); } }

/* ═══ Panel boczny ════════════════════════════════════════════════════════ */
/* Szczegóły otwierają się z prawej, nie w modalu. Modal zabiera kontekst —
   doradca traci z oczu listę zleceń dokładnie wtedy, gdy jej potrzebuje. */

.panel-tlo {
  position:fixed; inset:0; background:rgba(22,30,38,.42); z-index:800;
  opacity:0; pointer-events:none; transition:opacity .15s;
}
.panel-tlo.otwarty { opacity:1; pointer-events:auto; }
.panel {
  position:fixed; top:0; right:0; bottom:0; width:min(var(--panel-w),100vw);
  background:var(--c-surface); box-shadow:var(--sh-3); z-index:810;
  transform:translateX(100%); transition:transform .18s ease-out;
  display:flex; flex-direction:column;
}
.panel.otwarty { transform:none; }
.panel > .naglowek {
  padding:var(--sp-4); border-bottom:1px solid var(--c-border);
  display:flex; align-items:center; gap:var(--sp-3);
}
.panel > .cialo { padding:var(--sp-4); overflow-y:auto; flex:1; }
.panel > .stopka {
  padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--c-border);
  display:flex; gap:var(--sp-2); background:var(--c-surface-alt);
}

/* ═══ Okno modalne ════════════════════════════════════════════════════════ */
/* Wyłącznie do potwierdzeń nieodwracalnych. Wszystko inne idzie panelem. */

dialog.okno {
  border:0; border-radius:var(--r-lg); padding:0; box-shadow:var(--sh-3);
  max-width:min(560px,94vw); width:100%;
}
dialog.okno::backdrop { background:rgba(22,30,38,.5); }
dialog.okno .naglowek { padding:var(--sp-4) var(--sp-5) var(--sp-2); }
dialog.okno .cialo { padding:0 var(--sp-5) var(--sp-4); color:var(--c-text-muted); }
dialog.okno .stopka {
  padding:var(--sp-3) var(--sp-5); background:var(--c-surface-alt);
  display:flex; gap:var(--sp-2); justify-content:flex-end;
  border-radius:0 0 var(--r-lg) var(--r-lg);
}

/* ═══ Wyszukiwarka ════════════════════════════════════════════════════════ */
/* Jedno pole na wszystko: numer rejestracyjny, nazwisko, telefon, VIN,
   numer zlecenia. Rozpoznanie po kształcie wpisanego tekstu, nie po
   przełączniku „szukaj wg". */

.szukajka { position:relative; flex:1; max-width:520px; }
.szukajka input {
  padding-left:38px; font-size:var(--fs-base); background:var(--c-surface-alt);
}
.szukajka input:focus { background:var(--c-surface); }
.szukajka .lupa {
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--c-text-muted); pointer-events:none;
}
.podpowiedzi {
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:100;
  background:var(--c-surface); border:1px solid var(--c-border-strong);
  border-radius:var(--r-md); box-shadow:var(--sh-3); max-height:60vh; overflow-y:auto;
}
.podpowiedzi:empty { display:none; }
.podpowiedzi .pozycja {
  padding:var(--sp-2) var(--sp-3); cursor:pointer; display:flex;
  align-items:center; gap:var(--sp-3); border-bottom:1px solid var(--c-border);
  min-height:52px;
}
.podpowiedzi .pozycja:last-child { border-bottom:0; }
.podpowiedzi .pozycja:hover, .podpowiedzi .pozycja.zaznaczona { background:var(--c-blue-50); }
.podpowiedzi .pozycja .glowna { font-weight:600; }
.podpowiedzi .pozycja .poboczna { font-size:var(--fs-sm); color:var(--c-text-muted); }
.podpowiedzi .grupa {
  padding:var(--sp-2) var(--sp-3); font-size:var(--fs-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--c-text-muted);
  background:var(--c-surface-alt);
}

/* ═══ Kafelki liczbowe ════════════════════════════════════════════════════ */

.kafelek {
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-lg); padding:var(--sp-4); box-shadow:var(--sh-1);
}
.kafelek .tytul {
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em;
  color:var(--c-text-muted); font-weight:700; margin-bottom:var(--sp-2);
}
.kafelek .liczba {
  font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.kafelek .opis { font-size:var(--fs-sm); color:var(--c-text-muted); margin-top:var(--sp-1); }
.kafelek.klikalny { cursor:pointer; }
.kafelek.klikalny:hover { border-color:var(--c-blue-300); box-shadow:var(--sh-2); }

/* ═══ Baner ═══════════════════════════════════════════════════════════════ */

.baner-serwisowy {
  background:var(--c-amber-bg); color:var(--c-amber-700);
  border-bottom:1px solid #EBCF92; padding:var(--sp-2) var(--sp-6);
  font-size:var(--fs-sm); font-weight:600;
}

/* ═══ Dotyk ═══════════════════════════════════════════════════════════════ */
/* Wykrywanie po urządzeniu, nie po szerokości ekranu: tablet w hali bywa
   podłączony do monitora 24", a laptop dotykowy ma 13". Liczy się to, czym
   się w niego celuje. */

@media (pointer:coarse) {
  :root { --ctl-h:52px; --row-h:56px; --fs-base:1.03125rem; }
  .btn.maly { min-height:44px; }
  .wybor { min-height:52px; }
  table.tabela td { padding:var(--sp-3); }
}

@media (max-width:960px) {
  .aplikacja { grid-template-columns:1fr; }
  .nawigacja {
    position:fixed; bottom:0; top:auto; left:0; right:0; height:auto;
    flex-direction:row; padding:var(--sp-1) var(--sp-2);
    border-top:1px solid var(--c-graf-600); z-index:700; overflow-x:auto;
  }
  .nawigacja .znak, .nawigacja .sekcja, .nawigacja .stopka { display:none; }
  .nawigacja a {
    flex-direction:column; gap:3px; font-size:10.5px; padding:7px 10px;
    min-width:66px; text-align:center;
  }
  .nawigacja a.aktywny::before { display:none; }
  .tresc { padding-bottom:74px; }
  .strona { padding:var(--sp-3); }
  .pasek { padding:var(--sp-2) var(--sp-3); }
  .panel { width:100vw; }
}

/* ═══ Wydruk ══════════════════════════════════════════════════════════════ */

@media print {
  .nawigacja, .pasek, .toast-strefa, .panel, .panel-tlo, .btn, .bez-druku { display:none!important; }
  .aplikacja { display:block; }
  .strona { padding:0; }
  .karta { border:0; box-shadow:none; }
  body { background:#fff; font-size:10.5pt; }
  table.tabela th { background:#fff!important; }
  a { color:inherit; text-decoration:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODUŁ: tablica zleceń (kanban)

   Trzy kolumny, każda przewijana osobno. Kafelek jest czytany z odległości
   metra — przez ramię, gdy ktoś stoi przy biurku doradcy — więc numer
   rejestracyjny dostaje 21 px, a wszystko poniżej jest wyraźnie mniejsze.
   Hierarchia na kafelku odpowiada kolejności pytań: „które auto?", „co z nim?",
   „czyje?", „jak daleko?".
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kafelki rysuje JavaScript, chowając niepotrzebne fragmenty atrybutem hidden.
   Bez tej reguły display:flex z reguł poniżej wygrywa z domyślnym [hidden]. */
[hidden] { display:none !important; }

/* ─── Pasek filtrów ──────────────────────────────────────────────────────── */

.tablica-filtry {
  display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center;
  padding:var(--sp-3) var(--sp-6); background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
}
.tablica-filtry select { width:auto; min-width:170px; }

/* ─── Kolumny ────────────────────────────────────────────────────────────── */

.tablica {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-3); padding:var(--sp-4) var(--sp-6); align-items:start;
}
.tk {
  display:flex; flex-direction:column; min-width:0;
  background:var(--c-surface-alt); border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  /* Pasek górny, filtry i marginesy zabierają około 210 px — reszta okna
     należy do listy, żeby przewijała się kolumna, a nie cała strona. */
  max-height:calc(100vh - 210px);
}
.tk-naglowek {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-3) var(--sp-2);
  border-bottom:1px solid var(--c-border);
}
.tk-naglowek h2 { font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.06em; color:var(--c-text-muted); }
.tk-licznik {
  margin-left:auto; background:var(--c-grey-bg); color:var(--c-graf-700);
  border-radius:999px; padding:1px 9px; font-size:var(--fs-xs); font-weight:700;
}
.tk-lista {
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--sp-2); overflow-y:auto; min-height:90px;
}
.tk-pusto {
  margin:0; padding:var(--sp-5) var(--sp-3); text-align:center;
  color:var(--c-text-disabled); font-size:var(--fs-sm);
}

/* ─── Kafelek zlecenia ───────────────────────────────────────────────────── */

.kz {
  display:flex; flex-direction:column; gap:6px; cursor:pointer;
  background:var(--c-surface); border:1px solid var(--c-border);
  border-left:4px solid var(--c-border-strong);
  border-radius:var(--r-md); padding:var(--sp-3); box-shadow:var(--sh-1);
}
.kz:hover { border-color:var(--c-blue-300); border-left-color:var(--c-blue-500); box-shadow:var(--sh-2); }
/* Klient siedzi na krześle w recepcji. Sam czerwony pasek nic nie znaczy —
   niesie go też ikona zegara w prawym górnym rogu kafelka. */
.kz.pilne { border-left-color:var(--c-red); }

.kz-gora { display:flex; align-items:flex-start; gap:var(--sp-2); }
/* Tablica NIE rozciąga się na szerokość kafelka. Prawdziwa ma stałą
   proporcję; rozciągnięta do 440 px z tekstem przy lewej krawędzi wygląda
   jak pole formularza i całe złudzenie znika. Widać to dopiero na zrzucie
   pełnej tablicy zleceń, nie na pojedynczej plakietce. */
.kz-gora .rej { font-size:21px; flex:none; word-break:normal; }
.kz-sygnaly { margin-left:auto; }

.kz-sygnaly { display:flex; gap:5px; flex:none; padding-top:2px; }
.kz-sygnaly .sygnal { color:var(--c-text-muted); display:inline-flex; }
.kz-sygnaly .sygnal.pilny { color:var(--c-red); }
/* Klient właśnie otworzył kosztorys — to jest moment na telefon, nie na
   czekanie. Jedyna ikona, której wolno przyciągać wzrok. */
.kz-sygnaly .sygnal.wolanie { color:var(--c-blue-600); }

.kz-auto { font-size:var(--fs-sm); color:var(--c-text-muted); }
.kz-znaczniki { display:flex; flex-wrap:wrap; gap:5px; }
.kz-etykieta { border-color:transparent; }

.kz-klient { font-size:var(--fs-base); font-weight:600; }
.kz-alert {
  display:flex; gap:5px; align-items:flex-start;
  font-size:var(--fs-sm); font-weight:600; color:var(--c-red-700);
}
.kz-alert .ikona { flex:none; margin-top:1px; }

.kz-postep { display:flex; align-items:center; gap:var(--sp-2); }
.kz-postep progress {
  appearance:none; -webkit-appearance:none; flex:1;
  height:6px; border:0; border-radius:3px; background:var(--c-border);
}
.kz-postep progress::-webkit-progress-bar { background:var(--c-border); border-radius:3px; }
.kz-postep progress::-webkit-progress-value { background:var(--c-blue-500); border-radius:3px; }
.kz-postep progress::-moz-progress-bar { background:var(--c-blue-500); border-radius:3px; }
.kz-postep-opis { font-size:var(--fs-xs); color:var(--c-text-muted); font-weight:600; flex:none; }

.kz-stopka { display:flex; align-items:center; gap:var(--sp-2); margin-top:2px; }
.kz-stopka .rozpychacz { flex:1; }
.kz-czas { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-sm); color:var(--c-text-muted); }
.kz-czas .ikona { flex:none; }
.kz-czas b { font-variant-numeric:tabular-nums; padding:1px 5px; border-radius:var(--r-sm); }
.kz-dalej { max-width:60%; }
.kz-dalej span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ─── Panel szczegółów ───────────────────────────────────────────────────── */

.panel > .naglowek .rozpychacz { flex:1; }
.panel .rej { font-size:21px; }
.pz-numer { font-size:var(--fs-sm); color:var(--c-text-muted); }

.pz-dane { display:grid; grid-template-columns:110px minmax(0,1fr); gap:6px var(--sp-3); margin:0 0 var(--sp-5); }
.pz-dane dt { font-size:var(--fs-sm); font-weight:600; color:var(--c-text-muted); }
.pz-dane dd { margin:0; min-width:0; overflow-wrap:anywhere; }

.pz-sekcja { margin-bottom:var(--sp-5); }
.pz-grupa {
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em;
  color:var(--c-text-disabled); font-weight:700; margin:var(--sp-3) 0 var(--sp-1);
}
.pz-wybor { display:flex; flex-wrap:wrap; gap:6px; }
.pz-wybor .btn b { font-size:var(--fs-sm); }

/* ─── Komunikat z cofnięciem ─────────────────────────────────────────────── */
/* Strefa toastów ma pointer-events:none, żeby nie przykrywała ekranu.
   Komunikat z przyciskiem musi je sobie oddać, inaczej „Cofnij" nie klika. */

.toast.z-akcja { pointer-events:auto; display:flex; align-items:center; gap:var(--sp-4); }
.toast-akcja {
  border:1px solid rgba(255,255,255,.5); background:transparent; color:#fff;
  font:700 var(--fs-sm)/1 var(--font); border-radius:var(--r-sm);
  padding:8px var(--sp-3); cursor:pointer; min-height:34px;
}
.toast-akcja:hover { background:rgba(255,255,255,.16); }

/* ─── Wąski ekran ────────────────────────────────────────────────────────── */
/* Na telefonie kolumny idą jedna pod drugą i przewija się cała strona —
   trzy niezależnie przewijane obszary na 6 calach to pułapka na kciuk. */

@media (max-width:960px) {
  .tablica { grid-template-columns:1fr; padding:var(--sp-3); }
  .tk { max-height:none; }
  .tk-lista { overflow:visible; }
  .tablica-filtry { padding:var(--sp-2) var(--sp-3); }
  .tablica-filtry select { min-width:0; flex:1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Moduł: logowanie, wybór warsztatu, PIN do hali, ekran błędu
   (blueprints/auth.py — login.html, wybor_warsztatu.html, hala_pin.html,
    blad.html, moje_konto.html)

   Te cztery ekrany nie mają nawigacji, bo nie ma jeszcze kogo w niej pokazać.
   Zamiast szarego tła aplikacji dostają grafit — nie dla ozdoby, tylko po to,
   żeby na pierwszy rzut oka było widać, że system jest zamknięty, a nie że
   coś się nie wczytało.
   ═══════════════════════════════════════════════════════════════════════════ */

body.ekran {
  display:flex; min-height:100vh; padding:var(--sp-6) var(--sp-4);
  background:linear-gradient(168deg, var(--c-graf-800) 0%, var(--c-graf-900) 100%);
}
/* margin:auto zamiast place-items:center — przy niskim oknie (tablet w poziomie,
   otwarta klawiatura systemowa) wyśrodkowanie siatką ucina górę karty razem
   z polem loginu i nie da się do niej doscrollować. */
.ekran-panel { margin:auto; width:100%; max-width:412px; }
.ekran-panel.szeroki { max-width:580px; }

.ekran-znak {
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:var(--sp-5); color:#fff;
}
.ekran-znak b { font-size:23px; font-weight:650; letter-spacing:-.025em; }
.ekran-znak b span { color:var(--c-blue-300); }

.ekran-karta {
  background:var(--c-surface); border-radius:var(--r-xl);
  box-shadow:var(--sh-3); padding:var(--sp-6);
}
.ekran-karta h1 { font-size:var(--fs-xl); margin-bottom:var(--sp-2); }
.ekran-opis { color:var(--c-text-muted); font-size:var(--fs-sm); margin-bottom:var(--sp-5); }
.ekran-karta .pusto { padding:var(--sp-4) 0; }

.formularz-pion { display:flex; flex-direction:column; gap:var(--sp-4); }

.ekran-stopka {
  text-align:center; margin-top:var(--sp-4); margin-bottom:0;
  color:var(--c-graf-200); font-size:var(--fs-sm);
}
.ekran-stopka a { color:var(--c-blue-300); }

.ekran-rozdzielacz {
  display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-5) 0;
  color:var(--c-text-disabled); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.08em;
}
.ekran-rozdzielacz::before, .ekran-rozdzielacz::after {
  content:""; flex:1; height:1px; background:var(--c-border);
}

/* ─── Wybór warsztatu ──────────────────────────────────────────────────────
   Cały wiersz jest przyciskiem wysyłającym formularz: wybór to jedno
   kliknięcie, bez listy rozwijanej i bez osobnego „Dalej". */

.lista-wyboru { display:flex; flex-direction:column; gap:var(--sp-2); }
.wiersz-wyboru {
  display:flex; align-items:center; gap:var(--sp-3); width:100%;
  text-align:left; min-height:64px; padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--c-border-strong); border-radius:var(--r-md);
  background:var(--c-surface); color:var(--c-text); cursor:pointer;
  font:var(--fs-base)/1.35 var(--font);
}
.wiersz-wyboru:hover { border-color:var(--c-blue-500); background:var(--c-blue-50); }
.wiersz-wyboru:active { transform:translateY(1px); }
.wiersz-wyboru .tresc-wyboru { flex:1; min-width:0; }
.wiersz-wyboru b { display:block; font-size:var(--fs-md); font-weight:650; }
.wiersz-wyboru .poboczna { color:var(--c-text-muted); font-size:var(--fs-sm); }
.wiersz-wyboru .ikona { flex:none; color:var(--c-text-muted); }
/* Bieżący warsztat niesie i belkę, i słowo „tu jesteś teraz" w treści —
   sam kolor nie może być jedynym nośnikiem tej informacji. */
.wiersz-wyboru.biezacy {
  border-color:var(--c-blue-500); box-shadow:inset 3px 0 0 var(--c-blue-500);
}

/* ─── Klawiatura PIN-u ─────────────────────────────────────────────────────
   68 px na klawisz, nie 48: mechanik klika w rękawicy roboczej, której palec
   ma około 25 mm szerokości, a tablet wisi pod kątem i bywa zachlapany. */

/* Selektor z nazwą znacznika, nie sama klasa: reguła input[type=password]
   z sekcji formularzy ma wyższą specyficzność niż pojedyncza klasa i bez tego
   nadpisałaby wysokość pola PIN-u z powrotem na 42 px. */
input.pole-pinu {
  text-align:center; font-family:var(--font-mono);
  font-size:2rem; letter-spacing:.55em; text-indent:.55em;
  min-height:64px;
}
.klawiatura {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sp-3); margin-top:var(--sp-4);
}
.klawisz {
  min-height:68px; border:1px solid var(--c-border-strong);
  border-radius:var(--r-lg); background:var(--c-surface); color:var(--c-text);
  font:650 1.7rem/1 var(--font); font-variant-numeric:tabular-nums;
  cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.klawisz:hover { background:var(--c-blue-50); border-color:var(--c-blue-300); }
.klawisz:active { background:var(--c-blue-100); transform:translateY(1px); }
.klawisz.cichy-klawisz {
  font-size:var(--fs-base); font-weight:600;
  color:var(--c-text-muted); background:var(--c-surface-alt);
}

/* ─── Ekran błędu ─────────────────────────────────────────────────────────── */

.blad-kod {
  font-size:var(--fs-sm); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--c-text-disabled);
  font-variant-numeric:tabular-nums; margin-bottom:var(--sp-1);
}

/* ─── Moje konto ──────────────────────────────────────────────────────────── */
/* Stopka karty ma rozpychacz tak samo jak jej nagłówek — arkusz bazowy
   definiował go tylko dla nagłówka. */
.karta > .stopka .rozpychacz { flex:1; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODUŁ: raporty i pulpit właściciela
   (blueprints/raporty.py — pulpit.html, raport_sprzedaz.html,
    raport_mechanicy.html, raport_rentownosc.html, raport_magazyn.html,
    dziennik.html, _raporty.html, static/raporty.js)

   Ekran oglądany rano, przy kawie, przez pięć sekund. Wszystko poniżej służy
   jednej rzeczy: żeby liczba, która wymaga reakcji, była widoczna wcześniej
   niż liczba, która jej nie wymaga.

   Wykresy rysuje serwer jako inline SVG, więc kolory serii siedzą TUTAJ,
   a nie w Pythonie — inaczej paleta rozjechałaby się z resztą aplikacji przy
   pierwszej zmianie motywu. Seria niesie też słowo w legendzie: przy
   deuteranopii błękit i zieleń bywają nierozróżnialne.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Zakładki między raportami ─────────────────────────────────────────── */

.raport-zakladki {
  display:flex; gap:2px; flex-wrap:wrap; margin-bottom:var(--sp-4);
  border-bottom:1px solid var(--c-border);
}
.raport-zakladki a {
  display:inline-flex; align-items:center; gap:7px;
  padding:var(--sp-2) var(--sp-4); min-height:44px;
  color:var(--c-text-muted); text-decoration:none; font-weight:600;
  border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.raport-zakladki a:hover { color:var(--c-text); background:var(--c-surface-alt); }
/* Zakładka bieżąca niesie i belkę, i pogrubienie — sama zmiana koloru
   znika przy protanopii i na wyblakłym monitorze w biurze warsztatu. */
.raport-zakladki a.aktywna {
  color:var(--c-blue-700); border-bottom-color:var(--c-blue-600); font-weight:700;
}

/* ─── Pasek okresu ──────────────────────────────────────────────────────── */

.filtry-raportu {
  display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:flex-end;
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4);
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.filtry-raportu .pole { min-width:170px; }
.filtry-raportu .rozpychacz { flex:1; }
.filtry-raportu .zakres-opis {
  margin:0; align-self:center; text-align:right;
  font-size:var(--fs-sm); color:var(--c-text-muted); font-variant-numeric:tabular-nums;
}
.filtry-raportu .zakres-opis .drugi-wiersz {
  display:block; font-size:var(--fs-xs); color:var(--c-text-disabled);
}

.odstep { margin-top:var(--sp-4); }
.siatka + .siatka, .siatka + .karta { margin-top:var(--sp-4); }

/* ─── Kafelki pulpitu ───────────────────────────────────────────────────── */

.pulpit-kafelki .kafelek { display:flex; flex-direction:column; gap:2px; }
/* Kafelek bywa odnośnikiem (do tablicy, do faktur) — bez tego dziedziczy
   niebieski kolor i podkreślenie z reguły dla <a>, a wielka liczba na
   niebiesko wygląda jak błąd renderowania. */
a.kafelek { text-decoration:none; color:inherit; display:block; }
a.kafelek:hover { color:inherit; }

.kafelek .opis b { font-variant-numeric:tabular-nums; }
.kafelek .opis.ostrzega {
  display:flex; align-items:center; gap:5px;
  color:var(--c-amber-700); font-weight:600;
}
.kafelek .opis.ostrzega .ikona { flex:none; }
/* Kafelek wymagający reakcji dostaje belkę z boku PLUS ikonę i słowo
   w opisie. Sama belka nic nie znaczy. */
.kafelek.alarm { border-left:4px solid var(--c-amber); }

/* Marża rozbita na dwie nogi. Obie liczby muszą być widoczne naraz — po to
   je rozdzielamy. */
.kafelek .nogi {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-3); margin:var(--sp-1) 0 var(--sp-2);
}
.kafelek .nogi .noga { display:flex; flex-direction:column; gap:1px; min-width:0; }
.kafelek .nogi .podpis {
  display:flex; align-items:center; gap:5px;
  font-size:var(--fs-xs); font-weight:700; color:var(--c-text-muted);
  text-transform:uppercase; letter-spacing:.04em;
}
.kafelek .nogi .podpis .ikona { flex:none; }
.kafelek .nogi .liczba { font-size:var(--fs-xl); }
.kafelek .nogi .opis { margin-top:0; }

/* Pasek do celu — element <progress>, żeby wartość szła atrybutem, a nie
   stylem inline (CSP i tak nie wpuszcza stylów w szablonie). */
progress.cel {
  appearance:none; -webkit-appearance:none; width:100%; height:7px;
  border:0; border-radius:4px; background:var(--c-border); margin:var(--sp-2) 0;
}
progress.cel::-webkit-progress-bar { background:var(--c-border); border-radius:4px; }
progress.cel::-webkit-progress-value { background:var(--c-blue-500); border-radius:4px; }
progress.cel::-moz-progress-bar { background:var(--c-blue-500); border-radius:4px; }

/* ─── Zmiana wobec poprzedniego okresu ──────────────────────────────────── */
/* Strzałka w górę powstaje z obrotu ikony „strzalka-dol" — jeden kształt
   w komplecie ikon zamiast dwóch, które trzeba pamiętać synchronizować. */

.zmiana {
  display:inline-flex; align-items:center; gap:3px;
  font-weight:700; font-variant-numeric:tabular-nums;
}
.zmiana .ikona { flex:none; }
.zmiana.w-gore { color:var(--c-green-700); }
.zmiana.w-gore .ikona { transform:rotate(180deg); }
.zmiana.w-dol { color:var(--c-red-700); }
.zmiana.rowno { color:var(--c-text-muted); }

/* ─── Brak danych kontra zero ───────────────────────────────────────────── */
/* „—" i „0" to dwie różne informacje: pierwsza mówi „nie ma z czego policzyć",
   druga „policzyliśmy i wyszło zero". Mylenie ich kończy się rozmową
   o wynikach, których nie było. */
.brak { color:var(--c-text-disabled); font-weight:400; }
.kwota.strata { color:var(--c-red-700); }

/* ─── Wykresy ───────────────────────────────────────────────────────────── */

.wykres { margin:0 0 var(--sp-4); }
.wykres:last-child { margin-bottom:0; }
.wyk { display:block; width:100%; height:auto; overflow:visible; }

.wyk-siatka line { stroke:var(--c-border); stroke-width:1; }
.wyk-baza { stroke:var(--c-border-strong); stroke-width:1.5; }
.wyk-os {
  font:600 20px var(--font); fill:var(--c-text-muted);
  font-variant-numeric:tabular-nums;
}

.wyk-slupek { transition:opacity .12s; }
.wyk-slupek:hover, .wyk-slupek:focus { opacity:.72; outline:none; }
.wyk-slupek:focus-visible { stroke:var(--c-graf-800); stroke-width:2.5; }
/* Trzy serie i nie więcej. Czwarta seria na jednym wykresie to moment,
   w którym przestaje się go czytać, a zaczyna zgadywać. */
.wyk-slupek.s1 { fill:var(--c-blue-500); }
.wyk-slupek.s2 { fill:var(--c-amber); }
.wyk-slupek.s3 { fill:var(--c-green); }

.wyk-linia { fill:none; stroke:var(--c-violet); stroke-width:3;
             stroke-linejoin:round; stroke-linecap:round; }
.wyk-punkt { fill:var(--c-violet); stroke:var(--c-surface); stroke-width:2; }
.wyk-punkt:focus-visible { stroke:var(--c-graf-800); }

.wyk-legenda {
  display:flex; flex-wrap:wrap; gap:var(--sp-4);
  margin-bottom:var(--sp-2); font-size:var(--fs-sm); color:var(--c-text-muted);
}
.wyk-klucz { display:inline-flex; align-items:center; gap:7px; font-weight:600; }
.wyk-klucz i { width:13px; height:13px; border-radius:3px; flex:none; }
.wyk-klucz.s1 i { background:var(--c-blue-500); }
.wyk-klucz.s2 i { background:var(--c-amber); }
.wyk-klucz.s3 i { background:var(--c-green); }
.wyk-klucz.linia i { background:var(--c-violet); height:4px; border-radius:2px; }

/* Podpis pod wykresem zamienia się w odczyt wartości, gdy kursor albo
   klawiatura zatrzyma się na słupku. Stała wysokość, żeby treść strony nie
   podskakiwała przy każdym ruchu myszy. */
.wyk-odczyt {
  min-height:38px; padding-top:var(--sp-2); font-size:var(--fs-sm);
  color:var(--c-text-muted); font-variant-numeric:tabular-nums;
}

/* ─── Dwie metryki mechanika ────────────────────────────────────────────── */
/* Efektywność i produktywność stoją obok siebie z wypisanym mianownikiem.
   Pomylenie ich psuje obie naraz — i jest to najczęstszy błąd w rozmowie
   o wynikach mechanika. */

.dwie-metryki {
  display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.metryka {
  border-left:3px solid var(--c-border); padding-left:var(--sp-4);
  color:var(--c-text-muted); font-size:var(--fs-sm);
}
.metryka-nazwa { margin-bottom:var(--sp-2); }
.metryka-nazwa .wyk-klucz { font-size:var(--fs-md); color:var(--c-text); }
.metryka-wzor {
  font-size:var(--fs-base); color:var(--c-text); font-weight:600;
  background:var(--c-surface-alt); border:1px solid var(--c-border);
  border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3);
}
.metryka-wzor .kreska { color:var(--c-text-muted); padding:0 2px; }

.uwaga-metodyczna {
  display:flex; gap:8px; align-items:flex-start; margin:var(--sp-4) 0 0;
  font-size:var(--fs-sm); color:var(--c-text-muted);
}
.uwaga-metodyczna .ikona { flex:none; margin-top:2px; }

/* Podpis pod nazwą kolumny — miejsce, w którym mieści się mianownik metryki.
   Bez tego „Efektywność" i „Produktywność" wyglądają jak dwie wersje tej
   samej liczby. */
.podpis-kolumny {
  display:block; font-size:10.5px; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--c-text-disabled); line-height:1.3;
}

/* ─── Sortowanie tabel ──────────────────────────────────────────────────── */

table.tabela th.sortuj { cursor:pointer; user-select:none; }
table.tabela th.sortuj:hover { color:var(--c-text); background:var(--c-blue-50); }
table.tabela th.sortuj::after {
  content:"↕"; opacity:.35; margin-left:5px; font-weight:400;
}
table.tabela th.sortuj[data-kierunek=rosnaco]::after { content:"↑"; opacity:1; }
table.tabela th.sortuj[data-kierunek=malejaco]::after { content:"↓"; opacity:1; }

/* Przyciski w ekranie pustym mają być na środku razem z tekstem, który je
   tłumaczy — .pusto jest wyśrodkowane, ale flex tego nie dziedziczy. */
.pusto .grupa-przyciskow { justify-content:center; margin-top:var(--sp-4); }

/* ─── Wąski ekran ───────────────────────────────────────────────────────── */

@media (max-width:960px) {
  .filtry-raportu { padding:var(--sp-2) var(--sp-3); }
  .filtry-raportu .pole { min-width:0; flex:1 1 150px; }
  .filtry-raportu .zakres-opis { text-align:left; flex-basis:100%; }
  .raport-zakladki { flex-wrap:nowrap; overflow-x:auto; }
  .kafelek .nogi { grid-template-columns:1fr; }
  /* Na telefonie wykres skaluje się w dół razem z podpisami osi — poniżej
     tej szerokości i tak czyta się tabelę pod nim, nie wykres. */
  .wyk-os { font-size:26px; }
}

/* ─── Wydruk ────────────────────────────────────────────────────────────── */
/* Raport idzie do księgowej i do teczki. Zakładki, filtry i przyciski
   eksportu na papierze są śmieciem. */

@media print {
  .raport-zakladki, .filtry-raportu { display:none !important; }
  .wykres { break-inside:avoid; }
  .kafelek { break-inside:avoid; border:1px solid #999; box-shadow:none; }
  table.tabela th.sortuj::after { content:""; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODUŁ: faktury i KSeF

   Dwa wymagania, których nie dało się spełnić samymi klasami wspólnymi:

   1. Dwa numery obok siebie. Nasz numer (P_2) i 35-znakowy numer KSeF muszą
      być rozróżnialne na pierwszy rzut oka, także wtedy, gdy księgowa
      przepisuje jeden z nich do przelewu. Stąd osobny krój dla numeru KSeF.
   2. Wydruk jest dokumentem, nie ekranem. Ma własną typografię, sztywne
      marginesy i kody QR w rozmiarze, który skanuje się telefonem z faktury
      poplamionej olejem.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Drobiazgi wspólne ─────────────────────────────────────────────────── */

.odstep-gora { margin-top:var(--sp-4); }

.cichy-tekst { color:var(--c-text-disabled); font-weight:400; font-size:var(--fs-sm); }

.pole-info {
  color:var(--c-text-muted); font-size:var(--fs-sm); line-height:1.5;
  display:inline-flex; gap:6px; align-items:flex-start;
}

/* Numer KSeF: 35 znaków, które ktoś kiedyś przepisze ręcznie. Krój o stałej
   szerokości i luźniejszy odstęp — inaczej 0 i O oraz 1 i l są nie do
   odróżnienia, a numer ma sumę kontrolną, która to wyłapie dopiero u odbiorcy. */
.numer-ksef {
  font-family:var(--font-mono); font-size:.86em; letter-spacing:.03em;
  overflow-wrap:anywhere; color:var(--c-text-muted);
}
.numer-ksef[data-kopiuj] { cursor:copy; color:var(--c-text); }
.numer-ksef[data-kopiuj]:hover { background:var(--c-blue-50); }

/* Lista etykieta–wartość. Wartości liczbowe w prawej kolumnie stoją w pionie,
   bo tak się je porównuje wzrokiem. */
dl.para { display:grid; grid-template-columns:auto 1fr; gap:var(--sp-2) var(--sp-4); margin:0; }
dl.para dt { color:var(--c-text-muted); font-size:var(--fs-sm); font-weight:600; }
dl.para dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }

/* Kafelek, który jest linkiem, nie ma wyglądać jak link. */
a.kafelek { color:inherit; text-decoration:none; display:block; }

/* ─── Lista faktur ─────────────────────────────────────────────────────── */

.filtr-faktur { display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }
.filtr-faktur input[type=search] { min-width:200px; }
.filtr-faktur input[type=date] { width:auto; }

/* Pasek „czekamy na numer KSeF”. Nie toast — toast znika, a ten stan trwa
   i decyduje o tym, czy wolno wydać dokument klientowi. */
.pasek-oczekiwania {
  background:var(--c-blue-50); color:var(--c-blue-800);
  border-bottom:1px solid var(--c-blue-200);
  padding:var(--sp-2) var(--sp-6); font-size:var(--fs-sm); font-weight:600;
  display:flex; gap:10px; align-items:center;
}

/* ─── Korekta ──────────────────────────────────────────────────────────── */
/* Znak różnicy niesie też słowo (minus) i wyrównanie, nie tylko kolor. */
.roznica-ujemna { color:var(--c-red-700); font-weight:700; }
.roznica-dodatnia { color:var(--c-green-700); font-weight:700; }

/* ─── Limit zwolnienia 10 000 zł ───────────────────────────────────────── */

.pasek-limitu {
  height:10px; background:var(--c-grey-bg); border-radius:5px;
  overflow:hidden; border:1px solid var(--c-border);
}
.pasek-limitu > span { display:block; height:100%; background:var(--c-blue-600); width:0; }
.pasek-limitu.przekroczony > span { background:var(--c-red); }

/* ═══ Wydruk faktury ══════════════════════════════════════════════════════ */
/* Dokument, nie ekran: stała szerokość odpowiadająca A4, czarno-biała
   typografia i kody QR, które muszą dać się zeskanować z papieru. */

.wydruk {
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-lg); padding:var(--sp-8); max-width:820px;
}

.wydruk-czolo {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:var(--sp-6); padding-bottom:var(--sp-4);
  border-bottom:2px solid var(--c-graf-800); margin-bottom:var(--sp-5);
}
.wydruk-tytul { font-size:var(--fs-xl); font-weight:700; letter-spacing:-.02em; }
.wydruk-daty { font-size:var(--fs-sm); color:var(--c-text-muted); margin-top:var(--sp-2); line-height:1.7; }

/* Kody QR. KOD I na każdej fakturze, KOD II wyłącznie na wystawionej offline.
   Pod każdym MUSI stać jego podpis — numer KSeF albo OFFLINE pod pierwszym,
   CERTYFIKAT pod drugim. Podpis nie jest ozdobnikiem, tylko wymogiem. */
.kody-qr { display:flex; gap:var(--sp-4); flex:none; }
.kod-qr { margin:0; text-align:center; }
.kod-qr img { display:block; width:120px; height:120px; }
.kod-qr figcaption { margin-top:var(--sp-1); }
.kod-podpis {
  display:block; font-family:var(--font-mono); font-size:9.5px;
  overflow-wrap:anywhere; max-width:120px; line-height:1.3; font-weight:700;
}
.kod-opis {
  display:block; font-size:var(--fs-xs); color:var(--c-text-muted);
  text-transform:uppercase; letter-spacing:.08em; font-weight:700;
}
.kod-brak {
  width:150px; padding:var(--sp-3); border:2px dashed var(--c-red);
  border-radius:var(--r-md); background:var(--c-red-bg); color:var(--c-red-700);
  font-size:var(--fs-xs); line-height:1.4;
}
.kod-brak b { display:block; margin:var(--sp-1) 0; font-size:var(--fs-sm); }

.wydruk-strony {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--sp-5); margin-bottom:var(--sp-5);
}
.wydruk-strony p { line-height:1.6; }

.wydruk-korekta {
  background:var(--c-violet-bg); border-left:4px solid var(--c-violet);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md);
  margin-bottom:var(--sp-4); font-size:var(--fs-sm); line-height:1.6;
}

.wydruk-pozycje { font-size:var(--fs-sm); }
.wydruk-pozycje td { height:auto; }

.wydruk-podsumowanie {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,320px);
  gap:var(--sp-5); margin-top:var(--sp-5); align-items:start;
}
.wydruk-do-zaplaty {
  background:var(--c-surface-alt); border:1px solid var(--c-border);
  border-radius:var(--r-md); padding:var(--sp-4);
}
.wydruk-kwota {
  font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.03em;
  line-height:1.1; margin-bottom:var(--sp-1);
}
.wydruk-slownie {
  font-size:var(--fs-sm); color:var(--c-text-muted);
  margin-bottom:var(--sp-3); line-height:1.4;
}
.wydruk-adnotacja {
  margin-top:var(--sp-3); padding-top:var(--sp-3);
  border-top:1px solid var(--c-border); font-size:var(--fs-xs);
  color:var(--c-amber-700); line-height:1.4;
}
.wydruk-uwagi {
  margin-top:var(--sp-5); padding:var(--sp-3) var(--sp-4);
  background:var(--c-surface-alt); border-radius:var(--r-md);
  font-size:var(--fs-sm); white-space:pre-wrap;
}

.wydruk-stopka { margin-top:var(--sp-10); }
.wydruk-podpisy {
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-10);
  margin-bottom:var(--sp-5); text-align:center;
  font-size:var(--fs-xs); color:var(--c-text-muted);
}
.linia-podpisu {
  display:block; border-top:1px solid var(--c-border-strong);
  margin-bottom:var(--sp-1);
}

@media print {
  .wydruk { border:0; padding:0; max-width:none; }
  .wydruk-czolo { border-bottom-color:#000; }
  .wydruk-do-zaplaty, .wydruk-uwagi { background:#fff!important; }
  /* Kody QR nie mogą wylądować na drugiej stronie w oderwaniu od nagłówka —
     wtedy nikt ich nie skanuje. */
  .kody-qr, .wydruk-podsumowanie, .wydruk-strony { break-inside:avoid; }
  .wydruk-pozycje tr { break-inside:avoid; }
  .pasek-oczekiwania { display:none!important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Moduł: klienci i pojazdy

   Dwie decyzje układu, z których wynika reszta:

   1. Karta klienta i karta pojazdu mają WĄSKĄ kolumnę faktów i SZEROKĄ kolumnę
      historii. Fakty czyta się przez telefon i muszą być w jednym rzucie oka
      bez przewijania; historię się przegląda i ma prawo być długa.
   2. Wszystko, co porównuje się wzrokiem w pionie — przebiegi, bieżniki, kwoty,
      numery miejsc na regale — dostaje cyfry o stałej szerokości. Bez tego
      kolumna liczb przestaje być kolumną.
   ═══════════════════════════════════════════════════════════════════════════ */

.kolumny-karty {
  display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:var(--sp-4); margin-top:var(--sp-4); align-items:start;
}
.kolumna { display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; }
@media (max-width:1180px) {
  .kolumny-karty { grid-template-columns:minmax(0,1fr); }
}

/* Pasek filtrów. Pola same wysyłają formularz (klienci.js), przycisk zostaje
   dla przeglądarek bez skryptu i dla tych, którzy wolą klikać. */
.filtry {
  display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:flex-end;
  margin-bottom:var(--sp-4);
}
.filtry .pole { min-width:180px; }
.filtry .wybor { align-self:center; }

.formularz { display:flex; flex-direction:column; gap:var(--sp-4); }
.wiersz-pol.cztery { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:700px) { .wiersz-pol.cztery { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.grupa-przyciskow.srodek { justify-content:center; }
.pusto p { max-width:52ch; margin-left:auto; margin-right:auto; }

/* Pole z ostrzeżeniem, ale nie z błędem: dane da się zapisać, tylko warto
   jeszcze raz spojrzeć. Bursztyn, nie czerwień — czerwień znaczy „nie zapiszę". */
.pole.ostrzega input { border-color:var(--c-amber); }
.pole.ostrzega .podpowiedz { color:var(--c-amber-700); font-weight:600; }

/* ─── Lista faktów ─────────────────────────────────────────────────────────
   Etykieta i wartość w dwóch kolumnach, żeby wartości układały się w pion
   i dały się przeskanować wzrokiem. */
.dane { display:grid; grid-template-columns:minmax(96px,auto) minmax(0,1fr);
        gap:var(--sp-2) var(--sp-4); margin:0; }
.dane dt {
  font-size:var(--fs-sm); font-weight:600; color:var(--c-text-muted);
  padding-top:2px;
}
.dane dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.dane dd .drugi-wiersz { display:block; font-size:var(--fs-xs); color:var(--c-text-muted); }

.brak { color:var(--c-text-disabled); font-style:italic; }
.notatka {
  background:var(--c-surface-alt); border-left:3px solid var(--c-border-strong);
  padding:var(--sp-2) var(--sp-3); border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin-top:var(--sp-3);
}
.duzy-numer { font-size:var(--fs-md); font-weight:650; }

/* Wartość klienta tuż przy jego telefonie. To nie ozdoba: decyzja „ustąpić czy
   nie" zapada ze słuchawką przy uchu, a klient za 40 tysięcy i klient za 300
   złotych wymagają innej rozmowy. */
.ltv {
  display:inline-flex; align-items:center; margin-left:var(--sp-2);
  padding:2px 8px; border-radius:999px; white-space:nowrap;
  background:var(--c-teal-bg); color:var(--c-teal); border:1px solid #A8D3DA;
  font-size:var(--fs-xs); font-weight:700; font-variant-numeric:tabular-nums;
}

/* Ostrzeżenie o kliencie albo pojeździe — nad paskiem, w tym samym miejscu co
   baner serwisowy. Ma być przeczytane, zanim doradca zacznie rozmowę. */
.baner-alert {
  background:var(--c-red-bg); color:var(--c-red-700);
  border-bottom:1px solid #F0BBB5; padding:var(--sp-2) var(--sp-6);
  font-size:var(--fs-sm); font-weight:600;
  display:flex; gap:8px; align-items:center;
}

/* Kolumna z opisem zgłoszenia bywa akapitem. Ograniczamy ją, żeby nie
   rozpychała tabeli i nie spychała kwot poza ekran. */
.waskie-w-tabeli { max-width:32ch; }

/* ─── Wykres przebiegu ─────────────────────────────────────────────────────
   Rysowany po stronie serwera jako zwykły SVG. Kolor niczego tu nie niesie
   sam: odczyt podejrzany ma większy punkt i znak „!", a pod wykresem stoi
   zdanie, co to znaczy. */
.wykres-przebiegu { width:100%; height:auto; display:block; margin-bottom:var(--sp-3); }
.wykres-przebiegu .os { stroke:var(--c-border-strong); stroke-width:1; }
.wykres-przebiegu .linia { fill:none; stroke:var(--c-blue-600); stroke-width:2; }
.wykres-przebiegu .punkt { fill:var(--c-blue-600); }
.wykres-przebiegu .punkt.podejrzany { fill:var(--c-red); }
.wykres-przebiegu .etykieta { font-size:11px; fill:var(--c-text-muted); }
.wykres-przebiegu .etykieta.z-prawej { text-anchor:end; }
.wykres-przebiegu .etykieta-punktu {
  font-size:13px; font-weight:700; fill:var(--c-red-700); text-anchor:middle;
}

/* ─── Depozyt opon ─────────────────────────────────────────────────────────
   Miejsce na regale jako jeden ciąg o stałej szerokości znaku: magazynier
   czyta je z listy w ruchu i porównuje z tabliczką na półce. */
.miejsce {
  display:inline-block; font-family:var(--font-mono); font-weight:700;
  font-size:var(--fs-sm); letter-spacing:.04em;
  background:var(--c-grey-bg); border:1px solid #CBD4DA;
  border-radius:var(--r-sm); padding:2px 7px;
}
.depozyt-blok { border-top:1px solid var(--c-border); padding-top:var(--sp-3); margin-top:var(--sp-3); }
.depozyt-blok:first-child { border-top:0; padding-top:0; margin-top:0; }
.depozyt-naglowek { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
table.tabela.opony { margin-top:var(--sp-2); }
table.tabela.opony td { padding:var(--sp-1) var(--sp-2); height:auto; }
table.tabela.opony input { min-height:38px; }

/* Moc w dwóch jednostkach obok siebie. Dowód rejestracyjny operuje kilowatami,
   mechanik i katalogi części końmi — trzymamy obie i pokazujemy obie. */
.para-mocy { display:flex; align-items:center; gap:6px; }
.para-mocy input { width:100%; min-width:0; }
.para-mocy .jednostka {
  font-size:var(--fs-sm); font-weight:700; color:var(--c-text-muted); flex:none;
}

/* ═══ Magazyn ═════════════════════════════════════════════════════════════ */
/* Dopisane przez moduł magazynu. Wszystko, czego nie dało się złożyć
   z istniejących klas — i nic ponadto. */

.mag-kafelki, .mag-filtry, .mag-chipsy { margin-bottom:var(--sp-4); }

/* Pasek filtrów kartoteki. Pole szukania rośnie, reszta zostaje przy swoim. */
.mag-filtry {
  display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:flex-end;
}
.mag-filtry .pole { min-width:180px; }
.mag-filtry .mag-filtr-szukaj { flex:1; min-width:280px; }

.mag-tytul-sekcji { font-size:var(--fs-md); margin:var(--sp-6) 0 var(--sp-2); }
.mag-tytul-sekcji:first-child { margin-top:0; }
.mag-wstep { color:var(--c-text-muted); font-size:var(--fs-sm); margin-bottom:var(--sp-3); }
.mag-koszyk { margin-bottom:var(--sp-4); }

/* Dwie kolumny: dokument po lewej, kontekst po prawej. Poniżej 1100 px
   kolumny się kładą — inaczej formularz robi się nieczytelnie wąski. */
.mag-kolumny {
  display:grid; gap:var(--sp-4); align-items:start;
  grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);
}
.mag-kolumny > form > .karta, .mag-kolumny > div > .karta,
.mag-bok > .karta, .mag-bok > form.karta { margin-bottom:var(--sp-4); }
@media (max-width:1100px) {
  .mag-kolumny { grid-template-columns:minmax(0,1fr); }
}

.mag-bok { min-width:0; }

/* Formularz w wierszu tabeli albo w stopce karty: kilka kontrolek obok siebie
   bez zawijania na osobne linie. */
.mag-form-inline {
  display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap;
}
.mag-form-inline input { width:auto; }
.mag-pole-inline { flex-direction:row; align-items:center; gap:var(--sp-2); }
.mag-pole-krotkie { max-width:130px; }
.mag-srodek { justify-content:center; }

/* Miernik: postęp liczenia, udział w progu BDO. Sam pasek nigdy nie niesie
   znaczenia — obok zawsze stoi liczba i słowo. */
.mag-miara {
  position:relative; height:8px; border-radius:4px;
  background:var(--c-grey-bg); overflow:hidden; margin:var(--sp-2) 0;
}
.mag-miara i { display:block; height:100%; background:var(--c-blue-500); border-radius:4px; }
.mag-miara.blisko i { background:var(--c-amber); }
.mag-miara.ponad i  { background:var(--c-red); }

.mag-postep-gora { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.mag-liczba-duza {
  font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.03em; line-height:1.1;
}
.mag-jednostka { font-size:var(--fs-md); font-weight:600; color:var(--c-text-muted); }

/* Arkusz inwentaryzacyjny: policzony wiersz cichnie, żeby oko szło do tych,
   których jeszcze nie ruszono. */
.mag-arkusz tbody tr.mag-policzony td { color:var(--c-text-muted); }
.mag-arkusz input { max-width:120px; }

.mag-szukaj-towar { max-width:340px; flex:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODUŁ ZLECENIE — przyjęcie, kosztorys, wydanie, terminarz, wydruk.

   Dopisane na końcu arkusza, zgodnie z zasadą „nie wymyślaj klas poza swoim
   modułem". Wszystko poniżej opiera się na zmiennych z nagłówka pliku —
   żadnych nowych kolorów, żadnych nowych odstępów.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Drobiazgi wspólne ─────────────────────────────────────────────────── */

.odstep { margin-top: var(--sp-4); }
.waska-kolumna { max-width: 940px; }
.ukryty-plik { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.odczyt {
  min-height: var(--ctl-h); display: flex; align-items: center;
  padding: 0 var(--sp-3); border: 1px solid var(--c-border);
  border-radius: var(--r-md); background: var(--c-surface-alt); font-weight: 700;
}

/* Pasek tożsamości auta. Powtarza się na każdym ekranie zlecenia, bo doradca
   z telefonem przy uchu musi widzieć rejestrację bez przewijania. */
.pasek-auta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.pasek-auta .rej { font-size: var(--fs-md); }
.pasek-auta .rozpychacz { flex: 1; }
.pasek-auta a.tel { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }

.cytat-klienta {
  margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4);
  background: var(--c-blue-50); border-left: 4px solid var(--c-blue-300);
  border-radius: var(--r-md); display: flex; gap: 10px; align-items: flex-start;
  color: var(--c-graf-700); font-style: italic;
}

/* Podpowiedzi bywają przyciskami (wybór wstawia dane, nie nawiguje).
   Przycisk domyślnie ma własne tło i obramowanie — trzeba je zdjąć. */
.podpowiedzi button.pozycja {
  width: 100%; text-align: left; background: none; border: 0;
  font: inherit; color: inherit; cursor: pointer;
}

.szukajka-auta, .szukajka-towaru { position: relative; flex: 1; min-width: 240px; }
.szukajka-auta > input, .szukajka-towaru > input { width: 100%; }

.wybrany {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); margin-top: var(--sp-3);
  background: var(--c-green-bg); border: 1px solid #B4DCC4; border-radius: var(--r-md);
}
.wybrany .opis { flex: 1; min-width: 0; }
.wybrany .glowna { font-weight: 650; display: flex; gap: var(--sp-2); align-items: center; }
.wybrany .poboczna { font-size: var(--fs-sm); color: var(--c-text-muted); }

.rozwijane { margin-top: var(--sp-3); }
.rozwijane > summary {
  cursor: pointer; padding: var(--sp-2) 0; font-weight: 600;
  color: var(--c-blue-600); min-height: 40px; display: flex; align-items: center;
}
.cialo-rozwijane { display: grid; gap: var(--sp-3); padding-top: var(--sp-2); }

/* ── Schemat nadwozia ──────────────────────────────────────────────────── */

.narzedzia-uszkodzen {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.schematy {
  display: grid; gap: var(--sp-4); margin-top: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.schematy .rzut.szeroki { grid-column: span 2; }

.rzut { margin: 0; }
.rzut figcaption {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--c-text-muted); margin-bottom: var(--sp-1);
}
/* Płótno musi być kontenerem pozycjonowania: pinezki siedzą na nim
   w procentach, więc każdy inny układ przesunąłby je razem z marginesem. */
.rzut .plotno {
  position: relative; background: var(--c-surface-alt);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-2); touch-action: manipulation;
}
.rzut .plotno svg { display: block; width: 100%; height: auto; }
.rzut .plotno svg .obrys {
  fill: var(--c-white); stroke: var(--c-graf-600); stroke-width: 3;
  stroke-linejoin: round;
}
.rzut .plotno svg .szyba { fill: var(--c-blue-50); stroke: var(--c-graf-400); stroke-width: 2; }
.rzut .plotno svg .kreska { fill: none; stroke: var(--c-graf-400); stroke-width: 2; }
.rzut .plotno svg .kolo { fill: var(--c-grey-bg); stroke: var(--c-graf-600); stroke-width: 3; }

.pinezki { position: absolute; inset: var(--sp-2); pointer-events: none; }
.pinezka {
  position: absolute; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--c-white); box-shadow: var(--sh-2);
  display: grid; place-items: center; cursor: pointer;
  pointer-events: auto; padding: 0; background: var(--c-grey);
}
.pinezka .numer { color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.pinezka.ma-zdjecie { outline: 2px solid var(--c-graf-800); outline-offset: 1px; }

/* Kolor jest podpowiedzią, nie znaczeniem: każdy znacznik niesie numer,
   podpis dla czytnika ekranu i pozycję w tabeli na wydruku. Legenda niżej
   przypisuje kolorom słowa. */
.rodzaj-rysa       { background: var(--c-blue-600); }
.rodzaj-wgniecenie { background: var(--c-amber); }
.rodzaj-odprysk    { background: var(--c-violet); }
.rodzaj-peknięcie  { background: var(--c-red); }
.rodzaj-korozja    { background: var(--c-teal); }
.rodzaj-brak       { background: var(--c-graf-800); }
.rodzaj-inne       { background: var(--c-grey); }

.legenda-uszkodzen {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm); color: var(--c-text-muted);
}
.wpis-legendy { display: inline-flex; align-items: center; gap: 6px; }
.wpis-legendy .kropka {
  width: 13px; height: 13px; border-radius: 50%; display: inline-block;
}

.lista-uszkodzen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.lista-uszkodzen li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.lista-uszkodzen .opis { color: var(--c-text-muted); }

/* ── Paliwo, rzeczy, podpis ────────────────────────────────────────────── */

.paliwo { display: flex; align-items: center; gap: var(--sp-3); }
.paliwo input[type=range] { flex: 1; height: 40px; accent-color: var(--c-blue-600); }
.paliwo .kres { font-weight: 700; color: var(--c-text-muted); }
.paliwo .paliwo-wartosc {
  min-width: 56px; text-align: center; font-weight: 700; font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}

.szybkie-rzeczy { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lista-rzeczy { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.wiersz-rzeczy { display: grid; grid-template-columns: 1fr 90px auto; gap: var(--sp-2); }

.podpis-pole { position: relative; }
.podpis-pole canvas {
  width: 100%; height: 150px; display: block; touch-action: none;
  background: var(--c-surface); border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
}
.podpis-pole .podpis-linia {
  position: absolute; left: 8%; right: 8%; bottom: 34px;
  border-bottom: 1px solid var(--c-border-strong); pointer-events: none;
}

/* ── Kosztorys ─────────────────────────────────────────────────────────── */

.dodaj-pozycje {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
  background: var(--c-surface-alt); border-bottom: 1px solid var(--c-border);
}
.dodaj-pozycje .ilosc-nowej { width: 110px; flex: none; }

.akcje-wiersza { white-space: nowrap; text-align: right; }
.reczna { color: var(--c-amber-700); font-weight: 700; }

/* Pozycja odrzucona zostaje na liście, ale przestaje krzyczeć — jest
   dokumentem tego, czego klient nie kupił, a nie częścią rachunku. */
tr.status-odrzucona td, tr.status-anulowana td { color: var(--c-text-disabled); }
tr.status-odrzucona .nazwa, tr.status-anulowana .nazwa { text-decoration: line-through; }

.sumy { flex-wrap: wrap; }
.sumy .wg-stawek {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--c-text-muted);
}
.sumy .suma { display: flex; align-items: baseline; gap: var(--sp-2); }
.sumy .suma span { font-size: var(--fs-sm); color: var(--c-text-muted); }
.sumy .suma.duza b { font-size: var(--fs-lg); }

/* ── Bramka wydania ────────────────────────────────────────────────────── */

.braki { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.braki .brak {
  display: flex; gap: 10px; align-items: flex-start;
  padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--c-amber-bg); color: var(--c-amber-700);
}
.braki .brak .opis { color: var(--c-graf-700); font-weight: 400; }

.blok-qc, .blok-wydania { padding: var(--sp-4); }
.blok-qc { border-right: 1px solid var(--c-border); }
.blok-qc h3, .blok-wydania h3 { margin-bottom: var(--sp-2); }
@media (min-width: 900px) {
  .karta > .cialo.zwarte:has(.blok-qc) { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ── Odrzucone wcześniej ───────────────────────────────────────────────── */

.lista-odrzuconych { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.lista-odrzuconych .odrzucona {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border);
  border-radius: var(--r-md); background: var(--c-surface-alt);
}
.lista-odrzuconych .odrzucona .opis { flex: 1; min-width: 200px; }

.panel-formularz { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.panel-formularz > .cialo { overflow-y: auto; flex: 1; padding: var(--sp-4); }

/* ── Terminarz ─────────────────────────────────────────────────────────── */
/* Siatka: kolumna godzin plus po jednej kolumnie na stanowisko (widok dnia)
   albo na dzień (widok tygodnia). Liczbę kolumn i wierszy ustawia
   terminarz.js — zależy od konfiguracji warsztatu, nie od arkusza stylów. */

.terminarz {
  display: grid; overflow-x: auto; background: var(--c-surface);
  border: 1px solid var(--c-border); border-top: 0;
  position: relative;
}
.terminarz .rog {
  background: var(--c-surface); border-bottom: 1px solid var(--c-border-strong);
  border-right: 1px solid var(--c-border); position: sticky; top: 0; z-index: 3;
}
.terminarz .naglowek-kolumny {
  padding: var(--sp-2) var(--sp-3); text-align: center; line-height: 1.3;
  background: var(--c-surface); border-bottom: 1px solid var(--c-border-strong);
  border-right: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: 2;
}
.terminarz .naglowek-kolumny b { display: block; font-size: var(--fs-base); }
.terminarz .naglowek-kolumny span { font-size: var(--fs-xs); color: var(--c-text-muted); }
.terminarz .naglowek-kolumny .dzis {
  color: var(--c-blue-700); font-weight: 700;
}
.terminarz .etykieta-godziny {
  font-size: var(--fs-xs); color: var(--c-text-muted); text-align: right;
  padding-right: var(--sp-2); border-right: 1px solid var(--c-border);
  border-top: 1px solid var(--c-border); font-variant-numeric: tabular-nums;
}
.terminarz .etykieta-godziny.polgodzina { border-top-color: transparent; }
.terminarz .slot {
  border-top: 1px solid var(--c-border); border-right: 1px solid var(--c-border);
  cursor: pointer;
}
.terminarz .slot.polgodzina { border-top-style: dotted; }
.terminarz .slot:hover { background: var(--c-blue-50); }
.terminarz .slot.teraz { background: var(--c-amber-bg); }

.rezerwacja-kafelek {
  margin: 1px 3px; padding: 4px 7px; border-radius: var(--r-sm);
  border-left: 4px solid currentColor; overflow: hidden;
  font-size: var(--fs-sm); line-height: 1.25; z-index: 1;
}
.rezerwacja-kafelek .godziny { font-size: var(--fs-xs); opacity: .85; }
.rezerwacja-kafelek .co { font-weight: 650; }
.rezerwacja-kafelek .co .rej { font-size: var(--fs-sm); }
.rezerwacja-kafelek .kto { font-size: var(--fs-xs); }
.rezerwacja-kafelek .oznaczenia {
  display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px;
}

/* ── Wydruk zlecenia ───────────────────────────────────────────────────── */

.strona.wydruk { background: var(--c-bg); }
.dokument {
  background: var(--c-surface); padding: var(--sp-8);
  max-width: 210mm; margin: 0 auto;
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
}
.dokument .glowka {
  display: flex; justify-content: space-between; gap: var(--sp-6);
  padding-bottom: var(--sp-4); border-bottom: 2px solid var(--c-graf-800);
}
.dokument .wystawca { font-size: var(--fs-sm); line-height: 1.5; }
.dokument .tytul-dokumentu { text-align: right; font-size: var(--fs-sm); }
.dokument .tytul-dokumentu .numer {
  font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums;
}
.dokument section { margin-top: var(--sp-5); }
.dokument h3 {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--c-text-muted); margin-bottom: var(--sp-2);
}
.dokument .dwie-kolumny { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
.dokument .ramka {
  border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3);
}
.dokument .duza-wartosc { font-size: var(--fs-md); font-weight: 650; }
.dokument .pasek-pomiarow {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md);
}
.dokument .pomiar { display: flex; flex-direction: column; }
.dokument .pomiar .tytul {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-text-muted);
}
.dokument .lista-plaska { margin: 0; padding-left: var(--sp-5); columns: 2; }
.dokument .tabela-vat { margin-top: var(--sp-3); max-width: 460px; margin-left: auto; }
.dokument .podpisy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.dokument .podpis-blok { display: flex; flex-direction: column; gap: var(--sp-2); }
.dokument .linia-podpisu { margin-top: var(--sp-10); border-bottom: 1px solid var(--c-graf-600); }
.dokument .podpis-obraz { max-width: 100%; height: 90px; object-fit: contain; }
.dokument .klauzula {
  margin-top: var(--sp-6); padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.45;
}
/* Na wydruku schematy schodzą do rozmiaru, w którym wszystkie sześć mieści
   się na jednej stronie razem z tabelą uszkodzeń. */
.schematy.male { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

@media print {
  .dokument { border: 0; padding: 0; max-width: none; }
  .dokument .sekcja-kosztorysu, .dokument .podpisy { break-inside: avoid; }
  .dokument .sekcja-schematu { break-after: auto; }
  .rzut .plotno { background: #fff; }
  .pinezka { box-shadow: none; }
}

@media (max-width: 720px) {
  .schematy .rzut.szeroki { grid-column: span 1; }
  .dokument .dwie-kolumny, .dokument .podpisy { grid-template-columns: 1fr; }
  .dodaj-pozycje .ilosc-nowej { width: 100%; }
}

/* ═══ CRM: przypomnienia, odzyskiwanie, kampanie ══════════════════════════ */
/* Sekcja dopisana przez moduł CRM. Arkusz bazowy stylował .podtytul wyłącznie
   w pasku górnym, a ten sam napis („ile pozycji", „limit wiadomości") stoi też
   w nagłówku i w stopce karty — bez tych dwóch reguł byłby czarnym tekstem
   tej samej wagi co tytuł sekcji. */

.karta > .naglowek .podtytul,
.karta > .stopka .podtytul {
  color:var(--c-text-muted); font-size:var(--fs-sm); line-height:1.4;
}

/* Drobna uwaga poza kontenerem .pole (np. obok przycisku wysyłki). */
.crm-uwaga { font-size:var(--fs-xs); color:var(--c-text-disabled); line-height:1.4; }

/* Podgląd wiadomości. Wygląda jak dymek na telefonie, bo dokładnie tak ją
   zobaczy klient — a doradca ma ocenić treść, zanim ją wyśle, nie po. */
.crm-tresc {
  background:var(--c-blue-50); border:1px solid var(--c-blue-200);
  border-radius:var(--r-lg); border-bottom-left-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4); color:var(--c-text);
  font-size:var(--fs-base); line-height:1.5; overflow-wrap:anywhere;
  white-space:pre-wrap; min-height:52px;
}

/* Licznik znaków i segmentów SMS-a. Cyfry o stałej szerokości, bo zmienia się
   przy każdym naciśnięciu klawisza i skakałby w poziomie. */
.crm-liczydlo {
  display:block; margin-top:6px; font-size:var(--fs-xs); font-weight:600;
  color:var(--c-text-muted); font-variant-numeric:tabular-nums;
}

/* Wiersz odłożony zostaje na ekranie, ale przestaje wołać o działanie.
   Znikający wiersz każe doradcy sprawdzać, czy na pewno kliknął to, co chciał. */
table.tabela tbody tr.crm-odlozony td { opacity:.55; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODUŁ: ustawienia warsztatu

   Ekran, na który wchodzi się rzadko i za każdym razem po coś innego. Stąd
   dwie decyzje: pasek zakładek zamiast jednej długiej strony (siedem sekcji
   to granica tego, co da się przewinąć bez gubienia się) i układ dwukolumnowy
   tam, gdzie po lewej stoi lista bytów, a po prawej edytor jednego z nich —
   matryce i szablony inspekcji wybiera się i porównuje, a nie przewija.
   ═══════════════════════════════════════════════════════════════════════════ */

.ust-zakladki {
  display:flex; gap:var(--sp-1); flex-wrap:wrap; margin-bottom:var(--sp-5);
  border-bottom:1px solid var(--c-border); padding-bottom:var(--sp-2);
}
.ust-zakladki a {
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  padding:0 var(--sp-3); min-height:var(--ctl-h); border-radius:var(--r-md);
  color:var(--c-text-muted); font-weight:600; font-size:var(--fs-sm);
  white-space:nowrap;
}
.ust-zakladki a:hover { background:var(--c-blue-50); color:var(--c-blue-700); }
.ust-zakladki a.aktywna {
  background:var(--c-blue-600); color:#fff;
}
.ust-zakladki a .ikona { flex:none; }

.ust-sekcja { margin-bottom:var(--sp-5); }

/* Układ „lista po lewej, edytor po prawej". Przy wąskim ekranie lista wraca
   nad edytor — na tablecie i tak wybiera się jedną rzecz naraz. */
.ust-dwie-kolumny {
  display:grid; grid-template-columns:minmax(240px,300px) minmax(0,1fr);
  gap:var(--sp-4); align-items:start;
}
.ust-bok { min-width:0; }
.ust-glowna { min-width:0; }
@media (max-width:1100px) {
  .ust-dwie-kolumny { grid-template-columns:minmax(0,1fr); }
}

/* Wiersz wyłączony: zgaszony, ale nadal czytelny. Nie chowamy go, bo
   „przywróć" jest częstsze niż „wyłącz" — pracownik wraca z urlopu, etykieta
   wraca po sezonie. */
.ust-wygaszony { opacity:.62; }
.ust-wygaszony:hover { opacity:1; }

.ust-waskie { max-width:118px; }
.ust-pole-inline { width:auto; min-width:180px; }
.ust-pole-wzor { min-width:170px; font-family:var(--font-mono); }
.ust-nazwa-w-naglowku { max-width:340px; font-weight:650; }
.ust-wiersz-inline { display:flex; gap:var(--sp-2); align-items:center; }
.ust-wiersz-inline input { min-width:0; }

/* ─── Paleta kolorów ─────────────────────────────────────────────────────── */
/* Zamknięta lista zamiast próbnika: dowolny kolor kończy się pastelowym
   żółtym, którego na tablecie w słońcu nie widać. Nazwa koloru jest w tytule
   i w tekście dla czytnika ekranu — sam kwadracik nigdy nie niesie treści. */

.ust-paleta { display:flex; gap:5px; flex-wrap:wrap; }
.ust-kolor {
  width:30px; height:30px; border-radius:var(--r-sm); cursor:pointer;
  border:2px solid transparent; position:relative; display:block;
}
.ust-kolor input { position:absolute; opacity:0; width:100%; height:100%; margin:0; }
.ust-kolor-nazwa {
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}
.ust-kolor:has(input:checked) { border-color:var(--c-text); box-shadow:var(--sh-2); }
.ust-kolor:has(input:focus-visible) { outline:3px solid var(--c-focus); outline-offset:2px; }
.ust-kolor.k1 { background:#C62719; }
.ust-kolor.k2 { background:#9A5B00; }
.ust-kolor.k3 { background:#00713C; }
.ust-kolor.k4 { background:#00697A; }
.ust-kolor.k5 { background:#0B5FA5; }
.ust-kolor.k6 { background:#5F3D9C; }
.ust-kolor.k7 { background:#5B6C7A; }
.ust-kolor.k8 { background:#161E26; }

/* ─── PIN pokazywany raz ─────────────────────────────────────────────────── */
.ust-pin-karta { border-color:var(--c-green); border-width:2px; }
.ust-pin {
  font-family:var(--font-mono); font-size:52px; font-weight:700;
  letter-spacing:.22em; color:var(--c-green-700); margin:var(--sp-3) 0;
  font-variant-numeric:tabular-nums;
}

/* ─── Wykres matrycy marż ────────────────────────────────────────────────── */
/* Obie osie logarytmiczne — matryca obejmuje cztery rzędy wielkości. */

.ust-wykres-otoczka { overflow-x:auto; }
.ust-wykres {
  width:100%; max-width:700px; height:auto; display:block;
  background:var(--c-surface-alt); border-radius:var(--r-md);
}
.ust-wykres .ust-siatka line { stroke:var(--c-border); stroke-width:1; }
.ust-wykres .ust-odniesienie {
  fill:none; stroke:var(--c-graf-200); stroke-width:1.5; stroke-dasharray:4 4;
}
.ust-wykres .ust-krzywa { fill:none; stroke:var(--c-blue-600); stroke-width:2.5; }
.ust-wykres .ust-punkt { fill:var(--c-blue-700); stroke:#fff; stroke-width:1.5; }
.ust-wykres .ust-spadek { fill:var(--c-red); stroke:#fff; stroke-width:1.5; }
.ust-wykres .ust-etykiety text { font-size:11px; fill:var(--c-text-muted); }

.ust-prog-przyklad { color:var(--c-text-muted); font-size:var(--fs-sm); }
.ust-domyslna { max-width:360px; margin:0 auto; text-align:left; }

/* ─── Inspekcje ──────────────────────────────────────────────────────────── */
.ust-grupa-naglowek {
  padding:var(--sp-3) var(--sp-4) var(--sp-1);
  display:flex; align-items:baseline; gap:var(--sp-2);
}
.ust-opis-progow { color:var(--c-amber-700); font-weight:600; }
.ust-usun-opis { font-size:var(--fs-xs); color:var(--c-text-muted); }

/* ─── Szablony wiadomości ────────────────────────────────────────────────── */
/* Treść i podgląd obok siebie: licznik znaków sam w sobie nic nie mówi,
   dopiero widok gotowej wiadomości pokazuje, co przepycha ją na drugi segment. */

.ust-szablon {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,300px);
  gap:var(--sp-4); align-items:start;
}
@media (max-width:900px) { .ust-szablon { grid-template-columns:minmax(0,1fr); } }
.ust-szablon-edycja { min-width:0; }
.ust-szablon-podglad { min-width:0; }
.ust-dymek {
  background:var(--c-blue-100); border:1px solid var(--c-blue-200);
  border-radius:var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm);
  padding:var(--sp-3); margin-top:5px; font-size:var(--fs-sm);
  line-height:1.5; overflow-wrap:anywhere;
}
.ust-wstawki { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.ust-wstawki .btn { font-family:var(--font-mono); font-size:var(--fs-xs); }
/* Druga i kolejna wiadomość to druga i kolejna opłata — licznik ma to
   powiedzieć kolorem i słowem naraz. */
.ust-drogo { color:var(--c-amber-700); font-weight:700; }

/* ─── Opłaty ryczałtowe ──────────────────────────────────────────────────── */
.ust-oplata {
  border-bottom:1px solid var(--c-border); padding-bottom:var(--sp-4);
  margin-bottom:var(--sp-4);
}
.ust-oplata:last-child { border-bottom:0; padding-bottom:0; margin-bottom:0; }
.ust-przyklady { display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }

/* ─── Import ─────────────────────────────────────────────────────────────── */
.ust-mapowanie {
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.ust-lista-pol { display:flex; gap:5px; flex-wrap:wrap; }

/* Zaczepy dla skryptu: wiersz punktu kontrolnego matrycy, wiersz punktu
   inspekcji i komórki tabeli przykładów, które przeliczają się na żywo.
   Mają własne klasy zamiast selektorów po strukturze tabeli — inaczej
   dołożenie kolumny cicho psuje podgląd. */
.ust-prog input { min-width:80px; }
.ust-punkt-wiersz td { vertical-align:top; }
.ust-k-narzut, .ust-k-zysk, .ust-k-marza { color:var(--c-text-muted); }
.ust-k-cena { color:var(--c-text); }