/* =========================================================================
   Centrum dowodzenia M5 — arkusz stylów
   Mobile-first: projektowane najpierw pod telefon, potem rozszerzane na duże ekrany.
   ========================================================================= */

:root {
  /* Kolory — motyw jasny */
  --tlo: #f6f7f9;
  --powierzchnia: #ffffff;
  --powierzchnia-2: #f0f2f5;
  --obrys: #e2e5ea;
  --obrys-mocny: #cdd2da;
  --tekst: #10141a;
  --tekst-2: #5b6675;
  --tekst-3: #8b95a4;

  --akcent: #007cc2;   /* niebieski wprost z logo M5 */
  --akcent-tlo: #e7f2f8;
  --zysk: #0b8a5f;
  --zysk-tlo: #e3f5ee;
  --uwaga: #b45309;
  --uwaga-tlo: #fdf1e0;
  --blad: #c2331f;
  --blad-tlo: #fdeceb;

  /* Wymiary */
  --r-mala: 8px;
  --r-srednia: 12px;
  --r-duza: 16px;
  --cel-dotyku: 44px;           /* minimalny cel dotykowy */
  --nawigacja-wys: 60px;
  --cien-1: 0 1px 2px rgba(16, 20, 26, .06), 0 1px 3px rgba(16, 20, 26, .04);
  --cien-2: 0 4px 12px rgba(16, 20, 26, .08);
  --cien-nad: 0 -1px 0 var(--obrys);

  /* Etykiety sklepów na ekranie SEO. CELOWO nie zieleń, bursztyn ani czerwień —
     te kolory znaczą w tej aplikacji STAN. Gdyby „SZS" był bursztynowy,
     wyglądałby jak ostrzeżenie. Skrót sklepu jest wypisany słownie, więc chip
     działa też dla osoby nierozróżniającej barw. */
  --szs: #7a6ff0;
  --ld: #0f9b8e;
  --mb: #d4649a;

  /* Bezpieczne strefy telefonu (notch, pasek gestów) */
  --bezpieczna-gora: env(safe-area-inset-top, 0px);
  --bezpieczna-dol: env(safe-area-inset-bottom, 0px);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) {
    --szs: #9c93ff;
    --ld: #3fc4b6;
    --mb: #eb8ab8;
    --tlo: #0c0e12;
    --powierzchnia: #14181f;
    --powierzchnia-2: #1b2029;
    --obrys: #262c37;
    --obrys-mocny: #39414f;
    --tekst: #e9ecf1;
    --tekst-2: #9aa5b4;
    --tekst-3: #6b7686;
    --akcent: #55b2e6;
    --akcent-tlo: #113245;
    --zysk: #3dd39a;
    --zysk-tlo: #10281f;
    --uwaga: #eab464;
    --uwaga-tlo: #2b2013;
    --blad: #f08272;
    --blad-tlo: #2d1715;
    --cien-1: 0 1px 2px rgba(0, 0, 0, .4);
    --cien-2: 0 4px 14px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--tlo);
  color: var(--tekst);
  font: 400 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;      /* bez gumowego odbijania strony */
}

/* ============================ Układ strony ============================ */

.aplikacja {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--nawigacja-wys) + var(--bezpieczna-dol));
}

.pasek-gorny {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(var(--bezpieczna-gora) + 12px) 16px 12px;
  /* Pełne tło, bez backdrop-filter.
     Rozmycie na przyklejonym pasku wywoływało w Chrome błąd kompozycji warstw:
     cała treść pod spodem renderowała się niemal przezroczysta. */
  background: var(--tlo);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.pasek-gorny.przewiniety { border-bottom-color: var(--obrys); }

.pasek-gorny h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.pasek-gorny .podtytul {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--tekst-2);
}

.tresc { flex: 1; padding: 4px 16px 24px; }

/* ===================== Zakładki wewnątrz sklepu ======================= */

/* Przechodzenie między modułami jednego sklepu. Bez tego z rozliczeń
   nie było jak wrócić do zamówień inaczej niż przez menu główne. */
.zakladki {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 16px 2px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--obrys);
  scrollbar-width: none;
}
.zakladki::-webkit-scrollbar { display: none; }
.zakladki a {
  flex: 0 0 auto;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 550;
  color: var(--tekst-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.zakladki a:hover { color: var(--tekst); }
.zakladki a.aktywna { color: var(--akcent); border-bottom-color: var(--akcent); }
.licznik-maly {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--akcent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}
@media (min-width: 900px) {
  .zakladki { grid-area: zakladki; padding: 0 32px 2px; margin-bottom: 20px; }
}

/* ====================== Nawigacja dolna (kciuk) ======================= */

.nawigacja {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: calc(var(--nawigacja-wys) + var(--bezpieczna-dol));
  padding-bottom: var(--bezpieczna-dol);
  background: var(--powierzchnia);
  border-top: 1px solid var(--obrys);
}

.nawigacja a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--cel-dotyku);
  text-decoration: none;
  color: var(--tekst-3);
  font-size: 11px;
  font-weight: 500;
  transition: color .15s;
}
.nawigacja a svg { width: 22px; height: 22px; stroke-width: 1.9; }

/* Logo sklepu w menu. Pole szersze niż wysokie, bo logo Łóżko-Domka
   to poziomy napis — w kwadracie zrobiłoby się nieczytelne. */
.logo-menu {
  display: grid;
  place-items: center;
  width: 34px;
  height: 22px;
}
.logo-menu img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
/* Aktywna sekcja: logo w pełnej sile, pozostałe lekko przygaszone. */
.nawigacja a .logo-menu { opacity: .55; transition: opacity .15s; }
.nawigacja a.aktywna .logo-menu { opacity: 1; }
.nawigacja a.aktywna { color: var(--akcent); }
.nawigacja a:active { opacity: .6; }

/* ============================== Karty ================================= */

.karta {
  background: var(--powierzchnia);
  border: 1px solid var(--obrys);
  border-radius: var(--r-duza);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--cien-1);
}
.karta.klikalna { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.karta.klikalna:active { transform: scale(.985); box-shadow: var(--cien-2); }

.karta-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.karta-tytul {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tekst-2);
}

/* ====================== Liczby (kafle wyników) ======================== */

.kafle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.kafle.trzy { grid-template-columns: repeat(3, 1fr); }
/* Cztery kafle: na telefonie po dwa w rzędzie, na dużym ekranie w jednym. */
.kafle.cztery { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .kafle.cztery { grid-template-columns: repeat(4, 1fr); } }

.kafel {
  background: var(--powierzchnia);
  border: 1px solid var(--obrys);
  border-radius: var(--r-srednia);
  padding: 14px;
}
.kafel .etykieta { font-size: 12px; color: var(--tekst-2); margin-bottom: 6px; }
.kafel .liczba {
  font-size: clamp(17px, 5.2vw, 22px);   /* przy trzech kaflach obok siebie kwota musi zmieścić się w jednej linii */
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kafel .zmiana { font-size: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kafel.wyroznik { border-color: var(--obrys-mocny); background: var(--powierzchnia-2); }
.kafel .prognoza {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed var(--obrys-mocny);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.kafel .etykieta-prognozy {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tekst-3);
  margin-bottom: 1px;
}
a.kafel { text-decoration: none; color: inherit; display: block; transition: border-color .15s, transform .1s; }
a.kafel:hover { border-color: var(--akcent); }
a.kafel:active { transform: scale(.99); }

/* Kafel „Stan konta". Pięć kafli w rzędzie robi się ciasne, więc na dużym
   ekranie stan konta stoi pierwszy i dostaje własną kolumnę. */
.kafle.piec { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .kafle.piec { grid-template-columns: repeat(5, 1fr); } }
.kafel-konto { border-color: var(--obrys-mocny); }
.kafel-konto .po-zobowiazaniach {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--obrys);
}
/* „Nieco tylko mniejsza" od stanu konta — 20 px przy 26 px liczby głównej. */
.kafel-konto .po-zobowiazaniach strong {
  display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.kafel-konto .niepewne strong { color: var(--tekst-2); }
.kafel-konto .zastrzezenie {
  display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; color: var(--tekst-3);
}
.kafel-konto .przygaszona-kafel { color: var(--tekst-3); margin-top: 8px; }
.formularz-stanu { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 10px 0; }
.formularz-stanu label { font-size: 12.5px; color: var(--tekst-2); }
.formularz-stanu input {
  display: block; margin-top: 4px; padding: 7px 9px; font-size: 14px; min-width: 170px;
  border: 1px solid var(--obrys); border-radius: 7px;
  background: var(--tlo); color: var(--tekst); font-variant-numeric: tabular-nums;
}
.brakujace {
  margin-top: 12px;
  padding: 11px 13px;
  background: var(--uwaga-tlo);
  border-radius: var(--r-mala);
}
.brakujace .pozycja-opis { color: var(--uwaga); }
.liczba.dodatnia, .zmiana.dodatnia { color: var(--zysk); }
.liczba.ujemna,  .zmiana.ujemna  { color: var(--blad); }

/* ============================= Logotypy =============================== */

/* Loga sklepów są bardzo różne — księżyc z gwiazdek, napis, koala.
   Dajemy im wspólne pole o stałej wysokości, żeby lista wyglądała równo. */
/* Pole prostokątne, nie kwadratowe: logo Łóżko-Domka to szeroki napis
   i w kwadracie robiło się nieczytelne. Bez tła — loga mają własne. */
.logo-sklepu {
  flex: 0 0 auto;
  width: 78px;
  height: 50px;
  display: grid;
  place-items: center;
}
.logo-sklepu img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* Logo w nagłówku sekcji, w miejsce nazwy sklepu.
   Stała wysokość, szerokość dowolna — proporcje logotypów są bardzo różne. */
.logo-tytul { display: block; height: 42px; }
.logo-tytul img { height: 100%; width: auto; max-width: 100%; object-fit: contain;
                  object-position: left center; display: block; }
@media (min-width: 900px) { .logo-tytul { height: 52px; } }

.logowanie-marka .logo-m5 { height: 62px; margin: 0 auto 16px; }
.logowanie-marka .logo-m5 img { height: 100%; width: auto; display: block; margin: 0 auto; }

/* ============================ Znaczniki =============================== */

.znacznik {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
/* Każdy stan zamówienia ma własny kolor — wcześniej „W realizacji" i „Czeka
   na płatność" wyglądały tak samo, więc z listy nie dało się ich odróżnić. */
.znacznik.nowe       { background: var(--powierzchnia-2); color: var(--tekst-2);
                       border: 1px solid var(--obrys); }
.znacznik.realizacja { background: var(--akcent-tlo); color: var(--akcent); }
.znacznik.oczekuje   { background: var(--uwaga-tlo); color: var(--uwaga); }
.znacznik.wyslane    { background: var(--zysk-tlo); color: var(--zysk); }
.znacznik.uwaga      { background: var(--blad-tlo); color: var(--blad); }

/* ===================== Lista zamówień (na telefonie) ================== */

.pozycja {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--obrys);
  text-decoration: none;
  color: inherit;
}
.pozycja:last-child { border-bottom: 0; }
.pozycja-gora { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pozycja.z-logiem { display: flex; align-items: center; gap: 13px; }
/* Spółka pod sklepami — oddzielona mocniejszą kreską, bo to inny rodzaj bytu. */
.pozycja-spolka { border-top: 2px solid var(--obrys-mocny); margin-top: 4px; }
.pozycja.z-logiem .pozycja-srodek { flex: 1; min-width: 0; }
.pozycja-numer { font-weight: 650; font-variant-numeric: tabular-nums; }
.pozycja-kwota { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pozycja-opis { font-size: 13px; color: var(--tekst-2); margin-top: 3px; }
/* Przedmiot sprzedaży z faktury — osobna linia, bo listy pozycji bywają długie
   i wciśnięte między kwoty rozpychały wiersz (15.09.2026). */
.pozycja-przedmiot {
  font-size: 12.5px; color: var(--tekst-3); margin-top: 3px; line-height: 1.4;
}

/* Pasek na górze pulpitu: szukanie po lewej, wgrywanie wyciągu po prawej.
   Na telefonie jedno pod drugim. */
.pasek-pulpitu {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  margin-bottom: 14px;
}
.pasek-pulpitu .szukajka { flex: 1 1 340px; }
.pasek-pulpitu .wgrywarka {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
}
.pasek-pulpitu .wgrywarka label { cursor: pointer; margin: 0; }
.pasek-pulpitu .wgrywarka .drobne { flex: 1 1 100%; max-width: 280px; line-height: 1.35; }
@media (max-width: 700px) {
  .pasek-pulpitu { flex-direction: column; align-items: stretch; }
  .pasek-pulpitu .wgrywarka .drobne { max-width: none; }
}

/* ================== Globalna wyszukiwarka (pulpit + /szukaj) ============== */
/* Jedno pole na cały system — klient 15.09.2026: „wpisując nazwisko, numer
   zamówienia, numer faktury przeszukana zostanie cała baza". */
.szukajka { display: flex; gap: 8px; align-items: stretch; }
.szukajka input[type="search"] {
  flex: 1 1 auto; min-width: 0; padding: 9px 12px; font-size: 14px;
  border: 1px solid var(--obrys); border-radius: 8px;
  background: var(--tlo); color: var(--tekst);
}
.szukajka input[type="search"]:focus {
  outline: none; border-color: var(--akcent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akcent) 22%, transparent);
}
.szukajka-duza { margin-bottom: 14px; }
.szukajka-duza input[type="search"] { padding: 12px 14px; font-size: 16px; }

.wyniki-szukania { border-top: 1px solid var(--obrys); }
.wynik {
  display: flex; gap: 10px; align-items: baseline; padding: 10px 16px;
  border-bottom: 1px solid var(--obrys); text-decoration: none; color: inherit;
}
.wynik:last-child { border-bottom: none; }
.wynik:hover { background: var(--powierzchnia-2); }
.wynik-sklep {
  flex: 0 0 auto; min-width: 34px; text-align: center; font-size: 10.5px;
  font-weight: 700; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px;
  background: var(--powierzchnia-2); color: var(--tekst-2);
  border: 1px solid var(--obrys);
}
.wynik-tresc { display: block; min-width: 0; }
.wynik-tresc strong { display: block; font-size: 14px; }
.wynik-opis {
  display: block; margin-top: 2px; font-size: 12.5px; color: var(--tekst-3);
  line-height: 1.4;
}
.pozycja-dol { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.pozycja-drobne { font-size: 12px; color: var(--tekst-3); font-variant-numeric: tabular-nums; }

/* ============================== Tabela ================================ */

.karta.bez-marginesu { padding: 16px 0 8px; }
.karta.bez-marginesu .karta-naglowek { padding: 0 16px; }

/* Tabela przewija się w bok wewnątrz swojego pola — strona nigdy nie jedzie w poziomie. */
.tabela-otoczka {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--obrys);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  /* MB ma 14 kolumn i przy 13 px z odstępami po 10 px ostatnia (STATUS)
     wychodziła poza ekran. Ciaśniejsze odstępy i pół punktu mniejsze pismo
     mieszczą całość bez przewijania (klient 08.09.2026). */
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;   /* cyfry o równej szerokości — kolumny się nie chwieją */
  white-space: nowrap;
}

.tabela th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--powierzchnia-2);
  padding: 8px 7px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tekst-2);
  border-bottom: 1px solid var(--obrys);
}

