/* =====================================================================
   Bieg Piastów — warstwa wizualna
   Paleta i układ odwzorowane z panelu 50. BP: żółty pasek, ciemna belka
   powitalna, białe karty z okrągłą ikoną, licznik kroków z kółkami.
   ===================================================================== */

:root{
  --bp-zolty:      #ffd500;
  --bp-zolty-ciem: #d4ac00;
  --bp-zolty-jasn: #fdf6dc;
  --bp-ciemny:     #1c1f23;
  --bp-ciemny-2:   #2b2f26;
  --bp-tekst:      #21252a;
  --bp-tekst-mgl:  #6c757d;
  --bp-tlo:        #f5f6f8;
  --bp-obrys:      #e4e7ea;
  --bp-cien:       0 4px 16px rgba(15,18,22,.06);
  --bp-cien-mocny: 0 12px 32px rgba(15,18,22,.12);
}

body{
  background: var(--bp-tlo);
  color: var(--bp-tekst);
  font-family: 'Lato', 'Segoe UI', Tahoma, sans-serif;
}

/* --------------------------- pasek górny --------------------------- */
.pasek{ background: var(--bp-zolty); padding:.55rem 0; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.pasek-marka{ display:flex; align-items:center; gap:.9rem; text-decoration:none; color:var(--bp-ciemny); min-width:0; }
.pasek-marka img{ height:44px; width:auto; flex:none; }
.pasek-marka span{ font-weight:900; text-transform:uppercase; font-size:1.05rem; line-height:1.15; }
.pasek-akcje{ display:flex; align-items:center; gap:.4rem; flex:none; }

.pasek-jezyk{
  border:1.5px solid rgba(28,31,35,.55); background:transparent; color:var(--bp-ciemny);
  font-weight:700; font-size:.8rem; padding:.15rem .5rem; border-radius:5px;
  text-decoration:none; line-height:1.6;
}
.pasek-jezyk:hover{ background:rgba(28,31,35,.1); color:var(--bp-ciemny); }
.pasek-jezyk.wybrany{ background:var(--bp-ciemny); border-color:var(--bp-ciemny); color:var(--bp-zolty); }

/* wejście do panelu organizatora */
.pasek-panel{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--bp-ciemny); color:var(--bp-zolty);
  font-weight:700; font-size:.8rem; text-transform:uppercase;
  padding:.3rem .75rem; border-radius:5px; text-decoration:none; margin-right:.35rem;
}
.pasek-panel:hover{ background:#000; color:var(--bp-zolty); }

/* ---------------------- belka powitalna (hero) --------------------- */
.powitanie{
  background:linear-gradient(115deg, var(--bp-ciemny) 0%, var(--bp-ciemny-2) 100%);
  color:#fff; padding:2.75rem 0;
}
.powitanie h1{ font-weight:300; font-size:clamp(2rem,4.5vw,3.25rem); color:var(--bp-zolty); margin:0 0 .35rem; }
.powitanie p{ color:rgba(255,255,255,.82); margin-bottom:1rem; }
.powitanie-miejsce{ font-size:.95rem; color:rgba(255,255,255,.6) !important; }

.znacznik{ display:inline-block; font-size:.78rem; font-weight:700; padding:.3rem .7rem; border-radius:5px; margin-right:.4rem; }
.znacznik-zolty{ background:var(--bp-zolty); color:var(--bp-ciemny); }
.znacznik-obrys{ border:1px solid rgba(255,255,255,.45); color:#fff; }

/* --------------------------- kafle menu ---------------------------- */
.kafel{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; text-align:center; text-decoration:none;
  background:#fff; border-radius:14px; padding:2.25rem 1.5rem;
  color:var(--bp-tekst); box-shadow:var(--bp-cien);
  border-bottom:4px solid transparent; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.kafel:hover{ transform:translateY(-4px); box-shadow:var(--bp-cien-mocny); border-bottom-color:var(--bp-zolty); color:var(--bp-tekst); }
.kafel-ikona{
  width:68px; height:68px; border-radius:50%;
  background:var(--bp-zolty-jasn); color:var(--bp-zolty-ciem);
  display:grid; place-items:center; font-size:1.6rem; margin-bottom:1.4rem;
  transition:background .2s, color .2s;
}
.kafel:hover .kafel-ikona{ background:var(--bp-zolty); color:var(--bp-ciemny); }
.kafel-tytul{ font-weight:800; text-transform:uppercase; font-size:1.05rem; margin-bottom:.4rem; }
.kafel-opis{ font-size:.88rem; color:var(--bp-zolty-ciem); }

/* ------------------------------ karty ------------------------------ */
.karta{ background:#fff; border:none; border-radius:14px; box-shadow:var(--bp-cien); overflow:hidden; }
.karta + .karta{ margin-top:1.25rem; }
.karta-naglowek{ background:var(--bp-ciemny); color:#fff; padding:1.1rem 1.75rem; font-size:1.2rem; font-weight:400; }

/* --------------------------- licznik kroków ------------------------ */
.kroki{ list-style:none; display:flex; align-items:flex-start; padding:0; margin:0 auto 2rem; max-width:60rem; }
.kroki li{ flex:1; position:relative; text-align:center; }
.kroki li:not(:last-child)::after{
  content:''; position:absolute; top:19px; left:calc(50% + 22px); right:calc(-50% + 22px);
  height:2px; background:var(--bp-obrys);
}
.kroki li.zrobiony:not(:last-child)::after{ background:var(--bp-zolty-ciem); }
.kroki .kropka{
  width:40px; height:40px; border-radius:50%; margin:0 auto;
  display:grid; place-items:center; font-weight:700; font-size:.95rem;
  background:#6c757d; color:#fff; position:relative; z-index:1;
}
.kroki .aktywny .kropka{ background:var(--bp-zolty-ciem); color:#fff; }
.kroki .zrobiony .kropka{ background:var(--bp-ciemny); color:var(--bp-zolty); }
.kroki .etykieta{ display:block; margin-top:.5rem; font-size:.78rem; color:var(--bp-tekst-mgl); }
.kroki .aktywny .etykieta{ color:var(--bp-tekst); font-weight:700; }
@media (max-width:575.98px){ .kroki .etykieta{ display:none; } }

/* ------------------------------ wybory ----------------------------- */
.wybor{
  display:block; height:100%; cursor:pointer;
  background:#fff; border:2px solid var(--bp-obrys); border-radius:12px;
  padding:1.1rem 1.35rem; transition:border-color .15s, box-shadow .15s;
}
.wybor:hover{ border-color:#c4c9cf; }
.wybor.zaznaczony{ border-color:var(--bp-zolty); box-shadow:0 0 0 3px rgba(255,213,0,.28); }
.wybor.niedostepny{ opacity:.55; cursor:not-allowed; background:#fafbfc; }
.wybor .cena{ font-size:1.2rem; font-weight:800; }

/* ------------------------------ przyciski -------------------------- */
.btn-bp{ background:var(--bp-zolty); color:var(--bp-ciemny); font-weight:800; border:none; border-radius:7px; padding:.6rem 1.5rem; }
.btn-bp:hover{ background:#f0c800; color:var(--bp-ciemny); }
.btn-bp:disabled{ background:#d9dde1; color:#8b9199; }
.btn-outline-dark{ border-radius:7px; font-weight:700; }

/* --------------------------- ramka z podpowiedzią ------------------ */
.ramka-info{ background:var(--bp-zolty-jasn); border:1px solid #f0dda0; border-radius:10px; padding:1.1rem 1.25rem; }

.suma{ font-size:1.75rem; font-weight:800; }
.rabat{ color:#1a7f37; }
.tabela-podsumowania td{ vertical-align:middle; }

/* --------------------- gadżety i usługi ---------------------------- */
/* jeden gadżet = jedna ramka; na telefonie czytelniejsze niż tabela */
.karta-dodatek{
  background:#fff; border:1px solid var(--bp-obrys); border-radius:12px; padding:.9rem;
}
/* wyróżniamy gadżet, który zawodnik ma już w zamówieniu */
.karta-dodatek.ma-pozycje{
  border-color:var(--bp-zolty); box-shadow:0 0 0 3px rgba(255,213,0,.2);
}
/* Pakiet cyklu (Szlem) to nie koszulka — kosztuje kilkaset złotych i zmienia
   plany na cały rok, więc karta ma odstawać od listy gadżetów. Samo
   wyróżnienie, bez treści: bez tego arkusza karta działa dalej. */
.karta-dodatek.karta-cykl{
  border-color:var(--bp-zolty-ciem); border-width:2px;
  background:linear-gradient(180deg,#fffdf2 0,#fff 60%);
}
/* Pakiet, którego nie da się wziąć, bo wybrany jest inny z tej samej grupy.
   Zostaje czytelny — tylko przestaje wyglądać na ofertę. */
.karta-dodatek.karta-cykl.niedostepny{
  border-color:var(--bp-obrys); border-width:1px; background:#fcfcfd;
}
.wybor-tak-nie .wybor{ padding:.8rem 1rem; text-align:center; }
.wybor-ubezp{ text-align:left; }

/* zgłoszenie zapisane, ale nieopłacone — to musi kłuć w oczy */
.ramka-pilne{ border-left:4px solid var(--bp-zolty-ciem); }

/* rachunek rozbity na grupy: starty, zniżki, gadżety, ubezpieczenie */
.grupa-pozycji + .grupa-pozycji{ border-top:1px dashed var(--bp-obrys); padding-top:.75rem; }
.grupa-pozycji .table td{ border-color:transparent; }

/* ---------------- zgłoszenia dzieci przez opiekuna ----------------- */
/* Kto jest zapisywany — pasek musi być widoczny na każdym kroku, żeby
   rodzic nie wpisał danych dziecka w swoim formularzu i odwrotnie. */
.pasek-osoby{
  display:flex; align-items:center; gap:.85rem;
  background:#fff; border:1px solid var(--bp-obrys); border-left:4px solid var(--bp-zolty);
  border-radius:12px; padding:.7rem .9rem;
}
.awatar{
  flex:0 0 auto; width:2.6rem; height:2.6rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bp-zolty-jasn); color:var(--bp-ciemny);
}
.awatar-dziecko{ background:#e7f1ff; color:#0b5ed7; }
.awatar-dodaj{ background:#eef0f2; color:var(--bp-tekst-mgl); }

/* karta osoby na ekranie wyboru — klikalna w całości, wygodna na telefonie */
.wybor-osoba{
  border-width:1px; padding:.85rem 1rem;
  background:#fff; color:inherit; text-align:left;
}
.wybor-osoba:hover{ border-color:var(--bp-zolty); }
.wybor-plec{ padding:.7rem .5rem; }

/* zastrzeżenie pod mockupem gadżetu — ma być czytelne, ale nie krzyczeć */
.poglad{ font-size:.72rem; line-height:1.25; color:var(--bp-tekst-mgl); }

/* ---------------------------- stopka ------------------------------- */
.stopka{ background:#fff; border-top:1px solid var(--bp-obrys); }

/* --------------------- panel organizatora -------------------------- */
.admin-bok{ background:var(--bp-ciemny); min-height:100vh; }
.admin-bok a{ color:#c7cbd1; text-decoration:none; display:block; padding:.55rem .9rem; border-radius:8px; font-size:.94rem; }
.admin-bok a:hover,.admin-bok a.aktywny{ background:rgba(255,213,0,.15); color:var(--bp-zolty); }

/* --------------------------- proste słupki ------------------------- */
.slupek{ display:grid; grid-template-columns:9rem 1fr 3rem; align-items:center;
  gap:.75rem; margin-bottom:.5rem; font-size:.9rem; }
.slupek-etykieta{ color:var(--bp-tekst-mgl); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slupek-pasek{ background:var(--bp-obrys); border-radius:4px; height:12px; overflow:hidden; }
.slupek-pasek i{ display:block; height:100%; background:var(--bp-zolty); border-radius:4px; }
.slupek-liczba{ text-align:right; font-weight:700; }
@media (max-width:575.98px){ .slupek{ grid-template-columns:6.5rem 1fr 2.5rem; } }

/* =====================================================================
   Telefon na pierwszym miejscu — z formularza korzysta głównie mobile
   ===================================================================== */

/* iOS przybliża stronę przy polach mniejszych niż 16px */
.form-control, .form-select{
  font-size:16px; min-height:2.9rem; border-radius:9px;
}
.form-control:focus, .form-select:focus{
  border-color:var(--bp-zolty-ciem); box-shadow:0 0 0 .2rem rgba(255,213,0,.25);
}
.form-label{ font-weight:600; font-size:.92rem; margin-bottom:.3rem; }

/* wygodniejsze cele dotyku */
.form-check-input{ width:1.25rem; height:1.25rem; margin-top:.15rem; }
.form-check-label{ padding-left:.15rem; }
.form-check-input:checked{ background-color:var(--bp-ciemny); border-color:var(--bp-ciemny); }

/* pasek akcji kroku: na telefonie przyklejony na dole, pełna szerokość */
.akcje-kroku{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
@media (max-width:767.98px){
  .akcje-kroku{
    position:sticky; bottom:0; z-index:20;
    background:rgba(245,246,248,.97); backdrop-filter:blur(6px);
    margin:1rem -12px 0; padding:.75rem 12px calc(.75rem + env(safe-area-inset-bottom));
    border-top:1px solid var(--bp-obrys);
  }
  .akcje-kroku .btn{ flex:1; }
  .akcje-kroku .btn-lg{ padding:.7rem 1rem; font-size:1rem; }

  main.container{ padding-left:12px; padding-right:12px; }
  .karta{ border-radius:12px; }
  .karta-naglowek{ padding:.85rem 1rem; font-size:1.05rem; }
  .wybor{ padding:.9rem 1rem; }
  .powitanie{ padding:1.75rem 0; }
  .powitanie h1{ font-size:1.75rem; }
  .kafel{ padding:1.5rem 1rem; }
  .kafel-ikona{ width:54px; height:54px; font-size:1.25rem; margin-bottom:.9rem; }
  .suma{ font-size:1.4rem; }
  .pasek-marka img{ height:34px; }
  .pasek-marka span{ font-size:.8rem; }
  .pasek-panel span{ display:none; }
}

/* tabele w kartach nie mogą rozpychać strony na telefonie */
@media (max-width:575.98px){
  .table{ font-size:.88rem; }
  .table td, .table th{ padding:.5rem .4rem; }
}

/* --------------------- edytor tłumaczeń ---------------------------- */
.brak-tlumaczenia{ background:#fff8e1; border-color:#f0dda0; }
.pasek-zapisu{
  position:sticky; bottom:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:rgba(255,255,255,.97); backdrop-filter:blur(6px);
  border:1px solid var(--bp-obrys); border-radius:12px;
  padding:.75rem 1rem; box-shadow:0 -4px 16px rgba(15,18,22,.08);
}

/* --------------------- edytor tekstu (Trix) ------------------------- */
/* Załączników nie obsługujemy - patrz public/assets/js/edytor.js */
trix-toolbar .trix-button-group--file-tools{ display:none; }

trix-editor.edytor{
  min-height:9rem; max-height:26rem; overflow-y:auto;
  border:1px solid #ced4da; border-radius:.375rem;
  padding:.5rem .75rem; background:#fff;
  font-size:.95rem; line-height:1.5;
}
trix-editor.edytor:focus{
  border-color:#86b7fe; box-shadow:0 0 0 .25rem rgba(13,110,253,.25);
}
trix-editor.edytor h1{ font-size:1.05rem; font-weight:700; margin:.4rem 0; }
trix-editor.edytor ul, trix-editor.edytor ol{ padding-left:1.2rem; }
trix-toolbar{ margin-bottom:.35rem; }

/* opis gadżetu po stronie zawodnika - te same znaczniki, mniejsza skala */
.opis-gadzetu{ font-size:.85rem; line-height:1.45; }
.opis-gadzetu > *:last-child{ margin-bottom:0; }
.opis-gadzetu p, .opis-gadzetu div, .opis-gadzetu ul, .opis-gadzetu ol{ margin-bottom:.35rem; }
.opis-gadzetu ul, .opis-gadzetu ol{ padding-left:1.1rem; }
.opis-gadzetu h1, .opis-gadzetu h2, .opis-gadzetu h3{
  font-size:.95rem; font-weight:700; margin:.35rem 0;
}
.opis-gadzetu blockquote{
  margin:.35rem 0; padding-left:.6rem; border-left:3px solid var(--bp-obrys);
}
.opis-gadzetu pre{ white-space:pre-wrap; font-size:.8rem; margin-bottom:.35rem; }

/* ---------- opis gadżetu: zwijanie długich tekstów ------------------ */
/* Pełny opis koszulki potrafi zepchnąć przycisk zakupu poza ekran
   telefonu, więc domyślnie pokazujemy zapowiedź uciętą po 250 znakach.
   W kodzie strony są obie wersje, a przełącza je atrybut „hidden". */
/* Przycisk jest zwykłym <button> - te reguly to tylko wyglad.
   O tym, co widac, decyduje atrybut „hidden" przelaczany skryptem,
   wiec opis dziala poprawnie takze wtedy, gdy ten arkusz sie nie zaladuje. */
.opis-wiecej{
  display:inline-block; margin-top:.2rem; padding:0; cursor:pointer;
  background:none; border:0;
  font-size:.82rem; font-weight:700; color:#0d4b8f; text-decoration:underline;
}
.opis-wiecej:hover{ color:#09325f; }

/* ---------- co zawodnik ma już dołożone do zamówienia --------------- */
.w-zamowieniu{
  background:#f6f8fa; border:1px solid var(--bp-obrys); border-radius:10px;
  padding:.5rem .65rem;
}
.pozycja-gadzetu{
  display:flex; align-items:center; gap:.4rem;
  font-size:.88rem; padding:.3rem 0;
}
.pozycja-gadzetu .nazwa-pozycji{ flex:1 1 auto; min-width:0; }
.pozycja-gadzetu + .pozycja-gadzetu{ border-top:1px dashed var(--bp-obrys); }
.pozycja-gadzetu form{ line-height:1; }

/* przycisk „Dodaj do zamówienia" na telefonie pełną szerokością, pod polami */
.dodaj-gadzet{ margin-top:.25rem; }

/* Na telefonie kolumna ze zdjęciem zabiera jedną trzecią szerokości,
   więc nazwa wariantu i cena nie mieszczą się w jednym wierszu.
   Rozbijamy je na dwa: nazwa, pod nią kwota i „Usuń". */
@media (max-width:575.98px){
  .pozycja-gadzetu{ flex-wrap:wrap; }
  .pozycja-gadzetu .nazwa-pozycji{ flex:1 1 100%; }
  .pozycja-gadzetu > .fw-bold{ margin-right:auto; }
}

/* tłumaczenia opisu w panelu — zwinięte, żeby formularz nie urósł czterokrotnie */
.tlumaczenia-opisu > summary{
  cursor:pointer; font-weight:700; font-size:.9rem;
  padding:.4rem .6rem; background:#f6f8fa;
  border:1px solid var(--bp-obrys); border-radius:8px;
}
.tlumaczenia-opisu[open] > summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }

/* zdjęcie gadżetu otwiera podgląd - sama nakładka stylowana jest w app.js,
   żeby działała także wtedy, gdy ten arkusz nie dojedzie */
.podglad-zdjecia{ display:inline-block; cursor:zoom-in; }
.podglad-zdjecia img{ transition:opacity .15s; }
.podglad-zdjecia:hover img{ opacity:.85; }

/* =====================================================================
   Biuro zawodów — lista zawodników i kartoteka (/admin/zawodnicy)
   Gęściej niż reszta panelu: biuro pracuje na dużym ekranie, z kolejką
   ludzi przy stole, i ma widzieć jak najwięcej bez przewijania.
   Reguły są zawężone do .biuro, żeby nie zmieniać pozostałych ekranów.
   ===================================================================== */
.biuro .form-control, .biuro .form-select{
  font-size:.88rem; min-height:2.15rem; padding:.3rem .55rem; border-radius:6px;
}
.biuro .form-select{ padding-right:1.8rem; background-position:right .45rem center; }
.biuro .form-label{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--bp-tekst-mgl); margin-bottom:.15rem; white-space:nowrap; }
.biuro .form-control:disabled{ background:#f1f3f5; color:#555; }
.biuro #p-kraj, .biuro #p-obywatelstwo{ text-transform:uppercase; }
.biuro .karta{ border-radius:10px; }
.biuro .karta + .karta{ margin-top:0; }

/* pasek tytułu z wyszukiwarką */
.biuro-gora{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; }
.biuro-gora h1{ font-weight:800; }
.biuro-gora .kto{ color:#b58f00; }
.biuro-gora .meta{ font-size:.75rem; color:var(--bp-tekst-mgl); }
.biuro-gora .licznik{ background:#fff; border:1px solid var(--bp-obrys); border-radius:6px; padding:.2rem .6rem; font-size:.85rem; }
.biuro-gora .licznik b{ color:#b58f00; }
.biuro-szukaj{ display:flex; gap:.35rem; flex:1 1 18rem; max-width:30rem; }
.biuro-szukaj .btn{ padding:.3rem .8rem; }

.biuro-filtry{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.biuro-filtry .form-select{ width:auto; max-width:19rem; }

/* nagłówek sekcji: ciemny, cienki — jak w biurze BikeMaratonu */
.biuro-naglowek{
  display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap;
  background:var(--bp-ciemny); color:#fff; padding:.55rem 1rem;
  font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
}
.biuro-naglowek .fas{ color:var(--bp-zolty); }
.btn-naglowek{ background:var(--bp-zolty); color:var(--bp-ciemny); font-weight:700; font-size:.75rem;
  text-transform:none; letter-spacing:0; padding:.15rem .6rem; }
.btn-naglowek:hover{ background:#f0c800; }

.grupa-pol{ font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:#9aa1a9; border-bottom:1px solid var(--bp-obrys); padding-bottom:.2rem; margin:1rem 0 .5rem; }
.grupa-pol:first-of-type{ margin-top:0; }
.znak-pola{ font-size:.6rem; color:#9aa1a9; cursor:help; }

.btn-zapisz{ background:#d7262b; color:#fff; font-weight:800; border:none; border-radius:7px; padding:.45rem 1.2rem; }
.btn-zapisz:hover{ background:#b71f23; color:#fff; }
.btn-zapisz .skrot{ font-weight:400; font-size:.7rem; opacity:.75; margin-left:.25rem; }

/* --- lista --- */
.tabela-biuro{ font-size:.84rem; }
.tabela-biuro thead th{ font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--bp-tekst-mgl);
  background:#f7f8fa; border-bottom:1px solid var(--bp-obrys); white-space:nowrap; }
.tabela-biuro td{ padding:.38rem .5rem; }
.tabela-biuro tbody tr[data-href]{ cursor:pointer; }
.tabela-biuro tbody tr[data-href]:hover > td{ background:var(--bp-zolty-jasn); }
.tabela-biuro .nr a{ color:#b58f00; font-weight:800; text-decoration:none; }
.tabela-biuro .nazwisko a{ color:inherit; font-weight:800; text-decoration:none; }
.tabela-biuro .plec-k{ color:#c2185b; font-weight:700; }
.tabela-biuro .plec-m{ color:#1565c0; font-weight:700; }
.tabela-biuro .biegi{ white-space:nowrap; }

/* start na liście: kod biegu + numer, kolor = status */
.start{ display:inline-block; font-size:.7rem; font-weight:700; line-height:1.5; padding:0 .4rem;
  border-radius:4px; margin:1px 2px 1px 0; border:1px solid transparent; }
.start b{ font-weight:900; }
.st-oplacone.start{ background:#e3f5e8; color:#156f2d; border-color:#b9e3c5; }
.st-oczekuje.start{ background:#fff4cc; color:#7a5c00; border-color:#f0dda0; }
.st-nowe.start{ background:#f1f3f5; color:#555; border-color:#dee2e6; }
.st-anulowane.start{ background:#fff; color:#adb5bd; border-color:#e9ecef; text-decoration:line-through; }
.st-wiecej.start{ background:var(--bp-ciemny); color:var(--bp-zolty); }

/* --- kartoteka --- */
.liczniki{ display:flex; flex-wrap:wrap; gap:.5rem; }
.liczniki > span{ background:#fff; border:1px solid var(--bp-obrys); border-radius:7px; padding:.3rem .7rem; font-size:.85rem; }
.liczniki > span.pilne{ border-color:var(--bp-zolty-ciem); background:var(--bp-zolty-jasn); }

.tabela-biegi{ font-size:.85rem; }
.tabela-biegi thead th{ font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--bp-tekst-mgl);
  background:#f7f8fa; white-space:nowrap; }
.tabela-biegi td{ padding:.4rem .5rem; }
.tabela-biegi .bieg{ min-width:14rem; }
.tabela-biegi tbody.zgl > tr:first-child > td:first-child{ border-left:4px solid transparent; }
.tabela-biegi tbody.st-oplacone > tr:first-child > td:first-child{ border-left-color:#2e9d4f; }
.tabela-biegi tbody.st-oczekuje > tr:first-child > td:first-child{ border-left-color:var(--bp-zolty-ciem); }
.tabela-biegi tbody.st-nowe > tr:first-child > td:first-child{ border-left-color:#adb5bd; }
.tabela-biegi tbody.st-anulowane > tr:first-child > td{ color:#9aa1a9; }
.tabela-biegi tbody.st-anulowane > tr:first-child > td:first-child{ border-left-color:#dc3545; }
.tabela-biegi tbody.podswietl > tr > td{ background:var(--bp-zolty-jasn); }
.tabela-biegi + .tabela-biegi{ border-top:0; }
.tabela-biegi .szczegoly > td{ background:#fafbfc; border-left:4px solid var(--bp-obrys); }
.w-num{ width:5.5rem; } .w-sek{ width:4.5rem; } .w-cena{ width:6.5rem; text-align:right; }
.status-zgl{ min-width:10.5rem; font-weight:700; }
.status-zgl.s-oplacone{ color:#156f2d; } .status-zgl.s-oczekuje{ color:#7a5c00; }
.status-zgl.s-anulowane{ color:#b02a37; } .status-zgl.s-nowe{ color:#555; }
.btn-szczegoly{ border:1px solid var(--bp-obrys); background:#fff; color:var(--bp-tekst-mgl); }
.btn-szczegoly.ma-dane{ border-color:var(--bp-zolty-ciem); color:var(--bp-ciemny); }
.btn-szczegoly[aria-expanded="true"] .fa-chevron-down{ transform:rotate(180deg); }

/* rachunki */
.rachunek{ border:1px solid var(--bp-obrys); border-left:4px solid #adb5bd; border-radius:8px; padding:.55rem .75rem; }
.rachunek + .rachunek, details .rachunek{ margin-top:.6rem; }
.rach-oplacone{ border-left-color:#2e9d4f; }
.rach-oczekuje, .rach-nowe{ border-left-color:var(--bp-zolty-ciem); background:#fffdf3; }
.rach-zwrot{ border-left-color:#dc3545; }
.rach-anulowane{ opacity:.65; }
.rachunek-gora{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; margin-bottom:.3rem; }
.rachunek-gora .kwota{ font-weight:900; font-size:1.05rem; }
.rachunek .pozycje{ font-size:.84rem; }
.rachunek .pozycje td{ border-color:#f0f1f3; padding:.2rem .35rem; background:transparent; }
.rachunek .pozycje .ikona{ width:1.6rem; color:#9aa1a9; text-align:center; }
.rachunek .pozycje tr.cudza td{ color:#9aa1a9; }
.akcje-rach{ margin-top:.45rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.uniewaznione > summary{ cursor:pointer; font-size:.85rem; color:var(--bp-tekst-mgl); }

/* rejestr zmian — zwinięty, otwierany przyciskiem z góry kartoteki */
details.rejestr > summary{ cursor:pointer; list-style:none; }
details.rejestr > summary::-webkit-details-marker{ display:none; }
details.rejestr[open] > summary .fa-chevron-down{ transform:rotate(180deg); }

/* pasek „niezapisane zmiany” — przyklejony do dołu, pokazywany przez biuro.js */
.pasek-niezapisane{
  position:sticky; bottom:.75rem; z-index:30; margin:0 0 1rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  background:var(--bp-ciemny); color:#fff; border-radius:10px; padding:.55rem .9rem;
  box-shadow:var(--bp-cien-mocny); font-size:.9rem;
}
.pasek-niezapisane[hidden]{ display:none; }
.tabela-biuro td.przytnij{ white-space:nowrap; max-width:12rem; overflow:hidden; text-overflow:ellipsis; }
.status-zgl{ min-width:12rem; }
.tabela-mala{ font-size:.84rem; }
.tabela-mala th{ font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--bp-tekst-mgl); background:#f7f8fa; }
.tabela-mala td:first-child, .tabela-mala th:first-child{ padding-left:1rem; }
.tabela-mala td:last-child, .tabela-mala th:last-child{ padding-right:1rem; }

/* grupa „Konfiguracja” w menu panelu */
.menu-grupa > summary{ list-style:none; cursor:pointer; color:#c7cbd1; padding:.55rem .9rem;
  border-radius:8px; font-size:.94rem; display:flex; align-items:center; }
.menu-grupa > summary::-webkit-details-marker{ display:none; }
.menu-grupa > summary:hover{ background:rgba(255,213,0,.15); color:var(--bp-zolty); }
.menu-grupa > summary.w-grupie{ color:#fff; }
.menu-grupa .strzalka{ margin-left:auto; font-size:.7rem; transition:transform .15s; }
.menu-grupa[open] .strzalka{ transform:rotate(180deg); }
.menu-grupa > div a{ padding-left:1.6rem; font-size:.9rem; }

/* panel faktur */
#faktury .tabela-biuro tr.z-faktura > td{ background:#f4fbf6; }

/* ---------- wewnętrzna lista startowa ---------- */
.filtry-siatka{ display:grid; grid-template-columns:repeat(auto-fill, minmax(11.5rem, 1fr)); gap:.5rem .75rem; }
.filtry-siatka > label{ display:flex; flex-direction:column; gap:.15rem; margin:0; }
.filtry-siatka > label > span:first-child{ font-size:.72rem; font-weight:700; color:var(--bp-tekst-mgl); text-transform:uppercase; letter-spacing:.03em; }
.filtry-siatka > label.szeroki{ grid-column:span 2; }
@media (max-width:575.98px){ .filtry-siatka > label.szeroki{ grid-column:auto; } }
.lista-wew .btn-check + .btn{ font-size:.78rem; padding:.15rem .5rem; }
@media print{
  .admin-bok, .nie-drukuj, .flash-blok{ display:none !important; }
  .lista-wew .tabela-biuro{ font-size:9pt; }
  .lista-wew .tabela-biuro td.przytnij{ max-width:none; white-space:normal; }
  .lista-wew .karta{ border:0; box-shadow:none; }
  main, .col-lg-10{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; }
}

/* ---------- eksport ---------- */
.eks-grupy{ display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:.75rem 1.25rem; }
.eks-grupa{ border:1px solid var(--bp-obrys); border-radius:8px; padding:.4rem .7rem .55rem; margin:0; }
.eks-grupa legend{ float:none; width:auto; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; margin:0 0 .2rem; padding:0 .25rem; }
.eks-grupa .form-check{ font-size:.86rem; margin-bottom:.1rem; }
.eks-bieg{ font-size:.88rem; margin-bottom:.15rem; }

/* ---------- sektory startowe ---------- */
.sektory .tabela-sektorow .form-control{ min-width:4.5rem; }
.sektory .tabela-sektorow td{ position:relative; }
.sektory .tabela-sektory-zaw .historia{ min-width:16rem; line-height:1.55; }
.sektory .historia .wynik.auto{ font-weight:600; }
.sektory .historia .deklaracja{ color:#6c5a00; }
.sektory .pole-tempo, .sektory .pole-sektor{ max-width:6rem; }
.sektory .pole-sektor.reczny{ background:#fff7d6; border-color:#e0c25a; }
.sektory .zmienione{ border-color:#198754 !important; box-shadow:0 0 0 .15rem rgba(25,135,84,.2); }
.sektory tr.zmieniony td{ background:#f1faf4; }
.pasek-zmian{ position:sticky; bottom:0; z-index:5; display:flex; align-items:center; gap:.75rem; margin-top:.75rem;
  background:var(--bp-ciemny); color:#fff; padding:.6rem 1rem; border-radius:10px; box-shadow:0 -4px 14px rgba(0,0,0,.15); }
.pasek-zmian b{ color:var(--bp-zolty); }

/* ---------- punkty FIS ---------- */
.fis .tabela-fis td{ vertical-align:middle; }
.fis .stan-ok{ color:#198754; }
.fis .stan-uwaga{ color:#b58f00; }
.fis .stan-brak{ color:#adb5bd; }
.fis .raport{ max-height:16rem; overflow:auto; font-size:.8rem; }
.biuro .sektor-reczny{ background:#fff7d6; border-color:#e0c25a; }

/* ---------- statystyki ---------- */
.statystyki .filtry-stat label.small{ display:flex; flex-direction:column; gap:.15rem; font-weight:700; color:var(--bp-tekst-mgl); }
.statystyki .kafelki{ display:grid; grid-template-columns:repeat(auto-fill, minmax(13.5rem, 1fr)); gap:.75rem; }
.statystyki .kafel{ background:#fff; border-radius:10px; box-shadow:var(--bp-cien); padding:.85rem 1rem; position:relative; border-top:3px solid var(--bp-obrys); }
.statystyki .kafel.akcent{ border-top-color:var(--bp-zolty); }
.statystyki .kafel.uwaga{ border-top-color:#f2994a; }
.statystyki .kafel .et{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--bp-tekst-mgl); }
.statystyki .kafel .wart{ display:inline-block; font-size:1.55rem; font-weight:900; line-height:1.2; margin-top:.15rem; }
.statystyki .kafel .pod{ font-size:.75rem; color:var(--bp-tekst-mgl); margin-top:.15rem; }
.statystyki .delta{ display:inline-block; vertical-align:.35rem; margin-left:.45rem; font-size:.72rem; font-weight:700; padding:.05rem .4rem; border-radius:5px; }
.statystyki .delta.plus{ background:#e3f6ea; color:#1e7d43; }
.statystyki .delta.minus{ background:#fde8e8; color:#b42318; }
.statystyki .delta.nowe{ background:var(--bp-zolty-jasn); color:#7a6200; }
.statystyki .wykres{ position:relative; height:300px; }
.statystyki .wykres.wysoki{ height:360px; }
.statystyki .wykres.maly{ height:210px; }
.statystyki .wykres.mini{ height:140px; }
.statystyki .belka{ height:7px; background:#eef0f2; border-radius:4px; overflow:hidden; }
.statystyki .belka span{ display:block; height:100%; background:var(--bp-ciemny); border-radius:4px; }
.statystyki .belka.pelny span{ background:#eb5757; }
.statystyki .mapa-godzin{ border-collapse:separate; border-spacing:2px; font-size:.7rem; width:100%; min-width:46rem; }
.statystyki .mapa-godzin th{ font-weight:700; color:var(--bp-tekst-mgl); text-align:center; padding:0 .2rem; }
.statystyki .mapa-godzin td{ height:1.7rem; text-align:center; border-radius:4px; color:#1c1f23;
  background:rgba(230,184,0,var(--a)); }
.statystyki .lista-pasek{ position:relative; display:flex; justify-content:space-between; gap:.5rem; padding:.12rem .35rem; margin-bottom:2px; z-index:0; }
.statystyki .lista-pasek .nazwa{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.statystyki .lista-pasek .ile{ font-weight:700; }
.statystyki .lista-pasek .tlo{ position:absolute; inset:0 auto 0 0; background:var(--bp-zolty-jasn); border-radius:4px; z-index:-1; }
.statystyki .kolumny-2{ columns:2 16rem; column-gap:1.5rem; }
.statystyki .kolumny-2 .lista-pasek{ break-inside:avoid; }
@media print{
  .statystyki .wykres{ height:240px; }
  .statystyki .karta, .statystyki .kafel{ break-inside:avoid; box-shadow:none; border:1px solid #ddd; }
}

/* uwagi organizatora w kartotece */
.biuro .uwagi-org textarea{ background:#fffdf3; }
.biuro .uwagi-org.ma-uwagi textarea{ background:#fff7d6; border-color:#e0c25a; font-weight:600; }
.wielkie{ text-transform:uppercase; }
.wielkie::placeholder{ text-transform:none; }
.statystyki tr.gadzet-suma td{ background:#f6f7f9; border-top:2px solid var(--bp-obrys); }
.statystyki tr.gadzet-wariant td{ font-size:.8rem; padding-top:.2rem; padding-bottom:.2rem; }

/* Konto „podgląd”: przyciski zapisu i okienka edycji znikają (serwer i tak
   odrzuca każdy POST), pola formularzy są tylko do odczytu — patrz app.js */
.tylko-podglad main [data-bs-toggle="modal"],
.tylko-podglad main form[method="post"] button,
.tylko-podglad main form[method="post"] input[type="submit"]{ display:none !important; }