/* opti.conkret.pl — motyw skopiowany z aplikacji :8000 (lewy panel; jasny i ciemny od 02.10).
 *
 * Źródło wyglądu: templates/base.html (sidebar, ciemny motyw) + opti/templates/opti/base_opti.html
 * (design system OPTI). Tu wszystko jest SAMODZIELNE — bez Bootstrapa i CDN-ów, bo CSP na tym
 * hoście to `default-src 'self'` (żadnych zewnętrznych arkuszy). Ikony = emoji, nie font.
 *
 * Restylujemy istniejące klasy stron (.dane, .filtry, .klikalny…) na wygląd OPTI, żeby ekrany
 * (kasa/kierowcy/rozrachunki/cennik) nie wymagały zmian w znacznikach — tylko ta jedna zmiana
 * skórki i wszystkie dostają lewy panel + ciemny motyw.
 */
:root {
    --sidebar-width: 240px;
    --navy:       #1a2744;
    --navy-hover: #243460;
    --accent:     #f59e0b;
    --radius:     10px;
    /* Kolory treści — CIEMNY motyw. Jasny nadpisuje te same nazwy niżej ([data-motyw="jasny"]).
       Panel boczny zostaje granatowy w obu (jego biel-na-granacie nie korzysta z tych zmiennych). */
    --bg:         #0f172a;
    --surface:    #1e293b;
    --surface2:   #263248;
    --border:     rgba(255,255,255,.07);
    --text:       #e2e8f0;
    --muted:      #94a3b8;
    --green:      #22c55e;
    --red:        #ef4444;
    --link:       #38bdf8;
    --hover:      rgba(255,255,255,.04);
    --thead:      rgba(0,0,0,.25);
    --field-border:       rgba(255,255,255,.12);
    --field-border-hover: rgba(255,255,255,.26);
    --readonly-bg: rgba(15,23,42,.6);
    --scheme:     dark;                 /* natywne pola, kalendarze, paski przewijania */
    --shadow:     0 10px 30px rgba(0,0,0,.4);
    --c-ok:       #4ade80;              /* tekst „dobrze / spadek ceny" */
    --c-bad:      #f87171;              /* tekst „źle / ujemne" */
    --c-warn:     #fbbf24;
    --c-info:     #38bdf8;
}
/* ── JASNY motyw (właściciel 02.10 — domyślny; przełącznik ☀/🌙 w nagłówku, static/motyw.js) ──
   Styl „listy windykacji": białe karty na jasnoszarym tle, ciemny tekst, cienkie szare linie.
   Kolory statusów ciemniejsze niż w ciemnym motywie — jasna zieleń/czerwień na bieli nie do czytania. */
[data-motyw="jasny"] {
    --bg:         #f1f5f9;
    --surface:    #ffffff;
    --surface2:   #f8fafc;
    --border:     #e2e8f0;
    --text:       #0f172a;
    --muted:      #64748b;
    --link:       #0369a1;
    --hover:      rgba(15,23,42,.04);
    --thead:      #f8fafc;
    --field-border:       #cbd5e1;
    --field-border-hover: #94a3b8;
    --readonly-bg: #f1f5f9;
    --scheme:     light;
    --shadow:     0 10px 30px rgba(15,23,42,.12);
    --c-ok:       #15803d;
    --c-bad:      #b91c1c;
    --c-warn:     #b45309;
    --c-info:     #0369a1;
}

* { box-sizing: border-box; }
/* Miejsce na pionowy pasek zawsze zarezerwowane — siatki mierzą się poza stroną, zanim pasek się pojawi (08.10). */
html { scrollbar-gutter: stable; }
body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
}
a { color: var(--link); }

/* ── Lewy panel ─────────────────────────────────────────────────────────────── */
#sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--navy);
    position: fixed;
    top: 0; left: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
}
#sidebar .logo {
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
#sidebar .logo span { font-size: 18px; font-weight: 700; color: #fff; }
#sidebar .logo small { display: block; font-size: 11px; color: rgba(255,255,255,.4); margin-top: 2px; }

#sidebar nav { padding: 8px 0; flex: 1; overflow-y: auto; }
#sidebar nav .nav-section {
    font-size: 10px; font-weight: 700;
    color: rgba(255,255,255,.4);
    letter-spacing: 1.2px; text-transform: uppercase;
    padding: 13px 20px 6px;
}
#sidebar nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    font-size: 14px;
    transition: all .15s;
}
#sidebar nav a .ic { font-size: 16px; width: 20px; text-align: center; }
#sidebar nav a:hover { background: var(--navy-hover); color: #fff; }
#sidebar nav a.aktywna { background: var(--navy-hover); color: #fff; border-left: 3px solid var(--accent); padding-left: 17px; }

