/* Akcent UI "Universal Cartographics" (pomarańcz). Jedno źródło prawdy:
   używany w GalaxyMapPage.razor.css (obramowania, tytuły, legenda) ORAZ czytany
   przez wwwroot/js/galaxyMap.js do koloru zaznaczenia (pierścień/fala/nazwa).
   --uc-accent: kolor hex (dla JS i prostych użyć); --uc-accent-rgb: triplet do rgba(). */
:root {
    --uc-accent: #ff7b1a;
    --uc-accent-rgb: 255, 123, 26;
    --uc-surface: rgba(8, 11, 20, 0.82);   /* ciemne, półprzezroczyste tło nakładek HUD */

    --uc-menu-btn-size: 32px;              /* bok kwadratu menu bocznego (jedno źródło prawdy) */

    /* zielony akcent akcji (przyciski NEW/UPDATE/DELETE — jak zielone ikony w grze) */
    --uc-success: #2fae5f;
    --uc-success-rgb: 47, 174, 95;

    /* Re-theme Bootstrapa: akcent UC jako kolor `primary`. Dzięki temu .text-primary,
       .btn-primary, .border, linki itp. — także przyszłe komponenty menu — biorą
       pomarańcz UC bez dodatkowego CSS. Ciemne powierzchnie daje data-bs-theme="dark"
       na .galaxy-layout (patrz GalaxyMapPage.razor + .razor.css). */
    --bs-primary: var(--uc-accent);
    --bs-primary-rgb: var(--uc-accent-rgb);
    --bs-link-color: var(--uc-accent);
    --bs-link-color-rgb: var(--uc-accent-rgb);
    --bs-link-hover-color: #ff9347;
    --bs-font-monospace: 'Consolas', monospace;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

/* .btn-primary przez zmienne komponentu (Bootstrap 5.3 wpisuje warianty literalnie,
   więc sam --bs-primary nie wystarcza) — przyszłe przyciski menu w kolorze akcentu UC. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--uc-accent);
    --bs-btn-border-color: var(--uc-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ff9347;
    --bs-btn-hover-border-color: #ff9347;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e56a10;
    --bs-btn-active-border-color: #e56a10;
    /* stan disabled: zachowaj akcent UC (Bootstrap domyślnie wraca do niebieskiego) — tylko
       przygaszony, jak nieaktywna pozycja menu; samo dim/cursor obsługuje reguła .btn:disabled */
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--uc-accent);
    --bs-btn-disabled-border-color: var(--uc-accent);
}

/* .btn-outline-primary — ten sam zabieg co .btn-primary (Bootstrap 5.3 wpisuje też
   warianty OUTLINE literalnie, więc sam --bs-primary nie wystarcza i przycisk wracał do
   domyślnego niebieskiego). Obramowanie + tekst w akcencie UC, hover/aktywne wypełnia
   akcentem z ciemnym tekstem — jak nieaktywny vs aktywny przycisk menu. */
.btn-outline-primary {
    --bs-btn-color: var(--uc-accent);
    --bs-btn-border-color: var(--uc-accent);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: #080b14;
    --bs-btn-hover-bg: var(--uc-accent);
    --bs-btn-hover-border-color: var(--uc-accent);
    --bs-btn-active-color: #080b14;
    --bs-btn-active-bg: var(--uc-accent);
    --bs-btn-active-border-color: var(--uc-accent);
    --bs-btn-disabled-color: var(--uc-accent);
    --bs-btn-disabled-border-color: var(--uc-accent);
}

/* Pierścień fokusa/zaznaczenia — wspólny dla wszystkich aktywnie zaznaczalnych elementów
   (przyciski, pola, toggle). Zamiast domyślnego biało-niebieskiego: jaśniejsza wersja
   akcentu UC — blady pomarańcz w środku + półprzezroczysty akcent na zewnątrz (miękka
   pomarańczowa poświata). */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #ffd9b3, 0 0 0 0.25rem rgba(var(--uc-accent-rgb), 0.55);
}

/* Przyciski w stanie aktywnym/zaznaczonym pokazują pierścień przez reguły :focus-visible
   o WYŻSZEJ swoistości (np. .btn:active:focus-visible), które biorą kolor ze zmiennej
   --bs-btn-focus-box-shadow (domyślnie niebieska, ustawiana per wariant). Nadpisanie tej
   zmiennej na .btn przemalowuje pierścień fokusa na jaśniejszy akcent UC dla KAŻDEGO
   wariantu i stanu — bez walki na swoistość selektorów. */
.btn { --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--uc-accent-rgb), 0.5); }

/* Checkboxy/radia w stylu UC: ostre rogi, akcentowe obramowanie i przezroczyste tło,
   a po zaznaczeniu pełny pomarańcz akcentu (zamiast domyślnego szaro-niebieskiego
   Bootstrapa). Globalnie — login „Zapamiętaj mnie", checkbox „Administrator" itd. */
.form-check-input {
    background-color: transparent;
    border-color: rgba(var(--uc-accent-rgb), 0.65);
    border-radius: 0;
}
.form-check-input:checked {
    background-color: var(--uc-accent);
    border-color: var(--uc-accent);
}

/* Nieaktywny przycisk akcji (.btn) w takiej samej stylistyce jak nieaktywna pozycja
   menu (np. USTAWIENIA, .uc-menu-btn:disabled): przygaszony do 0.4 + kursor „not-allowed".
   Bootstrap domyślnie daje opacity .65 i pointer-events:none (przez co kursor not-allowed
   nie jest widoczny) — przywracamy pointer-events, a hover neutralizujemy (bazowy wygląd). */
.btn:disabled, .btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto;
}
.btn:disabled:hover, .btn.disabled:hover {
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--bs-btn-bg);
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
}

/* ===================================================================
   Globalne dopasowania do motywu UC (akcent pomarańczowy).
   =================================================================== */

