/**
 * @file
 * AllAbout Admin - modernizacja panelu administracyjnego.
 *
 * Kolorystyka i typografia przeniesione z zadbajokomunikacje.pl:
 * terakota #00838a, ciepłe kremy, szałwiowa zieleń jako kolor statusu,
 * krój Inter. Motyw nadpisuje wygląd Claro; struktura i klasy Claro
 * pozostają nietknięte, żeby aktualizacje rdzenia nie psuły panelu.
 */

/* ==========================================================================
   1. Tokeny
   ========================================================================== */

/* Tokeny trzymamy na :root, żeby były dostępne niezależnie od tego, na którym
   znaczniku wyląduje klasa motywu. Selektory komponentów wychodzą od
   body.aa-admin-body: znacznik <html> w tym szablonie nie przyjmuje klas
   dodawanych z preprocess, <body> owszem (zweryfikowane w przeglądarce).
   Arkusz ładuje się wyłącznie w tym motywie, więc nie wycieka na front. */
:root,
.aa-admin-body {
  --aa-acc: #00838a;
  /* Wysokość górnej belki. Pasek kontekstu zakładu przykleja się dokładnie
     pod nią, więc obie wartości muszą pochodzić z jednego miejsca. */
  --aa-top-h: 56px;
  --aa-acc-dark: #006b71;
  --aa-acc-soft: #dcf0f1;
  --aa-acc-line: #b9e0e2;

  --aa-sage: #8fb09a;
  --aa-sage-ink: #3f6b4f;
  --aa-sage-bg: #eaf1ec;
  --aa-sage-line: #cbdcd1;

  --aa-ground: #f4f4f4;
  --aa-card: #ffffff;
  --aa-panel: #fafafa;
  --aa-ink: #2b2e33;
  --aa-ink-2: #42454c;
  --aa-mut: #686c75;
  /* Oba szare przyciemnione 24.09.2026 do progu WCAG AA (4,5:1) na kartach
     i tle panelu: #82868e miał 3,7:1, #8f939b - 3,0:1 (axe: ~1000 węzłów na
     79 ekranach, opisy pól, nagłówki tabel, podpisy). Kolejność jasności
     (mut < mut-2 < mut-3) zostaje. */
  --aa-mut-2: #6d717b;
  --aa-mut-3: #73777f;

  --aa-line: #dddddd;
  --aa-line-soft: #ececec;
  --aa-line-softer: #f2f2f2;
  --aa-field: #d5d7db;
  --aa-field-hover: #aaabad;

  --aa-warn-bg: #fff5e6;
  --aa-warn-ink: #8a6a25;
  --aa-warn-line: #efdcb6;
  --aa-info-bg: #f1f5f9;
  --aa-info-ink: #3d5a75;
  --aa-info-line: #d9e3ec;
  --aa-danger: #a6382a;

  --aa-side: #2b2e33;
  --aa-side-ink: #eef0f2;
  --aa-side-item: #c6cad1;
  --aa-side-mut: #9ca1a9;
  --aa-side-mut-2: #858a93;

  --aa-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --aa-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --aa-radius: 10px;
  --aa-radius-sm: 7px;
  --aa-side-w: 250px;
}

/* ==========================================================================
   2. Podstawa strony
   ========================================================================== */

body.aa-admin-body {
  background: var(--aa-ground);
  color: var(--aa-ink);
  font-family: var(--aa-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.aa-admin-body a {
  color: var(--aa-acc);
  text-decoration: none;
}

.aa-admin-body a:hover {
  color: var(--aa-acc-dark);
  text-decoration: underline;
}

.aa-admin-body :focus-visible {
  outline: 2px solid var(--aa-acc);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Zieleń fokusa Claro (#26a769) bierze się z JEDNEJ zmiennej, więc gasimy ją
   u źródła, a nie selektor po selektorze. Claro składa pierścień tak:

     --focus-box-shadow: 0 0 0 2px var(--color-white),
                         0 0 0 5px var(--color-focus);

   i podaje go regułą `.page-wrapper :focus` z `elements.css` - a ta trafia
   w KAŻDY element z fokusem, także w kontenery. Poprzednia poprawka
   wymieniała cień tylko na wybranych sterowaniach, więc zieleń wychodziła
   wszędzie indziej. Najbardziej rzucało się to w oczy w oknie odbiorców:
   fokus trafia na moment w sam `<dialog>` i całe okno mrugało zieloną
   obwódką przy każdym kliknięciu pola wyboru.

   Podmiana zmiennej załatwia to raz - wszędzie, gdzie Claro rysuje fokus,
   robi to teraz w kolorze akcentu. */
.aa-admin-body {
  --color-focus: var(--aa-acc, #00838a);
}

/* Kontener fokusa nie potrzebuje: okno modalne dostaje go przelotnie, gdy
   przeglądarka przenosi fokus do środka, a obwódka wokół CAŁEGO okna nie
   niesie żadnej informacji - sterowania w środku mają własną. */
.aa-admin-body dialog:focus,
.aa-admin-body dialog:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Cień zdejmujemy tam, gdzie fokus pokazujemy obrysem - inaczej sterowanie
   dostawałoby dwa pierścienie naraz. */
.aa-admin-body button:focus,
.aa-admin-body a:focus,
.aa-admin-body [type="checkbox"]:focus,
.aa-admin-body [type="radio"]:focus,
.aa-admin-body .form-boolean:focus {
  box-shadow: none;
}

/* Pola wyboru dostają obrys bez zaokrąglenia - `:focus-visible` wyżej ma
   `border-radius: 3px`, co przy kwadraciku 18×18 wygląda jak ścięta ramka. */
.aa-admin-body [type="checkbox"]:focus-visible,
.aa-admin-body [type="radio"]:focus-visible,
.aa-admin-body .form-boolean:focus-visible {
  outline: 2px solid var(--aa-acc);
  outline-offset: 2px;
  border-radius: 0;
}

/* Kropka w zaznaczonym przełączniku w kolorze panelu.
 *
 * Claro rysuje ją osobnym obrazkiem SVG wpisanym w `background-image`,
 * z kolorem #003ecc zaszytym w środku. Obwódkę pola przemalowaliśmy na
 * terakotę, a kropki nie dało się - przez to zaznaczony przełącznik był
 * terakotowym pierścieniem z GRANATOWYM środkiem. Widać to przy każdej
 * liście wyboru w panelu: kategoria wpisu, status konta, rodzaj mediów.
 *
 * Ten sam obrazek, tylko w kolorze akcentu. (Nie da się tu użyć
 * `var(--aa-acc)`: wartość wchodzi do adresu `data:`, gdzie zmienne CSS
 * się nie rozwijają - dlatego kolor jest wpisany wprost, jako `%23c7543c`.) */
.aa-admin-body .form-boolean--type-radio:checked,
.aa-admin-body [type="radio"]:checked {
  background-image: url("data:image/svg+xml,<svg width='17' height='17' xmlns='http://www.w3.org/2000/svg'><circle r='4.5' cx='8.5' cy='8.5' fill='%23c7543c'/></svg>");
}

/* Próbka koloru przy typie zmiany w harmonogramie.
 *
 * Formularz „Edytuj typy zmian" pokazywał kolor jako sam kod szesnastkowy
 * w polu tekstowym - żeby wiedzieć, czy „#66BD4E" to zieleń, czy błękit,
 * trzeba było wkleić go gdzie indziej. Kolorów jest kilkanaście i część
 * różni się nieznacznie (dwa odcienie szarości na dni wolne).
 *
 * Kwadrat rysujemy tu, a nie w module: to warstwa wyglądu panelu, a moduł
 * harmonogramu nie ma własnego arkusza stylów i nie warto go zakładać
 * dla jednej reguły. */
.aa-admin-body .schedule-shift-type__probka {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-inline-start: 10px;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-sm);
  vertical-align: middle;
}

/* Rdzeniowy toolbar zastępujemy własnym sidebarem. */
.aa-admin-body #toolbar-administration,
.aa-admin-body #toolbar-item-administration-tray {
  display: none !important;
}

body.aa-admin-body.toolbar-fixed,
body.aa-admin-body.toolbar-tray-open,
body.aa-admin-body.toolbar-horizontal,
body.aa-admin-body.toolbar-vertical {
  padding-top: 0 !important;
  /* Poniżej ~975 px pasek Drupala przełącza się w orientację pionową
     i dokłada `margin-left: 240px` na <body>, robiąc miejsce na swoją
     szufladę. Szuflada jest u nas ukryta (reguła wyżej), a margines
     zostawał: przy oknie 768 px trzecia część ekranu była pustym pasem
     po lewej, a cała treść panelu zaczynała się na 240 px. */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ==========================================================================
   3. Szkielet: sidebar + belka + treść
   ========================================================================== */

/* Wszystkie elementy szkieletu liczymy razem z dopelnieniem i obramowaniem -
   inaczej szerokosci procentowe wypychaja tresc poza ekran. */
.aa-shell,
.aa-shell *,
.aa-shell *::before,
.aa-shell *::after {
  box-sizing: border-box;
}

.aa-shell {
  display: flex;
  min-height: 100vh;
}

.aa-side {
  width: var(--aa-side-w);
  flex: none;
  background: var(--aa-side);
  color: var(--aa-side-ink);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.aa-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit;
}

.aa-brand:hover {
  text-decoration: none;
  color: inherit;
}

.aa-brand__mark {
  width: 30px;
  height: 30px;
  border-radius: var(--aa-radius-sm);
  background: var(--aa-acc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  flex: none;
}

.aa-brand__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.aa-brand__name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aa-brand__sub {
  font-size: 10.5px;
  color: var(--aa-side-mut);
  font-family: var(--aa-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.aa-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Po rozbiciu „Treści" i „Formularzy" pozycji jest 20 i na laptopie
     nie mieszczą się wszystkie. Cień u dołu pokazuje, że lista się przewija -
     bez niego ostatnia pozycja wygląda na uciętą, czyli na błąd. */
  background:
    linear-gradient(var(--aa-side) 30%, rgba(43, 46, 51, 0)) local top,
    linear-gradient(rgba(43, 46, 51, 0), var(--aa-side) 70%) local bottom,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) scroll top,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) scroll bottom;
  background-repeat: no-repeat;
  background-size: 100% 22px, 100% 22px, 100% 8px, 100% 8px;
  background-attachment: local, local, scroll, scroll;
}

.aa-nav__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aa-nav__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aa-side-mut-2);
  padding: 4px 10px 3px;
  font-family: var(--aa-mono);
}

.aa-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-radius: var(--aa-radius-sm);
  font-size: 13px;
  color: var(--aa-side-item);
}

.aa-nav__item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

.aa-nav__item.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--aa-acc);
}

