/* =========================================================
   KOPIA Z pc_admin/css/base.css — NIE EDYTUJ TEGO PLIKU
   =========================================================
   Źródło: repozytorium serwera FiveM, commit c609d474
   Odświeżenie: node scripts/sync-design.mjs <ścieżka-do-pc_admin>

   Zmiany rób PO STRONIE GRY. Tutaj i tak zostaną nadpisane przy następnej
   synchronizacji, a rozjazd systemu projektowego to dokładnie ten problem,
   który ten skrypt ma likwidować (web/README.md, punkt 3 parytetu).

   Styl WŁASNY strony (pasek boczny, belka, widoki) siedzi w site.css.
   ========================================================= */

/* =========================================================
   PC ADMIN — BASE
   reset · typografia bazowa · scrim okna · scrollbary · ruch
   Ładowany PO tokens.css, PRZED layout.css.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Okno NUI leży na grze — dookoła przyciemnienie, nie własne tło. */
  background: rgba(4, 6, 10, .55);
}

/* Statyczna poświata za oknem. Poprzednio: animowana „aurora” w trzech
   szmaragdowo-indygowych radialach. Wypadła z trzech powodów — kolor był
   spoza palety, animacja 22 s na warstwie pełnoekranowej to darmowy koszt
   GPU w CEF, a rozdz. 13 kitu zakazuje ozdobników konkurujących z treścią.
   Zostaje jeden chłodny rozbłysk na 5%, bez ruchu. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(900px 620px at 78% -12%, rgba(77,163,255,.06), transparent 58%),
    radial-gradient(700px 520px at 8% 108%, rgba(39,86,133,.07), transparent 60%);
}

/* `hidden` MUSI wygrywać. Reguła UA `[hidden]{display:none}` przegrywa
   z każdą autorską `display:grid/flex`, więc w logach atrybut `hidden`
   na .catgrid i .chgrid nie ukrywał niczego — podczas wyszukiwania widać
   było jednocześnie wyniki I pełną siatkę kategorii. Jedna linijka
   zamiast łatania każdego miejsca z osobna. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
/* Kontrolki formularza NIE dziedziczą kroju ani rozmiaru od <body> — dostają
   je od systemu (13.3333 px w Chromium). To wyciekało na ekran jako trzynasty
   rozmiar fontu poza skalą. Wymuszamy dziedziczenie. */
button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
/* Karetka ma kolor wpisywanego tekstu, nigdy akcentu (właściciel, 29.10.2026:
   „karetka biała”). Jedna reguła dla wszystkich pól, także tych z arkuszy
   widoków (.form-input, pole rozmowy), które jej nie ustawiały. */
input, textarea { caret-color: var(--txt); }
img { max-width: 100%; display: block; }

::selection { background: var(--blue-26); color: var(--txt); }

/* =========================================================
   ZASADY INTERAKCJI — obowiązkowe w każdym UI (kit, sekcja tokenów)
   1. Żadnych obwódek fokusu — w grze czytają się jak błąd renderowania.
   2. Żadnego zaznaczania tekstu na elementach klikalnych.
   Tekst do odczytu może być zaznaczalny — patrz .selectable.
   ========================================================= */
*:focus, *:focus-visible { outline: none !important; }
button::-moz-focus-inner { border: 0; }