/* Przyciski zamknięcia okien („X" w prawym górnym rogu) w kolorze akcentu UC.
   Bootstrap rysuje X jako tło-SVG (czarny/biały przez filter); podmieniamy je na
   MASKĘ wypełnianą `background-color`, więc X przejmuje kolor akcentu i podąża za
   --uc-accent (jedno źródło prawdy). Działa dla .btn-close i .btn-close-white. */
.btn-close {
    background-color: var(--uc-accent);
    background-image: none;
    filter: none !important;   /* nadpisuje .btn-close-white (invert) — kolor daje maska + tło */
    opacity: 0.85;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") center/1em auto no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") center/1em auto no-repeat;
}
.btn-close:hover { opacity: 1; background-color: #ff9347; }
.btn-close:focus { opacity: 1; box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; }

/* Paski przewijania w stylu HUD: cienkie, akcent UC na przezroczystym torze.
   Firefox (scrollbar-*) + WebKit/Chromium/Edge (::-webkit-scrollbar-*). */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--uc-accent-rgb), 0.5) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: rgba(var(--uc-accent-rgb), 0.45);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--uc-accent-rgb), 0.75);
    background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* ── Menu boczne mapy (lewa krawędź) ──
   Globalnie (nie w GalaxyMapPage.razor.css), bo reguła na ikonę SVG działa wtedy
   wprost — scoped CSS Blazora dokleiłby atrybut zakresu, którego SVG wstrzykiwany
   przez MarkupString nie ma, i wymagałby ::deep. Layout/obramowania z Bootstrapa
   (.border-primary, .d-flex…); tu tylko swap kolorów, rozmiary i animacja etykiety. */

/* zakotwiczone od góry, pod nagłówkiem UC (logo+tytuł), nie wyśrodkowane */
.uc-menu { top: 84px; }

/* Przycisk menu: ikona (inline SVG na currentColor) w kolorze akcentu na ciemnym tle HUD;
   na hover SWAP (tło→akcent, ikona→ciemne). Napis jest WEWNĄTRZ przycisku (span .txt) i
   rozwija się na hover, poszerzając przycisk — jeden klikalny element, ikona i napis
   przebarwiają się razem (brak glitcha kolejności malowania).
   width:100% + align-items:stretch kolumny (aside) → wszystkie przyciski dostają szerokość
   NAJSZERSZEGO (jednolita szerokość rozwiniętych). min-width trzyma kwadrat w stanie zwiniętym. */