/* Ikona pozycji paska bocznego. Rysunek dziedziczy kolor po pozycji
   (stroke="currentColor"), więc stan aktywny, hover i ciemne tło paska
   obsługują się same - nie ma osobnej palety dla ikon.

   18 px i kreska 1.75 to ten sam rozmiar co w kaflach rywalizacji sportowej,
   patrz activity/assets/sport-competition-page.css. */
.aa-nav__glyph {
  width: 18px;
  height: 18px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}

.aa-nav__glyph svg {
  width: 18px;
  height: 18px;
  display: block;
}

.aa-nav__item.is-active .aa-nav__glyph {
  opacity: 1;
}

.aa-nav__title {
  flex: 1;
  min-width: 0;
}

.aa-who {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.aa-who__link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  color: inherit;
}

.aa-who__link:hover {
  color: inherit;
  text-decoration: none;
}

.aa-who__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #373a40;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--aa-side-item);
  flex: none;
}

.aa-who__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.aa-who__name {
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aa-who__role {
  font-size: 10.5px;
  color: var(--aa-side-mut-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aa-who__out {
  color: var(--aa-side-mut);
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 6px;
  flex: none;
  display: flex;
  align-items: center;
}

.aa-who__out svg {
  width: 16px;
  height: 16px;
  display: block;
}

.aa-who__out:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.aa-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.aa-top {
  background: var(--aa-card);
  border-bottom: 1px solid var(--aa-line);
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--aa-top-h);
  position: sticky;
  top: 0;
  z-index: 20;
}

.aa-top__crumb {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--aa-mut);
}

.aa-top__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aa-btn--ghost {
  font-size: 12px;
  color: var(--aa-mut);
  border: 1px solid var(--aa-field);
  border-radius: 6px;
  padding: 6px 11px;
  background: var(--aa-card);
  white-space: nowrap;
}

.aa-btn--ghost:hover {
  border-color: var(--aa-field-hover);
  color: var(--aa-ink);
  text-decoration: none;
}

.aa-main {
  flex: 1;
  padding: 26px 28px 60px;
  max-width: 1560px;
  width: 100%;
  /* Bez tego "width: 100%" liczy sie BEZ dopelnienia i tresc panelu wystaje
     poza ekran o dokladnie 2x28px. */
  box-sizing: border-box;
  min-width: 0;
}

/* ==========================================================================
   4. Okruszki (breadcrumb)
   ========================================================================== */

.aa-admin-body .breadcrumb {
  padding: 0;
  margin: 0;
  background: none;
  font-size: 12px;
}

.aa-admin-body .breadcrumb ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.aa-admin-body .breadcrumb li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--aa-mut);
}

.aa-admin-body .breadcrumb li::after {
  content: '/';
  color: var(--aa-field-hover);
}

.aa-admin-body .breadcrumb li:last-child::after {
  content: none;
}

.aa-admin-body .breadcrumb a {
  color: var(--aa-mut);
}

.aa-admin-body .breadcrumb a:hover {
  color: var(--aa-ink);
}

/* ==========================================================================
   5. Tytuł strony i zakładki
   ========================================================================== */

.aa-admin-body .page-title,
.aa-admin-body h1.page-title {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--aa-ink);
  margin: 0 0 4px;
  text-wrap: balance;
}

.aa-admin-body .block-page-title-block {
  margin-bottom: 18px;
}

.aa-admin-body .region-highlighted:empty,
.aa-admin-body .region-help:empty {
  display: none;
}

/* Zakładki lokalne jako podkreślane taby z makiety. */
.aa-admin-body .tabs-wrapper,
.aa-admin-body nav.tabs {
  background: none;
  border: 0;
  box-shadow: none;
  margin-bottom: 16px;
}

.aa-admin-body .tabs__tab,
.aa-admin-body .tabs > li {
  background: none;
  border: 0;
  margin: 0;
}

.aa-admin-body .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border-bottom: 1px solid var(--aa-line);
  padding: 0;
  margin: 0 0 16px;
  list-style: none;
}

.aa-admin-body .tabs__link,
.aa-admin-body .tabs a {
  display: inline-block;
  padding: 0 0 10px;
  font-size: 13.5px;
  color: var(--aa-mut);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
}

.aa-admin-body .tabs__link:hover,
.aa-admin-body .tabs a:hover {
  color: var(--aa-ink);
  background: none;
  text-decoration: none;
}

/* Claro na :focus dokładało zakładce padding 0 2rem, ramkę i zielony pierścień
   (--color-focus). Zakładka rosła z 43px do 107px, a sąsiednie przeskakiwały
   o 64px w prawo. Zerujemy geometrię focusa i dajemy obrys, który nie zajmuje
   miejsca w układzie. */
.aa-admin-body .is-horizontal .tabs__link:focus,
.aa-admin-body .tabs .tabs__link:focus,
.aa-admin-body .tabs a:focus {
  /* O wysokości nie mówimy tu nic. Najpierw stało tu min-height: 48px (żeby
     zakładka nie kurczyła się pod focusem Claro), przez co drugi rząd
     zakładek - naturalne 40px - rozciągał się po kliknięciu i wypychał
     sąsiada w dół. Potem min-height: 0, które kasowało 40px z Claro
     i zakładka kurczyła się do 31px. Obie wartości psuły układ, bo narzucały
     jedną wysokość dwóm rzędom o różnej wysokości. Pominięta własność
     zostawia tę ze spoczynku - i focus przestaje cokolwiek przesuwać. */
  margin: 0;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 2px;
  box-shadow: none;
  outline: 2px solid var(--aa-acc);
  outline-offset: 3px;
}

/* Sam klik myszą nie musi zostawiać obrysu - tylko nawigacja klawiaturą. */
.aa-admin-body .tabs__link:focus:not(:focus-visible),
.aa-admin-body .tabs a:focus:not(:focus-visible) {
  outline: none;
}

/* Zakładka nieaktywna ma być lżejsza od aktywnej (Claro robiło odwrotnie:
   nieaktywne 700, aktywna 600). */
.aa-admin-body .tabs__tab,
.aa-admin-body .tabs__link,
.aa-admin-body .tabs a {
  font-weight: 500;
}

/* Aktywna zakladka: ciemniejszy kolor i podkreslenie akcentem.
   BEZ pogrubienia - pogrubiony tekst jest szerszy, wiec przy kazdej zmianie
   zakladki wszystkie nastepne przeskakiwaly o kilka pikseli w bok. Kolor
   i podkreslenie mowia to samo, a nie ruszaja ukladem. */
.aa-admin-body .tabs__link.is-active,
.aa-admin-body .tabs a.is-active,
.aa-admin-body .tabs__link.is-active:focus,
.aa-admin-body .tabs a.is-active:focus {
  color: var(--aa-ink);
  border-bottom-color: var(--aa-acc);
}

/* ==========================================================================
   6. Przyciski
   ========================================================================== */

.aa-admin-body .button,
.aa-admin-body .action-link {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--aa-radius-sm);
  padding: 9px 15px;
  border: 1px solid var(--aa-field);
  background: var(--aa-card);
  color: var(--aa-ink);
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.aa-admin-body .button:hover,
.aa-admin-body .action-link:hover {
  border-color: var(--aa-field-hover);
  background: var(--aa-card);
  color: var(--aa-ink);
  text-decoration: none;
}

.aa-admin-body .button--primary,
.aa-admin-body .button--action {
  background: var(--aa-acc);
  border-color: var(--aa-acc);
  color: #fff;
}

.aa-admin-body .button--primary:hover,
.aa-admin-body .button--action:hover,
.aa-admin-body .button--primary:focus,
.aa-admin-body .button--action:focus {
  background: var(--aa-acc-dark);
  border-color: var(--aa-acc-dark);
  color: #fff;
}

.aa-admin-body .button--danger,
.aa-admin-body .button.link--danger {
  color: var(--aa-danger);
  border-color: var(--aa-acc-line);
  background: var(--aa-card);
}

.aa-admin-body .button--small {
  font-size: 12px;
  padding: 4px 9px;
}

/* Pasek akcji nad listami. */
.aa-admin-body .block-local-actions-block {
  margin: 0 0 16px;
}

.aa-admin-body .block-local-actions-block ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   7. Tabele
   ========================================================================== */

.aa-admin-body .views-element-container,
.aa-admin-body .view-content > table,
.aa-admin-body table {
  background: var(--aa-card);
}

.aa-admin-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius);
  overflow: hidden;
  font-size: 13.5px;
}

.aa-admin-body thead {
  background: var(--aa-panel);
}

.aa-admin-body th {
  background: var(--aa-panel);
  border: 0;
  border-bottom: 1px solid var(--aa-line);
  padding: 11px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--aa-mut-2);
  font-family: var(--aa-mono);
  text-align: start;
  white-space: nowrap;
}

.aa-admin-body th a {
  color: var(--aa-mut-2);
}

.aa-admin-body td {
  border: 0;
  border-bottom: 1px solid var(--aa-line-soft);
  padding: 13px 16px;
  color: var(--aa-ink-2);
  vertical-align: middle;
}

.aa-admin-body tbody tr:last-child td {
  border-bottom: 0;
}

