/*
 * Warstwa wyglądu panelu GoMedic.
 *
 * Dlaczego CSS pisany ręcznie, a nie motyw Filamenta
 * --------------------------------------------------
 * Panel nie ma własnego budowania zasobów i mieć nie będzie: paczka wdrożeniowa
 * jedzie na hosting współdzielony, gdzie nie ma Node-a i nic się nie kompiluje.
 * Ten plik leży w `public/`, wpina go hak `HEAD_END` po arkuszu Filamenta
 * i jedzie z paczką taki, jaki jest.
 *
 * Skąd bierze się wygląd
 * ----------------------
 * Najpierw tokeny, potem dopiero nadpisania. Filament liczy CAŁY interfejs
 * ze zmiennych `--gray-*` i `--primary-*`, więc podmiana rampy szarości zmienia
 * każdą powierzchnię, każdą kreskę i każdy napis naraz — bez setki reguł
 * z `!important`, które rozjeżdżają się przy pierwszej aktualizacji Filamenta.
 *
 * Rampa wyliczona przez Filament z `#64809a` miała chromę 0,17 w środku skali.
 * Znaczyło to, że każda ramka, każde tło i każdy szary napis były wyraźnie
 * niebieskie — a skoro wszystko jest niebieskie, to akcent marki nie ma się
 * od czego odbić i nic nie jest wyróżnione. Nowa rampa jest prawie neutralna
 * u góry (chroma 0,008) i nabiera barwy dopiero w ciemnych stopniach.
 *
 * Trzy stopnie są ZAKOTWICZONE w barwach, których używa już aplikacja terenowa
 * i wydruki — to nie przypadek, tylko sposób, żeby panel, telefon kierowcy
 * i papier wyglądały na jeden produkt, a nie na trzy:
 *
 *   --gray-50   #f2f8fc   tło stron
 *   --gray-200  #e3edf5   włoskowate kreski
 *   --gray-900  #1b3a57   atrament nagłówków
 *
 * Czego ten plik świadomie NIE robi
 * ---------------------------------
 * Nie sprowadza czcionki z sieci. Aplikacja nie łączy się z niczym poza
 * serwerem wypożyczalni i pilnuje tego osobny test. Zostaje Inter, który
 * Filament i tak wiezie ze sobą — a charakteru szukamy w rytmie, gęstości
 * i detalu, nie w krojach ściągniętych z cudzego serwera.
 */

:root {
    /* ——— Rampa szarości ——————————————————————————————————————————————— */
    --gray-50: oklch(0.9758 0.0083 237);
    --gray-100: oklch(0.9600 0.0110 240);
    --gray-200: oklch(0.9409 0.0152 242);
    --gray-300: oklch(0.8800 0.0230 243);
    /* 400 to #7b93a8: znaczniki zastępcze i ikony, nie tekst do czytania. */
    --gray-400: oklch(0.6520 0.0417 245);
    /* 500 celowo ciemniejsze od #7b93a8: na tym stopniu Filament pisze teksty
       drugoplanowe i wersaliki nad tabelami, a #7b93a8 na tle strony daje
       3,4:1 — poniżej progu WCAG AA (4,5:1) dla zwykłego tekstu.

       Wartość nie jest wyczuta, tylko zmierzona w przeglądarce:
       L=0,52 daje 5,11:1 na tle strony i 4,87:1 na główce tabeli.
       Pierwsze podejście (L=0,575) wychodziło 4,06:1 i by nie przeszło. */
    --gray-500: oklch(0.5200 0.0470 246);
    --gray-600: oklch(0.4550 0.0530 247);
    --gray-700: oklch(0.4050 0.0580 248);
    --gray-800: oklch(0.3700 0.0610 248);
    --gray-900: oklch(0.3396 0.0632 249);
    --gray-950: oklch(0.2450 0.0520 250);

    /* ——— Niebieski do pisania, osobno od niebieskiego do malowania ———

       Barwa marki #1b9cd8 jest jasna: biały napis na niej daje 3,09:1,
       a ona sama na bieli — też 3,09:1. Jako wypełnienie, belka czy
       obwódka jest w porządku (próg dla elementów to 3:1), ale jako
       TEKST — odnośnik, wartość w tabeli — nie przechodzi.

       Dlatego jasne stopnie zostają nietknięte i to one nadają aplikacji
       barwę, a ciemniejsze — te, których Filament używa do pisania —
       schodzą do L=0,50 (5,59:1 na bieli). Odcień i nasycenie te same,
       więc barwa marki się nie zmienia; zmienia się tylko to, co i tak
       było nie do odczytania. */
    --primary-600: oklch(0.5000 0.1550 236.2);
    --primary-700: oklch(0.4300 0.1400 236.2);

    /* ——— Własne tokeny warstwy ————————————————————————————————————————— */

    /* Promień mniejszy niż domyślny. Zaokrąglenie 12-16 px czyta się jak
       strona reklamowa; narzędzie, w którym ktoś siedzi osiem godzin, ma
       wyglądać na przyrząd. */
    --gm-promien: 10px;
    --gm-promien-maly: 7px;

    /* Kreska włoskowata zamiast cienia. Cień pod każdą kartą daje ten sam
       poziom ważności wszystkiemu naraz — czyli żadnego. */
    --gm-kreska: 1px solid var(--gray-200);
    --gm-cien: 0 1px 2px -1px oklch(0.34 0.06 249 / 0.08);
    --gm-cien-uniesiony: 0 12px 28px -18px oklch(0.34 0.06 249 / 0.35);

    /* Szerokość ustawia ten arkusz, a nie panel Filamenta: nasz idzie po
       jego arkuszu, więc `->sidebarWidth()` w BiuroPanelProvider i tak by
       tu przegrało. Zmiana należy do tego jednego miejsca.

       288 px, bo przy 268 nazwy podane przez klienta kończyły się
       wielokropkiem — „Przyjęcia zewnętrzne (PZ)", „Wzory umów" i „Sprzedaż
       detaliczna" (ta ostatnia zwłaszcza z odznaką kolejki). Prościej dodać
       dwa centymetry miejsca niż skracać nazwy, które klient wypisał
       z imienia. Kto dopisuje pozycję dłuższą od tych, niech sprawdzi
       w przeglądarce, czy się mieści. */
    --gm-pasek-boczny: 288px;

    /* Wersaliki nad tabelami i nad grupami menu. Jedno miejsce, bo rytm
       tych napisów musi być wszędzie ten sam. */
    --gm-wersaliki: 0.68rem;
    --gm-wersaliki-odstep: 0.075em;

    --sidebar-width: var(--gm-pasek-boczny);
}