.uc-menu-btn {
    min-width: var(--uc-menu-btn-size);
    width: 100%;
    height: var(--uc-menu-btn-size);
    color: var(--uc-accent);
    background: var(--uc-surface);
    box-shadow: 0 0 10px rgba(var(--uc-accent-rgb), 0.12);
    overflow: hidden;            /* chowa zwinięty napis (max-width:0) */
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
/* Cela ikony: kwadrat = wnętrze przycisku (stretch wysokości + aspect-ratio), ikona wyśrodkowana. */
.uc-menu-btn-ico {
    align-self: stretch;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}
.uc-menu-btn-ico svg { width: 62%; height: 62%; }

/* Napis w przycisku — zwinięty domyślnie (szerokość 0), rozwijany na hover paska (niżej). */
.uc-menu-btn-txt {
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    transition: max-width .16s ease, opacity .12s ease, padding .16s ease;
}

/* Hover (nie disabled) — wypełnienie akcentem; ikona i napis (currentColor) razem. */
.uc-menu-item:hover .uc-menu-btn:not(:disabled) {
    background: var(--uc-accent);
    color: #080b14;
}
/* Fokus (kursor klawiatury) — BEZ obramowania (zdejmujemy białą ramkę UA przez outline:none)
   i BEZ wypełnienia (fokus ≠ aktywacja). Przycisk NIE zmienia rozmiaru — dostaje tylko glow
   akcentu dokoła ramki (box-shadow; overflow:hidden nie obcina zewnętrznego cienia).
   `:focus` (nie `:focus-visible`) — żeby kursor klawiatury podążał też za kliknięciem MYSZKĄ
   (mysz i klawiatura współgrają: glow siedzi tam, gdzie ostatnio kliknięto/nawigowano). */
.uc-menu-btn:focus {
    outline: none;
    box-shadow: 0 0 9px 2px rgba(var(--uc-accent-rgb), 0.65);
}
/* Ten SAM wskaźnik fokusu (glow zamiast białej ramki UA / ringów Bootstrapa) dla KAŻDEGO
   interaktywnego elementu HUD: pola, przyciski, toggle, dropdown użytkownika, linki, [tabindex].
   Wyjątki mają własne, spójne wskaźniki: wiersze tabeli (.dt-row — pasek+tło) są wyłączone
   przez :not([tabindex="-1"]). !important bije focusowe box-shadow Bootstrapa. */
.app-shell :is(input, select, textarea, button, a[href], [tabindex]:not([tabindex="-1"])):focus {
    outline: none !important;
    box-shadow: 0 0 9px 2px rgba(var(--uc-accent-rgb), 0.65) !important;
}
.uc-menu-item:hover { z-index: 10; }

/* Aktywna pozycja menu — wypełniona akcentem (zaznaczona), jak hover. */
.uc-menu-item-active .uc-menu-btn { background: var(--uc-accent); color: #080b14; }

/* Disabled (np. EDYTUJ bez zaznaczenia) — cały przycisk (ikona + napis) przygaszony,
   BEZ wypełnienia na hover (reguła hover wyklucza :disabled). */
.uc-menu-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── MENU BAR (pasek wielokolumnowy) ─────────────────────────────────────────
   Kontener kolumn MainMenu (menu główne + kolejne submenu). Hover liczy się PER KOLUMNA:
   napisy w przyciskach rozwijają się TYLKO w tej kolumnie (submenu), nad którą jest kursor
   — pozostałe (ślad ścieżki; aktywna pozycja i tak jest podświetlona) zostają zwinięte.
   „Kolumna" = pojedynczy <aside> w DOM. Przerwy MIĘDZY przyciskami należą do <aside>, więc
   aside:hover nie gaśnie w ich obrębie (brak migotania w kolumnie); tylko gap MIĘDZY
   kolumnami jest martwy → przejazd przez niego to płynny crossfade (jedna zwija, druga
   rozwija). :focus-within = klawiaturowy odpowiednik: rozwija kolumnę z fokusem. */

/* Pasek (i całe jego wnętrze — pointer-events DZIEDZICZY) łapie mysz. Bez tego .app-shell
   ma pointer-events:none i tylko same .uc-menu-btn są „klikalne": kursor w PRZERWIE między
   przyciskami przelatuje na scenę → .uc-menu-bar:hover gaśnie → szersze wersje migoczą.
   padding = odsunięcie przycisków od krawędzi kontenera (shell-body / list-view-body mają
   overflow:hidden), żeby GLOW fokusu nie był obcinany — działa i w menu głównym, i w paskach
   akcji okien (jedno miejsce zamiast per-kontener). */
.uc-menu-bar { pointer-events: auto; padding: 0.75rem; }

/* Najechanie myszką LUB fokus klawiatury na KONKRETNEJ kolumnie → rozwiń napisy CAŁEJ
   tej kolumny (też aktywnej i disabled). Przyciski poszerzają się do szerokości
   najszerszego (align-items:stretch aside). :focus-within = klawiaturowy odpowiednik hovera. */
.uc-menu-bar > aside:hover .uc-menu-btn-txt,
.uc-menu-bar > aside:focus-within .uc-menu-btn-txt {
    max-width: 24rem;   /* mieści najdłuższy napis (np. „POBIERZ SYSTEMY W BIEŻĄCEJ POZYCJI") */
    padding-left: 0.5rem;
    padding-right: 1rem;
    opacity: 1;
}

/* Mirror — lustrzane odbicie (infrastruktura pod menu z prawej): kolumny idą w lewo
   (flex-row-reverse na kontenerze), a w przycisku ikona jest z prawej, napis rozwija się
   w lewo (odwrócony kierunek flexa przycisku + padding po drugiej stronie). */
.uc-menu-bar-mirror .uc-menu-btn { flex-direction: row-reverse; }
.uc-menu-bar-mirror > aside:hover .uc-menu-btn-txt,
.uc-menu-bar-mirror > aside:focus-within .uc-menu-btn-txt {
    padding-left: 1rem;
    padding-right: 0.5rem;
}

/* Separator między grupami akcji w pionowej kolumnie menu (np. CRUD | import | odśwież).
   Cienka pozioma linia akcentu UC, szerokości kwadratowego przycisku. */
.uc-menu-sep {
    width: var(--uc-menu-btn-size);
    height: 1px;
    margin: 2px 0;
    background: rgba(var(--uc-accent-rgb), 0.4);
}
/* W pasku separator rozciąga się na szerokość kolumny (auto → align-items:stretch aside),
   więc przy rozwiniętych przyciskach linia idzie przez cały ich szeroki wariant. */
.uc-menu-bar .uc-menu-sep { width: auto; }

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===================================================================
   HUD mapy galaktyki (GalaxyMapPage). Wszystko globalnie tutaj — nie w
   scoped *.razor.css — bo żaden z tych stylów nie potrzebuje izolacji
   per-komponent, a treść wstrzykiwana przez MarkupString (ikony menu)
   działa wtedy bez ::deep. Layout/spacing/komponenty (.card, .badge,
   .border, font-monospace) z Bootstrapa; motyw przez zmienne --bs-* oraz --uc-*
   (ciemne powierzchnie: data-bs-theme="dark" na .galaxy-layout). Tu zostają
   rzeczy, których Bootstrap nie wyraża: poświata, dokładne piksele, spacing.
   =================================================================== */

.galaxy-layout {
    background: #080b14;
    /* obramowania HUD (.border, .border-end, karta) w kolorze akcentu, nie szare domyślne */
    --bs-border-color: rgba(var(--uc-accent-rgb), 0.5);
    --bs-border-color-translucent: rgba(var(--uc-accent-rgb), 0.5);
    --bs-body-color: #cdd6f4;
}

/* tło sceny pod nakładką (niżej w stosie niż .app-shell) */
.galaxy-canvas { z-index: 0; }

/* canvas wstrzykiwany przez Three.js do #galaxy-canvas-container (tło sceny) */
#galaxy-canvas-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ── Nagłówek UC (lewy górny róg) ── */
.uc-header { text-shadow: 0 0 8px rgba(var(--uc-accent-rgb), 0.35); }
.uc-logo { opacity: 0.95; }
.uc-title { line-height: 1.05; }
.uc-title-thin { font-size: 12px; letter-spacing: 3px; color: #ffd9b3; }
.uc-title-bold { font-size: 17px; letter-spacing: 4px; }
.uc-clock { line-height: 1.1; }
.uc-time { font-size: 18px; letter-spacing: 2px; }
.uc-date { font-size: 12px; letter-spacing: 2px; color: #ffc999; }

/* ── Numer wersji (lewy dolny róg) ── */
/* w pełni PONIŻEJ paska sterowania (brak nakładania niezależnie od szerokości okna):
   wersja kończy się ~6px nad dolną krawędzią paska (wersja bottom 8 + ~20 wys. ≈ 28;
   pasek bottom 30). */
.uc-version {
    bottom: 8px;
    left: 16px;
    font-size: 13px;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(var(--uc-accent-rgb), 0.35);
}

/* ── Pasek sterowania (dół, środek) ── */
.controls-bar {
    bottom: 30px;
    max-width: calc(100% - 48px);
    background: var(--uc-surface);
}
.ctl { border-right: 1px solid rgba(var(--uc-accent-rgb), 0.18); }   /* subtelny separator */
.ctl:last-child { border-right: none; }
.ctl-label { font-size: 11px; letter-spacing: 0.5px; color: #cdd6f4; }
/* klawisz = Bootstrap .badge; translucentne tło + drobne wymiary przez zmienne badge */
.uc-key {
    --bs-badge-font-size: 11px;
    --bs-badge-padding-x: 6px;
    --bs-badge-padding-y: 1px;
    letter-spacing: 0.5px;
    background: rgba(var(--uc-accent-rgb), 0.12);
}

/* ── Okno szczegółów = Bootstrap .card; motyw przez zmienne karty ── */
.uc-panel {
    --bs-card-bg: var(--uc-surface);
    --bs-card-border-color: rgba(var(--uc-accent-rgb), 0.5);
    --bs-card-color: #cdd6f4;
    box-shadow: 0 0 10px rgba(var(--uc-accent-rgb), 0.12);
}
/* pozycja/wymiary: top/right 22px (jak nagłówek), dolna krawędź jeden margines NAD
   paskiem sterowania (22 od dołu + ~34 pasek + 22 margines = 78px). */
.details-panel {
    top: 22px;
    right: 22px;
    bottom: 78px;
    width: 240px;
    font-size: 13px;
}
.details-panel .card-body { overflow-y: auto; padding: 14px 16px; }
.details-panel h3 {
    text-shadow: 0 0 8px rgba(var(--uc-accent-rgb), 0.35);
    margin: 0 0 12px;
    font-size: 15px;
    word-break: break-word;
}
.details-panel p { margin: 4px 0; }
.star-line { font-size: 14px; }
.star-swatch { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.star-desc { color: #8b9bc4; font-size: 12px; margin-bottom: 10px !important; }

/* ===================================================================
   POWŁOKA APLIKACJI (AppShell) — szkielet przyszłych widoków.
   Nagłówek + stopka (paski pełnej szerokości) i ciało z 3 kontenerami:
   menu (auto szer.), main (rozciągnięty), details (stała szer., opcjonalny).
   Layout/spacing z Bootstrapa (utilities w .razor); tu tylko piksele,
   powierzchnie HUD, obramowania akcentu i szerokości kontenerów.
   Motyw przez --bs-* / --uc-* (ciemne tło: data-bs-theme="dark" na .app-shell).
   =================================================================== */

/* Powłoka = PRZEZROCZYSTY, BEZRAMOWY szkielet nad sceną 3D. Sama nie ma tła ani
   obramowań — definiuje tylko regiony (header / menu·main·details / footer) i odstępy
   (p-3 = margines od krawędzi, gap-3 = przerwy między regionami, przez które widać
   scenę). Widoczne „okna" to dopiero .shell-window wstawiane w main/details. Chrome
   HUD (logo, zegar, menu, legenda, wersja) pływa bez ramek. */
.app-shell {
    background: transparent;
    --bs-border-color: rgba(var(--uc-accent-rgb), 0.5);
    --bs-border-color-translucent: rgba(var(--uc-accent-rgb), 0.5);
    --bs-body-color: #cdd6f4;
    color: #cdd6f4;
    pointer-events: none;   /* przezroczysty szkielet przepuszcza mysz do sceny… */
    /* własny kontekst stosu NAD sceną — inaczej absolutny canvas przesłania
       niepozycjonowane elementy HUD (nagłówek/stopkę). */
    position: relative;
    z-index: 1;
}
/* …a faktyczne elementy interaktywne łapią mysz: okna, kwadraty menu, wyszukiwarka
   oraz prawy blok nagłówka (nazwa użytkownika + WYLOGUJ). */
.shell-window, .app-shell .uc-menu-btn, .gsearch, .shell-header-extra { pointer-events: auto; }

/* OKNO — pływający, oramowany panel (lista, formularz, szczegóły). Półprzezroczyste
   tło HUD + obramowanie akcentu + poświata. Wstawiane w region main/details; gap-3
   szkieletu daje widoczną przerwę (scenę) między oknem a sąsiadami. */
.shell-window {
    background: var(--uc-surface);
    border: 1px solid rgba(var(--uc-accent-rgb), 0.5);
    box-shadow: 0 0 14px rgba(var(--uc-accent-rgb), 0.12);
}

/* ── Nagłówek (bezramowy HUD: logo, tytuł, zegar) ── */
/* min-height (nie height): górny wiersz ma 64 px, a opcjonalny breadcrumb pod nim
   dokłada drugi wiersz — nagłówek rośnie, body kurczy się w pionie. */
.shell-header {
    text-shadow: 0 0 8px rgba(var(--uc-accent-rgb), 0.35);
}
/* Stała wysokość górnego wiersza nagłówka — kotwiczy logo/tytuł/zegar w pionie,
   niezależnie od pojawienia się breadcrumbu (ten rośnie POD spodem). */
.shell-header-main { min-height: 64px; }
.shell-title { line-height: 1.05; }
.shell-title-thin { font-size: 12px; letter-spacing: 3px; color: #ffd9b3; }
.shell-title-bold { font-size: 17px; letter-spacing: 4px; }
.shell-clock { line-height: 1.1; }
.shell-time { font-size: 18px; letter-spacing: 2px; }
.shell-date { font-size: 12px; letter-spacing: 2px; color: #ffc999; }

/* ── Wyśrodkowana nakładka nagłówka (globalna wyszukiwarka) ──
   Poziomo DYNAMICZNIE: środek ekranu (calc(50% − pół szerokości pola)), dopóki lewa
   krawędź nie zbliży się do zegara; wtedy klamruje się tuż za nim (stała --gsearch-min-left,
   bo lewy klaster logo+tytuł+zegar ma stałą szerokość). Pionowo: środek wiersza z zegarem.
   z-index nad sceną i menu. */
.shell-header-center {
    --gsearch-half: 190px;       /* połowa szerokości pola (.gsearch width 380px) */
    --gsearch-min-left: 330px;   /* lewa krawędź tuż za zegarem (względem wiersza) */
    position: absolute;
    top: 50%;
    left: max(var(--gsearch-min-left), calc(50% - var(--gsearch-half)));
    transform: translateY(-50%);
    z-index: 30;
}

/* ── Globalna wyszukiwarka ── */
/* Szerokość pełna 380px, ale gdy okno się zwęża, pole skraca się, by NIE wejść pod
   prawy blok nagłówka (login/menu + WYLOGUJ). Rezerwa lewa: ~330px (klaster logo+
   tytuł+zegar, zgodnie z --gsearch-min-left). Rezerwa prawa: --gsearch-right-reserve
   (mierzona dynamicznie przez js/headerLayout.js; szerszy login → wcześniejsze
   skracanie), z domyślną wartością 220px zanim JS się załaduje. clamp() trzyma dolny
   próg 120px. */
.gsearch {
    /* 330px = lewa rezerwa (--gsearch-min-left, klaster logo+tytuł+zegar); 72px =
       paddingi powłoki/nagłówka (p-3 + px-3 po obu stronach) + odstęp od prawego bloku. */
    width: clamp(120px,
                 calc(100vw - 330px - var(--gsearch-right-reserve, 220px) - 72px),
                 380px);
}
.gsearch-input { box-shadow: 0 0 14px rgba(var(--uc-accent-rgb), 0.12); position: relative; }

/* ── Menu użytkownika (dropdown w nagłówku) ──
   Stan na Blazorze (brak Bootstrap JS). Wrapper prawego bloku ma z-index NAD
   wyszukiwarką (30) i NAD łapaczem kliknięć (45), żeby przycisk, lista i WYLOGUJ
   pozostały klikalne, a kliknięcie poza nimi (w backdrop) zamykało menu. */
.uc-usermenu-wrap { position: relative; z-index: 50; }
.uc-usermenu-caret { opacity: 0.8; flex-shrink: 0; }
.uc-usermenu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: transparent;
}
.uc-usermenu-list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 50;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    background: var(--uc-surface);
    border: 1px solid rgba(var(--uc-accent-rgb), 0.5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}
.uc-usermenu-item {
    background: transparent;
    border: 0;
    color: var(--uc-accent);
    text-align: left;
    padding: 8px 12px;
    font-family: var(--bs-font-monospace);
    font-size: 13px;
    letter-spacing: 1px;
    cursor: pointer;
}
.uc-usermenu-item:hover,
.uc-usermenu-item:focus-visible {
    background: rgba(var(--uc-accent-rgb), 0.16);
    outline: none;
}
/* Pozioma linia oddzielająca grupy pozycji menu (np. WYLOGUJ na dole). */
.uc-usermenu-sep {
    height: 1px;
    margin: 2px 0;
    background: rgba(var(--uc-accent-rgb), 0.35);
}
/* Awatar w przycisku usera: kółko z ikoną (domyślnie) lub wgranym zdjęciem (docelowo).
   currentColor dziedziczy kolor przycisku, więc na hover (invert) podąża za nim. */
.uc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid currentColor;
    overflow: hidden;
    flex-shrink: 0;
}
.uc-avatar svg { width: 14px; height: 14px; }
.uc-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Powiększony awatar w przycisku usera (2× względem bazowego 22px). */
.uc-avatar-lg { width: 44px; height: 44px; }
.uc-avatar-lg svg { width: 26px; height: 26px; }

/* Przycisk menu użytkownika — WYJĄTEK od reguły: bez obramowania i bez tła.
   Login wyśrodkowany w pionie obok awatara (align-items:center na flexie). */
.uc-usermenu-toggle {
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    color: var(--uc-accent);
}
.uc-usermenu-toggle:hover { color: #ff9347; }

/* Pole hasła tymczasowego (reset): wspólne obramowanie wokół inputu i dwóch ikon,
   z przezroczystą przerwą między GENERUJ a KOPIUJ — przerwa pokazuje tło pola. */
.rp-tempfield { background: transparent; }
.rp-tempfield .form-control:focus { box-shadow: none; }
.rp-tempfield-gap { width: 8px; align-self: stretch; background: transparent; }
.gsearch-icon {
    background: var(--uc-surface);
    border-color: rgba(var(--uc-accent-rgb), 0.45);
    color: var(--uc-accent);
}
.gsearch-field {
    background: var(--uc-surface);
    border-color: rgba(var(--uc-accent-rgb), 0.45);
    color: var(--uc-accent);
    letter-spacing: 1px;
    /* Miejsce na pływający przycisk „×" (pozycjonowany nad prawą krawędzią).
       !important — Bootstrapowe selektory input-group (z łańcuchem :not) mają wyższą
       specyficzność i inaczej nadpisują padding oraz prawe zaokrąglenie. */
    padding-right: 30px !important;
    /* Przycisk jest ostatnim dzieckiem input-group → Bootstrap zdejmuje prawe
       zaokrąglenie pola; przywracamy je, bo przycisk pływa (nie jest realnym add-onem). */
    border-top-right-radius: var(--bs-border-radius-sm) !important;
    border-bottom-right-radius: var(--bs-border-radius-sm) !important;
}
.gsearch-field::placeholder { color: rgba(var(--uc-accent-rgb), 0.5); }
/* Natywny przycisk czyszczący pola type=search — chowamy, bo nie da się go ostylować
   pod motyw; zastępujemy własnym .gsearch-clear (patrz GlobalSearch.razor). */
.gsearch-field::-webkit-search-cancel-button,
.gsearch-field::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}
/* Własny przycisk „×" — PŁYWA nad prawą krawędzią pola: bez obramowania i tła,
   żeby nie tworzyć widocznej kreski psującej efekt. Pozycjonowany względem
   input-group (.gsearch-input ma position:relative). */
.gsearch-clear {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    /* Ponad polem: Bootstrap daje skupionemu .form-control z-index:5, więc musimy być wyżej,
       inaczej pole przechwytuje kliknięcia w „×". */
    z-index: 6;
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    color: rgba(var(--uc-accent-rgb), 0.7);
    padding: 0 8px;
    cursor: pointer;
}
.gsearch-clear:hover,
.gsearch-clear:focus-visible {
    color: #ff9347;
    background: transparent;
    box-shadow: none;
    outline: none;
}
.gsearch-field:focus {
    background: var(--uc-surface);
    border-color: var(--uc-accent);
    color: var(--uc-accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--uc-accent-rgb), 0.35);
}

/* Rozwijana lista wyników — pod polem, nad sceną. */
.gsearch-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--uc-surface);
    border: 1px solid rgba(var(--uc-accent-rgb), 0.45);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 31;
}
.gsearch-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--uc-accent);
    --bs-table-hover-bg: rgba(var(--uc-accent-rgb), 0.16);
    --bs-table-hover-color: var(--uc-accent);
}
.gsearch-table tr { cursor: pointer; }
.gsearch-table td { vertical-align: middle; border-color: rgba(var(--uc-accent-rgb), 0.12); }
.gsearch-type {
    width: 1%;
    white-space: nowrap;
    font-family: var(--bs-font-monospace);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(var(--uc-accent-rgb), 0.65);
}
/* Ikona typu (System/Marchia/Ciało/Stacja) — pełny akcent (jaśniejsza niż przygaszona etykieta),
   żeby typ był czytelny „na pierwszy rzut oka" bez czytania. Rozmiar dociśnięty do wiersza listy. */
.gsearch-type-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 8px;
    color: var(--uc-accent);
}
.gsearch-type-icon svg { width: 16px; height: 16px; display: block; }
.gsearch-type-label { vertical-align: middle; }
.gsearch-name { color: var(--uc-accent); max-width: 0; }
.gsearch-msg { padding: 8px 12px; font-size: 12px; color: rgba(var(--uc-accent-rgb), 0.6); }

/* ── Breadcrumb (ścieżka zaznaczeń menu) — Bootstrap .breadcrumb w stylu HUD ──
   Separator „›" i kolory akcentu UC; aktywny (ostatni) okruch jaśniejszy/bold,
   wcześniejsze przygaszone. Drobny wiersz monospace, wyrównany do lewej krawędzi
   nagłówka. mt-1 odsuwa go od tytułu/zegara. */
/* Slot rezerwuje stałą wysokość wiersza breadcrumbu NIEZALEŻNIE od tego, czy są okruchy
   — dzięki temu jego pojawienie/zniknięcie nie zmienia wysokości nagłówka i nie spycha
   body/menu w dół. Wysokość = margin-top (0.25rem) + wiersz breadcrumbu (font 11px). */
.shell-breadcrumb-slot { min-height: calc(0.25rem + 11px * 1.5); }
.shell-breadcrumb { margin-top: 0.25rem; }
.shell-breadcrumb .breadcrumb {
    --bs-breadcrumb-divider: '\203A';   /* › */
    font-family: var(--bs-font-monospace);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.shell-breadcrumb .breadcrumb-item,
.shell-breadcrumb .breadcrumb-item > a { color: rgba(var(--uc-accent-rgb), 0.55); }
.shell-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(var(--uc-accent-rgb), 0.4);
}
.shell-breadcrumb .breadcrumb-item.active {
    color: var(--uc-accent);
    font-weight: 600;
}
.shell-breadcrumb .bc-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 0.35rem;
}
.shell-breadcrumb .bc-icon svg { width: 13px; height: 13px; }

