/* Stan paska ustawiony przed pierwszym paintem przez skrypt wyżej —
           bez przeskoku szerokości po załadowaniu strony. */
        @media (min-width: 768px) {
            html[data-sidebar-pinned="0"] #sidebar { width: 76px; }
            html[data-sidebar-pinned="1"] #sidebar { width: 248px; }
            /* Wcięcie = szerokość paska + odstęp treści od jego krawędzi.
               Odstęp wynosi 26px, bo tyle mają makiety: `.kp-main` odsuwa się
               od paska marginesem 248px, a wewnętrzna obwoluta dokłada
               `padding: 20px 26px`. Wcześniej było 32px z obu stron (108 = 76+32,
               280 = 248+32 oraz klasa `pr-8`), przez co kolumna treści miała
               968px tam, gdzie makieta ma 980px — 12px różnicy na KAŻDEJ
               kotwicy mierzącej szerokość, w każdym kontrakcie.
               Mechanizm odsunięcia zostaje ten sam (padding-left), zmienia się
               wyłącznie odstęp. Prawa strona jest tutaj, a nie w klasie `pr-8`
               na elemencie, żeby cały kontrakt poziomy był w jednym miejscu. */
            html[data-sidebar-pinned="0"] #main-content { padding-left: 102px; }
            html[data-sidebar-pinned="1"] #main-content { padding-left: 274px; }
            
            html[data-sidebar-pinned] #main-content { padding-right: 26px; }
            
            html[data-sidebar-pinned="0"] #topbar { padding-left: 102px; }
            html[data-sidebar-pinned="1"] #topbar { padding-left: 274px; }
            html[data-sidebar-pinned] #topbar { padding-right: 26px; }
            /* Odzyskanie etykiety paska po kolizji nazw z kp-components.css.
               Ten arkusz (wyspa wiadomości, ładowany globalnie w <head>)
               definiuje `.kp-label` jako etykietę POLA FORMULARZA — z własnym
               `color: var(--muted)` i `margin-bottom: 6px`. Pasek boczny używa
               tej samej nazwy dla tekstu pozycji nawigacji i steruje wyłącznie
               jej `opacity`, więc kolor i margines przeciekały: podpis pozycji
               aktywnej robił się szary na wypełnieniu w kolorze pozycji
               (zmierzony kontrast ~2.3:1 dla zieleni — poniżej progu 4.5:1),
               a margines rozstrajał pionowe wyrównanie na każdej stronie.
               `color: inherit` przywraca dziedziczenie po `.kp-nav-item`,
               które samo rozstrzyga biel/czerń przez `--kp-on-color`.
               Docelowo: skonsolidować wspólne prymitywy i zawęzić `.kp-label`
               w kp-components.css do kontekstu formularza. */
            #sidebar .kp-label { color: inherit; margin-bottom: 0; }

            /* Selektory ZAWĘŻONE do #sidebar (2026-07-29). Wcześniej były
               globalne, więc chowanie etykiet paska przy zwinięciu łapało
               KAŻDY element z klasą `.kp-label` na stronie — a tej nazwy
               używają też pola formularzy w modalu tablicy kanban
               (`templates/boards/board_detail.html`) i w kompozytorze
               wiadomości (`templates/messaging/compose.html`). Efekt: przy
               zwiniętym pasku znikały etykiety pól w tamtych ekranach.
               Zgłoszone jako wniosek nr 5 w sekcji „tablica kanban"
               readme DS; naprawione tutaj, po stronie właściciela nazwy. */
            html[data-sidebar-pinned="0"] #sidebar .kp-label { opacity: 0; pointer-events: none; }
            html[data-sidebar-pinned="1"] #sidebar .kp-label { opacity: 1; }

            /* Rozwijanie na hover w stanie zwiniętym. Zmienia się WYŁĄCZNIE
               szerokość paska — #main-content zostaje na swoim padding-left,
               więc treść pod spodem się nie rusza. */
            html[data-sidebar-pinned="0"] #sidebar:hover { width: 248px; box-shadow: var(--shadow-card); }
            html[data-sidebar-pinned="0"] #sidebar:hover .kp-label { opacity: 1; pointer-events: auto; }
        }
        /* Opt-IN: .page-full-width na page-level wrapperze rozciąga widok
           na pełną szerokość okna (neutralizuje max-w-{3..7}xl + mx-auto).
           Domyślnie WSZYSTKIE widoki zachowują oryginalne marginesy.
           Stosować tylko tam gdzie tabele/karty potrzebują dużo szerokości
           (karta ucznia, klasy). */
        #main-content > .page-full-width {
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* Auto-fit siatki kafelków — trzy tryby w zależności od ilości
           treści w pojedynczym kafelku. Wszystkie używają auto-fill +
           minmax(MIN, 1fr) — przeglądarka sama dobiera liczbę kolumn
           do dostępnej szerokości. */

        /* WĄSKIE kafelki (dużo pozycji w wierszu) — kafelek z krótkim
           tekstem, ikoną, jedną-dwoma wartościami. Min 200px. */
        .tile-grid-narrow {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        }

        /* ŚREDNIE kafelki (lista uczniów, listy elementów ze zdjęciem +
           kilkoma polami). Min 280px. */
        .student-cards-grid,
        .tile-grid-medium {
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        }

        /* SZEROKIE kafelki (mniej pozycji w wierszu) — kafelki z dużą
           ilością tekstu, kilkoma sekcjami danych, przyciskami akcji.
           Min 360px. Stosować dla kart klas, kart-podsekcji ucznia,
           kart-rejestrów itd. */
        .tile-grid-wide {
            grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        }