/* Rozliczenia na wąskim ekranie — style, które MUSZĄ być globalne (BILLMOB-1).
   Wiersz zawodnika renderują komponenty MudBlazora (MudTable → <tr>, MudTd → <td>), więc scoped CSS
   strony (.razor.css) nie dosięga ani tych elementów, ani pseudo-elementu `.mud-table-cell:before`,
   którym MudBlazor powtarza etykietę kolumny pod 600 px.

   Reguły siedzą w jednym `@media (max-width: 600px)` — z jedynym wyjątkiem opisanym na końcu pliku
   (BILLMOB-3) — bo 600 px to próg, na którym MudBlazor sam
   przechodzi w układ „stacked" (domyślny Breakpoint.Xs, klasa `mud-xs-table` na kontenerze tabeli —
   tym samym, na który trafia `Class` z komponentu). Desktop zostaje nietknięty.

   Zmiana jest CSS-only z rozmysłem: w DOM stoi JEDEN render i JEDEN komplet hooków `data-*`
   (`view-member-billing`, `member-billing-link-…`, `suggested-payment-…`). Drugi render pod
   `d-none d-md-*` zdublowałby je i Playwright sypałby „strict mode violation", a zmiana liczby
   lub kolejności `MudTd` zepsułaby asercje E2E stojące na pozycji `<td>`.

   Selektory świadomie przechodzą przez `.mud-table-body`: wszystkie reguły MudBlazora, które tu
   nadpisujemy, mają dwie do czterech klas (`.mud-xs-table .mud-table-row{display:revert}`,
   `.mud-xs-table .mud-table-row .mud-table-cell:last-child{border-bottom:…}`), więc dopiero ten
   człon daje przewagę SPECYFICZNOŚCIĄ, a nie kolejnością arkuszy — bez `!important` i bez zakładu
   o to, w jakiej kolejności <link>-i skończy montować bundler.

   Kolory wyłącznie ze zmiennych motywu — tryb ciemny nie potrzebuje drugiego zestawu reguł. */

