/*
 * [2026-09-20] Wspólne komponenty Bootstrapa 5.3.8 - ładowane przez
 * `home_wrapper.php` I `apppanel_wrapper.php`.
 *
 * DLACZEGO OSOBNY PLIK: te komponenty siedzą w markupie, który jest WSPÓLNY
 * dla panelu i stron publicznych (np. `views/app/partials/nav_menu.php` -
 * to samo menu offcanvas otwiera hamburger w szynie panelu i w stopce strony
 * głównej). `app-panel.css` ładuje tylko panel, `home.css` tylko strony
 * publiczne - komponent wrzucony do któregokolwiek z nich działałby w połowie
 * miejsc. `custom.css` odpada (Bootstrap 4, patrz nagłówek `app-panel.css`).
 *
 * Plik jest też miejscem na WIRING biblioteki `transitions.css` do klas
 * Bootstrapa: snippety z `.claude/skills/transitions-dev` wklejamy do
 * `transitions.css` BEZ ZMIAN (zasada skilla), a stan (`.is-shown`,
 * `.is-open`) dowiązujemy tutaj do tego, co Bootstrap sam ustawia na
 * elemencie (`.offcanvas.show`, `.dropdown-menu.show`). Dzięki temu nie ma
 * ani modyfikacji snippetu, ani JS-a do pilnowania stanu.
 */

/* ------------------------------------------------ pozycja menu (linki) */
/* JEDEN komponent pozycji menu dla wszystkich list linków na BS5: menu
   offcanvas (hamburger w panelu i w stopce strony głównej) oraz dropdown
   użytkownika w szynie panelu. Wcześniej pozycje offcanvasa były zlepkiem
   utilities (`d-flex align-items-center gap-3 p-2 rounded-3 text-body
   text-decoration-none`) BEZ ŻADNEJ reguły hover - nie reagowały na kursor,
   bo `.text-body` nie ma stanu, a `.dropdown-item` (który hover ma) nie był
   tam użyty. */

.menu-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .5rem .75rem;
  border-radius: var(--bs-border-radius-lg);
  color: var(--bs-body-color);
  text-decoration: none;
  background-color: transparent;
  transition:
    background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease),
    color var(--duration-quick, 150ms) var(--ease-smooth-out, ease);
}

.menu-link > i,
.menu-link > svg {
  flex: 0 0 auto;
  opacity: .5;
  transition:
    opacity var(--duration-quick, 150ms) var(--ease-smooth-out, ease),
    transform var(--duration-fast, 250ms) var(--ease-smooth-out, ease);
}

/* [2026-09-24] Kropka „masz nieprzeczytane" w menu pod awatarem - Marcin: *„czerwone
   powiadomienie w notyfikacjach nie jest okrągłe i trochę za duże"*. Było to `.badge
   .rounded-pill` z ` ` w środku, czyli PIGUŁKA: szerokość brała się z odstępów badge'a
   i spacji, więc wychodził owal ~18×14 px. Kropka nie jest odznaką z treścią - ma stały
   rozmiar i jest okrągła, a tego nie da się złożyć z utilities Bootstrapa (nie ma
   `w-8px`/`h-8px`). Do prawej krawędzi dosuwa `ms-auto` w markupie. */
.menu-dot {
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: var(--bs-danger);
}

.menu-link:hover,
.menu-link:focus-visible,
.menu-link.active,
.menu-link[aria-current] {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-emphasis-color);
}

/* Ikona dojeżdża o włos w stronę etykiety - ten sam gest co "Learn more
   hover" (24) w `transitions.css`, tylko bez strzałki do rozłożenia. */
.menu-link:hover > i,
.menu-link:hover > svg,
.menu-link:focus-visible > i,
.menu-link:focus-visible > svg,
.menu-link.active > i,
.menu-link.active > svg,
.menu-link[aria-current] > i,
.menu-link[aria-current] > svg {
  opacity: 1;
  transform: translateX(2px);
}

.menu-link:active {
  background-color: var(--bs-tertiary-bg);
}

@media (prefers-reduced-motion: reduce) {
  .menu-link,
  .menu-link > i,
  .menu-link > svg {
    transition: none !important;
  }
  .menu-link:hover > i,
  .menu-link:hover > svg {
    transform: none;
  }
}