button, .btn, .icon-btn, .chip, .badge, .seg__btn, .nav__item, .tab,
.rep-tab, .rep-thread, .switch, .tile, .catcard, .row, [role="button"] {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.selectable, .msg__text, .ann__body, input, textarea {
  user-select: text;
  -webkit-user-select: text;
}

/* =========================================================
   SCROLLBARY — jeden wygląd w całym panelu
   ========================================================= */
/* UI Kit (BLEDY.md): kciuk cienki (6 px), widoczny, #2A3243, tor
   przezroczysty. Pasek ma 12 px, a kciuk stoi na jego środku: 3 px
   przezroczystej ramki z każdej strony, więc nie przykleja się ani do treści,
   ani do krawędzi okna. Właściciel 29.10.2026: „scrollbar brzydko blisko
   rzeczy” — przez kilka godzin pasek miał 6 px bez ramki i kciuk dotykał
   pozycji menu. Pod kursorem tylko `background-color`: skrót `background`
   zerowałby `background-clip` i kciuk rozlałby się na całe 12 px. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--line-hover); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }

/* `.scroll-slim` (menu strony) nie ma już własnej szerokości: przy 6 px
   ramka 3 + 3 px zjadłaby cały kciuk. Każdy pasek wygląda tak samo. */

/* Pola liczbowe bez strzałek przeglądarki (właściciel, 29.10.2026): wartość
   wpisuje się z klawiatury, a − / + mają własne klawisze tam, gdzie trzeba. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Uchwyt zmiany wysokości pola tekstowego w kolorach panelu: dwie kreski
   --mut-deep zamiast systemowego jasnego trójkąta w rogu. */
textarea::-webkit-resizer {
  background: linear-gradient(135deg, transparent 0 52%, var(--mut-deep) 52% 60%, transparent 60% 70%, var(--mut-deep) 70% 78%, transparent 78%);
}

/* =========================================================
   TYPOGRAFIA BAZOWA
   Archivo tylko dla nagłówków i liczb-bohaterów, Inter dla UI,
   JetBrains Mono dla etykiet, identyfikatorów i czasów.
   ========================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  font-weight: var(--fw-bold);
}
.mono, .u-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* Etykieta nad wartością / nad kolumną: Inter 700 w wersalikach (UI Kit). */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--mut);
}
.u-num { font-variant-numeric: tabular-nums; }
/* „brak” i inne wartości drugiego planu — strona miała tę klasę w site.css,
   gra nie, więc do 30.10.2026 te same „brak” były w grze jasne. */
.u-mut { color: var(--mut); }
/* Bez natywnego krzyżyka w polach type=search (zasada: bez natywnych
   kontrolek). Pola czyści się klawiszem Esc albo własnym przyciskiem. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.u-truncate { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Opakowanie bez własnego pudełka: miejsce, które skrypt podmienia w całości
   (np. plakietka flagi w profilu), a układ widzi tylko jego zawartość. */
.u-contents { display: contents; }
.u-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================
   RUCH — jeden komplet krzywych i czasów (kit, rozdz. 12)
   ========================================================= */
@keyframes fade-in      { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise         { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes slide-right  { from { opacity: 0; transform: translateX(-10px) } to { opacity: 1; transform: none } }
@keyframes slide-down   { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }
@keyframes flip-text    { from { opacity: 0; transform: translateY(-5px) } to { opacity: 1; transform: none } }
@keyframes pulse-dot    { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .5; transform: scale(.82) } }
/* alias — starsze reguły widoków wołają `animation: pulse` */
@keyframes pulse        { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .5; transform: scale(.82) } }
@keyframes fade         { from { opacity: 0 } to { opacity: 1 } }
@keyframes fade-out     { from { opacity: 1 } to { opacity: 0 } }
@keyframes bar-in       { from { transform: scaleY(0); opacity: 0 } to { transform: scaleY(1); opacity: 1 } }
/* Dymek / rozwijane menu: wyrasta spod elementu, który je otworzył. */
@keyframes pop-in       { from { opacity: 0; transform: translateY(-4px) scale(.98) } to { opacity: 1; transform: none } }

/* Ruch TREŚCI (kaskada bloków przy wejściu w widok, płynne przesuwanie stosu
   powiadomień, odpowiedź przycisku na akcję) robi js/core/motion.js — tam
   jest też uzasadnienie, dlaczego nie da się tego zrobić samym CSS. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------
   NAKŁADKA STRONY (dopisana przez scripts/sync-design.mjs)
   ---------------------------------------------------------
   Powyższe reguły opisują okno NUI leżące na grze: przyciemnione tło
   dookoła, brak przewijania i centrowanie pływającego okna. Strona zajmuje
   całe okno przeglądarki i przewija się normalnie, więc te trzy rzeczy
   wracają do normy. Reszta pliku (typografia, paski przewijania, ruch)
   obowiązuje bez zmian. */
body {
  overflow: auto;
  display: block;
  background: var(--bg);
}
/* Poświata zostaje, ale bez position:fixed na scrimie gry — na stronie
   ma być tłem dokumentu, nie warstwą nad grą. */
body::before {
  background:
    radial-gradient(900px 620px at 78% -12%, rgba(77,163,255,.05), transparent 58%),
    radial-gradient(700px 520px at 8% 108%, rgba(39,86,133,.06), transparent 60%);
}