.tabela td {
  padding: 8px 7px;
  border-bottom: 1px solid var(--obrys);
  color: var(--tekst);
}
.tabela tbody tr:hover td { background: var(--powierzchnia-2); }
.tabela tbody tr:last-child td { border-bottom: 0; }

.tabela .prawo { text-align: right; }
.tabela .mocna { font-weight: 650; }
.tabela .przygaszona { color: var(--tekst-3); }
.tabela .drobne { font-size: 12px; color: var(--tekst-2); }
.tabela .szeroka { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.tabela .dodatnia { color: var(--zysk); font-weight: 600; }
.tabela .ujemna { color: var(--blad); font-weight: 600; }

/* Numer zamówienia zostaje widoczny przy przewijaniu w bok. */
.tabela .przyklejona {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--powierzchnia);
  box-shadow: 1px 0 0 var(--obrys);
}
.tabela thead .przyklejona { z-index: 3; background: var(--powierzchnia-2); }
.tabela tbody tr:hover .przyklejona { background: var(--powierzchnia-2); }

/* Koszt jeszcze niepotwierdzony fakturą od dostawcy. */
.tabela .szacowany { color: var(--uwaga); font-weight: 600; }
.tabela .szacowany::after { content: " ●"; font-size: 9px; vertical-align: middle; }
.tabela .czeka { color: var(--tekst-3); }
.tabela .brak { color: var(--tekst-3); cursor: help; }
.tabela tr.bez-kosztu td { background: color-mix(in srgb, var(--akcent-tlo) 45%, transparent); }
.tabela tr.bez-kosztu .przyklejona { background: color-mix(in srgb, var(--akcent-tlo) 45%, var(--powierzchnia)); }

/* Skrót formy płatności — pełna nazwa pod kursorem. */
.platnosc {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--powierzchnia-2);
  border: 1px solid var(--obrys);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--tekst-2);
  cursor: help;
}
/* Pobranie na pomarańczowo, płatności z góry na zielono —
   pieniądze za pobranie przychodzą dopiero przy odbiorze. */
.platnosc.pobranie {
  border-color: color-mix(in srgb, var(--uwaga) 55%, transparent);
  background: color-mix(in srgb, var(--uwaga-tlo) 70%, transparent);
  color: var(--uwaga);
}
.platnosc.online {
  border-color: color-mix(in srgb, var(--zysk) 45%, transparent);
  background: color-mix(in srgb, var(--zysk-tlo) 70%, transparent);
  color: var(--zysk);
}

/* Termin realizacji: siedem dni roboczych od złożenia zamówienia.
   Trzy stopnie ostrzeżenia — im bliżej, tym mocniej. Tylko dla niewysłanych. */
.tabela td.termin { font-weight: 650; }
.tabela td.termin.jutro-koniec {                 /* jutro ostatni dzień */
  color: #8a6d00;
  background: color-mix(in srgb, #ffd60a 22%, transparent);
}
.tabela td.termin.dzis-ostatni {                 /* dziś ostatni dzień */
  color: var(--uwaga);
  background: color-mix(in srgb, var(--uwaga) 18%, transparent);
}
.tabela td.termin.po-terminie {                  /* termin minął */
  color: #fff;
  background: var(--blad);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) .tabela td.termin.jutro-koniec { color: #ffd60a; }
}

/* Wiersz spoza schematu: korekta, reklamacja — dopisywany ręcznie. */
.tabela .wiersz-reczny td { background: var(--uwaga-tlo); }
.tabela .wiersz-reczny .przyklejona { background: var(--uwaga-tlo); }
.tabela .wiersz-reczny .drobne { display: block; font-weight: 400; }

.tabela tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--powierzchnia-2);
  border-top: 2px solid var(--obrys-mocny);
  border-bottom: 0;
  padding: 11px 10px;
  font-weight: 700;
}
.tabela tfoot .przyklejona { background: var(--powierzchnia-2); }

.pod-tabela {
  margin: 10px 16px 0;
  font-size: 12px;
  color: var(--tekst-3);
}
@media (min-width: 1100px) {
  .pod-tabela { display: none; }   /* na dużym ekranie wszystko widać bez przewijania */
}

/* ===================== Przyciski procesów w sekcji ==================== */

.procesy { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.procesy .przycisk { text-decoration: none; }
.licznik {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .25);
  font-size: 12.5px;
  font-weight: 700;
}
.wkrotce {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .7;
}

/* ======================= Ekran nowych zamówień ======================== */

.karta.wymaga-uwagi { border-color: var(--uwaga); border-width: 1.5px; }

/* Zamówienie, które da się zrealizować z magazynu — to oszczędność,
   więc musi rzucać się w oczy mocniej niż zwykły wiersz. */
.karta.jest-w-magazynie { border-color: var(--zysk); border-width: 1.5px; }
.karta.z-magazynu { border-color: var(--zysk); background: var(--zysk-tlo); }
.komunikat.magazyn-info { background: var(--zysk-tlo); color: var(--zysk); }

.magazyn-propozycja {
  margin-top: 12px;
  padding: 12px;
  background: var(--zysk-tlo);
  border-radius: var(--r-mala);
}
.magazyn-naglowek { font-size: 13.5px; color: var(--zysk); margin-bottom: 8px; }
.magazyn-pozycja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 7px 0;
  font-size: 13.5px;
}
.magazyn-pozycja .drobne { display: block; font-size: 12px; color: var(--tekst-2); }
.magazyn-wybrany {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--zysk-tlo);
  border-radius: var(--r-mala);
  font-size: 13.5px;
  color: var(--zysk);
}
/* Wykrzyknik przy zamówieniu, które wypadło z obiegu.
   Pełna informacja rozwija się po najechaniu (na telefonie po dotknięciu). */
.alarm {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-left: 6px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--uwaga);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  position: relative;
}
/* Dymek NIE jako ::after wewnątrz tabeli — tabela przewija się poziomo
   (overflow-x: auto) i przycinała wszystko, co z niej wystaje.
   Dymek żyje na poziomie strony, a skrypt ustawia go przy wykrzykniku. */
.dymek {
  position: fixed;
  z-index: 60;
  max-width: min(280px, calc(100vw - 32px));
  padding: 9px 11px;
  border-radius: var(--r-mala);
  background: var(--tekst);
  color: var(--powierzchnia);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  box-shadow: var(--cien-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
}
.dymek.widoczny { opacity: 1; }

.szczegoly {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 12px;
  font-size: 14px;
}
.etykieta-mala {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tekst-3);
  margin-bottom: 1px;
}
.zmieniony { color: var(--uwaga); font-size: 13px; }

.komentarz-klienta {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--powierzchnia-2);
  border-left: 3px solid var(--uwaga);
  border-radius: 0 var(--r-mala) var(--r-mala) 0;
  font-size: 14px;
  line-height: 1.5;
}

.decyzja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--obrys);
}
.decyzja label { font-size: 13px; font-weight: 600; color: var(--tekst-2); }
.decyzja input {
  width: 130px;
  min-height: var(--cel-dotyku);
  padding: 8px 12px;
  font: inherit;
  font-size: 16px;
  color: var(--tekst);
  background: var(--powierzchnia);
  border: 1px solid var(--obrys-mocny);
  border-radius: var(--r-mala);
}

.uwaga-wyceny { margin: 8px 0 0; font-size: 12.5px; color: var(--tekst-3); }
.podpozycja { margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--obrys); }

.akcje { margin-top: 22px; }
.krok-drugi { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--obrys); }
.blokada { margin: 0 0 10px; font-size: 13.5px; color: var(--uwaga); }
.pod-akcja { margin: 10px 0 0; font-size: 12.5px; color: var(--tekst-3); text-align: center; }

.komunikat.uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.komunikat.sukces { background: var(--zysk-tlo); color: var(--zysk); }

/* ============================ Ekran kosztów =========================== */

/* Pasek stanu danych: kiedy ostatnio pobrane + przycisk pobrania.
   Nic nie ładuje się samo — decyzja klienta 06.09.2026. */
