/**
 * @file
 * Panel na telefonie i tablecie (360-1024 px).
 *
 * Zgłoszenie właściciela z 23.09.2026, z telefonu, edycja wpisu: okruszki
 * zawinięte słowo pod słowem, pomarańczowa belka zakładu nachodząca na
 * przyklejony nagłówek, etykieta „zdjęcie + galeria" ułożona litera pod
 * literą, podglądy kadrów ucięte przy prawej krawędzi. Każda z tych rzeczy
 * miała jedną przyczynę w układzie - opisaną przy regule, która ją usuwa.
 *
 * Osobny plik, a nie kolejna sekcja allabout-admin.css: tamten plik edytuje
 * równolegle kilka biegów naraz, a reguły wąskiego ekranu trzymane w jednym
 * miejscu łatwiej sprawdzić jednym przeglądem na 360/390/414/768.
 *
 * Wczytuje się PO allabout-admin.css i po stylach modułów (grupa motywu),
 * więc przy równej szczegółowości wygrywa. Poza dwiema regułami na samej
 * górze wszystko siedzi w @media - na komputerze (od 1025 px) zmieniają się
 * tylko ekrany, które i tam wychodziły poza okno.
 */

/* Opakowanie z js/tabele.js: tabela przewija się w swoim pasku, strona stoi.
   Gdy tabela się mieści, pasek nie ma czego przewijać i nic nie widać.
   Na każdej szerokości, bo lista czatów wychodziła o 17 px poza okno także
   przy 1280 px.

   Poza tabelami z przyklejonym nagłówkiem (`sticky-header`, np. lista
   formularzy): w przewijanym pojemniku nagłówek przykleja się do niego, a nie
   do okna, więc na komputerze przestałby działać. Te dostają przewijanie
   dopiero na wąskim ekranie (niżej), gdzie ważniejsze jest, żeby strona nie
   jechała w bok. */
.aa-admin-body .aa-tabela-przewijana:not(:has(> table.sticky-header)) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Bez pozycjonowania ukryte etykiety pól w komórkach (`visually-hidden`,
     `position: absolute`) liczą się względem strony, a nie tego pojemnika,
     i wystają poza jego przewijanie: zadania szablonu onboardingu
     przesuwały całą stronę o 274 px w bok przy 1280 px. */
  position: relative;
}

/* Wyniki formularza (Wyniki › Zgłoszenia każdego quizu i ankiety) - wyjątek
   od wyjątku wyżej. Kolumną jest tu KAŻDE pytanie, a webform daje komórce do
   400 px bez zawijania: przy kilkunastu pytaniach tabela miała 3000-3700 px
   i przy 1280/1920 px cała strona jechała w bok o 1100-1800 px razem
   z okruszkami i menu (przegląd 24.09.2026, P16 i B11).

   Przyklejony nagłówek i tak tu nie działał: tabela panelu ma
   `overflow: hidden` (zaokrąglone rogi, sekcja 7 allabout-admin.css), więc
   `position: sticky` z `sticky-header.module.css` przykleja się do tabeli,
   a nie do okna. Nic więc nie tracimy, dając jej przewijany pojemnik. */
.aa-admin-body .aa-tabela-przewijana:has(> table.webform-results-table) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  position: relative;
}

/* Kolumny pytań węższe i zawijane: nagłówek (treść pytania) łamie się
   w kilku liniach zamiast rozpychać tabelę; odpowiedź zostaje w jednej linii
   z wielokropkiem - pełną treść pokazuje widok zgłoszenia. */
.aa-admin-body table.webform-results-table th {
  max-width: 220px;
  min-width: 90px;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: bottom;
}

.aa-admin-body table.webform-results-table td {
  max-width: 240px;
}

.aa-admin-body table.webform-results-table th.webform-results-table__icon,
.aa-admin-body table.webform-results-table td.webform-results-table__icon {
  min-width: 0;
}

/* Lista formularzy: „Otwarte”, a pod spodem „Ukryty w aplikacji” (A28). */
.aa-admin-body .aa-formularz-ukryty {
  margin-top: 2px;
  font-size: 12px;
  color: var(--aa-mut-2);
  white-space: nowrap;
}