.aa-admin-body tbody tr:hover {
  background: var(--aa-ground);
}

.aa-admin-body tr.color-warning,
.aa-admin-body tr.warning {
  background: var(--aa-warn-bg);
}

.aa-admin-body tr.color-error,
.aa-admin-body tr.error {
  background: var(--aa-acc-soft);
}

/* Tabele przewijają się w swoim kontenerze, strona nie jedzie w bok. */
.aa-admin-body .views-element-container,
.aa-admin-body .table-responsive {
  overflow-x: auto;
}

/* Ekran uprawnień roli na telefonie: tabela była o 24 px szersza niż okno
   390 px (strona przewijała się w bok we wszystkich 10 językach). Kontenera
   z przewijaniem tu nie dajemy - zepsułby przyklejony nagłówek z nazwą roli.
   Wystarcza węższy margines komórek i łamanie długich słów. */
@media (max-width: 480px) {
  .aa-admin-body #permissions th,
  .aa-admin-body #permissions td {
    padding-left: 8px;
    padding-right: 8px;
    overflow-wrap: anywhere;
  }
}

/* Liczby w kolumnach wyrównane. */
.aa-admin-body td .views-field-created,
.aa-admin-body .aa-num {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   8. Formularze
   ========================================================================== */

.aa-admin-body .form-item {
  margin-block: 0 18px;
}

.aa-admin-body .form-item__label,
.aa-admin-body label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--aa-ink-2);
}

/* Pasek działań masowych Claro ma ciemne tło (rgb(35,36,41)) - ciemna
   etykieta z reguły wyżej dawała na nim „Akcja" o kontraście 1,57:1 (test
   regresji 25.09.2026, Z-wpisy-11). Wraca jasna, jak licznik obok. */
.aa-admin-body .views-bulk-actions .form-item__label,
.aa-admin-body .views-bulk-actions label {
  color: #fff;
}

.aa-admin-body .form-item__description,
.aa-admin-body .description {
  font-size: 11.5px;
  color: var(--aa-mut-3);
  margin-top: 5px;
}

.aa-admin-body .form-element,
.aa-admin-body input[type='text'],
.aa-admin-body input[type='email'],
.aa-admin-body input[type='password'],
.aa-admin-body input[type='search'],
.aa-admin-body input[type='url'],
.aa-admin-body input[type='number'],
.aa-admin-body input[type='date'],
.aa-admin-body textarea,
.aa-admin-body select {
  border: 1px solid var(--aa-field);
  border-radius: var(--aa-radius-sm);
  padding: 9px 11px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--aa-ink);
  background-color: var(--aa-card);
  box-shadow: none;
  max-width: 100%;
}

.aa-admin-body .form-element:focus,
.aa-admin-body input:focus,
.aa-admin-body textarea:focus,
.aa-admin-body select:focus {
  border-color: var(--aa-acc);
  box-shadow: 0 0 0 3px rgba(0, 131, 138, 0.16);
  outline: none;
}

.aa-admin-body .form-element--error,
.aa-admin-body .error {
  border-color: var(--aa-danger);
}

.aa-admin-body .form-required::after,
.aa-admin-body .form-item__required-mark {
  color: var(--aa-acc);
}

/* Sekcje zwijane. */
.aa-admin-body .claro-details,
.aa-admin-body details {
  background: var(--aa-card);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius);
  box-shadow: none;
  margin-bottom: 16px;
}

.aa-admin-body .claro-details__summary,
.aa-admin-body summary {
  font-size: 14px;
  font-weight: 600;
  color: var(--aa-ink);
  background: var(--aa-card);
  padding: 14px 18px;
  border-radius: var(--aa-radius);
}

.aa-admin-body .claro-details__wrapper {
  padding: 4px 18px 18px;
}

/* Pionowe zakładki. */
.aa-admin-body .vertical-tabs,
.aa-admin-body .vertical-tabs__menu {
  border-color: var(--aa-line);
  background: var(--aa-card);
}

.aa-admin-body .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-item-title {
  color: var(--aa-acc);
}

/* Pasek akcji formularza na dole. */
.aa-admin-body .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

/* Pasek akcji nad listą - ta sama odległość między przyciskami co w pasku
 * formularza (8px), żeby panel nie miał dwóch różnych odstępów na to samo.
 *
 * Claro rozstawia `.action-links` marginesem na elementach `li`
 * (`.action-links__item + .action-links__item`). Ekran, który buduje ten pasek
 * jako kontener z odnośnikami zamiast listy, nie ma więc czego rozstawić
 * i przyciski stykają się bokami: trzy osobne akcje wyglądają jak jeden
 * podzielony pasek i łatwo kliknąć nie tę, o którą chodziło.
 *
 * Marginesu pionowego tu NIE ruszamy - `margin: var(--space-l) 0` z Claro
 * obowiązuje na pozostałych ekranach panelu i nie ma powodu ich przestawiać.
 *
 * `flex-wrap` jest istotny na wąskim ekranie: trzy przyciski mają się zawinąć
 * do drugiego wiersza, a nie ścisnąć do nieczytelnych słupków. */
.aa-admin-body .action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ==========================================================================
   9. Komunikaty
   ========================================================================== */

.aa-admin-body .messages {
  border-radius: 9px;
  border: 1px solid var(--aa-line);
  border-inline-start-width: 3px;
  background: var(--aa-card);
  color: var(--aa-ink);
  box-shadow: none;
  padding: 13px 16px;
  margin-bottom: 20px;
  font-size: 13px;
}

.aa-admin-body .messages--status {
  background: var(--aa-sage-bg);
  border-color: var(--aa-sage-line);
  border-inline-start-color: var(--aa-sage);
  color: var(--aa-sage-ink);
}

.aa-admin-body .messages--warning {
  background: var(--aa-warn-bg);
  border-color: var(--aa-warn-line);
  border-inline-start-color: #c88a15;
  color: var(--aa-warn-ink);
}

.aa-admin-body .messages--error {
  background: var(--aa-acc-soft);
  border-color: var(--aa-acc-line);
  border-inline-start-color: var(--aa-acc);
  color: #00474b;
}

.aa-admin-body .messages a {
  color: inherit;
  text-decoration: underline;
}

/* ==========================================================================
   10. Strona /admin i listy administracyjne
   ========================================================================== */

.aa-admin-body .admin-list,
.aa-admin-body .panel__content {
  padding: 0;
  margin: 0;
  list-style: none;
}

.aa-admin-body .admin-list > li {
  border: 0;
  border-top: 1px solid var(--aa-line-soft);
  padding: 12px 0;
  background: none;
}

.aa-admin-body .admin-list > li:first-child {
  border-top: 0;
}

.aa-admin-body .admin-list .label {
  font-size: 14px;
  font-weight: 600;
  color: var(--aa-ink);
}

.aa-admin-body .panel,
.aa-admin-body .layout-column .panel {
  background: var(--aa-card);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.aa-admin-body .panel__title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
}

/* ==========================================================================
   11. Paginacja
   ========================================================================== */

.aa-admin-body .pager__items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.aa-admin-body .pager__item {
  margin: 0;
}

.aa-admin-body .pager__link {
  display: inline-block;
  font-size: 12.5px;
  border: 1px solid var(--aa-field);
  border-radius: 6px;
  padding: 5px 11px;
  background: var(--aa-card);
  color: var(--aa-mut);
  /* Stala szerokosc pola cyfry: aktywna strona jest pogrubiona, a pogrubiona
     cyfra jest szersza - bez tego caly pasek stron przeskakiwal przy kazdym
     przejsciu na nastepna strone. */
  min-width: 34px;
  text-align: center;
}

.aa-admin-body .pager__link:hover {
  border-color: var(--aa-field-hover);
  color: var(--aa-ink);
  text-decoration: none;
}

.aa-admin-body .pager__item.is-active .pager__link {
  border-color: var(--aa-acc);
  color: var(--aa-acc);
  font-weight: 600;
  background: var(--aa-card);
}

/* ==========================================================================
   12. Filtry nad listami (views exposed form)
   ========================================================================== */