.pasek-danych {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.stan-danych { font-size: 12.5px; color: var(--tekst-3); }
.przycisk.maly { min-height: 34px; padding: 0 13px; font-size: 13px; }

.miesiace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.miesiace .przycisk { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.miesiace .biezacy { font-weight: 650; font-size: 15px; }

.pozycja.czeka-na-fakture { opacity: .75; }

.formularz-kosztu {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.formularz-kosztu .pole { flex: 1 1 190px; margin-bottom: 0; }
.formularz-kosztu .pole.waski { flex: 0 1 130px; }
.formularz-kosztu button { flex: 0 0 auto; }

/* ============================== Narzędzia ============================= */

.lista-plikow { margin-top: 14px; border-top: 1px solid var(--obrys); }
.plik {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--obrys);
  text-decoration: none;
  color: inherit;
}
.plik:last-child { border-bottom: 0; }
.plik:hover .plik-nazwa { color: var(--akcent); }
.plik-nazwa { display: block; font-weight: 600; font-size: 14px; }
.plik-opis { display: block; font-size: 12.5px; color: var(--tekst-3); margin-top: 2px; }

.pole select {
  width: 100%;
  min-height: var(--cel-dotyku);
  padding: 9px 12px;
  font: inherit;
  font-size: 16px;
  color: var(--tekst);
  background: var(--powierzchnia);
  border: 1px solid var(--obrys-mocny);
  border-radius: var(--r-mala);
}

/* ============================ Rozliczenia ============================ */

.pozycja.oplacona { opacity: .6; }
.decyzja-zwrotu { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.wybor-dzialu {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--obrys);
  font-size: 13.5px;
}
.wybor-dzialu label { cursor: pointer; }
.wybor-dzialu input { margin-right: 5px; }
.wybor-dzialu label.proponowany { color: var(--zysk); font-weight: 650; }

/* Faktura dostawcy z pozycjami — wszystko widoczne od razu, bez rozwijania:
   przy szerokim ekranie rozwijane wiersze zostawiały puste pole. */
.grupa-faktury { margin-bottom: 18px; }
.grupa-faktury:last-of-type { margin-bottom: 0; }
.grupa-faktury.oplacona { opacity: .65; }
.grupa-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 0 8px;
}
.grupa-nazwa { font-weight: 650; font-size: 14.5px; }
.grupa-ile {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--tekst-3);
}
.grupa-prawa { display: flex; align-items: center; gap: 10px; }
.grupa-faktury .tabela-otoczka { border: 1px solid var(--obrys); border-radius: var(--r-srednia); }
.grupa-faktury .tabela td { padding: 7px 10px; }
.grupa-faktury .tabela tr:first-child td { border-top: 0; }
.grupa-faktury .tabela tbody tr:last-child td { border-bottom: 0; }
.pozycja.wybieralna { cursor: pointer; display: block; }
.wybor {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  cursor: pointer;
}
.wybor input { margin-right: 8px; transform: scale(1.15); }
.pozycja.wybieralna:hover { background: var(--powierzchnia-2); }
.pozycja.wybieralna input[type=checkbox] { margin-right: 8px; transform: scale(1.15); }
.pozycja-dol .w-linii { display: inline; }
.link-przycisk {
  background: none; border: 0; padding: 0 0 0 8px;
  font: inherit; font-size: 12.5px; color: var(--tekst-3);
  text-decoration: underline; cursor: pointer;
}
.link-przycisk:hover { color: var(--blad); }
.pozycja-dol input[type=date] {
  min-height: 32px; padding: 3px 8px; font: inherit; font-size: 13px;
  color: var(--tekst); background: var(--powierzchnia);
  border: 1px solid var(--obrys-mocny); border-radius: var(--r-mala);
}
.pole input[type=file] { font-size: 13px; padding: 8px 0; }

/* ============================== Notatki ============================== */

/* Ikona kartki przy numerze zamówienia. Musi być widoczna sama z siebie —
   inaczej nikt nie zauważy, że notatkę w ogóle da się dodać. */
.notatka-ikona {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  vertical-align: middle;
  border-radius: 6px;
  border: 1px solid var(--obrys-mocny);
  background: var(--powierzchnia-2);
  color: var(--tekst-2);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.notatka-ikona svg { width: 13px; height: 13px; }
.notatka-ikona:hover {
  color: var(--akcent);
  border-color: var(--akcent);
  background: var(--akcent-tlo);
}
/* Wypełniona notatka: pełny kolor marki, żeby rzucała się w oczy przy przeglądaniu. */
.notatka-ikona.ma-tresc {
  color: #fff;
  background: var(--akcent);
  border-color: var(--akcent);
}
.notatka-ikona.ma-tresc:hover { opacity: .85; }

/* ==================== Dopisywanie wierszy ręcznych ==================== */

.dopisywanie { margin: 14px 16px 0; }
.dopisywanie summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--akcent);
  padding: 8px 0;
  list-style: none;
}
.dopisywanie summary::-webkit-details-marker { display: none; }
.dopisywanie summary::before { content: "+ "; font-weight: 700; }
.dopisywanie details[open] summary::before { content: "− "; }
.dopisywanie-tresc {
  display: grid;
  gap: 18px;
  padding: 14px 0 4px;
}
@media (min-width: 900px) { .dopisywanie-tresc { grid-template-columns: 1fr 1fr; gap: 26px; } }
.dopisywanie form {
  padding: 14px;
  background: var(--powierzchnia-2);
  border: 1px solid var(--obrys);
  border-radius: var(--r-srednia);
  align-content: start;
}
.wyjasnienie {
  flex: 1 1 100%;
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tekst-2);
}

/* Korekta z Tecomatu — nie jest ani sprzedażą, ani kosztem. */
.tabela tr.wiersz-korekta td { background: var(--powierzchnia-2); font-style: italic; }
.tabela tr.wiersz-korekta .przyklejona { background: var(--powierzchnia-2); }

/* =========================== Przyciski =============================== */

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--cel-dotyku);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-mala);
  background: var(--akcent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
}
.przycisk:active { transform: scale(.98); opacity: .9; }
.przycisk.pelny { width: 100%; }
.przycisk.drugi { background: var(--powierzchnia); color: var(--tekst); border-color: var(--obrys-mocny); }
.przycisk:disabled { opacity: .45; cursor: not-allowed; }

/* ====================== Stan pusty (LD, MB) ========================== */

.pusto { text-align: center; padding: 56px 24px; color: var(--tekst-2); }
.pusto svg { width: 44px; height: 44px; stroke-width: 1.4; color: var(--tekst-3); margin-bottom: 14px; }
.pusto h2 { margin: 0 0 8px; font-size: 18px; color: var(--tekst); font-weight: 650; }
.pusto p { margin: 0 auto; max-width: 30em; font-size: 14px; line-height: 1.6; }

/* ============================ Logowanie ============================== */

.logowanie {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.logowanie-karta { width: 100%; max-width: 380px; }
.logowanie-marka { text-align: center; margin-bottom: 28px; }
.logowanie-marka .znak {
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: var(--r-duza);
  background: var(--akcent);
  color: #fff;
  display: grid; place-items: center;
  font-size: 21px; font-weight: 700; letter-spacing: -.03em;
}
.logowanie-marka h1 { margin: 0; font-size: 21px; font-weight: 650; }
.logowanie-marka p { margin: 4px 0 0; font-size: 14px; color: var(--tekst-2); }

.pole { margin-bottom: 14px; }
.pole label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--tekst-2); }
.pole input {
  width: 100%;
  min-height: var(--cel-dotyku);
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;             /* 16px — inaczej iPhone przybliża stronę przy wpisywaniu */
  color: var(--tekst);
  background: var(--powierzchnia);
  border: 1px solid var(--obrys-mocny);
  border-radius: var(--r-mala);
}
.pole input:focus { outline: 2px solid var(--akcent); outline-offset: -1px; border-color: transparent; }

.komunikat {
  padding: 11px 14px;
  border-radius: var(--r-mala);
  font-size: 14px;
  margin-bottom: 14px;
  background: var(--blad-tlo);
  color: var(--blad);
}

/* ======================= Duże ekrany (komputer) ====================== */

@media (min-width: 900px) {
  .aplikacja {
    display: grid;
    /* minmax(0, 1fr), NIE samo 1fr. Ścieżka siatki domyślnie nie zwęża się
       poniżej szerokości zawartości, więc szeroka tabela (MB ma 14 kolumn)
       rozpychała całą kolumnę razem z kaflami i przyciskami, a prawa krawędź
       strony uciekała poza ekran. Przy minmax(0, …) kolumna trzyma szerokość
       okna, a tabela przewija się we własnej ramce (08.09.2026). */
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    /* Każdy element MUSI mieć własny wiersz siatki. Gdy pasek i treść dzieliły
       obszar „tresc", pasek leżał na treści i ją zasłaniał — ten sam błąd
       wróciłby przy zakładkach, gdyby dostały cudzy obszar. */
    grid-template-areas:
      "nawigacja pasek"
      "nawigacja zakladki"
      "nawigacja tresc";
    padding-bottom: 0;
    max-width: 1400px;
    margin: 0 auto;
    /* zapas na szeroką tabelę podnosimy niżej, w osobnym progu */
  }
  .pasek-gorny { grid-area: pasek; padding: 26px 32px 14px; position: static; min-width: 0; }
  /* min-width: 0 na elementach siatki — bez tego dziecko z szeroką zawartością
     rozpycha rodzica mimo minmax(0, 1fr). */
  .tresc { grid-area: tresc; padding: 0 32px 40px; min-width: 0; }
  .zakladki { min-width: 0; }

  .nawigacja {
    grid-area: nawigacja;
    position: sticky;
    top: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    padding: 26px 12px;
    border-right: 1px solid var(--obrys);
    box-shadow: none;
    border-top: 0;
    background: transparent;
  }
  .nawigacja a {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 14px;
    min-height: 46px;
    border-radius: var(--r-mala);
    font-size: 14.5px;
  }
  .nawigacja a.aktywna { background: var(--akcent-tlo); }
  .logo-menu { width: 40px; height: 26px; }
  .kafle { grid-template-columns: repeat(4, 1fr); }
  .kafel .liczba { font-size: 26px; }
}

/* Szerokie monitory: tabela zamówień ma 15 kolumn i przy 1400 px musiała się
   przewijać, choć na ekranie zostawało puste miejsce. Limit szerokości jest
   po to, żeby tekst nie rozjeżdżał się na pół monitora — dane tabelaryczne
   zyskują na tym, że go poluzujemy (08.09.2026). */
@media (min-width: 1600px) {
  .aplikacja { max-width: 1800px; }
}

/* Węższe okno — jeszcze ciaśniej, zamiast urywać ostatnią kolumnę. */
@media (max-width: 1500px) {
  .tabela { font-size: 11.5px; }
  .tabela th { padding: 7px 5px; font-size: 10px; }
  .tabela td { padding: 7px 5px; }
}

/* Kiedy tabela i tak się nie mieści, ma być WIDAĆ, że da się ją przewinąć.
   Sam `overflow-x: auto` nie wystarcza: macOS chowa paski przewijania, więc
   ucięta kolumna wyglądała jak błąd układu, a nie jak treść do przesunięcia. */
.tabela-otoczka {
  scrollbar-width: thin;
  scrollbar-color: var(--obrys) transparent;
}
.tabela-otoczka::-webkit-scrollbar { height: 10px; }
.tabela-otoczka::-webkit-scrollbar-track { background: transparent; }
.tabela-otoczka::-webkit-scrollbar-thumb {
  background: var(--obrys);
  border-radius: 5px;
  border: 3px solid var(--powierzchnia);
}
.tabela-otoczka:hover::-webkit-scrollbar-thumb { background: var(--tekst-3); }