/* Okno boczne „Dodaj element” / „Edytuj element”: tabela opcji pytania
   (wartość, tekst, przyciski dodaj/usuń) była szersza niż okno i ikony
   dodawania i usuwania opcji wystawały poza prawą krawędź (B08). Pola
   tekstowe mają stały `size`, więc same nie zmaleją - ściskamy je do kolumny,
   a tabela przewija się w swoim pasku, gdy i tak się nie mieści.
   `.webform-multiple-table` to u webforma OPAKOWANIE tabeli (div). Selektor
   z identyfikatorem okna bocznego przebija jego reset stylów
   (`#drupal-off-canvas-wrapper *` z `all: revert`). */
.ui-dialog .webform-multiple-table,
#drupal-off-canvas-wrapper .webform-multiple-table {
  max-width: 100%;
  overflow-x: auto;
}

.ui-dialog .webform-multiple-table table,
#drupal-off-canvas-wrapper .webform-multiple-table table {
  width: 100%;
  table-layout: auto;
}

.ui-dialog .webform-multiple-table input.form-text,
#drupal-off-canvas-wrapper .webform-multiple-table input.form-text {
  width: 100%;
  min-width: 6em;
  box-sizing: border-box;
}

/* Nagłówki kolumn łamią się w wiersze. „CZY TO JEST PRAWIDŁOWA ODPOWIEDŹ?"
   w jednym wierszu miało 272 px nad kolumną z jednym polem wyboru, tabela
   wychodziła na 533 px w pojemniku 452 px i ikona „usuń" stała za
   krawędzią przewijania (test regresji 25.09.2026, Z-formularze-04). */
.ui-dialog .webform-multiple-table th,
#drupal-off-canvas-wrapper .webform-multiple-table th {
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Okno boczne webforma ma szerokość 600 px z odnośnika (data-dialog-options),
   a na telefonie 390 px wychodziło lewą częścią poza ekran (left: -212 px)
   - tytuł pola i uchwyt kolejności opcji były niedostępne (test regresji
   25.09.2026, obok Z-formularze-04). Na wąskim ekranie okno zajmuje całą
   szerokość. */
@media (max-width: 640px) {
  .ui-dialog.ui-dialog-off-canvas {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw;
  }
}

/* Układ „na telefonie" tabeli webforma (do 768 px): komórka ikon stoi
   `position: absolute; right: 0`, a nasza szerokość 1 % z reguły niżej
   zwężała ją do 3 px - ikony „dodaj/usuń" wystawały 40 px za prawą krawędź
   wiersza. Tu komórka bierze szerokość swoich ikon. */
@media (max-width: 768px) {
  .ui-dialog .webform-multiple-table.webform-multiple-table-responsive td.webform-multiple-table--operations,
  #drupal-off-canvas-wrapper .webform-multiple-table.webform-multiple-table-responsive td.webform-multiple-table--operations {
    width: auto;
  }
}

.ui-dialog .webform-multiple-table td.webform-multiple-table--operations,
#drupal-off-canvas-wrapper .webform-multiple-table td.webform-multiple-table--operations {
  white-space: nowrap;
  width: 1%;
}

/* Login na listach osób („Redaktorzy”, „Pracownicy”) to ten sam identyfikator,
   którego szuka się na ekranie - wielokropek z reguły dla kolumny autora
   na liście treści ucinał go do „tester-3d3…”. Tu zawijamy zamiast ciąć. */