/* ── Ciało: regiony bezramowe; ramki nosi dopiero .shell-window w środku ── */
/* MENU — auto szerokość (kolumna kwadratów); bez tła/paddingu (same kwadraty).
   Własny kontekst stosu NAD regionem main — inaczej wysuwana etykieta hover chowa się
   pod oknem listy (jego pozycjonowane przyciski malują się później w DOM). */
/* Odsunięcie od krawędzi shell-body (dla glow fokusu) daje teraz padding na .uc-menu-bar
   (jedno miejsce dla menu i pasków akcji okien). */
.shell-menu { position: relative; z-index: 5; }
.shell-main { padding: 0; }       /* okno wypełnia region; pusty region = czysta scena */
.shell-details { width: 340px; }  /* stała szerokość regionu szczegółów */
/* rozszerzony DETAILS (np. formularz edycji): wypełnia resztę szerokości obok menu
   (MAIN schowany d-none). flex-fill rośnie, width:auto zdejmuje stałe 340px. */
.shell-details-expanded { width: auto; }

/* ── Stopka (bezramowy HUD: legenda klawiszy + wersja) ── */
.shell-footer {
    height: 36px;
    text-shadow: 0 0 8px rgba(var(--uc-accent-rgb), 0.25);
}
.shell-version {
    font-size: 13px;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(var(--uc-accent-rgb), 0.35);
}