@media (max-width: 600px) {
    /* ── Przegląd zespołu (BillingForecastPage) ──
       Wiersz = 2 linie zamiast dzisiejszych 5 „etykieta — wartość":
         [nazwisko          | sugerowana wpłata]
         [stan konta        | akcja]
       Siatka, nie flex-wrap: przy trzech językach (pl/en/cs) i długich nazwiskach `grid-template-areas`
       daje układ przewidywalny co do piksela, a `minmax(0, 1fr)` pozwala przyciąć nazwisko wielokropkiem
       zamiast rozpychać wiersz. Kreskę oddzielającą wiersze przenosimy z ostatniej komórki na `<tr>`. */
    .billing-forecast-mobile .mud-table-body .mud-table-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name    amount"
            "balance action";
        column-gap: 12px;
        row-gap: 2px;
        padding: 8px 16px;
        align-items: center;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    /* Komórki: zdejmujemy `display:flex; justify-content:space-between` i padding, którymi MudBlazor
       rozpycha każdą komórkę na całą szerokość ekranu. `min-width: 0` jest warunkiem koniecznym
       przycinania wielokropkiem wewnątrz siatki. */
    .billing-forecast-mobile .mud-table-body .mud-table-row .mud-table-cell {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        padding: 0;
        border: none;
        min-width: 0;
    }

    /* Powtarzalne etykiety MudBlazora znikają domyślnie; dwie, które zostają, są przywracane niżej
       punktowo — regułami o wyższej specyficzności i późniejszymi w pliku. */
    .billing-forecast-mobile .mud-table-body .mud-table-row .mud-table-cell::before {
        content: none;
    }

    /* Nazwisko — pierwszy plan lewej kolumny, bez etykiety „Zawodnik" przy każdym wierszu.
       `display: block` (a nie flex) jest tu warunkiem działania `text-overflow: ellipsis`. */
    .billing-forecast-mobile .mud-table-body .mud-table-row .mud-table-cell.bf-cell-member {
        grid-area: name;
        display: block;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Sugerowana wpłata — prawa kolumna pierwszej linii: mała szara etykieta nad pierwszoplanową kwotą. */
    .billing-forecast-mobile .mud-table-body .mud-table-row .mud-table-cell.bf-cell-suggested {
        grid-area: amount;
        justify-self: end;
        flex-direction: column;
        align-items: flex-end;
    }

    /* Skrócona etykieta („Sugerowana wpłata") z atrybutu `data-mobile-label` — pełne brzmienie
       z `data-label` zostaje w nagłówku tabeli na desktopie i byłoby tu za długie.
       Reguła MUSI iść po ogólnym `content: none` powyżej i mieć od niego wyższą specyficzność. */
    .billing-forecast-mobile .mud-table-body .mud-table-row .mud-table-cell.bf-cell-suggested::before {
        content: attr(data-mobile-label);
        font-size: .7rem;
        font-weight: 400;
        line-height: 1.2;
        color: var(--mud-palette-text-secondary);
        padding: 0;
    }

    /* Kwota nigdy nie łamie się między liczbą a walutą — stąd `nowrap` na samym MudText, a nie na
       komórce (treść renderuje się wewnątrz `.mud-typography`). */
    .billing-forecast-mobile .mud-table-body .mud-table-row .mud-table-cell.bf-cell-suggested .mud-typography {
        margin: 0;
        white-space: nowrap;
        font-size: 1.05rem;
        font-weight: 500;
        line-height: 1.2;
    }

    /* Stan konta — drobny druk drugiej linii. Etykieta „Stan konta" ZOSTAJE (jest krótka we wszystkich
       trzech językach, a bez niej sama kwota byłaby nieczytelna obok sugerowanej wpłaty). */
    .billing-forecast-mobile .mud-table-body .mud-table-row .mud-table-cell.bf-cell-balance {
        grid-area: balance;
        font-size: .8rem;
    }

    .billing-forecast-mobile .mud-table-body .mud-table-row .mud-table-cell.bf-cell-balance::before {
        content: attr(data-label);
        font-size: .8rem;
        font-weight: 400;
        color: var(--mud-palette-text-secondary);
        padding-right: 6px;
    }

    .billing-forecast-mobile .mud-table-body .mud-table-row .mud-table-cell.bf-cell-balance .mud-typography {
        margin: 0;
        white-space: nowrap;
        font-size: .8rem;
        line-height: 1.2;
    }

    /* Ikona portfela wtopiona w prawy dolny róg wiersza. Jawne `border-bottom: none` jest konieczne:
       MudBlazor rysuje kreskę wiersza regułą `.mud-xs-table .mud-table-row .mud-table-cell:last-child`
       (cztery klasy), której nie przebiłby ogólny reset komórki wyżej — kreskę nosi teraz `<tr>`. */
    .billing-forecast-mobile .mud-table-body .mud-table-row .mud-table-cell.bf-cell-action {
        grid-area: action;
        justify-self: end;
        border-bottom: none;
    }

    /* ── Portfel zawodnika, ledger (MemberBillingPage) — BILLMOB-2, układ poprawiony w BILLMOB-5 ──
       Pozycja = 3 linie zamiast dzisiejszych 6 „etykieta — wartość" + osobnej linii na ikony akcji:
         [data .................. | kwota  ]  ← kwota ze znakiem, pierwszoplanowa
         [opis, wielokropkiem ... | saldo  ]  ← saldo drobnym drukiem POD kwotą
         [cennik | status ....... | akcje  ]  ← drobny druk

       BILLMOB-5 — dlaczego saldo przeniosło się z trzeciej linii do drugiej:
       w pierwotnym układzie trzecia linia miała CZTERY elementy (cennik · status · saldo · akcje)
       i na 390 px nie było już czego dzielić — jedyną kolumną, która ustępuje, jest `minmax(0, 1fr)`,
       czyli właśnie CENNIK. Na zrzucie zostawało z niego „O…", a w innym wierszu samo „V": jedna
       litera z wielokropkiem czyta się jak usterka renderu, a nie jak drugi plan (wizja, decyzja D2:
       cennik ma zejść do drugiego planu, NIE zniknąć). Saldo trafia więc pod kwotę — do tej samej,
       trzeciej kolumny — bo to z kwotą trzeba je zestawiać, a nie z cennikiem. Trzecia linia ma
       wtedy trzy elementy, a kolumna cennika odzyskuje szerokość salda razem z jednym odstępem.
       Wysokość pozycji się nie zmienia: saldo (.75rem) jest niższe od opisu, który i tak wyznacza
       wysokość drugiej linii.

       `min-width: 0` w resecie komórki sprawia, że opis rozpięty na dwie kolumny wnosi zerowy wkład
       min-content — to on ustępuje wielokropkiem, a saldo w kolumnie `auto` nie jest ściskane.

       Markup nietknięty poza `Class` — kolejność siedmiu `<td>` niosą asercje E2E
       (`BillingTestHelper` czyta Nth(0)/Nth(1), `MemberBillingPriceListColumnE2ETests` Nth(2)),
       a przyciski muszą zostać WEWNĄTRZ `td[data-line-type]` (`MarkAsPaidVisibilityE2ETests`). */
    .billing-ledger-mobile .mud-table-body .mud-table-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "date   date    amount"
            "desc   desc    balance"
            "price  status  actions";
        column-gap: 8px;
        row-gap: 2px;
        padding: 8px 16px;
        align-items: center;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        padding: 0;
        border: none;
        min-width: 0;
    }

    /* Sześć powtarzalnych etykiet („Data", „Opis", „Cennik", „Kwota", „Status") znika; zostaje tylko
       „Saldo", przywrócone niżej regułą o wyższej specyficzności. */
    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell::before {
        content: none;
    }

    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-date {
        grid-area: date;
        font-size: .8rem;
        white-space: nowrap;
    }

    /* Kwota — jedyny element pierwszego planu w pozycji. Kolor (zielony/czerwony/neutralny) zostaje
       z `MudText Color=@GetAmountColor(...)`, świadomie go NIE nadpisujemy. */
    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-amount {
        grid-area: amount;
        justify-self: end;
    }

    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-amount .mud-typography {
        margin: 0;
        white-space: nowrap;
        font-size: 1.05rem;
        font-weight: 500;
        line-height: 1.2;
    }

    /* Opis na całą szerokość. `display: block` (a nie flex) jest warunkiem `text-overflow: ellipsis`. */
    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-desc {
        grid-area: desc;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Cennik — pierwszy do skrócenia, gdy w trzeciej linii zabraknie miejsca (stąd `1fr` w kolumnie 1).
       Też `display: block`: treść jest gołym węzłem tekstowym, a we flexie wielokropek nie działa. */
    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-pricelist {
        grid-area: price;
        display: block;
        font-size: .75rem;
        color: var(--mud-palette-text-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Status: `BillingStatusChip` renderuje `<span class="d-inline-flex">` z chipem (`.mud-chip`,
       to on nosi `data-status`) i — gdy status ma opis — przyciskiem pomocy `.mud-icon-button`
       w tooltipie; przy pokryciu nadpłatą dochodzi drugi chip. Chip MudBlazora ma na sztywno
       `height: 24px` i `margin: 4px` (reguły dwuklasowe), co samo w sobie robiłoby z trzeciej linii
       ~32 px — stąd `height: auto` i zerowy margines. */
    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-status {
        grid-area: status;
    }

    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-status .mud-chip {
        height: auto;
        margin: 0;
        padding: 1px 6px;
        font-size: .7rem;
    }

    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-status .mud-icon-root {
        font-size: .95rem;
    }

    /* Ikona pomocy przy statusie zostaje (niesie opis statusu), tylko przestaje być najwyższym
       elementem linii — `pa-0` z komponentu zdejmuje padding, my zbijamy jeszcze rozmiar ikony. */
    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-status .mud-icon-button {
        padding: 0;
    }

    /* Saldo — JEDYNA komórka, która zachowuje etykietę. Po BILLMOB-5 stoi DOKŁADNIE pod kwotą, w tej
       samej kolumnie i tak samo dosunięte do prawej, więc etykieta „Saldo" jest tu jeszcze bardziej
       potrzebna niż wcześniej: bez niej dwie kwoty jedna nad drugą są nie do rozróżnienia.
       Reguła musi iść po ogólnym `content: none` i mieć od niego wyższą specyficzność. */
    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-balance {
        grid-area: balance;
        justify-self: end;
        font-size: .75rem;
        white-space: nowrap;
    }

    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-balance::before {
        content: attr(data-label);
        font-size: .75rem;
        font-weight: 400;
        color: var(--mud-palette-text-secondary);
        padding-right: 4px;
    }

    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-balance .mud-typography {
        margin: 0;
        white-space: nowrap;
        font-size: .75rem;
        line-height: 1.2;
    }

    /* Akcje — ikony ciaśniej, kreskę wiersza nosi `<tr>` (patrz komentarz w sekcji BILLMOB-1). */
    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-actions {
        grid-area: actions;
        justify-self: end;
        border-bottom: none;
    }

    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-actions .mud-icon-button {
        padding: 2px;
    }

    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-actions .mud-icon-root {
        font-size: 1.15rem;
    }

    /* Pozycja prognozowana lub anulowana nie ma żadnej akcji — `<td>` istnieje zawsze (nosi
       `data-line-type`), ale bywa BEZ DZIECI: sprawdzone w wygenerowanym `MemberBillingPage_razor.g.cs`,
       gdzie ChildContent tej komórki to wyłącznie blok `@if` — Razor (.NET 5+) usuwa węzły
       białoznakowe, więc `:empty` faktycznie trafia i pusta komórka nie zabiera miejsca. */
    .billing-ledger-mobile .mud-table-body .mud-table-row .mud-table-cell.mb-cell-actions:empty {
        display: none;
    }

    /* ── Portfel zawodnika, nagłówek podsumowania (MemberBillingPage) — BILLMOB-3 ──
       Dwie metryki (stan konta / sugerowana wpłata) obok siebie także na 360 px zamiast dwóch
       zawiniętych linii, a cztery przyciski akcji parami zamiast czterech pełnych linii.
       Nagłówek NIE zmienia struktury: dokładamy klasy, a hooki `data-entity` (`wallet-balance`,
       `suggested-payment`) i `data-action` (`add-adhoc`, `register-payment`, `send-payment-link`,
       `send-payment-link-upfront`) zostają na swoich elementach, po jednym w DOM.

       Zewnętrzny `MudStack Row Wrap` już jest wierszem z zawijaniem (klasy narzędziowe MudBlazora),
       więc tu wystarczy zwęzić odstęp i podzielić linię między metryki — bez `!important`. */
    .billing-summary-mobile .bs-summary {
        gap: 8px 12px;
    }

    /* Po połowie szerokości i ani piksela więcej: `min-width: 0` pozwala metryce zejść poniżej
       swojej treści, inaczej `Typo.h5` z kwotą rozpycha kolumnę i całość znów się zawija. */
    .billing-summary-mobile .bs-metric {
        flex: 1 1 0;
        min-width: 0;
    }

    /* MudSpacer rozpycha nagłówek na desktopie; w układzie dwukolumnowym byłby trzecim elementem
       walczącym o miejsce w pierwszej linii, więc znika. */
    .billing-summary-mobile .bs-spacer {
        display: none;
    }

    .billing-summary-mobile .bs-label {
        font-size: .7rem;
        line-height: 1.3;
        margin: 0;
    }

    /* Skrócona etykieta („Sugerowana wpłata") wchodzi za pełną („Sugerowana płatność (do końca
       przyszłego miesiąca)"), która na połowie telefonu zajęłaby cztery linie. Zamiana przez
       `display`, nie `visibility` — ukryty wariant wypada też z drzewa dostępności, więc czytnik
       ekranu widzi dokładnie jedną etykietę. */
    .billing-summary-mobile .bs-label-full {
        display: none;
    }

    /* Trójczłonowo, żeby wygrać SPECYFICZNOŚCIĄ z regułą chowającą tę etykietę na szerokim ekranie
       (stoi na końcu pliku, więc przy remisie (0,2,0) wygrałaby kolejnością i skrót zniknąłby
       również na telefonie). */
    .billing-summary-mobile .bs-metric .bs-label-short {
        display: block;
    }

    /* Kwoty nie łamią się między liczbą a walutą; `Typo.h5` (1.5rem) zjadłby połowę szerokości,
       a przy stanie konta dochodzi jeszcze ikona trendu. */
    .billing-summary-mobile .bs-amount {
        font-size: 1.05rem;
        line-height: 1.3;
        white-space: nowrap;
        margin: 0;
    }

    /* ── Cztery przyciski akcji parami ──
       `flex-direction` MUSI mieć `!important`: kontener nosi narzędziową klasę MudBlazora
       `flex-column`, zadeklarowaną jako `flex-direction: column !important` (a `flex-sm-row` włącza
       się dopiero od 600 px). To JEDYNE `!important` w całym pliku i bije wyłącznie `!important`
       MudBlazora, nie naszą kaskadę. `display: flex` zostaje z `d-flex`, więc go nie ruszamy.

       Zawijany flex, a nie `grid-template-columns: 1fr 1fr`: liczba przycisków jest ZMIENNA (czwarty
       renderuje się tylko przy „Pokaż przyszłe"), a `flex-grow` domyka nieparzystą resztę na całą
       szerokość. Przy 4 → 2×2, przy 3 → 2 + 1 rozciągnięty, przy 2 → jedna para, przy 1 → pełna
       szerokość. Sztywna siatka zostawiłaby w tych przypadkach dziurę. */
    .billing-summary-mobile .bs-actions {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    .billing-summary-mobile .bs-actions > * {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }

    /* Wariant `Disabled` stoi w `<MudTooltip><span><MudButton/></span></MudTooltip>`. MudTooltip
       renderuje własny `<div class="mud-tooltip-root mud-tooltip-inline">` (`ContainerClass`,
       `Inline` domyślnie true) i wkłada ChildContent BEZ dodatkowego opakowania — potwierdza to
       reguła samego MudBlazora `.mud-tooltip-root.mud-tooltip-inline:has(>.mud-width-full)`,
       gdzie `>` celuje wprost w przycisk. Elementem naszego flexa jest więc ten `div`, a `<span>`
       z markupu strony jest jego BEZPOŚREDNIM dzieckiem; oba trzeba rozciągnąć, żeby opakowany
       przycisk nie wypadł z rytmu pary. `> span` (a nie `> *`) świadomie omija popover tooltipa. */
    .billing-summary-mobile .bs-actions > .mud-tooltip-root {
        display: block;
    }

    .billing-summary-mobile .bs-actions > .mud-tooltip-root > span {
        display: block;
        width: 100%;
    }

    /* Etykiety zostają widoczne (nazwy akcji dotyczą pieniędzy — ta sama zasada co w UIACT dla
       PageTop), więc muszą się zmieścić: mniejszy krój i padding, zawijanie po SPACJACH.
       Świadomie bez `word-break`/`overflow-wrap: break-word` — najdłuższe słowo w trzech językach
       („Zaregistrovat", 13 znaków) mieści się w kolumnie, a łamanie w środku wyrazu byłoby gorsze
       niż przycisk o linijkę wyższy. */
    .billing-summary-mobile .bs-actions .mud-button-root {
        width: 100%;
        padding: 4px 8px;
        font-size: .75rem;
        line-height: 1.25;
        white-space: normal;
    }

    .billing-summary-mobile .bs-actions .mud-button-root .mud-icon-root {
        font-size: 1.05rem;
    }

    /* Ikona startowa oddaje połowę swojego marginesu tekstowi. Nadpisujemy OBIE właściwości —
       MudBlazor deklaruje `margin-right`, a zaraz po nim logiczne `margin-inline-end`, które
       przy samym `margin-right` wygrałoby kolejnością. */
    .billing-summary-mobile .bs-actions .mud-button-icon-start {
        margin-right: 4px;
        margin-inline-end: 4px;
    }
}

/* Skrócona etykieta sugerowanej wpłaty istnieje w DOM zawsze (jeden render, patrz BILLMOB-3 wyżej),
   więc powyżej 600 px trzeba ją schować — to JEDYNA reguła tego pliku poza `@media`. Nie zmienia
   desktopu: dotyczy wyłącznie elementu dodanego w BILLMOB-3, którego wcześniej nie było. Pełną
   etykietę na desktopie zostawiamy nietkniętą. */
.billing-summary-mobile .bs-label-short {
    display: none;
}