.dark {
    --gray-50: oklch(0.9600 0.0100 240);
    --gray-100: oklch(0.9000 0.0160 242);
    --gray-200: oklch(0.7900 0.0250 243);
    --gray-300: oklch(0.6600 0.0350 244);
    --gray-400: oklch(0.5600 0.0420 246);
    --gray-500: oklch(0.4700 0.0460 247);
    --gray-600: oklch(0.3850 0.0470 248);
    --gray-700: oklch(0.3150 0.0440 249);
    --gray-800: oklch(0.2600 0.0390 250);
    --gray-900: oklch(0.2150 0.0330 251);
    --gray-950: oklch(0.1700 0.0270 252);

    --gm-kreska: 1px solid var(--gray-800);
    --gm-cien: none;
    --gm-cien-uniesiony: 0 14px 30px -18px rgb(0 0 0 / 0.65);
}

/* ——— Rytm ogólny ——————————————————————————————————————————————————————— */

body {
    /* Cyfry o stałej szerokości w CAŁYM panelu. To nie kosmetyka: kolumny kwot,
       dat i numerów inwentarzowych przestają tańczyć, a oko porównuje je
       w pionie zamiast czytać każdą z osobna. Przy programie, w którym liczby
       są treścią, to najtańsza rzecz odróżniająca narzędzie od formularza. */
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

/* Nagłówki: ciaśniejszy światłodruk i pełny atrament. Domyślne rozstrzelenie
   Intera przy dużych stopniach wygląda na nieustawione. */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
    letter-spacing: -0.021em;
    color: var(--gray-900);
}

.fi-header-heading {
    font-weight: 700;
}

/* W trybie ciemnym `--gray-900` jest CIEMNE — to ta sama nazwa, ale
   odwrócone znaczenie. Bez tej reguły nagłówek strony był atramentem
   na atramencie i po prostu znikał. Pułapka każdej rampy odwracanej
   w trybie ciemnym: token trzyma miejsce w skali, nie jasność. */
.dark .fi-header-heading,
.dark .fi-section-header-heading,
.dark .fi-modal-heading {
    color: var(--gray-50);
}

.fi-header-subheading {
    color: var(--gray-500);
}

/* ——— Pasek boczny ——————————————————————————————————————————————————————— */

.fi-sidebar {
    /* Własna powierzchnia, chłodniejsza od treści. Biały pasek na białym tle
       to nie jest podział, tylko jego brak. */
    background: var(--gray-100);
    border-right: var(--gm-kreska);
}

.dark .fi-sidebar {
    background: var(--gray-950);
}

.fi-sidebar-header {
    background: transparent;
    border-bottom: var(--gm-kreska);
    box-shadow: none;
    height: 4rem;
}

.fi-sidebar-nav {
    padding-top: 0.75rem;
    padding-bottom: 1.5rem;
}

/* Nazwy grup jako wersaliki. Odróżniają się od pozycji rytmem, a nie
   wielkością — nie konkurują więc o uwagę z tym, w co się faktycznie klika. */
.fi-sidebar-group-label {
    font-size: var(--gm-wersaliki);
    font-weight: 700;
    letter-spacing: var(--gm-wersaliki-odstep);
    text-transform: uppercase;
    color: var(--gray-500);
}

.fi-sidebar-item-btn {
    border-radius: var(--gm-promien-maly);
    font-weight: 500;
    padding-top: 0.46rem;
    padding-bottom: 0.46rem;
    position: relative;
    transition: background-color 120ms ease, color 120ms ease;
}

.fi-sidebar-item-btn:hover {
    background: oklch(0.6561 0.1352 236.2 / 0.09);
}

/* Pozycja bieżąca: belka przy krawędzi i atrament, nie wypełniona pigułka.
   Wypełnienie akcentem powtórzone przy każdym wejściu w menu zużywa kolor,
   który ma znaczyć „tu naciśnij" — a wtedy przyciski przestają się wyróżniać. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: oklch(0.6561 0.1352 236.2 / 0.12);
    color: var(--gray-900);
    font-weight: 600;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary-500);
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    color: var(--gray-50);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--primary-500);
}

/* ——— Górna belka ———————————————————————————————————————————————————————— */

.fi-topbar > nav,
.fi-topbar-ctn {
    background: var(--gray-50);
    border-bottom: var(--gm-kreska);
    box-shadow: none;
}

.dark .fi-topbar > nav,
.dark .fi-topbar-ctn {
    background: var(--gray-900);
}

/* ——— Powierzchnie ——————————————————————————————————————————————————————— */

.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-fo-repeater-item {
    border-radius: var(--gm-promien);
    border: var(--gm-kreska);
    box-shadow: var(--gm-cien);
}

.dark .fi-section,
.dark .fi-ta-ctn {
    background: var(--gray-900);
}

.fi-section-header {
    padding-bottom: 0.75rem;
}

/* ——— Tabele ————————————————————————————————————————————————————————————— */

/* Tu wykonuje się pracę, więc tu najbardziej widać różnicę między narzędziem
   a szablonem. Gęściej, ciszej, z liczbami w kolumnie. */
