/* =====================================================================
   Panel agenta handlowego — styl narzędzia pracy: spokojny, czytelny,
   z jednym akcentem (głęboki teal) i wyraźnym ostrzegawczym bursztynem
   dla spraw wymagających decyzji.
   ===================================================================== */

:root {
    --tlo: #f6f7f5;
    --karta: #ffffff;
    --atrament: #1d2b2a;
    --przygaszony: #64716f;
    --linia: #e2e6e3;
    --akcent: #0f6b62;          /* teal — działania i marka */
    --akcent-ciemny: #0a4f49;
    --ostrzezenie-tlo: #fdf3e0;
    --ostrzezenie: #9a6208;
    --sukces-tlo: #e8f4ee;
    --sukces: #196c43;
    --blad-tlo: #fbeceb;
    --blad: #a3352c;
    --promien: 10px;
    --cien: 0 1px 3px rgba(29, 43, 42, .08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--tlo);
    color: var(--atrament);
    font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
}

a { color: var(--akcent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- nagłówek ---------- */
.naglowek {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: var(--karta);
    border-bottom: 1px solid var(--linia);
}
.naglowek nav { margin-left: auto; display: flex; gap: 18px; }

.logo-znak {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--akcent);
    color: #fff;
    font-weight: 700; font-size: 20px;
    border-radius: 14px;
    letter-spacing: .5px;
}
.logo-znak.maly { width: 34px; height: 34px; font-size: 14px; border-radius: 9px; }

/* ---------- układ ---------- */
.zawartosc { max-width: 1080px; margin: 28px auto; padding: 0 20px; }
.zawartosc.waska { max-width: 780px; }
section { margin-bottom: 36px; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }

.licznik {
    background: var(--akcent);
    color: #fff;
    font-size: 12px;
    padding: 1px 9px;
    border-radius: 99px;
}

.pusto { color: var(--przygaszony); background: var(--karta); border: 1px dashed var(--linia); border-radius: var(--promien); padding: 18px; }
.meta { color: var(--przygaszony); font-size: 13px; margin: 2px 0 0; }
.drobne { color: var(--przygaszony); font-size: 12.5px; }

/* ---------- komunikaty ---------- */
.alert  { background: var(--blad-tlo);  color: var(--blad);  padding: 10px 14px; border-radius: var(--promien); }
.sukces { background: var(--sukces-tlo); color: var(--sukces); padding: 10px 14px; border-radius: var(--promien); }

/* ---------- lista szkiców ---------- */
.lista-szkicow { display: grid; gap: 12px; }
.szkic {
    display: block;
    background: var(--karta);
    border: 1px solid var(--linia);
    border-left: 4px solid var(--akcent);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    padding: 14px 16px;
    color: inherit;
}
.szkic:hover { text-decoration: none; border-color: var(--akcent); }
.szkic.zablokowany { border-left-color: var(--ostrzezenie); background: var(--ostrzezenie-tlo); }
.szkic-naglowek { display: flex; justify-content: space-between; gap: 12px; }
.klient { font-weight: 600; }
.czas { color: var(--przygaszony); font-size: 12.5px; }
.dni-temu { display: block; color: var(--przygaszony); font-size: 12px; }
.temat { color: var(--przygaszony); font-size: 13.5px; margin-top: 2px; }
.blokada { color: var(--ostrzezenie); font-size: 13.5px; margin-top: 6px; font-weight: 600; }
.podglad { margin-top: 8px; font-size: 13.5px; color: var(--przygaszony); }

/* ---------- tabela wątków ---------- */
.tabela {
    width: 100%;
    border-collapse: collapse;
    background: var(--karta);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    overflow: hidden;
    box-shadow: var(--cien);
    font-size: 14px;
}
.tabela th, .tabela td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linia); }
.tabela th { background: #fbfcfb; font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--przygaszony); }
.tabela tr:last-child td { border-bottom: none; }
.wyszarzony { opacity: .55; }

/* ---------- statusy ---------- */
.status {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 99px;
    background: var(--linia);
}
.s-nowy             { background: #e3edfa; color: #23538f; }
.s-dopytywanie      { background: #eef0ee; color: #4c5a58; }
.s-oferta_wyslana   { background: #e2f1ee; color: var(--akcent-ciemny); }
.s-followup         { background: #f0eaf8; color: #5d3f8f; }
.s-odroczony        { background: #fdf3e0; color: #9a6208; }
.s-spam             { background: #fbeceb; color: #a3352c; }
.s-zamkniety        { background: #ececec; color: #777; }
.wynik-wygrana   { color: var(--sukces); font-weight: 600; font-size: 12px; }
.wynik-przegrana { color: var(--blad); font-weight: 600; font-size: 12px; }
.wynik-anulowany { color: var(--przygaszony); font-weight: 600; font-size: 12px; }
.s-wymaga_czlowieka { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie); }
/* 1.29.3: stan doręczenia leada z Meta (lista Leadów) */
.s-lead-oczekuje  { background: #e3edfa; color: #23538f; }
.s-lead-pobrany   { background: var(--sukces-tlo); color: var(--sukces); }
.s-lead-blad      { background: var(--blad-tlo); color: var(--blad); }
.s-lead-porzucone { background: #ececec; color: #777; }
button.lead-akcja { padding: 4px 10px; font-size: 12.5px; }

/* ---------- korespondencja ---------- */
.karta-watku { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); padding: 16px 20px; box-shadow: var(--cien); }

.korespondencja { display: grid; gap: 10px; }
/* 1.14.7.1: STAŁA szerokość, nie dopasowana do treści. Wcześniej było
   `max-width: 88%` przy `justify-self: start/end`, co w gridzie oznacza
   "przyklej się do treści, ale nie szerzej niż 88%". O szerokości dymka
   decydowała więc NAJDŁUŻSZA LINIA wiadomości - a maile klientów przychodzą
   zawinięte twardo na ~70 znakach (tak wysyła większość programów pocztowych),
   podczas gdy nasze idą jednym długim akapitem. Stąd dymek klienta wychodził
   o połowę węższy, mimo identycznego sufitu.
   `width` zamiast `max-width` zdejmuje tę zależność: każdy dymek ma te same
   88%, a `justify-self` decyduje już tylko o tym, do której krawędzi przylega. */
.wiadomosc {
    width: 88%;
    border-radius: var(--promien);
    padding: 12px 16px;
    border: 1px solid var(--linia);
}
.od-klienta { background: var(--karta); justify-self: start; }
.od-nas     { background: #eaf3f1; border-color: #d3e5e1; justify-self: end; }
/* 1.8.0: notatka handlowca w osi rozmowy - delikatnie inna od maili */
.od-handlowca {
    background: #fdf8ec;
    border-color: #ecdfc0;
    border-style: dashed;
    justify-self: end;
}
.wiadomosc-meta { font-size: 12px; color: var(--przygaszony); margin-bottom: 6px; }
.wiadomosc-tresc { white-space: normal; word-wrap: break-word; }

/* ---------- szkic ---------- */
.karta-szkicu {
    background: var(--karta);
    border: 1px solid var(--linia);
    border-top: 4px solid var(--akcent);
    border-radius: var(--promien);
    padding: 18px 20px;
    box-shadow: var(--cien);
}
.karta-szkicu.zablokowany { border-top-color: var(--ostrzezenie); }

textarea {
    width: 100%;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    padding: 12px;
    font: inherit;
    resize: vertical;
    margin-top: 8px;
}
textarea:focus { outline: 2px solid var(--akcent); outline-offset: 1px; border-color: transparent; }

.przyciski { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

button {
    font: inherit;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    cursor: pointer;
}
button.glowny { background: var(--akcent); color: #fff; }
button.glowny:hover { background: var(--akcent-ciemny); }
button.drugorzedny { background: var(--karta); color: var(--atrament); border: 1px solid var(--linia); }
button.drugorzedny:hover { border-color: var(--przygaszony); }
button:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

.akcje-watku { display: flex; justify-content: flex-end; }

/* ---------- logowanie ---------- */
body.logowanie {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #eef2f0, #dfe8e5);
}
.karta-logowania {
    background: var(--karta);
    border: 1px solid var(--linia);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(29, 43, 42, .12);
    padding: 36px;
    width: min(380px, 92vw);
    text-align: center;
}
.karta-logowania .logo-znak { margin: 0 auto 14px; }
.karta-logowania h1 { font-size: 20px; }
.podtytul { color: var(--przygaszony); margin-top: 2px; }
.karta-logowania form { display: grid; gap: 14px; margin-top: 20px; text-align: left; }
.karta-logowania label { font-size: 13px; font-weight: 600; display: grid; gap: 5px; }
.karta-logowania input {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--linia);
    border-radius: 8px;
}
.karta-logowania input:focus { outline: 2px solid var(--akcent); border-color: transparent; }
.karta-logowania button { background: var(--akcent); color: #fff; padding: 11px; }
.karta-logowania button:hover { background: var(--akcent-ciemny); }

/* =====================================================================
   1.5.0: układ z menu bocznym (wg wireframe 04-wireframe-panel-v2)
   Menu stałe 280px, wrapper treści max 1440px, wyrównanie do lewej.
   ===================================================================== */
.uklad { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }

.boczne {
    background: var(--karta); border-right: 1px solid var(--linia);
    padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.boczne .marka { display: flex; align-items: center; gap: 10px; font-weight: 700; padding: 4px 8px 16px; }
.boczne a.pozycja {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px; color: var(--atrament); font-weight: 500;
    transition: background .12s ease, color .12s ease;
}
.boczne a.pozycja:hover { background: var(--tlo); text-decoration: none; }
.boczne a.pozycja.aktywna { background: var(--akcent); color: #fff; }
/* 1.17.0: separator wewnątrz sekcji - oddziela dane rzadziej potrzebne
   (adres korespondencyjny) od podstawowych, bez robienia z nich osobnej karty. */
hr.separator { border: 0; border-top: 1px solid var(--linia); margin: 18px 0 14px; }

/* 1.17.0: ZWIJANA SEKCJA - wspólny mechanizm (zwijka_start() w uklad.php).
   Wygląd nagłówka robi CSS, bo w <button> nie wolno postawić <h2>. */
.karta.zwijka { padding: 0; overflow: hidden; }
.zwijka-naglowek {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 16px 22px; background: none; border: 0; cursor: pointer; text-align: left;
    font-family: inherit; color: var(--atrament);
}
.zwijka-naglowek:hover { background: #fbfcfb; }
.zwijka-naglowek:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; }
.zwijka-tytul { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.zwijka-podtytul { font-weight: 400; }
.strzalka-zwijka { display: inline-flex; color: var(--przygaszony); transition: transform .15s ease; }
.strzalka-zwijka svg { width: 18px; height: 18px; display: block; }
.karta.zwijka.otwarta .strzalka-zwijka { transform: rotate(180deg); }
.zwijka-cialo { display: none; padding: 0 22px 18px; border-top: 1px solid var(--linia); }
.karta.zwijka.otwarta .zwijka-cialo { display: block; padding-top: 16px; }
/* Pierwszy nagłówek wewnątrz ciała nie potrzebuje odstępu - sekcja już go ma. */
.zwijka-cialo > h3:first-child { margin-top: 0; }

/* 1.16.0: nagłówek działu jest PRZYCISKIEM zwijającym, nie napisem.
   Wygląda dalej jak etykieta - kursor, strzałka i podświetlenie mówią,
   że da się w niego kliknąć, ale nic nie krzyczy. */
.boczne .dzial { display: flex; flex-direction: column; gap: 4px; }
.boczne .grupa {
    display: flex; align-items: center; gap: 6px; width: 100%;
    margin-top: 16px; margin-bottom: 2px; padding: 4px 12px;
    background: none; border: 0; border-radius: 8px; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .8px; color: var(--przygaszony);
}
.boczne .grupa:hover { background: var(--tlo); color: var(--atrament); }
.boczne .grupa:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; }
.boczne .grupa-tytul { flex: 1; min-width: 0; }
.boczne .strzalka-dzial { display: inline-flex; transition: transform .15s ease; }
.boczne .strzalka-dzial svg { width: 14px; height: 14px; display: block; }
.boczne .dzial.otwarty .strzalka-dzial { transform: rotate(180deg); }
.boczne .dzial-pozycje { display: none; flex-direction: column; gap: 4px; }
.boczne .dzial.otwarty .dzial-pozycje { display: flex; }
/* Odznaka na nagłówku to STRESZCZENIE działu zwiniętego. Gdy dział jest
   otwarty, liczby stoją przy swoich pozycjach i suma tylko dublowałaby. */
.boczne .dzial.otwarty .grupa .licznik { display: none; }
.boczne .dol { margin-top: auto; border-top: 1px solid var(--linia); padding-top: 10px; }

/* 1.11.0: ikony SVG w menu - jeden rozmiar, sam obrys, kolor dziedziczony */
.ikona { width: 20px; display: inline-flex; justify-content: center; flex-shrink: 0; }
.ikona-svg { width: 18px; height: 18px; display: block; }
.boczne a.pozycja .ikona-svg { opacity: .7; transition: opacity .12s ease; }
.boczne a.pozycja:hover .ikona-svg,
.boczne a.pozycja.aktywna .ikona-svg { opacity: 1; }
.boczne a.pozycja .licznik { margin-left: auto; }

.glowna { padding: 28px 20px 28px 32px; max-width: 1440px; min-width: 0; }

.hamburger {
    display: none; position: fixed; top: 14px; left: 14px; z-index: 60;
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--karta); border: 1px solid var(--linia);
    font-size: 19px; padding: 0; cursor: pointer;
}
.zaslona { display: none; position: fixed; inset: 0; background: rgba(29,43,42,.35); z-index: 40; }

/* Karty i formularze ustawień */
.karta {
    background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien);
    box-shadow: var(--cien); padding: 20px 22px; margin-bottom: 20px;
}
.karta h2 { margin-top: 0; }
.pole { display: grid; gap: 5px; margin-bottom: 14px; }
.pole label { font-size: 13px; font-weight: 600; }
.pole input[type=text], .pole input[type=password], .pole input[type=email],
.pole input[type=number], .pole select {
    width: 100%; border: 1px solid var(--linia); border-radius: 8px;
    padding: 10px 12px; font: inherit; background: #fff; box-sizing: border-box;
}
.pole input:focus, .pole select:focus { outline: 2px solid var(--akcent); outline-offset: 1px; border-color: transparent; }
.pole .blad-pola { color: var(--blad); font-size: 12.5px; }
.dwie-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.trzy-kolumny { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 18px; }
/* 1.17.0: pole z podpowiedzią pod spodem (np. „Status") rozciąga cały wiersz
   siatki, a razem z nim - pola obok. Kontrolki trzymają więc własną wysokość;
   celowo tylko input i select, bo rozciągające się textarea bywa zamierzone. */
.dwie-kolumny > .pole > input, .dwie-kolumny > .pole > select,
.trzy-kolumny > .pole > input, .trzy-kolumny > .pole > select { align-self: start; }

/* 1.34.0: KONIEC ROZJEŻDŻANIA SIĘ PÓL W KOLUMNACH.
   Objaw: dwa pola obok siebie, pod jednym dłuższa podpowiedź - i kontrolka
   w drugiej kolumnie siedzi niżej niż w pierwszej.
   Przyczyna: .pole to siatka (label / kontrolka / podpowiedź), a gdy sąsiad
   z tego samego wiersza jest wyższy, domyślne `align-content: normal`
   ROZCIĄGA wszystkie jej wiersze - razem z pustą przestrzenią nad kontrolką.
   Lekarstwo: pakujemy zawartość do góry. Wolna przestrzeń ma zostać na dole,
   tam gdzie jej nie widać. */
.pole { align-content: start; }

/* A to drugi, trudniejszy przypadek: etykieta w jednej kolumnie łamie się
   na dwie linie, w drugiej nie - wtedy samo „do góry" nie wystarczy, bo
   kontrolki startują z różnych wysokości. Rozwiązuje to subgrid: pola
   przejmują WIERSZE siatki rodzica, więc etykiety, kontrolki i podpowiedzi
   trafiają do wspólnych pasm i równają się między kolumnami.
   Warunki (celowo ostrożne, bo .pole jest w panelu w 200 miejscach):
     - przeglądarka zna subgrid (@supports),
     - w kontenerze są WYŁĄCZNIE pola (.pole),
     - żadne z nich nie ma czwartego elementu (label + kontrolka + podpowiedź).
   Kontener, który tych warunków nie spełnia, zachowuje się jak dotąd. */
@supports (grid-template-rows: subgrid) {
    .dwie-kolumny:not(:has(> :not(.pole))):not(:has(> .pole > :nth-child(4))) > .pole,
    .trzy-kolumny:not(:has(> :not(.pole))):not(:has(> .pole > :nth-child(4))) > .pole {
        grid-row: span 3;
        grid-template-rows: subgrid;
    }
}
.mono { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: 13px; }
kod, code { background: var(--tlo); border: 1px solid var(--linia); border-radius: 5px; padding: 1px 6px; font-size: 12.5px; }

/* Przełączniki (auto-wysyłka) */
.przelacznik { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.przelacznik .tor { width: 40px; height: 22px; border-radius: 99px; background: #cfd6d3; position: relative; transition: .15s; flex: none; }
.przelacznik .tor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .15s; }
.przelacznik input { display: none; }
.przelacznik input:checked + .tor { background: var(--akcent); }
.przelacznik input:checked + .tor::after { left: 21px; }

/* Historia wersji promptu */
.wersja { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linia); font-size: 13.5px; }
.wersja:last-child { border-bottom: none; }

@media (max-width: 760px) {
    .uklad { grid-template-columns: 1fr; }
    .hamburger { display: grid; place-items: center; }
    .boczne {
        position: fixed; left: 0; top: 0; height: 100vh; width: 280px;
        transform: translateX(-100%); transition: transform .2s ease;
        z-index: 50; box-shadow: 4px 0 24px rgba(29,43,42,.18);
    }
    .boczne.otwarte { transform: translateX(0); }
    .zaslona.widoczna { display: block; }
    .glowna { padding: 70px 20px 28px; }
    .dwie-kolumny, .trzy-kolumny { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .tabela { font-size: 12.5px; }
    .tabela th:nth-child(4), .tabela td:nth-child(4),
    .tabela th:nth-child(5), .tabela td:nth-child(5) { display: none; }
    .wiadomosc { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ===== 1.11.0: branding WEBTEC ===== */
.logo-firmy { display: block; margin: 0 auto 16px; height: 40px; max-width: 100%; }
.marka .sygnet { width: 38px; height: 38px; flex-shrink: 0; }
.marka span { line-height: 1.15; }
.marka-firma { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; color: var(--przygaszony); text-transform: uppercase; }
.stopka-praw { color: var(--przygaszony); font-size: 11px; margin: 10px 12px 0; line-height: 1.5; }
.karta-logowania .stopka-praw { text-align: center; margin-top: 18px; }

/* ===== 1.11.0: pulpit - kafelki raportu ===== */
.kafelki { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 6px; }
a.kafelek {
    display: block; background: var(--karta); border: 1px solid var(--linia);
    border-radius: var(--promien); padding: 14px 16px; box-shadow: var(--cien);
    color: inherit; text-decoration: none;
}
a.kafelek:hover { border-color: var(--akcent); text-decoration: none; }
.kafelek .liczba { font-size: 26px; font-weight: 700; line-height: 1.1; }
.kafelek .opis { color: var(--przygaszony); font-size: 12.5px; margin-top: 3px; }
.kafelek.wyroznienie { border-left: 4px solid var(--ostrzezenie); background: var(--ostrzezenie-tlo); }
.kafelek.sukces-kafelek { border-left: 4px solid var(--sukces); }
.alerty { display: grid; gap: 8px; margin: 12px 0; }
.alerty a { display: block; padding: 10px 14px; border-radius: var(--promien); background: var(--ostrzezenie-tlo); color: var(--ostrzezenie); font-weight: 600; }
.alerty a:hover { text-decoration: none; filter: brightness(.97); }
/* 1.51.4: alert, którego nie da się załatwić kliknięciem (zadanie na serwerze).
   Wygląda jak pozostałe, ale nie udaje odnośnika. */
.alerty .bez-adresu { display: block; padding: 10px 14px; border-radius: var(--promien);
                      background: var(--blad-tlo); color: var(--blad); font-weight: 600; }

/* ===== 1.11.0: filtry listy wątków ===== */
a.filtr {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border: 1px solid var(--linia); border-radius: 999px; background: var(--karta);
    color: inherit; font-size: 13px;
}
a.filtr:hover { text-decoration: none; border-color: var(--akcent); }
a.filtr.aktywny { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.filtr-liczba { font-size: 11.5px; opacity: .75; }
/* 1.36.0: pigułka, która woła o uwagę. Używana tam, gdzie filtr pokazuje
   sprawy CZEKAJĄCE NA CZŁOWIEKA i nikt się o nich inaczej nie dowie
   („Do przypisania" — agent sam nic w nich nie wyśle). Sam kolor to za mało,
   więc dochodzi obwódka i pogrubiony licznik; przy zerze klasy nie ma
   w ogóle, bo alarm bez powodu przestaje być alarmem. */
.filtr.alarm {
    border-color: var(--ostrzezenie);
    box-shadow: 0 0 0 2px var(--ostrzezenie-tlo);
    color: var(--ostrzezenie);
    font-weight: 600;
}
.filtr.alarm:hover { border-color: var(--ostrzezenie); background: var(--ostrzezenie-tlo); }
.filtr.alarm .filtr-liczba { opacity: 1; font-weight: 700; }
.filtr.alarm.aktywny { color: #fff; }

/* ===== 1.53.2: IKONY W TREŚCI I KOLUMNA „KLIENT / FIRMA" =====
   Ikona w treści ma siedzieć NA LINII PISMA i brać kolor z tekstu, a nie
   stać obok jak obrazek. Dlatego `currentColor` i przesunięcie w dół o 2 px:
   środek konturu wypada wtedy na wysokości środka małych liter. */
.ikona-mini {
    width: 14px; height: 14px; display: inline-block; vertical-align: -2px;
    margin-right: 5px; flex: none; opacity: .75;
}

/* Trzy poziomy w jednej komórce. Do 1.53.1 wszystkie trzy linijki miały tę
   samą wagę i ten sam kolor odnośnika, więc zlewały się w jedną nazwę. */
.kf .kf-osoba { font-weight: 600; }
.kf .kf-firma {
    display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.35;
    color: var(--przygaszony);
}
a.kf-firma:hover { color: var(--akcent); text-decoration: none; }
/* Podmiot rozpoznany automatycznie, jeszcze niepotwierdzony przez człowieka. */
.kf-firma.niepewny { font-style: italic; }
.kf-dopisek {
    display: block; margin-top: 1px; font-size: 12px; line-height: 1.35;
    color: var(--przygaszony);
}
/* 1.54.0: „szkic czeka" to STAN OCZEKIWANIA, a nie odnośnik — więc bursztyn
   (`--ostrzezenie`), tak samo jak `s-wymaga_czlowieka`, pigułka alarmowa „Do
   przypisania" i `.szkic.zablokowany`. Do 1.53.2 stał tu `--akcent-ciemny`,
   czyli kolor DZIAŁANIA: linijka wyglądała jak każdy inny odnośnik w wierszu
   i ginęła. Tekstem, nie drugą pigułką — chip statusu stoi już obok. */
.kf-dopisek.czeka { color: var(--ostrzezenie); font-weight: 600; }
a.kf-dopisek:hover { text-decoration: none; color: var(--akcent); }

/* ===== 1.53.0: znacznik kanału i pasek zawężeń =====
   Znacznik ma być CICHY: odpowiada na pytanie „skąd", a nie „co jest ważne".
   Stąd szary domyślnie; kolor dostają tylko kanały, których nie wolno
   pomylić z pocztą, bo rządzą się innymi regułami wysyłki (okno rozmowy).
   Kolory wyłącznie ze zmiennych motywu - żadnej wartości wpisanej na sztywno. */
.kanal-znacznik {
    display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px;
    border: 1px solid var(--linia); background: var(--tlo);
    color: var(--przygaszony); font-size: 11.5px; white-space: nowrap;
}
.kanal-znacznik.k-formularz { border-color: var(--akcent); color: var(--akcent-ciemny); }
.kanal-znacznik.k-messenger,
.kanal-znacznik.k-whatsapp  { border-color: var(--ostrzezenie); color: var(--ostrzezenie); }
.kanal-znacznik.k-telefon   { border-style: dashed; }

/* 1.53.1: JEDEN PASEK FILTRÓW listy zapytań - status, kanał, prowadzący
   i przełącznik „prowadzi człowiek" w jednym rzędzie. Zastąpił dwanaście
   pigułek zawijających się na dwa rzędy; pigułki (.filtr) zostają na ekranach,
   gdzie filtrów jest kilka i mieszczą się w jednej linii.
   Odstęp od tabeli jest tu ustawiony JAWNIE (16 px) - poprzednia wersja miała
   ujemny margines górny dociągający pasek do pigułek i przez to przyklejała
   się do tabeli, gdy pigułek nad nią zabrakło. */
.pasek-filtrow {
    display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap;
    margin: 0 0 16px; padding: 10px 12px;
    border: 1px solid var(--linia); border-radius: var(--promien); background: var(--karta);
}
.pasek-filtrow label { margin: 0; }
.pasek-filtrow select { min-width: 140px; }
/* „Prowadzi człowiek" jest PRZEŁĄCZNIKIEM, nie kolejną listą: jest prostopadły
   do statusu (1.43.0) i łączy się z nim, zamiast go wypierać. Używamy tu
   panelowego .przelacznik (z .tor) - ta klasa istnieje od 1.29.0 i ma własny
   wygląd, w którym natywne pole wyboru jest UKRYTE. Własny „checkbox w pigułce"
   wyglądałby obok jak wklejony z innego programu, a przy okazji zderzyłby się
   z istniejącą klasą - dokładnie tak jak `.podpowiedzi` w 1.51.0. */
.pasek-filtrow .przelacznik { white-space: nowrap; }

/* ===== 1.13.0: zwinięty cytat wcześniejszej korespondencji ===== */
details.cytat {
    margin-block: 1em;
    padding-block-start: 1em;
    border-top: dashed 1px #666;
}
details.cytat summary {
    cursor: pointer; font-size: 12px; color: var(--przygaszony);
    list-style: none; user-select: none;
}
details.cytat summary::before { content: '▸ '; }
details.cytat[open] summary::before { content: '▾ '; }
details.cytat summary::-webkit-details-marker { display: none; }
.cytat-tresc {
    margin-top: 6px; padding: 8px 12px; font-size: 13px;
    color: var(--przygaszony); background: var(--tlo);
    border-left: 3px solid var(--linia); border-radius: 0;
    white-space: normal; word-wrap: break-word;
}

/* =====================================================================
   1.14.0: OFERTOWNIK — cennik trójpoziomowy, kreator, oferty
   ===================================================================== */

/* Zwijane karty linii */
.linia-karta { padding: 0; overflow: hidden; }
.linia-naglowek {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 16px 22px; cursor: pointer; width: 100%;
    background: none; border: none; text-align: left; font: inherit; color: inherit;
}
.linia-naglowek:hover { background: #fbfcfb; }
.linia-naglowek:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; }
.linia-tytul { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.strzalka { color: var(--przygaszony); flex: none; margin-top: 6px; transition: transform .15s ease; }
.linia-karta.otwarta .strzalka { transform: rotate(90deg); }
.linia-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.linia-cialo { display: none; padding: 0 22px 16px; border-top: 1px solid var(--linia); }
.linia-karta.otwarta .linia-cialo { display: block; padding-top: 16px; }
.cena-od { text-align: right; font-size: 19px; font-weight: 700; color: var(--akcent-ciemny);
           font-variant-numeric: tabular-nums; white-space: nowrap; }
.cena-od .drobne { display: block; font-size: 11.5px; font-weight: 500; color: var(--przygaszony); }
.znacznik-linii { display: inline-block; font-size: 11.5px; font-weight: 600; background: var(--tlo);
                  border: 1px solid var(--linia); border-radius: 99px; padding: 1px 8px; white-space: nowrap; }
.znacznik-linii.ostrzega { color: var(--ostrzezenie); background: var(--ostrzezenie-tlo); border-color: #ecdfc0; }
.znacznik-linii.dobrze   { color: var(--sukces); background: var(--sukces-tlo); border-color: #c7e3d4; }

/* Sloty PDF i punkt wstawienia kalkulacji */
.slot-pdf { display: flex; align-items: center; gap: 12px; border: 1px solid var(--linia);
            border-radius: var(--promien); padding: 10px 14px; background: #fbfcfb; }
.slot-pdf .ikona-pdf { width: 34px; height: 40px; border-radius: 4px; background: var(--blad-tlo);
                       color: var(--blad); display: grid; place-items: center; font-size: 10px;
                       font-weight: 700; flex: none; }
.slot-pdf .info { min-width: 0; }
.slot-pdf .nazwa-pliku { font-weight: 600; font-size: 13.5px; }
.slot-pdf .akcje { margin-left: auto; flex: none; }
.wstaw-po { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px;
            padding: 8px 14px; font-size: 13.5px; background: #f2f8f7;
            border: 1px solid #d3e5e1; border-radius: var(--promien); }
.wstaw-po input { width: 74px; border: 1px solid var(--linia); border-radius: 6px;
                  padding: 5px 8px; font: inherit; text-align: center; }

/* Przykład zasad ustępstw */
.przyklad { margin-top: 6px; padding: 12px 14px; border-radius: var(--promien);
            background: var(--tlo); border: 1px solid var(--linia); font-size: 13.5px; }
.przyklad .tytul { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .5px; color: var(--przygaszony); margin-bottom: 6px; }
.przyklad strong { font-variant-numeric: tabular-nums; }

/* Kreator oferty */
.kreator { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px; align-items: start; }
.krok-znak { width: 26px; height: 26px; border-radius: 50%; background: var(--akcent); color: #fff;
             display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.wybor-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.wybor { border: 1px solid var(--linia); border-radius: var(--promien); background: var(--karta);
         padding: 12px 14px; cursor: pointer; text-align: left; font: inherit; font-weight: 500;
         display: block; width: 100%; color: inherit; }
.wybor:hover { border-color: var(--akcent); text-decoration: none; }
.wybor.wybrany { border-color: var(--akcent); box-shadow: 0 0 0 2px rgba(15,107,98,.18); background: #f2f8f7; }
.wybor .cena { display: block; margin-top: 4px; color: var(--akcent-ciemny); font-weight: 700;
               font-variant-numeric: tabular-nums; }

.dodatek { border: 1px solid var(--linia); border-radius: var(--promien); background: var(--karta); margin-bottom: 8px; }
.dodatek.wybrany { border-color: var(--akcent); background: #f7fbfa; }
.dodatek-wiersz { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.dodatek-wiersz input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--akcent); flex: none; }
.dodatek-nazwa { font-weight: 600; }
.dodatek-cena { margin-left: auto; font-weight: 700; color: var(--akcent-ciemny);
                font-variant-numeric: tabular-nums; white-space: nowrap; }
.ilosc-znacznik { font-size: 11px; font-weight: 700; background: var(--tlo); color: var(--akcent-ciemny);
                  border-radius: 99px; padding: 1px 8px; white-space: nowrap; }

/* 1.14.1: slownik jednostek w konfiguracji */
.jednostki-siatka { display: flex; flex-wrap: wrap; gap: 8px; }
.jednostki-siatka input { width: 120px; padding: 7px 9px; font: inherit; text-align: center;
                          border: 1px solid var(--linia); border-radius: 8px; background: var(--karta); }
.jednostki-siatka input:focus { outline: none; border-color: var(--akcent); }

/* 1.14.1: ilosc pozycji + dopisek handlowca */
.dodatek-ilosc { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.dodatek-ilosc input { width: 62px; padding: 4px 6px; text-align: right; font-size: 13.5px;
                       font-variant-numeric: tabular-nums; border: 1px solid var(--linia);
                       border-radius: 8px; background: var(--karta); }
.dodatek-ilosc input:focus { outline: none; border-color: var(--akcent); }
.dodatek-ilosc .jm { font-size: 12px; color: var(--przygaszony); min-width: 34px; }
.dodatek-cena .rozbicie { display: block; font-size: 11.5px; font-weight: 500;
                          color: var(--przygaszony); margin-top: 2px; }
.dodatek-dopisek { padding: 0 14px 12px 43px; }
.dodatek-dopisek label { display: block; font-size: 12px; font-weight: 600;
                         color: var(--przygaszony); margin-bottom: 4px; }
.dodatek-dopisek textarea { width: 100%; font-size: 13px; padding: 7px 9px; resize: vertical;
                            border: 1px solid var(--linia); border-radius: 8px; background: var(--karta); }
.dodatek-dopisek textarea:focus { outline: none; border-color: var(--akcent); }

/* 1.50.0.a: podpowiedź pod polem terminu - przesunięcie na dzień roboczy
   ma być widoczne, ale nie alarmujące; to informacja, nie błąd. */
.termin-przesuniety { color: var(--ostrzezenie); font-weight: 600; }

/* 1.49.0: usługa dodatkowa - opcja poza wyceną. Szara, nie zielona:
   zielony znaczy w tym panelu „ustępstwo", a to nie jest ustępstwo. */
.dodatkowa-przelacz { display: inline-block; font-size: 11.5px; font-weight: 600; border: 1px solid var(--linia);
                      background: var(--karta); border-radius: 99px; padding: 2px 10px;
                      color: var(--przygaszony); cursor: pointer; margin-top: 8px; }
.dodatkowa-przelacz:hover { border-color: var(--atrament); color: var(--atrament); }
.dodatkowa-przelacz.wlaczony { background: var(--tlo); border-color: var(--przygaszony); color: var(--atrament); }
.wiersz-oferty:has(.dodatkowa-przelacz.wlaczony) { background: var(--tlo); border-radius: var(--promien); }
.pods-dodatkowe { margin-top: 12px; padding: 8px 10px; background: var(--tlo); border-radius: 8px; }
.pods-etykieta { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
                 color: var(--przygaszony); margin-bottom: 4px; }
.pods-dodatkowe .pods-wiersz { border-bottom-color: rgba(0,0,0,.06); }
.pods-dodatkowe .pods-wiersz.razem { border-bottom: none; font-weight: 700; }

/* 1.48.0: lista cennika tylko WYBIERA - wiersz nie jest już klikalny. */
.dodatek-wiersz.statyczny { cursor: default; }
.dodaj-pozycje { font-size: 12.5px; font-weight: 600; border: 1px solid var(--akcent); background: var(--karta);
                 color: var(--akcent); border-radius: 99px; padding: 3px 12px; cursor: pointer; white-space: nowrap; }
.dodaj-pozycje:hover { background: var(--akcent); color: #fff; }

/* 1.48.0: POZYCJE OFERTY - wiersz z własną tożsamością, ceną i opisem. */
.wiersz-oferty { display: grid; grid-template-columns: 26px minmax(0,1fr) 150px 96px 150px; gap: 14px;
                 align-items: start; padding: 14px 0; border-bottom: 1px solid var(--linia); }
.wiersz-oferty:last-child { border-bottom: none; }
.wiersz-oferty.bledny { background: var(--blad-tlo); border-radius: var(--promien);
                        padding: 14px 12px; border-bottom-color: transparent; }
.wo-nazwa { font-weight: 600; }
.wo-glowna textarea { width: 100%; margin-top: 6px; font-size: 13px; padding: 7px 9px; resize: vertical;
                      border: 1px solid var(--linia); border-radius: 8px; background: var(--karta); }
.wo-glowna textarea:focus { outline: none; border-color: var(--akcent); }
.pole-etyk { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
             color: var(--przygaszony); font-weight: 700; }
.wiersz-oferty .wejscie { width: 100%; margin-top: 3px; padding: 6px 9px; font: inherit; font-size: 13.5px;
                          text-align: right; font-variant-numeric: tabular-nums;
                          border: 1px solid var(--linia); border-radius: 8px; background: var(--karta); }
.wiersz-oferty .wejscie:focus { outline: none; border-color: var(--akcent); }
.wiersz-oferty .wejscie.zmieniona { border-color: var(--ostrzezenie); background: var(--ostrzezenie-tlo); }
.wo-odchylenie { font-size: 11.5px; color: var(--przygaszony); margin-top: 4px; }
.wo-koszt { margin-top: 8px; }
.wo-ilosc .jm { font-size: 12px; color: var(--przygaszony); }
.wo-prawa { text-align: right; }
.wo-wartosc { display: block; font-weight: 700; color: var(--akcent-ciemny);
              font-variant-numeric: tabular-nums; margin-top: 3px; }
.wo-wartosc .rozbicie { display: block; font-size: 11.5px; font-weight: 500; color: var(--przygaszony); margin-top: 2px; }
.wo-prawa .gratis-przelacz, .usun-wiersz { margin-top: 8px; }
.usun-wiersz { display: inline-block; font-size: 11.5px; font-weight: 600; border: 1px solid var(--linia);
               background: var(--karta); border-radius: 99px; padding: 2px 10px; color: var(--przygaszony); cursor: pointer; }
.usun-wiersz:hover { border-color: var(--blad); color: var(--blad); }
@media (max-width: 900px) {
    .wiersz-oferty { grid-template-columns: 1fr 1fr; }
    /* 1.51.0: na wąskim ekranie strzałki idą paskiem nad wierszem - w osobnej
       kolumnie zjadałyby szerokość, której i tak brakuje. */
    .wo-kolejnosc { grid-column: 1 / -1; flex-direction: row; padding-top: 0; }
    .wo-kolejnosc button { width: 34px; }
    .wo-glowna { grid-column: 1 / -1; }
    .wo-prawa { text-align: left; }
}

/* =====================================================================
   1.51.0: DODAWANIE POZYCJI BEZ WĘDRÓWKI PO EKRANIE

   Pole dodawania stoi POD listą wierszy, pełny cennik jest zwinięty,
   a wiersz ma strzałki kolejności. Po co - w panel/oferta-nowa.php.

   Klasy nazywają się `cennik-podpowiedzi` / `cennik-podpowiedz`, a nie
   `podpowiedzi` / `podpowiedz`: te są zajęte od 1.28.5 przez podpowiedzi
   adresu w formularzu nowego wątku i wyglądają zupełnie inaczej.
   ===================================================================== */

/* Strzałki kolejności. Wyłączona na skraju listy zostaje widoczna, tylko
   przygaszona: znika przycisk, a nie kolumna, więc wiersze się nie rozjeżdżają. */
.wo-kolejnosc { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; }
.wo-kolejnosc button { background: none; border: 1px solid var(--linia); border-radius: 6px;
                       padding: 0; width: 26px; height: 22px; font-size: 10px; line-height: 1;
                       color: var(--przygaszony); cursor: pointer; }
.wo-kolejnosc button:hover:not(:disabled) { border-color: var(--akcent); color: var(--akcent); }
.wo-kolejnosc button:focus-visible { outline: 2px solid var(--akcent); outline-offset: 1px; }
.wo-kolejnosc button:disabled { opacity: .3; cursor: default; }

/* Świeżo dodany wiersz podświetla się na chwilę - zamiast skoku ekranu. */
@keyframes wiersz-nowy {
    from { background: var(--sukces-tlo); }
    to   { background: transparent; }
}
.wiersz-oferty.nowy { animation: wiersz-nowy 1.6s ease-out; border-radius: var(--promien); }
@media (prefers-reduced-motion: reduce) { .wiersz-oferty.nowy { animation: none; } }

/* Pasek dodawania. Przerywana ramka mówi „tu się dopisuje", a nie „tu stoi
   wiersz oferty" - inaczej pusty pasek czytałby się jak kolejna pozycja. */
.dodaj-pasek { position: relative; margin-top: 14px; padding: 14px; background: var(--tlo);
               border: 1px dashed var(--linia-mocna); border-radius: var(--promien); }
.dodaj-pasek label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.dodaj-pasek input[type="search"] { width: 100%; padding: 10px 12px; font: inherit;
                                    border: 1px solid var(--linia-mocna); border-radius: 8px;
                                    background: var(--karta); }
.dodaj-pasek input[type="search"]:focus { outline: none; border-color: var(--akcent);
                                          box-shadow: var(--focus); }
.dodaj-pasek input[type="search"]:disabled { background: var(--tlo); color: var(--przygaszony);
                                             cursor: not-allowed; }
.dodaj-skrot { font-size: 11.5px; color: var(--przygaszony); margin-top: 8px; }
kbd { background: var(--karta); border: 1px solid var(--linia-mocna); border-bottom-width: 2px;
      border-radius: 5px; padding: 1px 6px; font: inherit; font-size: 11px; }

/* Lista trafień. Leży NAD treścią (position:absolute), bo inaczej rozpychałaby
   stronę przy każdej wpisanej literze. */
.cennik-podpowiedzi { position: absolute; left: 14px; right: 14px; top: calc(100% - 10px); z-index: 20;
                      background: var(--karta); border: 1px solid var(--linia-mocna); border-radius: 10px;
                      box-shadow: 0 8px 24px rgba(29,43,42,.14); overflow: hidden; }
.cennik-podpowiedz { display: grid; grid-template-columns: 86px minmax(0,1fr) auto; gap: 12px;
                     align-items: baseline; padding: 9px 14px; cursor: pointer;
                     border-bottom: 1px solid var(--linia); }
.cennik-podpowiedz:last-child { border-bottom: none; }
.cennik-podpowiedz.wybrana { background: var(--sukces-tlo); }
.cennik-podpowiedz code { font-size: 12px; color: var(--przygaszony); }
.cp-nazwa { font-weight: 600; font-size: 14px; }
.cp-opis { display: block; font-size: 12px; color: var(--przygaszony); font-weight: 400;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-cena { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cp-juz { font-size: 11px; font-weight: 700; background: var(--tlo); color: var(--akcent-ciemny);
          border-radius: 99px; padding: 1px 8px; margin-left: 6px; }
.cennik-brak { padding: 12px 14px; font-size: 13.5px; color: var(--przygaszony); }

/* Zwinięty cennik. Do 1.50.0 kilkadziesiąt kafelków leżało na ekranie zawsze -
   rozwijamy je wtedy, gdy trzeba PRZEJRZEĆ katalog, a nie dopisać znaną pozycję. */
.cennik-zwijka { margin-top: 14px; }
.cennik-zwijka > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--akcent);
                           list-style: none; padding: 6px 0; }
.cennik-zwijka > summary::-webkit-details-marker { display: none; }
.cennik-zwijka > summary::before { content: "\25B8\00A0"; }
.cennik-zwijka[open] > summary::before { content: "\25BE\00A0"; }
.cennik-zwijka > summary:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px;
                                         border-radius: 4px; }

.dodatek-szczegoly { display: none; padding: 0 14px 12px 43px; }
.dodatek.rozwiniety .dodatek-szczegoly { display: flex; gap: 14px; align-items: flex-start; }
.dodatek-grafika { width: 54px; height: 54px; border-radius: 8px; border: 1px solid var(--linia);
                   background: var(--tlo); display: grid; place-items: center; flex: none; overflow: hidden; }
.dodatek-grafika img { max-width: 100%; max-height: 100%; display: block; }
.mies-znacznik { font-size: 11px; font-weight: 600; background: #f0eaf8; color: #5d3f8f;
                 border-radius: 99px; padding: 1px 8px; white-space: nowrap; }
.gratis-znacznik { font-size: 11px; font-weight: 700; background: var(--sukces-tlo); color: var(--sukces);
                   border-radius: 99px; padding: 1px 8px; white-space: nowrap; }
.przekreslone { text-decoration: line-through; color: var(--przygaszony); font-weight: 500; margin-right: 6px; }
.gratis-przelacz { font-size: 11.5px; font-weight: 600; border: 1px solid var(--linia); background: var(--karta);
                   border-radius: 99px; padding: 2px 10px; color: var(--przygaszony); cursor: pointer; }
.gratis-przelacz:hover { border-color: var(--sukces); color: var(--sukces); }
.gratis-przelacz.wlaczony { background: var(--sukces-tlo); border-color: var(--sukces); color: var(--sukces); }
.rozwin { background: none; border: none; padding: 4px; color: var(--przygaszony); font-size: 12px;
          cursor: pointer; font-weight: 400; }
.link-wewn { font-size: 12px; color: var(--ostrzezenie); background: var(--ostrzezenie-tlo);
             border-radius: 6px; padding: 4px 8px; display: inline-block; }

/* Podsumowanie kreatora */
.podsumowanie { position: sticky; top: 20px; }
.pods-wiersz { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0;
               font-size: 14px; border-bottom: 1px dashed var(--linia); }
.pods-wiersz:last-of-type { border-bottom: none; }
.pods-wiersz .kwota { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.pods-suma { border-top: 2px solid var(--atrament); margin-top: 8px; padding-top: 10px; }
.pods-suma .pods-wiersz { border-bottom: none; padding: 3px 0; }
.pods-suma .razem { font-size: 17px; font-weight: 700; }
.ustepstwa { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--sukces-tlo);
             color: var(--sukces); font-size: 12.5px; }
.ustepstwa.przekroczony { background: var(--blad-tlo); color: var(--blad); }
.ustepstwa .wiersz { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0;
                     font-variant-numeric: tabular-nums; }
.ustepstwa .wiersz.suma { border-top: 1px solid currentColor; margin-top: 4px; padding-top: 5px; font-weight: 700; }
.ustepstwa .pasek { height: 5px; border-radius: 99px; background: rgba(25,108,67,.18);
                    margin-top: 7px; overflow: hidden; }
.ustepstwa .pasek span { display: block; height: 100%; background: var(--sukces); border-radius: 99px; }
.ustepstwa.przekroczony .pasek { background: rgba(163,53,44,.18); }
.ustepstwa.przekroczony .pasek span { background: var(--blad); }
.pole-rabat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px;
              padding: 10px 14px; background: var(--tlo); border: 1px solid var(--linia);
              border-radius: var(--promien); font-size: 13.5px; }
.pole-rabat input { width: 110px; border: 1px solid var(--linia); border-radius: 6px; padding: 6px 9px;
                    font: inherit; text-align: right; font-variant-numeric: tabular-nums; }

/* Struktura składanego dokumentu */
.sklejka { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin: 14px 0 4px; }
.sklejka-czesc { flex: 1 1 190px; border: 1px solid var(--linia); border-radius: var(--promien);
                 background: var(--karta); padding: 12px 14px; font-size: 13px; }
/* Część generowana wygląda jak pozostałe - o tym, co jest czym, mówi
   plakietka .czesc-zrodlo, a nie wyróżnienie kafelka. Podświetlenie
   czytało się jak „aktualny krok kreatora". */
.sklejka-czesc.generowana { border-color: var(--linia); background: var(--karta); }
.sklejka-czesc.ostrzega { border-color: var(--ostrzezenie); background: var(--ostrzezenie-tlo); }
.sklejka-czesc .naglowek-czesci { font-weight: 700; margin-bottom: 3px; }
.sklejka-strzalka { align-self: center; color: var(--przygaszony); font-size: 18px; flex: none; }

/* Lista ofert */
.wersja-znak { font-size: 11.5px; font-weight: 700; background: var(--tlo); border: 1px solid var(--linia);
               border-radius: 6px; padding: 1px 7px; }
.liczbowo { font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-robocza       { background: #eef0ee; color: #4c5a58; }
.s-wyslana       { background: #e2f1ee; color: var(--akcent-ciemny); }
.s-zaakceptowana { background: var(--sukces-tlo); color: var(--sukces); }
.s-odrzucona     { background: var(--blad-tlo); color: var(--blad); }
.s-zastapiona    { background: #ececec; color: #777; }
/* 1.34.0: wygrana nie jest statusem dokumentu (ten zostaje „zaakceptowana"),
   tylko wynikiem zapytania - stąd osobna odznaka obok statusu. */
.s-wygrana       { background: #fdf3e0; color: #9a6208; font-weight: 700; }

/* 1.56.0: stan zadania cron. Kolory z konwencji systemu, nie z wyobraźni:
   zielony = zrobione i w porządku, bursztyn = CZEKA NA CZŁOWIEKA (bo cisza
   crona to rzecz do naprawienia ręcznie, w panelu hostingu), szary = nie ma
   jeszcze o czym mówić. Czerwieni tu nie ma świadomie — brak śladu zaraz po
   aktualizacji nie jest awarią, tylko jeszcze niewiedzą. */
.s-cron-ok    { background: var(--sukces-tlo); color: var(--sukces); }
.s-cron-cisza { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie); font-weight: 700; }
.s-cron-brak  { background: #eef0ee; color: #4c5a58; }

/* Wiersz crontab do skopiowania. `user-select: all` zaznacza całość jednym
   kliknięciem — bez tego trafienie myszą w koniec ścieżki jest ćwiczeniem
   z celności, a połowicznie skopiowany wpis crona nie daje żadnego objawu
   poza tym, że zadanie nie chodzi. */
.wiersz-crona { display: block; user-select: all; font-size: 12.5px;
                background: var(--tlo); border: 1px solid var(--linia);
                border-radius: 6px; padding: 7px 10px; margin-top: 6px;
                white-space: pre-wrap; word-break: break-all; line-height: 1.5; }
.mini-grafika { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--linia);
                background: var(--tlo); display: grid; place-items: center; overflow: hidden; }
.mini-grafika img { max-width: 100%; max-height: 100%; display: block; }

@media (max-width: 900px) {
    .kreator { grid-template-columns: 1fr; }
    .podsumowanie { position: static; }
}

/* 1.14.0: etykiety części dokumentu — żeby schemat nie czytał się jak kroki */
.czesc-zrodlo {
    display: inline-block; font-size: 11px; font-weight: 600;
    background: var(--tlo); color: var(--przygaszony);
    border: 1px solid var(--linia); border-radius: 99px;
    padding: 1px 8px; margin-right: 4px;
}
.czesc-zrodlo.generowana {
    background: #e6efff; color: #1c4fd0; border-color: #bfd4ff;
}

/* 1.14.0: panel z ofertami ogólnymi linii (lista Ofert) */
.ogolne-panel { display: none; margin: 0 0 18px; }
.ogolne-panel.otwarty { display: block; }


/* 1.14.3: przycisk-kasownik w wierszu tabeli - ma wyglądać jak odnośnik,
   żeby nie krzyczał z kolumny akcji, ale musi być <button> w formularzu. */
form.usun-oferte { display: inline; }
button.jak-link {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: var(--akcent); cursor: pointer; text-decoration: underline;
}
button.jak-link:hover { text-decoration: none; }
button.jak-link.blad { color: var(--blad); }

/* 1.14.3: starsze wersje oferty - w DOM są zawsze, chowa je CSS, a JS
   przestawia display na table-row. Lekkie tło i wcięcie mają od razu
   pokazywać, że to gałąź pod numerem, a nie osobna oferta. */
tr.wersja-stara { display: none; background: #fbfcfb; }
tr.wersja-stara td:first-child { padding-left: 22px; }
.galaz { color: var(--przygaszony); margin-right: 4px; }
a.wersja-znak { text-decoration: none; }
a.wersja-znak:hover { border-color: var(--akcent); color: var(--akcent); }
button.rozwin { font-size: 12px; margin-top: 3px; text-decoration: none; }
button.rozwin:hover { text-decoration: underline; }

/* =====================================================================
   1.14.3: Skaner serwisu klienta
   Widok jest po grupach - jedna karta na wzorzec adresów. Flaga
   sprzeczności ma być widoczna z drugiego końca pokoju, bo to ona
   ratuje przed pomyłką o kilkanaście tysięcy złotych na grupie.
   ===================================================================== */
.alert-ostrzezenie { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie);
                     padding: 10px 14px; border-radius: var(--promien); }

.skan-grupa { padding-bottom: 12px; }
.skan-grupa.pominieta { opacity: .5; }

.skan-naglowek { display: flex; flex-wrap: wrap; gap: 6px 14px;
                 justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.skan-wzorzec { font-size: 13.5px; font-weight: 700; background: var(--tlo);
                border: 1px solid var(--linia); border-radius: 6px; padding: 2px 8px; }
.skan-typ { font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px;
            color: var(--przygaszony); margin-left: 6px; }

.skan-flaga { background: var(--blad-tlo); color: var(--blad); font-weight: 600;
              padding: 10px 14px; border-radius: var(--promien); margin-bottom: 10px; }
.skan-uwaga { background: var(--tlo); color: var(--przygaszony); font-size: 13px;
              padding: 8px 12px; border-radius: var(--promien); margin-bottom: 8px; }

.skan-pozycje { margin: 0; }
.skan-pozycje td { vertical-align: middle; }
.skan-pozycje select, .skan-pozycje input { margin: 0; }

.skan-akcje { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
              margin-top: 10px; font-size: 13px; }
.skan-pomin { display: flex; gap: 6px; align-items: center; cursor: pointer; color: var(--blad); }
.skan-adresy summary { cursor: pointer; color: var(--akcent); }
.skan-adresy ul { max-height: 220px; overflow: auto; margin: 8px 0 0; padding-left: 18px;
                  font-size: 12.5px; }

.skan-suma { display: flex; justify-content: space-between; align-items: center;
             gap: 16px; margin-top: 16px; }
.skan-kwota { font-size: 22px; font-weight: 700; color: var(--akcent-ciemny);
              font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 720px) {
    .skan-suma { flex-direction: column; align-items: flex-start; }
}

/* 1.14.3b: drzewo struktury, ikona podglądu, wcięcia grup ------------- */

.skan-podglad { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
                color: var(--przygaszony); text-decoration: none; vertical-align: middle; }
.skan-podglad:hover { color: var(--akcent); }
.skan-podglad svg { width: 14px; height: 14px; }

.skan-drzewo { margin: 0; padding-left: 22px; }
.skan-drzewo li { margin: 3px 0; line-height: 1.5; }
.skan-drzewo.poziom-0 { padding-left: 20px; }
.skan-drzewo.poziom-1, .skan-drzewo.poziom-2 { margin-top: 3px; }
.skan-drzewo a { text-decoration: none; }
.skan-drzewo a:hover { text-decoration: underline; }
.skan-drzewo-typ { font-size: 12px; color: var(--przygaszony); margin-left: 8px; }
.skan-drzewo-wiecej { color: var(--przygaszony); font-size: 12.5px; list-style: none;
                      margin-left: -14px !important; }

.skan-zmieniony { font-size: 11.5px; color: var(--ostrzezenie); background: var(--ostrzezenie-tlo);
                  border-radius: 5px; padding: 1px 6px; margin-left: 6px; white-space: nowrap; }

.skan-drzewo-pominiete { font-size: 11.5px; color: var(--blad); background: var(--blad-tlo);
                         border-radius: 5px; padding: 1px 6px; margin-left: 6px; }
.skan-drzewo li:has(> .skan-drzewo-pominiete) > a { text-decoration: line-through; }

/* Wnioski z analizy - to nie jest wycena, tylko sygnał o kształcie
   nowego serwisu. Dlatego wyglądają inaczej niż flagi cenowe. */
.skan-wniosek { padding: 11px 14px; border-radius: var(--promien); margin-bottom: 8px;
                line-height: 1.55; border-left: 3px solid var(--linia); background: var(--tlo); }
.skan-wniosek.waga-mocny { border-left-color: var(--akcent); background: #eef5f3; }
.skan-wniosek.waga-uwaga { border-left-color: var(--ostrzezenie); background: var(--ostrzezenie-tlo);
                           color: var(--ostrzezenie); }
.skan-wniosek-kod { font-weight: 700; margin-right: 6px; }

/* 1.14.3c: nakładka postępu skanu -------------------------------------
   Skan pełny trwa dziesiątki sekund. Kręcące się kółko przeglądarki nie
   jest komunikatem - użytkownik ma widzieć, co się dzieje i ile zostało. */
.skan-nakladka { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center;
                 background: rgba(18, 24, 23, .55); backdrop-filter: blur(2px); padding: 20px; }
.skan-nakladka-karta { background: var(--karta); border-radius: var(--promien);
                       box-shadow: 0 18px 50px rgba(0,0,0,.28); padding: 28px 30px;
                       max-width: 460px; width: 100%; text-align: center; }
.skan-nakladka-karta h2 { margin: 12px 0 4px; font-size: 18px; }
.skan-nakladka-etykieta { margin: 0 0 14px; color: var(--przygaszony); min-height: 20px; }
.skan-nakladka-stopka { margin: 14px 0 0; color: var(--przygaszony); line-height: 1.5; }

.skan-spinner { width: 34px; height: 34px; margin: 0 auto; border-radius: 50%;
                border: 3px solid var(--linia); border-top-color: var(--akcent);
                animation: skan-obrot .9s linear infinite; }
@keyframes skan-obrot { to { transform: rotate(360deg); } }

.skan-pasek { height: 8px; border-radius: 99px; background: var(--tlo); overflow: hidden; }
.skan-pasek-wypelnienie { height: 100%; width: 3%; border-radius: 99px; background: var(--akcent);
                          transition: width .35s ease; }
/* Faza zbierania adresów: nie znamy sumy, więc pasek ma tylko pokazywać ruch. */
.skan-pasek-wypelnienie.nieokreslony { width: 35%; animation: skan-suwak 1.3s ease-in-out infinite; }
@keyframes skan-suwak { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

@media (prefers-reduced-motion: reduce) {
    .skan-spinner { animation-duration: 2.4s; }
    .skan-pasek-wypelnienie.nieokreslony { animation: none; width: 100%; opacity: .45; }
}

/* 1.14.3d: rozwijane gałęzie drzewa struktury.
   Poziom pierwszy w całości, niżej jedno dziecko i reszta pod strzałką -
   drzewo zostaje czytelne, a typy da się sprawdzić do końca. */
.skan-drzewo-ukryty { display: none; }
.skan-rozwin-galaz { font-size: 12.5px; color: var(--przygaszony); text-decoration: none; }
.skan-rozwin-galaz:hover { color: var(--akcent); text-decoration: underline; }
.skan-strzalka { display: inline-block; width: 10px; font-size: 10px; }

/* Przełącznik gałęzi stoi POZA <ol>, żeby nie zabierał numeru w liście. */
.skan-rozwin-galaz { display: inline-block; margin: 2px 0 2px 22px; }
.skan-drzewo-ponad { margin: 2px 0 2px 22px; color: var(--przygaszony); font-size: 12.5px; }
.skan-drzewo-naglowek { display: flex; flex-wrap: wrap; gap: 10px;
                        align-items: center; justify-content: space-between; }

/* 1.14.3e: uwagi jako bloki tematyczne ---------------------------------
   Ramka uwagi znaczy JEDEN temat. Zdania o tej samej rzeczy - komunikat,
   przykłady adresów, doprecyzowanie pomiaru - stoją w niej razem, oddzielone
   odstępem. Wcześniej każde zdanie było osobną ramką i trzeba było zgadywać,
   czy to nowy przypadek, czy ciąg dalszy poprzedniego. */
.skan-uwaga { display: flex; gap: 8px; align-items: baseline; }
.skan-uwaga-znak { flex: none; line-height: 1.5; }
.skan-uwaga-tresc { flex: 1; min-width: 0; }
.skan-uwaga-tresc p { margin: 0; line-height: 1.5; }
/* Ciąg dalszy tej samej myśli: odstęp większy niż interlinia, mniejszy niż
   odstęp między ramkami - stąd wiadomo, że to dopowiedzenie, nie nowy temat. */
.skan-uwaga-tresc p + p { margin-top: 7px; }

/* 1.14.3b: stan zatwierdzenia analizy (S-19) ---------------------------
   Trzy stany, trzy kolory. „Niesprawdzona" jest neutralna, nie alarmowa -
   to normalny stan świeżego skanu, a nie błąd. */
.skan-zatwierdzenie { display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
                      justify-content: space-between; padding: 12px 14px; margin-bottom: 14px;
                      border-radius: var(--promien); border-left: 3px solid var(--linia);
                      background: var(--tlo); line-height: 1.5; }
.skan-zatwierdzenie-tresc { flex: 1; min-width: 260px; }
.skan-zatwierdzenie.stan-aktualne { border-left-color: var(--akcent); background: #eef5f3; }
.skan-zatwierdzenie.stan-nieaktualne { border-left-color: var(--ostrzezenie);
                                       background: var(--ostrzezenie-tlo); color: var(--ostrzezenie); }
.skan-zatwierdzenie button { margin: 0; white-space: nowrap; }

/* Ten sam stan na liście skanów - w skrócie, bo tam liczy się przelotność. */
.skan-znacznik { display: inline-block; font-size: 12px; line-height: 1.4; padding: 2px 8px;
                 border-radius: 99px; background: var(--tlo); color: var(--przygaszony);
                 white-space: nowrap; }
.skan-znacznik.ok { background: #eef5f3; color: var(--akcent); }
.skan-znacznik.uwaga { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie); }

/* 1.14.3c: podsumowanie WooCommerce (S-20) -----------------------------
   Sekcja stoi NAD podsumowaniem cennikowym i mówi, czego w wycenie NIE ma.
   Wygląda spokojnie, bo to informacja o skali, nie ostrzeżenie. */
.skan-sklep-tabela { margin: 0; max-width: 420px; }
.skan-sklep-tabela td { padding: 6px 10px; }
.skan-sklep-tabela .liczbowo { text-align: right; white-space: nowrap; }
.skan-sklep-razem td { border-top: 1px solid var(--linia); }

/* Usuwanie skanu - dyskretnie, bo to nie jest czynność codzienna, ale ma
   być widoczne. Nigdy obok „Zapisz korektę": sąsiedztwo zapisu i kasowania
   na jednej belce to proszenie się o pomyłkę. */
.skan-usun { display: inline; margin: 0 0 0 10px; }
.skan-usun-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit;
                 color: var(--przygaszony); cursor: pointer; text-decoration: underline; }
.skan-usun-btn:hover { color: var(--blad); }
.skan-usun-karta { float: right; margin: -34px 0 0; }
@media (max-width: 640px) { .skan-usun-karta { float: none; margin: 0 0 12px; } }

/* Licznik znaków pod dopiskiem handlowca. Milczy, dopóki do limitu daleko -
   pojawia się dopiero przy 200 znakach zapasu. `maxlength` bez takiego
   sygnału blokuje pisanie bez słowa wyjaśnienia i wygląda jak awaria. */
.dopisek-licznik { margin-top: 4px; color: var(--przygaszony); min-height: 15px; }
.dopisek-licznik.blisko { color: var(--ostrzezenie); }

/* 1.14.4: pasek pilnowania sesji ---------------------------------------
   Na dole, nie na górze: góra strony jest miejscem pracy (nagłówek, akcje),
   a pasek ma przypominać, nie zasłaniać. Pokazuje się dopiero na ostatnie
   minuty - odliczanie przez całą godzinę byłoby tylko szumem. */
.sesja-pasek { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
               display: flex; gap: 14px; align-items: center; justify-content: center;
               flex-wrap: wrap; padding: 12px 16px; line-height: 1.4;
               background: var(--ostrzezenie-tlo); color: var(--ostrzezenie);
               border-top: 2px solid var(--ostrzezenie);
               box-shadow: 0 -2px 10px rgba(29, 43, 42, .10); }
.sesja-pasek[hidden] { display: none; }
.sesja-pasek strong { font-variant-numeric: tabular-nums; }
.sesja-pasek button { margin: 0; white-space: nowrap; padding: 6px 14px;
                      background: var(--ostrzezenie); color: #fff; border: 0;
                      border-radius: var(--promien); font: inherit; cursor: pointer; }
.sesja-pasek button:hover { filter: brightness(1.1); }
.sesja-pasek.koniec { background: var(--blad-tlo); color: var(--blad);
                      border-top-color: var(--blad); }

/* 1.14.4: edytor warunków handlowych (pakiet i oferta) ------------------
   Tabela rat jest wąska celowo: procent to najwyżej trzy cyfry, a opis
   i tak trafia na ofertę w jednej linii. */
.warunki-raty { width: 100%; max-width: 620px; margin: 0 0 10px; border-collapse: collapse; }
.warunki-raty th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--przygaszony);
                   padding: 0 8px 6px 0; }
.warunki-raty td { padding: 0 8px 6px 0; vertical-align: middle; }
.warunki-raty input { width: 100%; margin: 0; }
.rata-usun { background: none; border: 0; padding: 4px 6px; margin: 0; cursor: pointer;
             font-size: 18px; line-height: 1; color: var(--przygaszony); border-radius: 6px; }
.rata-usun:hover { color: var(--blad); background: var(--blad-tlo); }
.warunki-stopka { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.warunki-stopka button { margin: 0; }
/* Suma procentów: milczy, gdy się zgadza - alarmuje tylko wtedy, gdy nie. */
.warunki-suma { font-size: 13px; color: var(--przygaszony); }
.warunki-suma.zle { color: var(--blad); font-weight: 600; }
.warunki [data-warunki-raty][hidden] { display: none; }

/* Warunki przeniesione z pakietu, pokazane w kreatorze ofert. */
.warunki-podglad { background: var(--tlo); border-radius: var(--promien); padding: 12px 14px;
                   line-height: 1.55; }
.warunki-podglad table { border-collapse: collapse; margin: 6px 0 0; }
.warunki-podglad td { padding: 2px 14px 2px 0; }
.warunki-podglad td.kwota { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 1.14.4: wskaźnik „robi się" na przycisku formularza ------------------
   Wirujący pierścień w kolorze tekstu przycisku - działa i na przycisku
   głównym (biały tekst), i na drugorzędnym, bez osobnych wariantów. */
.wirujacy { display: inline-block; width: 13px; height: 13px; margin-right: 8px;
            vertical-align: -2px; border-radius: 50%; border: 2px solid currentColor;
            border-top-color: transparent; animation: wiruj .7s linear infinite; }
@keyframes wiruj { to { transform: rotate(360deg); } }
/* Wyłączony przycisk w trakcie pracy: przygaszony, ale nadal czytelny -
   ma informować, że coś trwa, a nie wyglądać na zepsuty. */
button[data-ladowanie="1"] { opacity: .75; cursor: progress; }
/* Kto nie chce animacji, ten jej nie dostaje - zostaje sama blokada. */
@media (prefers-reduced-motion: reduce) { .wirujacy { animation: none; } }

/* =====================================================================
   OKNO POTWIERDZENIA (1.14.15)
   Zastępuje systemowy confirm(): da się je opisać, rozbić na zdania
   i odróżnić pytanie groźne od zwykłego - czego przeglądarkowe okno
   nie potrafi.
   ===================================================================== */
.modal-tlo {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(24, 28, 27, .48);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.modal-tlo[hidden] { display: none; }
.modal {
    background: #fff; border-radius: 10px; padding: 22px 24px 18px;
    max-width: 34em; width: 100%;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.modal h2 { margin: 0 0 10px; font-size: 17px; }
.modal .modal-tresc {
    margin: 0; font-size: 14.5px; line-height: 1.55; color: #3a4442;
    white-space: pre-line;          /* teksty z \n zachowują podział */
}
.modal-przyciski {
    display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px;
}
.modal-przyciski button { min-width: 108px; }
/* Pytanie nieodwracalne ma wyglądać inaczej niż zwykłe.
   KOLOR TEKSTU JAWNIE, i to nie jest ozdoba: niżej w tym pliku stoi
   `button.grozny { background: var(--karta); color: var(--blad) }` - wariant
   dla przycisków NA STRONIE, gdzie groźny znaczy „czerwony napis na białym".
   Tamta reguła jest późniejsza, więc wygrywała kolorem tekstu, a tło brało
   się stąd. Wychodził ciemnoczerwony napis na czerwonym tle - przycisk
   „Usuń" w oknie potwierdzenia był praktycznie nie do odczytania (1.50.0). */
.modal-przyciski button.grozny { background: #b3261e; border-color: #b3261e; color: #fff; }
.modal-przyciski button.grozny:hover { background: #8f1e18; border-color: #8f1e18; color: #fff; }

@media (max-width: 520px) {
    .modal-przyciski { flex-direction: column-reverse; }
    .modal-przyciski button { width: 100%; }
}

/* =====================================================================
   EKRAN „REGUŁY AGENTA" (1.19.0)
   Blok z treścią reguły to CYTAT z promptu, nie tekst do czytania ciurkiem.
   Stała szerokość znaku i zachowane łamanie wierszy - inaczej listy
   punktowane i tabelki z promptu rozjeżdżają się i wyglądają na coś innego
   niż to, co naprawdę dostaje model.
   ===================================================================== */
.regula-tresc {
    margin: 10px 0 0;
    max-height: 460px;
    overflow: auto;
    background: var(--tlo);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    padding: 12px 14px;
    font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    /* Długie linie zawijamy. Poziomy pasek przewijania w cytacie promptu
       znaczy, że połowa zdania jest niewidoczna - a to jest ekran do czytania. */
    white-space: pre-wrap;
    word-break: break-word;
}

/* 1.21.1: pasek zapisu powtórzony przy każdej sekcji ustawień.
   Jeden przycisk na dole długiego formularza wygląda, jakby należał
   do ostatniej sekcji - a nie do całej strony. */
.zapis-pasek { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
               margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linia); }
.zapis-pasek button { margin: 0; }

/* 1.28.5: formularz nowego wątku - podpowiedzi e-maila i pole wymagające decyzji */
.podpowiedzi { border: 1px solid var(--linia); border-radius: 6px; background: var(--karta); margin-top: 2px;
               max-height: 240px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.podpowiedzi .podpowiedz { display: block; width: 100%; text-align: left; background: none; border: 0;
               border-bottom: 1px solid var(--linia); padding: 7px 10px; cursor: pointer; color: inherit; font: inherit; }
.podpowiedzi .podpowiedz:hover, .podpowiedzi .podpowiedz:focus { background: var(--tlo); }
select.podswietlone { outline: 2px solid var(--ostrzezenie); outline-offset: 1px; }

/* 1.28.8/1.28.9: formularz pozycji cennika - pole z błędem, kod i seria kodów */
.pole-blad { outline: 2px solid var(--blad); outline-offset: 1px; }
/* Kolumny karty mają różną wysokość - bez tego pola w niższej kolumnie
   „rozjeżdżały się", bo siatka .pole rozciągała wiersze na całą wysokość. */
.karta-pozycji .pole { align-content: start; }
.kod-wiersz { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.kod-wiersz .pole { margin-bottom: 0; }
.kod-stan { margin: 6px 0 0; min-height: 1.2em; }
.kod-stan:empty { min-height: 0; margin: 0; }
.kod-opis { margin: 4px 0 14px; }
.kod-uzyj { font: inherit; font-size: 12.5px; padding: 2px 8px; margin: 0 0 0 4px;
    border: 1px solid var(--linia); border-radius: 999px; background: var(--karta); color: var(--akcent); cursor: pointer; }
.kod-uzyj:hover { border-color: var(--akcent); }
@media (max-width: 700px) { .kod-wiersz { grid-template-columns: 1fr; } .kod-wiersz .pole { margin-bottom: 10px; } }

/* 1.29.4: wybór ofert w notatce */
.oferty-wybor { display: grid; gap: 6px; }
.oferta-wybor {
    display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 10px;
    padding: 8px 12px; border: 1px solid var(--linia); border-radius: var(--promien);
    background: var(--karta); cursor: pointer; font-weight: normal;
}
.oferta-wybor:hover { border-color: var(--akcent); }
.oferta-wybor:has(input:checked) { border-color: var(--akcent); background: #f1f8f6; }
.oferta-wybor-numer { font-weight: 600; white-space: nowrap; }
.oferta-wybor-opis { color: var(--przygaszony); font-size: 13.5px; min-width: 0; }
@media (max-width: 640px) {
    .oferta-wybor { grid-template-columns: auto 1fr; }
    .oferta-wybor > :nth-child(n+3) { grid-column: 2; }
}
.oferty-notatki { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.oferta-znacznik {
    display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 1px 8px;
    border: 1px solid var(--linia); border-radius: 99px; background: var(--karta); white-space: nowrap;
}
a.oferta-znacznik:hover { border-color: var(--akcent); text-decoration: none; }

/* =====================================================================
   1.34.0: WARSTWA KOMPONENTÓW — jedno miejsce prawdy dla kontrolek,
   przycisków, tabel z sortowaniem, paska narzędzi i stronicowania.
   Wzornik: Konfiguracja → Wzorce UI (panel/wzorce.php).

   CO SIĘ ZMIENIA WSZĘDZIE (i tak ma być - o to chodzi w ujednoliceniu):
     - pola w .pole (każdy typ: text, mail, tel, hasło, liczba, data,
       szukaj, plik) oraz select i textarea mają jedną wysokość 40 px,
       jedną obwódkę i jeden stan skupienia. Do 1.33.0 input[type=search]
       i input[type=tel] nie miały ŻADNEGO stylu - stąd wrażenie, że
       wyszukiwarka jest „surowa";
     - <button> ma tę samą wysokość co pole obok niego (było ~37 px,
       jest 40 px) - dzięki temu przycisk „Szukaj" przestaje odstawać
       od pola, przy którym stoi.
   CO JEST DOBROWOLNE: pasek narzędzi, sortowane nagłówki, stronicowanie
   i warianty przycisków - działają dopiero, gdy ekran użyje klasy.
   Dlatego to warstwa DOKŁADANA, a nie przepisanie arkusza: przepisanie
   zmieniłoby naraz każdy ekran, a tego nie da się sprawdzić jednym okiem.
   ===================================================================== */

:root {
    --kontrolka-h: 40px;        /* jedna wysokość: input, select, przycisk */
    --kontrolka-h-maly: 32px;
    --kontrolka-pad: 9px 12px;
    --linia-mocna: #cfd6d3;     /* obwódka kontrolki - ciemniejsza niż linia tabeli */
    --focus: 0 0 0 3px rgba(15, 107, 98, .18);
}

/* Pola STOJĄCE SAMOTNIE, poza .pole (np. wyszukiwarka dodatków w kreatorze
   oferty). Do 1.33.0 nie miały żadnego stylu i wyglądały jak wklejone
   z innego programu. Reguła jest celowo słabsza od .pole i od klas
   ekranów - jej zadaniem jest tylko podnieść podłogę, nie nadpisywać
   niczego, co ekran ustawił sam. */
.glowna input[type=text], .glowna input[type=email], .glowna input[type=search],
.glowna input[type=tel], .glowna input[type=url], .glowna input[type=number],
.glowna input[type=date], .glowna select {
    min-height: var(--kontrolka-h);
    border: 1px solid var(--linia-mocna);
    border-radius: 8px;
    padding: var(--kontrolka-pad);
    font: inherit;
    background-color: #fff;
    box-sizing: border-box;
}
.glowna input[type=text]:focus, .glowna input[type=email]:focus, .glowna input[type=search]:focus,
.glowna input[type=tel]:focus, .glowna input[type=url]:focus, .glowna input[type=number]:focus,
.glowna input[type=date]:focus, .glowna select:focus {
    outline: none; border-color: var(--akcent); box-shadow: var(--focus);
}

/* ---------- KONTROLKI: wszystkie typy pól wyglądają tak samo ---------- */
.pole input[type=text], .pole input[type=password], .pole input[type=email],
.pole input[type=number], .pole input[type=tel], .pole input[type=url],
.pole input[type=search], .pole input[type=date], .pole input[type=time],
.pole input[type=datetime-local], .pole input[type=file], .pole select,
.pole textarea,
input.kontrolka, select.kontrolka, textarea.kontrolka {
    width: 100%;
    min-height: var(--kontrolka-h);
    border: 1px solid var(--linia-mocna);
    border-radius: 8px;
    padding: var(--kontrolka-pad);
    font: inherit;
    color: var(--atrament);
    background: #fff;
    box-sizing: border-box;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.pole textarea, textarea.kontrolka { min-height: 88px; resize: vertical; margin-top: 0; line-height: 1.5; }

/* Select dostaje własną strzałkę - natywna różni się w każdej przeglądarce
   i to ona sprawiała, że selecty „nie pasowały" do inputów obok. */
.pole select, select.kontrolka {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364716f' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    padding-right: 34px;
}
/* 1.60.0: pole pliku wygląda tak samo WSZĘDZIE — także poza .pole (ekrany
   modułów, formularze w tabelach). Do 1.59.0 styl łapał tylko pola w .pole
   i np. wgrywanie wzorów umów pokazywało goły przycisk przeglądarki. */
input[type=file] {
    font: inherit; font-size: 14px; color: var(--przygaszony);
    max-width: 100%; min-height: var(--kontrolka-h, 38px);
    border: 1px solid var(--linia-mocna); border-radius: 8px; background: #fff;
    padding: 5px 6px; box-sizing: border-box; align-content: center;
}
.pole input[type=file], input.kontrolka[type=file] { padding: 5px 6px; align-content: center; }
input[type=file]::file-selector-button {
    font: inherit; font-weight: 600; font-size: 13px; margin-right: 10px;
    padding: 5px 12px; border: 1px solid var(--linia-mocna); border-radius: 6px;
    background: var(--karta); color: var(--atrament); cursor: pointer;
}
input[type=file]::file-selector-button:hover { border-color: var(--przygaszony); background: #fbfcfb; }
input[type=file]:hover { border-color: var(--przygaszony); }
.pole input:hover, .pole select:hover, .pole textarea:hover,
.kontrolka:hover { border-color: var(--przygaszony); }
.pole input:focus, .pole select:focus, .pole textarea:focus,
.kontrolka:focus {
    outline: none;
    border-color: var(--akcent);
    box-shadow: var(--focus);
}
.pole input::placeholder, .pole textarea::placeholder, .kontrolka::placeholder { color: #9aa5a2; }
.pole input:disabled, .pole select:disabled, .pole textarea:disabled,
.kontrolka:disabled { background: var(--tlo); color: var(--przygaszony); cursor: not-allowed; }
.pole input[readonly], .kontrolka[readonly] { background: var(--tlo); }
.pole input[aria-invalid="true"], .pole select[aria-invalid="true"], .pole textarea[aria-invalid="true"] {
    border-color: var(--blad);
}
.pole .podpowiedz { color: var(--przygaszony); font-size: 12.5px; }
.pole.wymagane > label::after { content: " *"; color: var(--blad); }

/* 1.48.0: `hidden` musi wygrać z `display` ustawianym niżej dla przycisków.
   Reguła `.przycisk, button { display: inline-flex }` jest mocniejsza niż
   `[hidden]` z arkusza przeglądarki, więc ukryty przycisk zostawał na ekranie -
   widać to było na „koszt zakupu…" w kreatorze, który nie znikał po rozwinięciu
   pola. Dotyczy to każdego <button hidden> w panelu, stąd reguła globalna. */
[hidden] { display: none !important; }

/* ---------- PRZYCISKI: jedna klasa dla <button> i <a> ---------- */
.przycisk, button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--kontrolka-h);
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
a.przycisk:hover { text-decoration: none; }
.przycisk.glowny, button.glowny { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.przycisk.glowny:hover, button.glowny:hover { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); }
.przycisk.drugorzedny, button.drugorzedny { background: var(--karta); color: var(--atrament); border-color: var(--linia-mocna); }
.przycisk.drugorzedny:hover, button.drugorzedny:hover { border-color: var(--przygaszony); background: #fbfcfb; }
.przycisk.grozny, button.grozny { background: var(--karta); color: var(--blad); border-color: #e7c3bf; }
.przycisk.grozny:hover, button.grozny:hover { background: var(--blad-tlo); border-color: var(--blad); }
.przycisk.maly, button.maly { min-height: var(--kontrolka-h-maly); padding: 0 12px; font-size: 13px; }
.przycisk:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--akcent); }
.przycisk[disabled], button[disabled], .przycisk.nieaktywny {
    opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* ---------- ZAKŁADKI EKRANU (1.38.0, kształt z 1.55.3) ----------
   Jedna pozycja w menu, kilka ekranów pod nią. Celowo INNY kształt niż
   `.filtr`: pigułki zawężają to, co widać na jednym ekranie, a zakładka
   przenosi na inny ekran. Gdyby wyglądały tak samo, jedno kliknięcie
   znaczyłoby raz jedno, raz drugie.

   1.55.3: PRZEŁĄCZNIK SEGMENTOWY zamiast podkreślenia. Zgłoszenie Piotra
   brzmiało „praktycznie ich nie dostrzegam i szukam ustawień, mimo że mam
   już otwartą właściwą stronę" - a to nie jest problem samego kontrastu.
   Aktywna zakładka nazywa się tak samo jak nagłówek <h1> dwa centymetry
   niżej, tyle że nagłówek jest prawie dwa razy większy. Oko bierze większy
   napis za tytuł ekranu, a cienki pasek nad nim za ozdobę - tym bardziej
   że pasek nie miał ani tła, ani obramowania, więc niczym nie mówił
   „tu się klika".

   Tor i wypukła karta aktywnej dają kształt, który czyta się jako GRUPA
   PRZYCISKÓW Z JEDNYM WCIŚNIĘTYM, zanim ktokolwiek przeczyta napisy.
   Rozróżnienie z `.filtr` zostaje: pigułka filtra jest osobna i płaska,
   zakładki stoją we wspólnym torze.

   Stanu nadal nie niesie sam kolor: aktywna ma białe tło, cień, ciemniejszy
   tekst i `aria-current="page"`. */
.zakladki {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    margin: 0 0 20px;
    padding: 4px;
    background: #eceeeb;
    border: 1px solid var(--linia);
    border-radius: 11px;
}
.zakladki .zakladka {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    /* Ciemniejszy niż --przygaszony: w torze nieaktywna zakładka i tak jest
       wyraźnie cofnięta tłem, więc nie musi być dodatkowo wyblakła. */
    color: #4d5a58;
    font-weight: 600;
    font-size: 14.5px;
    white-space: nowrap;
}
.zakladki .zakladka:hover {
    text-decoration: none;
    color: var(--atrament);
    background: rgba(255, 255, 255, .6);
}
.zakladki .zakladka.aktywna {
    background: var(--karta);
    color: var(--akcent-ciemny);
    box-shadow: 0 1px 2px rgba(29, 43, 42, .14), 0 0 0 1px rgba(29, 43, 42, .05);
}
.zakladki .zakladka:focus-visible { outline: none; box-shadow: var(--focus); }
/* Ikona w zakładce jest dodatkiem do napisu, nigdy zamiast niego - inaczej
   pasek zmusza do zgadywania (ta sama zasada co przy ikonach w 1.54.0). */
.zakladki .zakladka .ikona-mini { margin-right: 7px; }
/* Na wąskim ekranie tor rozciąga się na całą szerokość, żeby zakładki nie
   zostawały w jednej kolumnie po lewej z pustką obok. */
@media (max-width: 640px) {
    .zakladki { display: flex; width: 100%; }
    .zakladki .zakladka { flex: 1 1 auto; justify-content: center; }
}

/* ---------- PASEK NARZĘDZI listy: szukanie + filtry + akcje ---------- */
.pasek-narzedzi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 12px 0 14px;
}
.pasek-narzedzi .szukajka { display: flex; gap: 8px; flex: 1 1 320px; min-width: 240px; }
.pasek-narzedzi .szukajka .pole { margin: 0; flex: 1; }
/* Przycisk stojący obok pola z etykietą ma równać się z POLEM, nie ze
   środkiem kolumny - inaczej „Szukaj" wisi nad polem, przy którym stoi. */
.pasek-narzedzi > button, .pasek-narzedzi > .przycisk,
.pasek-narzedzi .szukajka > button, .pasek-narzedzi .szukajka > .przycisk { align-self: end; }
.pasek-narzedzi .do-prawej { margin-left: auto; }
.pasek-narzedzi .filtry { margin: 0; }

/* ---------- TABELA: sortowalne nagłówki ---------- */
/* UWAGA na zgodność wstecz: klasy `.sortuj` używają też stare tabele
   (cennik, kontrahenci), gdzie nagłówek jest zwykłym tekstem sortowanym
   JavaScriptem. Dlatego NIE zerujemy tu paddingu <th> - zamiast tego
   odnośnik wychodzi poza padding ujemnym marginesem. Stare nagłówki
   wyglądają dokładnie jak dotąd, nowe mają klikalne całe pole. */
.tabela th.sortuj > a {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: -9px -12px;
    padding: 9px 12px;
    color: var(--akcent);
    font: inherit;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
    white-space: nowrap;
}
.tabela th.sortuj > a:hover { text-decoration: none; background: #f2f6f4; }
.tabela th.sortuj > a:focus-visible { outline: none; box-shadow: inset var(--focus); }
.tabela th.sortuj > a .strzalka { font-size: 10px; opacity: .35; margin-top: 0; color: inherit; }
.tabela th[aria-sort] > a .strzalka { opacity: 1; }
.tabela th[aria-sort] > a { color: var(--akcent-ciemny); }
.tabela td.liczbowo, .tabela th.liczbowo, .tabela th.liczbowo > a { text-align: right; justify-content: flex-end; }
.tabela tbody tr:hover { background: #fbfcfb; }

/* 1.35.0: odznaka statusu nigdy się nie łamie. Po dołożeniu sortowanych
   nagłówków (szersze od zwykłych) kolumna Statusu zrobiła się węższa
   i „Oferta wysłana" rozpadała się na dwie linie, rozpychając wiersz. */
.status { white-space: nowrap; }

/* 1.35.0: kolumna DRUGORZĘDNA - przy wąskim oknie znika zamiast wypychać
   resztę tabeli poza ekran. Używamy jej tam, gdzie tabela ma naprawdę
   dużo kolumn (lista Ofert: Zakres). Zasada: chowamy to, czego się nie
   skanuje wzrokiem, nigdy kwoty, statusu ani daty. */
@media (max-width: 1500px) {
    .tabela th.opcjonalna, .tabela td.opcjonalna { display: none; }
}

/* ---------- STRONICOWANIE ---------- */
.stronicowanie {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    color: var(--przygaszony);
    font-size: 13px;
}
.stronicowanie .strony { display: flex; gap: 6px; flex-wrap: wrap; }
.stronicowanie a, .stronicowanie span.strona {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 10px;
    border: 1px solid var(--linia-mocna); border-radius: 8px;
    background: var(--karta); color: var(--atrament); font-size: 13px;
}
.stronicowanie a:hover { text-decoration: none; border-color: var(--akcent); }
.stronicowanie .strona.aktywna { background: var(--akcent); border-color: var(--akcent); color: #fff; font-weight: 600; }
.stronicowanie .strona.przerwa { border: none; background: none; min-width: 16px; }
.stronicowanie .ile-na-stronie { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.stronicowanie .ile-na-stronie select {
    min-height: var(--kontrolka-h-maly); border: 1px solid var(--linia-mocna);
    border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; background: #fff;
}

/* ---------- PUSTY STAN ---------- */
.pusto { text-align: left; }
.pusto strong { display: block; color: var(--atrament); margin-bottom: 4px; }

@media (max-width: 760px) {
    .pasek-narzedzi .do-prawej { margin-left: 0; width: 100%; }
    .stronicowanie .ile-na-stronie { margin-left: 0; width: 100%; }
}