/*
 * fider-partners.css — nadpisania portalu partnerskiego nad design systemem Fidera.
 *
 * Zasada: `fider-ui.css` jest kopią skompilowanego design systemu i NIE jest
 * tu edytowany. Wszystko, co odróżnia portal od aplikacji, mieszka w tym pliku.
 *
 * DRUGA ZASADA, ważniejsza: ten plik NIE odtwarza komponentów, które design
 * system już ma. Liczby to `.fider-stat`, karty to `.fider-box`, statusy to
 * `.badge`, listy to `.body-entries-list > .list-item`, pola to `.form-field`.
 * Jeśli kusi Cię, żeby dopisać tu własny kafelek/plakietkę/tabelę — najpierw
 * sprawdź `custom.scss`; aplikacja nie ma ani jednej tabeli HTML i portal
 * też mieć nie powinien.
 *
 * Zostaje tu wyłącznie to, czego design system nie zna, bo nie istnieje
 * w aplikacji: niebieskie logowanie i fakt, że portal stoi na froncie,
 * a nie w wp-admin.
 */

/* ==========================================================================
   Logowanie — fiderowo niebieskie tło
   ========================================================================== */

/*
 * Górny pasek zostaje biały (jego tło rysuje pseudo-element `:before`
 * design systemu), więc logo Fidera pozostaje czytelne bez wersji na ciemne
 * tło. Niebieskie jest wyłącznie pole pod paskiem.
 */
