/* Edytor cennika — style, które MUSZĄ być globalne (PRICEUI-4).
   Panel edycji reguły (PriceRuleEditPanel) renderuje MudDialogInstance poza drzewem komponentu,
   więc scoped CSS (.razor.css) go nie dosięga — ani wprost, ani przez ::deep. Klasa trafia na
   .mud-dialog przez Class="price-rule-panel" na samym MudDialog (DialogOptions w MudBlazor 9 nie
   ma już pola Class). Tu mieszkają też style trzech sekcji reguł i paska formuły (PRICEUI-5). */

/* Mobile first: panel zajmuje cały ekran — na wąskim ekranie nie ma miejsca na boczną szufladę. */
.price-rule-panel {
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
}

/* Od md (MudBlazor Breakpoint.Md = 960px) panel staje się boczną szufladą przy prawej krawędzi. */
@media (min-width: 960px) {
    .price-rule-panel {
        width: 440px;
        max-width: 440px;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
    }
}

/* Treść panelu przewija się w środku, żeby akcje („Usuń regułę" / „Gotowe") zostawały widoczne. */
.price-rule-panel .mud-dialog-content {
    overflow-y: auto;
}

/* Nagłówki sekcji wewnątrz panelu (PRICEUI-6): „WARIANTY" / „TYP ROZLICZENIA" / „NIEOBECNOŚCI".
   Wielkie litery robi CSS, nie tłumaczenia — `VariantsHeader` jest reużywany z czasów akordeonu
   i już jest wersalikami, a nowe klucze pisane wielkimi literami w trzech językach byłyby
   nieodwracalne (nie da się z nich zrobić z powrotem zdania). Tu jest też jedyne miejsce, gdzie
   te trzy nagłówki wyglądają tak samo bez dopisywania klas przy każdym MudText. */
.price-rule-panel-header {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

/* ── Trzy stałe sekcje reguł (PRICEUI-5) ──
   Sekcja jest składnikiem formuły, więc zostaje widoczna także pusta. Rozróżnia je kolorowe lewe
   obramowanie w kolorach tych samych statusów, co chipy typu reguły (Info / neutralny / Attention);
   kolory bierzemy ze zmiennych motywu, żeby tryb ciemny nie wymagał drugiego zestawu reguł. */
.price-rule-section {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left-width: 4px;
    border-radius: var(--mud-default-borderradius);
    /* Odstęp pionowy dokłada sam akordeon (nagłówek 16px góra/dół, treść 16px dołem) — inaczej
       zwinięta sekcja miałaby na mobile 32px pustego marginesu pod jedną linijką nagłówka. */
    padding: 0 16px;
}

.price-rule-section--per-session {
    border-left-color: var(--mud-palette-info);
}

.price-rule-section--periodic {
    border-left-color: var(--mud-palette-text-secondary);
}

.price-rule-section--discount {
    border-left-color: var(--mud-palette-warning);
}

/* Pasek formuły: legenda edytora („za treningi + okresowe − rabaty = kwota zawodnika"). */
.price-formula-bar {
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 8px 16px;
    margin-bottom: 16px;
}

/* ── Akordeon na mobile, statyczna karta na desktopie (PRICEUI-8) ──
   Tu mieszka CAŁA różnica między wąskim a szerokim ekranem. W Blazorze jest jeden render —
   `MudExpansionPanel` — i jeden komplet hooków `data-action`; gdyby zamiast tego stały dwie gałęzie
   `d-none d-md-*`, obie trafiłyby do DOM i `page.ClickAsync` w Playwrightcie sypałby „strict mode
   violation". Klasę `price-list-collapsible` nosi zarówno sekcja reguł, jak i „Podstawowe informacje".

   Kolory wyłącznie ze zmiennych motywu — tryb ciemny nie potrzebuje drugiego zestawu reguł. */
.price-list-collapsible .mud-expansion-panels,
.price-list-collapsible .mud-expand-panel {
    background-color: transparent;
}

/* Jedyny panel w sekcji nie potrzebuje kreski oddzielającej go od następnego. Selektor trzyczłonowy,
   żeby wygrać specyficznością z .mud-expand-panel.mud-expand-panel-border, a nie kolejnością arkuszy. */
.price-list-collapsible .mud-expand-panel.mud-expand-panel-border {
    border-bottom: none;
}

@media (min-width: 960px) {
    /* Nagłówek przestaje być przyciskiem: nie da się go kliknąć ani zwinąć, chevron znika.
       W środku nagłówka stoi wyłącznie tekst z ikoną, więc pointer-events nie odcina niczego,
       co byłoby interaktywne. */
    .price-list-collapsible .mud-expand-panel-header {
        cursor: default;
        pointer-events: none;
    }

    .price-list-collapsible .mud-expand-panel-header .mud-expand-panel-icon {
        display: none;
    }

    /* MudCollapse 9.x zwija treść siatką (.mud-collapse-container → grid-template-rows: minmax(0, 0fr))
       i dokłada utility .invisible (visibility: hidden) — odkręcamy OBIE rzeczy, więc na desktopie
       panel jest rozwinięty na stałe, NIEZALEŻNIE od stanu komponentu (także wtedy, gdy ktoś zwinął
       sekcję na wąskim ekranie i powiększył okno). Selektory są wielokrotne, więc wygrywają
       specyficznością z jednoklasowymi regułami MudBlazora — bez sięgania po !important. */
    .price-list-collapsible .mud-collapse-container {
        grid-template-rows: minmax(0, 1fr);
        overflow: visible;
    }

    .price-list-collapsible .mud-collapse-container.invisible {
        visibility: visible;
    }
}

/* Pasek „Anuluj / Zapisz": na mobile przyklejony do dołu okna, żeby zapis był w zasięgu kciuka
   niezależnie od tego, jak długi zrobił się edytor. Od md wraca do zwykłego przepływu strony —
   na desktopie cały formularz i tak mieści się bez przewijania do końca. Czysty CSS: hook
   data-action='save-price-list' zostaje dokładnie jeden i w tym samym miejscu DOM. */
.price-list-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background-color: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 8px 12px;
}

@media (min-width: 960px) {
    .price-list-actions {
        position: static;
        background-color: transparent;
        border-top: none;
        padding: 0;
    }
}