.aa-admin-body .view-user-admin-people td.views-field-name,
.aa-admin-body .view-user-admin-people-evo td.views-field-name,
.aa-admin-body .view-group-members td.views-field-name {
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

/* Członkowie grupy: kolumna osoby szersza niż 120 px kolumny autora z listy
   treści - „tester-29a6…" ucięty przy 500 px wolnego miejsca obok
   (test regresji 25.09.2026, Z-ludzie-22). */
.aa-admin-body .view-group-members th.views-field-name,
.aa-admin-body .view-group-members td.views-field-name {
  width: 220px;
}

/* Ukryte pole pliku w rozmowie z asystentem (1 px, `position: absolute`)
   stało za prawą krawędzią wiersza bez pozycjonowanego przodka i rozpychało
   stronę: o 12 px na telefonie, o 574 px przy 1280 px. */
.aa-admin-body .aar__pisanie-wiersz {
  position: relative;
}

.aa-admin-body .aar__plik {
  inset-inline-start: 0;
  top: 0;
}

@media (max-width: 1024px) {

  /* ----------------------------------------------------- górna belka */

  /* Belka przestaje być przyklejona. Na komputerze ma stałe 56 px i belka
     zakładu przykleja się tuż pod nią (`top: var(--aa-top-h)`). Na telefonie
     okruszki, asystent i język zawijały ją do 130 px - a belka zakładu
     dalej stała na 56 px, więc wjeżdżała na okruszki i zasłaniała treść
     pod spodem. Przyklejona zostaje sama belka zakładu, od góry ekranu:
     ona niesie informację, która musi być widać przy przewijaniu. */
  .aa-admin-body .aa-top {
    position: static;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .aa-admin-body .aa-plantbar {
    top: 0;
  }

  /* Okruszki dostawały resztkę szerokości obok asystenta i języka
     (`flex: 1` przy `min-width: 0`) - na 360 px było to 104 px i tytuł wpisu
     łamał się po jednym słowie w wierszu. Teraz: gdy obok nie zmieści się
     12rem, okruszki schodzą do własnego wiersza na całą szerokość. */
  .aa-admin-body .aa-top__crumb {
    flex: 1 1 12rem;
  }

  /* Jeden wiersz, ostatnia pozycja (tytuł bieżącej strony) skraca się
     wielokropkiem, poprzednie zostają całe. */
  .aa-admin-body .aa-top .breadcrumb ol,
  .aa-admin-body .aa-top .breadcrumb__list {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .aa-admin-body .aa-top .breadcrumb li,
  .aa-admin-body .aa-top .breadcrumb__item {
    flex: none;
    min-width: 0;
    white-space: nowrap;
  }

  .aa-admin-body .aa-top .breadcrumb li:last-child,
  .aa-admin-body .aa-top .breadcrumb__item:last-child {
    flex: 0 1 auto;
    overflow: hidden;
  }

  .aa-admin-body .aa-top .breadcrumb li:last-child > *,
  .aa-admin-body .aa-top .breadcrumb__item:last-child > * {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Przy głębokiej ścieżce (np. „Strona główna › Konfiguracja › Tworzenie
     zawartości › Ustawienia kursów › Przypomnienia o szkoleniach”) pozycje
     środkowe, których nic nie skraca, wypychały belkę o 90–180 px w bok.
     Zostają: strona główna i dwie ostatnie pozycje. */
  .aa-admin-body .aa-top .breadcrumb li:not(:first-child):not(:nth-last-child(-n+2)),
  .aa-admin-body .aa-top .breadcrumb__item:not(:first-child):not(:nth-last-child(-n+2)) {
    display: none;
  }

  /* Cele dotykowe w belce: 44 px, nie 36. */
  .aa-admin-body .aa-top .aa-lang__current {
    min-height: 44px;
  }

  .aa-admin-body .aap__zwijanie {
    width: 44px;
    height: 44px;
  }

  .aa-admin-body .aa-side__toggle {
    min-height: 44px;
  }

  .aa-admin-body .aa-nav__item {
    min-height: 44px;
  }

  /* ------------------------------------------------ zakładki lokalne */

  /* Claro na wąskim ekranie chowa wszystkie zakładki poza aktywną i pokazuje
     ją jako kartę z cieniem i przyciskiem-hamburgerem. Motyw zdjął z niej
     tło i cień, więc zostawała pusta ramka z napisem „Edytuj" w rogu
     i niebieskim hamburgerem obok. Zamiast tego: te same podkreślane
     zakładki co na komputerze, w jednym wierszu, przewijane w poziomie
     w swoim pasku, gdy się nie mieszczą. */
  .aa-admin-body .tabs {
    flex-direction: row;
    flex-wrap: nowrap;
    width: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    max-width: 100%;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid var(--aa-line);
    border-radius: 0;
    box-shadow: none;
    scrollbar-width: none;
  }

  .aa-admin-body .tabs__tab,
  .aa-admin-body .tabs__tab.is-active,
  .aa-admin-body .tabs__tab:not(.is-active) {
    display: block;
    flex: none;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .aa-admin-body .tabs__link,
  .aa-admin-body .tabs a {
    display: flex;
    align-items: flex-end;
    min-height: 44px;
    white-space: nowrap;
  }

  .aa-admin-body .tabs__link::before,
  .aa-admin-body .tabs__tab::before {
    display: none;
  }

  .aa-admin-body .tabs__trigger {
    display: none;
  }

  /* Nagłówek strony to flex z `flex-wrap`, a jego dzieci mają domyślne
     `min-width: auto` - czyli nie są węższe od swojej treści. Pasek zakładek
     w jednym wierszu rozpychał więc cały nagłówek (i stronę) o szerokość
     zakładek, zamiast przewijać się w swoim pasku. */
  .aa-admin-body .aa-pagehead > * {
    min-width: 0;
    max-width: 100%;
  }

  .aa-admin-body .aa-tabela-przewijana {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  /* -------------------------------------- drobne rozpychacze strony */

  /* Słupki godzin w mapach cieplnych: 24 słupki z minimalną szerokością
     nie mieściły się w 336 px. */
  .aa-admin-body .mapy-ciepla__godziny > * {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Przełączniki okresu i źródła w analityce zawijają się, zamiast wychodzić
     o 22 px poza ekran. */
  .aa-admin-body .aan__controls > * {
    flex-wrap: wrap;
    max-width: 100%;
  }

  /* --------------------------------------------------- przyciski */

  /* Palec, nie kursor: 44 px wysokości dla przycisków formularzy i akcji. */
  .aa-admin-body .button,
  .aa-admin-body .action-link,
  .aa-admin-body input[type='submit'],
  .aa-admin-body button.form-submit,
  .aa-admin-body select,
  .aa-admin-body input.form-text,
  .aa-admin-body input.form-search,
  .aa-admin-body input.form-email {
    min-height: 44px;
  }

  /* Odnośnik w roli przycisku (`a.button`) jest blokiem liniowym - po
     podniesieniu do 44 px napis zostawał przy górnej krawędzi. */
  .aa-admin-body a.button,
  .aa-admin-body .action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* „Pokaż wszystkie kolumny" nad tabelą - przycisk wyglądający jak odnośnik,
     18 px wysokości. */
  .aa-admin-body .tableresponsive-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 600px) {

  /* ----------------------------------------------------- górna belka */

  /* Napis „Język panelu" zostaje dla czytnika ekranu, znika z widoku: ikona
     i kod języka mówią to samo, a zwolnione ~100 px trafia do okruszków. */
  .aa-admin-body .aa-top .aa-lang__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Okruszki we własnym, pierwszym wierszu, asystent i język razem w drugim.
     Przy `flex: 1 1 12rem` z sekcji wyżej okruszki zostawały w wierszu
     z asystentem, a sam przełącznik języka spadał samotnie niżej. */
  .aa-admin-body .aa-top__crumb {
    flex-basis: 100%;
  }

  /* Nazwa strony: na telefonie 36-40 px z komputera zajmowało pół ekranu,
     a dłuższy tytuł wpisu łamał się na trzy wiersze. */
  .aa-admin-body .aa-pagehead h1,
  .aa-admin-body .page-title {
    font-size: 24px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .aa-admin-body .aa-main {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Jak w allabout-admin.css przy 1024px: wiersz kolumn Claro nie szerszy
     niż dopełnienie treści. */
  .aa-admin-body.aa-admin-body .aa-main .layout-row {
    margin-left: -12px;
    margin-right: -12px;
  }

  /* ------------------------------------------------------ formularze */

  /* Pola na całą szerokość. Claro daje polom szerokość z atrybutu `size`
     (listy wyboru w filtrach miały 150-230 px na ekranie 336 px), a na
     telefonie pole węższe od ekranu to tylko mniejszy cel dla palca. */
  .aa-admin-body :is(
      input[type='text'],
      input[type='email'],
      input[type='search'],
      input[type='number'],
      input[type='password'],
      input[type='url'],
      input[type='tel'],
      input[type='date'],
      input[type='time'],
      input[type='datetime-local'],
      select,
      textarea
    ):not(.aap__pole) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 16 px w polach: iOS przy mniejszym kroju powiększa stronę przy fokusie
     i nie oddaje jej już do pierwotnej skali. */
  .aa-admin-body :is(input[type='text'], input[type='email'], input[type='search'], input[type='number'], input[type='password'], input[type='url'], input[type='tel'], select, textarea) {
    font-size: 16px;
  }

  /* Filtry nad listami: jeden filtr w wierszu, przyciski obok siebie. */
  .aa-admin-body .views-exposed-form .form-item,
  .aa-admin-body .views-exposed-form .form--inline .form-item {
    float: none;
    width: 100%;
    margin-right: 0;
  }

  /* Formularz wpisu: karta z paddingiem 30 px, w niej sekcja mediów, w niej
     ramka `details`, w niej widżet zdjęcia z własnym paddingiem - na 360 px
     zawartości zostawało 206 px. Zdejmujemy po kilkanaście pikseli z każdej
     warstwy zamiast likwidować którąkolwiek. */
  .aa-admin-body .node-form .layout-region--main,
  .aa-admin-body .layout-region--main {
    padding: 16px 14px 10px;
  }

  .aa-admin-body .node-form .layout-region--secondary {
    padding-left: 0;
    padding-right: 0;
  }

  .aa-admin-body .node-form .aa-media details,
  .aa-admin-body .node-form .aa-media .claro-details {
    padding-left: 10px;
    padding-right: 10px;
  }

  .aa-admin-body .node-form .aa-media .image-widget {
    padding-left: 0;
    padding-right: 0;
  }

  /* Tytuł wpisu: 28 px z komputera mieścił ~18 znaków, więc tytuł ucinał się
     w połowie słowa („Nowy parking w Ste"). */
  .aa-admin-body .node-form .field--name-title input[type='text'],
  .aa-admin-body .node-form .js-form-item-title-0-value input[type='text'] {
    font-size: 22px;
  }

  /* Nagłówek sekcji „Media wpisu": tytuł, stan i „Usuń wszystko" w jednym
     wierszu bez zawijania, a stan z `flex: 1; min-width: 0` - dostawał to,
     co zostało, czyli 5 px, i „zdjęcie + galeria" układało się litera pod
     literą. Teraz stan ma rozsądną podstawę, a wiersz może się zawinąć. */
  .aa-admin-body .node-form .aa-media__naglowek {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .aa-admin-body .node-form .aa-media__stan {
    flex: 1 1 8rem;
  }

  /* Pola wyboru w rzędzie (rodzaj mediów, język) zawijają się, zamiast
     wychodzić poza kartę. */
  .aa-admin-body .form-radios,
  .aa-admin-body .form-checkboxes,
  .aa-admin-body .container-inline {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .aa-admin-body .form-type--radio,
  .aa-admin-body .form-type--checkbox {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  /* Długie napisy na przyciskach („Uruchom walidator adresów e-mail”) i w
     etykietach pól (nazwy punktów końcowych API z podkreślnikami) wystawały
     przy 360 px o 30–40 px poza okno. Zawijamy je zamiast rozpychać stronę. */
  .aa-admin-body input.button,
  .aa-admin-body a.button,
  .aa-admin-body button.button {
    max-width: 100%;
    height: auto;
    white-space: normal;
  }

  .aa-admin-body .form-item__label {
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   Przegląd 24.09.2026, część 3D (reguły dla każdej szerokości)
   ========================================================================== */

/* I4: wskazówka, że tabela ciągnie się dalej. Klasy nadaje js/tabele.js
   pojemnikowi, który ma coś za krawędzią. Maska wygasza pas przy tej
   krawędzi - ostatnia widoczna kolumna blednie i widać, że to nie koniec.
   Maska leży na pojemniku, a nie na treści, więc stoi w miejscu przy
   przewijaniu. Przy samej krawędzi zostaje 25 % krycia: tekst da się
   jeszcze odczytać. */
/* `--aa-cien-koniec` = szerokość kolumny przyklejonej z prawej („Operacje"
   na listach z działaniami masowymi, js/tabele.js). Wygaszamy pas PRZED nią,
   a ona zostaje w pełnym kolorze (Z-ludzie-08). Bez niej zmienna ma 0 px
   i maska jest taka jak dotąd. */
.aa-admin-body .aa-cien-prawo {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px - var(--aa-cien-koniec, 0px)), rgb(0 0 0 / 0.25) calc(100% - var(--aa-cien-koniec, 0px)), #000 calc(100% - var(--aa-cien-koniec, 0px)));
  mask-image: linear-gradient(to right, #000 calc(100% - 48px - var(--aa-cien-koniec, 0px)), rgb(0 0 0 / 0.25) calc(100% - var(--aa-cien-koniec, 0px)), #000 calc(100% - var(--aa-cien-koniec, 0px)));
}

.aa-admin-body .aa-cien-lewo {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), rgb(0 0 0 / 0.25));
  mask-image: linear-gradient(to left, #000 calc(100% - 48px), rgb(0 0 0 / 0.25));
}

.aa-admin-body .aa-cien-lewo.aa-cien-prawo {
  -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0.25), #000 48px, #000 calc(100% - 48px - var(--aa-cien-koniec, 0px)), rgb(0 0 0 / 0.25) calc(100% - var(--aa-cien-koniec, 0px)), #000 calc(100% - var(--aa-cien-koniec, 0px)));
  mask-image: linear-gradient(to right, rgb(0 0 0 / 0.25), #000 48px, #000 calc(100% - 48px - var(--aa-cien-koniec, 0px)), rgb(0 0 0 / 0.25) calc(100% - var(--aa-cien-koniec, 0px)), #000 calc(100% - var(--aa-cien-koniec, 0px)));
}

/* I4: macierz onboardingu - kolumna z osobą przypięta przy przewijaniu.
   Arkusz modułu (onboarding/css/macierz.css) daje jej `position: sticky`,
   ale motyw ustawia każdej tabeli `overflow: hidden` (zaokrąglone rogi),
   a to po cichu wyłącza sticky w komórkach - kolumna jechała razem z resztą.
   Tak samo naprawiona macierz kursów (kursy/css/macierz.css). Tabeli nie
   owija już js/tabele.js (`.aa-onb-przewijanie` jest na liście POMIN), więc
   pojemnikiem przewijania jest `.aa-onb-przewijanie` z modułu. */
.aa-admin-body table.aa-onb-macierz {
  overflow: visible;
}

.aa-admin-body .aa-onb-przewijanie {
  max-width: 100%;
  position: relative;
}

/* K4: tytuł listy (`item_list` z `#title`, Claro rysuje go jako <h3>) miał
   domyślny rozmiar nagłówka - „Odbiorcy" w podglądzie przypomnień był
   większy od tytułu sekcji, w której stoi. Czytamy go jak etykietę pola. */
.aa-admin-body .item-list > h3 {
  margin: 16px 0 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

/* K12: uprawnienia roli wystawały przy 1280 px o 17-41 px. Tabela bez
   przewijanego pojemnika (przyklejony nagłówek z nazwą roli, patrz
   js/tabele.js), więc jej najmniejsza szerokość musi się zmieścić: długie
   nazwy uprawnień i maszynowe identyfikatory w opisach łamią się
   w dowolnym miejscu, a nagłówki kolumn mogą się zawinąć. */
.aa-admin-body #permissions {
  max-width: 100%;
  /* Właściwa przyczyna przelewu (pomiar w piaskownicy 24.09): ukryte etykiety
     pól wyboru (`visually-hidden`, `position: absolute`) liczyły położenie
     względem strony, bo żaden przodek nie był pozycjonowany - wystawały do
     43 px za prawą krawędź. Tabela ma `overflow: hidden`, więc jako blok
     zawierający przycina je jak należy (to samo co I3 w #772). */
  position: relative;
}

.aa-admin-body #permissions th,
.aa-admin-body #permissions td {
  overflow-wrap: anywhere;
}

.aa-admin-body #permissions th {
  white-space: normal;
}

/* Z-ludzie-24: uprawnienia wszystkich ról (29 kolumn) w pojemniku
   przewijanym w obu osiach (js/tabele.js). Nagłówek z nazwami ról przykleja
   się do góry pojemnika, nazwa uprawnienia - do jego lewej krawędzi.
   Tabela oddaje `overflow: hidden`: przy nim byłaby sama pojemnikiem
   przewijania i żadna komórka by się nie przykleiła. */
/* Zanim skrypt owinie tabelę (przy 29 rolach strona ładuje się kilka sekund),
   w bok przewija się formularz, nie cała strona. */
.aa-admin-body .user-admin-permissions:has(> #permissions thead th:nth-child(5)) {
  overflow-x: auto;
  max-width: 100%;
}

.aa-admin-body .aa-uprawnienia-przewijane {
  overflow: auto;
  max-width: 100%;
  max-height: calc(100vh - 160px);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius);
  background: var(--aa-card);
}

.aa-admin-body .aa-uprawnienia-przewijane > #permissions {
  max-width: none;
  width: max-content;
  min-width: 100%;
  overflow: visible;
  border: 0;
  border-radius: 0;
}

.aa-admin-body .aa-uprawnienia-przewijane > #permissions thead,
.aa-admin-body .aa-uprawnienia-przewijane > #permissions thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--aa-panel);
}

.aa-admin-body .aa-uprawnienia-przewijane > #permissions tr > :first-child:not([colspan]) {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  background: var(--aa-card);
  box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.28);
}

[dir="rtl"] .aa-admin-body .aa-uprawnienia-przewijane > #permissions tr > :first-child:not([colspan]) {
  box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.28);
}

.aa-admin-body .aa-uprawnienia-przewijane > #permissions thead tr > :first-child:not([colspan]) {
  z-index: 4;
  background: var(--aa-panel);
}

/* Na telefonie przypięta kolumna 320 px zasłaniałaby prawie cały ekran. */
@media (max-width: 480px) {
  .aa-admin-body .aa-uprawnienia-przewijane > #permissions tr > :first-child:not([colspan]) {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
  }
}

.aa-admin-body .aa-uprawnienia-przewijane > #permissions thead th:not(:first-child) {
  min-width: 72px;
  max-width: 110px;
}

.aa-admin-body #user-admin-permissions,
.aa-admin-body #user-admin-permissions .form-item,
.aa-admin-body #user-admin-permissions input[type='search'],
.aa-admin-body #user-admin-permissions input[type='text'] {
  max-width: 100%;
  box-sizing: border-box;
}

