/*
    Barwy marki z logo Opony 365.

    Zieleń jest tu WYŁĄCZNIE akcentem i celowo nie stoi na żadnym gnieździe palety MudBlazora.
    Zielony przycisk znaczy w tym interfejsie "dostaniesz plik XLSX" (AGENTS.md §1.1), a Success
    jest zielony i oznacza stan zakończony - marka na Primary skasowałaby oba te sygnały naraz.
    Rolę koloru wiodącego pełni grafit z konturu logo.

    Wartości pobrane wprost z pliku logo (dominujące barwy po odfiltrowaniu wygładzania),
    nie dobrane na oko. Zieleń daje na bieli 4,25:1, więc nadaje się na listwy, ikony i duży
    tekst; drobny tekst wymaga 4,5:1, więc dla niego zostaje grafit (15,7:1).

    Barwy marki są wpisane tylko tutaj oraz w Primary/AppbarText w MudTheme.cs - C# nie umie
    czytać zmiennych CSS, więc tych dwóch miejsc nie da się zredukować do jednego.
*/
:root {
    --tyres-brand-green: #55882A;
    --tyres-brand-graphite: #232323;
}

/*
    Listwa marki pod paskiem aplikacji. Pasek jest biały, bo logo jest rysowane na bieli,
    więc zieleń wchodzi paskiem pod spodem zamiast tła - inaczej logo wymagałoby drugiej wersji
    na ciemne tło, której nie mamy.
*/
.mud-appbar {
    border-bottom: 3px solid var(--tyres-brand-green);
}

/*
    Logo w pasku aplikacji. Wysokość zamiast szerokości, bo lockup jest szeroki
    i to wysokość paska jest tu ograniczeniem. Nowe logo ma więcej detalu, więc wypełnia
    pasek mocniej i zostawia mniejszy margines góra/dół. Na telefonie ładujemy osobną
    wersję bez sloganu, bo dolny tekst jest tam nieczytelny.
*/
.tyres-brand-logo-frame {
    display: block;
    flex: 0 0 auto;
}

.tyres-brand-logo {
    height: 56px;
    width: auto;
    display: block;
}

@media (max-width: 959.98px) {
    .tyres-brand-logo {
        height: 42px;
    }
}

/*
    Wspólne style UI dla obu portali (Admin i Garage).
    Plik jest dołączany w index.html jako _content/Tyres365.Blazor.Library/css/tyres365-ui.css.
*/

/*
    Przycisk "excelowy" - kolor marki Excela (#217346) rezerwujemy WYŁĄCZNIE dla akcji,
    których bezpośrednim efektem jest plik XLSX: eksport listy, pobranie raportu, import.
    Dzięki temu zielony przycisk w całej aplikacji znaczy zawsze to samo i użytkownik
    rozpoznaje go, zanim przeczyta etykietę.

    Selektor celowo łączy trzy klasy (0,3,0), żeby wygrać z regułą MudBlazora
    .mud-button-filled.mud-button-filled-primary (0,2,0) niezależnie od kolejności
    arkuszy. Stanu disabled nie nadpisujemy - MudBlazor ustawia go z !important
    i to jest zachowanie, którego chcemy.
*/
.mud-button-root.mud-button-filled.tyres-button-excel {
    background-color: #217346;
    color: #fff;
}

.mud-button-root.mud-button-filled.tyres-button-excel:hover {
    background-color: #1a5c38;
}

.mud-button-root.mud-button-filled.tyres-button-excel:focus-visible {
    background-color: #1a5c38;
}

/*
    Zielony outline dla drugorzędnych akcji w miejscach, gdzie jasny przycisk Secondary
    wyglądał jak nieaktywny. To nie jest wariant "Excel" - nie używa klasy
    tyres-button-excel i nie zmienia globalnego znaczenia zielonych wypełnionych akcji.
*/
.mud-button-root.mud-button-outlined.tyres-button-brand-outline:not(:disabled):not(.mud-disabled) {
    border-color: var(--tyres-brand-green);
    color: var(--tyres-brand-green);
    font-weight: 700;
}

.mud-button-root.mud-button-outlined.tyres-button-brand-outline:not(:disabled):not(.mud-disabled):hover {
    background-color: rgba(85, 136, 42, 0.08);
    border-color: #466f22;
    color: #466f22;
}

