/* Warstwa wizualna panelu contact center. Dokladamy do motywu Windu, nie zastepujemy go.
 *
 * Podzial obowiazkow:
 *   cc-theme.css  — marka i tokeny (:root oraz html[data-cc-theme="dark"]),
 *   cc-panel.css  — stany interakcji, ktore z tych tokenow korzystaja.
 *
 * Zaden kolor nie jest tu zapisany na sztywno: kazdy idzie przez var(--cc-...)
 * z wartoscia zapasowa na wypadek, gdyby arkusz z tokenami nie doszedl.
 * Wartosci zapasowe to odcienie marki ze sklepu yerbador.pl, nie przypadkowe barwy.
 *
 * Kolejnosc wczytywania: theme.min.css -> windu.css -> windu_dark.css -> TEN PLIK.
 * Dlatego zwykle nadpisanie wystarcza, a !important pojawia sie wylacznie tam,
 * gdzie po drugiej stronie tez jest !important — i zawsze z nazwa nadpisywanej reguly.
 */

/* ------------------------------------------------------------------ *
 * Zapis w locie: stan pola widoczny bez czytania toasta
 * ------------------------------------------------------------------ */

.cc-saving {
    opacity: .55;
    cursor: progress;
    /* W trakcie zapytania pole jest wylaczone, ale select2 rysuje wlasny widget
       obok — bez tego dalo by sie zmienic wartosc, ktora wlasnie jedzie na serwer. */
    pointer-events: none;
}
.cc-saving + .select2 { opacity: .55; pointer-events: none; }