/* K14: filtry wniosków o przepustkę w jednym pasie (klasa z
   WebformModerateCustomCategoryResults): listy wyboru obok siebie,
   przyciski na końcu wiersza. */
.aa-admin-body .aa-filtry-w-wierszu > .details-wrapper,
.aa-admin-body .aa-filtry-w-wierszu > .claro-details__wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 16px;
}

.aa-admin-body .aa-filtry-w-wierszu > .details-wrapper > .form-item,
.aa-admin-body .aa-filtry-w-wierszu > .claro-details__wrapper > .form-item {
  margin: 0 0 12px;
  max-width: 100%;
}

.aa-admin-body .aa-filtry-w-wierszu select {
  max-width: 16rem;
}

.aa-admin-body .aa-filtry-w-wierszu > .details-wrapper > .button,
.aa-admin-body .aa-filtry-w-wierszu > .claro-details__wrapper > .button {
  margin: 0 0 12px;
}

/* I23: okruszki w górnej belce na komputerze. Obok pola asystenta (36rem)
   i przełącznika języka zostawało im ~200 px przy 1280 px i ścieżka
   łamała się na 3-4 wiersze, rozpychając belkę, pod którą przykleja się
   pasek zakładu. Teraz: jeden wiersz, każda pozycja może się skrócić
   wielokropkiem, a gdy pojemnik okruszków jest węższy niż 36rem, pozycje
   środkowe znikają jak na telefonie (strona główna + dwie ostatnie).
   Pole asystenta do 1440 px ustępuje im trochę miejsca (26rem). */