body.fp-login-page {
    background: var(--color-primary, #1839a3);
    min-height: 100vh;
}

body.fp-login-page .body-wrapper.fp-login {
    padding-top: 83px;
    min-height: 100vh;
}

/* Karta formularza musi być biała — na niebieskim tle sam obrys by zniknął. */
body.fp-login-page .section-authorization .authorization-inner {
    background: var(--background-primary, #fff);
    border-color: transparent;
    box-shadow: 0 24px 48px rgba(9, 7, 29, .18);
    width: 100%;
    max-width: 460px;
}

body.fp-login-page .section-authorization .alert-wrapper {
    max-width: 460px;
    width: 100%;
}

.fp-auth-link {
    display: inline-block;
    margin-top: 4px;
    font-size: var(--small-text, .875rem);
    font-weight: 600;
    color: var(--color-primary, #1839a3);
}

.fp-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    cursor: pointer;
}

/* ==========================================================================
   Panel
   ========================================================================== */

body.fp-panel-page {
    background: var(--background-primary, #fff);
}

/*
 * Odsunięcie treści spod przyklejonego paska (`nav.section-header` ma
 * `position: fixed`). W aplikacji ten sam offset niesie `#wpbody-content`
 * z warstwy wp-admin (zmierzone: 83px, dokładnie wysokość paska). Portal
 * stoi na froncie i tego wrappera nie ma, więc offset musi paść tutaj —
 * to nie jest odstępstwo od design systemu, tylko odtworzenie warunków,
 * w których został zaprojektowany.
 */
.fp-panel {
    padding-top: 83px;
    min-height: 100vh;
}

/*
 * Sekcja sidebara grupująca tytuł, opis i pola. Odstępy MIĘDZY sekcjami
 * (margines, kreska) daje już design system regułą `.inner-sidebar > * + *`
 * — tutaj wyłącznie układ w środku jednej sekcji.
 */
.fp-sidebar-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Zdarzenie unieważnione — zostaje na liście, ale wyraźnie wygaszone. */
.list-item.fp-voided {
    opacity: .55;
}

.fp-footnote {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ==========================================================================
   Rozmycie tła pod menu użytkownika
   ========================================================================== */

/*
 * Design system daje `.dropdown-menu .menu-inner` tło rgba(.75) + `backdrop-filter:
 * blur(4px)`. Samo rozmycie było jednak martwe: pasek nosi `view-transition-name:
 * fider-navbar` (morfowanie paska przy nawigacji, WP 7.0), a element z tą własnością
 * tworzy własny „backdrop root". Menu leży WEWNĄTRZ paska, więc nie miało czego
 * rozmywać — tło zostawało półprzezroczyste, ale treść za nim była ostra.
 *
 * Zdejmujemy nazwę wyłącznie na czas OTWARTEGO menu: rozmycie wraca, a morfowanie
 * paska działa dalej przy normalnej nawigacji (nazwa wraca po zamknięciu menu).
 * Świadomy koszt: nawigacja z rozwiniętym menu traci morfowanie paska — niewidoczne
 * w praktyce, bo menu i tak znika razem ze stroną.
 *
 * Zmierzone w przeglądarce (repro na tych samych plikach CSS): z nazwą backdrop-filter
 * jest bez efektu, bez niej tło za menu jest rozmyte.
 *
 * UWAGA: aplikacja ma dokładnie ten sam problem — tam poprawka musi trafić do
 * `custom.scss`, bo `fider-ui.css` jest tylko skompilowaną kopią.
 */
nav.section-header:has(.dropdown-menu.show) {
    view-transition-name: none;
}

/* ==========================================================================
   Historia aktywności — pasek narzędzi
   ========================================================================== */

/*
 * Liczby odcięte od filtrów mocniej niż domyślnym `gap: 20px` boksu — to
 * dwie różne warstwy: wynik i narzędzia, którymi się go zmienia.
 */
.fp-history > .row {
    margin-bottom: 20px;
}

/*
 * Filtry stoją we własnym wierszu pod liczbami. BEZ `margin-left: auto`:
 * jako element kolumny flex zepchnąłby je na prawą krawędź boksu.
 */
.fp-box-toolbar-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    /* Domyślne `gap: 20px` boksu za mało odcinało filtry od pierwszego wiersza
       listy — ten sam rytm co nad filtrami (liczby → 40 px → filtry → 40 px → lista). */
    margin-bottom: 20px;
}

/*
 * Design system daje kontrolkom toolbara stałe 110px — akurat na „25" czy „100".
 * Etykiety zdarzeń („Pierwsza płatność") w tej szerokości się nie mieszczą, więc
 * dwa selekty dostają szerszy wariant. Szerokość musi iść RÓWNIEŻ na
 * `.select2-container`, bo tam design system ustawia ją z `!important`.
 */
/*
 * Selektor MUSI być tak samo mocny jak reguła design systemu
 * `.form-field.fider-perpage .select2-container { width: 110px !important }`
 * (0,3,0). Sam `.fp-select-wide` (0,2,0) przegrywał mimo `!important` — wrapper
 * robił się szerszy, a kontener select2 zostawał na 110px i ucinał tekst
 * strzałką. Stąd pełny łańcuch klas: 0,4,0.
 */
.form-field.fider-perpage.fp-select-wide .field-icon-wrapper,
.form-field.fider-perpage.fp-select-wide .select2-container {
    width: 190px !important;
}

/* Stopka listy stoi wewnątrz `.fider-box` — odstęp niesie już `gap` boksu. */
.fp-history .fider-dashboard-list-footer {
    margin-top: 0;
}

@media (max-width: 575.98px) {
    /* Na telefonie tytuł i kontrolki w jednym wierszu robią się nieczytelne. */
    .fp-box-toolbar-controls {
        width: 100%;
        margin-left: 0;
    }

    .fp-box-toolbar-controls .form-field {
        flex: 1 1 auto;
    }

    .form-field.fider-perpage.fp-select-wide .field-icon-wrapper,
    .form-field.fider-perpage.fp-select-wide .select2-container {
        width: 100% !important;
    }
}

/* ==========================================================================
   Focus pól w sidebarze
   ========================================================================== */

/*
 * Design system rysuje focus pola jako `outline` z `outline-offset: 2px`, czyli
 * 2px NA ZEWNĄTRZ pola. Sidebar (`section.section-grid .grid-inner .inner-sidebar`)
 * ma `overflow: auto` i zero paddingu od lewej, więc ta obwódka jest przycinana
 * dokładnie przy lewej krawędzi — po kliknięciu pole wygląda na ucięte.
 *
 * Zamiast outline'u rysujemy ramkę INSET (do wewnątrz) — ten sam zabieg, którym
 * design system rozwiązał identyczny problem z select2 w `.fider-perpage`
 * (tam przycinał `overflow` paska `.entries-tabs`). Wygląd ten sam, nic nie
 * wychodzi poza pole, zero skoku layoutu.
 *
 * `!important` jest konieczne: reguła bazowa
 * `.form-field input:not(…):not(…):not(…):focus` ma specyficzność 0,5,1,
 * a `box-shadow: none` na samym polu 0,4,1 — bez tego przegrywamy oba.
 */
aside.inner-sidebar .form-field input:focus,
aside.inner-sidebar .form-field textarea:focus {
    outline: 1px solid transparent !important;
    outline-offset: 0 !important;
    box-shadow: inset 0 0 0 1px var(--color-primary) !important;
}

/* ============================================================
 * Pole z przyciskiem kopiowania w środku
 * ============================================================
 *
 * Własny wrapper pozycjonujący, a NIE `.field-icon-wrapper` z design systemu:
 * tamten wymusza na każdym `svg` w środku `position: absolute` + `pointer-events: none`,
 * co jest właściwe dla ikony ozdobnej, a nie dla klikalnego przycisku.
 */
.fp-copy-field {
    position: relative;
    width: 100%;
}

/* Miejsce na przycisk (30px koła + 10px marginesu z każdej strony).
 * Ta sama specyficzność co reguła bazowa `.form-field input:not(…)…` (0,4,1),
 * a nasz plik ładuje się później — dlatego wygrywa bez `!important`. */
.fp-copy-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    padding-right: 50px;
}

.fp-copy-field .fp-copy {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}

/* Stan spoczynkowy: widoczna ikona kopiowania, potwierdzenie schowane. */
.fp-copy .fp-icon-done {
    display: none;
}

.fp-copy.is-copied .fp-icon-copy {
    display: none;
}

.fp-copy.is-copied .fp-icon-done {
    display: block;
}

/* Potwierdzenie — zielen „.badge-success-filled" z design systemu (#047B57).
 * Kolor jest tam literałem, nie zmienną, więc powtarzamy literał zamiast
 * wprowadzać własny token, który zaraz rozjechałby się z oryginałem. */
.fp-copy.is-copied .icon-inner,
.fp-copy.is-copied:hover .icon-inner {
    background: #047B57;
    border-color: #047B57;
}

.fp-copy.is-copied .icon-inner svg,
.fp-copy.is-copied:hover .icon-inner svg {
    fill: #fff;
}

/* ============================================================
 * Rozwinięcie miesiąca: płatności, które złożyły się na prowizję
 * ============================================================
 *
 * Panel jest RODZEŃSTWEM `.list-item`, nie jego dzieckiem: `.list-item`
 * to wiersz flex (`justify-content: space-between`), więc wszystko wrzucone
 * do środka ląduje w tej samej linii co kwota.
 */
.fp-payers {
    padding: 4px 0 16px 95px;   /* 70px miniatury + 25px odstępu = wcięcie pod treść wiersza */
}

/* Design system rozdziela wiersze regułą `.list-item + .list-item` — przez
   SĄSIADUJĄCE rodzeństwo. Panel rozwinięcia wchodzi między wiersze i to
   sąsiedztwo rozrywa, więc miesiąc po rozwijanym miesiącu tracił kreskę
   i odstęp. Odtwarzamy je 1:1 (te same wartości co w design systemie) dla
   wiersza poprzedzonego panelem. Selektor działa niezależnie od tego, czy panel
   jest rozwinięty — `display: none` nie zmienia struktury rodzeństwa. */
.body-entries-list .fp-payers + .list-item {
    border-top: 1px solid var(--border);
    margin-top: 10px;
    padding-top: 10px;
}

.fp-payer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    border-radius: var(--border-radius-default);
    background: var(--background-secondary);
}

.fp-payer + .fp-payer {
    margin-top: 6px;
}

.fp-payer__money {
    text-align: right;
    white-space: nowrap;
}

/* Anulowana płatność zostaje na liście, ale MUSI wyglądać na niepolicząą.
   Istniejąca reguła `.list-item.fp-voided` tu nie sięga — wiersz rozwinięcia
   nie jest `.list-item`. Bez tego kwota anulowanej pozycji wygląda jak wliczona
   i partner liczy, że miesiąc się nie zgadza. */
.fp-payer.fp-voided {
    opacity: .55;
}

.fp-payer.fp-voided .fp-payer__money {
    text-decoration: line-through;
}

/* Chevron obraca się razem ze stanem przycisku — stan trzyma Bootstrap
   w `aria-expanded`, więc nie potrzeba własnej klasy ani JS-a. */
.fp-payers-toggle svg {
    transition: transform 0.3s;
}

.fp-payers-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

@media (max-width: 575.98px) {
    .fp-payers {
        padding-left: 0;
    }

    .fp-payer {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .fp-payer__money {
        text-align: left;
    }
}

/* ============================================================
 * Wybór okresu — kontrolka w pasku narzędzi historii
 * ============================================================ */

/*
 * Formularz jest WIERSZEM WEWNĄTRZ wiersza paska, a nie własnym blokiem:
 * `.fp-box-toolbar-controls` ustawia już flex i odstępy, więc tu wystarczy
 * nie rozpychać się na całą szerokość.
 */
/*
 * Formularz rozpycha się na resztę wiersza, żeby przyciski miały do czego
 * przylgnąć po prawej (`margin-left: auto` niżej). `position: relative`
 * jest kotwicą wysuwanego panelu zakresu własnego.
 *
 * Baza `auto` jest LOAD-BEARING. Skrócone `flex: 1` daje bazę `0%`: formularz
 * kurczy się do wąskiej kolumny przy prawej krawędzi, zawija się w środku
 * (select nad przyciskami), a wysuwany panel ląduje pod przyciskami zamiast
 * pod selektem.
 */
.fp-range {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/*
 * Design system nadaje `.form-field { width: 100% }` — sensowne w formularzu
 * jednokolumnowym, ale tutaj pola stoją obok siebie i każde ma brać tyle,
 * ile potrzebuje. Bez tego przycisk rozpłaszcza się na cały wiersz.
 */
.fp-range > .form-field,
.fp-range-custom > .form-field {
    width: auto;
}

/*
 * Wysuwany panel zakresu własnego — zakotwiczony POD selektem „Okres”, nie
 * w linii z nim. Dzięki temu wiersz filtrów nie przeskakuje, gdy partner
 * przełącza się między gotowym okresem a własnym.
 *
 * Zamknięty stan to `visibility: hidden`, a nie `display: none` — przejścia
 * CSS nie działają na `display`, a `visibility` dodatkowo wyjmuje panel
 * z kolejności tabulacji.
 */
.fp-range-custom {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 40px);
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-default);
    background: #fff;
    box-shadow: 0 8px 24px rgba(9, 7, 29, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.fp-range-custom.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/*
 * Pole daty równa się z kontrolkami paska (39px — ta sama wysokość, którą
 * design system daje selektom `.fider-perpage` i przyciskom `btn-size-s`),
 * a nie z 50-pikselowym polem formularza. Bez tego pasek podskakuje
 * po rozwinięciu zakresu własnego.
 */
/*
 * Selektor MUSI mieć tę samą moc co reguła pól formularza design systemu
 * (`.form-field input:not():not():not()` = 0,4,1), inaczej wysokość 50px
 * wygrywa. `fider-partners.css` ładuje się później, więc przy równej
 * specyficzności decyduje kolejność — bez `!important`.
 */
.fp-range .fp-range-custom .form-field input[type="date"] {
    height: 39px;
    min-width: 138px;
    padding: 0 12px;
}

/*
 * „OK” zatwierdza daty w panelu. Wąski napis zostałby ściśnięty do samego
 * paddingu, przez co przycisk wyglądałby na przypadkowy — `min-width` daje mu
 * kształt pigułki, a `justify-content` trzyma napis w środku (bazowy `.btn`
 * centruje tylko WNĘTRZE `.btn-inner`, nie jego położenie w szerszym boksie).
 */
.fp-range-apply {
    justify-content: center;
    min-width: 56px;
}

/* Dwa przyciski w jednej linii, a nie jeden pod drugim — `.form-field`
   z design systemu jest kolumną flex. */
.fp-range-submit {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-left: auto;
}

/*
 * „Resetuj” jest akcją drugoplanową, więc bez własnego tła. Oba warianty
 * wypełnione odpadały: `btn-muted` ma `--border` (#e4e8f1), a pola formularza
 * `--background-secondary` (#f4f7fa) — różnica na granicy widoczności, przez
 * co przycisk czytał się jak kolejne pole. `btn-tertiary` daje tekst w kolorze
 * marki, czyli jednoznacznie klikalny, a ciężar zostaje przy „Pokaż”.
 */
.fp-range-reset {
    padding-inline: 4px;
}

/*
 * Przyciski równają się z selektami paska (39px — tyle ma
 * `.select2-selection--single` w `.fider-perpage`). Sam `btn-size-s` daje
 * 42px z własnego paddingu pionowego, przez co wiersz filtrów falował.
 */
.fp-range .btn {
    /*
     * `display` jest tu LOAD-BEARING. „Resetuj” to `<a>`, czyli element inline,
     * a element inline IGNORUJE `height` — tekst ustawiał się wtedy według linii
     * tekstu i siedział wyżej niż napis w sąsiednim `<button>`, który centruje
     * treść sam z siebie. `inline-flex` + `align-items` równa oba warianty.
     */
    display: inline-flex;
    align-items: center;
    height: 39px;
    padding-block: 0;
}

/*
 * Informacja o wybranym okresie — zielony boks nad „Historią aktywności”.
 *
 * Bez marginesu: `.inner-body` jest kolumną flex z `gap: 60px`, więc odstęp
 * do karty poniżej daje kontener. Dodany `margin-bottom` SUMOWAŁ się z nim
 * (zmierzone: 20px marginesu = 80px przerwy).
 *
 * `.text` z design systemu jest szary (`--text-secondary`) — na zielonym tle
 * to za mały kontrast, a cała zmiana wzięła się właśnie z tego, że komunikat
 * był niewidoczny. `inherit` oddaje kolor alertowi (ciemna zieleń Bootstrapa).
 */
.fp-range-summary .text {
    color: inherit;
}

@media (max-width: 575.98px) {
    .fp-range,
    .fp-range > .form-field,
    .fp-range-custom,
    .fp-range-custom > .form-field {
        width: 100%;
    }
}

/* ============================================================
 * Pytajnik przy statystyce
 * ============================================================
 *
 * Etykieta kafelka jest teraz wierszem (tekst + ikona), a nie samym tekstem.
 * `inline-flex` zamiast `block`, żeby pytajnik stał w linii z opisem,
 * a nie pod nim.
 */
.fider-stat__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fp-stat-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    cursor: help;
    opacity: 0.45;
    transition: opacity 0.2s;
}

.fp-stat-help:hover,
.fp-stat-help:focus-visible {
    opacity: 1;
}

.fp-stat-help svg {
    fill: currentColor;
}

/* ============================================================
 * Wyłączone filtry listy
 * ============================================================
 *
 * Design system NIE stylizuje `select2-container--disabled`, więc bez tej
 * reguły wygaszony select wyglądałby dokładnie jak aktywny — a o to właśnie
 * chodzi, żeby było widać, że nie ma czego filtrować.
 *
 * `:has()` na `.form-field` obejmuje etykietę i kontrolkę naraz. select2
 * ukrywa oryginalny `<select>`, ale zostawia go w DOM, więc warunek działa
 * tak samo przed inicjalizacją i po niej.
 */
.fp-box-toolbar-controls .form-field:has( select:disabled ) {
    opacity: 0.5;
}

.fp-box-toolbar-controls .form-field:has( select:disabled ) .select2-container,
.fp-box-toolbar-controls .form-field:has( select:disabled ) .fider-select-skeleton,
.fp-box-toolbar-controls select:disabled {
    cursor: not-allowed;
}