.fi-ta-header-cell {
    background: var(--gray-100);
    border-bottom: var(--gm-kreska);
}

.dark .fi-ta-header-cell {
    background: var(--gray-950);
}

/* Wersaliki ustawiamy na samej komórce, a zawartość każe im dziedziczyć.
   Kolumna sortowalna niesie w środku przycisk, niesortowalna sam napis —
   celowanie w jedno i drugie osobno kończy się tym, że połowa nagłówków
   wygląda inaczej niż reszta. */
.fi-ta-header-cell {
    font-size: var(--gm-wersaliki);
    font-weight: 700;
    letter-spacing: var(--gm-wersaliki-odstep);
    text-transform: uppercase;
    color: var(--gray-500);
}

.fi-ta-header-cell * {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.fi-ta-row {
    transition: background-color 90ms ease;
}

.fi-ta-row:hover {
    background: oklch(0.6561 0.1352 236.2 / 0.05);
}

.fi-ta-cell {
    border-bottom: 1px solid var(--gray-200);
}

.dark .fi-ta-cell {
    border-bottom-color: var(--gray-800);
}

.fi-ta-row:last-child .fi-ta-cell {
    border-bottom: 0;
}

/* Numer inwentarzowy, kod i numer faktury to identyfikatory — czyta się je
   znak po znaku, nie słowami. Stała szerokość znaku i lekkie rozstrzelenie
   robią z nich etykietę, a nie zdanie. */
.fi-ta-cell-numer-inwentarzowy .fi-ta-text-item,
.fi-ta-cell-numer .fi-ta-text-item,
.fi-ta-cell-kod-qr .fi-ta-text-item {
    letter-spacing: 0.01em;
}

/* Akcje w wierszu są ciche, dopóki wiersz nie jest pod kursorem. Trzy podpisane
   przyciski powtórzone w trzydziestu wierszach to dziewięćdziesiąt słów
   walczących o uwagę z danymi, po które się tu przyszło.

   Tylko tam, gdzie kursor w ogóle istnieje: na tablecie w magazynie nie ma
   najeżdżania, a przygaszone na stałe akcje byłyby usterką, nie oszczędnością. */
@media (hover: hover) {
    .fi-ta-actions {
        opacity: 0.55;
        transition: opacity 120ms ease;
    }

    .fi-ta-row:hover .fi-ta-actions,
    .fi-ta-actions:focus-within {
        opacity: 1;
    }
}
/* ——— Odznaki ———————————————————————————————————————————————————————————— */

/* Kropka zamiast samego tła. Stan sprzętu odczytuje się wtedy także wtedy,
   gdy ktoś nie rozróżnia barw — a przy sprzęcie medycznym „dostępny"
   i „w serwisie" to nie jest różnica do zgadywania. */
.fi-badge::before {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999px;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.85;
}

.fi-badge {
    font-weight: 600;
    letter-spacing: 0.005em;
    border-radius: 999px;
    gap: 0.4rem;
}

/* ——— Przyciski —————————————————————————————————————————————————————————— */

.fi-btn {
    border-radius: var(--gm-promien-maly);
    font-weight: 600;
    letter-spacing: -0.005em;
}

.fi-btn-color-primary {
    box-shadow: 0 1px 2px oklch(0.34 0.06 249 / 0.18);
}

.fi-icon-btn {
    border-radius: var(--gm-promien-maly);
}

/* ——— Pola formularzy ———————————————————————————————————————————————————— */

.fi-input-wrp {
    border-radius: var(--gm-promien-maly);
    box-shadow: none;
    border: 1px solid var(--gray-300);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.dark .fi-input-wrp {
    border-color: var(--gray-700);
}

.fi-input-wrp:focus-within {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px oklch(0.6561 0.1352 236.2 / 0.18);
}

.fi-fo-field-label-content {
    font-weight: 600;
    color: var(--gray-700);
}

.dark .fi-fo-field-label-content {
    color: var(--gray-200);
}

/* ——— Okna ——————————————————————————————————————————————————————————————— */

.fi-modal-window {
    border-radius: var(--gm-promien);
    box-shadow: var(--gm-cien-uniesiony);
}

/* ——— Ekran logowania ———————————————————————————————————————————————————— */

/* Pierwsze, co widzi pracownik, i jedyny ekran, na którym wolno oddać
   trochę miejsca samej marce. */
.fi-simple-layout {
    background:
        radial-gradient(120% 90% at 50% -10%, oklch(0.6561 0.1352 236.2 / 0.10), transparent 60%),
        var(--gray-50);
}

.fi-simple-main {
    border-radius: var(--gm-promien);
    border: var(--gm-kreska);
    box-shadow: var(--gm-cien-uniesiony);
}

/* ——— Marka, licencja, stopka ———————————————————————————————————————————— */

/* Te trzy elementy rysujemy sami, poza Filamentem, więc i barwy muszą być
   tutaj. Wcześniej siedziały w stylach wewnętrznych w Blade — czyli działały
   w jednym z dwóch wyglądów aplikacji, bo w trybie ciemnym atrament lądował
   na atramencie. */

.gm-marka {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    line-height: 1.15;
}

.gm-marka-znak {
    height: 32px;
    width: auto;
}

.gm-marka-sygnet {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--gm-promien-maly);
    background: var(--primary-500);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.03em;
}

.gm-marka-napisy {
    display: flex;
    flex-direction: column;
}

.gm-marka-produkt {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.025em;
    color: var(--gray-900);
}

.gm-marka-firma {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--gray-500);
}

.dark .gm-marka-produkt {
    color: var(--gray-50);
}

.gm-pod-logowaniem {
    text-align: center;
    margin-top: 0.75rem;
}

.gm-odnosnik {
    font-size: 0.875rem;
    color: var(--primary-600);
    text-decoration: none;
    font-weight: 500;
}

.gm-odnosnik:hover {
    text-decoration: underline;
}

