/* ==========================================================================
   Akademia Projekt481 – MOTYW BOOTSTRAP 5.3 (ładować PO bootstrap.min.css i tokens.css)
   1) Zmienne Bootstrapa (--bs-*) ← nasze tokeny: kolory, typografia, zaokrąglenia, fokus.
   2) Skórka neumorficzna dla komponentów Bootstrapa – te same klasy, inny wygląd.
   Zasada: markup = czysty Bootstrap 5.3; nasze klasy tylko jako dodatek (.btn-neu, .form-icon, .seg…).
   Kontrast WCAG 2.2 AA wbudowany w tokeny (tekst ≥ 4,5:1, obrys ≥ 3:1). Wysoki kontrast: html.hc.
   ========================================================================== */

/* [hidden] wygrywa z narzędziami Bootstrapa (.d-flex/.d-grid mają !important) – el.hidden = true zawsze chowa */
[hidden] { display: none !important; }


/* ---------- 1. Zmienne Bootstrapa ---------- */
:root, [data-bs-theme="light"] {
  --bs-font-sans-serif: var(--font);
  --bs-font-monospace: var(--mono);
  --bs-body-font-family: var(--font);
  --bs-body-font-size: .875rem;          /* 14 px */
  --bs-body-font-weight: 500;
  --bs-body-line-height: var(--lh);
  --bs-body-color: var(--text);
  --bs-body-color-rgb: 74, 71, 143;
  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: 235, 235, 239;
  --bs-emphasis-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-muted);
  --bs-secondary-bg: #e3e3e9;
  --bs-tertiary-bg: #eeeef3;
  --bs-heading-color: var(--text);
  --bs-link-color: var(--text);
  --bs-link-color-rgb: 74, 71, 143;
  --bs-link-hover-color: var(--text-pink);
  --bs-link-hover-color-rgb: 173, 36, 88;
  --bs-border-color: var(--edge);
  --bs-border-color-translucent: rgba(124, 123, 160, .3);
  --bs-border-radius: var(--r-sm);
  --bs-border-radius-sm: var(--r-xs);
  --bs-border-radius-lg: var(--r-md);
  --bs-border-radius-xl: var(--r-lg);
  --bs-border-radius-pill: var(--r-pill);
  --bs-box-shadow: var(--raised-md);
  --bs-box-shadow-sm: var(--raised-sm);
  --bs-box-shadow-lg: var(--raised-lg);
  --bs-box-shadow-inset: var(--inset-sm);
  --bs-focus-ring-width: var(--focus-w);
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: var(--focus);
  --bs-code-color: var(--text-pink);      /* domyślny #d63384 ma tylko 3,8:1 */
  --bs-highlight-color: var(--text); --bs-highlight-bg: #f6ecd6;
  --bs-form-invalid-color: var(--text-pink);
  --bs-form-invalid-border-color: var(--text-pink);
  --bs-form-valid-color: var(--text-ok);
  --bs-form-valid-border-color: var(--text-ok);

  /* kolory tematyczne – odcienie dobrane pod biały tekst ≥ 4,5:1 */
  --bs-primary: #0a78c2;   --bs-primary-rgb: 10, 120, 194;
  --bs-secondary: #565c7c; --bs-secondary-rgb: 86, 92, 124;
  --bs-success: #2f7d00;   --bs-success-rgb: 47, 125, 0;
  --bs-info: #4a478f;      --bs-info-rgb: 74, 71, 143;
  --bs-warning: #8a6100;   --bs-warning-rgb: 138, 97, 0;
  --bs-danger: #ad2458;    --bs-danger-rgb: 173, 36, 88;
  --bs-dark: #2e2c5c;      --bs-dark-rgb: 46, 44, 92;
  --bs-light: #f4f4f8;     --bs-light-rgb: 244, 244, 248;
  --bs-primary-text-emphasis: #0a5c9e; --bs-success-text-emphasis: var(--text-ok); --bs-danger-text-emphasis: var(--text-pink); --bs-warning-text-emphasis: #8a6100; --bs-info-text-emphasis: var(--text);
  --bs-primary-bg-subtle: #e2eef8; --bs-success-bg-subtle: #e6f2dc; --bs-danger-bg-subtle: #f7e3eb; --bs-warning-bg-subtle: #f6ecd6; --bs-info-bg-subtle: #e7e6f3;
  --bs-primary-border-subtle: #0a78c2; --bs-success-border-subtle: var(--text-ok); --bs-danger-border-subtle: var(--text-pink); --bs-warning-border-subtle: #8a6100; --bs-info-border-subtle: var(--c-navy);
}
body { background: var(--bg); -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font); font-weight: 800; color: var(--text); text-wrap: balance; }
.display-title { margin: 0; font: 500 var(--fs-2xl)/var(--lh-tight) var(--font); letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.display-title b, .display-title strong { font-weight: 800; color: var(--text-pink); }
@media (min-width: 768px) { .display-title { font-size: var(--fs-3xl); } }
.text-label { font: 800 var(--fs-xs)/1.3 var(--font); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text); }
.text-meta { font: 600 var(--fs-xs)/1.4 var(--font); color: var(--text-muted); }
.text-body-secondary, .text-muted { color: var(--text-muted) !important; }
.text-danger { color: var(--text-pink) !important; }
.text-success { color: var(--text-ok) !important; }
:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }
.visually-hidden-focusable:focus { position: fixed !important; left: var(--s-4); top: var(--s-3); z-index: var(--z-skip); padding: var(--s-2) var(--s-4) !important; border-radius: var(--r-pill); background: var(--fill-navy); color: #fff; font: 700 var(--fs-sm) var(--font); text-decoration: none; width: auto !important; height: auto !important; clip: auto !important; }

/* ---------- 2. Powierzchnie: karta, panel ---------- */
.card { --bs-card-bg: transparent; --bs-card-border-width: 0; --bs-card-border-radius: var(--r-md); --bs-card-spacer-y: var(--s-4); --bs-card-spacer-x: var(--s-4); --bs-card-color: var(--text);
  background-image: var(--surface); box-shadow: var(--raised-md); transition: transform var(--t); }
.card-hover:hover { transform: scale(1.01); }
.card-hover:hover .tile { transform: scale(1.03); }
.card:has(.stretched-link:focus-visible) { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }
.stretched-link:focus-visible { outline: none; }
.card-title { font: 700 var(--fs-sm)/1.3 var(--font); color: var(--text); }
.panel { border-radius: var(--r-lg); background-image: var(--surface); box-shadow: var(--raised-md); padding: var(--s-5); }
@media (min-width: 768px) { .panel { padding: var(--s-6); } }
.well { border-radius: var(--r-md); box-shadow: var(--inset-sm); padding: var(--s-4); }

/* ---------- 3. Przyciski (.btn) ---------- */
.btn { --bs-btn-padding-x: var(--s-5); --bs-btn-padding-y: 0; --bs-btn-font-family: var(--font); --bs-btn-font-size: var(--fs-sm); --bs-btn-font-weight: 700; --bs-btn-line-height: 1.2;
  --bs-btn-border-width: 0; --bs-btn-border-radius: var(--r-pill); --bs-btn-box-shadow: var(--raised-sm); --bs-btn-focus-box-shadow: none; --bs-btn-disabled-opacity: .45;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--h-md); box-shadow: var(--raised-sm); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.btn:hover { transform: scale(1.01); }
.btn:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); box-shadow: var(--raised-sm); }
.btn:active, .btn.active, .btn[aria-pressed="true"] { transform: none; }
.btn-sm { --bs-btn-padding-x: var(--s-4); --bs-btn-font-size: var(--fs-xs); --bs-btn-border-radius: var(--r-pill); min-height: var(--h-sm); }
.btn-lg { --bs-btn-padding-x: var(--s-6); --bs-btn-font-size: var(--fs-md); --bs-btn-border-radius: var(--r-pill); min-height: var(--h-lg); }
.btn .icon { width: 18px; height: 18px; flex: none; }
/* wypukły, drugorzędny – odpowiednik „ghost” z makiet */
.btn-neu { --bs-btn-color: var(--text); --bs-btn-hover-color: var(--text); --bs-btn-active-color: var(--text); --bs-btn-disabled-color: var(--text); background-image: var(--surface-btn); }
.btn-neu:active, .btn-neu.active, .btn-neu[aria-pressed="true"], .btn-check:checked + .btn-neu { background-image: var(--surface-pressed); box-shadow: var(--inset-sm), inset 0 0 0 1px var(--edge); }
.btn-primary, .btn-danger, .btn-success { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; }
.btn-primary { --bs-btn-bg: #0a78c2; --bs-btn-hover-bg: #0a5c9e; --bs-btn-active-bg: #0a5c9e; --bs-btn-disabled-bg: #0a78c2; background-image: var(--fill-primary); }
.btn-danger { --bs-btn-bg: #c8306a; --bs-btn-hover-bg: #ad2458; --bs-btn-active-bg: #ad2458; --bs-btn-disabled-bg: #c8306a; background-image: var(--fill-danger); }
.btn-success { --bs-btn-bg: #2f7d00; --bs-btn-hover-bg: #276a00; --bs-btn-active-bg: #276a00; --bs-btn-disabled-bg: #2f7d00; background-image: var(--fill-ok); }
/* „Usuń” na wypukłym przycisku: różowy napis lub ikona (razem z .btn-neu) */
.btn-link-danger { --bs-btn-color: var(--text-pink); --bs-btn-hover-color: var(--text-pink); --bs-btn-active-color: var(--text-pink); --bs-btn-disabled-color: var(--text-muted); background-image: var(--surface-btn); }
/* przycisk z samą ikoną – inny rozmiar ustawia się zmienną --size, nie szerokością i wysokością */
.btn-icon { --size: var(--h-md); width: var(--size); min-width: var(--size); min-height: var(--size); height: var(--size); padding: 0; --bs-btn-border-radius: var(--r-sm); }
.btn-icon .icon { width: calc(var(--size) * .45); height: calc(var(--size) * .45); }
.btn-neu.btn-icon .icon { filter: var(--icon-emboss); }
.btn-icon.rounded-circle { --bs-btn-border-radius: 50%; }
.btn-icon.btn-sm { --size: 28px; --bs-btn-border-radius: var(--r-xs); }
.btn-icon.btn-sm .icon { width: 16px; height: 16px; }   /* jak .c-btn w makiecie (16 px w przycisku 26–28 px) – 45% dawało 13 px */
.btn-icon.btn-lg { --size: 56px; }
.btn-icon[aria-pressed="true"], .btn-icon.active, .btn-icon[aria-expanded="true"] { color: var(--text-ok); }
/* Stany wspólne – ekrany nie definiują własnych.
   Wciśnięty (aria-pressed) albo rozwinięty (aria-expanded) z akcentem: .btn-on-pink / .btn-on-ok zmieniają kolor napisu i ikony,
   .btn-on-navy wypełnia przycisk granatem (wybór jednej z kilku wartości, przypięcie) */
.btn-neu.btn-on-pink[aria-expanded="true"], .btn-neu.btn-on-ok[aria-expanded="true"] { background-image: var(--surface-pressed); box-shadow: var(--inset-sm), inset 0 0 0 1px var(--edge); }
.btn-on-pink[aria-pressed="true"], .btn-on-pink[aria-expanded="true"] { color: var(--text-pink); }
.btn-on-ok[aria-pressed="true"], .btn-on-ok[aria-expanded="true"] { color: var(--text-ok); }
.btn-on-navy[aria-pressed="true"] { color: var(--on-fill); background: var(--fill-navy); box-shadow: none; }
/* Wyłączony, ale w kolejności Tab (aria-disabled): przycisk dostaje fokus i pokazuje podpowiedź, dlaczego nie działa */
.btn-neu[aria-disabled="true"] { opacity: var(--bs-btn-disabled-opacity); cursor: not-allowed; }
.btn-neu[aria-disabled="true"]:hover { transform: none; }
/* Kłódka w miejscu działania, którego nie wolno wykonać: wklęsła i szara zamiast wyblakłej */
.btn-locked[aria-disabled="true"] { opacity: 1; color: var(--text-muted); box-shadow: var(--inset-sm); }
/* Główny przycisk przy brakach na liście „Wymagane” (aria-disabled): da się go kliknąć i dostaje fokus – klik podświetla braki –
   więc nie jest kontrolką nieaktywną i jego napis musi mieć kontrast 4,5:1 (WCAG 1.4.3). Zamiast przezroczystości (2,5:1) ma
   wygląd wciśniętego, neutralnego przycisku */
.btn-primary[aria-disabled="true"] { --bs-btn-color: var(--text); --bs-btn-hover-color: var(--text); --bs-btn-active-color: var(--text);
  background-image: var(--surface-pressed); box-shadow: var(--inset-sm), inset 0 0 0 1px var(--edge); }

/* ---------- 4. Formularze ---------- */
.form-label { margin-bottom: var(--s-2); font: 800 var(--fs-xs)/1.3 var(--font); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text); }
.form-label .opt { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.form-text { margin-top: var(--s-2); font: 600 var(--fs-xs)/1.4 var(--font); color: var(--text-muted); }
.form-control, .form-select { min-height: var(--h-lg); padding: 0 var(--s-4); border: 1px solid var(--edge); border-radius: var(--r-pill); background-color: transparent; box-shadow: var(--inset-md);
  font: 600 1rem var(--font); color: var(--text); }   /* 16 px – telefon nie przybliża */
textarea.form-control { min-height: 140px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); line-height: var(--lh); }
.form-control::placeholder, ::placeholder { color: var(--text-muted); opacity: 1; font-weight: 500; font-style: italic; }   /* placeholdery zawsze kursywą (makiety) */
.form-control:focus, .form-select:focus { background-color: transparent; color: var(--text); border-color: var(--edge); box-shadow: var(--inset-md); outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }
.form-select { padding-right: var(--s-10); background-position: right var(--s-4) center; }
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid { border: 2px solid var(--text-pink); background-image: none; padding-right: var(--s-4); }
.invalid-feedback { margin-top: var(--s-2); font: 700 var(--fs-sm)/1.4 var(--font); color: var(--text-pink); align-items: flex-start; gap: var(--s-1-5); }
.invalid-feedback.d-flex .icon, .invalid-feedback .icon { width: 15px; height: 15px; margin-top: 1px; flex: none; }
/* Pole w ramce (.exc-field + .exc-input): etykieta wersalikami i wklęsła pigułka, w której obok pola stoją dodatki (ikona, jednostka,
   strzałka listy). Używają go kreatory, panel admina, uczestnicy i strona prowadzenia, dlatego jest w motywie.
   Fokus pokazuje cała ramka obrysem (outline), nie cieniem – cień nie jest rysowany w trybie wymuszonych kolorów systemu */
.exc-field { display: grid; gap: 7px; align-content: start; min-width: 0; }   /* min-width: 0 – pole zwęża się razem z oknem (reflow przy powiększeniu); align-content: start – w rzędzie pól komunikat pod jednym polem nie rozciąga sąsiednich */
.exc-field > label, .exc-blockhead { font: 700 var(--fs-xs) var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.exc-input { position: relative; display: flex; align-items: center; gap: var(--s-2-5); min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pill); box-shadow: var(--inset-md); }
.exc-input input, .exc-input select { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; outline: none; appearance: none; -webkit-appearance: none; font: 600 16px var(--font); color: var(--text); }
.exc-input select { cursor: pointer; padding-right: 22px; }
.exc-input input[type=number] { -moz-appearance: textfield; }
.exc-input input::-webkit-inner-spin-button, .exc-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.exc-input:focus-within { outline: var(--focus-w) solid var(--focus); }
.form-control-line { border: 0; background-image: linear-gradient(var(--edge), var(--edge)); background-size: calc(100% - 48px) 2px; background-position: center bottom; background-repeat: no-repeat; }
/* pole z ikoną w środku i przyciskiem (np. pokaż hasło) */
.form-icon { position: relative; }
.form-icon > .icon { position: absolute; left: var(--s-4); top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; z-index: var(--z-active); }
.form-icon > .form-control { padding-left: 46px; }
.form-icon > .btn-icon { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); --size: 38px; z-index: var(--z-active); }
.form-icon > .btn-icon:hover { transform: translateY(-50%) scale(1.03); }
.form-icon:has(> .btn-icon) > .form-control { padding-right: 52px; }
/* pola wyboru i przełącznik */
.form-check { min-height: var(--target-min); display: flex; align-items: flex-start; gap: var(--s-3); padding-left: 0; }
.form-check-input { flex: none; float: none; margin: 1px 0 0 !important; width: 22px; height: 22px; border: 1px solid var(--edge); box-shadow: var(--inset-sm); background-color: #eeeef3; cursor: pointer; }
.form-check-input[type="checkbox"] { border-radius: 7px; }
.form-check-input:checked { background-color: var(--bs-success); border-color: var(--bs-success); box-shadow: none; }
.form-check-input:focus { box-shadow: var(--inset-sm); border-color: var(--edge); }
.form-check-input:checked:focus { box-shadow: none; border-color: var(--bs-success); }   /* zaznaczony wygląda tak samo z fokusem i bez (fokus pokazuje :focus-visible) */
.form-check-input:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }
.form-check-label { font: 600 var(--fs-md)/1.35 var(--font); color: var(--text); cursor: pointer; }
.form-switch { padding-left: 0; }
.form-switch .form-check-input { width: 48px; height: 28px; margin: 0 !important; border-radius: var(--r-pill); }
.form-switch .form-check-input:checked { background-color: var(--bs-success); }

/* ---------- 5. Przełącznik segmentowy: .btn-group.seg + .btn-check (natywne radia) ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 22px; box-shadow: var(--inset-sm); max-width: 100%; }
.seg > .btn { --bs-btn-color: var(--text-muted); --bs-btn-hover-color: var(--text); --bs-btn-border-radius: var(--r-pill) !important; min-height: 32px; min-width: 32px; padding: 0 var(--s-4); background: none; box-shadow: none; border-radius: var(--r-pill) !important; margin: 0 !important; }
.seg > .btn { flex: 0 0 auto; white-space: nowrap; }  /* btn-group daje flex: 1 1 auto – teksty nachodziły na siebie przy braku miejsca */
.seg > .btn:hover { transform: none; }
.seg > .btn-check:checked + .btn, .seg > .btn.active { color: var(--text); font-weight: 800; background-image: var(--surface-btn); box-shadow: var(--raised-sm), inset 0 0 0 1px var(--edge); }
.seg > .btn-check:focus-visible + .btn { outline: var(--focus-w) solid var(--focus); outline-offset: 1px; }
.seg-block { display: flex; } .seg-block > .btn { flex: 1; }
.seg-lang { flex-wrap: nowrap; flex: none; }  /* PL/EN nigdy nie łamie się w pionie */
.seg-lang > .btn { min-height: 28px; padding: 0 var(--s-2); font: 700 var(--fs-xs) var(--mono); }

/* ---------- 6. Plakietki (.badge) ---------- */
.badge { --bs-badge-padding-x: 12px; --bs-badge-padding-y: 0; --bs-badge-font-size: var(--fs-xs); --bs-badge-font-weight: 800; --bs-badge-border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1-5); min-height: 26px; letter-spacing: .04em; }
.badge .icon { width: 13px; height: 13px; }
.badge-fixed { width: 120px; }
.badge-todo { color: var(--text-muted); background: none; box-shadow: var(--inset-sm); }
.badge-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.text-bg-info, .text-bg-warning, .text-bg-primary, .text-bg-danger, .text-bg-success, .text-bg-secondary, .text-bg-dark { color: #fff !important; }  /* Bootstrap daje czarny na info/warning – u nas tła są ciemne */
.text-bg-primary { background-image: var(--fill-primary) !important; } .text-bg-danger { background-image: var(--fill-danger) !important; } .text-bg-success { background-image: var(--fill-ok) !important; }
/* chip = informacja (wklęsły) */
.chip { display: inline-flex; align-items: center; gap: var(--s-1-5); min-height: 30px; padding: 0 var(--s-3); border-radius: var(--r-pill); box-shadow: var(--inset-sm); font: 700 var(--fs-sm) var(--font); color: var(--text); white-space: nowrap; }
.chip .icon { width: 15px; height: 15px; }
.chip-sm { min-height: 24px; font-size: var(--fs-xs); padding: 0 var(--s-2-5); }
/* stan „źle” (np. usunięte ćwiczenie w module) – ten sam różowy co inne oznaczenia błędu, ikona w kolorze napisu */
.chip-bad { color: var(--text-pink); }
.btn.chip { --bs-btn-border-radius: var(--r-pill); min-height: 30px; padding: 0 var(--s-3); background: none; box-shadow: var(--inset-sm); }
.btn.chip[aria-pressed="true"], .btn.chip.active { background-image: var(--surface-btn); box-shadow: var(--raised-sm), inset 0 0 0 1px var(--edge); color: var(--text); }
.chip .count { min-width: 20px; padding: 0 var(--s-1-5); border-radius: var(--r-pill); background: var(--fill-navy); color: #fff; font-size: var(--fs-xs); text-align: center; }

/* ---------- 7. Okno (.modal), menu (.dropdown), toast, alert ---------- */
.modal { --bs-modal-bg: #eeeef3; --bs-modal-border-width: 0; --bs-modal-border-radius: var(--r-lg); --bs-modal-box-shadow: var(--modal); --bs-modal-header-border-width: 0; --bs-modal-footer-border-color: rgba(124, 123, 160, .3);
  --bs-modal-padding: var(--s-5); --bs-modal-header-padding: var(--s-5) var(--s-5) var(--s-3); --bs-modal-title-line-height: 1.25; }
.modal-content { background-image: var(--surface); }
.modal-backdrop { --bs-backdrop-bg: #2a285a; --bs-backdrop-opacity: .45; }
.modal-header { position: relative; gap: var(--s-3); }
/* Kreska pod nagłówkiem okna (kreatory, podglądy, okna informacyjne) – na szerokość treści, nie przez całe okno (makieta) */
.modal-header::after { content: ""; position: absolute; right: var(--s-5); bottom: 0; left: var(--s-5); height: 1px; background: var(--line); }
/* Okna zawsze przy górze ekranu – wyśrodkowane w pionie pojawiały się na różnej wysokości zależnie od ilości treści */
.modal-dialog-centered { align-items: flex-start; }
.modal-title { font: 800 var(--fs-xl)/1.25 var(--font); color: var(--text); }
.modal-sub { margin: 2px 0 0; font: 600 var(--fs-sm) var(--font); color: var(--text-muted); }
.modal-header .btn-icon { margin-left: auto; }
.modal-footer { gap: var(--s-3); }
@media (max-width: 575.98px) { .modal-fullscreen-sm-down .modal-footer { position: sticky; bottom: 0; background: #eeeef3; } .modal-fullscreen-sm-down .modal-footer > .btn { flex: 1; } }
.dropdown-menu { --bs-dropdown-bg: #eeeef3; --bs-dropdown-border-width: 0; --bs-dropdown-border-radius: var(--r-md); --bs-dropdown-box-shadow: var(--raised-lg); --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-bg: #e3e3e9; --bs-dropdown-link-active-bg: var(--fill-navy); --bs-dropdown-item-padding-y: .5rem; --bs-dropdown-font-size: var(--fs-sm); background-image: var(--surface); box-shadow: var(--raised-lg); padding: var(--s-2); }
.dropdown-item { border-radius: var(--r-xs); font-weight: 700; display: flex; align-items: center; gap: var(--s-2); min-height: 36px; }
/* Powiadomienie: sukces na granacie (--fill-navy, biały tekst 7,6 : 1), błąd na różu (.toast-error, --fill-danger 5,1–5,6 : 1).
   Biała obwódka oddziela je od granatowych kart i przycisków pod spodem; rodzaj mówi też ikona (✓ / !), nie sam kolor */
.toast { --bs-toast-bg: var(--fill-navy); --bs-toast-color: #fff; --bs-toast-border-width: 0; --bs-toast-border-radius: var(--r-pill); --bs-toast-box-shadow: var(--float); --bs-toast-font-size: var(--fs-sm); --bs-toast-max-width: calc(100vw - 32px); width: auto; font-weight: 600; }
.toast .toast-body { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2-5) 18px; }
.toast .toast-body > .icon { flex: none; width: 18px; height: 18px; }
.toast.toast-error { --bs-toast-bg: #c8306a; background-image: var(--fill-danger); }
.app-toasts .toast { box-shadow: 0 0 0 2px #fff, var(--float); }
/* Odnośnik w powiadomieniu (np. „pokaż” przy skopiowanym ćwiczeniu) – kolor tekstu powiadomienia; domyślny kolor linku
   (granat) zlewał się z granatowym tłem */
.toast .toast-body .toast-action { flex: none; color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.alert { --bs-alert-border-width: 2px; --bs-alert-border-radius: var(--r-md); --bs-alert-padding-x: var(--s-4); --bs-alert-padding-y: var(--s-3); --bs-alert-bg: transparent; --bs-alert-color: var(--text);
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; box-shadow: var(--inset-sm); font: 600 var(--fs-sm)/1.45 var(--font); }
.alert > .icon { width: 18px; height: 18px; color: var(--bs-alert-border-color); }
.alert b, .alert strong { color: var(--bs-alert-link-color, inherit); }
.alert-danger { --bs-alert-border-color: var(--text-pink); --bs-alert-link-color: var(--text-pink); }
.alert-success { --bs-alert-border-color: var(--text-ok); --bs-alert-link-color: var(--text-ok); }
.alert-info { --bs-alert-border-color: var(--c-navy); --bs-alert-link-color: var(--text); }
.alert-warning { --bs-alert-border-color: #8a6100; --bs-alert-link-color: #8a6100; }

/* ---------- 8. Pasek postępu, tabela, ścieżka, lista ---------- */
.progress { --bs-progress-height: 8px; --bs-progress-bg: transparent; --bs-progress-border-radius: 8px; --bs-progress-bar-bg: var(--c-green); box-shadow: var(--inset-sm); }
.progress-bar { box-shadow: inset 0 0 0 1px var(--text-ok); border-radius: inherit; }   /* jasna zieleń marki z ciemnym obrysem (kontrast 3 : 1 daje obrys) */
.progress-label { display: flex; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-1-5); font: 600 var(--fs-xs) var(--font); color: var(--text-muted); }
.progress-label b { color: var(--text); font-weight: 800; }
.table-responsive { border-radius: var(--r-md); box-shadow: var(--inset-md); padding: var(--s-1-5) var(--s-2-5) var(--s-2); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: rgba(124, 123, 160, .25); --bs-table-striped-bg: rgba(74, 71, 143, .04); --bs-table-hover-bg: rgba(74, 71, 143, .06);
  margin: 0; font: 600 var(--fs-sm) var(--font); font-variant-numeric: tabular-nums; }
.table > :not(caption) > * > * { padding: var(--s-2-5) var(--s-3); vertical-align: middle; }
/* Nagłówek to jedna belka: gradient i cień ma wiersz nagłówka, komórki są przezroczyste – inaczej każda kolumna miałaby własny gradient */
.table thead { position: sticky; top: 0; z-index: var(--z-raised); }
.table thead tr { background: #eeeef3; background-image: var(--surface-btn); box-shadow: var(--raised-sm); border-radius: var(--r-xs); }
.table thead th { background: none; box-shadow: none; border-bottom: 0; font: 800 var(--fs-xs) var(--font); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text); white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 0; }
/* Nagłówek kolumny z linkiem sortowania (UI/sort_header) */
.sort-link { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 24px; color: inherit; text-decoration: none; }   /* cel ≥ 24 px (WCAG 2.5.8) */
.sort-link .icon { flex: none; width: 13px; height: 13px; opacity: .55; }
.sort-link.is-sorted .icon, .sort-link:hover .icon { opacity: 1; }
.sort-link:hover { color: var(--text-pink); }
/* Tabela przewijana w pionie w polu o ograniczonej wysokości (.table-scroll na .table-responsive): bez odstępu nad przyklejonym
   nagłówkiem i bez zaokrąglonych rogów belki – inaczej przewijane wiersze prześwitują nad nagłówkiem i w jego rogach */
.table-scroll { overflow-y: auto; padding-top: 0; }
.table-scroll .table thead tr { border-radius: 0; }
/* Tabela jako lista kart na wąskim ekranie: wiersz to karta, a nazwa kolumny z data-label stoi przed wartością – zamiast przewijania
   w poziomie. .table-stack na tabeli: poniżej 1200 px (tabele o wielu kolumnach); .table-stack-md: poniżej 768 px (do pięciu kolumn).
   Oba warianty mają te same reguły – zmieniając jeden blok, zmień drugi */
@media (max-width: 1199.98px) {
  .table-responsive:has(> .table-stack) { padding: 0; box-shadow: none; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* nagłówki zostają dla czytnika i sortowania z klawiatury */
  .table-stack thead:focus-within { position: static; width: auto; height: auto; clip: auto; }   /* fokus na linku sortowania – nagłówki widoczne */
  .table-stack thead:focus-within tr { display: flex; flex-wrap: wrap; gap: var(--s-1-5); }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td, .table-stack th[scope="row"] { display: block; width: 100%; }
  .table-stack tbody { display: grid; gap: var(--s-3); }
  .table-stack tbody tr { padding: var(--s-3); border-radius: var(--r-md); box-shadow: var(--inset-sm); }
  .table-stack > :not(caption) > * > td, .table-stack > :not(caption) > * > th[scope="row"] { padding: var(--s-1-5) 0; white-space: normal; border-bottom: 1px solid var(--line); }
  .table-stack > :not(caption) > * > td[data-label] { display: grid; grid-template-columns: minmax(7.5rem, 35%) minmax(0, 1fr); gap: var(--s-2); align-items: center; }
  .table-stack tbody tr > :last-child { border-bottom: 0; }
  .table-stack td[data-label]::before { content: attr(data-label); font: 800 var(--fs-xs) var(--font); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }
}
@media (max-width: 767.98px) {
  .table-responsive:has(> .table-stack-md) { padding: 0; box-shadow: none; }
  .table-stack-md thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* nagłówki zostają dla czytnika i sortowania z klawiatury */
  .table-stack-md thead:focus-within { position: static; width: auto; height: auto; clip: auto; }   /* fokus na linku sortowania – nagłówki widoczne */
  .table-stack-md thead:focus-within tr { display: flex; flex-wrap: wrap; gap: var(--s-1-5); }
  .table-stack-md, .table-stack-md tbody, .table-stack-md tr, .table-stack-md td, .table-stack-md th[scope="row"] { display: block; width: 100%; }
  .table-stack-md tbody { display: grid; gap: var(--s-3); }
  .table-stack-md tbody tr { padding: var(--s-3); border-radius: var(--r-md); box-shadow: var(--inset-sm); }
  .table-stack-md > :not(caption) > * > td, .table-stack-md > :not(caption) > * > th[scope="row"] { padding: var(--s-1-5) 0; white-space: normal; border-bottom: 1px solid var(--line); }
  .table-stack-md > :not(caption) > * > td[data-label] { display: grid; grid-template-columns: minmax(7.5rem, 35%) minmax(0, 1fr); gap: var(--s-2); align-items: center; }
  .table-stack-md tbody tr > :last-child { border-bottom: 0; }
  .table-stack-md td[data-label]::before { content: attr(data-label); font: 800 var(--fs-xs) var(--font); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }
}
/* Stronicowanie listy (Nav/pagination) */
.list-pages .pagination { --bs-pagination-color: var(--text); --bs-pagination-bg: transparent; --bs-pagination-border-width: 0; --bs-pagination-hover-color: var(--text-pink); --bs-pagination-hover-bg: transparent;
  --bs-pagination-focus-color: var(--text); --bs-pagination-focus-bg: transparent; --bs-pagination-focus-box-shadow: none; --bs-pagination-active-color: #fff; --bs-pagination-active-bg: var(--fill-navy);
  --bs-pagination-disabled-color: var(--text-muted); --bs-pagination-disabled-bg: transparent; --bs-pagination-font-size: var(--fs-sm); gap: var(--s-1-5); }
.list-pages .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; border-radius: var(--r-pill) !important; font-weight: 700; box-shadow: var(--raised-sm); }
.list-pages .page-item.active .page-link, .list-pages .page-item.disabled .page-link { box-shadow: none; }
.list-pages .page-link:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }
.breadcrumb { --bs-breadcrumb-margin-bottom: 0; --bs-breadcrumb-font-size: var(--fs-xs); --bs-breadcrumb-divider-color: var(--text-muted); --bs-breadcrumb-item-active-color: var(--text); --bs-breadcrumb-divider: "›"; font-weight: 600; }
.breadcrumb { align-items: center; line-height: 24px; }
.breadcrumb a { display: inline-block; color: var(--text-muted); }   /* cel ≥ 24 px (WCAG 2.5.8) przez wysokość linii – wszystkie okruszki na jednej wysokości */ .breadcrumb a:hover { color: var(--text-pink); }
.breadcrumb .active { font-weight: 800; }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-width: 0; --bs-list-group-color: var(--text); gap: var(--s-3); }

/* ---------- 9. Wysoki kontrast – zmienne Bootstrapa idą za tokenami ---------- */
:root.hc .btn-primary { --bs-btn-bg: #2c2a5e; } :root.hc .btn-danger { --bs-btn-bg: #8e1a47; } :root.hc .btn-success { --bs-btn-bg: #1f5200; }
:root.hc { --bs-body-color: #2c2a5e; --bs-secondary-color: #2c2a5e; --bs-border-color: #2c2a5e; --bs-primary: #2c2a5e; --bs-danger: #8e1a47; --bs-success: #1f5200;
  --bs-secondary-rgb: 44, 42, 94; }   /* .link-secondary (stopka) bierze kolor z tej zmiennej, nie z --bs-secondary-color */
:root.hc .modal, :root.hc .dropdown-menu { --bs-modal-bg: #fff; --bs-dropdown-bg: #fff; }
:root.hc .form-check-input { background-color: #fff; }
@media (prefers-reduced-motion: reduce) { .badge-live::before { animation: none; } .btn, .card { transition: none; } }

/* Paski przewijania w stylu platformy: wąski „wklęsły” tor i wypukły uchwyt w kolorze krawędzi (≥ 3:1 do tła).
   Chromium i Safari – ::-webkit-scrollbar; Firefox – scrollbar-color (Chromium 121+ z nim ignorowałby wygląd poniżej). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { border-radius: var(--r-pill); background: transparent; box-shadow: var(--inset-sm); }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: var(--r-pill); background: var(--edge) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--text); }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
}