/* Panel boczny (SIDEPANEL-3) — wspólne wymiary i tryb rozwinięty.
   Klasy trafiają na .mud-dialog przez Class="v-side-panel" (komponent VSidePanel); DialogOptions
   w MudBlazor 9 nie ma pola Class, a scoped CSS nie sięga .mud-dialog renderowanego poza drzewem
   komponentu. Dialog otwiera się z Position=CenterRight (SidePanelDialogOptions.Default), więc
   kontener ma klasę .mud-dialog-centerright (align-items:center; justify-content:flex-end;
   padding-right:32px). Reguły wygrywają z MudBlazor.min.css kolejnością <link> w App.razor,
   nie !important. */

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

/* Treść przewija się w środku, żeby akcje (stopka) zostawały widoczne. */
.v-side-panel .mud-dialog-content {
    overflow-y: auto;
}

/* Kontener panelu bocznego nie dopycha okna od prawej (padding-right:32px z .mud-dialog-centerright). */
.mud-dialog-container:has(.v-side-panel) {
    padding: 0;
}

/* Od md (MudBlazor Breakpoint.Md = 960 px): szuflada 440 px przy prawej krawędzi, pełna wysokość. */
@media (min-width: 960px) {
    .v-side-panel {
        width: 440px;
        max-width: 440px;
    }

    /* Tryb rozwinięty: okno wyśrodkowane, ok. 90% szerokości i wysokości, zaokrąglone rogi.
       Reguły żyją WYŁĄCZNIE w tym media query, więc pod 960 px zawsze wygrywa widok mobilny
       (pełny ekran), także dla --expanded. */
    .mud-dialog-container:has(.v-side-panel--expanded) {
        align-items: center;
        justify-content: center;
    }

    .v-side-panel.v-side-panel--expanded {
        width: 90vw;
        max-width: 90vw;
        height: 90vh;
        height: 90dvh;
        max-height: 90vh;
        max-height: 90dvh;
        border-radius: var(--mud-default-borderradius);
    }

    /* Przyciemnione tło tylko w trybie rozwiniętym — zwinięta szuflada zostaje bez zmian.
       Overlay (.mud-overlay-dialog) jest rodzeństwem okna w tym samym kontenerze. */
    .mud-dialog-container:has(.v-side-panel--expanded) .mud-overlay-scrim {
        background-color: var(--mud-palette-overlay-dark);
        border-color: var(--mud-palette-overlay-dark);
    }
}