/* ===================================================================
   IconSquareButton — wariant „success" (zielony). Wariant „primary"
   korzysta z bazowych reguł .uc-menu-btn (sekcja menu wyżej). Napis (.uc-menu-btn-txt)
   jest w środku przycisku i dziedziczy jego kolor (currentColor), więc wariant wystarczy
   ustawić na samym przycisku. .border z Bootstrapa ma !important, stąd border-color też.
   =================================================================== */
.uc-menu-btn-success {
    color: var(--uc-success);
    border-color: rgba(var(--uc-success-rgb), 0.6) !important;
    box-shadow: 0 0 10px rgba(var(--uc-success-rgb), 0.12);
}
.uc-menu-item:hover .uc-menu-btn-success:not(:disabled),
.uc-menu-btn-success:focus-visible {
    background: var(--uc-success);
    color: #080b14;
}

/* ===================================================================
   ProgressModal — nakładka postępu (przyciemnienie strony + karta HUD).
   Backdrop kryje cały viewport (position:fixed) ponad menu (z-index 5) i powłoką
   (z-index 1); karta korzysta z .shell-window (tło/obramowanie/poświata akcentu).
   =================================================================== */
.uc-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(2, 4, 9, 0.45);   /* jaśniejszy, bardziej przezroczysty shade (jeden dla wszystkich modali) */
    backdrop-filter: blur(2px);
    pointer-events: auto;   /* blokuje interakcję z tym, co pod spodem */
}
.uc-modal {
    width: min(440px, 90vw);
}
.uc-modal-heading {
    font-size: 18px;
    letter-spacing: 3px;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(var(--uc-accent-rgb), 0.35);
}
.uc-modal-status {
    font-size: 13px;
    color: #cdd6f4;
    min-height: 1.2em;
    word-break: break-word;
}
.uc-modal-meta {
    font-size: 12px;
    letter-spacing: 1px;
    color: #ffc999;
}
.uc-modal-progress {
    height: 14px;
    border-radius: 0;
    background: rgba(var(--uc-accent-rgb), 0.12);
    border: 1px solid rgba(var(--uc-accent-rgb), 0.4);
}
.uc-modal-progress .progress-bar {
    background-color: var(--uc-accent);
    box-shadow: 0 0 10px rgba(var(--uc-accent-rgb), 0.5);
    transition: width .15s ease;
}

