/*
 * 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
   ========================================================================== */

/*
 * `.fider-box` jest kolumną flex z `gap: 20px`, więc pasek nie potrzebuje
 * własnych marginesów — tylko układu w swoim wierszu.
 */
.fp-box-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.fp-box-toolbar-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-left: auto;
}

/*
 * 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;
    }
}