.gm-stopka {
    padding: 14px 18px 22px;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--gray-500);
}

.gm-stopka strong {
    color: var(--gray-600);
    font-weight: 600;
}

.gm-stopka-wersja {
    opacity: 0.75;
}

/* Pasek licencji. Barwy znaczeniowe, nie markowe: ostrzeżenie ma wyglądać
   tak samo w każdej wypożyczalni, choćby jej marka była pomarańczowa. */
.gm-licencja {
    padding: 10px 18px;
    font-size: 0.9rem;
    line-height: 1.5;
    border-bottom: 1px solid;
}

.gm-licencja-tresc {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.gm-licencja-znak {
    font-weight: 800;
}

.gm-licencja a {
    text-decoration: underline;
    color: inherit;
}

.gm-licencja--uwaga {
    background: oklch(0.9700 0.0380 88);
    border-bottom-color: oklch(0.8900 0.0750 85);
    color: oklch(0.4200 0.0950 75);
}

.gm-licencja--blad {
    background: oklch(0.9600 0.0270 25);
    border-bottom-color: oklch(0.8700 0.0650 25);
    color: oklch(0.4300 0.1600 25);
}

.dark .gm-licencja--uwaga {
    background: oklch(0.3100 0.0620 80);
    border-bottom-color: oklch(0.4000 0.0800 80);
    color: oklch(0.9100 0.0600 85);
}

.dark .gm-licencja--blad {
    background: oklch(0.3000 0.0900 25);
    border-bottom-color: oklch(0.3900 0.1200 25);
    color: oklch(0.9100 0.0500 25);
}

/* ——— Czynność nieodwracalna nie jest najgłośniejszą rzeczą na ekranie ——— */

/* Filament rysuje akcje nagłówka jako przyciski wypełnione. Na ekranie edycji
   jedyną taką akcją bywa „Usuń" — i wychodzi z tego strona, na której
   najbardziej rzuca się w oczy przycisk kasujący dane. Obwódka zamiast
   wypełnienia: nadal czerwony, nadal w tym samym miejscu, ale przestaje
   konkurować z tym, po co się tu weszło. */
.fi-header .fi-btn-color-danger {
    background: transparent;
    color: var(--danger-600);
    box-shadow: inset 0 0 0 1px var(--danger-300);
}

.fi-header .fi-btn-color-danger:hover {
    background: var(--danger-50);
    box-shadow: inset 0 0 0 1px var(--danger-400);
}

.dark .fi-header .fi-btn-color-danger {
    color: var(--danger-400);
    box-shadow: inset 0 0 0 1px var(--danger-700);
}

.dark .fi-header .fi-btn-color-danger:hover {
    background: oklch(0.5021 0.18 24.6 / 0.15);
}

/* ——— Ciche etykiety w trybie ciemnym ————————————————————————————————————— */

/* Wszystkie napisy drugoplanowe — wersaliki nad tabelą, nazwy grup w menu,
   nazwa wypożyczalni pod marką, stopka — mają w trybie jasnym stopień 500.
   Po odwróceniu rampy ten sam stopień wypada na ciemnym tle i daje 2,83:1,
   czyli mniej niż połowę progu WCAG AA.
 
   Reguła jest jedna i zbiorcza, bo to jedna ROLA, a nie cztery elementy.
   Łatane po kolei rozjechałyby się przy pierwszym dołożonym napisie —
   dwa razy już się zresztą rozjechały, zanim to zauważyłem. */
.dark .fi-ta-header-cell,
.dark .fi-sidebar-group-label,
.dark .fi-header-subheading,
.dark .gm-marka-firma,
.dark .gm-stopka {
    color: var(--gray-300);
}

.dark .gm-stopka strong {
    color: var(--gray-200);
}
/* ——— Telefon i tablet ——————————————————————————————————————————————————— */

/* Sześć kafelków w jednej kolumnie to na telefonie ekran i pół przewijania,
   zanim widać, co jest do zrobienia na dziś. Kafelki nie muszą tam oddychać
   tak samo jak na monitorze — liczba i tak jest największą rzeczą w kafelku. */
@media (max-width: 640px) {
    .fi-wi-stats-overview-stat {
        padding: 0.85rem 1rem;
    }

    .fi-wi-stats-overview-stat-value {
        font-size: 1.5rem;
    }

    .fi-header-heading {
        font-size: 1.5rem;
    }
}

/* ——— Logowanie: marka prowadzi, formularz jej nie zagłusza ——————————————— */

/* Domyślnie „Zaloguj się" było większe od nazwy produktu i stało tuż pod nią,
   bez odstępu — dwa napisy walczące o tę samą rolę. Na jedynym ekranie,
   na którym marka ma coś do powiedzenia, to ona ma prowadzić; polecenie
   „zaloguj się" i tak jest oczywiste z formularza pod spodem. */

.fi-simple-page .fi-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.fi-simple-page .gm-marka-znak {
    height: 44px;
}

.fi-simple-page .gm-marka-sygnet {
    width: 40px;
    height: 40px;
    font-size: 18px;
}

.fi-simple-page .gm-marka-produkt {
    font-size: 1.3rem;
}

.fi-simple-page .gm-marka-firma {
    font-size: 0.85rem;
}

.fi-simple-header-heading {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gray-500);
}

.dark .fi-simple-header-heading {
    color: var(--gray-300);
}

/* Przycisk logowania to jedyna czynność na tym ekranie — może być pełnej
   szerokości i nieco wyższy niż przyciski w gęstych ekranach roboczych. */