.lista-do-sprawdzenia { margin-top: 10px; }
.problem-przesylki {
  background: var(--powierzchnia);
  border: 1px solid var(--obrys);
  border-radius: var(--r-mala);
  margin-bottom: 8px;
}
.problem-przesylki > summary {
  padding: 10px 12px; cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; gap: 10px; line-height: 1.45;
}
.problem-przesylki > summary::-webkit-details-marker { display: none; }
.problem-przesylki > summary::before { content: "▸"; color: var(--tekst-3); }
.problem-przesylki[open] > summary::before { transform: rotate(90deg); display: inline-block; }
.problem-tresc { padding: 0 12px 12px; }
.problem-przesylki:not([open]) .gdy-rozwiniete,
.problem-przesylki[open] .gdy-zwiniete { display: none; }
.zwin-szczegoly { margin-top: 10px; padding-left: 0; }
.karta-w-karcie {
  background: var(--powierzchnia-2); border-radius: var(--r-mala);
  padding: 10px 12px; margin: 10px 0;
}
.akcje-problemu { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.wiersz-akcji { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.etykieta-akcji { font-size: 13px; color: var(--tekst-2); }

/* Pole zbite z przyciskiem — wspólna ramka, bez przerwy między nimi, żeby
   widać było, że przycisk dotyczy tego, co wpisano obok. */
.pole-z-przyciskiem { display: inline-flex; align-items: stretch; }
.pole-z-przyciskiem input {
  padding: 7px 10px;
  border: 1px solid var(--obrys-mocny);
  border-right: 0;
  border-radius: var(--r-mala) 0 0 var(--r-mala);
  font-size: 13px;
  background: var(--powierzchnia);
  min-width: 96px;
}
.pole-z-przyciskiem input:focus {
  outline: none; border-color: var(--akcent); position: relative; z-index: 1;
}
.pole-z-przyciskiem .przycisk { border-radius: 0 var(--r-mala) var(--r-mala) 0; }

/* Opłacone proformy — jeden wiersz, bez rozbudowanej karty. */
.zaplacone-proformy { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--obrys); }
.zaplacone-proformy .wiersz-porownania span:first-child {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.haczyk { color: var(--zysk); font-weight: 700; }
.przycisk-tekstowy {
  background: none; border: 0; padding: 0 0 0 10px; cursor: pointer;
  color: var(--tekst-3); font-size: 12px; text-decoration: underline;
}
.przycisk-tekstowy:hover { color: var(--blad); }

/* ============================== Kalendarz ============================== */

.pasek-kalendarza {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.nawigacja-kalendarza { display: flex; align-items: center; gap: 8px; }
.okres-kalendarza { font-size: 15px; min-width: 190px; text-align: center; }
.przelacznik-widoku { display: inline-flex; border: 1px solid var(--obrys-mocny);
  border-radius: var(--r-mala); overflow: hidden; }
.przelacznik-widoku a {
  padding: 7px 14px; font-size: 13px; text-decoration: none;
  color: var(--tekst-2); background: var(--powierzchnia);
}
.przelacznik-widoku a.wybrany { background: var(--akcent); color: #fff; }

/* Tydzień: siedem dni OBOK siebie, każda kolumna na równą część szerokości
   strony; wpisy w kolumnie jeden pod drugim (klient 08.09.2026).
   Na telefonie kolumny nie mieszczą się — wtedy dni idą jeden pod drugim. */
/* Kalendarz ma wypełniać ekran — kolumny sięgają dołu strony, a nie kończą się
   na najdłuższym dniu (klient 08.09.2026). */
.tresc-pelna-wysokosc { display: flex; flex-direction: column; }
.kalendarz-tydzien { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; }
@media (min-width: 900px) {
  .tresc-pelna-wysokosc .kalendarz-tydzien { flex: 1; align-content: stretch; }
  .tresc-pelna-wysokosc .kalendarz-miesiac { flex: 1; }
  /* Notka pod kalendarzem nie może rozpychać siatki. */
  .tresc-pelna-wysokosc .pod-akcja { flex: 0 0 auto; }
}
@media (min-width: 900px) {
  .kalendarz-tydzien { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
}
.dzien-tygodnia {
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--r-mala); padding: 10px; min-height: 200px; min-width: 0;
  overflow-y: auto;
}
.wpisy-dnia { display: flex; flex-direction: column; gap: 6px; }
.wpisy-dnia > * { margin-bottom: 0 !important; }
.dzien-tygodnia.weekend { background: var(--powierzchnia-2); }
.dzien-tygodnia.przeszly { opacity: .6; }
.dzien-tygodnia.dzis { border-color: var(--akcent); box-shadow: 0 0 0 1px var(--akcent); opacity: 1; }
.naglowek-dnia-tygodnia {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px; margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--obrys);
}
.naglowek-dnia-tygodnia .nazwa { font-size: 12px; color: var(--tekst-2); }
.naglowek-dnia-tygodnia .liczba-dnia { font-size: 17px; font-weight: 650; }
.dzien-tygodnia.dzis .liczba-dnia { color: var(--akcent); }
.pusty-dzien { margin: 0; color: var(--tekst-3); font-size: 13px; }

.wpis-kalendarza {
  background: var(--powierzchnia-2); border-radius: var(--r-mala);
  padding: 7px 8px; margin-bottom: 6px; font-size: 12.5px; line-height: 1.4;
}
.wpis-gora { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.godzina-wpisu { font-weight: 650; font-variant-numeric: tabular-nums; }
.tresc-wpisu { color: var(--tekst); }
.wpis-akcje { display: flex; gap: 8px; margin-top: 4px; }
.wpis-akcje .przycisk-tekstowy { padding-left: 0; font-size: 11.5px; }

/* Ikonka sklepu przy wpisie — po niej poznajesz, czyje to przypomnienie. */
.ikonka-sklepu {
  width: 18px; height: 18px; object-fit: contain; border-radius: 3px;
  background: var(--powierzchnia); flex-shrink: 0;
}

/* Miesiąc: siatka 7 kolumn, wpisy skrócone do jednej linii. */
.kalendarz-miesiac { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.naglowek-dnia {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tekst-3); text-align: center; padding-bottom: 4px;
}
.dzien-miesiaca {
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--r-mala); padding: 5px; min-height: 76px; font-size: 12px;
}
.dzien-miesiaca.weekend { background: var(--powierzchnia-2); }
.dzien-miesiaca.obcy { opacity: .4; }
.dzien-miesiaca.dzis { border-color: var(--akcent); box-shadow: 0 0 0 1px var(--akcent); }
.numer-dnia { font-weight: 600; display: block; margin-bottom: 4px; }
.wpis-maly {
  display: flex; align-items: center; gap: 4px; text-decoration: none;
  color: var(--tekst); background: var(--powierzchnia-2);
  border-radius: 4px; padding: 2px 4px; margin-bottom: 3px;
}
.wpis-maly span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpis-maly .ikonka-sklepu { width: 14px; height: 14px; }

/* Przypomnienia przy zamówieniu i na pulpicie. */
.karta-przypomnienia { border-color: var(--uwaga); }
.wkrotce { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--obrys); }
.wkrotce .etykieta-mala { display: block; margin-bottom: 6px; }
.lista-przypomnien { list-style: none; margin: 0 0 12px; padding: 0; }
.lista-przypomnien li {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px solid var(--obrys); line-height: 1.45;
}
.lista-przypomnien li:last-child { border-bottom: 0; }
.lista-przypomnien li.zrobione { opacity: .5; text-decoration: line-through; }
.akcje-przypomnienia { display: flex; gap: 4px; flex-shrink: 0; }
.nowe-przypomnienie { display: flex; flex-direction: column; gap: 8px; }
.nowe-przypomnienie > input[name="tresc"] {
  padding: 9px 11px; border: 1px solid var(--obrys-mocny);
  border-radius: var(--r-mala); font-size: 14px; background: var(--powierzchnia); width: 100%;
}
.terminy-szybkie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.terminy-szybkie input[type="date"], .terminy-szybkie input[type="time"] {
  padding: 6px 8px; border: 1px solid var(--obrys-mocny);
  border-radius: var(--r-mala); font-size: 13px; background: var(--powierzchnia);
}
/* Termin jednym kliknięciem — wygląda jak etykieta, nie jak kolejny przycisk
   akcji, żeby nie mylił się z „Dodaj". */
.znacznik-termin {
  padding: 5px 10px; border-radius: 999px; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--obrys-mocny); background: var(--powierzchnia-2);
  color: var(--tekst-2);
}
.znacznik-termin:hover { border-color: var(--akcent); color: var(--akcent); }
.znacznik-termin.wybrany { background: var(--akcent-tlo); color: var(--akcent);
  border-color: var(--akcent); font-weight: 600; }

/* Kalkulator przelewu przy proformach. */
.do-sumy { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.do-sumy input { width: 16px; height: 16px; accent-color: var(--akcent); }
.suma-przelewu {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--obrys);
  font-size: 15px;
}
.suma-przelewu strong { font-size: 19px; font-variant-numeric: tabular-nums; }

/* Obsłużony mail o wysyłce — jeden pasek zamiast całej karty. */
.pasek-zrobione {
  background: var(--powierzchnia);
  border: 1px solid var(--obrys);
  border-radius: var(--r-mala);
  margin-bottom: 8px;
}
.pasek-zrobione > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.pasek-zrobione > summary::-webkit-details-marker { display: none; }
.pasek-zrobione > summary::before {
  content: "▸";
  color: var(--tekst-3);
  transition: transform .15s;
}
.pasek-zrobione[open] > summary::before { transform: rotate(90deg); }
.pasek-tresc { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pasek-tresc strong { font-size: 14px; }
.pasek-szczegoly { padding: 0 14px 12px; border-top: 1px solid var(--obrys); padding-top: 10px; }

/* Nagłówek grupy na liście nowych zamówień (opłacone / czekają na płatność). */
.tytul-grupy {
  margin: 18px 0 10px;
  font-size: 15px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tytul-grupy:first-child { margin-top: 0; }

/* Podjęta decyzja pokazana jako etykieta — obok zostają przyciski do zmiany. */
.decyzja-wybrana {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: var(--r-mala);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
}
.decyzja-wybrana.zielony { background: var(--zysk); color: #fff; }
.decyzja-wybrana.zielony-jasny {
  background: var(--zysk-tlo); color: var(--zysk); border-color: var(--zysk);
}
.decyzja-wybrana.czerwony { background: var(--blad); color: #fff; }

.przycisk.czerwony { background: var(--blad); color: #fff; border-color: transparent; }
/* Drugi zielony jest jaśniejszy — obie decyzje są „na tak", ale nie tym samym:
   firmowe wchodzi do wyniku, prywatne tylko odnotowujemy. */
.przycisk.zielony-jasny {
  background: var(--zysk-tlo);
  color: var(--zysk);
  border-color: var(--zysk);
}

/* Przyciski przy pozycji kosztu czekającej na decyzję. */
.pozycja-akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.pozycja-akcje form { display: inline-flex; }
.pozycja-akcje .przycisk { white-space: nowrap; }

/* Notatka do zamówienia na ekranie Wysyłek. Musi rzucać się w oczy: to ostatni
   moment przed zmianą statusu na „wysłane", a klient zapisuje tam rzeczy
   do zrobienia ręcznie — np. „wysłać SMS o nadaniu" (10.09.2026). */
.notatka-zamowienia {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
  padding: 9px 12px;
  border-left: 3px solid var(--uwaga, #b4762a);
  background: var(--uwaga-tlo, #fdf4e6);
  border-radius: 0 var(--r-mala) var(--r-mala) 0;
  font-size: 13.5px;
  line-height: 1.5;
}
.notatka-zamowienia strong { flex-shrink: 0; }

/* Rząd przycisków pod treścią (wezwanie, korekta, zwrot, podgląd maila).
   Klasa była w sześciu szablonach, ale nigdy nie miała stylu — przyciski
   układały się jeden pod drugim, każdy na całą szerokość (klient 09.09.2026). */
.przyciski-rzad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.przyciski-rzad form { display: inline-flex; }
.przyciski-rzad .przycisk { white-space: nowrap; }
@media (max-width: 560px) {
  .przyciski-rzad { flex-direction: column; align-items: stretch; }
  .przyciski-rzad form, .przyciski-rzad .przycisk { width: 100%; }
}

/* Mniej ruchu dla osób, które tak ustawiły system */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Etykieta sklepu przy ostrzeżeniach na pulpicie — bez niej nie wiadomo,
   którego sklepu dotyczy komunikat (uwaga klienta 07.09.2026). */
.znacznik.sklep-szs,
.znacznik.sklep-ld,
.znacznik.sklep-mb,
.znacznik.sklep-m5 {
  background: var(--powierzchnia-2);
  color: var(--tekst-2);
  border: 1px solid var(--obrys);
  letter-spacing: .04em;
  font-size: 11px;
}

/* Lista propozycji dopasowania przelewu do zamówienia (wyciąg bankowy). */
.lista-prosta {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lista-prosta li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: var(--powierzchnia-2);
  border-radius: var(--r-mala);
  font-size: 14px;
}
.lista-prosta .drobne { font-size: 12px; color: var(--tekst-2); }

/* Wybór miesiąca z listy — obok strzałek, w Zamówieniach, Rozliczeniach i Kosztach. */
.wybor-miesiaca { display: flex; justify-content: center; }
.wybor-miesiaca select {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--tekst);
  font: inherit;
  font-weight: 650;
  font-size: 15px;
  text-align: center;
  padding: 6px 26px 6px 12px;
  border-radius: var(--r-mala);
  cursor: pointer;
  min-height: var(--cel-dotyku);
  /* strzałka listy rysowana tłem, żeby nie ładować obrazka z zewnątrz */
  background-image: linear-gradient(45deg, transparent 50%, var(--tekst-2) 50%),
                    linear-gradient(135deg, var(--tekst-2) 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.wybor-miesiaca select:hover { background-color: var(--powierzchnia-2); border-color: var(--obrys); }
.wybor-miesiaca select:focus-visible { outline: 2px solid var(--akcent); outline-offset: 1px; }

@media (max-width: 460px) {
  .tylko-szeroko { display: none; }
}

/* Wiek danych: gdy robią się stare, mówimy to wprost — inaczej łatwo pomylić
   stan sprzed godziny z aktualnym (uwaga klienta 07.09.2026). */
.stan-danych .dane-stare { color: var(--uwaga); font-weight: 600; }

/* Termin można poprawić klikając w komórkę; ptaszek oznacza datę potwierdzoną
   przez dostawcę, która zastępuje wyliczoną z reguły. */
.tabela .termin-edytowalny { cursor: pointer; }
.tabela .termin-edytowalny:hover { background: var(--powierzchnia-2); }
.tabela .termin-potwierdzony { font-weight: 650; }

/* Atrybut `hidden` musi wygrywać z każdą regułą `display`. Bez tego element
   z `display: grid` pozostaje widoczny mimo ustawienia hidden — i tak właśnie
   zasłona pobierania zablokowała aplikację 07.09.2026: JavaScript ją chował,
   a CSS pokazywał dalej. */
[hidden] { display: none !important; }

/* ================= Zasłona na czas pobierania danych ================= */
.pobieranie {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--tlo) 88%, transparent);
  backdrop-filter: blur(2px);
}
.pobieranie-srodek { display: grid; justify-items: center; gap: 18px; padding: 24px; }
.pobieranie-logo {
  width: 92px;
  height: auto;
  animation: m5-oddech 1.6s ease-in-out infinite;
}
@keyframes m5-oddech {
  0%, 100% { opacity: .45; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
.pobieranie-opis { margin: 0; font-size: 14.5px; color: var(--tekst-2); font-weight: 600; }
.pobieranie-pasek {
  width: 190px; height: 4px; border-radius: 999px;
  background: var(--powierzchnia-2); overflow: hidden;
}
.pobieranie-pasek span {
  display: block; height: 100%; width: 40%; border-radius: 999px;
  background: var(--akcent);
  animation: m5-suwak 1.25s ease-in-out infinite;
}
@keyframes m5-suwak {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
/* Szanujemy ustawienie „ogranicz animacje" w systemie. */
@media (prefers-reduced-motion: reduce) {
  .pobieranie-logo, .pobieranie-pasek span { animation: none; }
  .pobieranie-logo { opacity: 1; }
}

/* Panel wpisywania terminu — pojawia się przy klikniętej komórce. */
.termin-panel {
  position: absolute;
  z-index: 70;
  display: grid;
  gap: 8px;
  padding: 14px;
  min-width: 250px;
  background: var(--powierzchnia);
  border: 1px solid var(--obrys);
  border-radius: var(--r-srednia);
  box-shadow: var(--cien-2);
}
.termin-etykieta { font-size: 12.5px; font-weight: 650; color: var(--tekst-2); }
.termin-panel input[type="date"] {
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--obrys-mocny);
  border-radius: var(--r-mala);
  background: var(--powierzchnia);
  color: var(--tekst);
  min-height: var(--cel-dotyku);
}
.termin-podpis { margin: 0; font-size: 12px; color: var(--tekst-3); }
.termin-podpis:empty { display: none; }
.termin-przyciski { display: flex; gap: 8px; }
.termin-przyciski .przycisk { flex: 1; }

/* Postęp pobierania: skąd i ile zostało. */
.pobieranie-skad { margin: 0; font-size: 13px; color: var(--tekst-3); min-height: 18px; }
.pobieranie-procent { margin: 0; font-size: 12.5px; color: var(--tekst-3);
                      font-variant-numeric: tabular-nums; }
.pobieranie-pasek span.znany {
  width: 0;
  animation: none;
  transition: width .35s ease;
}
.pobieranie-drobne { margin: 0; font-size: 11.5px; color: var(--tekst-3); }

/* Przejście od marży na towarze do zysku netto — żeby było widać, skąd różnica. */
.tabela tfoot .wiersz-przejscia td { border-top: none; padding-top: 2px; padding-bottom: 2px;
                                     font-size: 13px; color: var(--tekst-2); font-weight: 500; }
.tabela tfoot .wiersz-zysku td { border-top: 1px solid var(--obrys-mocny); font-size: 15px; }

/* Porównanie faktury z naszym wyliczeniem. */
.pozycja-szczegoly { margin: 8px 0; padding: 8px 10px; background: var(--powierzchnia-2);
                     border-radius: var(--r-mala); }
.wiersz-porownania { display: flex; justify-content: space-between; gap: 12px;
                     font-size: 13px; padding: 2px 0; }
.wiersz-porownania.drobne { color: var(--tekst-3); font-size: 12px; }
.wiersz-porownania .prawo { font-variant-numeric: tabular-nums; }

/* Przypomnienie o wysyłkach — klikalny pasek w Zamówieniach. */
.komunikat.przypomnienie { display: block; text-decoration: none; cursor: pointer; }
.komunikat.przypomnienie:hover { filter: brightness(.97); }

/* Potwierdzenie dopłaty przyjętej poza systemem płatności. */
.doplata-formularz { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
                     padding: 0 16px 14px; }
.doplata-formularz input[type="text"] {
  flex: 1; min-width: 180px; font: inherit; font-size: 13px;
  padding: 8px 10px; border: 1px solid var(--obrys); border-radius: var(--r-mala);
  background: var(--powierzchnia); color: var(--tekst);
}

/* Niedopłata przy zamówieniu — klikalna, otwiera panel potwierdzenia. */
.tabela .niedoplata {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  background: var(--uwaga-tlo); color: var(--uwaga);
  border-radius: 999px; font-size: 11.5px; font-weight: 650;
  cursor: pointer; white-space: nowrap;
}
.tabela .niedoplata:hover { filter: brightness(.95); }
.tabela .doplacono { margin-left: 5px; color: var(--zysk); font-weight: 700; }

/* ============== Wyciąg bankowy: co wymaga decyzji ============== */
.karta.wyroznik-akcji { border-color: var(--akcent); }

.propozycja {
  padding: 12px 0;
  border-top: 1px solid var(--obrys);
}
.propozycja:first-of-type { border-top: none; }
.propozycja-naglowek {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.propozycja-data { font-size: 12.5px; color: var(--tekst-3); }
.propozycja-kwota {
  margin-left: auto; font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.propozycja-opis { font-size: 13px; color: var(--tekst-2); margin-bottom: 8px;
                   overflow-wrap: anywhere; }
.propozycja-szczegoly { display: grid; gap: 2px; }

/* Zaznaczenie musi być widoczne — wcześniej ginęło w liście. */
.wybor.mocny {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; margin-top: 6px;
  background: var(--akcent-tlo); border-radius: var(--r-mala);
  font-size: 13.5px; line-height: 1.45; cursor: pointer;
}
.wybor.mocny input { margin-top: 3px; flex-shrink: 0; }
.wybor.mocny:hover { filter: brightness(.98); }

/* Przycisk zapisu przyklejony do dołu — nie trzeba go szukać. */
.pasek-zapisu {
  position: sticky; bottom: 0; z-index: 20;
  padding: 12px 0 16px;
  background: linear-gradient(to bottom, transparent, var(--tlo) 35%);
}

/* Sekcje zwijane — reszta wyciągu nie zasłania tego, co ważne. */
.karta.zwijana { padding-top: 0; padding-bottom: 0; }
.karta.zwijana summary {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 0; cursor: pointer; list-style: none;
}
.karta.zwijana summary::-webkit-details-marker { display: none; }
.karta.zwijana summary::after {
  content: "▾"; margin-left: auto; color: var(--tekst-3); font-size: 13px;
}
.karta.zwijana[open] summary::after { content: "▴"; }
.karta.zwijana[open] { padding-bottom: 16px; }
.tabela .bez-wplaty {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  background: var(--powierzchnia-2); color: var(--tekst-3);
  border: 1px solid var(--obrys); border-radius: 999px;
  font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tabela .bez-wplaty:hover, .tabela .doplacono.wplata-edytowalna:hover { filter: brightness(.92); }
.tabela .doplacono.wplata-edytowalna { cursor: pointer; }
.pole-panelu { display: grid; gap: 4px; font-size: 12px; color: var(--tekst-2); }
.pole-panelu input {
  font: inherit; font-size: 13.5px; padding: 8px 10px;
  border: 1px solid var(--obrys-mocny); border-radius: var(--r-mala);
  background: var(--powierzchnia); color: var(--tekst);
}

/* ============ Ekran przygotowania zamówienia do dostawcy ============ */
.status-klikalny { text-decoration: none; cursor: pointer; }
.status-klikalny:hover { filter: brightness(.93); }

.podpowiedz { display: flex; align-items: center; gap: 12px; padding: 8px 0;
              border-top: 1px solid var(--obrys); }
.podpowiedz:first-of-type { border-top: none; }
.podpowiedz-tekst { font-size: 13.5px; }
.podpowiedz button { flex-shrink: 0; margin-left: auto; }

.tabela-modyfikacji { width: 100%; border-collapse: collapse; font-size: 13.5px;
                      margin-bottom: 14px; }
.tabela-modyfikacji th { text-align: left; font-size: 11.5px; text-transform: uppercase;
                         letter-spacing: .04em; color: var(--tekst-3); padding: 4px 8px; }
.tabela-modyfikacji td { padding: 7px 8px; border-top: 1px solid var(--obrys); }
.tabela-modyfikacji tfoot td { border-top: 1px solid var(--obrys-mocny); }
.tabela-modyfikacji .prawo { text-align: right; font-variant-numeric: tabular-nums; }

.dodaj-modyfikacje { display: grid; gap: 10px; align-items: end;
                     grid-template-columns: 1fr; }
.dodaj-modyfikacje .pole-panelu select,
.dodaj-modyfikacje .pole-panelu input {
  font: inherit; font-size: 13.5px; padding: 9px 10px; width: 100%;
  border: 1px solid var(--obrys-mocny); border-radius: var(--r-mala);
  background: var(--powierzchnia); color: var(--tekst);
}
@media (min-width: 760px) {
  .dodaj-modyfikacje { grid-template-columns: 1.3fr 1.6fr .8fr .8fr auto; }
}

.zdjecie-i-uwaga { display: grid; gap: 16px; }
@media (min-width: 700px) { .zdjecie-i-uwaga { grid-template-columns: 200px 1fr; } }
.zdjecie-podglad img { width: 100%; border-radius: var(--r-mala); border: 1px solid var(--obrys); }
.zdjecie-podglad .drobne { display: block; margin-top: 4px; color: var(--tekst-3); }
.brak-zdjecia { padding: 16px; background: var(--powierzchnia-2);
                border-radius: var(--r-mala); font-size: 12.5px; color: var(--tekst-2); }

.podglad-maila {
  margin: 0 0 14px; padding: 14px; overflow-x: auto;
  background: var(--powierzchnia-2); border-radius: var(--r-mala);
  font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; color: var(--tekst);
}

/* Zielony przycisk domykający krok — „wysłałem", „potwierdzam".
   Odróżnia się od niebieskiego „przygotuj", bo to działanie nieodwracalne. */
.przycisk.zielony { background: var(--zysk); color: #fff; border-color: transparent; }

/* ---------------------------------------------------------------------------
   Okno ze szczegółami zamówienia. Tabela nie mieści wszystkiego, a klient chce
   to widzieć bez opuszczania listy (07.09.2026). Wywoływane kliknięciem
   w numer zamówienia.
   --------------------------------------------------------------------------- */
.tlo-okna {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(16, 20, 26, .38);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.tlo-okna[hidden] { display: none !important; }

.okno {
  background: var(--powierzchnia);
  border-radius: var(--r-duza);
  box-shadow: 0 18px 48px rgba(16, 20, 26, .22);
  width: min(680px, 100%);
  max-height: min(86vh, 900px);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.okno-naglowek {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--obrys);
}
.okno-tytul { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.okno-podtytul { font-size: 12.5px; color: var(--tekst-3); margin-top: 2px; }
.okno-akcje-gora { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.okno-zamknij {
  border: 0; background: none; color: var(--tekst-3);
  font-size: 17px; line-height: 1; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
}
.okno-zamknij:hover { background: var(--powierzchnia-2); color: var(--tekst); }

/* Wnętrze rozciąga się na całą wysokość okna; przewija się sama treść,
   żeby nagłówek i stopka zostały widoczne. */
.okno-wnetrze { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.okno-tresc { overflow-y: auto; padding: 16px 22px 20px; flex: 1; min-height: 0; }

/* Cztery liczby na wierzchu — po nie sięga się najczęściej. */
.okno-liczby {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  background: var(--powierzchnia-2); border-radius: var(--r-srednia);
  padding: 12px 14px; margin-bottom: 14px;
}
.okno-liczby > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.okno-liczby strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.okno-liczby .drobne { font-size: 11px; color: var(--tekst-3); }
.okno-liczby .szacowany-tekst { color: var(--uwaga); }
.okno-liczby .szacowany-tekst::after { content: " ●"; font-size: 8px; vertical-align: middle; }

.okno-pasek {
  padding: 9px 13px; border-radius: var(--r-mala);
  font-size: 13px; margin-bottom: 14px;
}
.okno-pasek.pasek-ok   { background: var(--zysk-tlo); color: var(--zysk); }
.okno-pasek.pasek-blad { background: var(--blad-tlo); color: var(--blad); }
.okno-pasek.pasek-uwaga{ background: var(--uwaga-tlo); color: var(--uwaga); }

.okno-sekcja { margin-bottom: 16px; }
.okno-sekcja:last-child { margin-bottom: 0; }
.okno-sekcja h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tekst-3); font-weight: 700; margin: 0 0 7px;
}
.okno-produkt { margin: 0 0 8px; font-weight: 600; line-height: 1.35; }
.okno-cytat {
  margin: 0; padding: 10px 13px; font-size: 13px; line-height: 1.45;
  background: var(--powierzchnia-2); border-radius: var(--r-mala);
  border-left: 3px solid var(--obrys-mocny); white-space: pre-wrap;
}
.okno-adres { margin: 0; font-size: 13px; line-height: 1.5; white-space: pre-line; }
.okno-uwaga { margin: 8px 0 0; font-size: 13px; color: var(--uwaga); }

/* Pary „etykieta: wartość" w dwóch kolumnach — zwięźle, bez tabeli. */
.okno-pary { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 13px; }
.okno-pary dt { color: var(--tekst-3); }
.okno-pary dd { margin: 0; }

.okno-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.okno-tabelka { width: 100%; border-collapse: collapse; font-size: 13px; }
.okno-tabelka th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tekst-3); font-weight: 600; padding-bottom: 5px;
}
.okno-tabelka td { padding: 5px 0; border-top: 1px solid var(--obrys); vertical-align: top; }
.okno-tabelka .prawo { text-align: right; font-variant-numeric: tabular-nums; }

.okno-os { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.okno-os li { padding: 5px 0; border-top: 1px solid var(--obrys); line-height: 1.4; }
.okno-os li:first-child { border-top: 0; }
.okno-kiedy { color: var(--tekst-3); font-variant-numeric: tabular-nums; margin-right: 8px; }
.okno-os .drobne { display: block; color: var(--tekst-3); }

.okno-stopka {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding: 13px 22px; border-top: 1px solid var(--obrys);
  background: var(--powierzchnia-2);
}
/* Bez tego flex ściskał „Zamknij" do samego paddingu i tekst wychodził poza. */
.okno-stopka .przycisk { flex-shrink: 0; }

/* Numer zamówienia jako wejście do okna. */
.numer-klikalny { cursor: pointer; border-bottom: 1px dashed var(--obrys-mocny); }
.numer-klikalny:hover { color: var(--akcent); border-bottom-color: var(--akcent); }

@media (max-width: 620px) {
  .tlo-okna { padding: 0; align-items: flex-end; }
  .okno { max-height: 92vh; border-radius: var(--r-duza) var(--r-duza) 0 0; width: 100%; }
  .okno-liczby { grid-template-columns: repeat(2, 1fr); }
  .okno-kolumny { grid-template-columns: 1fr; }
}
.okno-ladowanie { padding: 34px 0; text-align: center; color: var(--tekst-3); font-size: 13px; }
/* Odpowiedź klienta na pytanie o rozmiar — cytat plus przycisk przyjęcia. */
.poprawka { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--obrys); }
.poprawka:first-of-type { border-top: 0; padding-top: 4px; }
.poprawka .drobne { margin: 4px 0 8px; }
/* Materac na ekranie przygotowania — osobna pozycja, osobny dostawca. */
.pozycja-materaca { padding: 12px 0; border-top: 1px solid var(--obrys); }
.pozycja-materaca:first-of-type { border-top: 0; }
.pozycja-materaca .drobne { margin: 2px 0 8px; }
/* Kwoty modyfikacji edytowane wprost w tabeli. */
.tabela-modyfikacji .pole-kwoty { width: 74px; text-align: right; padding: 5px 7px;
  border: 1px solid var(--obrys-mocny); border-radius: var(--r-mala); font: inherit; }
.tabela-modyfikacji .pole-opisu { width: 100%; padding: 5px 7px; font: inherit;
  border: 1px solid transparent; border-radius: var(--r-mala); background: transparent; }
.tabela-modyfikacji .pole-opisu:hover { border-color: var(--obrys); }
.tabela-modyfikacji .pole-opisu:focus { border-color: var(--akcent); background: var(--powierzchnia); }
.bez-zawijania { white-space: nowrap; }

/* Zamówienie bez faktury sprzedaży — widać je, ale nie wchodzi do sum.
   Do zysku liczymy dopiero zafakturowane (zasada klienta 07.09.2026). */
.tabela tr.poza-zyskiem td { opacity: .58; }
.tabela tr.poza-zyskiem .pozycja-numer,
.tabela tr.poza-zyskiem .mocna { opacity: 1; }

/* Zdjęcia do maila: pasek miniatur z „usuń" i wgrywaniem własnych.
   Zdjęcie z karty produktu to tylko propozycja — przy modyfikacjach bywa
   mylące, więc musi dać się je podmienić (klient 08.09.2026). */
.zdjecia-panel { display: flex; flex-direction: column; gap: 10px; }
.pasek-zdjec { display: flex; flex-wrap: wrap; gap: 10px; }
.pasek-zdjec .zdjecie-podglad {
  margin: 0; width: 132px; display: flex; flex-direction: column; gap: 4px;
}
.pasek-zdjec .zdjecie-podglad img {
  width: 132px; height: 132px; object-fit: cover;
  border: 1px solid var(--obrys); border-radius: var(--r-mala); background: #fff;
}
.pasek-zdjec figcaption { line-height: 1.3; word-break: break-word; }
.przycisk-tekstowy.usun-zdjecie { padding: 0; font-size: 11.5px; color: var(--blad); }
.dodaj-zdjecie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dodaj-zdjecie input[type="file"] { font-size: 12px; max-width: 100%; }
.ostrzezenie-drobne {
  margin: 0; font-size: 12.5px; color: var(--blad);
  background: var(--powierzchnia-2); border-radius: var(--r-mala); padding: 6px 8px;
}

/* Dodawanie dowolnego przypomnienia wprost z kalendarza — nie każde wiąże się
   z zamówieniem (klient 08.09.2026). */
.dodaj-przypomnienie {
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--r-mala); padding: 10px 12px; margin-bottom: 12px;
}
.dodaj-przypomnienie > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--akcent);
  list-style: none;
}
.dodaj-przypomnienie > summary::-webkit-details-marker { display: none; }
.dodaj-przypomnienie[open] > summary { margin-bottom: 10px; }
.dodaj-przypomnienie form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
}
.dodaj-przypomnienie .pole-szerokie { flex: 1 1 260px; }
/* Przypomnienie bez etykiety sklepu — kropka w miejscu ikonki, żeby godziny
   stały w jednej linii. */
.kropka-bez-sklepu {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
  background: var(--powierzchnia); border: 1px solid var(--obrys);
}

/* Terminy wysyłek w kalendarzu: żółto dzień przed, pomarańczowo w dniu terminu.
   Kliknięcie prowadzi do zamówień sklepu (klient 08.09.2026). */
.terminy-dnia { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.etykieta-terminu {
  display: block; padding: 3px 8px; border-radius: 6px; text-decoration: none;
  font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  border: 1px solid transparent; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.etykieta-terminu.jutro { background: #fdf0c3; color: #7a5b00; border-color: #f0d98a; }
.etykieta-terminu.dzis  { background: #ffd9b0; color: #8a4200; border-color: #f5b877; }
/* Termin MINĄŁ, a zamówienie wciąż nie wyszło. Wcześniej takie zamówienie
   znikało z kalendarza razem z minionym dniem i terminarz pokazywał spokój tam,
   gdzie była zaległość (klient 15.09.2026: „one znikają"). */
.etykieta-terminu.po-terminie {
  background: #fde0e0; color: #9b1c1c; border-color: #f5a9a9; font-weight: 750;
}
.etykieta-terminu:hover { filter: brightness(.95); }
.dzien-miesiaca .etykieta-terminu {
  display: block; padding: 1px 5px; font-size: 10.5px; border-radius: 4px;
  margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) .etykieta-terminu.jutro {
    background: #4a3c00; color: #ffe9a3; border-color: #6b5700;
  }
  :root:not([data-motyw="jasny"]) .etykieta-terminu.po-terminie {
    background: #4a1414; color: #ffb4b4; border-color: #7a2020;
  }
  :root:not([data-motyw="jasny"]) .etykieta-terminu.dzis {
    background: #5a2b00; color: #ffd3ab; border-color: #7d3d00;
  }
}

/* Zamówienie niekompletne: materac od drugiego dostawcy nie został zamówiony.
   Dwa zamówienia pojechały bez materaca, bo nic o tym nie mówiło
   (klient 08.09.2026). Ten alarm ma być widoczny, nie subtelny. */
.karta-alarm { border-color: var(--blad); box-shadow: 0 0 0 1px var(--blad); }
.alarm-materaca {
  background: var(--blad-tlo); color: var(--blad);
  border: 1px solid var(--blad); border-radius: var(--r-mala);
  padding: 12px 14px; margin-bottom: 14px; font-size: 13.5px; line-height: 1.5;
}
.alarm-materaca strong { display: block; margin-bottom: 3px; }
.znacznik.pilne { background: var(--blad-tlo); color: var(--blad); }

/* Etapy zamówienia u drugiego dostawcy — od maila do zapłaty. */
.znacznik.etap-czeka     { background: var(--blad-tlo); color: var(--blad); }
.znacznik.etap-roboczy   { background: var(--uwaga-tlo); color: var(--uwaga); }
.znacznik.etap-zamowione { background: var(--akcent-tlo); color: var(--akcent); }
.znacznik.etap-faktura   { background: var(--uwaga-tlo); color: var(--uwaga); }
.znacznik.etap-zaplacona { background: var(--zysk-tlo); color: var(--zysk); }

/* Ścieżka materaca: od maila do zapłaty. Widać, gdzie się stoi. */
.sciezka-materaca { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sciezka-materaca .krok {
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px;
  background: var(--powierzchnia-2); color: var(--tekst-3);
  border: 1px solid var(--obrys);
}
.sciezka-materaca .krok.zrobiony {
  background: var(--zysk-tlo); color: var(--zysk); border-color: transparent;
  font-weight: 600;
}

/* Kafelek sklepu na pulpicie: po lewej stan zamówień, po prawej pieniądze,
   alerty w osobnym pasku pod spodem (układ ustalony z klientem 08.09.2026). */
.pasek-sklepu {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 16px; width: 100%;
}
.liczniki-zamowien { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.licznik {
  font-size: 12px; color: var(--tekst-2); white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; background: var(--powierzchnia-2);
}
.licznik b { font-variant-numeric: tabular-nums; color: var(--tekst); }
.licznik.zerowy { opacity: .45; }
.licznik.pilny    { background: var(--akcent-tlo); }
.licznik.pilny b  { color: var(--akcent); }
.licznik.ostrzega { background: var(--uwaga-tlo); }
.licznik.ostrzega b { color: var(--uwaga); }

.liczby-sklepu { display: flex; gap: 18px; margin-left: auto; }
.liczba-sklepu { display: flex; flex-direction: column; line-height: 1.25; }
.liczba-sklepu strong { font-size: 15px; font-variant-numeric: tabular-nums; }

/* Alerty: pełna szerokość pod paskiem — nie giną między licznikami. */
.alerty-sklepu {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
  padding-top: 8px; border-top: 1px dashed var(--obrys);
}
.alert-sklepu {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--blad-tlo); color: var(--blad);
}
@media (max-width: 700px) {
  .liczby-sklepu { margin-left: 0; }
}
.znacznik.etap-bez_proformy { background: var(--powierzchnia-2); color: var(--tekst-2); }
.znacznik.etap-do_zaplaty   { background: var(--uwaga-tlo); color: var(--uwaga); }

/* Wgranie wyciągu to czynność raz na kilka dni — nie potrzebuje całej karty,
   wystarczy wąski pasek pod kafelkami (klient 08.09.2026). */
.pasek-wyciagu {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px; margin-bottom: 16px; padding: 10px 14px;
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--r-mala);
}
.pasek-wyciagu .stan-danych { flex: 1 1 320px; font-size: 12.5px; color: var(--tekst-2); }
.pasek-wyciagu form { display: flex; align-items: center; gap: 8px; }
.pasek-wyciagu input[type="file"] { font-size: 12px; max-width: 240px; }

/* Etap „mail poszedł, czekamy na potwierdzenie i proformę" — między
   opłaconym a realizacją (klient 08.09.2026). */
.znacznik.czeka-proforma {
  background: var(--powierzchnia-2); color: var(--tekst-2);
  border: 1px dashed var(--obrys);
}

/* ===================== Skrzynka spraw na pulpicie ===================== */
/* Jedna lista tego, co czeka na decyzję. Wiersz musi mieścić się w jednej
   linii i dawać się załatwić bez opuszczania pulpitu (klient 08.09.2026). */
.karta.skrzynka { border-color: var(--blad); box-shadow: 0 0 0 1px var(--blad); }
.karta.skrzynka.pusta { border-color: var(--obrys); box-shadow: none; }

.sprawa {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--obrys);
}
.sprawa:last-child { border-bottom: 0; }
.sprawa-tresc {
  display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0;
  text-decoration: none; color: inherit; padding-left: 10px;
  border-left: 3px solid var(--obrys);
}
.sprawa-tresc:hover .sprawa-tytul { text-decoration: underline; }
/* Kolor paska mówi, o jaki rodzaj sprawy chodzi — szybciej niż czytanie. */
.sprawa.brak-produktu  .sprawa-tresc { border-left-color: var(--blad); }
.sprawa.brak-proformy  .sprawa-tresc { border-left-color: var(--uwaga); }
.sprawa.do-zaplaty     .sprawa-tresc { border-left-color: var(--akcent); }
.sprawa.bez-kosztu     .sprawa-tresc { border-left-color: var(--tekst-3); }
.sprawa.przypomnienie  .sprawa-tresc { border-left-color: var(--zysk); }

.sprawa-sklep {
  flex: 0 0 34px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  color: var(--tekst-2); text-transform: uppercase;
}
.sprawa-tytul { font-size: 13px; font-weight: 600; white-space: nowrap; }
.sprawa-opis {
  font-size: 12.5px; color: var(--tekst-2); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sprawa-dni {
  font-size: 11.5px; font-weight: 650; color: var(--uwaga); white-space: nowrap;
}
.sprawa form { flex: 0 0 auto; }

@media (max-width: 700px) {
  .sprawa { align-items: flex-start; }
  .sprawa-tresc { flex-wrap: wrap; gap: 2px 8px; }
  .sprawa-opis { flex: 1 1 100%; white-space: normal; }
}

/* Zamówienia zdjęte ręcznie z listy nowych — widoczne, ale nie w drodze. */
.zdjete-pasek {
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--r-mala); padding: 8px 12px; margin-bottom: 12px;
}
.zdjete-pasek > summary {
  cursor: pointer; font-size: 12.5px; color: var(--tekst-2); list-style: none;
}
.zdjete-pasek > summary::-webkit-details-marker { display: none; }
.zdjete-wiersz {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 6px 0 0; font-size: 13px;
}

/* ============== Lista faktur miesiąca z przypisaniem działu ============== */
/* Cztery działy jako przełącznik: wybrany świeci, reszta zostaje klikalna,
   żeby dało się poprawić bez cofania (klient 08.09.2026). */
.wybor-dzialu { display: inline-flex; gap: 3px; }
.wybor-dzialu label {
  position: relative; cursor: pointer; user-select: none;
}
.wybor-dzialu input { position: absolute; opacity: 0; width: 0; height: 0; }
.wybor-dzialu span {
  display: block; padding: 4px 9px; border-radius: 6px; font-size: 11px;
  font-weight: 700; letter-spacing: .02em;
  background: var(--powierzchnia-2); color: var(--tekst-3);
  border: 1px solid transparent; white-space: nowrap;
}
.wybor-dzialu label:hover span { color: var(--tekst); }
.wybor-dzialu input:checked + span {
  background: var(--akcent); color: #fff; border-color: var(--akcent);
}
/* Dział ustawiony obecnie w Fakturowni — obwódka, żeby po zmianie było widać,
   skąd wychodzimy. */
.wybor-dzialu label.teraz span { border-color: var(--obrys); }
.wybor-dzialu input:focus-visible + span { outline: 2px solid var(--akcent); }
.podpowiedz-dzialu { color: var(--uwaga); margin-top: 3px; }
/* Potwierdzenie działu, który już jest ustawiony — drobne, żeby nie konkurowało
   z wyborem działu, ale widoczne (klient 10.09.2026). */
.potwierdz-dzial {
  margin-top: 4px;
  padding: 0;
  font-size: 12px;
  color: var(--akcent, #1f6f6a);
}
.potwierdz-dzial:hover { text-decoration: underline; }

/* Nazwy towarów pod pozycją kosztu — to po nich rozstrzyga się, czego dotyczy
   wydatek i do którego działu należy (klient 10.09.2026). */
.przedmiot-faktury {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--tekst-2);
}

/* Bez nazw towarów nie da się zdecydować, do którego działu faktura należy —
   dlatego ta kolumna dostaje najwięcej miejsca w tabeli (klient 10.09.2026). */
.tabela td.przedmiot {
  max-width: 380px;
  white-space: normal;
  line-height: 1.35;
  color: var(--tekst-2);
}
.tabela tr.nota td { opacity: .55; }

.zwijana-lista > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
}
.zwijana-lista > summary::-webkit-details-marker { display: none; }
.zwijana-lista[open] > summary { margin-bottom: 12px; }

/* Pasek wysyłki: pojawia się dopiero, gdy jest co wysłać. */
.pasek-wysylki {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px;
  background: var(--powierzchnia); border: 1px solid var(--akcent);
  border-radius: var(--r-mala); box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  font-size: 13px;
}

/* Przeniesienie kosztu do innego działu — zamiast bezużytecznego „Odrzuć". */
.decyzja-kosztu { flex-wrap: wrap; align-items: center; gap: 8px; }
.zmien-dzial { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.przycisk-dzialu {
  padding: 3px 8px; border-radius: 6px; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: var(--powierzchnia-2); color: var(--tekst-2);
  border: 1px solid var(--obrys);
}
.przycisk-dzialu:hover { background: var(--akcent-tlo); color: var(--akcent); }

/* VAT na kaflu wyniku — podgląd, nie deklaracja, więc bez krzyku. */
.vat-kafelka strong { font-variant-numeric: tabular-nums; }

/* Przełącznik firmowe/prywatne — wybrany świeci, nie ma ptaszków. */
.przelacznik-decyzji { display: inline-flex; gap: 4px; }
.przelacznik-decyzji label { cursor: pointer; position: relative; user-select: none; }
.przelacznik-decyzji input { position: absolute; opacity: 0; width: 0; height: 0; }
.przelacznik-decyzji span {
  display: block; padding: 5px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 650; white-space: nowrap;
  background: var(--powierzchnia-2); color: var(--tekst-3);
  border: 1px solid var(--obrys); transition: background .12s, color .12s;
}
.przelacznik-decyzji label:hover span { color: var(--tekst); }
.przelacznik-decyzji input:checked + span {
  background: var(--zysk); color: #fff; border-color: var(--zysk);
}
.przelacznik-decyzji input:focus-visible + span { outline: 2px solid var(--akcent); }

/* Ramka z podglądem maila do KLIENTA. Wiadomość ma własne style (stopka sklepu),
   więc siedzi w ramce odciętej od stylów aplikacji — inaczej podgląd kłamałby
   o tym, jak mail wygląda naprawdę. Osobna klasa od `.podglad-maila`, która
   pokazuje surowy tekst maila do producenta. */
.ramka-maila {
  display: block; width: 100%; min-height: 60vh;
  border: 1px solid var(--ramka); border-radius: var(--r-mala);
  background: #fff;
}

/* Tabela podatków: pole kwoty ma być szerokie na tyle, by zmieścić „12 345,67",
   i wyrównane do prawej jak wszystkie pieniądze w systemie. */
.tabela-podatkow .pole-kwoty {
  width: 7.5rem; text-align: right; padding: 5px 8px;
  border: 1px solid var(--ramka); border-radius: var(--r-mala);
  background: var(--powierzchnia); color: var(--tekst); font-size: 14px;
}
.tabela-podatkow td { vertical-align: middle; }

/* Terminy podatków w kalendarzu. Kwota jest ważniejsza od nazwy — patrząc na
   tydzień ma być od razu widać, ile tego dnia wychodzi z konta. */
.etykieta-podatku {
  display: block; margin: 2px 0; padding: 2px 6px;
  background: #ede9fe; color: #4c1d95; border-radius: var(--r-mala);
  font-size: 11.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.etykieta-podatku.oplacony { background: var(--powierzchnia-2); color: var(--tekst-3);
                             font-weight: 500; text-decoration: line-through; }
@media (prefers-color-scheme: dark) {
  .etykieta-podatku { background: #3730a3; color: #e0e7ff; }
}

/* Czerwona kropka przy ikonie w menu: nowe zamówienie albo nowa faktura.
   Siedzi na ikonie, nie obok tekstu, żeby było ją widać także wtedy, gdy menu
   jest zwężone do samych ikon. */
.logo-menu.z-kropka, .ikona-menu.z-kropka { position: relative; display: inline-block; }
.logo-menu.z-kropka::after, .ikona-menu.z-kropka::after {
  content: ""; position: absolute; top: -2px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #e5484d; box-shadow: 0 0 0 2px var(--powierzchnia);
}
.nawigacja a.aktywna .logo-menu.z-kropka::after,
.nawigacja a.aktywna .ikona-menu.z-kropka::after { box-shadow: 0 0 0 2px var(--powierzchnia-2); }
.ikona-menu { line-height: 0; }

/* Numer telefonu przy notatce do zamówienia — do SMS-a o nadaniu.
   Link otwiera Wiadomości na Macu z gotową treścią; wysyła człowiek. */
.telefon-klienta { display: inline-flex; gap: 10px; align-items: baseline;
                   margin-left: 10px; white-space: nowrap; }
.telefon-klienta a { font-weight: 600; text-decoration: none;
                     border-bottom: 1px dotted currentColor; }
.telefon-klienta a:hover { border-bottom-style: solid; }
.telefon-klienta .drobne { font-weight: 400; }

/* Podgląd treści SMS-a przy notatce — żeby było widać, co pójdzie do klienta,
   ZANIM otworzą się Wiadomości. */
.tresc-smsa { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5;
              color: var(--przygaszony, #6b7280); font-style: italic; }

/* ───────────────────────── Ekran SEO ───────────────────────── */
/* Etykieta sklepu: szary chip z kolorowym paskiem z lewej. Kolor NIE niesie
   znaczenia stanu — skrót jest wypisany słownie, więc chip działa też dla
   osoby nierozróżniającej barw. */
.chip { display: inline-block; padding: 1px 7px 1px 6px; border-radius: 4px;
        background: var(--powierzchnia-2); border-left: 3px solid var(--obrys-mocny);
        font-size: 11px; font-weight: 700; letter-spacing: .02em;
        color: var(--tekst-drugi, inherit); white-space: nowrap; }
.chip-szs { border-left-color: var(--szs); }
.chip-ld  { border-left-color: var(--ld); }
.chip-mb  { border-left-color: var(--mb); }

.lista-terminow { list-style: none; margin: 0; padding: 0;
                  display: flex; flex-direction: column; gap: 6px; }
.lista-terminow .termin { display: flex; gap: 10px; align-items: baseline;
                          padding: 7px 10px; border-radius: 7px;
                          background: var(--powierzchnia-2);
                          border-left: 3px solid var(--obrys-mocny); }
.lista-terminow .termin.blad  { border-left-color: var(--blad); }
.lista-terminow .termin.uwaga { border-left-color: var(--uwaga); }
.lista-terminow .kiedy { font-variant-numeric: tabular-nums; font-weight: 600;
                         white-space: nowrap; }
/* Na telefonie treść przypomnienia schodzi do nowej linii pod znacznikiem i datą.
   Bez tego długi opis (a te potrafią mieć po kilka zdań) stał w jednej linii razem
   ze znacznikiem sklepu i rozpychał całą stronę o kilkadziesiąt pikseli — ekran SEO
   był jedynym w aplikacji, który dawał się przesunąć palcem w bok.
   Znalezione 16.09.2026 pomiarem przy szerokości 375 px. Na monitorze bez zmian. */
@media (max-width: 899px) {
  .lista-terminow .termin { flex-wrap: wrap; }
  .lista-terminow .kiedy  { white-space: nowrap; }
}

.dwie-kolumny { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 18px; }
.lista-fraz { list-style: none; margin: 6px 0 0; padding: 0;
              display: flex; flex-direction: column; gap: 5px; }
.lista-fraz li { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }

.pasek-kotwic { display: flex; gap: 3px; border-radius: 7px; overflow: hidden; }
.czesc-kotwic { padding: 7px 8px; font-size: 11px; font-weight: 600;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                /* min-width: 0 — bez tego część paska nie chce zwęzić się poniżej
                   długości swojego napisu (w układzie elastycznym domyślne
                   min-width to `auto`), więc ucinanie wyżej nie działało i pasek
                   rozpychał stronę o 35 px na telefonie. Znalezione 16.09.2026
                   pomiarem ekranów przy szerokości 375 px. */
                min-width: 0;
                background: var(--powierzchnia-2); color: inherit;
                border-bottom: 3px solid var(--akcent); }
.czesc-kotwic.czesc-2 { border-bottom-color: var(--szs); }
.czesc-kotwic.czesc-3 { border-bottom-color: var(--ld); }
.czesc-kotwic.czesc-4 { border-bottom-color: var(--mb); }
.czesc-kotwic.czesc-5 { border-bottom-color: var(--obrys-mocny); }

/* Dwie tabele fraz obok siebie — zyskujące i tracące. Wąskie kolumny liczb,
   żeby fraza dostała całą resztę szerokości. */
.tabela-fraz td, .tabela-fraz th { padding-top: 5px; padding-bottom: 5px; }
.tabela-fraz td.prawo { font-variant-numeric: tabular-nums; white-space: nowrap; }
.etykieta-mala.zysk { color: var(--zysk); }
.etykieta-mala.strata { color: var(--blad); }

/* Zakładka sklepu z czekającą sprawą — ta sama czerwona kropka, co w menu.
   Kropka przy sklepie zapala się TYLKO wtedy, gdy świeci się któraś zakładka,
   więc po kliknięciu zawsze widać, skąd się wzięła (klient 10.09.2026). */
.zakladki a.z-alertem { position: relative; }
.zakladki a.z-alertem::after {
  content: ""; position: absolute; top: 4px; right: 1px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blad);
}

/* Konta w zbiorczym wyciągu — od razu widać, czyje są pieniądze. */
.konta-wyciagu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.konto-wyciagu { display: flex; flex-direction: column; gap: 2px;
                 padding: 6px 10px; border-radius: 6px; }
.chip-m5 { border-left-color: var(--akcent); }
.chip-podatki, .chip-nieznane { border-left-color: var(--obrys-mocny); }

/* ─────────────── Okienko „Co się dzieje" na ekranie sklepu ───────────────
   Każda zmiana zamówień i faktur: DZIŚ, potem WCZORAJ, potem znika. Wpis jest
   linkiem do zamówienia albo dokumentu, którego dotyczy (klient 11.09.2026).
   Od 15.09.2026 zwarty układ: jedna linijka na wpis, trzy stałe kolumny
   (godzina · metka rodzaju · treść), wpisy w kolumnach obok siebie. */
.okienko-zdarzen .zdarzenia-sekcja { display: block; }
.okienko-zdarzen details.wczoraj summary,
.okienko-zdarzen details.zdarzenia-wiecej summary {
  cursor: pointer; display: flex; gap: 8px; align-items: baseline; list-style: none;
}
.okienko-zdarzen details summary::-webkit-details-marker { display: none; }
.okienko-zdarzen details.wczoraj,
.okienko-zdarzen details.zdarzenia-wiecej {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--obrys);
}
.lista-zdarzen { list-style: none; margin: 0; padding: 0; display: block; columns: 1; }
@media (min-width: 1250px) { .lista-zdarzen { columns: 2; column-gap: 26px; } }
@media (min-width: 1700px) { .lista-zdarzen { columns: 3; column-gap: 26px; } }
.zdarzenie { display: block; padding: 0; border: 0; break-inside: avoid; }
.zdarzenie > a, .zdarzenie:not(:has(> a)) {
  display: grid; grid-template-columns: 34px 80px minmax(0, 1fr);
  align-items: baseline; gap: 0 8px;
  padding: 2px 6px; border-radius: 6px; color: inherit; text-decoration: none;
}
.zdarzenie > a:hover, .zdarzenie > a:focus-visible { background: var(--powierzchnia-2); }
.zdarzenie .godzina { font-variant-numeric: tabular-nums; font-size: 11px;
                      color: var(--tekst-drugi, inherit); opacity: .7; }
/* Metka nosi klasę znacznika (`znacznik oczekuje` itd.), więc kolor bierze
   z tych samych reguł co znaczniki w tabelach. Tu tylko rozmiar i krój. */
.zdarzenie .metka {
  display: block; overflow: hidden; padding: 0 4px; border-radius: 3px;
  font-size: 9.5px; font-weight: 700; line-height: 15px; letter-spacing: .04em;
  text-align: center; text-transform: uppercase; white-space: nowrap;
}
@media (min-width: 1250px) {
  .zdarzenie .tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.okienko-zdarzen .wczoraj .zdarzenie { opacity: .75; }
.zdarzenia-pusto { margin: 0; }

/* Wiersz, do którego prowadzi link z okienka — krótkie podświetlenie. */
.grupa-faktury:target, tr:target { outline: 2px solid var(--akcent); outline-offset: 2px;
                                   border-radius: 6px; }

/* Okienka operacji z wyciągu w Rozliczeniach (11.09.2026) */
#operacje-wyciagu .propozycja { display: block; }
.pola-operacji { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; }
.pola-operacji input { max-width: 10rem; }
.propozycja-akcje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }

/* Termin płatności faktury dostawcy w Rozliczeniach (11.09.2026) */
.termin-faktury { font-size: 12px; color: var(--tekst-2); white-space: nowrap; }
.znacznik.po-terminie { font-weight: 700; }

/* Narzędzie do przelewu pod listą faktur (klient 15.09.2026). */
.panel-przelewu {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
  margin-top: 12px; padding: 12px; border-radius: 8px;
  background: var(--powierzchnia-2); border: 1px solid var(--obwodka);
}
.panel-lewa { display: grid; grid-template-columns: auto auto; gap: 2px 10px; align-items: baseline; }
.panel-prawa { flex: 1 1 22rem; display: flex; flex-direction: column; gap: 4px; }
.kwota-przelewu { font-size: 18px; font-variant-numeric: tabular-nums; }
.tytul-przelewu {
  width: 100%; resize: vertical; font-size: 12px; font-family: inherit;
  padding: 6px 8px; border-radius: 6px; border: 1px solid var(--obwodka);
  background: var(--powierzchnia); color: var(--tekst);
}
.panel-akcje { display: flex; gap: 8px; flex-wrap: wrap; }
.grupa-faktury.korekta-na-liscie { background: var(--uwaga-tlo); }
input.do-przelewu { margin-right: 6px; vertical-align: middle; }

/* Zgłoszenia księgowej Tecomatu o niezgodnych przelewach (klient 15.09.2026).
   Sekcja ma być widoczna od razu — to sprawa z terminem i kwotą. */
.sekcja-ksiegowa { border-left: 3px solid var(--uwaga); }
.wniosek-ksiegowej {
  margin: 8px 0; padding: 8px 10px; border-radius: 6px;
  background: var(--uwaga-tlo); color: var(--uwaga); font-size: 13px;
}
.pary-ksiegowej { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0; }
.pary-ksiegowej span { display: flex; flex-direction: column; }
.kwota-roznicy { color: var(--blad); }
.tabela-ksiegowej { font-size: 12px; }
.tabela-ksiegowej .wiersz-rozny { background: var(--blad-tlo); }

/* Numer faktury kosztowej na ekranie spółki (klient 15.09.2026). */
.numer-faktury {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tekst);
}

/* Proforma dostawcy czekająca na przelew — przy statusie zamówienia.
   Sam status „Proforma do zapłaty" klient czytał jako „czekamy na proformę"
   (15.09.2026). Numer i kwota rozstrzygają, a link prowadzi do przelewu. */
.proforma-do-zaplaty {
  display: block; margin-top: 4px; font-size: 11px;
  color: var(--uwaga); text-decoration: none; white-space: nowrap;
}
.proforma-do-zaplaty:hover { text-decoration: underline; }

/* Numer wersji systemu w stopce (klient 15.09.2026: „oznacz system numerem 1.1"). */
.wersja-systemu {
  margin: 28px 0 10px; text-align: center;
  font-size: 11px; color: var(--tekst-2); opacity: .7;
}

/* Częściowe pokrycie z magazynu — zamówienie DALEJ idzie do dostawcy, więc
   pomarańczowe, nie zielone (klient 15.09.2026). */
.magazyn-wybrany.czesciowo { border-left-color: var(--uwaga); }

/* Ręczne wpisanie listu przewozowego w karcie zamówienia (klient 15.09.2026). */
.wiersz-przesylki { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.wiersz-przesylki input { flex: 0 1 12rem; }

/* Potwierdzenie wysyłki faktury firmowej do KSeF (klient 14.09.2026).
   Znacznik ma być drobny — stoi przy numerze faktury, nie zamiast niego. */
.znacznik.znak-ksef { font-size: 10px; letter-spacing: .03em; padding: 1px 5px; }

/* Wystawca faktury i nietypowo długi termin (klient 14.09.2026). MB kupuje
   u trzech dostawców, więc sam numer nie mówił, czyja to faktura. Pomarańczowa
   etykieta = termin dłuższy niż zwykłe 14 dni; czerwona „po terminie" zostaje. */
.wystawca-faktury {
  font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--tekst-2); background: var(--powierzchnia-2);
  border-radius: 4px; padding: 1px 6px; margin-left: 6px; white-space: nowrap;
}
.znacznik.dlugi-termin {
  background: var(--uwaga-tlo); color: var(--uwaga); font-weight: 700;
}

/* Przegląd wiadomości: kafelek na pulpicie i pełna lista (12.09.2026) */
/* Kompaktowy pasek newsów na pulpicie — jedna linijka na wpis (klient 12.09.2026:
   „zajmują za dużo miejsca"). Na telefonie zawija się do kolumny. */
/* Pasek newsów na pulpicie: nagłówek + 2–3 linijki zajawek. Zajawka ma się MIEŚCIĆ,
   a nie urywać w pół słowa (klient 12.09.2026). Na telefonie schodzi do jednej kolumny. */
.pasek-newsow { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 4px 16px;
                padding: 10px 12px; margin: 0 0 14px; border: 1px solid var(--obrys);
                border-radius: var(--r-mala); background: var(--powierzchnia); text-decoration: none;
                color: inherit; font-size: 13px; line-height: 1.5; }
.pasek-newsow:hover { border-color: var(--akcent); }
.newsy-dzien { font-weight: 700; letter-spacing: .04em; white-space: nowrap; padding-top: 1px; }
.newsy-ile { color: var(--tekst-2); font-weight: 500; }
.newsy-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
               gap: 2px 18px; }
.newsy-wpis { display: flex; align-items: baseline; gap: 6px; color: var(--tekst-2); min-width: 0; }
.newsy-wpis .chip-news { flex: none; }
@media (max-width: 720px) {
  .pasek-newsow { grid-template-columns: 1fr; }
  .newsy-lista { grid-template-columns: 1fr; }
}
.chip-news { background: var(--powierzchnia-2); color: var(--tekst-2); white-space: nowrap; }
.lista-newsow { margin: 0; padding-left: 22px; display: grid; gap: 14px; }
.lista-newsow li::marker { color: var(--tekst-2); font-weight: 700; }
.news-tytul { font-weight: 600; text-decoration: none; color: inherit; }
.news-tytul:hover { color: var(--akcent); text-decoration: underline; }
.news-zajawka { margin: 4px 0 2px; color: var(--tekst-2); font-size: 14px; line-height: 1.45; }
.news-zrodlo { font-size: 12px; color: var(--tekst-2); }
.dni-newsow { display: flex; flex-wrap: wrap; gap: 6px; }
.dni-newsow a { text-decoration: none; }

/* Wiadomości dobrane pod naszą działalność (12.09.2026) */
.news-nasz { background: var(--akcent-tlo); border-radius: var(--r-mala); padding: 8px 10px; margin-left: -10px; }
.news-etykieta { margin-right: 8px; vertical-align: 2px; }
.news-dlaczego { margin: 4px 0 2px; font-size: 13px; color: var(--tekst); }

/* Element niewidoczny, ale obecny dla przeglądarki i czytnika ekranu.
   Używany m.in. jako domyślny przycisk formularza, żeby ENTER robił zapis,
   a nie pierwszą lepszą akcję z brzegu (13.09.2026). */
.wizualnie-ukryte {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}