.cc-saved {
    border-color: var(--cc-ok, #2f7d4f);
    box-shadow: 0 0 0 .2rem var(--cc-brand-050, #e2ece6);
    transition: box-shadow .35s ease;
}

/* ------------------------------------------------------------------ *
 * Pola edytowane wprost w wierszu tabeli
 * ------------------------------------------------------------------ */

/* Maja byc dyskretne, dopoki nie sa dotkniete.
   :where() zeruje wage warunku, wiec cala regula wazy tyle co pojedyncza klasa
   i pozniejsze .cc-inline.is-invalid moze ja spokojnie nadpisac.
   Checkboxy i przelaczniki sa wylaczone: dla .custom-control-input reguly nic nie
   robia, a dla golego <input type="checkbox"> kasowaly ramke i wyglad kontrolki.
   Promienia zaokraglenia tu nie ustawiamy — bierzemy ten z motywu, zeby pole nie
   mialo innego ksztaltu w trybie jasnym i ciemnym. */
.cc-inline:where(:not([type="checkbox"]):not([type="radio"])) {
    border: 1px solid transparent;
    background: transparent;
    padding: .15rem .4rem;
}
.cc-inline:where(:not([type="checkbox"]):not([type="radio"])):hover {
    border-color: var(--cc-border, rgba(0,0,0,.12));
    background: var(--cc-surface-2, rgba(0,0,0,.02));
}
.cc-inline:where(:not([type="checkbox"]):not([type="radio"])):focus {
    border-color: var(--cc-brand-500, #5c904d);
    background: var(--cc-surface, #fff);
    box-shadow: 0 0 0 .2rem var(--cc-focus, rgba(9,55,26,.25));
    outline: 0;
}
/* Po odmowie serwera albo po zlej wartosci obwodka ma zostac czerwona takze
   wtedy, gdy pole nadal ma fokus — dlatego ta regula stoi po :focus. */
.cc-inline.is-invalid,
.cc-inline.is-invalid:focus {
    border-color: var(--cc-err, #de4437);
}

/* Szerokosci. Wczesniej jedno max-width: 8rem obowiazywalo wszystkie pola i sciskalo
   selecty z profilem uprawnien do nieczytelnej szerokosci. Teraz waskie jest tylko to,
   co naprawde jest liczba. */
.cc-inline[type="number"],
.cc-inline-num {
    max-width: 6rem;
    text-align: right;
    /* Cyfry o stalej szerokosci: kolumna liczb nie skacze przy wpisywaniu. */
    font-variant-numeric: tabular-nums;
}
select.cc-inline,
.cc-inline-select {
    min-width: 9rem;
    max-width: 100%;
    width: auto;
}
.cc-inline-text {
    min-width: 10rem;
    width: 100%;
}
/* Klasy .mw-100 nie powtarzamy: Bootstrap definiuje ja jako
   `.mw-100{max-width:100%!important}`, wiec dwa ekrany, ktore dotad zdejmowaly nia
   tamto ograniczenie, dzialaja dalej bez zmian w znacznikach. */

/* Nadpisuje regule "Wyrownanie wysokosci selectow z inputami", ktora stoi w OBU
   arkuszach Windu — windu.css:163-168 i windu_dark.css:143-148 — w identycznym brzmieniu:
   `.custom-select,.form-select,select.form-control{height:calc(1.5em + .9375rem + 2px)!important;
    padding:.46875rem 2rem .46875rem 1rem!important}`
   Dotyczy wiec obu motywow, nie tylko ciemnego. Tamta regula obejmuje same listy,
   nie pola tekstowe, i nie zna rozmiaru -sm, wiec select w wierszu tabeli byl wyzszy
   od sasiedniego inputa i wiersze rosly. Wracamy do wysokosci .form-control-sm
   z theme.min.css — czyli do tej samej, ktora ma obok pole tekstowe.
   Prawy odstep zostaje wiekszy, bo tam jest strzalka listy.
   (Poprzednia wersja tego komentarza obwiniala sam windu_dark.css i sugerowala, ze
   poprawka jest potrzebna tylko w trybie ciemnym — nie jest.) */
select.cc-inline {
    height: calc(1.5em + 1rem) !important;
    padding: .15rem 1.5rem .15rem .4rem !important;
}

/* ------------------------------------------------------------------ *
 * Ladowanie tresci podmienianej przez loadCustom()
 * ------------------------------------------------------------------ */

/* Klase .cc-loading zaklada i zdejmuje ccLiveFilter() na kontenerze tabeli.
   Stara tresc zostaje na ekranie i tylko przygasa — lista wyczyszczona na czas
   zapytania mruga bialym tlem przy kazdej wpisanej literze i wyglada na zepsuta. */
.cc-loading { position: relative; }
.cc-loading > * {
    opacity: .4;
    pointer-events: none;
    transition: opacity .12s ease-out;
}
.cc-loading::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    /* z-index wyzszy niz przyklejony naglowek tabeli (2), zeby pasek byl widoczny. */
    z-index: 3;
    background: var(--cc-cta, #c4fd02);
    animation: cc-progress 1.1s ease-in-out infinite;
}

/* Szkielet dla tresci, ktorej jeszcze nie ma — np. partial ladowany po wejsciu
   na ekran. Uzycie: <div class="cc-skeleton-line"></div> razy tyle, ile wierszy. */
.cc-skeleton,
.cc-skeleton-line {
    background-color: var(--cc-surface-2, #f1f4f8);
    background-image: linear-gradient(90deg, transparent 0%, var(--cc-surface, #fff) 45%, transparent 90%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    border-radius: var(--cc-radius, .5rem);
    animation: cc-shimmer 1.2s linear infinite;
    color: transparent;
    user-select: none;
}
.cc-skeleton-line { height: .8rem; margin: .5rem 0; border-radius: .25rem; }
.cc-skeleton-line:last-child { width: 60%; }

@keyframes cc-shimmer {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}
@keyframes cc-progress {
    0%   { transform: scaleX(.05); transform-origin: left; }
    49%  { transform: scaleX(1);   transform-origin: left; }
    50%  { transform: scaleX(1);   transform-origin: right; }
    100% { transform: scaleX(.05); transform-origin: right; }
}
/* Ruch w tle jest dodatkiem, nie trescia — kto go wylaczyl, ma go nie dostac. */
@media (prefers-reduced-motion: reduce) {
    .cc-skeleton,
    .cc-skeleton-line,
    .cc-loading::before { animation: none; }
}

/* ------------------------------------------------------------------ *
 * Tabele
 * ------------------------------------------------------------------ */

/* Dlugie tabele: naglowek zostaje na ekranie przy przewijaniu.
   --cc-sticky-offset to pokretlo ekranu, nie token motywu: ekran z wlasnym paskiem
   nad tabela ustawia je u siebie, np. style="--cc-sticky-offset:3rem".

   Nadpisuje windu_dark.css: `.table thead th{background-color:#000!important}`.
   Bez tego przyklejony naglowek jest czarnym pasem przez cala szerokosc tabeli
   niezaleznie od motywu (a w trybie jasnym byl bialy, tez zaszyty na sztywno). */
.cc-table-sticky thead th {
    position: sticky;
    top: var(--cc-sticky-offset, 0);
    z-index: 2;
    background: var(--cc-surface-2, #f8fafd) !important;
    box-shadow: inset 0 -1px 0 var(--cc-border, rgba(0,0,0,.08));
}

/* Ostrzezenie w wierszu, np. numer wiodacy bez trasy powrotnej.
   Tlo idzie na komorki, a nie na <tr>: paskowanie .table-striped ma wieksza wage
   niz pojedyncza klasa i zjadalo podswietlenie w co drugim wierszu.

   Kolor jest NIEPRZEZROCZYSTY (token, nie color-mix z transparent). Wczesniejsze
   color-mix(..., 14%/24%, transparent) przepuszczalo tlo wiersza pod kursorem
   (cc-theme.css klad tam --cc-brand-050 z !important) i obie warstwy sie
   sumowaly: tekst .text-warning na podswietlonym wierszu POD KURSOREM mial
   3.36:1 zamiast wymaganych 4.5:1. Wartosci i uzasadnienie tokenow: cc-theme.css,
   sekcja 1, blok "Podswietlenia wierszy tabeli".
   Najgorszy token statusu na tych tlach: 4.85:1 w spoczynku i 4.52:1 pod
   kursorem (jasny), 5.22:1 i 4.56:1 (ciemny). */
.cc-row-warning > td,
.cc-row-warning > th {
    background: var(--cc-row-warn, #f5eee6);
}
.cc-row-warning:hover > td,
.cc-row-warning:hover > th {
    background: var(--cc-row-warn-hover, #f0e6d9);
}

/* ------------------------------------------------------------------ *
 * Zaznaczanie wielu wierszy (ccBulkSelect)
 * ------------------------------------------------------------------ */

/* Kolumna z checkboxem: waska i bez zawijania, zeby nie odbierala miejsca tresci.
   user-select wylaczony, bo shift+klik po wierszach zaznaczalby przy okazji tekst
   miedzy nimi i tabela wygladalaby na zepsuta. */
.cc-bulk-cell {
    width: 1px;
    white-space: nowrap;
    user-select: none;
    text-align: center;
    vertical-align: middle;
}

/* ------------------------------------------------------------------ *
 * POLE WYBORU W KOLUMNIE ZAZNACZANIA — DLACZEGO TU SA WLASNE REGULY
 * ------------------------------------------------------------------ *
 * Bootstrap 4 rysuje kwadrat pola wyboru pseudoelementem ::before
 * ustawionym ABSOLUTNIE wzgledem .custom-control (position:relative),
 * z left:-1.5rem i top:.2rem, a miejsce na niego rezerwuje paddingiem
 * padding-left:1.5rem tego samego .custom-control. Ten uklad dziala tylko
 * wtedy, gdy etykieta ma TEKST: tekst wyznacza wysokosc linii i kwadrat
 * ma sie do czego zrownac, a ujemne left wysuwa go przed pierwsza litere.
 *
 * W tej kolumnie etykiety NIE MA — <span class="custom-control-label"> jest
 * pusty, bo niesie tylko podpowiedz. Pusty element inline nie tworzy linii,
 * wiec .custom-control ma zero wysokosci, a kwadrat laduje 1.5rem w LEWO od
 * kontenera i .2rem PONIZEJ jego gornej krawedzi. Zmierzone w przegladarce
 * przed poprawka: komorka zaczynala sie na x=277px, a kwadrat stal na x=285px
 * przy zerowej wysokosci etykiety — czyli pole wyboru „zaznacz wszystkie"
 * wychodzilo dolna polowa POZA wiersz naglowka (naglowek konczyl sie na
 * y=486px, kwadrat zajmowal 477–493px) i wygladalo, jakby nalezalo do
 * pierwszego wiersza danych. Pola w wierszach mialy ten sam blad: 12px za nisko.
 *
 * Naprawa nie rusza Bootstrapa globalnie, tylko domyka geometrie w tej jednej
 * kolumnie: rezerwujemy dokladnie tyle, ile kwadrat zajmuje (1rem), i sadzamy
 * go w tym miejscu (left:-1rem, top:0). Wtedy .custom-control ma szerokosc
 * i wysokosc rowna kwadratowi, a text-align/vertical-align z reguly powyzej
 * centruja go w komorce.
 */
/* Selektory sa doprecyzowane znacznikiem (th./td./label.) NIE dla ozdoby:
   ekran rekordow ma we wlasnym <style> regule
   `.cc-record-table td .custom-control{min-height:auto}`, ktora zbija wysokosc
   w pozostalych kolumnach i ma specyficznosc (0,2,1) — tyle samo, co
   `.cc-bulk-cell .custom-control`. Przy remisie wygrywa regula pozniejsza
   w dokumencie, a <style> ekranu stoi za tym plikiem, wiec min-height:auto
   wracalby i blad z nim. Dopisanie znacznikow daje (0,2,2) i rozstrzyga
   kaskade bez !important. */
th.cc-bulk-cell label.custom-control,
td.cc-bulk-cell label.custom-control {
    display: inline-block;
    min-height: 1rem;
    padding-left: 1rem;
    margin-bottom: 0;
    vertical-align: middle;
}

th.cc-bulk-cell .custom-control-label::before,
th.cc-bulk-cell .custom-control-label::after,
td.cc-bulk-cell .custom-control-label::before,
td.cc-bulk-cell .custom-control-label::after {
    top: 0;
    left: -1rem;
}

/* ------------------------------------------------------------------ *
 * PRZELACZNIKI W KOMORKACH TABEL — TA SAMA PRZYCZYNA, TEN SAM BLAD
 * ------------------------------------------------------------------ *
 * Wszystkie 24 przelaczniki w tabelach panelu maja PUSTA etykiete
 * (<span class="custom-control-label"></span> — niesie tylko podpowiedz),
 * wiec dziala na nie dokladnie ten sam mechanizm, co przy polach wyboru
 * wyzej: .custom-control ma zero wysokosci, a tor przelacznika, rysowany
 * pseudoelementem ::before z left:-2.25rem i top:.2rem, laduje ponizej
 * srodka wiersza.
 *
 * Zmierzone przed poprawka na liscie rodzajow pauz: wiersz mial srodek
 * na y=231.1px, a tor przelacznika na 237.9-253.9px, czyli srodek 245.9px —
 * przelacznik siedzial 14.8px PONIZEJ srodka wiersza. Powtarzalo sie to
 * na kazdym wierszu, wiec nie wygladalo na blad, tylko na dziwny odstep;
 * widac to dopiero, gdy w tym samym wierszu stoi tekst do porownania.
 *
 * Sciezka do naprawy jest ta sama: rezerwujemy dokladnie tyle, ile zajmuje
 * tor (1.75rem x 1rem — zmierzone: 28x16px), i sadzamy go w tym miejscu.
 * Odstep kropki od toru to 2px w obu osiach — zachowany, bo bez niego
 * kropka przykleja sie do krawedzi toru.
 *
 * Zakres CELOWO ograniczony do komorek tabel (th/td): w karcie rekordu
 * (record/card.html.twig) przelaczniki stoja w ukladzie formularza, gdzie
 * geometria Bootstrapa jest na miejscu i nie ma czego poprawiac.
 *
 * Znacznik `label` w selektorze podnosi specyficznosc do (0,2,2), zeby
 * regula wygrala z `.cc-record-table td .custom-control{min-height:auto}`
 * z <style> ekranu rekordow — patrz ten sam powod przy polach wyboru.
 */
th label.custom-switch,
td label.custom-switch {
    min-height: 1rem;
    padding-left: 1.75rem;
    margin-bottom: 0;
    vertical-align: middle;
}

th label.custom-switch .custom-control-label::before,
td label.custom-switch .custom-control-label::before {
    top: 0;
    left: -1.75rem;
}

th label.custom-switch .custom-control-label::after,
td label.custom-switch .custom-control-label::after {
    top: 2px;
    left: calc(-1.75rem + 2px);
}

/* Pasek akcji zbiorczych. Klase .d-none zdejmuje i zaklada ccBulkSelect(), nie ekran —
   przed pierwszym zaznaczeniem pasek tylko zabieralby miejsce i podpowiadal akcje,
   ktorych nie da sie wykonac.
   Przykleja sie do dolu okna, bo lista bywa dluga, a pasek musi byc pod reka takze
   wtedy, gdy zaznaczony wiersz jest daleko w gorze.
   Odstepy robimy marginesem: klasy .gap-* sa z Bootstrapa 5, ktorego motyw Windu nie zna. */
.cc-bulk-bar {
    position: sticky;
    bottom: 0;
    /* Nad przyklejonym naglowkiem tabeli (2) i paskiem postepu .cc-loading (3). */
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: .5rem .75rem;
    background: var(--cc-surface-2, #f8fafd);
    border: 1px solid var(--cc-border, rgba(0,0,0,.12));
    border-radius: var(--cc-radius, .5rem);
    box-shadow: var(--cc-shadow, 0 .375rem 1rem rgba(0,0,0,.12));
}
.cc-bulk-bar > * { margin-right: .5rem; }
.cc-bulk-bar > :last-child { margin-right: 0; }

.cc-bulk-count {
    font-weight: 600;
    color: var(--cc-ink, #1e2022);
    font-variant-numeric: tabular-nums;
}

/* Wiersz zaznaczony: sam checkbox po lewej bywa poza polem widzenia, gdy szeroka
   tabela jest przewinieta w bok. Tlo idzie na komorki, a nie na <tr>, bo paskowanie
   .table-striped ma wieksza wage niz pojedyncza klasa i zjadaloby je co drugi wiersz. */
/* Tak samo jak przy .cc-row-warning: kolor nieprzezroczysty, bo pod komorka
   lezalo tlo hoveru i sumowalo sie z zaznaczeniem — .text-warning na zaznaczonym
   wierszu pod kursorem schodzil do 3.27:1.
   Najgorszy token statusu: 4.76:1 w spoczynku i 4.53:1 pod kursorem (jasny),
   5.49:1 i 4.87:1 (ciemny). */
.cc-bulk-on > td,
.cc-bulk-on > th {
    background: var(--cc-row-pick, #e7efea);
}
.cc-bulk-on:hover > td,
.cc-bulk-on:hover > th {
    background: var(--cc-row-pick-hover, #e0eae4);
}

/* ------------------------------------------------------------------ *
 * Stany puste i sekcje
 * ------------------------------------------------------------------ */

/* Pusty ekran ma tlumaczyc, a nie milczec. */
.cc-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--cc-ink-faint, #8c98a4);
}
.cc-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .75rem;
    opacity: .5;
    color: var(--cc-brand-300, #5c904d);
}

/* Karta sekcji formularza — duzy formularz kolejki ma ich dziewiec.
   Waga 0,2,0 wystarcza nad `.card-header{background-color:transparent}`
   z windu_dark.css, wiec bez !important. */
.cc-section > .card-header {
    background: var(--cc-surface-2, #f8fafd);
    border-bottom-color: var(--cc-border-soft, rgba(0,0,0,.075));
}
.cc-section .card-header-title {
    font-size: .8125rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--cc-ink-soft, #677788);
}