.fi-simple-page .fi-btn {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

/* ——— Strona „Aplikacja terenowa" ———————————————————————————————————————— */

/* Cały układ pisany wprost, bo w panelu nie ma ani Tailwinda, ani wtyczki
   `prose`. Poprzednia wersja tej strony trzymała kroki instalacji w liście
   z klasą `prose` — lista traciła przez to numery i trzy kroki czytały się
   jak jeden akapit. */

.gm-teren {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.gm-teren-kod {
    flex: 0 0 auto;
    text-align: center;
    padding: 1rem;
    border: var(--gm-kreska);
    border-radius: var(--gm-promien);
    /* Kod QR musi mieć białe tło niezależnie od trybu — czytnik szuka
       ciemnych modułów na jasnym polu, nie odwrotnie. */
    background: #fff;
}

.gm-teren-kod img {
    display: block;
    width: 168px;
    height: 168px;
}

.gm-teren-adres {
    margin: 0.75rem 0 0;
    font-size: 0.7rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: oklch(0.52 0.047 246);
    word-break: break-all;
    max-width: 168px;
}

.gm-teren-kroki {
    flex: 1 1 22rem;
    min-width: 0;
}

.gm-teren-kroki ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: krok;
}

.gm-teren-kroki li {
    counter-increment: krok;
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 1.1rem;
    line-height: 1.6;
    color: var(--gray-700);
}

/* Numer kroku jako znak w kółku. Lista instrukcji bez widocznej numeracji
   przestaje być instrukcją — nie widać, że to kolejność, a nie zbiór uwag. */
.gm-teren-kroki li::before {
    content: counter(krok);
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: oklch(0.6561 0.1352 236.2 / 0.14);
    color: var(--primary-700);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.gm-teren-kroki strong {
    color: var(--gray-900);
    font-weight: 600;
}

.gm-teren-kroki em {
    font-style: normal;
    font-weight: 600;
    color: var(--gray-900);
    background: var(--gray-100);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
}

.dark .gm-teren-kroki li {
    color: var(--gray-200);
}

.dark .gm-teren-kroki strong,
.dark .gm-teren-kroki em {
    color: var(--gray-50);
}

.dark .gm-teren-kroki em {
    background: var(--gray-800);
}

.gm-teren-przyciski {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.gm-teren-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-radius: var(--gm-promien-maly);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
}

.gm-teren-btn--glowny {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}

.gm-teren-uwagi p {
    margin: 0 0 0.9rem;
    line-height: 1.6;
    color: var(--gray-700);
}

.gm-teren-uwagi p:last-child {
    margin-bottom: 0;
}

.gm-teren-uwagi strong {
    color: var(--gray-900);
    font-weight: 600;
}

.dark .gm-teren-uwagi p {
    color: var(--gray-200);
}

.dark .gm-teren-uwagi strong {
    color: var(--gray-50);
}

/* ——— Ekran licencji ——————————————————————————————————————————————————————— */

/* Stan licencji słowami i barwą roli, nie kodem. Barwy znaczeniowe, a nie
   markowe — ostrzeżenie ma wyglądać tak samo w każdej wypożyczalni. */

.gm-licencja-komunikat {
    border-radius: var(--gm-promien);
    padding: 0.8rem 1rem;
    font-size: 0.925rem;
    line-height: 1.5;
    border: 1px solid;
}

.gm-licencja-komunikat--ok {
    background: oklch(0.9600 0.0350 160);
    border-color: oklch(0.8600 0.0700 160);
    color: oklch(0.4000 0.0900 160);
}

.gm-licencja-komunikat--uwaga {
    background: oklch(0.9700 0.0380 88);
    border-color: oklch(0.8900 0.0750 85);
    color: oklch(0.4200 0.0950 75);
}

.gm-licencja-komunikat--blad {
    background: oklch(0.9600 0.0270 25);
    border-color: oklch(0.8700 0.0650 25);
    color: oklch(0.4300 0.1600 25);
}

.gm-licencja-stan {
    border: var(--gm-kreska);
    border-left-width: 4px;
    border-radius: var(--gm-promien);
    background: #fff;
    padding: 1.1rem 1.25rem;
}

.dark .gm-licencja-stan {
    background: var(--gray-900);
}

.gm-licencja-stan--ok { border-left-color: oklch(0.6200 0.1300 160); }
.gm-licencja-stan--uwaga { border-left-color: oklch(0.7200 0.1400 75); }
.gm-licencja-stan--blad { border-left-color: oklch(0.5500 0.1800 25); }

.gm-licencja-stan-glowa {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.gm-licencja-stan-glowa h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--gray-900);
}

.dark .gm-licencja-stan-glowa h2 {
    color: var(--gray-50);
}

.gm-licencja-kropka {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.gm-licencja-stan--ok .gm-licencja-kropka { background: oklch(0.6200 0.1300 160); }
.gm-licencja-stan--uwaga .gm-licencja-kropka { background: oklch(0.7200 0.1400 75); }
.gm-licencja-stan--blad .gm-licencja-kropka { background: oklch(0.5500 0.1800 25); }

.gm-licencja-opis {
    margin: 0.6rem 0 0;
    line-height: 1.55;
    color: var(--gray-700);
}

.dark .gm-licencja-opis {
    color: var(--gray-200);
}

.gm-licencja-dane {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.25rem;
    margin: 0.9rem 0 0;
    font-size: 0.925rem;
}

.gm-licencja-dane dt {
    color: var(--gray-500);
}

.gm-licencja-dane dd {
    margin: 0;
    font-weight: 600;
    color: var(--gray-900);
}

.dark .gm-licencja-dane dt { color: var(--gray-300); }
.dark .gm-licencja-dane dd { color: var(--gray-50); }

.gm-licencja-siatka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
}

.gm-licencja-karta {
    border: var(--gm-kreska);
    border-radius: var(--gm-promien);
    background: #fff;
    padding: 1.1rem 1.25rem;
}

.dark .gm-licencja-karta {
    background: var(--gray-900);
}

.gm-licencja-karta h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
}

.gm-licencja-karta p {
    margin: 0 0 0.9rem;
    line-height: 1.55;
    color: var(--gray-700);
    font-size: 0.925rem;
}