#sidebar .user-info {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 13px; color: rgba(255,255,255,.5);
}
#sidebar .user-info .kto { color: rgba(255,255,255,.85); font-weight: 600; display: block; }
#sidebar .user-info a.wyloguj { color: var(--accent); text-decoration: none; font-size: 12px; }
#sidebar .user-info a.wyloguj + a.wyloguj { margin-left: 12px; }
#sidebar .user-info a.wyloguj:hover { text-decoration: underline; }

/* „Opis zmian" — ostatnia pozycja paska, nad podpisem zalogowanego. Wygląda jak pozycja menu,
   bo nią jest; plakietka liczy notki, których ten człowiek jeszcze nie widział. */
#sidebar a.opis-zmian {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px; margin-top: auto;
    color: rgba(255,255,255,.62); text-decoration: none; font-size: 13px;
}
#sidebar a.opis-zmian:hover, #sidebar a.opis-zmian.aktywna { color: #fff; background: rgba(255,255,255,.06); }
/* „Zgłoś pomysł" — pod „Opisem zmian" (bez `margin-top:auto`, żeby oba stały razem na dole).
   Akcent, bo to jedyne wejście do skrzynki pomysłów na tym hoście. */
/* „Zgłoś pomysł" in the page header, right of the title (owner 25.09: „top of the page"). */
.op-header .op-header-akcje { margin-left: auto; display: flex; gap: 10px; align-items: center; }
/* „Opis zmian" beside it — outline, because it informs and asks nothing (same idea as :8000). */
.op-header .opis-zmian-btn {
    white-space: nowrap; padding: 6px 13px; border-radius: 8px; font-size: 13px; font-weight: 600;
    color: var(--text); border: 1px solid var(--border); text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.op-header .opis-zmian-btn:hover { background: var(--hover); }
.op-header .opis-zmian-btn .oz-licznik {
    background: #ef4444; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 800;
}
.op-header .pomysl-btn {
    align-self: center; white-space: nowrap;
    padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
    color: #0b1220; background: var(--accent); text-decoration: none;
}
.op-header .pomysl-btn:hover { filter: brightness(1.08); }
/* „Kto teraz pracuje" (30.09, jak w importerze :5001): zielona pigułka z kropką i liczbą.
   Nikt nie pracuje → szara, żeby „0" nie świeciło na zielono. */
.op-header .obecnosc-wrap { position: relative; display: inline-flex; }
.op-header .obecnosc-chip {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 3px 11px; border-radius: 999px; border: 0;
    background: #16a34a; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.6;
}
.op-header .obecnosc-chip:hover { filter: brightness(1.1); }
.op-header .obecnosc-chip.pusty { background: #475569; }
.obecnosc-kropka { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: 0 0 auto; }
.op-header .obecnosc-lista {
    position: absolute; right: 0; top: 100%; margin-top: 6px; z-index: 1200;
    min-width: 220px; max-height: 320px; overflow-y: auto; padding: 8px 0; font-size: 13px;
    background: var(--surface2); color: var(--text); border: 1px solid var(--field-border);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.op-header .obecnosc-lista[hidden] { display: none; }
.obecnosc-wiersz { display: flex; align-items: center; gap: 8px; padding: 5px 12px; white-space: nowrap; }
.obecnosc-wiersz .obecnosc-kropka { background: #16a34a; }
.obecnosc-podpis { padding: 6px 12px; opacity: .65; font-size: 12px; }
#sidebar a.pomysl-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px;
    color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600;
}
#sidebar a.pomysl-link:hover, #sidebar a.pomysl-link.aktywna { color: #fff; background: rgba(255,255,255,.06); }

#sidebar a.opis-zmian .oz-licznik {
    margin-left: auto; background: var(--accent); color: #0b1220;
    border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 800;
}

/* ── Główna kolumna ─────────────────────────────────────────────────────────── */
#main { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }
.content { flex: 1; padding: 0; }

.op-header {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 15px 28px;
    margin: 24px 32px 0;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.op-header h1 {
    color: var(--text); font-size: 18px; font-weight: 700; margin: 0;
    display: flex; align-items: center; gap: 12px;
}
.op-header h1 .op-icon {
    width: 30px; height: 30px;
    background: var(--accent); border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.op-body { padding: 24px 32px 40px; display: flex; flex-direction: column; gap: 18px; }
/* Lista podmieniana przez lista.js (<div data-lista>) stoi MIĘDZY .op-body a sekcjami — bez tego sekcje
   w środku traciły odstęp 18 px (zrzut 05.10 14:29: „no space between sections", CRM). */
.op-body > [data-lista] { display: flex; flex-direction: column; gap: 18px; }

/* Pasek zakładek modułu (faza C planu uproszczenia): ekrany jednego modułu obok siebie, pod
   nagłówkiem strony. Bieżąca zakładka podkreślona akcentem, jak aktywna pozycja panelu. */
.op-zakladki {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin: 14px 32px 0; border-bottom: 1px solid var(--border);
}
.op-zakladki a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; font-size: 14px; font-weight: 600;
    color: var(--muted); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.op-zakladki a:hover { color: var(--text); background: var(--hover); }
.op-zakladki a.aktywna { color: var(--text); border-bottom-color: var(--accent); }
/* Liczniki „do zrobienia" przy zakładce i przy module w panelu (obiecane telefony, wnioski do decyzji). */
.op-zakladki .licznik, #sidebar nav a .licznik {
    background: var(--accent); color: #0b1220; border-radius: 999px;
    padding: 0 7px; font-size: 11px; font-weight: 800; line-height: 18px;
}
#sidebar nav a .licznik { margin-left: auto; }

.stopka {
    padding: 16px 32px;
    color: var(--muted); font-size: 12px;
    border-top: 1px solid var(--border);
}

/* ── Tabele (.dane → wygląd op-table) ──────────────────────────────────────── */
.dane {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.dane thead th {
    background: var(--thead);
    color: var(--muted);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    padding: 11px 14px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.dane tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
.dane tbody tr:last-child { border-bottom: none; }
.dane tbody tr:hover { background: var(--hover); }
.dane td { padding: 11px 14px; color: var(--text); vertical-align: middle; }
.dane tfoot th {
    padding: 12px 14px; background: var(--thead);
    color: var(--text); font-weight: 700; text-align: left;
    border-top: 1px solid var(--border);
}
/* wyrównania z szablonów: .k = liczby (prawo), .l = tekst (lewo) */
.dane .k, .dane th.k { text-align: right; font-variant-numeric: tabular-nums; }
.dane .l, .dane th.l { text-align: left; }

.klikalny { cursor: pointer; }
.klikalny:hover { background: rgba(245,158,11,.06) !important; }

.nowrap { white-space: nowrap; }
.drobne { color: var(--muted); font-size: 12px; }
.uwaga  { color: var(--c-warn); font-weight: 600; }
.ujemne { color: var(--c-bad); }
.pusto  { color: var(--muted); padding: 24px 4px; font-style: italic; }
.wroc   { margin: 0 0 4px; }
.wroc a { color: var(--muted); text-decoration: none; font-size: 13px; }
.wroc a:hover { color: var(--text); }

/* ── Pasek filtrów (.filtry → wygląd op-filters) ───────────────────────────── */
.filtry {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
}
.filtry label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted);
}
.filtry input, .filtry select {
    background: var(--bg);
    border: 1px solid var(--field-border);
    border-radius: 6px;
    color: var(--text);
    padding: 7px 12px; font-size: 13px;
    color-scheme: var(--scheme);
}
.filtry input:focus, .filtry select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}
/* A checkbox filter is a switch, not a field: the padded box styling above turns it into a fat grey
   square, so it keeps the native control and sits on one line with its own label. */
.filtry label.przelacznik {
    flex-direction: row; align-items: center; gap: 6px;
    text-transform: none; letter-spacing: 0; font-size: 12px; padding-bottom: 7px;
}
.filtry label.przelacznik input[type=checkbox] {
    padding: 0; width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer;
}
input[type=date] { color-scheme: var(--scheme); }

/* Contact entry form inside the call list. The input styling above is scoped to `.filtry`, so a
   form living in a table cell would otherwise render with browser defaults - white boxes on the
   dark theme. Same tokens, tighter padding, because this sits inside a row. */
.kontakt-form { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.kontakt-form input, .kontakt-form select, .kontakt-form textarea {
    background: var(--bg);
    border: 1px solid var(--field-border);
    border-radius: 6px;
    color: var(--text);
    padding: 5px 8px; font-size: 12px;
    font-family: inherit;
    color-scheme: var(--scheme);
    width: 100%; box-sizing: border-box;
}
.kontakt-form textarea { resize: vertical; min-height: 42px; }
.kontakt-form input:focus, .kontakt-form select:focus, .kontakt-form textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}
.kontakt-form label { display: block; }
/* `details`/`summary` drives the disclosure with no JS - nothing to flicker on load. */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ── Kolumna „Kontakt" na liście do obdzwonienia ──────────────────────────────
   ONE primary action per row. Two solid buttons stacked in a table cell read as noise, so only
   the call button is filled; everything else is quiet text.
   The number sits ON the button because 89% of OPTI contacts have no name (measured 2026-08-24:
   1631 of 15477) - a separate line for it would usually be a bare number with nothing to say. */
.kontakt-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.kontakt-dzwon {
    background: var(--accent); color: #000;
    border: none; border-radius: 6px;
    padding: 5px 10px; font-size: 12px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: opacity .15s; white-space: nowrap;
}
.kontakt-dzwon:hover { opacity: .88; }
/* tabular-nums keeps the digits aligned down the column instead of jittering row to row. */
.kontakt-nr { font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.kontakt-nr-duzy { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kontakt-meta { color: var(--muted); font-size: 11px; line-height: 1.35; }
.kontakt-pilne { color: var(--accent); font-size: 11px; font-weight: 600; }
/* Szczegóły wniosku pod <details> (crm-wnioski.php). Siatka, nie zagnieżdżona <table> — tabela.js
   nie sortuje listy, w której wierszach siedzi inna tabela (pomysł #144). */
.wn-pola { display: grid; grid-template-columns: minmax(90px, 40%) minmax(140px, 1fr); gap: 2px 10px; margin: 4px 0; font-size: 12px; min-width: 300px; }
.wn-pola > b { font-weight: 600; }
.wn-pola-4 { grid-template-columns: max-content max-content max-content 1fr; }
/* Stan windykacji przy kliencie (kopia z :8000). Cztery poziomy, bo prowadzą do czterech różnych
   rozmów: ⛔ nie dzwoń z ofertą · 💔 ugoda zerwana · ⚠ status · 📨 wysłany dokument. Czerwień
   zarezerwowana dla dwóch pierwszych — gdyby każdy etap był czerwony, przestano by ją widzieć. */
.wind-chip {
    display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 4px;
    font-size: 10px; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.wind-blok  { background: #7f1d1d; color: #fecaca; }
.wind-ugoda { background: #14532d; color: #bbf7d0; }
.wind-uwaga { background: #78350f; color: #fed7aa; }
.wind-etap  { background: #1e3a5f; color: #bfdbfe; }
.kontakt-dodaj {
    color: var(--muted); font-size: 11px; cursor: pointer;
    text-decoration: underline dotted; text-underline-offset: 2px;
}
.kontakt-dodaj:hover { color: var(--text); }

button, .op-btn {
    background: var(--accent); color: #000;
    font-weight: 700; font-size: 13px;
    border: none; border-radius: 6px;
    padding: 8px 18px; cursor: pointer;
    text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
    transition: opacity .15s;
}
button:hover, .op-btn:hover { opacity: .88; }

/* ── Logowanie (ciemna karta na środku) ────────────────────────────────────── */
.strona-logowania {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px;
}
.karta-logowania {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px;
    width: 100%; max-width: 340px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: var(--shadow);
}
.karta-logowania h1 { font-size: 18px; margin: 0 0 8px; text-align: center; }
.karta-logowania label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.karta-logowania input {
    background: var(--bg); border: 1px solid var(--field-border);
    border-radius: 6px; color: var(--text); padding: 9px 12px; font-size: 14px;
}
.karta-logowania input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.karta-logowania .blad {
    background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3);
    color: var(--c-bad); border-radius: 6px; padding: 9px 12px; font-size: 13px; margin: 0;
}

@media (max-width: 768px) {
    #sidebar { width: 60px; }
    #sidebar .logo small, #sidebar nav a span.txt, #sidebar .user-info .kto,
    #sidebar a.opis-zmian span.txt, #sidebar a.pomysl-link span.txt { display: none; }
    #main { margin-left: 60px; }
    .op-header, .op-body { margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; }
    .op-zakladki { margin-left: 16px; margin-right: 16px; }
    .op-header { flex-wrap: wrap; }
}

/* ── Zwinięty panel (08.10; przełącznik « w panelu, lib/layout.php opti_panel()) — ten sam wąski
   pasek z ikonami co na telefonie, na życzenie. Napisy zostają dla czytnika ekranu (`.txt`). ── */
#sidebar .logo { position: relative; }
.panel-przelacz {
    position: absolute; top: 18px; right: 12px; width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
    color: rgba(255,255,255,.8); cursor: pointer; padding: 0;
}
.panel-przelacz:hover { background: var(--navy-hover); color: #fff; border-color: var(--accent); }
#sidebar .panel-przelacz span { display: inline-block; font-size: 15px; font-weight: 700; color: inherit; line-height: 1; transition: transform .15s; }
html[data-panel="zwiniety"] #sidebar { width: 60px; }
html[data-panel="zwiniety"] #main { margin-left: 60px; }
html[data-panel="zwiniety"] #sidebar .logo { padding: 14px 0 10px; text-align: center; }
html[data-panel="zwiniety"] #sidebar .logo small,
html[data-panel="zwiniety"] #sidebar .user-info { display: none; }
html[data-panel="zwiniety"] #sidebar .txt {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html[data-panel="zwiniety"] .panel-przelacz { position: static; margin-top: 8px; }
html[data-panel="zwiniety"] #sidebar .panel-przelacz span { transform: rotate(180deg); }
html[data-panel="zwiniety"] #sidebar .wroc-opti { margin: 10px 8px 4px; padding: 8px 0; }
html[data-panel="zwiniety"] #sidebar nav a { justify-content: center; gap: 0; padding: 10px 0; position: relative; }
html[data-panel="zwiniety"] #sidebar nav a.aktywna { padding-left: 0; }
html[data-panel="zwiniety"] #sidebar nav a .licznik { position: absolute; top: 2px; right: 6px; margin: 0; font-size: 9px; padding: 0 4px; }

/* ── Pełny ekran „Cennik" — komponenty jak w :8000 (base_opti.html + cennik.html) ─────────── */
.op-subtitle { color: var(--muted); font-size: 13px; }
.op-eyebrow { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 14px; }
.op-note { font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 12px; }

.op-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.op-card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.op-card-title { color: var(--text); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.op-card-body { padding: 16px 24px 20px; }
/* 08.10 (właściciel: „make in opti.conkret.pl dark mode the same colours as in 8000") — karty w ciemnym motywie jak karty
   :8000 (templates/base.html, --siatka-*): tło siatki AG Grida, ramka 15 % bieli, rogi 8 px, nagłówek jako pasek o 5 %
   jaśniejszy z kreską pod spodem. Te same zmienne czyta lista.css (pasek i okienka filtrów). */
:root:not([data-motyw="jasny"]) {
    --siatka-tlo: #1f2836; --siatka-tekst: #ffffff;
    --siatka-ramka: color-mix(in srgb, transparent, #ffffff 15%);
    --siatka-naglowek: color-mix(in srgb, #1f2836, #ffffff 5%);
}
:root:not([data-motyw="jasny"]) .op-card { background: var(--siatka-tlo); border-color: var(--siatka-ramka); border-radius: 8px; }
:root:not([data-motyw="jasny"]) .op-card-head { background: var(--siatka-naglowek); border-bottom-color: var(--siatka-ramka); }

/* karty produktów */
.price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.price-card { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 24px; position: relative; overflow: hidden; transition: border-color .15s, transform .1s; }
.price-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.price-card.on::before { background: #60a5fa; }
.price-card.ol::before { background: #fb923c; }
.price-card.pb::before { background: var(--c-ok); }
.price-card:hover { border-color: rgba(245,158,11,.5); transform: translateY(-1px); }
.price-card.selected { border-color: var(--accent); }
.price-card.selected::after { content: '✓'; position: absolute; top: 10px; right: 12px; color: var(--accent); font-weight: 800; font-size: 14px; }
.price-name { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; margin-bottom: 6px; }
.price-symbol { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.price-value { font-size: 30px; font-weight: 800; color: var(--text); line-height: 1; }
.price-unit { font-size: 12px; color: var(--muted); margin-top: 4px; }
.price-date { font-size: 11px; color: var(--muted); margin-top: 8px; }

.change-up { color: var(--c-bad); font-size: 12px; font-weight: 700; }
.change-down { color: var(--c-ok); font-size: 12px; font-weight: 700; }
.change-flat { color: var(--muted); font-size: 12px; }

/* przyciski zakresu / eksperci */
.days-row { display: flex; gap: 6px; align-items: center; }
.days-btn { padding: 5px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--border);
  background: transparent; color: var(--muted); cursor: pointer; text-decoration: none; transition: all .15s; }
.days-btn:hover, .days-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
/* 08.10 (zrzut umów: „Pełnomocnictwo PUESC /" ucięte przy krawędzi siatki) — w komórce siatki przycisk to jedno pudełko:
   następny schodzi do nowej linii, a za długi zawija się W SWOJEJ ramce (nie ucina); wysokość linii własna, nie wiersza. */
.ag-cell .days-btn { display: inline-block; max-width: 100%; white-space: normal; margin: 2px 4px 2px 0; line-height: 1.4; }
/* 09.10: globalny `button` (padding 8px 18px) trafiał też w przycisk filtra AG Grida pod nagłówkiem — 36 px zamiast 16,
   i w wąskiej kolumnie (marża: zł/m³, %) przycisk wystawał poza kolumnę. */
.ag-floating-filter-button-button { padding: 0; }
.na-dzien-form { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.na-dzien-form input[type=date] { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 12px; color-scheme: var(--scheme); }
.op-experts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; background: rgba(56,189,248,.06); border: 1px solid rgba(56,189,248,.2); border-radius: var(--radius); }
.op-experts-label { font-size: 12px; color: var(--muted); }
.stale-chip { margin-left: 6px; padding: 1px 7px; border-radius: 9px; font-size: 11px; background: rgba(245,158,11,.15); color: var(--c-warn); }

/* prognoza */
.op-forecast { padding: 20px 24px; display: flex; gap: 36px; flex-wrap: wrap; align-items: flex-start; }
.fc-dir { font-size: 22px; font-weight: 800; }
.fc-val { font-size: 22px; font-weight: 800; color: var(--text); }
.fc-small { font-size: 18px; font-weight: 700; color: var(--text); }
.fc-unit { font-size: 12px; color: var(--muted); }

/* tabela op-table (historia / z dnia dostawy) */
.op-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.op-table thead th { background: var(--thead); color: var(--muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; padding: 10px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
.op-table thead th.num { text-align: right; }
.op-table tbody tr { border-bottom: 1px solid var(--border); }
.op-table tbody tr:last-child { border-bottom: none; }
.op-table tbody tr:hover { background: var(--hover); }
.op-table td { padding: 11px 14px; color: var(--text); vertical-align: middle; }
.op-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.op-table td.muted, .muted { color: var(--muted); }
.op-table-wrap { overflow-x: auto; }
/* CRM „Nowy klient" (owner 14.10, laptop width): rows of fixed-width fields inside a form row (contacts,
   delivery addresses, extra contacts) WRAP instead of widening the whole form past the card, whose
   `overflow: hidden` then cut off the address fields. Each row stays one line on a wide screen. */
.crm-wiersze, .crm-wiersze > tbody { display: block; }
.crm-wiersze > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 0; }
.crm-wiersze > tbody > tr > td { padding: 0; }
/* CRM „Nowy klient" (board 14.10, #204 pts 6 and 9): "the request cannot go to BOK" in RED, as asked —
   not the amber of an ordinary notice. Light theme below. */
.crm-blokada { color: var(--red); }
.crm-wiersze td.crm-etykieta { min-width: 140px; }
.crm-wiersze input, .crm-wiersze select { max-width: 100%; }
.chart-box { padding: 20px 24px; }
#priceChart { max-height: 300px; }

/* ── „Wróć do OPTI" (przycisk w panelu) + ekran Użytkownicy ─────────────────── */
.wroc-opti {
    display: block; margin: 12px 16px 4px; padding: 9px 14px;
    background: var(--surface2); color: var(--text) !important;
    border: 1px solid var(--border); border-radius: 8px;
    text-decoration: none; font-size: 13px; font-weight: 600; text-align: center;
    transition: all .15s;
}
.wroc-opti:hover { background: var(--navy-hover); border-color: var(--accent); }
.rola-select {
    background: var(--bg); border: 1px solid var(--field-border); border-radius: 6px;
    color: var(--text); padding: 5px 8px; font-size: 12px; color-scheme: var(--scheme);
}
/* #208 Użytkownicy: pole schowane za zaznaczeniem („✎” przy nazwisku, „własne” przy haśle) — samym CSS,
   bo skrypty wolno tylko z plików (CSP), a siatka i tak kopiuje komórki razem z formularzami. */
.u-odslon { display: inline; }
.u-odslon .u-pole { display: none; }
.u-odslon:has(.u-przelacz input:checked) .u-pole { display: block; margin-top: 4px; }
.u-pole input { width: 100%; max-width: 100%; box-sizing: border-box; }
.u-przelacz { font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; margin: 0 4px; }
/* „✎” przy nazwisku: sam ołówek — pole wyboru schowane (16 kratek w kolumnie to szum), klik w ołówek i tak je przełącza. */
.u-ikona input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.u-ikona:has(input:checked) { color: var(--accent); }
.op-badge-ok { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700;
    background: rgba(34,197,94,.15); color: var(--c-ok); border: 1px solid rgba(34,197,94,.25); }

/* ── Stat cards + wykresy zestawień (jak op-stat w :8000) ──────────────────── */
.op-stats { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
.op-stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px 22px; position: relative; overflow: hidden;
}
.op-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); opacity: .7; }
.op-stat.blue::before  { background: #38bdf8; }
.op-stat.green::before { background: #22c55e; }
.op-stat.violet::before{ background: #a78bfa; }
.op-stat-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.op-stat-value { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1; }
.op-stat-sub   { font-size: 12px; color: var(--muted); margin-top: 6px; }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; }
.chart-card h3 { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.chart-holder { position: relative; }
@media (max-width: 1000px) { .op-stats { grid-template-columns: repeat(2, 1fr); } }

/* ── Odznaki (segment / typ opiekuna) — brakowały poza op-badge-ok ─────────── */
.op-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.op-badge-danger  { background: rgba(239,68,68,.15);  color: var(--c-bad); border: 1px solid rgba(239,68,68,.25); }
.op-badge-warning { background: rgba(245,158,11,.15); color: var(--c-warn); border: 1px solid rgba(245,158,11,.25); }
.op-badge-info    { background: rgba(56,189,248,.15); color: var(--c-info); border: 1px solid rgba(56,189,248,.25); }
.op-badge-neutral { background: rgba(148,163,184,.12); color: var(--muted); border: 1px solid rgba(148,163,184,.2); }

/* Kody CN koncesji URE. Zwinięte, bo jedna koncesja potrafi mieć siedem grup po kilka kodów —
   rozwinięte na stałe rozpychałyby tabelę wyników tak, że nie da się jej czytać. */
.kody-cn summary { cursor: pointer; }
.kody-cn summary::marker { color: var(--muted); }
.cn-tabela { margin: 4px 0 2px; border-collapse: collapse; font-size: 11px; }
.cn-tabela td { padding: 2px 10px 2px 0; vertical-align: top; color: var(--muted); }
.cn-tabela td.cn-kody { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }

/* ── Pola i checkboxy W TABELACH (owner 25.09, ekran Koszt dostawy): bez tej reguły przeglądarka
   rysowała białe pola i systemowe kwadraty na ciemnym tle. Ten sam wygląd co pola filtrów. ── */
/* 09.10: także `.ag-cell` — w siatce AG Grid komórka jest kopią spoza `.op-table` i pola wracały do wyglądu przeglądarki. */
/* ⚠ Każdy typ pola wymieniony z nazwy — pominięty (było: email na „Opiekunach", 30.09) zostaje biały. */
:is(.op-table, .ag-cell) input[type=text], :is(.op-table, .ag-cell) input[type=number], :is(.op-table, .ag-cell) input[type=email],
:is(.op-table, .ag-cell) input[type=tel], :is(.op-table, .ag-cell) input[type=search], :is(.op-table, .ag-cell) input[type=date],
:is(.op-table, .ag-cell) input:not([type]) {
    background: var(--bg);
    border: 1px solid var(--field-border);
    border-radius: 6px;
    color: var(--text);
    padding: 4px 8px; font-size: 12.5px; font-family: inherit;
    height: 28px; box-sizing: border-box;
    color-scheme: var(--scheme);
    transition: border-color .12s, box-shadow .12s;
}
:is(.op-table, .ag-cell) input[inputmode=decimal], :is(.op-table, .ag-cell) input[type=number] {
    text-align: right; font-variant-numeric: tabular-nums;
}
:is(.op-table, .ag-cell) input:not([type=checkbox]):not([type=radio]):hover:not([readonly]) {
    border-color: var(--field-border-hover);
}
:is(.op-table, .ag-cell) input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}
:is(.op-table, .ag-cell) input[readonly] { background: transparent; border-color: transparent; color: var(--muted); }
:is(.op-table, .ag-cell) input[type=checkbox] {
    width: 16px; height: 16px; margin: 0; vertical-align: middle;
    accent-color: var(--accent); cursor: pointer; color-scheme: var(--scheme);
}

/* ── Zgłoś pomysł (pomysly.php) ─────────────────────────────────────────────── */
.pm-karta { margin-bottom: 18px; }
.pm-form textarea {
    width: 100%; box-sizing: border-box; min-height: 160px; resize: vertical;
    background: var(--bg); border: 1px solid var(--field-border); border-radius: 6px;
    color: var(--text); padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.5;
}
.pm-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.pm-pasek { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.pm-za-dlugo { color: var(--c-bad); font-weight: 600; }
.pm-blad, .pm-ok { border-radius: 6px; padding: 9px 12px; font-size: 13px; margin: 0 0 12px; }
.pm-blad { background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3); color: var(--c-bad); }
.pm-ok   { background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.4); color: var(--c-ok); }
.pm-wpis { padding: 12px 0; border-bottom: 1px solid var(--border); }
.pm-wpis:last-child { border-bottom: none; }
.pm-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
/* pre-wrap: odpowiedzi pisane są punkt po punkcie — bez tego zwijają się w jeden akapit. */
.pm-tresc, .pm-odp { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.pm-tresc { margin-top: 6px; }
.pm-odp { margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--hover); font-size: 13px; }
.pm-status { border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 700; }
.pm-st-nowy      { background: #1e3a5f; color: #bfdbfe; }
.pm-st-rozwazam  { background: rgba(245,158,11,.18); color: var(--c-warn); }
.pm-st-zrobione  { background: rgba(34,197,94,.16); color: var(--c-ok); }
.pm-st-odrzucone { background: rgba(148,163,184,.18); color: #cbd5e1; }
/* Conversation on an idea (07.10): messages from the box blue, mine yellow — as in :8000 / :5001. */
.pm-nowa { border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 700; background: var(--red); color: #fff; }
.pm-wiad { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--link); background: var(--hover); border-radius: 4px; }
.pm-wiad-moja { border-left-color: var(--accent); }
.pm-wiad-tresc { white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.45; }
.pm-odp-form { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
.pm-odp-form textarea { flex: 1; min-height: 34px; }
/* Popup on every page: a new message on my idea. Above the content, below nothing else fixed. */
.pm-popup { position: fixed; right: 16px; bottom: 16px; z-index: 900; width: 340px; max-width: calc(100vw - 32px);
            background: var(--surface); color: var(--text); border: 1px solid var(--accent); border-radius: var(--radius);
            box-shadow: var(--shadow); padding: 10px 12px; }
.pm-popup-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.pm-popup-head form { margin: 0; }
.pm-popup-x { background: transparent; border: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.pm-popup-tekst { margin-top: 6px; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.pm-popup-form textarea { width: 100%; margin-top: 8px; box-sizing: border-box; }
.pm-popup-btns { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
@media print { .pm-popup { display: none; } }

/* ── Pasek stron pod listą (lib/stronicowanie.php, pomysł RCh #104) — ten sam układ co :8000 ── */
.stronicowanie { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
.stronicowanie .days-btn { text-decoration: none; }

/* Pasek „dokąd dalej" nad ekranami CRM — te same pigułki co „← wróć" na karcie klienta,
   zamiast podkreślonych linków sklejonych kropką (właściciel 30.09: „dont like these"). */
.op-nawigacja { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }

/* Siatka checkboxów (grupy OPTI). Było inline-block z min-width: długa nazwa rozpychała komórkę
   i każdy wiersz łamał się gdzie indziej — kolumny się rozjeżdżały. Teraz równe kolumny,
   a długa nazwa zawija się W SWOJEJ komórce. */
.op-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 18px; }
.op-checks label { display: flex; align-items: flex-start; gap: 6px; line-height: 1.35; cursor: pointer; }
.op-checks input[type=checkbox] { flex: none; margin-top: 2px; }
.op-check-txt { min-width: 0; }
.op-check-sym { margin-left: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.stronicowanie .stronicowanie-rozmiar { margin-left: auto; }

/* ── Wspólne okna wierszy (static/crm-wiersze.js) — jedno okno na stronę zamiast formularza w wierszu ── */
.op-dialog {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px 18px; width: min(420px, calc(100vw - 32px));
    box-shadow: var(--shadow);
}
.op-dialog::backdrop { background: rgba(0,0,0,.55); }
.op-dialog .op-dialog-tytul { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.op-dialog .op-dialog-przyciski { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* 02.10 (zrzut właściciela): pola tekstowe i przełączniki TAK/NIE na wnioskach wyglądały jak goła
   przeglądarka — białe pole i czcionka maszynowa na ciemnej stronie. Reguła na sam element ma
   najniższą wagę, więc pola już ostylowane (.kontakt-form, .pm-form) zostają, jak były. */
textarea {
    background: var(--bg); color: var(--text);
    border: 1px solid var(--field-border); border-radius: 6px;
    padding: 8px 10px; font-family: inherit; font-size: 13px; line-height: 1.5;
    box-sizing: border-box; resize: vertical; color-scheme: var(--scheme);
    transition: border-color .12s, box-shadow .12s;
}
textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
textarea[readonly] { background: var(--readonly-bg); }
input[type=radio], input[type=checkbox] { accent-color: var(--accent); }

/* Alpine.js (02.10): element z x-cloak ukryty, dopóki Alpine nie wystartuje — bez mignięcia podpowiedzi. */
[x-cloak] { display: none !important; }

/* Siatka AG Grid (02.10): wartość wymagająca uwagi, np. „nie dowieziono” w Wolumenie. */
.siatka-uwaga { color: var(--red); font-weight: 600; }

/* ── Jasny motyw: elementy z własnymi kolorami (pigułki na ciemnym tle) ────────────────────── */
[data-motyw="jasny"] .wind-blok  { background: #fee2e2; color: #991b1b; }
[data-motyw="jasny"] .wind-ugoda { background: #dcfce7; color: #166534; }
[data-motyw="jasny"] .wind-uwaga { background: #ffedd5; color: #9a3412; }
[data-motyw="jasny"] .wind-etap  { background: #dbeafe; color: #1e40af; }
[data-motyw="jasny"] .pm-st-nowy { background: #dbeafe; color: #1e40af; }
[data-motyw="jasny"] .pm-st-odrzucone { color: #475569; }
[data-motyw="jasny"] .op-header .obecnosc-chip.pusty { background: #94a3b8; }
[data-motyw="jasny"] .kontakt-pilne,
[data-motyw="jasny"] .price-card.selected::after { color: #b45309; }   /* bursztyn jako TEKST na bieli */
[data-motyw="jasny"] .crm-blokada { color: #b91c1c; }                  /* red text on white, must beat .kontakt-pilne */
[data-motyw="jasny"] .op-card, [data-motyw="jasny"] .dane, [data-motyw="jasny"] .filtry,
[data-motyw="jasny"] .op-header, [data-motyw="jasny"] .op-stat, [data-motyw="jasny"] .chart-card {
    box-shadow: 0 1px 2px rgba(15,23,42,.05);
}

/* Przełącznik motywu w nagłówku — obrys, jak „Opis zmian" obok. */
.op-header .motyw-btn {
    background: transparent; color: var(--text); border: 1px solid var(--border);
    padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.op-header .motyw-btn:hover { background: var(--hover); opacity: 1; }