/* ===================================================================
   ListView — szablon widoku listy (nagłówek + ciało: akcje | tabela).
   Layout/spacing z Bootstrapa (.razor); tu tylko typografia i piksele.
   Obramowanie nagłówka (.border-bottom) dziedziczy --bs-border-color
   z .app-shell (akcent), więc działa wewnątrz powłoki bez dodatków.
   =================================================================== */
.list-view-title {
    font-size: 22px;
    letter-spacing: 3px;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(var(--uc-accent-rgb), 0.35);
}
.list-view-subtitle {
    font-size: 12px;
    letter-spacing: 2px;
    color: #ffc999;
}

/* ===================================================================
   OptionsView — okno OPCJE (property editor: grupy + wiersz etykieta|edytor).
   Layout/spacing z Bootstrapa (.razor); tu typografia, piksele i szerokość
   kolumny edytora. Długie etykiety zawijają się w kolumnie rozciągniętej,
   edytor trzyma stałą szerokość po prawej.
   =================================================================== */
.options-group-title {
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 700;
}
.options-subgroup-title {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    opacity: 0.8;
}
/* Podgrupa z nagłówkiem — lekkie wcięcie + cienka linia akcentu z lewej. */
.options-subgroup-nested {
    padding-left: 12px;
    border-left: 1px solid rgba(var(--uc-accent-rgb), 0.25);
    margin-bottom: 8px;
}
.options-row + .options-row {
    border-top: 1px solid rgba(var(--uc-accent-rgb), 0.12);
}
.options-label .form-label {
    font-size: 13px;
    letter-spacing: 1px;
}
.options-desc {
    font-size: 11px;
    letter-spacing: 1px;
    margin-top: 2px;
}
.options-editor {
    width: 320px;
    max-width: 40%;
}