.dark .gm-licencja-karta h3 { color: var(--gray-50); }
.dark .gm-licencja-karta p { color: var(--gray-200); }

.gm-licencja-zamowienie {
    margin: 0 0 0.9rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--gm-promien-maly);
    background: var(--gray-100);
    color: var(--gray-900);
    font: 0.85rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-all;
}

.dark .gm-licencja-zamowienie {
    background: var(--gray-800);
    color: var(--gray-50);
}

.gm-licencja-plik {
    display: block;
    margin: 0 0 0.75rem;
    padding: 0.85rem;
    border: 1.5px dashed var(--gray-300);
    border-radius: var(--gm-promien-maly);
    font-size: 0.9rem;
}

.gm-licencja-wklej {
    margin: 0 0 1rem;
    font-size: 0.875rem;
}

.gm-licencja-wklej summary {
    cursor: pointer;
    color: var(--primary-600);
    font-weight: 500;
}

.gm-licencja-wklej textarea {
    display: block;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--gm-promien-maly);
    font: 0.8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #fff;
    color: var(--gray-900);
}

.gm-licencja-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: var(--gm-promien-maly);
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid var(--gray-300);
    background: transparent;
    color: var(--gray-700);
    cursor: pointer;
}

.gm-licencja-btn--glowny {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}

.dark .gm-licencja-btn { color: var(--gray-100); border-color: var(--gray-700); }
.dark .gm-licencja-btn--glowny { color: #fff; border-color: var(--primary-600); }

.gm-licencja-przygaszone {
    color: var(--gray-500);
    font-weight: 400;
}

.dark .gm-licencja-przygaszone {
    color: var(--gray-300);
}

.gm-licencja-maly {
    font-size: 0.8rem !important;
    margin-top: 0.9rem !important;
    margin-bottom: 0 !important;
}

/* ——— Logowanie: dwie kolumny ———————————————————————————————————————————— */

/* Formularz po lewej, marka po prawej. Wszystko pod klasą `gm-logowanie`,
   którą na `<body>` stawia wyłącznie `App\Filament\Auth\Logowanie` — inne
   proste strony panelu zostają przy karcie na środku.

   Kolumna marki to jedyne miejsce w aplikacji, gdzie niebieski wypełnia
   dużą płaszczyznę. Gradient schodzi ku dołowi do ciemniejszego odcienia,
   bo tam stoi biały napis: na jasnym #1b9cd8 biel ma ledwie 3:1. */

.gm-logowanie .fi-simple-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 42%);
    grid-template-rows: auto 1fr auto;
    align-items: stretch;
    background: #fff;
}

.dark .gm-logowanie .fi-simple-layout {
    background: var(--gray-950);
}

.gm-logowanie-gora {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px clamp(20px, 4vw, 48px);
    border-bottom: 1px solid var(--gray-200);
}

.dark .gm-logowanie-gora {
    border-bottom-color: var(--gray-800);
}

.gm-logowanie-logo {
    height: 40px;
    width: auto;
    display: block;
}

/* Napis „Medic" w logo jest granatowy i na ciemnym tle znika. Jasna
   plakietka zamiast osobnego pliku logo: jedno źródło znaków zostaje jedno. */
.dark .gm-logowanie-logo {
    box-sizing: content-box;
    padding: 5px 10px;
    border-radius: 10px;
    background: #fff;
}

.gm-logowanie-firma {
    padding-left: 14px;
    border-left: 1px solid var(--gray-200);
    font-size: 0.9rem;
    color: var(--gray-500);
}

.dark .gm-logowanie-firma {
    border-left-color: var(--gray-700);
    color: var(--gray-300);
}

.gm-logowanie .fi-simple-main-ctn {
    grid-column: 1;
    grid-row: 2;
    padding: 0 clamp(20px, 4vw, 48px);
}

/* Bez karty: na białej kolumnie ramka wokół formularza byłaby pudełkiem
   w pudełku. */
.gm-logowanie .fi-simple-main {
    max-width: 28rem;
    margin-block: 3rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    --tw-ring-color: transparent;
    --tw-shadow: 0 0 #0000;
    box-shadow: none;
}

.gm-logowanie .gm-stopka {
    grid-column: 1;
    grid-row: 3;
}

.gm-logowanie .fi-simple-page-content {
    row-gap: 2.25rem;
}

.gm-logowanie .fi-simple-header-heading {
    font-size: clamp(1.9rem, 2.6vw, 2.5rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--gray-950);
}

.dark .gm-logowanie .fi-simple-header-heading {
    color: #fff;
}

.gm-logowanie .fi-simple-header-subheading {
    margin-top: 0.6rem;
    font-size: 1.05rem;
    color: var(--gray-500);
}

.dark .gm-logowanie .fi-simple-header-subheading {
    color: var(--gray-300);
}

/* Pola: jasne tło i kreska u dołu zamiast ramki dookoła. W reszcie panelu
   ramkę rysuje `border`, a obwódkę fokusu cień — tu zostaje z nich tylko
   dolna krawędź, która przy fokusie grubieje i nabiera barwy marki. */
.gm-logowanie .fi-input-wrp {
    border: 0;
    border-bottom: 1.5px solid var(--gray-300);
    border-radius: 10px 10px 0 0;
    background-color: oklch(0.972 0.018 236);
    box-shadow: none;
}

.gm-logowanie .fi-input-wrp:focus-within {
    border-bottom-color: var(--primary-600);
    box-shadow: inset 0 -1.5px 0 var(--primary-600);
}

.gm-logowanie .fi-input-wrp.fi-invalid {
    border-bottom-color: var(--danger-600);
    box-shadow: inset 0 -1.5px 0 var(--danger-600);
}