.mud-button-root.mud-button-outlined.tyres-button-brand-outline:not(:disabled):not(.mud-disabled):focus-visible {
    background-color: rgba(85, 136, 42, 0.12);
    border-color: #466f22;
    color: #466f22;
}

.mud-button-root.mud-button-filled.mud-button-filled-primary.used-tyre-create-details__tile:not(:disabled):not(.mud-disabled) {
    background-color: var(--tyres-brand-green);
    color: #fff;
}

.mud-button-root.mud-button-filled.mud-button-filled-primary.used-tyre-create-details__tile:not(:disabled):not(.mud-disabled):hover,
.mud-button-root.mud-button-filled.mud-button-filled-primary.used-tyre-create-details__tile:not(:disabled):not(.mud-disabled):focus-visible {
    background-color: #466f22;
    color: #fff;
}

.mud-chip.mud-chip-filled.used-tyre-create-details__draft-tread {
    background-color: #76a846;
    color: #fff;
}

/*
    Wiersz sztuki w edytorze zgłoszenia (UsedTyreSaleSubmissionOrderTyresList).

    Kafel bieżnika i plakietka bieżnika opisane były w arkuszu izolowanym komponentu, ale bez
    ::deep - a obie klasy siedzą na komponentach MudBlazora, więc atrybut zakresu izolacji do
    nich nie docierał i reguły nigdy nie zadziałały (§1.2). Stąd rozjazd, który zgłosił klient:
    przy dodawaniu opon bieżnik jest zielony i kanciasty, a w edytorze wychodził grafitowym
    kaflem i okrągłą, niebieską pigułką. Reguły są teraz tutaj, w brzmieniu z ekranu dodawania -
    ta sama wartość ma wyglądać tak samo niezależnie od tego, którym wejściem się do niej dotarło.

    Kolor MudChipa zostaje Color.Info w znacznikach: barwę nadaje ta reguła, a slot palety
    trzyma domyślny kontrast tekstu.
*/
.mud-button-root.used-tyre-order-rows__tile {
    min-height: 96px;
    border-radius: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.mud-button-root.mud-button-filled.mud-button-filled-primary.used-tyre-order-rows__tile:not(:disabled):not(.mud-disabled) {
    background-color: var(--tyres-brand-green);
    color: #fff;
}

.mud-button-root.mud-button-filled.mud-button-filled-primary.used-tyre-order-rows__tile:not(:disabled):not(.mud-disabled):hover,
.mud-button-root.mud-button-filled.mud-button-filled-primary.used-tyre-order-rows__tile:not(:disabled):not(.mud-disabled):focus-visible {
    background-color: #466f22;
    color: #fff;
}

.mud-chip.mud-chip-filled.used-tyre-order-rows__tread-chip {
    min-height: 50px;
    min-width: 132px;
    justify-content: center;
    border-radius: 0;
    background-color: #76a846;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/*
    Na desktopie obie grupy plakietek stoją w jednej linii - wiersz wygląda dokładnie tak,
    jak przed rozdzieleniem ich w znacznikach.
*/
.used-tyre-order-rows__badges {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.used-tyre-order-rows__badges-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

@media (max-width: 959.98px) {
    .mud-button-root.used-tyre-order-rows__tile {
        min-height: 82px;
        font-size: 1rem;
    }

    /*
        Dwa wiersze zamiast jednego: w górnym to, co podał warsztat (bieżnik i rocznik),
        w dolnym to, co nadał system (numer sztuki i status).

        Podział bierze się z treści, nie tylko z braku miejsca, i dlatego jest odporny:
        układ przestaje zależeć od długości nazwy statusu. Najdłuższa - "Wymagane zdjęcia" -
        zwęzi teraz numer sztuki obok siebie, zamiast wypychać cokolwiek poza ekran.

        Plakietki górnego wiersza dzielą szerokość po połowie, bo obie są krótkie i równy
        podział czyta się jak para. W dolnym numer bierze resztę miejsca, a status tylko tyle,
        ile potrzebuje - to on ma zmienną długość.
    */
    .used-tyre-order-rows__badges {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    /*
        Szerokość na grupie, a nie samo align-items na rodzicu: kolumna z wyśrodkowaniem
        zwęziłaby obie grupy do treści i postawiła je na środku karty, a plakietki w środku
        nie miałyby czego dzielić.
    */
    .used-tyre-order-rows__badges-group {
        width: 100%;
        gap: 0.5rem;
        align-items: stretch;
    }

    /*
        Bieżnik i rocznik dzielą wiersz dokładnie po połowie - obie wartości są krótkie
        i czytają się jak para.

        Siatka, a nie flex: dwie równe kolumny to tu jedna deklaracja, a element siatki
        rozciąga się na swoją kolumnę bez proszenia. Skrót "flex: 1 1 0" załatwiał to samo
        w jednej przeglądarce, a w drugiej plakietki zostawały przy swojej szerokości -
        nieokreślone zero w tym skrócie jest tego wart, żeby go nie używać.

        Marginesu plakietki nie zerujemy przypadkiem: MudBlazor daje każdej margin 4px, przez
        co odstęp między kolumnami byłby sumą marginesów i przerwy siatki, a same plakietki
        nie dochodziłyby do krawędzi karty.
    */
    .used-tyre-order-rows__badges-group--reported {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .used-tyre-order-rows__badges-group--reported > .mud-chip {
        margin: 0;
        min-width: 0;
    }

    /*
        Numer sztuki bierze resztę miejsca, status tylko tyle, ile potrzebuje - to on ma
        zmienną długość, od "Zgłoszona" po "Wymagane zdjęcia".

        Numer siedzi wewnątrz obudowy podpowiedzi, a ta ma z MudBlazora width: auto, więc to
        JEJ trzeba pozwolić rosnąć; samo width na numerze nie miałoby czego wypełnić.
        space-between zostaje jako zabezpieczenie na wypadek, gdyby obudowa kiedyś zniknęła
        albo zmieniła nazwę klasy - wtedy plakietki się rozsuną, zamiast skleić po lewej.
    */
    .used-tyre-order-rows__badges-group--assigned {
        align-items: center;
        justify-content: space-between;
    }

    .used-tyre-order-rows__badges-group--assigned > .mud-tooltip-root {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mud-chip.mud-chip-filled.used-tyre-order-rows__tread-chip {
        min-height: 56px;
        min-width: 0;
    }
}

/*
    Odstępy treści strony - wspólne dla obu portali.

    Treść była odsunięta od krawędzi ekranu o 32px z każdej strony: MudContainer dokłada własne
    odstępy (gutters) do tych, które przyszły klasą pa-4, i nikt tego nie zauważył, bo na
    monitorze miejsca nie brakuje. Karta dokładała do tego swoje 16px, więc na telefonie 360px
    od krawędzi do treści było 48px z każdej strony - 27% szerokości ekranu zjedzone, zanim
    cokolwiek się wyświetliło.

    Na telefonie schodzimy do 8px na zewnątrz i 12px w karcie, co oddaje 56px szerokości. Zera
    nie stosujemy świadomie: tekst dotykający krawędzi czyta się jak błąd renderowania, a na
    ekranach z zaokrąglonymi rogami potrafi wejść pod zaokrąglenie.

    Na desktopie zostaje 16px - tam szerokości nie brakuje, a treść przyklejona do krawędzi
    monitora czyta się gorzej.

    Nadpisanie pa-4 jest ograniczone do wnętrza kontenera strony, bo klasy pomocnicze MudBlazora
    niosą !important i bez tego zawężenia ta sama reguła spłaszczyłaby również okna modalne,
    które renderują się poza treścią strony.
*/
.tyres-page-container {
    padding: 16px;
}

@media (max-width: 959.98px) {
    .tyres-page-container {
        padding: 8px;
    }

    .tyres-page-container .mud-paper.pa-4 {
        padding: 12px !important;
    }
}

/*
    Filtr po krótkim słowniku jako kafelki (TyreParameterChoiceFilter, na telefonie).

    Reguły są tutaj, a nie w arkuszu izolowanym: MudToggleGroup i MudToggleItem to komponenty,
    więc atrybut zakresu izolacji do ich znaczników nie dociera (§1.2).

    Kolumny ustawiamy przez grid-auto-*, a nie repeat(3, 1fr): grupa dostaje z MudBlazora
    display: grid, a liczba kafelków bierze się ze słownika, który jest otwarty. Zapis
    automatyczny rozdziela szerokość po równo niezależnie od tego, ile pozycji przyjdzie,
    więc czwarty sezon niczego nie rozsypie - a to komponent decyduje, powyżej ilu pozycji
    wraca do listy rozwijanej.

    Wysokość 56 px to ten sam cel dotyku co przy kaflach bieżnika i rocznika; kanciastość
    również, żeby wszystkie wybory na tym ekranie wyglądały jak jedna rodzina.
*/
.tyres-choice-filter {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tyres-choice-filter__label {
    line-height: 1.4;
}

.mud-toggle-group.tyres-choice-filter__group {
    width: 100%;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
    border: 0;
    border-radius: 0;
    /* Grupa domyślnie przycina zawartość, żeby skleić kafle w jeden pasek - przy odstępach
       między nimi nie ma czego przycinać, a obcięłoby to obramowania skrajnych. */
    overflow: visible;
}

/*
    Stan spoczynkowy niesie barwę, bo bez niej kafelki czytały się jak nagłówki tabeli, a nie
    jak coś, w co można stuknąć - i dokładnie to zgłosił klient po pierwszym teście. Ta sama
    rodzina błękitów co plakietka z licznikiem sztuk kilka linii wyżej w panelu filtrów, żeby
    nie wprowadzać do interfejsu kolejnego znaczenia koloru. Zieleń odpada - należy do bieżnika
    i do akcji dających plik XLSX (§1.1).

    44 px zamiast 56: to nadal cel dotyku (tyle mają strzałki paginatora, i z tego samego
    powodu), a filtry na telefonie walczą o pion.

    Bez wersalików i bez pogrubienia: nazwa sezonu jest wartością słownikową i ma się czytać
    tak, jak stoi w bazie. "CAŁOROCZNE" wersalikami zajmuje o kilkanaście procent więcej
    szerokości niż "Całoroczne", a to właśnie ta nazwa wyznacza granicę trzech kafelków w rzędzie.
*/
/*
    Bez obramowania kafli: MudBlazor wymusza na nich border-style: none z !important, więc
    deklaracja obramowania byłaby regułą martwą - a te w tym projekcie już raz kosztowały
    dzień szukania. Kafel wydzielają odstęp, tło i zaokrąglenie, co wystarcza.
*/
.tyres-choice-filter__group .mud-toggle-item {
    min-height: 44px;
    margin: 0;
    padding: 0 0.5rem;
    border-radius: 4px;
    background-color: rgba(30, 93, 150, 0.08);
    color: #1e4d7b;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
}

.tyres-choice-filter__group .mud-toggle-item:hover {
    background-color: rgba(30, 93, 150, 0.16);
}

/*
    Wybrany kafel dostaje pełny błękit - ten sam, którym w stanie spoczynkowym pisane są
    nazwy. Biel na nim daje 8:1; wcześniej stała tu barwa wiodąca motywu i wypadła
    nieczytelnie: MudBlazor maluje tło stanu wybranego własną regułą z !important, więc
    zapis skrócony "background" przegrywał z jego "background-color", zostawiając biały
    tekst na jasnym tle. Stąd i !important tutaj, i pełna nazwa właściwości - reguła musi
    wygrać z frameworkiem, a nie liczyć na kolejność arkuszy.
*/
.tyres-choice-filter__group .tyres-choice-filter__tile--selected {
    background-color: #1e4d7b !important;
    color: #ffffff !important;
    font-weight: 700;
}

/*
    Okno wyboru rocznika produkcji (ProductionYearDialog).

    Kafelki są grafitowe, a nie zielone jak kafle bieżnika. Na tym ekranie zieleń już coś znaczy -
    "wysokość bieżnika" - a dwie zielone siatki jedna pod drugą zlewają się w jeden blok. Grafit
    to kolor wiodący motywu, więc nie wprowadza do systemu nowej barwy. Poza tym zielone
    wypełnienie w całej aplikacji zarezerwowane jest dla akcji dających plik XLSX (§1.1).

    Wysokość 88 px zamiast domyślnych 36: rocznik wybiera się na telefonie, często w rękawicy.
    Kanciastość i rozstrzelenie jak w kaflach bieżnika, żeby oba kroki wyglądały jak jedna rodzina.

    Reguły siedzą tutaj, a nie w arkuszu izolowanym komponentu - celują w <button> renderowany
    przez MudButton, do którego atrybut zakresu izolacji CSS nie dociera (§1.2).
*/
.tyres-production-year-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mud-button-root.mud-button-filled.tyres-production-year-tile {
    min-height: 88px;
    border-radius: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/*
    Wyjście z okna. Pełna szerokość, bo to jedyny przycisk w stopce, a pełne pole dotyku jest
    tu wartością samą w sobie - patrz komentarz w ProductionYearDialog.razor.
*/
.mud-button-root.mud-button-outlined.tyres-production-year-cancel {
    width: 100%;
    min-height: 56px;
    border-radius: 0;
    background-color: var(--mud-palette-background-gray);
    border-color: rgba(0, 0, 0, 0.23);
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    letter-spacing: 0.04em;
}

/*
    Plakietka rocznika w wierszu zgłaszanej sztuki - stoi obok plakietki bieżnika i musi mieć
    jej wysokość, inaczej wiersz wygląda na złożony z dwóch różnych rzeczy.
*/
.mud-chip.mud-chip-filled.tyres-production-year-chip {
    /* 50px to wysokość plakietki bieżnika, numeru sztuki i statusu - rocznik stoi obok nich. */
    min-height: 50px;
    min-width: 96px;
    justify-content: center;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/*
    Na telefonie plakietka rocznika NIE ma dolnego ograniczenia szerokości. Sztywna wartość
    zabierała miejsce, którego przy czterech plakietkach w wierszu edytora już nie było, a na
    ekranie dodawania - gdzie wiersz to bieżnik, rocznik i kosz - przy 360 px zjadała cały
    zapas. Rocznik ma zawsze cztery znaki, więc nie potrzebuje podłogi, żeby wyglądać równo.
*/
@media (max-width: 959.98px) {
    .mud-chip.mud-chip-filled.tyres-production-year-chip {
        min-height: 56px;
        min-width: 0;
        font-size: 1.05rem;
    }
}

/*
    Okna modalne budowane na MudOverlay (podgląd zamówienia, edycja firmy, słowniki
    parametrów, import - w obu portalach).

    MudBlazor daje gołej nakładce z-index 5, a podbija go dopiero klasą wariantu
    (mud-overlay-dialog, -drawer, -popover), której nasze okna nie mają. Motyw ustawia
    app bara na 1300 i szufladę na 1100, więc pasek aplikacji rysował się NAD oknem
    i zjadał jego górną krawędź razem z przyciskiem zamknięcia. Widać to dopiero przy
    niższym ekranie: okno ma max-height 92vh i jest centrowane w pionie, więc na monitorze
    zostaje pod paskiem kilkadziesiąt pikseli zapasu, a na laptopie okno dobija do limitu
    i wchodzi paskowi pod spód.

    1350 to jedyne sensowne miejsce: nad app barem (1300), ale pod dialogami (1400).
    Wyżej być nie może, bo podgląd zdjęcia to prawdziwy MudDialog otwierany z wnętrza
    okna podglądu zamówienia - nakładka nad 1400 zasłoniłaby zdjęcie, po które
    użytkownik kliknął.

    Reguła jest celowo mało specyficzna (0,1,0). Warianty MudBlazora (0,2,0) zachowują
    swoje wartości - scrim szuflady dalej ma zostać POD szufladą. Nasze nakładki
    systemowe niżej w tym pliku (0,2,0) też wygrywają i zostają nad oknami.
    Remis ze skalą MudBlazora rozstrzyga kolejność arkuszy: tyres365-ui.css jest
    linkowany po MudBlazor.min.css w index.html obu aplikacji i tak musi zostać.
*/
.mud-overlay {
    z-index: 1350;
}

/*
    Blokada wymuszonej aktualizacji (AppUpdateNotificationHost).

    Dialogi MudBlazora siedzą na 1400 - bez podbicia otwarty dialog zasłoniłby ekran
    blokady i użytkownik dalej klikałby w starej wersji. Blokada musi być nad wszystkim,
    łącznie z app barem (1300), dialogami i naszymi oknami modalnymi (1350).
*/
.mud-overlay.tyres365-update-overlay {
    z-index: 2000;
}

/*
    Nakładka oczekiwania na serwer (ConnectingOverlay).

    Nakładka ma zasłonić cały interfejs, więc idzie nad app bara (1300), szufladę (1100)
    i dialogi (1400) - w trakcie autoryzacji nic z tego nie jest jeszcze użyteczne.
    Niżej niż blokada aktualizacji (2000): gdy serwer odpowie "wymagana aktualizacja",
    to ona ma być na wierzchu.
*/
.mud-overlay.tyres365-connecting-overlay {
    z-index: 1900;
}

/*
    Numer referencyjny (sztuki opony, zamówienia, oferty).

    Wyróżniamy go krojem o stałej szerokości i rozstrzeleniem, bo numery czyta się
    znak po znaku przy przepisywaniu do arkusza. Styl jest wspólny, żeby ten sam numer
    wyglądał identycznie na każdej liście i w edytorze oferty.
*/
.tyres-reference {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #1e4d7b;
    white-space: nowrap;
}

.tyres-reference--missing {
    color: rgba(100, 116, 139, 0.85);
    font-weight: 400;
}

/*
    Rocznik produkcji w komórce listy. Cyfry o stałej szerokości, żeby kolumna czytała się
    w pionie - roczniki porównuje się wzrokiem, jeden pod drugim.

    Wariant "legacy" to rocznik umowny wpisany migracją wierszom sprzed wprowadzenia tego pola.
    Ta sama szarość co przy brakującym numerze opony, i z tego samego powodu: wartość jest,
    ale nic nie znaczy.
*/
.tyres-production-year {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    white-space: nowrap;
}

.tyres-production-year--legacy {
    color: rgba(100, 116, 139, 0.85);
    font-weight: 400;
}

/*
    Mocna plakietka - nasza nakładka na paletę MudBlazora.

    Domyślne plakietki Variant.Outlined mają białe tło i kolorowy tekst, więc zlewają się
    z kartą i tabelą. Informacja ma być widoczna od razu, dlatego tło jest wypełnione
    kolorem, a tekst dobrany do jasności tła: biały na ciemnym, prawie czarny na jasnym.

    Klasa nazywa się od tego, co robi, a nie od miejsca użycia - noszą ją plakietki
    statusów (OrderStatusChip, TyreStatusChip) i licznik opon w edytorze oferty, bo
    problem czytelności był w nich identyczny. Kolejne zastosowania dokładamy tutaj,
    zamiast powielać tabelę kolorów pod nową nazwą.

    Palety MudBlazora nie przestawiamy globalnie, bo te same kolory noszą przyciski
    i alerty. Nadpisujemy wyłącznie plakietki noszące klasę tyres-chip-solid.
    Kolory MudBlazora nie nadają się tu wprost: warning (#ff9800) i success (#00c853)
    dostają od niego biały tekst, co daje kontrast rzędu 2:1 - nieczytelny.
    Wybrane niżej pary mieszczą się w WCAG AA (>= 4.5:1) dla drobnego, pogrubionego tekstu.

    Selektory kolorowe łączą cztery klasy (0,4,0), żeby wygrać z regułą MudBlazora
    .mud-chip-filled.mud-chip-color-* (0,2,0) niezależnie od kolejności arkuszy.

    Reguła bazowa (0,3,0) pełni podwójną rolę: nadaje krój wszystkim takim plakietkom
    i zarazem definiuje wygląd stanu neutralnego ("W przygotowaniu", Color.Default).
    Celowo nie opieramy go na klasie mud-chip-color-default - MudBlazor nie ma dla niej
    żadnej reguły i nie ma gwarancji, że w ogóle ją wypisuje. Reguły kolorowe są bardziej
    specyficzne, więc nadpisują bazową tam, gdzie plakietka ma swój kolor.
*/
.mud-chip.mud-chip-filled.tyres-chip-solid {
    background-color: #cfd8dc;
    color: #263238;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Oczekuje */
.mud-chip.mud-chip-filled.tyres-chip-solid.mud-chip-color-info {
    background-color: #1565c0;
    color: #fff;
}

/* W realizacji / Do akceptacji / brak wybranych opon - jasny amber wymaga ciemnego tekstu. */
.mud-chip.mud-chip-filled.tyres-chip-solid.mud-chip-color-warning {
    background-color: #ffb300;
    color: #21150a;
}

/* Wymagane zdjęcia - jedyny stan, który nie jest ani sukcesem, ani błędem, ani oczekiwaniem:
   piłka jest po stronie warsztatu. Ta sama żółć co wcześniej, ale na własnym slocie Tertiary,
   a nie na Warning - dzięki temu ikona akcji może mieć ciemniejsze złoto potrzebne do
   czytelności, nie zmieniając przy okazji wagi wpisów w dzienniku błędów.

   Żółć wymaga ciemnego tekstu: ta para daje ok. 11:1, a domyślna biel MudBlazora dawałaby
   poniżej 2:1. */
.mud-chip.mud-chip-filled.tyres-chip-solid.mud-chip-color-tertiary {
    background-color: #ffb300;
    color: #21150a;
}

/* Zakończono / Zaakceptowana / licznik wybranych opon */
.mud-chip.mud-chip-filled.tyres-chip-solid.mud-chip-color-success {
    background-color: #2e7d32;
    color: #fff;
}

/* Anulowano / Odrzucona */
.mud-chip.mud-chip-filled.tyres-chip-solid.mud-chip-color-error {
    background-color: #c62828;
    color: #fff;
}

/*
    Wariant kaflowy: plakietka statusu w karcie opony na liście pozycji zamówienia
    dopasowuje się wysokością do plakietki bieżnika obok. Reguła siedzi tutaj, a nie
    w stylach lokalnych komponentu, bo style izolowane nie docierają do znaczników
    komponentu potomnego, którym jest teraz TyreStatusChip.

    Selektor musi zawierać tyres-chip-solid, żeby wyprzedzić regułę bazową (0,3,0) -
    inaczej pogrubienie z tego wariantu nie miałoby żadnego efektu.
*/
.mud-chip.mud-chip-filled.tyres-chip-solid.tyres-chip-solid--card {
    border-radius: 0;
    min-height: 50px;
    font-weight: 700;
}

/*
    Na telefonie ten sam wariant dzieli wiersz z bieżnikiem i numerem sztuki, więc musi
    umieć się zwęzić: bez min-width 0 element flex nie schodzi poniżej swojej treści
    i wypycha numer do drugiej linii. Mniejszy krój kupuje miejsce dla najdłuższej nazwy
    statusu ("Do akceptacji"). Reguła siedzi tutaj razem z resztą wariantu kaflowego -
    style izolowane rodzica nie docierają do znaczników TyreStatusChip.
*/
@media (max-width: 959.98px) {
    .mud-chip.mud-chip-filled.tyres-chip-solid.tyres-chip-solid--card {
        min-height: 56px;
        min-width: 0;
        flex: 0 1 auto;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 0.75rem;
    }
}

/* Pasek miniatur rozwijany pod wierszem listy opon (UsedTyreRowImages). */
.tyres-row-images {
    background: rgba(248, 250, 252, 0.7);
}

/* Plakietka z licznikiem zdjęć nachodzi na ikonę, więc wiersz potrzebuje luzu po prawej. */
.tyres-row-images-badge {
    margin-right: 0.35rem;
}

/* Skracanie długiego tekstu w komórce tabeli. Powstało dla kolumny z identyfikatorem
   przeglądarki w historii logowań - potrafi mieć kilkaset znaków i rozpycha całą tabelę.
   Pełna wartość zostaje w podpowiedzi. */
.tyres-text-truncate {
    display: block;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Paginator listy stoi nad tabelą i pod nią - na długiej liście nie trzeba przewijać na sam
   dół, żeby zmienić stronę albo zobaczyć liczbę wyników.

   Na telefonie zostaje wyłącznie górny. Dwa paski nawigacji zjadałyby pion na ekranie, na
   którym i tak go brakuje, a górny jest bliżej kciuka i widoczny od razu po wejściu na listę.

   Reguła jest tutaj, a nie w arkuszu izolowanym ListTablePager: klasa trafia na element
   renderowany przez MudTablePager, do którego atrybut zakresu izolacji CSS nie dociera.

   Próg to ResponsiveViewHost.MobileMaxWidth - jedyne miejsce, w którym decydujemy, co jest
   widokiem mobilnym. Wcześniej stało tu 767.98 i w pasie 768-959 lista szła w kafle, ale
   oba paginatory zostawały - czyli dokładnie odwrotnie, niż mówi akapit wyżej. */
@media (max-width: 959.98px) {
    .tyres-list-pager--bottom {
        display: none;
    }
}

/* Mobilny układ paginatora.

   MudBlazor daje obu paskom sztywną wysokość i zakaz zawijania: .mud-toolbar ma 64 px,
   .mud-table-pagination-toolbar 52 px, oba z flex-wrap: nowrap. Górny paginator siedzi
   wewnątrz paska narzędzi tabeli, więc w jednym niezawijalnym wierszu lądują tytuł listy,
   podsumowanie, etykieta "Wierszy na stronę", pole wyboru, tekst wyników i strzałki. Przy
   414 px nie ma szans się zmieścić - elementy nachodzą na siebie, a tytuł łamie się na dwie
   linie pod paginatorem.

   Zdejmujemy więc sztywną wysokość i pozwalamy zawijać. Strzałki dostają własny wiersz na
   całą szerokość, wyśrodkowany: to jedyny element, w który celuje się palcem, a na środku
   jest w zasięgu kciuka niezależnie od tego, w której ręce jest telefon. Wysokość celu
   podnosimy do 44 px - poniżej tego trafianie w sąsiednią strzałkę przestaje być rzadkie.

   Nadpisanie wysokości opiera się na kolejności arkuszy: tyres365-ui.css jest w index.html
   wpięty po MudBlazor.min.css, a selektory mają tę samą szczegółowość, więc wygrywa nasz.
   Celowo nie łączymy klas w rodzaju .mud-table-pagination-toolbar.mud-toolbar - nie wiadomo,
   czy MudBlazor trzyma na tym elemencie obie, a selektor, który nie trafia w nic, jest gorszy
   niż zależność od kolejności. Gdyby ktoś przestawił wpięcia w index.html, znikną odstępy
   w paginatorze na telefonie - to pierwszy objaw, którego tu szukać.

   Reguły są tutaj, a nie w arkuszu izolowanym ListTablePager: dotyczą znaczników
   renderowanych przez MudTablePager i MudTable, do których atrybut zakresu izolacji CSS nie
   dociera (AGENTS.md §1.2). Próg jest wspólny - patrz §1.6. */
@media (max-width: 959.98px) {
    .mud-table-toolbar {
        height: auto;
        flex-wrap: wrap;
        row-gap: 0.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .mud-table-pagination-toolbar {
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.25rem;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* Rozpychacz ma sens wyłącznie w jednym wierszu; przy zawijaniu wypycha strzałki
       na osobną linię z pustym miejscem nad nimi. */
    .mud-table-pagination-spacer {
        display: none;
    }

    /* display: flex jest konieczne - MudBlazor ustawia na tym elemencie align-items
       i marginesy, ale nie czyni go kontenerem flex, więc samo justify-content
       nie wyśrodkowałoby strzałek. */
    .mud-table-pagination-actions {
        display: flex;
        flex-basis: 100%;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
        margin-inline-start: 0;
        margin-inline-end: 0;
    }

    .mud-table-pagination-actions .mud-button-root {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Pasek akcji edytora - przyciski działające na oglądanym obiekcie.

   Na wąskim ekranie idą jeden pod drugim, na całą szerokość. Wciśnięcie kilku przycisków
   w jeden wiersz wymagałoby dobrania szerokości pod konkretny telefon, a te mają od 320
   do 430 px, teksty są polskie i użytkownik może mieć powiększoną czcionkę systemową.
   Każdy taki układ działa na jednym urządzeniu i rozjeżdża się na drugim. Pełna szerokość
   nie ma czego przepełnić i daje największe pole dotyku, co w warsztacie - często
   w rękawicach - ma znaczenie. Edytor oferty potrafi pokazać osiem przycisków naraz,
   więc bez tego wychodziły poza ekran.

   Reguła była wcześniej skopiowana w arkuszach obu stron edycji zgłoszenia. Trzecia kopia
   dla oferty przypieczętowałaby rozjazd, więc mieszka tu, w jednym miejscu. Tutaj, a nie
   w arkuszu izolowanym, bo celuje w <button> renderowany przez MudButton - izolacja CSS
   tam nie sięga (AGENTS.md §1.2). Próg jest wspólny - patrz §1.6.

   Wygląd samych przycisków zostaje przy stronach: kanciasty, szeroki przycisk zgłoszenia
   to ich wybór, a nie część tej reguły. */
.tyres-editor-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

@media (max-width: 959.98px) {
    .tyres-editor-actions {
        justify-content: stretch;
    }

    .tyres-editor-actions > .mud-button-root {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        min-height: 58px;
    }
}