/* ===================================================================
   DataTable — kolorystyka UC: tekst i poziome linie w akcencie zamiast
   domyślnej bieli/szarości Bootstrapa (table-dark). Nagłówki mają text-primary
   (pełny akcent), komórki ciała — lekko przygaszony akcent dla czytelności.
   =================================================================== */
.dt-root .table {
    --bs-table-color: var(--uc-accent);
    --bs-table-hover-color: var(--uc-accent);
    --bs-table-active-color: var(--uc-accent);
    --bs-table-border-color: rgba(var(--uc-accent-rgb), 0.22);
    --bs-table-hover-bg: rgba(var(--uc-accent-rgb), 0.10);
    --bs-table-active-bg: rgba(var(--uc-accent-rgb), 0.18);
    color: var(--uc-accent);
}
.dt-root .table > tbody { color: rgba(var(--uc-accent-rgb), 0.85); }
/* Wiersz z fokusem klawiatury — BEZ białej ramki UA; akcentowy pasek z lewej + delikatne tło
   (kursor widoczny OD RAZU, niezależnie od podświetlenia zaznaczenia table-active, które dochodzi
   po round-tripie SignalR). Klawiaturowe zaznaczanie: fokus=zaznaczenie (nawigacja w galaxyMap.js). */
.dt-row { outline: none; }
.dt-row:focus > td { background-color: rgba(var(--uc-accent-rgb), 0.16); }
.dt-row:focus > td:first-child { box-shadow: inset 3px 0 0 0 var(--uc-accent); }
/* Tekst drugorzędny w tabeli i nawigatorze (e-mail, „X / N", stan pusty) —
   przygaszony akcent zamiast neutralnej szarości. */
.dt-root .text-secondary { color: rgba(var(--uc-accent-rgb), 0.6) !important; }
/* Pozioma linia nad nawigatorem (border-top) — w akcencie UC. */
.dt-pager { --bs-border-color: rgba(var(--uc-accent-rgb), 0.3); }

/* ===================================================================
   DataTable — stronicowanie (pager). Bootstrap .pagination + .input-group
   dopasowane do HUD: przezroczyste tło, akcent UC, kwadratowe rogi.
   Zmienne --bs-pagination-* ustawiamy na kontenerze .pagination (page-link je
   dziedziczy). Aktywna strona = pełny akcent (ciemny tekst na pomarańczu).
   =================================================================== */