@media (min-width: 1025px) {
  .aa-admin-body .aa-top__crumb {
    container-type: inline-size;
    container-name: aa-okruszki;
  }

  .aa-admin-body .aa-top .breadcrumb ol,
  .aa-admin-body .aa-top .breadcrumb__list {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .aa-admin-body .aa-top .breadcrumb li,
  .aa-admin-body .aa-top .breadcrumb__item {
    flex: 0 1 auto;
    min-width: 2.5em;
    white-space: nowrap;
    overflow: hidden;
  }

  .aa-admin-body .aa-top .breadcrumb li:first-child,
  .aa-admin-body .aa-top .breadcrumb__item:first-child {
    flex: none;
  }

  .aa-admin-body .aa-top .breadcrumb li > *,
  .aa-admin-body .aa-top .breadcrumb__item > * {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @container aa-okruszki (max-width: 36rem) {
    .aa-admin-body .aa-top .breadcrumb li:not(:first-child):not(:nth-last-child(-n+2)),
    .aa-admin-body .aa-top .breadcrumb__item:not(:first-child):not(:nth-last-child(-n+2)) {
      display: none;
    }
  }
}

@media (min-width: 1025px) and (max-width: 1440px) {
  .aa-admin-body .aa-top .aap {
    flex-basis: 26rem;
  }
}