.aa-admin-body .views-exposed-form {
  background: var(--aa-card);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.aa-admin-body .views-exposed-form .form-item {
  margin-bottom: 0;
}

/* ==========================================================================
   13. Dropbutton
   ========================================================================== */

.aa-admin-body .dropbutton-wrapper .dropbutton {
  border-radius: 6px;
  border-color: var(--aa-field);
}

.aa-admin-body .dropbutton-widget {
  background: var(--aa-card);
  border-color: var(--aa-field);
  border-radius: 6px;
}

.aa-admin-body .dropbutton .dropbutton-action a,
.aa-admin-body .dropbutton li a {
  font-size: 12px;
  color: var(--aa-ink-2);
  padding: 5px 10px;
}

/* ==========================================================================
   14. Responsywność
   ========================================================================== */

/* Przycisk „Menu" - szuflada paska bocznego na wąskim ekranie. Na komputerze
   go nie ma; pokazuje go dopiero reguła w @media poniżej. */
.aa-side__toggle {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0 12px 0 0;
  padding: 8px 12px;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--aa-radius-sm);
  background: transparent;
  color: var(--aa-side-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.aa-side__toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.aa-side__ikona {
  width: 18px;
  height: 18px;
  display: block;
}

.aa-side__toggle .aa-side__ikona--zamknij,
.aa-side__toggle[aria-expanded="true"] .aa-side__ikona--otworz {
  display: none;
}

.aa-side__toggle[aria-expanded="true"] .aa-side__ikona--zamknij {
  display: block;
}

@media (max-width: 1024px) {
  .aa-shell {
    flex-direction: column;
  }

  /* Na wąskim ekranie pasek boczny staje się belką u góry: logotyp i przycisk
     „Menu". Samo menu to szuflada pod tym przyciskiem - zwinięte nie zabiera
     treści ani piksela, a rozwinięte układa się tak samo jak na komputerze:
     sekcja pod sekcją, nagłówek nad swoimi pozycjami, pozycja pod pozycją.

     Wcześniej menu leżało tu rozłożone w poziomie (`flex-wrap`), nagłówek
     sekcji stał w jednym wierszu z jej pierwszą pozycją, a całość miała
     `max-height: 42vh` i własne przewijanie. Na telefonie trzymanym poziomo
     (915×412) dawało to 173 px, czyli dwie sekcje z pięciu. Reszta była
     w menu, ale nic nie zdradzało, że da się ją przewinąć - i została
     zgłoszona jako brakująca. Dlatego rozwinięte menu NIE ma własnego
     przewijania: przewija się cała strona, jak każda lista na telefonie. */
  .aa-side {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .aa-brand {
    flex: 1;
    min-width: 0;
    border-bottom: 0;
    padding: 12px 16px;
  }

  .aa-side__search {
    flex: 1;
    min-width: 200px;
    padding: 0 12px;
  }

  /* `flex: 1 1 100%`, a nie `width: 100%`: reguła podstawowa daje `.aa-nav`
     deklarację `flex: 1`, czyli `flex-basis: 0`, której sama szerokość nie
     przebija - menu ściskało się wtedy do jednej linii obok logotypu. */
  .aa-nav {
    flex: 1 1 100%;
    overflow: visible;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 8px 12px;
  }

  /* Palec potrzebuje większego celu niż kursor myszy. */
  .aa-nav__item {
    padding: 9px 10px;
    font-size: 14px;
  }

  .aa-who {
    flex: 1 1 100%;
  }

  /* Szuflada działa tylko z JavaScriptem (js/pasek-boczny.js). Bez niego
     przycisk nic by nie robił, więc wtedy go nie ma, a menu zostaje
     rozwinięte - dłuższa strona jest lepsza niż menu, którego nie da się
     otworzyć. */
  .js .aa-side__toggle {
    display: inline-flex;
  }

  .js .aa-side:not(.is-open) .aa-nav,
  .js .aa-side:not(.is-open) .aa-who {
    display: none;
  }

  .aa-main {
    padding: 20px 16px 40px;
  }

  /* Claro wysuwa wiersz kolumn (`/admin/config`, `/admin/structure`) ujemnym
     marginesem 21px - pod swoje dopełnienie treści. Przy naszych 16px wiersz
     wystawał o 5px i strona przewijała się w bok (test 01/02.10, 1024px).
     Margines nie większy niż dopełnienie. Selektor z klasą body, bo reguła
     Claro `body:not(.toolbar-tray-open) .layout-row` jest mocniejsza. */
  .aa-admin-body .aa-main .layout-row {
    margin-left: -16px;
    margin-right: -16px;
  }

  .aa-top {
    padding: 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aa-admin-body * {
    transition: none !important;
    animation: none !important;
  }
}

/* Doprowadzanie odsłoniętej treści do okna (js/do-okna.js). Kolor jak
   w edytorze wyzwania. Zapala się od razu, gaśnie przejściem; przy wyłączonych
   animacjach reguła wyżej zdejmuje przejście, więc gaśnie skokowo - ale się
   pokazuje, czego @keyframes by nie zrobiło. */
.aa-do-okna {
  transition: background-color 0.9s ease-out, box-shadow 0.9s ease-out;
}

.aa-do-okna.aa-wskazany {
  border-radius: var(--aa-radius-sm, 7px);
  background-color: var(--aa-acc-soft, #dcf0f1);
  box-shadow: 0 0 0 12px var(--aa-acc-soft, #dcf0f1);
  transition: none;
}

/* ==========================================================================
   15. Druk
   ========================================================================== */

@media print {
  .aa-side,
  .aa-top {
    display: none;
  }

  .aa-main {
    padding: 0;
  }
}

/* ==========================================================================
   16. Poprawki wychwycone podczas testów w przeglądarce
   ==========================================================================
   Claro miejscami wygrywa specyficznością (własny niebieski akcent), dlatego
   poniższe reguły są celowo mocniejsze niż sekcje powyżej. */

/* Nagłówek strony: tytuł, akcje i zakładki w jednym bloku. */
.aa-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;
  margin-bottom: 18px;
}

.aa-pagehead > * {
  margin: 0;
}

.aa-pagehead .block-page-title-block {
  flex: 1 1 320px;
  margin: 0;
}

.aa-pagehead .block-local-actions-block {
  margin: 0;
}

.aa-pagehead .block-local-tasks-block {
  flex: 1 1 100%;
}

/* Akcent zamiast niebieskiego Claro na zakładkach. */
.aa-admin-body .tabs__link.is-active,
.aa-admin-body .tabs a.is-active,
.aa-admin-body .tabs__tab.is-active .tabs__link {
  border-bottom-color: var(--aa-acc);
  box-shadow: none;
}

.aa-admin-body .tabs__tab.is-active,
.aa-admin-body .tabs__tab {
  border: 0;
  box-shadow: none;
  background: none;
}

/* Przyciski akcji (także te w paskach akcji zbiorczych i widokach). */
.aa-admin-body .button--primary,
.aa-admin-body input.button--primary,
.aa-admin-body button.button--primary,
.aa-admin-body .button--action,
.aa-admin-body .vbo-action-form input.button--primary {
  background-color: var(--aa-acc);
  border-color: var(--aa-acc);
  color: #fff;
}

.aa-admin-body .button--primary:hover,
.aa-admin-body input.button--primary:hover,
.aa-admin-body button.button--primary:hover,
.aa-admin-body .button--action:hover {
  background-color: var(--aa-acc-dark);
  border-color: var(--aa-acc-dark);
}

/* Pola wyboru i suwaki w barwie marki. */
.aa-admin-body input[type='checkbox'],
.aa-admin-body input[type='radio'],
.aa-admin-body progress {
  accent-color: var(--aa-acc);
}

/* Odnośniki w tabelach czytamy jako treść, nie jako akcje. */
.aa-admin-body td a:not(.button):not(.action-link) {
  color: var(--aa-ink);
}

.aa-admin-body td a:not(.button):not(.action-link):hover {
  color: var(--aa-acc);
}

/* Okruszki: separator daje Claro, nie dokładamy drugiego. */
.aa-admin-body .breadcrumb li::after {
  content: none;
}

/* Sekcje zwijane: zostawiamy miejsce na strzałkę Claro. */
.aa-admin-body .claro-details__summary,
.aa-admin-body summary {
  padding-inline-start: 42px;
}

.aa-admin-body .claro-details__summary::before,
.aa-admin-body .claro-details__summary::after {
  inset-inline-start: 16px;
}

/* Sortowanie kolumn i ikony w nagłówkach tabel. */
.aa-admin-body th a.is-active,
.aa-admin-body th .tablesort {
  color: var(--aa-acc);
}

/* Nagłówek sortowanej kolumny: strzałka nachodziła na ostatnią literę
   („ZAKTUALIZOWAN↑", przegląd 24.09.2026, A36). Claro stawia ikonę
   sortowania absolutnie przy prawej krawędzi komórki i liczy na zapas
   w `padding` odnośnika; nasz krój nagłówków (IBM Plex Mono, wersaliki,
   rozstrzelenie) jest szerszy, niż ten zapas przewiduje. Ikona idzie więc
   w tok tekstu, zaraz za słowem - nie ma na co nachodzić. */
.aa-admin-body th.sortable-heading > a {
  padding-inline-end: 0;
  overflow-wrap: normal;
}

.aa-admin-body th.sortable-heading .tablesort {
  position: static;
  display: inline-block;
  vertical-align: -0.2em;
  margin-inline-start: 0.35em;
  transform: none;
}

/* To samo dla ikony kolumny JESZCZE NIE sortowanej (Claro rysuje ją jako
   `a::after`, też absolutnie przy prawej krawędzi). Po zdjęciu zapasu wyżej
   nachodziła na długie nagłówki: „BENUTZERNA≡ME” na liście redaktorów po
   niemiecku (noc tłumaczeń 29/30.09.2026). */
.aa-admin-body th.sortable-heading > a::after {
  position: static;
  display: inline-block;
  vertical-align: -0.2em;
  margin-inline-start: 0.35em;
  transform: none;
}

/* Filtry tablicy ogłoszeń w jednym rzędzie, jak filtry listy „Treść" -
   na szerokim ekranie stały jeden pod drugim i zajmowały pół ekranu (A36).
   Na wąskim zawijają się same. */
.aa-admin-body .aa-ogloszenia-filtry {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 1rem;
}

.aa-admin-body .aa-ogloszenia-filtry > .form-item,
.aa-admin-body .aa-ogloszenia-filtry > .form-actions {
  margin-block: 0.5rem;
}

.aa-admin-body .aa-ogloszenia-filtry > .form-item .form-item__description {
  max-width: 16rem;
}

.aa-admin-body .aa-ogloszenia-filtry > .form-type--checkbox {
  align-self: center;
}

/* ==========================================================================
   17. Przemapowanie skali kolorów Claro
   ==========================================================================
   Claro wyprowadza cały swój akcent (przyciski, pola wyboru, obramowania
   focusa, wskaźniki zakładek, odnośniki) ze skali --color-blue-*. Zamiast
   gonić pojedyncze selektory podmieniamy samą skalę na terakotę marki -
   dzięki temu spójne stają się także komponenty, których nie stylujemy
   wprost, w tym te dodane przez moduły kontrybuowane.
   Skala zachowuje logikę Claro: wyższy numer = ciemniejszy odcień. */

:root,
body.aa-admin-body {
  --color-blue-900: #00292c;
  --color-blue-800: #004a4f;
  --color-blue-700: #006d73;
  --color-blue-650: #00787e;
  --color-blue-600: #00838a;
  --color-blue-500: #1a959b;
  --color-blue-400: #4db0b5;
  --color-blue-300: #80c8cc;
  --color-blue-200: #b3dfe1;
  --color-blue-100: #d9eff0;
  --color-blue-070: #e6f4f5;
  --color-blue-050: #eef8f8;
  --color-blue-020: #f7fbfc;
}

/* Elementy nawigacyjne nie są tekstem klikalnym - bez podkreśleń. */
.aa-admin-body .aa-brand,
.aa-admin-body .aa-brand:hover,
.aa-admin-body .aa-nav__item,
.aa-admin-body .aa-nav__item:hover,
.aa-admin-body .aa-who__link,
.aa-admin-body .aa-who__link:hover,
.aa-admin-body .aa-who__out,
.aa-admin-body .aa-btn--ghost {
  text-decoration: none;
}

/* Sidebar ma własną skalę kolorów - odnośniki nie mogą brać koloru akcentu
   z reguły ogólnej (".aa-admin-body a"), która jest od nich mocniejsza. */
.aa-admin-body a.aa-nav__item {
  color: var(--aa-side-item);
}

.aa-admin-body a.aa-nav__item:hover,
.aa-admin-body a.aa-nav__item.is-active {
  color: #fff;
}

.aa-admin-body a.aa-brand,
.aa-admin-body a.aa-who__link {
  color: var(--aa-side-ink);
}

.aa-admin-body a.aa-who__out {
  color: var(--aa-side-mut);
}

.aa-admin-body a.aa-who__out:hover {
  color: #fff;
}

.aa-admin-body a.aa-btn--ghost {
  color: var(--aa-mut);
}

.aa-admin-body a.aa-btn--ghost:hover {
  color: var(--aa-ink);
}

/* Strzałka listy rozwijanej jest obrazkiem tła po prawej stronie - musi mieć
   własne miejsce, inaczej tekst opcji wchodzi pod nią. */
.aa-admin-body select,
.aa-admin-body select.form-element {
  padding-inline-end: 34px;
  min-width: 96px;
}

/* ==========================================================================
   18. Proporcje kolumn na listach administracyjnych
   ==========================================================================
   Domyślnie przeglądarka rozdziela szerokość po zawartości nagłówków, przez co
   kolumna "Tytuł" - jedyna z długim tekstem - dostawała mniej miejsca niż
   kolumny z jednym słowem ("Artykuł", "Opublikowane"). Wąskim kolumnom
   nadajemy sensowne szerokości, a tytuł zabiera resztę. */

.aa-admin-body th.views-field-title,
.aa-admin-body td.views-field-title {
  width: auto;
  min-width: 240px;
}

.aa-admin-body th.views-field-title .tt-title,
.aa-admin-body td.views-field-title {
  white-space: normal;
}

.aa-admin-body th.select-all,
.aa-admin-body td.views-field-node-bulk-form,
.aa-admin-body th.views-field-user-bulk-form,
.aa-admin-body td.views-field-user-bulk-form {
  width: 40px;
}

/* 116px mieściło polskie nazwy typów, ale nie angielskie: „Announcement”
   łamało się w środku wyrazu na „Announcem / ent” (przegląd 24.09.2026, B41).
   Kolumna dostaje miejsce na najdłuższy wyraz (EN „Announcement”,
   DE „Veranstaltung”) i przestaje ciąć wyrazy - wielowyrazowe nazwy
   („Menu kantyny”) dalej zawijają się między wyrazami. */
.aa-admin-body th.views-field-type,
.aa-admin-body td.views-field-type {
  width: 140px;
}

.aa-admin-body th.views-field-name,
.aa-admin-body td.views-field-name {
  width: 120px;
}

/* Najdłuższa wartość tej kolumny to „Nieopublikowane" - 109px tekstu plus
   32px dopełnienia, czyli 141px. Przy 124px wyraz się nie mieścił i reguła
   `overflow-wrap: break-word` z dołu łamała go w środku: „Nieopublikow /
   ane". Miał to ratować `hyphens: auto`, ale Chromium nie ma słownika
   dzielenia dla polskiego, więc dywiz się nie pojawiał - zostawało samo
   przecięcie wyrazu, wyglądające na usterkę.

   Kolumna dostaje tyle, ile potrzeba, i przestaje łamać wyrazy. */
.aa-admin-body th.views-field-status,
.aa-admin-body td.views-field-status {
  width: 148px;
  overflow-wrap: normal;
  hyphens: none;
}

/* Data ze znacznikiem czasu („27.08.2026 - 22:54") nie mieści się w 112px,
   a nowrap wypychał ją poza kolumnę - napis wchodził na sąsiednią i oba
   robiły się nieczytelne. Kolumna dostaje tyle, ile potrzeba, a przy braku
   miejsca data zawija się pod spód zamiast nachodzić. */
.aa-admin-body th.views-field-changed,
.aa-admin-body td.views-field-changed,
.aa-admin-body th.views-field-created,
.aa-admin-body td.views-field-created,
.aa-admin-body th.views-field-access,
.aa-admin-body td.views-field-access {
  width: 148px;
  white-space: normal;
}

.aa-admin-body th.views-field-operations,
.aa-admin-body td.views-field-operations {
  width: 108px;
}

/* Kolumny dokładane przez rest_api na liście treści: stan moderacji i trzy
   liczniki. Bez jawnych szerokości układ stały rozdzielał je po równo (118px
   każda), przez co na "Tytuł" zostawało 118px z 1134px tabeli. Nagłówki są
   długie, ale wartości to liczby, więc kolumny mogą być wąskie - nagłówek
   zawija się na kilka linii. */
.aa-admin-body th.views-field-rest-api-moderation-state-views-field,
.aa-admin-body td.views-field-rest-api-moderation-state-views-field {
  width: 120px;
}

/* Liczniki: same wartości to jedna cyfra, ale nagłówki są długie
   („Liczba komentarzy") i w 60px ucinały się w połowie słowa. Nagłówek
   zawija się na dwie linie, wartość zostaje wyśrodkowana pod nim. */
.aa-admin-body th.views-field-rest-api-like-views-field,
.aa-admin-body td.views-field-rest-api-like-views-field,
.aa-admin-body th.views-field-rest-api-comments-count-views-field,
.aa-admin-body td.views-field-rest-api-comments-count-views-field,
.aa-admin-body th.views-field-rest-api-user-count-views-field,
.aa-admin-body td.views-field-rest-api-user-count-views-field {
  width: 118px;
  text-align: center;
}

.aa-admin-body th.views-field-rest-api-like-views-field,
.aa-admin-body th.views-field-rest-api-comments-count-views-field,
.aa-admin-body th.views-field-rest-api-user-count-views-field,
.aa-admin-body th.views-field-rest-api-moderation-state-views-field {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Lista osób: nazwa użytkownika ma dostać resztę miejsca, a imię, nazwisko,
   rola i grupa nie potrzebują po 146px. */
.aa-admin-body th.views-field-field-name,
.aa-admin-body td.views-field-field-name,
.aa-admin-body th.views-field-field-surname,
.aa-admin-body td.views-field-field-surname {
  width: 116px;
}

.aa-admin-body th.views-field-roles-target-id,
.aa-admin-body td.views-field-roles-target-id,
.aa-admin-body th.views-field-user-additional-group-aggregator-views-field,
.aa-admin-body td.views-field-user-additional-group-aggregator-views-field {
  width: 124px;
}

/* Role w komórce tabeli.

   Rdzeniowy `item_list` wciska listę o ~40px w prawo (miejsce na kropkę
   wypunktowania). W kolumnie szerokiej na 124px zostawiało to nazwie roli
   niecałe 90px, więc „Zarządzanie formularzami" łamało się w połowie słowa na
   trzy linijki. Zerujemy wcięcie - kropka idzie na margines komórki, a nazwa
   dostaje całą szerokość kolumny i mieści się w dwóch linijkach.

   Rozwijanie reszty ról robi <details> (patrz SkroconaListaRol); podpis
   „+N więcej" jest zbudowany tak samo jak w kalendarzu treści (.aac__more). */
.aa-admin-body td.views-field-roles-target-id .item-list ul,
.aa-admin-body td.views-field-roles-target-id .item-list ol {
  margin: 0;
  padding: 0;
}

.aa-admin-body td.views-field-roles-target-id .item-list li {
  margin: 0;
  padding: 0;
}

/* Zwinięta reszta ról to NIE jest karta zwijanej sekcji formularza. Reguła
   `.aa-admin-body details` (linia 873) daje każdemu <details> w panelu ramkę,
   zaokrąglenie i 16px marginesu pod spodem - w komórce tabeli wyglądało to jak
   przycisk i dokładało wysokości wierszowi. */
.aa-admin-body details.aa-role__reszta {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Podpis „+N więcej" musi przebić `.aa-admin-body summary` z linii 882 i 1292:
   te dwie reguły rysują KAŻDY <summary> w panelu jak nagłówek zwijanej sekcji
   formularza (biała karta, padding 14px 18px, wcięcie 42px na strzałkę Claro).
   W komórce tabeli sam podpis miał przez to 90 px wysokości - więcej niż dwie
   widoczne role razem. Selektor jest więc zbudowany tak samo, jak przy
   przełączniku języka (`summary.aa-lang__current`): `summary` RAZEM z klasą,
   żeby wygrać specyficznością. */
.aa-admin-body summary.aa-role__wiecej {
  margin: 4px 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--aa-mut);
  cursor: pointer;
  list-style: none;
}

/* Trójkącik <details> w Safari rysuje się przez ::-webkit-details-marker,
   a nie przez list-style - bez tego zostaje po nim wcięcie. */
.aa-admin-body summary.aa-role__wiecej::-webkit-details-marker {
  display: none;
}

.aa-admin-body summary.aa-role__wiecej:hover,
.aa-admin-body details.aa-role__reszta[open] > summary.aa-role__wiecej {
  color: var(--aa-acc);
}

/* Poniżej 1600px liczniki (polubienia, komentarze, wyświetlenia) chowamy -
   to dane pomocnicze, a przy 11 kolumnach tytuł nie ma się gdzie zmieścić.
   Na szerszych ekranach wracają. */
@media (max-width: 1600px) {
  .aa-admin-body th.views-field-rest-api-like-views-field,
  .aa-admin-body td.views-field-rest-api-like-views-field,
  .aa-admin-body th.views-field-rest-api-comments-count-views-field,
  .aa-admin-body td.views-field-rest-api-comments-count-views-field,
  .aa-admin-body th.views-field-rest-api-user-count-views-field,
  .aa-admin-body td.views-field-rest-api-user-count-views-field {
    display: none;
  }
}

/* Data ma stały format (dd.mm.rrrr gg:mm), więc na wąskich ekranach można ją
   jeszcze zwęzić i oddać miejsce tytułowi. */
@media (max-width: 1500px) {
  .aa-admin-body th.views-field-changed,
  .aa-admin-body td.views-field-changed,
  .aa-admin-body th.views-field-created,
  .aa-admin-body td.views-field-created,
  .aa-admin-body th.views-field-access,
  .aa-admin-body td.views-field-access {
    width: 124px;
  }

  .aa-admin-body th.views-field-type,
  .aa-admin-body td.views-field-type {
    width: 140px;
  }

  .aa-admin-body th.views-field-name,
  .aa-admin-body td.views-field-name {
    width: 112px;
  }
}

/* Adres e-mail autora (m.jarus@expansio.pl to 164px) nigdy nie zmieści się
   w tej kolumnie, więc przycinamy go wielokropkiem zamiast łamać w środku. */
.aa-admin-body td.views-field-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Stały układ tabeli - bez tego przeglądarka rozdziela szerokości po długości
   tekstu w nagłówkach i deklaracje powyżej są ignorowane ("Rodzaj zawartości"
   wymuszał 188px na słowo "Artykuł"). Nagłówki mogą się łamać na dwie linie. */
.aa-admin-body table.views-view-table {
  table-layout: fixed;
}

.aa-admin-body table.views-view-table th {
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  line-height: 1.3;
  vertical-align: middle;
}

/* Komórki nie mogą rozpychać stałego układu ani nachodzić na sąsiadów, ale
   "anywhere" cięło wyrazy w losowym miejscu ("Opublikow ane", "niezweryfik
   owany"). "break-word" łamie dopiero, gdy wyraz naprawdę się nie mieści,
   a hyphens dokłada wtedy dywiz zgodnie z językiem strony. */
.aa-admin-body table.views-view-table td {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Kolumna typu (szerokość wyżej): nazwa typu mieści się w całości, więc
   wyrazu nie tniemy - reguła powyżej łamała „Announcem / ent”. */
.aa-admin-body table.views-view-table td.views-field-type {
  overflow-wrap: normal;
  hyphens: none;
}

/* ==========================================================================
   19. Przełącznik języka panelu
   ==========================================================================
   Siedzi nad blokiem użytkownika, bo to ustawienie konta, a nie nawigacja.
   Zwinięty zajmuje jeden wiersz; rozwinięta lista ma własne przewijanie,
   żeby przy dziesięciu językach nie wypchnęła stopki poza ekran. */

.aa-admin-body .aa-lang,
.aa-admin-body details.aa-lang {
  /* Bez jawnego wyzerowania tła element dostaje białe z reguł formularzy
     Claro, a że tekst w sidebarze jest biały - przełącznik zamieniał się
     w pusty biały prostokąt zasłaniający pół menu. */
  background: none;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0;
  box-shadow: none;
  margin: 0 12px 6px;
  padding: 8px 0 0;
}

.aa-admin-body .aa-lang__current,
.aa-admin-body details.aa-lang > summary.aa-lang__current {
  background: none;
  border: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
}

/* Domyślny trójkącik podsumowania psułby wyrównanie do reszty sidebara. */
.aa-admin-body .aa-lang__current::-webkit-details-marker {
  display: none;
}

.aa-admin-body .aa-lang__current:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
}

.aa-admin-body .aa-lang__glyph {
  display: flex;
  align-items: center;
  flex: none;
  opacity: 0.75;
}

.aa-admin-body .aa-lang__glyph svg {
  width: 16px;
  height: 16px;
  display: block;
}

.aa-admin-body .aa-lang__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aa-admin-body .aa-lang__code {
  font-family: var(--aa-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.aa-admin-body .aa-lang__list {
  background: none;
  max-height: 236px;
  overflow-y: auto;
  margin-top: 4px;
  padding: 2px;
}

.aa-admin-body .aa-lang__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
}

.aa-admin-body .aa-lang__item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
}

.aa-admin-body .aa-lang__item.is-current {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.aa-admin-body .aa-lang__item-code {
  flex: none;
  width: 24px;
  font-family: var(--aa-mono, ui-monospace, monospace);
  font-size: 10.5px;
  opacity: 0.75;
}

.aa-admin-body .aa-lang__item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   20. Belka kontekstu zakładu
   ==========================================================================
   Gdy panel pracuje w kontekście zakładu, zawężone jest WSZYSTKO: lista treści,
   statystyki na pulpicie, liczby na kafelkach. Bez wyraźnego oznaczenia wygląda
   to jak zniknięcie treści, a poprzednia wersja - mała pigułka w rogu górnej
   belki - była na tyle dyskretna, że ludzie jej nie zauważali.

   Dlatego: pełna szerokość, wypełnienie kolorem akcentu (nie delikatne tło)
   i przyklejenie pod górną belką, żeby przy przewijaniu długiej listy dalej
   było widać, dlaczego jest krótka. */

.aa-admin-body .aa-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.aa-admin-body .aa-plantbar {
  /* Odstęp musi się zgadzać z min-height górnej belki - inaczej przy
     przewijaniu między jedną a drugą prześwituje treść. */
  position: sticky;
  top: var(--aa-top-h);
  z-index: 19;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 28px;
  background: var(--aa-acc);
  color: #fff;
  box-shadow: 0 2px 12px rgba(31, 26, 20, 0.18);
}

.aa-admin-body .aa-plantbar__pin {
  width: 17px;
  height: 17px;
  flex: none;
  fill: currentColor;
  opacity: 0.9;
}

.aa-admin-body .aa-plantbar__label {
  font-family: var(--aa-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.82;
}

.aa-admin-body .aa-plantbar__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.aa-admin-body .aa-plantbar__hint {
  font-size: 12.5px;
  opacity: 0.82;
  /* Kreska oddziela nazwę od wyjaśnienia bez dokładania kolejnego elementu. */
  padding-inline-start: 12px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.35);
}

.aa-admin-body a.aa-plantbar__leave {
  margin-inline-start: auto;
  flex: none;
  padding: 5px 13px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.aa-admin-body a.aa-plantbar__leave:hover,
.aa-admin-body a.aa-plantbar__leave:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--aa-acc-dark);
  text-decoration: none;
}

@media (max-width: 1024px) {
  .aa-admin-body .aa-plantbar {
    padding: 9px 16px;
  }

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

/* ==========================================================================
   21. Formularz treści (dodawanie i edycja węzła)

   Formularz redaktora jest najczęściej otwieranym ekranem panelu i to na nim
   spędza się najwięcej czasu, a wyglądał jak surowy Claro: pola bez oddechu,
   tytuł tej samej wielkości co reszta, przycisk „Zapisz" na końcu długiej
   strony. Tu nie zmieniamy ani struktury formularza, ani kolejności pól -
   to konfiguracja typu zawartości. Zmienia się warstwa wizualna.
   ========================================================================== */

/* Główna kolumna jako jedna karta. Wcześniej pola leżały wprost na tle
   strony i nie było widać, gdzie kończy się treść, a zaczyna kolumna boczna. */
.aa-admin-body .layout-region--main {
  background: var(--aa-card);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius);
  padding: 26px 28px 20px;
}

.aa-admin-body .layout-region--main > .field--name-title,
.aa-admin-body .layout-region--main .form-item {
  margin-bottom: 22px;
}

/* Tytuł to pierwsza i najważniejsza decyzja redaktora - w formularzu ma
   wyglądać jak nagłówek, który pisze, a nie jak kolejne pole tekstowe. */
.aa-admin-body .field--name-title .form-item__label {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--aa-mut-2);
}

.aa-admin-body .field--name-title input[type='text'] {
  font-size: 20px;
  font-weight: 600;
  padding: 12px 14px;
  width: 100%;
}

.aa-admin-body .field--name-title input[type='text']::placeholder {
  font-weight: 400;
  color: var(--aa-mut-3);
}

/* Pole wyboru pliku: natywny „Choose file / no file chosen" wyglądał jak
   surowy formularz z lat dziewięćdziesiątych. Robimy z niego strefę, w którą
   widać, że trzeba kliknąć - bez skryptu, samym stylem. */
.aa-admin-body input[type='file'] {
  width: 100%;
  padding: 18px;
  border: 1px dashed var(--aa-field);
  border-radius: var(--aa-radius-sm);
  background: var(--aa-bg, #f7f7f7);
  font-size: 13px;
  color: var(--aa-mut);
  cursor: pointer;
}

.aa-admin-body input[type='file']:hover {
  border-color: var(--aa-acc);
  background: rgba(0, 131, 138, 0.04);
}

.aa-admin-body input[type='file']::file-selector-button {
  margin-inline-end: 14px;
  padding: 8px 16px;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-sm);
  background: var(--aa-card);
  color: var(--aa-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.aa-admin-body input[type='file']:hover::file-selector-button {
  border-color: var(--aa-acc);
  color: var(--aa-acc);
}

/* Listy przełączników (kategoria, sposób prezentacji) czytało się ciężko:
   kółko, tekst i kolejne kółko stały jedno przy drugim bez oddechu. */
.aa-admin-body .form-type--radio,
.aa-admin-body .form-type--checkbox {
  margin-bottom: 9px;
}

.aa-admin-body .form-type--radio label,
.aa-admin-body .form-type--checkbox label {
  font-size: 13.5px;
  color: var(--aa-ink);
}

/* Kolumna boczna: karty zamiast luźno stojących sekcji. */
.aa-admin-body .layout-region--secondary .entity-meta__header,
.aa-admin-body .layout-region--secondary details {
  border-radius: var(--aa-radius);
}

.aa-admin-body .layout-region--secondary .entity-meta__header {
  background: var(--aa-card);
  border: 1px solid var(--aa-line);
  padding: 16px 18px;
}

/* Pasek akcji przyklejony do dołu okna.

   Formularz artykułu ma kilka ekranów wysokości, a „Zapisz" siedział na
   samym końcu - po dopisaniu zdania w środku trzeba było przewijać do dołu,
   żeby zapisać. */
.aa-admin-body .layout-region--footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--aa-card);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius);
  padding: 12px 18px;
  margin-top: 18px;
  box-shadow: 0 -4px 18px rgba(34, 27, 24, 0.06);
  /* Stopka stoi w wierszu siatki .layout-form. Przy wysokiej prawej kolumnie
     (formularz tłumaczenia: tabela zasięgu z wierszem na zakład) rozciągała
     się do ~1230 px i jako przyklejona biała plansza zasłaniała tytuł
     i edytor - tłumaczenia nie dało się wpisać. */
  align-self: end;
  height: max-content;
}

.aa-admin-body .layout-region--footer .form-actions {
  margin-top: 0;
}

/* Przyklejony pasek ma nie zasłaniać wiersza, w którym redaktor pisze.
 *
 * Pasek stoi nad treścią, więc przy pisaniu w edytorze przeglądarka
 * doprzewijała stronę dokładnie tyle, żeby kursor wszedł do okna - a że
 * pasek zajmuje ostatnie 98 px okna, kursor lądował POD nim. Zmierzone na
 * formularzu artykułu (okno 1440×900): pisany wiersz siadał na 812 px przy
 * pasku zaczynającym się na 802 px. Wyglądało to jak zacinający się edytor -
 * tekst „znikał" w trakcie pisania i trzeba było przewijać ręcznie.
 *
 * `scroll-padding-bottom` mówi przeglądarce, żeby przy doprzewijaniu
 * traktowała dolne 130 px okna jak zajęte. Ten sam wiersz siada wtedy na
 * 748 px, czyli nad paskiem.
 *
 * `:has()` zawęża regułę do stron, które ten pasek naprawdę mają. Gdyby
 * przeglądarka nie znała `:has()`, reguła po prostu nie zadziała - nic
 * się przez nią nie zepsuje. */
html:has(.aa-admin-body .layout-region--footer) {
  scroll-padding-bottom: 130px;
}

/* To samo od góry, ale mierzone na polach, nie na dokumencie.
 *
 * Przy zapisie formularza z pustym tytułem przeglądarka przewija stronę do
 * pierwszego niewypełnionego pola i pokazuje przy nim dymek. Nad treścią stoją
 * dwie przyklejone belki (okruszki + „widok zakładu"), razem 94 px - i pole
 * lądowało dokładnie pod nimi. Redaktor widział dymek zawieszony nad niczym
 * i nie wiedział, którego pola dotyczy.
 *
 * `scroll-padding` na dokumencie tego NIE naprawia: przewijanie do
 * nieprawidłowego pola robi wbudowana walidacja przeglądarki, która czyta
 * `scroll-margin` samego elementu, a nie dopełnienie kontenera. Zmierzone:
 * bez tej reguły pole tytułu siada na 0-52 px (belki kończą się na 94),
 * z regułą na 120-172 px.
 *
 * `scroll-margin-bottom` domyka to samo od dołu - dla pól, do których
 * przeglądarka doprzewija, gdy leżą pod paskiem zapisu. */
.aa-admin-body .layout-region--main :is(input, select, textarea),
.aa-admin-body .layout-region--secondary :is(input, select, textarea) {
  scroll-margin-top: 120px;
  scroll-margin-bottom: 130px;
}

/* Podpowiedzi pod polami plików bywają długie (limity, rozszerzenia,
   wymiary) i przy pełnej szerokości karty czytało się je jak akapit
   regulaminu. */
.aa-admin-body .form-managed-file + .form-item__description,
.aa-admin-body .form-managed-file .description,
.aa-admin-body input[type='file'] + .description {
  max-width: 52em;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .aa-admin-body .layout-region--main {
    padding: 18px;
  }

  /* Na wąskim ekranie przyklejony pasek zabiera zbyt dużą część widoku. */
  .aa-admin-body .layout-region--footer {
    position: static;
    box-shadow: none;
  }
}

/* Belka „wszystkie zakłady".
 *
 * Ta sama forma co belka zakładu, ale stonowana: wejście w konkretny zakład
 * zawęża to, co widać, i wymaga uwagi - widok pełny jest stanem domyślnym
 * i ma tylko informować, nie krzyczeć. */
.aa-admin-body .aa-plantbar--all {
  background: var(--aa-card);
  color: var(--aa-mut);
  border-bottom: 1px solid var(--aa-line);
  box-shadow: none;
}

.aa-admin-body .aa-plantbar--all .aa-plantbar__label {
  color: var(--aa-ink-2);
}

.aa-admin-body .aa-plantbar--all .aa-plantbar__hint {
  color: var(--aa-mut-2);
  /* Na jasnym pasku przezroczystość zbijała kontrast do 2,9:1. */
  opacity: 1;
}

.aa-admin-body .aa-plantbar--all .aa-plantbar__pin {
  fill: var(--aa-mut-2);
}

/* Sekcje w kolumnie bocznej formularza treści.
 *
 * Claro rysuje wokół każdej ramkę, a że leżą jedna pod drugą, z boku
 * układało się to w pionowe kreski biegnące przez całą kolumnę. Nic nie
 * wnosiły - grupy i tak rozdziela nagłówek - a rozbijały kolumnę na paski.
 * Zostaje jedna linia między sąsiadami. */
.aa-admin-body .layout-region--secondary .accordion__item,
.aa-admin-body .layout-region--secondary .claro-details,
.aa-admin-body .layout-region--secondary details {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
  margin-bottom: 0;
}

.aa-admin-body .layout-region--secondary .accordion__item + .accordion__item,
.aa-admin-body .layout-region--secondary .claro-details + .claro-details {
  border-top: 1px solid var(--aa-line-soft, #ececec);
}

.aa-admin-body .layout-region--secondary .accordion__item:last-child,
.aa-admin-body .layout-region--secondary .claro-details:last-child {
  border-bottom: 0;
}

/* Przełącznik „Pokaż wagi wierszy".
 *
 * Drupal daje go przy każdej tabeli z przeciąganiem: zamienia chwytaki na
 * listy liczb. Kolejność ustawia się tu myszą, a liczby wymagają wiedzy
 * o tym, że mniejsza waga idzie wyżej - to pytanie, którego redakcja nie
 * powinna sobie zadawać. */
.aa-admin-body .tabledrag-toggle-weight-wrapper,
.aa-admin-body .tabledrag-toggle-weight {
  display: none;
}

/* Zagłębienie w listach wyboru zakładów.
 *
 * Drupal zaznacza poziom myślnikami wprost w tekście opcji („--Porto"),
 * co czyta się jak literówka. Wewnątrz <option> nie da się tego ostylować -
 * przeglądarka rysuje je po swojemu - więc myślniki zamienia na wcięcie
 * allabout_dashboard_form_alter(). Tutaj zostaje sama lista pól wyboru
 * (checkboxy/radia), gdzie poziom da się pokazać odstępem. */
.aa-admin-body .form-type--checkbox .form-item__label[data-poziom="1"],
.aa-admin-body .form-type--radio .form-item__label[data-poziom="1"] {
  padding-inline-start: 18px;
}

.aa-admin-body .form-type--checkbox .form-item__label[data-poziom="2"],
.aa-admin-body .form-type--radio .form-item__label[data-poziom="2"] {
  padding-inline-start: 36px;
}

/* Przełącznik języka w górnej belce.
 *
 * Wcześniej siedział w stopce paska bocznego i nie był znajdowany, mimo że
 * był na każdej stronie. W belce leży na wysokości wzroku, po prawej stronie
 * ścieżki nawigacyjnej, i ma widoczną ramkę - żeby czytało się jak przycisk,
 * a nie jak podpis. */
.aa-admin-body .aa-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.aa-admin-body .aa-top .aa-lang {
  margin: 0;
  flex: none;
  position: relative;
}

.aa-admin-body .aa-top .aa-lang__current {
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-sm);
  padding: 6px 12px;
  background: var(--aa-card);
  color: var(--aa-ink-2);
}

.aa-admin-body .aa-top .aa-lang__current:hover {
  border-color: var(--aa-acc);
  color: var(--aa-acc);
}

/* Kolory przełącznika były pisane pod ciemny pasek boczny - w jasnej belce
   biały tekst na białym tle był po prostu niewidoczny. Nadpisujemy je razem
   z wnętrzem przycisku i listy. */
.aa-admin-body .aa-top .aa-lang__current,
.aa-admin-body .aa-top .aa-lang__label,
.aa-admin-body .aa-top .aa-lang__glyph {
  color: var(--aa-ink-2);
}

.aa-admin-body .aa-top .aa-lang__code {
  background: var(--aa-line-soft, #ececec);
  color: var(--aa-ink-2);
}

.aa-admin-body .aa-top .aa-lang__current:hover .aa-lang__label,
.aa-admin-body .aa-top .aa-lang__current:hover .aa-lang__glyph {
  color: var(--aa-acc);
}

.aa-admin-body .aa-top .aa-lang__item {
  color: var(--aa-ink-2);
}

.aa-admin-body .aa-top .aa-lang__item:hover {
  background: var(--aa-line-soft, #ececec);
  color: var(--aa-acc);
}

.aa-admin-body .aa-top .aa-lang__item.is-current {
  background: var(--aa-acc-soft, #e2f3f4);
  color: var(--aa-acc);
}

.aa-admin-body .aa-top .aa-lang__item-code {
  color: var(--aa-mut-2);
}

/* Lista rozwija się pod przyciskiem, a nie rozpycha belki. */
.aa-admin-body .aa-top .aa-lang__list {
  background: var(--aa-card);
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--aa-card);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius);
  box-shadow: 0 10px 28px rgba(34, 27, 24, 0.14);
  padding: 6px;
}

/* Tabela nie wypycha treści poza ekran.
 *
 * Lista treści ma jedenaście kolumn i na węższym ekranie ostatnia z nich -
 * przyciski „Edytuj" - wychodziła poza prawą krawędź, więc nie dało się
 * w nią kliknąć. Zamiast ściskać kolumny do nieczytelności, tabela dostaje
 * własne przewijanie w poziomie: reszta strony stoi w miejscu, przesuwa się
 * tylko ona. */
.aa-admin-body .view-content .views-form,
.aa-admin-body .view-content > form {
  overflow-x: auto;
  max-width: 100%;
  /* Ramka przenosi się z tabeli na kontener przewijania - patrz niżej. */
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius);
  background: var(--aa-card);
}

/* Bez tego układ stały ścisnąłby kolumny zamiast włączyć przewijanie. */
.aa-admin-body .view-content table {
  min-width: 1100px;
}

/* Kolumna „Operacje" przyklejona do prawej krawędzi.
 *
 * Samo przewijanie kontenera nie wystarczyło. Pasek przewijania siedzi pod
 * tabelą, czyli po pięćdziesięciu wierszach - dwa i pół tysiąca pikseli
 * niżej. Redaktor na laptopie 1280 lub 1366 px widział listę BEZ przycisku
 * „Edytuj" i bez niczego, co by mówiło, że tabela jedzie w bok. Przy 1280
 * poza ekranem zostawało 98 ze 108 pikseli tej kolumny.
 *
 * Teraz kolumna stoi przy prawej krawędzi niezależnie od przewinięcia,
 * z cieniem pokazującym, że coś jest pod nią schowane.
 *
 * `position: sticky` wymaga, żeby żaden przodek między komórką a kontenerem
 * przewijania nie miał `overflow` innego niż `visible` - a tabela miała
 * `overflow: hidden` (dla zaokrąglonych rogów). Dlatego ramka i zaokrąglenie
 * wędrują na kontener, a tabela je oddaje. */
.aa-admin-body .view-content .views-form table.views-view-table,
.aa-admin-body .view-content > form table.views-view-table {
  overflow: visible;
  border: 0;
  border-radius: 0;
}

.aa-admin-body .view-content .views-form th.views-field-operations,
.aa-admin-body .view-content .views-form td.views-field-operations,
.aa-admin-body .view-content > form th.views-field-operations,
.aa-admin-body .view-content > form td.views-field-operations {
  position: sticky;
  inset-inline-end: 0;
  z-index: 2;
  /* 124px zamiast 108px: „Edytuj" ze strzałką rozwijania nie mieściło się
     i strzałka była przycięta. */
  width: 124px;
  box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.28);
}

/* RTL: kolumna jest przyklejona do lewej krawędzi, cień pada w prawo. */
[dir="rtl"] .aa-admin-body .view-content .views-form th.views-field-operations,
[dir="rtl"] .aa-admin-body .view-content .views-form td.views-field-operations,
[dir="rtl"] .aa-admin-body .view-content > form th.views-field-operations,
[dir="rtl"] .aa-admin-body .view-content > form td.views-field-operations {
  box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.28);
}

/* Przyklejona komórka musi mieć własne tło, inaczej przejeżdżające pod nią
   kolumny prześwitują. */
.aa-admin-body .view-content .views-form th.views-field-operations,
.aa-admin-body .view-content > form th.views-field-operations {
  background: var(--aa-panel);
}

.aa-admin-body .view-content .views-form td.views-field-operations,
.aa-admin-body .view-content > form td.views-field-operations {
  background: var(--aa-card);
}

.aa-admin-body .view-content .views-form tbody tr:hover td.views-field-operations,
.aa-admin-body .view-content > form tbody tr:hover td.views-field-operations {
  background: var(--aa-ground);
}

/* ---------------------------------------------------------------------------
   Pionowa kreska przy nagłówkach sekcji formularza.

   Claro rysuje przy każdej rozwijanej sekcji („Stan treści", „Data
   publikacji") trzypikselowy pasek w kolorze akcentu - u nas terakotowy.
   Sekcji jest w formularzu wpisu kilkanaście, więc prawa kolumna zamieniała
   się w rząd czerwonych kresek, które niczego nie znaczą: nie oznaczają ani
   błędu, ani zmiany, ani stanu.
   --------------------------------------------------------------------------- */

/* Selektory muszą odpowiadać kształtem regułom Claro ([open] > … :not(…)),
   inaczej przegrywają specyficznością i pasek zostaje mimo nadpisania. */
.aa-admin-body .claro-details__summary::after,
.aa-admin-body .claro-details__summary--accordion-item::after,
.aa-admin-body [open] > .claro-details__summary--accordion:not(:focus, :active)::after,
.aa-admin-body [open] > .claro-details__summary--accordion-item:not(:focus, :active)::after,
.aa-admin-body .claro-details__summary--accordion:not(:focus, :active)::after,
.aa-admin-body .claro-details__summary--accordion-item:not(:focus, :active)::after {
  border-inline-start: 0;
}

/* ==========================================================================
   22. Brama - logowanie i odzyskiwanie hasła
   ==========================================================================

   Ekran logowania rysował się dotąd skórką serwisu WWW: niebieski nagłówek,
   zakładki „Zaloguj / Ustaw nowe hasło" i stopka „All rights reserved". To
   pierwsza strona, jaką widzi recenzent sklepu z aplikacjami i publiczność
   pokazu, więc musi wyglądać jak wejście do TEGO panelu.

   Osobny układ zamiast szkieletu panelu: menu boczne dla niezalogowanego jest
   puste, a stopka sidebara pokazywałaby „Anonim" i odnośnik „Wyloguj".
   -------------------------------------------------------------------------- */

.aa-gate,
.aa-gate *,
.aa-gate *::before,
.aa-gate *::after {
  box-sizing: border-box;
}

.aa-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: var(--aa-ground);
}

.aa-gate__card {
  width: 100%;
  max-width: 420px;
  background: var(--aa-card);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius);
  box-shadow: 0 18px 44px rgba(34, 27, 24, 0.08);
  padding: 32px;
}