/* ------------------------------------------------- dropdowny (Bootstrap) */
/* Pozycje dropdownów, których NIE da się przepisać na `.menu-link` (nagłówek
   konta w szynie to dwa wiersze, akcje w Resources i w wątku to `<button>`
   z własnym układem), dostają ten sam kolor podświetlenia przez zmienne
   Bootstrapa - jedno źródło prawdy zamiast trzech różnych hoverów. */

.dropdown-menu {
  --bs-dropdown-link-hover-bg: var(--bs-secondary-bg);
  --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
  --bs-dropdown-link-active-bg: var(--bs-secondary-bg);
  --bs-dropdown-link-active-color: var(--bs-emphasis-color);
}

.dropdown-item {
  transition:
    background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease),
    color var(--duration-quick, 150ms) var(--ease-smooth-out, ease);
}

@media (prefers-reduced-motion: reduce) {
  .dropdown-item { transition: none !important; }
}

/* [2026-09-22] Kaskada pozycji menu offcanvas ("Texts reveal" z
   `.t-stagger-line--n`) usunięta na prośbę Marcina - menu wjeżdża w całości.
   Sam `.t-stagger-line` zostaje w `transitions.css` (strona główna). */

/* ------------------------------ wiring: Panel reveal (07) na fragmentach */
/* Kolumny panelu wymieniane AJAX-em (`app-panel.js`: wątek, lista, Resources)
   podmieniają `innerHTML` - bez tego nowa treść pojawia się skokiem. Ruch
   jest skrócony względem strony głównej (tam panel wjeżdża o 100px z dołu,
   tutaj chodzi o samą wymianę treści w miejscu). */

.panel-fragment.t-panel-slide {
  --panel-translate-y: 8px;
  --panel-open-dur: 250ms;
  --panel-close-dur: 0ms;
}

/* ----------------------------------------------- ikonki flag/systemów/przeglądarek */
/* [2026-09-21] `.icon-favicon` żyło dotąd wyłącznie w `custom.css` (linia 201),
   który ładują tylko widoki na Bootstrapie 4. Panel go nie ładuje, więc te same
   obrazki - flagi krajów, ikony systemów i przeglądarek w sekcji "Activity log" -
   wchodziły w pełnym rozmiarze pliku SVG.

   Wartości 1:1 z `custom.css`, żeby stare i nowe widoki wyglądały tak samo. Nie
   przenosimy ich stamtąd: `custom.css` obsługuje kilkadziesiąt widoków BS4, a
   duplikat w dwóch arkuszach jest tu tańszy niż ruszanie tamtego pliku. */

.icon-favicon {
  width: .95rem;
  height: auto;
}

.icon-favicon-small {
  width: .75rem;
  height: auto;
}

/* [2026-09-23] Awatary stron publicznych (pobieranie `/t/{url}`, profil `@nick`).
   Wartości 1:1 z `app-panel.css` - ten sam element ma wyglądać tak samo w panelu
   i poza nim. Panel ładuje oba arkusze, więc ma te reguły dwa razy; nie ruszam
   tamtej kopii, żeby nie przestawiać kolejności/specyficzności w działającym
   panelu. */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--bs-quaternary-bg);
  color: var(--bs-body-color);
  font-weight: 300;
  font-size: .75em;
  object-fit: cover;
}

.avatar-jumbo {
  width: 66px;
  height: 66px;
  min-width: 66px;
  font-size: 1.4em;
}

.avatar-lg {
  width: 44px;
  height: 44px;
  min-width: 44px;
  font-size: 1em;
}

.avatar-sm {
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: .9em;
}

/* [2026-09-23] Przełącznik z podpisem stanu - wzorzec ze strony marketingowej
   (`index/send_options.php`, Marcin: "te przełączniki są super, czy moglibyśmy
   używać takiej metody w panelu"): przełącznik po LEWEJ, obok etykieta, a pod
   nią zdanie opisujące BIEŻĄCY stan, które po przełączeniu podmienia się
   animacją (`.t-text-swap` z `transitions.css`, obsługa w `app-panel.js`).
   Zastępuje wiersz `.settings-row` tam, gdzie kontrolką jest sam przełącznik -
   opis przestaje być stałą pomocą, a zaczyna mówić, co jest włączone. */

.settings-switch {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .875rem 0;
}

.settings-switch + .settings-switch {
  border-top: var(--bs-border-width) solid var(--bs-border-color-translucent);
}