.dark .gm-logowanie .fi-input-wrp {
    background-color: color-mix(in oklab, #fff 6%, transparent);
    border-bottom-color: var(--gray-600);
}

.dark .gm-logowanie .fi-input-wrp:focus-within {
    border-bottom-color: var(--primary-400);
    box-shadow: inset 0 -1.5px 0 var(--primary-400);
}

.gm-logowanie .fi-input {
    font-size: 1rem;
    padding-block: 0.7rem;
}

.gm-logowanie-haslo {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dark .gm-logowanie-haslo {
    color: var(--primary-400);
}

.gm-logowanie .fi-simple-page .fi-btn {
    border-radius: 999px;
    padding-block: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* Nasycony odcień z białym napisem, jak na reszcie przycisków głównych
       w arkuszu — jasny błękit z ciemnym tekstem ginął obok pól. */
    background-color: var(--primary-600);
    color: #fff;
    box-shadow: 0 12px 24px -14px var(--primary-600);
}

.gm-logowanie .fi-simple-page .fi-btn:hover {
    background-color: var(--primary-700);
}

.gm-logowanie-bok {
    grid-column: 2;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    padding: clamp(24px, 4vw, 56px);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 92% 6%, rgb(255 255 255 / 0.12) 0 150px, transparent 151px),
        radial-gradient(circle at 4% 96%, rgb(255 255 255 / 0.07) 0 190px, transparent 191px),
        linear-gradient(175deg, #29abe6 0%, #1b9cd8 40%, #1479b6 75%, #0f6399 100%);
}

.dark .gm-logowanie-bok {
    background:
        radial-gradient(70% 45% at 85% 0%, rgb(255 255 255 / 0.08), transparent 70%),
        linear-gradient(175deg, #1a8bc3 0%, #146fa3 50%, #0c4d75 100%);
}

.gm-logowanie-ilustracja {
    width: 100%;
    max-width: 480px;
    max-height: 70dvh;
    height: auto;
}

.gm-logowanie-haslo-marki {
    max-width: 26rem;
    text-align: center;
}

.gm-logowanie-haslo-marki strong {
    display: block;
    font-size: 1.35rem;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.gm-logowanie-haslo-marki span {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.95rem;
    opacity: 0.92;
}

/* Na wąskim ekranie formularz ma pierwszeństwo: kolumna marki znika,
   a logo w pasku zostaje. */
@media (max-width: 1023px) {
    .gm-logowanie .fi-simple-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .gm-logowanie-bok {
        display: none;
    }
}

/* Kreska między polem hasła a okiem „pokaż hasło" dzieliła pole na dwa. */
.gm-logowanie .fi-input-wrp-suffix {
    border-inline-start: 0;
}

/* ——— Pulpit ——————————————————————————————————————————————————————————————— */

/* Dwie kolumny płynące niezależnie: praca po lewej, kafelki po prawej.
   Kafelki przyklejają się pod paskiem, bo lewa kolumna bywa długa, a skróty
   mają być pod ręką przez cały czas. */

.gm-pulpit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.5rem;
    align-items: start;
}

.gm-pulpit--same-kafelki {
    grid-template-columns: minmax(0, 1fr);
}

.gm-pulpit--same-kafelki .gm-pulpit-kafelki {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.gm-pulpit-praca {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
}

.gm-pulpit-kafelki {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 5.5rem;
}

@media (max-width: 1100px) {
    .gm-pulpit {
        grid-template-columns: minmax(0, 1fr);
    }

    .gm-pulpit-kafelki {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

.gm-kafelek {
    display: block;
    padding: 1.1rem 1.25rem;
    border: var(--gm-kreska);
    border-radius: var(--gm-promien);
    background: #fff;
    box-shadow: var(--gm-cien);
    color: inherit;
    text-decoration: none;
}

.dark .gm-kafelek {
    background: var(--gray-900);
}

.gm-kafelek--link {
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.gm-kafelek--link:hover {
    border-color: var(--primary-300);
    box-shadow: var(--gm-cien-uniesiony);
    transform: translateY(-1px);
}

/* Kafelek, który woła o uwagę, dostaje barwny brzeg — nie całe tło.
   Czerwone tło przy każdej zaległości zrobiłoby z pulpitu alarm na stałe. */
.gm-kafelek--uwaga {
    box-shadow: inset 4px 0 0 var(--warning-500), var(--gm-cien);
}

.gm-kafelek--blad {
    box-shadow: inset 4px 0 0 var(--danger-600), var(--gm-cien);
}

.gm-kafelek-tytul {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-900);
}

.dark .gm-kafelek-tytul {
    color: var(--gray-50);
}

.gm-kafelek-ikona {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    color: var(--primary-600);
}

.dark .gm-kafelek-ikona {
    color: var(--primary-400);
}

.gm-kafelek-liczba {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--gray-950);
}

.dark .gm-kafelek-liczba {
    color: #fff;
}

.gm-kafelek-opis {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--gray-500);
}

.dark .gm-kafelek-opis {
    color: var(--gray-300);
}

.gm-kafelek-opis strong {
    color: var(--danger-600);
}

.gm-kafelek-para {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.gm-kafelek-dalej {
    display: inline-block;
    margin-top: 0.8rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-600);
}

.gm-kafelek-dalej::after {
    content: " \203A";
}

.dark .gm-kafelek-dalej {
    color: var(--primary-400);
}

.gm-akcje {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gm-akcja {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--gm-promien-maly);
    color: inherit;
    text-decoration: none;
}

.gm-akcja:hover {
    background: var(--primary-50);
}

.dark .gm-akcja:hover {
    background: color-mix(in oklab, var(--primary-500) 14%, transparent);
}

.gm-akcja-znak {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--primary-50);
    color: var(--primary-600);
}

.dark .gm-akcja-znak {
    background: color-mix(in oklab, var(--primary-500) 18%, transparent);
    color: var(--primary-300);
}

.gm-akcja-znak svg {
    width: 1.2rem;
    height: 1.2rem;
}

.gm-akcja-tekst strong {
    display: block;
    font-size: 0.9rem;
    color: var(--gray-900);
}

.dark .gm-akcja-tekst strong {
    color: var(--gray-50);
}

.gm-akcja-tekst span {
    display: block;
    font-size: 0.78rem;
    color: var(--gray-500);
}

.dark .gm-akcja-tekst span {
    color: var(--gray-300);
}

.gm-kafelek--teren {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Kod QR zawsze na bieli, także w trybie ciemnym: ciemny kod na ciemnym
   tle aparat w telefonie czyta gorzej albo wcale. */
.gm-kafelek-qr {
    width: 92px;
    height: 92px;
    flex-shrink: 0;
    padding: 5px;
    border: var(--gm-kreska);
    border-radius: var(--gm-promien-maly);
    background: #fff;
}

/* ——— Certyfikaty KSeF: kroki ————————————————————————————————————————————— */

/* Lista numerowana wprost, bez `prose` — tej klasy w panelu nie ma
   i lista traciła numery (ta sama pułapka co na stronie aplikacji terenowej). */
.gm-kroki {
    margin: 0;
    padding-inline-start: 1.25rem;
    list-style: decimal;
    font-size: 0.9rem;
    line-height: 1.6;
}

.gm-kroki li + li {
    margin-top: 0.35rem;
}

.gm-kroki code {
    font-size: 0.85em;
    padding: 0 0.25em;
    border-radius: 4px;
    background: var(--gray-100);
}

.dark .gm-kroki code {
    background: var(--gray-800);
}

/* Podsumowanie nad rejestrem dokumentów: trzy liczby w rzędzie. */
.gm-rejestr-podsumowanie {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
}

.gm-rejestr-podsumowanie strong {
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
}

.gm-rejestr-etykieta {
    display: block;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.gm-rejestr-przychod { color: var(--success-600); }
.gm-rejestr-rozchod { color: var(--warning-600); }

/* Drobny przypis pod listą — np. ile miejsca zajmują kopie zapasowe. */
.gm-drobne {
    margin: 0.85rem 0 0;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.gm-kroki-brak {
    margin: 0.85rem 0 0;
    padding: 0.6rem 0.8rem;
    border-radius: var(--gm-promien-maly);
    font-size: 0.875rem;
    background: color-mix(in oklab, var(--warning-500) 12%, transparent);
}

/* ——— Klasy pomocnicze dla naszych widoków (22.09.2026) ————————————————
   Widoki własnych ekranów (raporty, raport kasowy, import, aktualizacja,
   ustawienia) pisaliśmy klasami w stylu Tailwinda, ale arkusz Filamenta
   zawiera tylko klasy, których używa sam Filament — naszych nie było.
   Ekrany wyglądały przez to jak goły tekst: liczby jedna pod drugą,
   tabele bez odstępów, przycisk „Zapisz" po lewej.

   Poniżej dokładnie te klasy, których używają nasze widoki — nie cały
   Tailwind. Nowa klasa w widoku = dopisać ją tutaj. */
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.flex-wrap { flex-wrap: wrap; }
.items-end { align-items: flex-end; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.w-full { width: 100%; }
.max-w-none { max-width: none; }
.overflow-x-auto { overflow-x: auto; }
.whitespace-nowrap { white-space: nowrap; }

.mb-1 { margin-bottom: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-6 { margin-top: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.025em; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-amber-600, .text-warning-600 { color: var(--warning-600); }
.text-green-600, .text-success-600 { color: var(--success-600); }
.text-red-600, .text-danger-600 { color: var(--danger-600); }
.dark .dark\:text-gray-300 { color: var(--gray-300); }
.dark .dark\:text-gray-400 { color: var(--gray-400); }

.border-b { border-bottom: 1px solid; }
.border-t { border-top: 1px solid; }
.border-gray-100 { border-color: var(--gray-100); }
.border-gray-200 { border-color: var(--gray-200); }
.dark .dark\:border-gray-700 { border-color: var(--gray-700); }
.dark .dark\:border-gray-800 { border-color: var(--gray-800); }

/* Tabela w sekcji: nagłówek przy lewej, odstęp między kolumnami. */
table.w-full { border-collapse: collapse; }

@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Liczby w podsumowaniach: podpis nad wartością, bez domyślnego wcięcia dd. */
dl.grid dd { margin: 0; }

/* Zakres dat na raporcie kasowym — pola obok siebie, nie na całą szerokość. */
.gm-okres .fi-input-wrp { width: 11rem; }

/* ——— Licznik ważności kodu z Google Authenticator (17.10.2026) ——————————
   Pod polem kodu przy logowaniu (App\Filament\Auth\GoogleAuthenticator):
   ile sekund zostało, zanim aplikacja w telefonie pokaże nowy kod. Pasek
   kurczy się z kodem; ostatnie 5 sekund — czerwony, żeby nie wpisywać
   kodu, który za chwilę zniknie. */
.gm-licznik-kodu {
    display: grid;
    gap: 0.35rem;
}

.gm-licznik-kodu-tekst {
    font-size: 0.85rem;
    color: var(--gray-600);
}

.gm-licznik-kodu-tekst strong {
    font-variant-numeric: tabular-nums;
    color: var(--gray-900);
}

.gm-licznik-kodu-uwaga {
    color: var(--danger-600);
}

.gm-licznik-kodu-pasek {
    height: 4px;
    border-radius: 999px;
    background: var(--gray-200);
    overflow: hidden;
}

.gm-licznik-kodu-pasek > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary-500);
    transition: width 0.25s linear;
}

.gm-licznik-kodu-pasek > span.gm-licznik-kodu-koniec {
    background: var(--danger-500);
}

.dark .gm-licznik-kodu-tekst {
    color: var(--gray-300);
}

.dark .gm-licznik-kodu-tekst strong {
    color: #fff;
}

.dark .gm-licznik-kodu-pasek {
    background: var(--gray-700);
}