/* ============================================================
   SPRZEDAŻ POJAZDÓW — stock i ustawienia (page-sprzedaz.jsx, docs/42) — 2026-10-17
   Ten sam język co PG&A i reszta systemu: karty .card, liczby .stat, segmenty
   .tweak-segments, pola .zakres-pole, okna Okno. Etap pieniądza niesie kształt
   i słowo (● termin, ◆ finansowanie, ■ zapłacony) — kolor tylko dokłada
   (zielony / żółty / czerwony: decyzja właściciela, słownik ETAPY_PLATNOSCI_STOCKU).
============================================================ */
.sp .pga-kpi .stat-value{font-size:21px}

/* etap pieniądza, stan, alarm */
.sp-etap{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;white-space:nowrap;color:var(--text-1)}
.sp-etap i,.sp-kropka{font-style:normal;font-size:12px;line-height:1}
.sp-etap.is-ok i,.sp-kropka.is-ok{color:var(--sem-ok)}
.sp-etap.is-warn i,.sp-kropka.is-warn{color:var(--sem-warn)}
.sp-etap.is-error i,.sp-kropka.is-error{color:var(--sem-error)}
.sp-stan{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:var(--radius-1);background:var(--surf-2);font-size:11px;font-weight:700;color:var(--text-2);white-space:nowrap}
.sp-stan.is-droga{background:var(--sem-info-bg);color:var(--sem-info)}
.sp-alarm{display:inline-flex;font-size:11.5px;white-space:nowrap}
/* alarm: ten sam kształt co plakietki (promień --radius-1), znak ▲ ● ◆ w treści niesie wagę */
.sp-alarm b{padding:1px 8px;border-radius:var(--radius-1);font-weight:800}
.sp-alarm.is-error b{background:var(--sem-error-bg);color:var(--sem-error)}
.sp-alarm.is-warn b{background:var(--sem-warn-bg);color:var(--sem-warn)}
.sp-alarm.is-info b{background:var(--sem-info-bg);color:var(--sem-info)}

/* do decyzji */
.sp-reakcje{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}