.aa-gate__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.aa-gate__mark {
  width: 38px;
  height: 38px;
  border-radius: var(--aa-radius-sm);
  background: var(--aa-acc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 19px;
  color: #fff;
  flex: none;
}

.aa-gate__names {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.aa-gate__name {
  font-weight: 700;
  font-size: 17px;
  color: var(--aa-ink);
}

.aa-gate__sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aa-mut-2);
}

/* Zakładki „Zaloguj" i „Ustaw nowe hasło" - w karcie, bez paska na całą
   szerokość ekranu, który wyglądałby jak nawigacja serwisu. */
.aa-gate__head {
  margin-bottom: 20px;
}

.aa-gate__head h1 {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.25;
  color: var(--aa-ink);
}

.aa-gate__head .tabs,
.aa-gate__head nav.tabs {
  margin: 12px 0 0;
}

.aa-gate__content .form-item {
  margin-bottom: 16px;
}

.aa-gate__content .form-actions {
  margin-top: 20px;
}

/* Przycisk wejścia na pełną szerokość karty - jedyna akcja na tym ekranie. */
.aa-gate__content .form-actions .button--primary {
  width: 100%;
  justify-content: center;
}

/* Odnośniki pomocnicze („Zamów nowe hasło") pod formularzem, nie obok. */
.aa-gate__content .description {
  color: var(--aa-mut);
}

