/* lander-ui.css — WSPÓLNA MAPA KONTROLEK paneli chat.lavander.pl (od 11.10.2026, polecenie Sebastiana:
   „guziki muszą być podobne do siebie”). Wzorzec = pulpit Finanse (walidator-web/public/finanse.html).
   Dokument: chat-lavander/UI-MAPA.md. Kolory bierze z :root strony (fallback = paleta Finanse), więc jeden plik
   pasuje do każdego panelu. Ładowanie: <link rel="stylesheet" href="/nav/lander-ui.css"> (obok /nav/lander-nav.js).
   Nowy guzik / filtr / plakietka = klasa stąd, nie własny CSS. */
:root{--ui-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--ui-mono:'JetBrains Mono',ui-monospace,Consolas,monospace}

/* GUZIK — .lbtn (zwykły) · .primary (JEDNA główna akcja w widoku) · .on (aktywny przełącznik) · .soft (zaznaczony filtr)
   · .ok (wyślij/zatwierdź) · .danger (nieodwracalne) · .sm (pomocniczy, np. „wyczyść”) · <a class="lbtn"> działa tak samo */
.lbtn{display:inline-flex;align-items:center;gap:6px;background:var(--card-2,#20202a);border:1px solid var(--line-strong,#353541);color:var(--text,#eceef2);padding:8px 12px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;vertical-align:middle}
.lbtn:hover:not(:disabled){border-color:var(--accent-2,#a78bfa);color:#fff}
.lbtn:disabled{opacity:.28;cursor:default}
.lbtn.primary,.lbtn.on{background:var(--accent,#8b5cf6);border-color:var(--accent,#8b5cf6);color:#fff;font-weight:700}
.lbtn.primary:hover:not(:disabled){filter:brightness(1.08);border-color:var(--accent,#8b5cf6);color:#fff}
.lbtn.soft{background:rgba(139,92,246,.22);border-color:rgba(139,92,246,.55);color:#fff}
.lbtn.ok{background:var(--good,#4ade80);border-color:var(--good,#4ade80);color:#0b2b1d;font-weight:700}
.lbtn.danger{background:var(--bad,#f87171);border-color:var(--bad,#f87171);color:#2b0b0b;font-weight:700}
.lbtn.sm{padding:6px 10px;font-size:12px;color:var(--text-dim,#a8afbd)}

/* POLA — .lsel (select) · .linput (input/textarea) — ta sama wysokość i promień co guzik, żeby pasek filtrów był równy */
.lsel,.linput{background:var(--card-2,#20202a);border:1px solid var(--line-strong,#353541);color:var(--text,#eceef2);padding:8px 12px;border-radius:9px;font-family:inherit;font-size:14px;line-height:1;min-height:32px;vertical-align:middle}
.lsel:focus,.linput:focus{outline:none;border-color:var(--accent-2,#a78bfa)}
.linput::placeholder{color:var(--text-faint,#8189a0)}
.ltoolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* CHIP — .lchip: pigułka filtra/tagu do klikania (wiele naraz), .on = włączony. Guzik akcji to NIE chip. */
.lchip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1px solid var(--line-strong,#353541);background:var(--card-2,#20202a);color:var(--text-dim,#a8afbd);cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;user-select:none;line-height:1.3}
.lchip.on{background:rgba(139,92,246,.22);border-color:var(--accent,#8b5cf6);color:#fff}

/* PLAKIETKA STANU — .lbadge: ok (zielona) · warn (żółta) · bad (czerwona = wymaga decyzji) · muted (informacja). Nie do klikania. */
.lbadge{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:99px;border:1px solid var(--line-strong,#353541);color:var(--text-dim,#a8afbd);letter-spacing:.03em;white-space:nowrap;line-height:1.5;vertical-align:middle}
.lbadge.ok{color:var(--good,#4ade80);border-color:rgba(74,222,128,.4)}
.lbadge.warn{color:var(--warn,#facc15);border-color:rgba(250,204,21,.4)}
.lbadge.bad{color:var(--bad,#f87171);border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.08)}
.lbadge.muted{color:var(--text-faint,#8189a0)}

/* LICZBY — .lmono: mono + cyfry tabelaryczne (kwoty, ID, daty) */
.lmono{font-family:var(--ui-mono);font-variant-numeric:tabular-nums}

/* PASKI PRZEWIJANIA — jeden styl dla całej strony (Sebastian 07.10 i 11.10: „paski mają pasować do całości”): cienkie, tor
   przezroczysty, uchwyt w kolorze linii panelu, fiolet przy najechaniu. Obejmuje stronę, boczne menu, tabele (.tw) i każde
   przewijane pole. Wzorzec = panel-wysylek/public/style.css (blok 07.10.2026). Firefox: scrollbar-*; Chrome/Edge: ::-webkit-scrollbar.
   Poziomy pasek STRONY = błąd (tabele przewijają się we własnym kontenerze; strona ma html{overflow-x:hidden}). */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong,#353541) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong,#353541);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--accent-2,#a78bfa);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}