/* filtry */
.sp-select{min-width:180px}
/* Stock: filtry nad listą (docs/42 §11, zgłoszenie 2026-10-18) */
.sp-filtry{display:grid;gap:8px;margin-bottom:4px}
.sp-filtry-rzad{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sp-filtry-rzad .pga-szukaj{flex:1 1 260px}
.sp-filtry .pga-tylko{margin:2px 0 6px}
.sp-kosztuja{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px;margin-bottom:12px;border:1px solid var(--line-1);border-left:3px solid var(--sem-error);border-radius:var(--radius-1);background:var(--surf-1)}
.sp-kosztuja-tekst{flex:1 1 320px;display:flex;flex-direction:column;gap:2px}
.sp-kosztuja-tekst b{font-size:14px}
.sp-kosztuja-tekst em{font-style:normal;font-size:12.5px;color:var(--text-2)}
.sp-wiersz-decyzja{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:4px;font-size:12.5px;color:var(--text-2);line-height:1.4}
.sp-wiersz-decyzja > span{flex:1 1 260px}
.sp-sort-lbl{font-size:12px}

/* tabela stocku — siatka, na węższych ekranach karta z etykietami */
.sp-zaznaczenie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;min-height:38px;margin:6px 0 2px;font-size:12.5px}
.sp-tabela{display:flex;flex-direction:column}
.sp-wiersz{display:grid;grid-template-columns:34px minmax(230px,2.4fr) minmax(150px,1.3fr) 110px 120px 110px 110px;gap:8px;align-items:center;padding:8px 0}
.sp-wiersz.is-bez-zakupu{grid-template-columns:34px minmax(230px,2.6fr) minmax(150px,1.4fr) 130px 120px}
.sp-wiersz.is-zaznaczony{background:color-mix(in oklab, var(--primary) 5%, transparent)}
.sp-zaznacz{display:inline-grid;place-items:center;width:32px;height:32px;cursor:pointer}
.sp-kom{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:12.5px}
.sp-kom em{font-style:normal;font-size:11px;color:var(--text-3)}
.sp-wiersz-alarmy{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.sp-brak{color:var(--sem-warn);font-weight:700}

/* okna */
.sp-skutek{margin-right:auto;font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.sp-skutek b{color:var(--text-1)}
.sp-odstep{margin-top:12px}
.sp-pole-szerokie{width:150px}
.sp .zakres-pole,.sm-okno .sp-pole-szerokie{height:32px}
/* liczba bierze resztę pola, jednostka obok — wpisana wartość zawsze ma co najmniej 56 px */
.sp .zakres-liczba,.sm-okno .sp-pole-szerokie .zakres-liczba{height:30px;width:auto;flex:1 1 56px;min-width:56px}
.sp .pga-zal-pole > .zakres-pole{width:auto;min-width:150px}
.sp-powod{flex:1 1 260px}
.sp-pominieta{font-style:normal;color:var(--text-3)}
.sp-ceny{font-variant-numeric:tabular-nums}
.sp-ceny em,.sp-em{font-style:normal;font-weight:500;color:var(--text-3)}
.sp-sz-gora{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12.5px}
.sp-cena-duza{font-size:18px;font-variant-numeric:tabular-nums}

/* płatności */
.sp-kolejka{list-style:none;margin:0;padding:0}
.sp-kolejka li{display:grid;grid-template-columns:150px minmax(220px,1fr) 130px auto;gap:6px 14px;align-items:center;padding:9px 0;border-top:1px solid var(--line-1);font-size:12.5px}
.sp-kol-data{display:flex;flex-direction:column}
.sp-kol-data em,.sp-kol-kwota em{font-style:normal;font-size:11px;color:var(--text-3)}
.sp-kolejka li.is-zalegla .sp-kol-data em{color:var(--sem-error);font-weight:800}
.sp-kol-co{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.sp-kol-kwota{display:flex;flex-direction:column;text-align:right;font-variant-numeric:tabular-nums}
.sp-suma{margin:10px 0 0;text-align:right;font-size:13px;color:var(--text-2)}
.sp-suma b{color:var(--text-1);font-variant-numeric:tabular-nums}

/* cennik, modele, faktury */
.sp-cennik li{min-height:44px}
.sp-kod-tekst{font-family:var(--font-mono);font-size:11.5px}
.sp-kod{width:140px;font-family:var(--font-mono)}
.sp-rok{width:96px}
.sp-csv{width:100%;font-family:var(--font-mono);font-size:12px}
.sp-blad{color:var(--sem-error)}
.sp-profil + .sp-profil{margin-top:8px}
.sp-przyklad{margin-top:8px;max-width:none}

/* raport właściciela */
.sp-raport{list-style:none;margin:0;padding:0}
.sp-raport > li{padding:12px 0;border-top:1px solid var(--line-1)}
.sp-raport-glowa{display:flex;flex-direction:column;align-items:flex-start}
.sp-raport-liczby{display:flex;flex-wrap:wrap;gap:4px 18px;margin:4px 0;font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.sp-raport-liczby b{color:var(--text-1)}
.sp-akcje-lista{list-style:none;margin:4px 0 0;padding:0 0 0 12px;border-left:2px solid var(--line-2)}
.sp-akcje-lista li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding:3px 0;font-size:12px;color:var(--text-2)}
.sp-brak-akcji{color:var(--sem-warn) !important;font-weight:800}

@media (max-width: 1180px){
  .sp-tabela .pga-naglowek{display:none}
  .sp-wiersz,.sp-wiersz.is-bez-zakupu{position:relative;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 12px}
  /* zaznaczenie w rogu karty, nazwa na całą szerokość */
  .sp-wiersz .sp-zaznacz{position:absolute;top:4px;right:0}
  .sp-wiersz .pga-poz{grid-column:1/-1;padding-right:38px}
  .sp-wiersz .pga-liczba{text-align:left}
  .sp-wiersz [data-etykieta]::before{content:attr(data-etykieta);display:block;font-size:11px;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
  .sp-reakcje{justify-content:flex-start}
  .sp-kolejka li{grid-template-columns:130px 1fr}
  .sp-kol-kwota{text-align:left}
  .sp-kolejka .pga-akcje{grid-column:1/-1;justify-content:flex-start}
}
@media (max-width: 600px){
  .sp-select{min-width:0;width:100%}
  .sp-kolejka li{grid-template-columns:1fr}
  .sp .pga-tylko-akcje .sp-select{flex:1 1 auto}
  .sp-pole-szerokie{width:100%}
  .sp-filtry-rzad .tweak-segments{display:flex;flex-wrap:wrap;width:100%}
  .sp-filtry-rzad .tweak-segments button{flex:1 1 auto;min-height:44px}
}

/* ============================================================
   OFERTY (page-oferty.jsx, docs/42 S2) — edycja w kolejności rozmowy,
   lista ofert, strona klienta (klocki kl-* ze strony rozszerzenia).
============================================================ */
.of-sekcja{border-top:1px solid var(--line-1);padding:10px 0}
.of-sekcja:first-child{border-top:0;padding-top:0}
.of-sekcja-glowa{display:flex;align-items:center;gap:12px;min-height:40px}
.of-nr{display:inline-grid;place-items:center;flex:0 0 26px;height:26px;border-radius:50%;border:1px solid var(--line-2);font-size:12px;font-weight:800;color:var(--text-2)}
.of-sekcja.is-otwarta .of-nr{background:var(--primary);border-color:var(--primary);color:var(--text-inv)}
.of-sekcja-co{flex:1;display:flex;flex-direction:column;min-width:0}
.of-sekcja-co b{font-size:14px}
.of-sekcja-co span{font-size:12.5px;color:var(--text-2)}
.of-sekcja-tresc{padding:10px 0 4px 38px}
.of-szukaj-rzad{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.of-szukaj-rzad .input{flex:1 1 240px}
.of-kolor{flex:0 1 200px !important}
/* filtry wyboru pojazdu w ofercie: marka (segment), rodzaj, model, szukaj — jak w stocku */
.of-filtry-pojazdu{display:grid;gap:8px;margin:10px 0 4px}
.of-filtry-pojazdu .of-szukaj-rzad{margin:0;align-items:center}
.of-filtry-pojazdu .of-szukaj{flex:1 1 220px}
.of-filtry-pojazdu .pga-param-opis{margin:0}
@media (max-width: 720px){
  .of-filtry-pojazdu .tweak-segments{display:flex;flex-wrap:wrap}
  .of-filtry-pojazdu .tweak-segments button{flex:1 1 auto;min-height:44px}
  .of-filtry-pojazdu .sp-select{flex:1 1 100%}
}
.of-wybor li{min-height:44px}
.of-pozycje li{min-height:44px}
.of-stepper{justify-content:flex-start}
.of-stepper .pole-stepper-val{width:42px}
.of-gratis{display:inline-flex;align-items:center;gap:6px;min-height:30px;font-size:12.5px;color:var(--text-2);cursor:pointer}
.of-kwota{min-width:96px;text-align:right;font-variant-numeric:tabular-nums}
.of-rabat{display:flex;align-items:center;gap:8px}
.of-podsumowanie{padding:12px 14px;margin:6px 0;background:var(--surf-1);border-radius:var(--radius-2)}
.of-akceptacja{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-top:10px;padding:10px 12px;border-radius:var(--radius-1);background:var(--sem-warn-bg);font-size:12.5px;color:var(--text-1)}
.of-akceptacja b{color:var(--sem-warn)}
.of-akceptacja.is-ok{background:var(--sem-ok-bg)}
.of-akceptacja.is-ok b{color:var(--sem-ok)}
.of-adres{max-width:320px}
.of-glowa{border-top:0;padding-top:0}
.of-nowa{margin-left:auto}
.of-lista{list-style:none;margin:10px 0 0;padding:0}
.of-lista > li{border-top:1px solid var(--line-1)}
.of-wiersz{display:grid;grid-template-columns:minmax(220px,1.6fr) minmax(220px,1.4fr) 160px;gap:6px 16px;align-items:center;width:100%;padding:10px 0;background:none;border:0;color:var(--text-1);font:inherit;text-align:left;cursor:pointer;min-height:56px}
.of-wiersz:hover .of-w-kto b{color:var(--primary);text-decoration:underline}
.of-wiersz:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.of-w-kto,.of-w-stan,.of-w-kwota{display:flex;flex-direction:column;gap:3px;min-width:0}
.of-w-stan{align-items:flex-start}
.of-wiersz em{font-style:normal;font-size:11.5px;color:var(--text-3)}
.of-w-kwota{text-align:right;font-variant-numeric:tabular-nums}
.of-odpowiedz{display:flex;flex-direction:column;gap:12px}
.of-lewo{justify-content:flex-start}
.of-lewo .input{flex:1 1 200px;min-height:34px}
.of-kod{font-family:var(--font-mono);font-size:22px;letter-spacing:.3em;text-align:center;min-height:52px}
@media (max-width: 900px){
  .of-wiersz{grid-template-columns:1fr auto}
  .of-w-stan{grid-column:1/-1;grid-row:2}
  .of-sekcja-tresc{padding-left:0}
}
@media (max-width: 600px){
  .of-nowa{margin-left:0;width:100%}
  .of-rabat{flex-wrap:wrap}
  .of-adres{max-width:none}
}
@media (max-width: 600px){
  /* lista ofert: jedna kolumna — nazwisko klienta nie łamie się na dwie linijki obok kwoty */
  .of-wiersz{grid-template-columns:1fr}
  .of-w-stan{grid-column:auto;grid-row:auto}
  .of-w-kwota{text-align:left}
  /* skutek (kwota, braki) nad przyciskami okna, nie ucięty z lewej */
  .sm-okno-stopka:has(.sp-skutek){flex-wrap:wrap}
  .sm-okno-stopka .sp-skutek{flex:1 1 100%;margin-right:0}
}

/* sprzedaż z oferty (S3) */
.of-sprzedaz{display:flex;flex-direction:column;gap:8px;width:100%}