/* Ikona pomocy webformu („?" w kółku) stała tuż za etykietą kończącą się
   znakiem zapytania i czytała się jak „quizu??" (przegląd 24.09.2026, B10).
   Odstęp oddziela ją od tekstu etykiety. */
.aa-admin-body .webform-element-help {
  margin-inline-start: 0.4em;
}

/* Zakładka „Tłumaczenia" wpisu: tłumaczenie z automatu, jeszcze niesprawdzone
   (TlumaczeniaController, #800). Plakietka pod stanem, kolory ostrzeżenia. */
.aa-admin-body .aa-tlumaczenie-automatyczne {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border: 1px solid var(--aa-warn-line);
  border-radius: 999px;
  background: var(--aa-warn-bg);
  color: var(--aa-warn-ink);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

/* Pismo arabskie i dewanagari łączy litery w słowie (arabski — ligatury,
   hindi — kreska górna शिरोरेखा). Rozstrzelenie liter z nagłówków tabel,
   sekcji paska bocznego i plakietek rozrywało słowa na osobne znaki, a krój
   mono nie ma tych pism i przeglądarka brała przypadkowy zastępczy
   (drugi test tłumaczeń 27.09.2026). Wersaliki tych pism nie dotyczą. */
.aa-admin-body:lang(ar),
.aa-admin-body:lang(ar) *,
.aa-admin-body:lang(hi),
.aa-admin-body:lang(hi) * {
  letter-spacing: normal !important;
}

.aa-admin-body:lang(ar),
.aa-admin-body:lang(hi) {
  --aa-mono: var(--aa-sans);
}

/* ==========================================================================
   Halo Phoenix - logo zamiast litery w znaku panelu
   ========================================================================== */

/* Logo Phoenix Contact to czarny kwadrat z białym „P". Na ciemnym pasku
   bocznym bez podkładu zlewałoby się z tłem, więc dostaje biały kafelek. */
.aa-admin-body .aa-mark--logo {
  background: #fff;
  padding: 3px;
  overflow: hidden;
}

.aa-admin-body .aa-mark--logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}