.dt-pager .pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-color: var(--uc-accent);
    --bs-pagination-border-color: rgba(var(--uc-accent-rgb), 0.5);
    --bs-pagination-hover-bg: rgba(var(--uc-accent-rgb), 0.15);
    --bs-pagination-hover-color: var(--uc-accent);
    --bs-pagination-hover-border-color: var(--uc-accent);
    --bs-pagination-focus-bg: rgba(var(--uc-accent-rgb), 0.15);
    --bs-pagination-focus-color: var(--uc-accent);
    --bs-pagination-active-bg: var(--uc-accent);
    --bs-pagination-active-border-color: var(--uc-accent);
    --bs-pagination-active-color: #080b14;
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: rgba(var(--uc-accent-rgb), 0.35);
    --bs-pagination-disabled-border-color: rgba(var(--uc-accent-rgb), 0.2);
}
.dt-pager .page-link {
    border-radius: 0;
    font-family: var(--bs-font-monospace);
}
/* Pole „skok do strony" — spójne z polem wyszukiwania (przezroczyste, akcent UC). */
.dt-pager-goto .input-group-text,
.dt-pager-goto .form-control {
    background: transparent;
    color: var(--uc-accent);
    border-color: rgba(var(--uc-accent-rgb), 0.5);
    border-radius: 0;
}
.dt-pager-goto .input-group-text {
    font-size: 11px;
    letter-spacing: 1px;
}
/* Chowamy strzałki spinnera number-inputa — wpisywanie ręczne / kliknięcia stron. */
.dt-pager-goto input[type=number]::-webkit-outer-spin-button,
.dt-pager-goto input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dt-pager-goto input[type=number] { -moz-appearance: textfield; }

/* ===================================================================
   MarchForm — własna lista rozwijana combo systemów. Natywny <datalist>
   nie daje się ostylować, więc renderujemy własną listę pod polem:
   szerokość = pole combo (w-100 kontenera), tło/obramowanie jak okna HUD.
   =================================================================== */
.march-combo-list {
    top: 100%;
    z-index: 1050;
    max-height: 220px;
    overflow-y: auto;
    background: var(--uc-surface);
    border: 1px solid rgba(var(--uc-accent-rgb), 0.6);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
.march-combo-item {
    background: transparent;
    border: 0;
    color: var(--uc-accent);
    font-family: var(--bs-font-monospace);
    cursor: pointer;
}
.march-combo-item:hover,
.march-combo-item:focus-visible {
    background: rgba(var(--uc-accent-rgb), 0.16);
    color: var(--uc-accent);
    outline: none;
}

/* ── Ekran logowania (Components/Account/Login.razor) ──
   Ciemne, pełnoekranowe tło z delikatną poświatą akcentu UC; wyśrodkowany panel
   w tej samej stylistyce co okna HUD (półprzezroczysta powierzchnia + obramowanie). */
.login-screen {
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(var(--uc-accent-rgb), 0.10), transparent 60%),
        #05070d;
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--uc-surface);
    border: 1px solid rgba(var(--uc-accent-rgb), 0.55);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

/* ── Nakładka ładowania sceny (loader „strzałek") ─────────────────────────────
   Zaadaptowana animacja strzałek pod motyw UC: kolor = --uc-accent, ciemne tło HUD.
   Pełnoekranowy overlay nad sceną; Blazor chowa go po pierwszej klatce Three.js
   (whenSceneReady). Klasy loadera scoped pod .dank-ass-loader, rzędy jako .lrow —
   NIE .row, żeby nie kolidować z siatką Bootstrapa. */
.galaxy-loading-overlay {
    z-index: 1080;                 /* nad AppShell/nakładkami HUD */
    background: transparent;       /* NIE zakrywa sceny/tła — widać tylko samą animację */
    pointer-events: none;          /* nie blokuje interakcji z mapą pod spodem */
}

.dank-ass-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dank-ass-loader .lrow {
    display: flex;
}
.dank-ass-loader .arrow {
    width: 0;
    height: 0;
    margin: 0 -6px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 21.6px solid var(--uc-accent);
    animation: galaxyLoaderBlink 1s infinite;
    filter: drop-shadow(0 0 18px var(--uc-accent));
}
.dank-ass-loader .arrow.down {
    transform: rotate(180deg);
}

/* Opóźnienia animacji: outer 1..18 (−1/18·i s), inner 1..6 (−1/6·i s). */
.dank-ass-loader .arrow.outer-1  { animation-delay: -0.056s; }
.dank-ass-loader .arrow.outer-2  { animation-delay: -0.111s; }
.dank-ass-loader .arrow.outer-3  { animation-delay: -0.167s; }
.dank-ass-loader .arrow.outer-4  { animation-delay: -0.222s; }
.dank-ass-loader .arrow.outer-5  { animation-delay: -0.278s; }
.dank-ass-loader .arrow.outer-6  { animation-delay: -0.333s; }
.dank-ass-loader .arrow.outer-7  { animation-delay: -0.389s; }
.dank-ass-loader .arrow.outer-8  { animation-delay: -0.444s; }
.dank-ass-loader .arrow.outer-9  { animation-delay: -0.500s; }
.dank-ass-loader .arrow.outer-10 { animation-delay: -0.556s; }
.dank-ass-loader .arrow.outer-11 { animation-delay: -0.611s; }
.dank-ass-loader .arrow.outer-12 { animation-delay: -0.667s; }
.dank-ass-loader .arrow.outer-13 { animation-delay: -0.722s; }
.dank-ass-loader .arrow.outer-14 { animation-delay: -0.778s; }
.dank-ass-loader .arrow.outer-15 { animation-delay: -0.833s; }
.dank-ass-loader .arrow.outer-16 { animation-delay: -0.889s; }
.dank-ass-loader .arrow.outer-17 { animation-delay: -0.944s; }
.dank-ass-loader .arrow.outer-18 { animation-delay: -1.000s; }
.dank-ass-loader .arrow.inner-1  { animation-delay: -0.167s; }
.dank-ass-loader .arrow.inner-2  { animation-delay: -0.333s; }
.dank-ass-loader .arrow.inner-3  { animation-delay: -0.500s; }
.dank-ass-loader .arrow.inner-4  { animation-delay: -0.667s; }
.dank-ass-loader .arrow.inner-5  { animation-delay: -0.833s; }
.dank-ass-loader .arrow.inner-6  { animation-delay: -1.000s; }

@keyframes galaxyLoaderBlink {
    0%   { opacity: 0.1; }
    30%  { opacity: 1; }
    100% { opacity: 0.1; }
}