/* Wygląd toru i kciuka jak w ilustracji na stronie głównej
   (`.home-option__toggle`): wyłączony tor odcina się od tła włosowym obrysem,
   włączony jest pełny. Kciuk to TŁO (gradient), nie pseudoelement - `input`
   jest elementem zastępowanym i `::after` na nim się nie renderuje; dzięki
   gradientowi kolory jadą ze zmiennych motywu, bez dodatkowego markupu. */
.settings-switch__input.form-check-input {
  --settings-switch-thumb: var(--bs-secondary-color);
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  margin: .15rem 0 0;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background-color: var(--bs-tertiary-bg);
  background-image: radial-gradient(circle 9px at center, var(--settings-switch-thumb) 99%, rgba(0, 0, 0, 0) 100%);
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-position: left center;
  box-shadow: inset 0 0 0 1px var(--bs-border-color);
  cursor: pointer;
  transition:
    background-color var(--duration-quick, .15s) var(--ease-out, ease),
    background-position var(--duration-medium, .25s) var(--ease-smooth-out, ease);
}

.settings-switch__input.form-check-input:checked {
  --settings-switch-thumb: var(--bs-body-bg);
  background-color: var(--bs-emphasis-color);
  background-position: right center;
  box-shadow: none;
}

.settings-switch__input.form-check-input:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.settings-switch__input.form-check-input:disabled {
  opacity: .5;
  cursor: default;
}

.settings-switch__body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.settings-switch__label {
  color: var(--bs-emphasis-color);
  cursor: pointer;
}

.settings-switch__text {
  color: var(--bs-secondary-color);
  font-size: .875rem;
}

@media (prefers-reduced-motion: reduce) {
  .settings-switch__input.form-check-input {
    transition: none;
  }
}

/* [2026-09-24] Wybór wyglądu (Light / Dark / System) - trzy kafelki z miniaturką panelu.
   Miniaturki to GOTOWE SVG od Marcina (`assets/img/theme-preview/`), wcześniej rysowałem je
   prostokątami w CSS - jego wersja jest jego projektem, więc nie odtwarzamy jej regułami.

   Wstawiane jako `<img>`, nie inline: każdy z trzech plików ma w środku własny `<style>`
   z klasami `.a`, `.b`, `.c`… - wklejone do strony NADPISAŁYBY SIĘ NAWZAJEM (style w SVG
   są globalne dla dokumentu). Jako obrazki mają własny zasięg i przy okazji jedno żądanie
   mniej po pierwszym wejściu (cache po `?v=`).

   Kafelek nie maluje własnego tła ani zaokrągleń - to jest w SVG; z zewnątrz dokładamy
   tylko obwódkę (żeby jasna miniaturka nie zlewała się z jasnym modalem) i stan wyboru. */
.theme-choice {
  display: grid;
  /* Kafelki nie rozciągają się na całą szerokość modala - przy trzech opcjach wyglądałyby
     jak banery. */
  grid-template-columns: repeat(3, minmax(0, 11rem));
  gap: .75rem;
}

.theme-choice__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin: 0;
  cursor: pointer;
}

.theme-choice__preview {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--bs-border-radius-lg) + 2px);
  box-shadow: 0 0 0 var(--bs-border-width) var(--bs-border-color);
  transition: box-shadow var(--duration-quick, 150ms) var(--ease-smooth-out, ease);
}

.theme-choice__label {
  font-size: .875rem;
  color: var(--bs-secondary-color);
  transition: color var(--duration-quick, 150ms) var(--ease-smooth-out, ease);
}

.theme-choice__item:hover .theme-choice__preview {
  box-shadow: 0 0 0 var(--bs-border-width) var(--bs-secondary-color);
}

/* Wybrany: obwódka w kolorze akcentu, grubsza niż zwykła - tak jak w aplikacji, z której
   wzięty jest wzór. */
.theme-choice__item.is-active .theme-choice__preview {
  box-shadow: 0 0 0 2px var(--bs-primary);
}

.theme-choice__item.is-active .theme-choice__label {
  color: var(--bs-primary);
}

.theme-choice__item input:focus-visible + .theme-choice__preview {
  outline: 2px solid var(--bs-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .theme-choice__preview,
  .theme-choice__label {
    transition: none;
  }
}


.team-delegate-access-wrapper {
  margin: .75rem;
  border-radius: .5rem;
  z-index: 999999999;
  position: absolute;
}