/*
 * Układ ekranu na wzór WAPRO (2.10.2026).
 *
 * Klient pokazał zrzuty WAPRO („wapro podgląd") jako wzór wyglądu, przy
 * zachowaniu kolorów GoMedic. Ten arkusz idzie PO panel.css i zmienia
 * konstrukcję ekranu, nie barwy marki:
 *
 *   WAPRO                         GoMedic
 *   czerwony akcent (aktywne,     →  niebieski marki (--primary-*)
 *   odnośniki, podkreślenia)
 *   czarne przyciski „Dodaj",     →  najciemniejszy granat rampy (--gray-950)
 *   „Zapisz"
 *   szare tło, białe karty        →  nasza rampa szarości (--gray-50 / biel)
 *
 * Części układu:
 *   - wąski pasek ikon działów z lewej (marka/pasek-ikon.blade.php),
 *   - górna belka: logo z lewej, wyszukiwarka na środku,
 *   - zakładki działu nad treścią (marka/zakladki-dzialu.blade.php),
 *   - nagłówek strony w karcie, z inicjałami (gomedic/uklad.js),
 *   - tabele, przyciski, pola i okna — gęściej, w kartach, pigułki.
 *
 * Na telefonie (< 64rem) pasek ikon znika, a zostaje lista Filamenta
 * w wysuwanym panelu — tak jak dotąd.
 */

:root {
    --gm-szyna: 5.75rem;
    --gm-karta: 14px;
    --gm-pigulka: 999px;
}

/* ——— Pasek ikon (komputer) ———————————————————————————————————————————— */

.gm-pasek {
    display: none;
}

@media (min-width: 64rem) {
    :root {
        --sidebar-width: var(--gm-szyna);
    }

    .fi-sidebar {
        background: var(--gray-50);
        border-right: none;
    }

    /* Logo idzie do górnej belki, a lista Filamenta ustępuje paskowi ikon. */
    .fi-sidebar-header,
    .fi-sidebar-nav-groups,
    .fi-sidebar .fi-sidebar-footer {
        display: none !important;
    }

    .fi-sidebar-nav {
        padding: 0.5rem 0.5rem 1rem;
    }

    .gm-pasek {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .gm-pasek-dzial {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
        width: 100%;
        padding: 0.6rem 0.25rem 0.5rem;
        border-radius: 12px;
        color: var(--gray-700);
        text-decoration: none;
        transition: background-color 120ms ease, color 120ms ease;
    }

    .gm-pasek-dzial:hover,
    .gm-pasek-dzial--otwarty {
        background: var(--gray-200);
        color: var(--gray-950);
    }

    /* Aktywny dział: barwa marki i kreska z lewej, jak w WAPRO. */
    .gm-pasek-dzial--aktywny {
        color: var(--primary-600);
    }

    .gm-pasek-dzial--aktywny::before {
        content: "";
        position: absolute;
        left: -0.5rem;
        top: 0.5rem;
        bottom: 0.5rem;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--primary-500);
    }

    .gm-pasek-ikona {
        width: 1.5rem;
        height: 1.5rem;
    }

    .gm-pasek-podpis {
        font-size: 0.68rem;
        font-weight: 500;
        line-height: 1.1;
        text-align: center;
    }
}

/* Rozwinięta lista działu — przeniesiona do <body>, stała pozycja obok paska.
   Bez przewijania wewnątrz: podmenu wychodzi w bok poza listę, a przewijana
   lista by je przycięła. Działy są krótkie, bo dłuższe części siedzą w podmenu. */
.gm-pasek-lista {
    position: fixed;
    left: calc(var(--gm-szyna) + 0.25rem);
    z-index: 40;
    min-width: 16rem;
    padding: 0.5rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px -18px oklch(0.25 0.05 250 / 0.45), 0 0 0 1px var(--gray-200);
}

/* Podmenu „›": lista obok wiersza, na tej samej wysokości (jak w WAPRO). */
.gm-pasek-pod {
    position: relative;
}

.gm-pasek-lista--boczna {
    position: fixed;
    max-height: calc(100vh - 1.5rem);
    overflow-y: auto;
}

/* Lista działu wyższa od okna (niski ekran, powiększenie) — przewija się
   zamiast uciekać w dół. Tylko wtedy: przewijanie przycina mostek do podmenu. */
.gm-pasek-lista--przewijana {
    max-height: calc(100vh - 1.5rem);
    overflow-y: auto;
}

/* Mostek nad odstępem między listami — kursor przechodzący do podmenu nie
   opuszcza wiersza, więc podmenu się nie zamyka po drodze. */
.gm-pasek-pod::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 0.9rem;
}

/* Lista pod rozwijaną zakładką działu — pozycję liczy Alpine. */
.gm-pasek-lista--pod-zakladka {
    min-width: 14rem;
}

.gm-pasek-naglowek {
    margin: 0.35rem 0.25rem 0.25rem;
    padding: 0.35rem 0.5rem 0.4rem;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
}

.gm-pasek-pozycja {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 9px;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    color: var(--gray-800);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.gm-pasek-pozycja:hover,
.gm-pasek-pozycja--otwarta {
    background: var(--gray-100);
    color: var(--gray-950);
}

.gm-pasek-pozycja--aktywna {
    color: var(--primary-600);
    font-weight: 600;
}

.gm-pasek-strzalka {
    width: 1rem;
    height: 1rem;
    color: var(--gray-500);
}

.gm-pasek-licznik {
    display: inline-flex;
    min-width: 1.25rem;
    justify-content: center;
    padding: 0 0.35rem;
    border-radius: var(--gm-pigulka);
    background: var(--primary-50);
    color: var(--primary-700);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25rem;
}

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

.dark .gm-pasek-pozycja {
    color: var(--gray-100);
}

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

.fi-topbar {
    background: var(--gray-50);
    box-shadow: none;
    border-bottom: none;
    min-height: 4rem;
}

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

@media (min-width: 64rem) {
    /* Logo w belce na komputerze (w WAPRO stoi obok przycisku menu). */
    .fi-topbar-start {
        display: flex !important;
        align-items: center;
    }

    .fi-topbar-collapse-sidebar-btn-ctn {
        display: none !important;
    }

    /* Wyszukiwarka na środku belki, „+ Dodaj" i konto po prawej. */
    .fi-topbar-end {
        flex: 1;
        justify-content: flex-end;
    }

    .fi-header > * {
        align-self: center;
    }

    .fi-topbar .fi-global-search {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: min(34rem, 40vw);
    }

    .fi-topbar .fi-global-search .fi-input-wrp {
        border-radius: var(--gm-pigulka);
    }
}

/* ——— Zakładki działu ————————————————————————————————————————————————————— */

.gm-zakladki-dzialu {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    margin: -0.5rem 0 0.25rem;
    border-bottom: 1px solid var(--gray-200);
}

/* Zakładki ekranów: przy wielu ekranach rząd przewija się w poziomie (bez
   paska — kółkiem albo gestem), a wygaszenie przy prawej krawędzi mówi,
   że jest dalej. */
.gm-zakladki-lewe {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 1.6rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 2rem 0 0.25rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

.gm-zakladki-lewe::-webkit-scrollbar {
    display: none;
}

/* Sekcje działu („Szybkie akcje ⌄", „Operacje ⌄") po prawej, jak w WAPRO. */
.gm-zakladki-prawe {
    flex: none;
    display: flex;
    gap: 1.25rem;
    padding-right: 0.25rem;
}

.gm-zakladka-rozwijana {
    flex: none;
    display: flex;
}

.gm-zakladka-dzialu {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0 0.7rem;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    color: var(--gray-600);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.gm-zakladka-dzialu--sekcja {
    color: var(--gray-900);
    font-weight: 500;
}

.gm-zakladka-strzalka {
    width: 0.9rem;
    height: 0.9rem;
}

.gm-zakladka-dzialu:hover {
    color: var(--gray-950);
}

.gm-zakladka-dzialu--aktywna {
    color: var(--gray-950);
    font-weight: 600;
    border-bottom-color: var(--primary-500);
}

.dark .gm-zakladka-dzialu--aktywna,
.dark .gm-zakladka-dzialu:hover {
    color: var(--gray-50);
}

/* ——— Nagłówek strony w karcie ———————————————————————————————————————————— */

.fi-header {
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: var(--gm-karta);
    background: #fff;
    box-shadow: var(--gm-cien);
}

.dark .fi-header {
    background: var(--gray-900);
}

/* Okruszki zastępują zakładki działu — dwa rzędy nawigacji to o jeden za dużo. */
.fi-header .fi-breadcrumbs {
    display: none;
}

.fi-header-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.gm-inicjaly {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--gm-pigulka);
    background: var(--primary-50);
    color: var(--primary-700);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.fi-header-subheading {
    margin-top: 0.15rem;
    font-size: 0.82rem;
}

/* ——— Karty: sekcje, tabele, widżety ——————————————————————————————————————— */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-widget > .fi-section {
    border-radius: var(--gm-karta);
    border: none;
    box-shadow: var(--gm-cien);
}

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn {
    background: #fff;
}

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

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

.fi-ta-header-cell {
    background: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-700);
    text-transform: none;
    letter-spacing: 0;
}

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

.fi-ta-header-cell-label {
    text-transform: none;
    letter-spacing: 0;
}

/* Gęściej — w WAPRO na ekranie mieści się dwa razy więcej wierszy. */
.fi-ta-cell {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

/* I gęściej w poziomie (14.10.2026, „okna pościskane"): 8 px zamiast 12 px
   z każdej strony komórki daje liście z dziesięcioma kolumnami ~160 px —
   tyle brakowało, żeby lista faktur mieściła się bez przewijania w bok. */
.fi-ta-cell .fi-ta-text,
.fi-ta-cell .fi-ta-icon,
.fi-ta-header-cell {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.fi-ta-row:hover {
    background: var(--gray-50);
}

/* Zaznaczony wiersz: ciemne tło, jasny tekst — od razu widać, na czym
   działają przyciski nad tabelą. */
.fi-ta-row.fi-selected,
.fi-ta-row.fi-ta-row-selected {
    background: var(--gray-700) !important;
}

.fi-ta-row.fi-selected .fi-ta-text,
.fi-ta-row.fi-selected .fi-ta-text-item,
.fi-ta-row.fi-ta-row-selected .fi-ta-text,
.fi-ta-row.fi-ta-row-selected .fi-ta-text-item {
    color: #fff;
}

/* Nazwy-odnośniki w pierwszej kolumnie w barwie marki, jak w WAPRO. */
.fi-ta-record-url .fi-ta-col-wrp:first-of-type .fi-ta-text-item,
.fi-ta-cell a.fi-ta-text-item {
    color: var(--primary-600);
}

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

/* Główne czynności („Dodaj", „Zapisz") — ciemne pigułki. */
.fi-btn {
    border-radius: var(--gm-pigulka);
}

.fi-btn.fi-color-primary:not(.fi-btn-outlined),
.fi-btn.fi-color.fi-color-primary:not(.fi-btn-outlined) {
    --color-400: var(--gray-700);
    --color-500: var(--gray-800);
    --color-600: var(--gray-950);
    background: var(--gray-950);
    color: #fff;
}

.fi-btn.fi-color-primary:not(.fi-btn-outlined):hover {
    background: var(--gray-800);
}

/* Ikona w ciemnej pigułce — Filament barwi ją osobno („fi-text-color-950")
   i na granatowym tle znikała. */
.fi-btn.fi-color-primary:not(.fi-btn-outlined) .fi-icon {
    color: #fff;
}

/* Akcje strony przeniesione do paska nad tabelą (App\Filament\AkcjeWTabeli):
   w pasku po lewej, jak „⊕ Dodaj" w WAPRO, a z nagłówka znikają. */
.fi-page:has(.gm-akcje-tabeli) .fi-header-actions-ctn {
    display: none;
}

.gm-akcje-tabeli {
    margin-right: auto;
}

.gm-akcje-tabeli .fi-ac {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Drugorzędne — jasnoszare pigułki bez obwódki. */
.fi-btn.fi-color-gray:not(.fi-btn-outlined) {
    background: var(--gray-200);
    border: none;
    box-shadow: none;
    color: var(--gray-900);
}

.fi-btn.fi-color-gray:not(.fi-btn-outlined):hover {
    background: var(--gray-300);
}

/* Przełącznik wyboru („Osoba prywatna / Firma lub instytucja"): opcje to
   przyciski, a reguła ciemnej pigułki wyżej malowała je wszystkie — nie
   było widać, która jest wybrana. Niewybrana — jasnoszara jak drugorzędne. */
.fi-fo-toggle-buttons-input:not(:checked) + .fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    background: var(--gray-200);
    color: var(--gray-900);
    box-shadow: none;
}

.fi-fo-toggle-buttons-input:not(:checked) + .fi-btn.fi-color-primary:not(.fi-btn-outlined):hover {
    background: var(--gray-300);
}

.dark .fi-fo-toggle-buttons-input:not(:checked) + .fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    background: var(--gray-800);
    color: var(--gray-100);
}

.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    background: var(--primary-600);
}

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

.fi-input-wrp {
    border-radius: 10px;
}

/* ——— Zakładki Filamenta (na ekranach) — podkreślenie zamiast kafelków ———— */

.fi-tabs:not(.fi-vertical) {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    gap: 1.4rem;
    border-bottom: 1px solid var(--gray-200);
    justify-content: flex-start;
    margin-inline: 0;
    max-width: none;
}

.fi-resource-list-records-page .fi-tabs:not(.fi-vertical),
.fi-page .fi-tabs:not(.fi-vertical) {
    width: 100%;
}

.fi-tabs:not(.fi-vertical) .fi-tabs-item {
    border-radius: 0;
    padding: 0.55rem 0 0.65rem;
    background: transparent !important;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.fi-tabs:not(.fi-vertical) .fi-tabs-item.fi-active {
    border-bottom-color: var(--primary-500);
}

.fi-tabs:not(.fi-vertical) .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--gray-950);
    font-weight: 600;
}

.dark .fi-tabs:not(.fi-vertical) .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--gray-50);
}

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

.fi-modal-window {
    border-radius: 18px;
}

/* Okna dokumentów szerzej (15.10.2026, klient: „we wszystkich dokumentach jak
   coś dodajemy, okna są za wąskie, wszystko pościskane"). Filament daje im
   stałe 56 rem (4xl) także na ekranie 1600–1900 px — pozycje faktury, PW czy
   zamówienia mieściły wybór towaru na 13 rem, a podpowiedzi łamały się po
   słowie. Reguła po treści okna, a nie okno po oknie: nowy dokument z
   pozycjami sam dostanie szerokie okno, a małe potwierdzenia zostają małe.
     - z pozycjami (repeater) — do 96% ekranu, najwyżej 110 rem,
     - z formularzem w sekcjach (kartoteka, faktura zakupu) — do 76 rem. */
.fi-modal-window:has(.fi-fo-repeater) {
    max-width: min(96vw, 110rem) !important;
}

.fi-modal-window:has(.fi-sc-section):not(:has(.fi-fo-repeater)) {
    max-width: min(94vw, 76rem) !important;
}

/* Lista pozycji dokumentu (repeater) na całą szerokość — bez limitu 38 rem
   zwykłych pól („Zwarte formularze" niżej). Inaczej szersze okno nic nie
   dawało: pozycje faktury stały w 608 px, reszta okna była pusta. */
@media (min-width: 40rem) {
    .fi-fo-field.fi-fo-field-has-inline-label:has(.fi-fo-repeater) {
        grid-template-columns: minmax(7rem, 13rem) minmax(0, 1fr);
    }
}

/* Strony dodawania i zmiany (nowe wypożyczenie, przyjęcie PZ, kartoteki) na
   całą szerokość ekranu, bez limitu 80 rem Filamenta — prośba klienta
   15.10.2026: „pola rozciągnij na całą szerokość wyświetlonej strony". */
.fi-main:has(.fi-resource-create-record-page),
.fi-main:has(.fi-resource-edit-record-page) {
    max-width: none;
}

/* Sekcja z pozycjami przez całą szerokość formularza, także gdy formularz
   ma dwie kolumny — na „Nowym przyjęciu" (PZ) pozycje stały w połowie strony
   (548 px z 1280). Reguła po treści, więc obejmie każdy taki formularz. */
.fi-sc > .fi-grid-col:has(> .fi-sc-component > .fi-sc-section .fi-fo-repeater) {
    grid-column: 1 / -1 !important;
}

.fi-modal-header {
    background: var(--gray-100);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

.dark .fi-modal-header {
    background: var(--gray-800);
}

/* ——— Tło strony ———————————————————————————————————————————————————————————— */

.fi-body,
.fi-main-ctn {
    background: var(--gray-50);
}

.dark .fi-body,
.dark .fi-main-ctn {
    background: var(--gray-950);
}

/* ——— Pulpit startowy (wzór: „pulpit główny/pulpit.png") ————————————————— */

.gm-start {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

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

a.gm-start-karta:hover {
    box-shadow: var(--gm-cien), 0 0 0 1px var(--gray-200);
}

.gm-start-karta--uwaga {
    box-shadow: var(--gm-cien), inset 3px 0 0 var(--danger-500);
}

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

.gm-start-tytul {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-900);
}

.dark .gm-start-tytul {
    color: var(--gray-100);
}

.gm-start-tytul-ikona {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--primary-500);
}

.gm-start-pusto {
    margin: 1.5rem 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--gray-500);
}

/* Pasek z okresem — pigułka „Data: Ostatnie 30 dni" z WAPRO, u nas
   w jasnym odcieniu marki zamiast beżu. */
.gm-start-pasek {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: -0.5rem;
}

.gm-start-okres {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.4rem 0.3rem 0.8rem;
    border-radius: var(--gm-pigulka);
    background: var(--primary-50);
    font-size: 0.8rem;
    color: var(--gray-700);
}

.gm-start-okres select {
    border: 0;
    padding: 0 1.6rem 0 0.1rem;
    background-color: transparent;
    background-position: right 0.2rem center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-950);
    cursor: pointer;
}

.gm-start-okres select:focus {
    outline: none;
    box-shadow: none;
}

.gm-start-laduje {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.gm-start-licencja {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border-radius: var(--gm-karta);
    background: var(--warning-50);
    color: var(--warning-800);
    font-size: 0.875rem;
}

.gm-start-licencja--blad {
    background: var(--danger-50);
    color: var(--danger-800);
}

.gm-start-licencja a {
    margin-left: auto;
    font-weight: 600;
    color: inherit;
}

.gm-start-licencja-ikona {
    width: 1.2rem;
    height: 1.2rem;
}

/* Powitanie. */
.gm-start-powitanie-gora {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.gm-start-powitanie h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--gray-950);
    letter-spacing: -0.01em;
}

.gm-start-powitanie h2 strong {
    font-weight: 700;
}

.dark .gm-start-powitanie h2 {
    color: var(--gray-50);
}

.gm-start-zwin {
    display: inline-flex;
    padding: 0.35rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--gray-600);
    cursor: pointer;
}

.gm-start-zwin:hover {
    background: var(--gray-100);
}

.gm-start-zwin-ikona {
    width: 1.25rem;
    height: 1.25rem;
}

.gm-start-powitanie-kolumny {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 2.5rem;
    margin-top: 1.4rem;
}

.gm-start-krok {
    display: flex;
    gap: 1rem;
}

.gm-start-krok h3 {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-950);
}

.gm-start-krok p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--gray-700);
}

.dark .gm-start-krok h3 {
    color: var(--gray-50);
}

.dark .gm-start-krok p {
    color: var(--gray-300);
}

.gm-start-krok-znak {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--primary-50);
    color: var(--primary-600);
}

.gm-start-krok-znak svg {
    width: 1.75rem;
    height: 1.75rem;
}

.gm-start-qr {
    flex: none;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 8px;
}

.gm-start-przyciski {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

/* Pigułki jak przyciski WAPRO: ciemna główna, szare pozostałe. */
.gm-pigulka {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border: 0;
    border-radius: var(--gm-pigulka);
    background: var(--gray-200);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-950);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.gm-pigulka:hover {
    background: var(--gray-300);
}

.gm-pigulka--ciemna {
    background: var(--gray-950);
    color: #fff;
    font-weight: 600;
}

.gm-pigulka--ciemna:hover {
    background: var(--gray-800);
}

.gm-pigulka-ikona {
    width: 1.1rem;
    height: 1.1rem;
}

.gm-start-rozwin {
    position: relative;
}

.gm-start-rozwin-lista {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 30;
    min-width: 16rem;
    padding: 0.5rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px -18px oklch(0.25 0.05 250 / 0.45), 0 0 0 1px var(--gray-200);
}

.dark .gm-start-rozwin-lista {
    background: var(--gray-900);
}

/* Rzędy kart. */
.gm-start-rzad {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 64rem) {
    .gm-start-rzad--skroty {
        grid-template-columns: 5fr 7fr;
    }

    .gm-start-rzad--wykres {
        grid-template-columns: 2fr 1fr;
    }

    .gm-start-rzad--pol {
        grid-template-columns: 1fr 1fr;
    }
}

.gm-start-kolumna {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Skróty i Sugerowane: ikona w szarym kwadracie i podpis obok. */
.gm-start-ikony {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.gm-start-ikona {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0.4rem 0.25rem 0.25rem;
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--gray-900);
    text-decoration: none;
}

.gm-start-ikona:hover {
    background: var(--gray-50);
}

.dark .gm-start-ikona {
    color: var(--gray-100);
}

.gm-start-ikona-znak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9px;
    background: var(--gray-100);
    color: var(--gray-700);
}

.gm-start-ikona-znak svg {
    width: 1.3rem;
    height: 1.3rem;
}

/* Karty z dużymi liczbami. */
.gm-start-liczby {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem;
}

.gm-start-liczba {
    text-align: center;
    padding-bottom: 1.4rem;
}

.gm-start-liczba .gm-start-tytul {
    text-align: left;
    margin-bottom: 1.1rem;
}

.gm-start-kwota {
    margin: 0;
    font-size: 2.1rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--gray-800);
    font-variant-numeric: tabular-nums;
}

.gm-start-kwota + .gm-start-podpis {
    margin-bottom: 1rem;
}

.gm-start-kwota--marka {
    color: var(--primary-600);
}

.gm-start-kwota--zielona {
    color: var(--success-600);
}

.gm-start-kwota--czerwona {
    color: var(--danger-600);
}

.dark .gm-start-kwota {
    color: var(--gray-100);
}

.dark .gm-start-kwota--marka {
    color: var(--primary-400);
}

.gm-start-podpis {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--gray-500);
}

.gm-start-podpis:last-child {
    margin-bottom: 0;
}

/* Wykres słupkowy — oś z kwotami, przerywane linie, słupki w barwie marki. */
.gm-wykres {
    display: flex;
    gap: 0.6rem;
    height: 17rem;
    padding-bottom: 1.6rem;
}

.gm-wykres-os {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: -0.45rem 0;
    font-size: 0.7rem;
    color: var(--gray-500);
    text-align: right;
    white-space: nowrap;
}

.gm-wykres-pole {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 2%;
    padding: 0 1%;
    border-left: 1px solid var(--gray-300);
}

.gm-wykres-kreska {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--gray-200);
}

.gm-wykres-kolumna {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.gm-wykres-slupek {
    position: relative;
    width: 100%;
    max-width: 2.6rem;
    min-height: 1px;
    border-radius: 4px 4px 0 0;
    background: var(--primary-400);
    transition: background-color 120ms ease;
}

.gm-wykres-kolumna:hover .gm-wykres-slupek {
    background: var(--primary-600);
}

/* Druga seria (WAPRO: „Zakupy") — szara, obok słupka sprzedaży. */
.gm-wykres-kolumna:has(.gm-wykres-slupek--zakup) {
    gap: 2px;
}

.gm-wykres-slupek--zakup,
.gm-wykres-kolumna:hover .gm-wykres-slupek--zakup {
    background: var(--gray-300);
}

.gm-wykres-legenda {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    margin: 0.4rem 0 0;
    font-size: 0.72rem;
    color: var(--gray-500);
}

.gm-wykres-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.gm-wykres-znak {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    background: var(--primary-400);
}

.gm-wykres-znak--zakup {
    background: var(--gray-300);
}

.dark .gm-wykres-slupek--zakup,
.dark .gm-wykres-znak--zakup {
    background: var(--gray-600);
}

.gm-wykres-miesiac {
    position: absolute;
    bottom: -1.5rem;
    font-size: 0.68rem;
    color: var(--gray-500);
    white-space: nowrap;
}

/* Zadania na dziś: rodzaj i „wykonane / wszystkie" po prawej. */
.gm-start-zadanie {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.875rem;
    color: var(--gray-700);
}

.gm-start-zadanie:last-child {
    border-bottom: 0;
}

.gm-start-zadanie strong {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--gray-800);
}

/* Tabele na pulpicie. */
.gm-start-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.gm-start-tabela th {
    padding: 0.5rem 0.4rem;
    border-bottom: 1px solid var(--gray-200);
    font-weight: 500;
    text-align: left;
    color: var(--gray-700);
}

.gm-start-tabela td {
    padding: 0.5rem 0.4rem;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-800);
}

.gm-start-tabela a {
    color: var(--primary-600);
    text-decoration: none;
}

.gm-start-tabela a:hover {
    text-decoration: underline;
}

.gm-start-tabela .gm-prawo {
    text-align: right;
}

.gm-start-znacznik {
    display: inline-block;
    min-width: 1.6rem;
    padding: 0 0.35rem;
    border-radius: 5px;
    background: var(--gray-100);
    text-align: center;
    font-size: 0.78rem;
}

.dark .gm-start-tabela td,
.dark .gm-start-zadanie {
    color: var(--gray-200);
}

/* Zakładki wewnątrz karty — podkreślenie jak w WAPRO. */
.gm-start-zakladki {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.gm-start-zakladka {
    padding: 0.4rem 0 0.55rem;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    color: var(--gray-600);
    cursor: pointer;
}

.gm-start-zakladka--aktywna {
    border-bottom-color: var(--primary-500);
    color: var(--gray-950);
    font-weight: 600;
}

/* Pierwsza kolumna powitania szersza — mieści rząd przycisków
   „Nowy dokument · Nowe wypożyczenie · …" jak w WAPRO. */
@media (min-width: 64rem) {
    .gm-start-powitanie-kolumny {
        grid-template-columns: 1.7fr 1fr 1fr;
    }
}

/* Nagłówek pulpitu w jednym wierszu: „Start  Dziś: … • Za okres: …". */
@media (min-width: 64rem) {
    .fi-page:has(.gm-start) .fi-header > div:first-child {
        display: flex;
        align-items: baseline;
        gap: 2rem;
    }

    .fi-page:has(.gm-start) .fi-header-subheading {
        margin: 0;
        font-size: 0.8rem;
    }
}

/* ——— Formularze: etykieta z boku pola, do prawej (App\Filament\EtykietyZBoku) — */

@media (min-width: 40rem) {
    .fi-fo-field-has-inline-label {
        column-gap: 0.85rem;
    }

    .fi-fo-field-has-inline-label .fi-fo-field-label-col {
        padding-top: 0.5rem;
        /* Do góry pola, nie do środka pola z podpowiedzią pod nim. */
        align-self: stretch;
        align-items: flex-start !important;
    }

    .fi-fo-field-has-inline-label .fi-fo-field-label-ctn {
        justify-content: flex-end;
        width: 100%;
        text-align: right;
    }

    .fi-fo-field-has-inline-label .fi-fo-field-label-content {
        font-weight: 400;
        color: var(--gray-800);
    }

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

/* Nagłówki sekcji formularza: tytuł i cienka kreska pod nim, bez ramki
   wokół — jak „Dane podstawowe" / „Adres" w WAPRO. */
.fi-sc-section > .fi-section .fi-section-header-heading,
.fi-section .fi-section-header-heading {
    font-size: 0.9rem;
    font-weight: 600;
}

/* ——— CRM: tablica i kalendarz zadań (wzór: „crm/tablica zadań.png") ————— */

.gm-crm {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Liczniki u góry: duża liczba, podpis pod nią. */
.gm-crm-liczniki {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 2.5rem;
}

.gm-crm-licznik {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.gm-crm-licznik strong {
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--gray-900);
}

.gm-crm-licznik span {
    font-size: 0.8rem;
    color: var(--gray-600);
}

.gm-crm-licznik--po_terminie strong {
    color: var(--danger-600);
}

.gm-crm-liczniki-akcje {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.gm-crm-tablica {
    display: grid;
    grid-template-columns: repeat(4, minmax(15rem, 1fr));
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.gm-crm-kolumna {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 20rem;
    padding: 0.4rem;
    border-radius: var(--gm-karta);
    background: #fff;
    box-shadow: var(--gm-cien);
}

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

/* Nagłówki kolumn w kolorach stanów (WAPRO: róż, lawenda, fiolet, pomarańcz). */
.gm-crm-kolumna-gora {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}

.gm-crm-kolumna-gora--po_terminie { background: var(--danger-100); color: var(--danger-800); }
.gm-crm-kolumna-gora--zaplanowane { background: var(--primary-100); color: var(--primary-800); }
.gm-crm-kolumna-gora--wykonane { background: var(--success-100); color: var(--success-800); }
.gm-crm-kolumna-gora--odwolane { background: var(--warning-100); color: var(--warning-800); }

.gm-crm-karta {
    padding: 0.7rem 0.8rem 0.6rem 0.95rem;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px oklch(0.25 0.05 250 / 0.12), 0 0 0 1px var(--gray-100);
    border-left: 3px solid var(--primary-400);
}

.gm-crm-karta--po_terminie { border-left-color: var(--danger-500); }
.gm-crm-karta--wykonane { border-left-color: var(--success-500); }
.gm-crm-karta--odwolane { border-left-color: var(--warning-500); }

.dark .gm-crm-karta {
    background: var(--gray-800);
}

.gm-crm-karta h3 {
    margin: 0 0 0.45rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
}

.dark .gm-crm-karta h3 {
    color: var(--gray-100);
}

.gm-crm-karta-kiedy,
.gm-crm-karta-gdzie {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0 0 0.3rem;
    font-size: 0.8rem;
    color: var(--gray-600);
}

.gm-crm-karta-ikona {
    flex: none;
    width: 0.95rem;
    height: 0.95rem;
    margin-top: 0.1rem;
}

.gm-crm-karta-dol {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.gm-crm-przycisk {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border: 0;
    border-radius: var(--gm-pigulka);
    background: var(--gray-100);
    font: inherit;
    font-size: 0.75rem;
    color: var(--gray-800);
    cursor: pointer;
}

.gm-crm-przycisk:hover {
    background: var(--gray-200);
}

.gm-crm-przycisk .gm-crm-karta-ikona {
    margin-top: 0;
}

/* Inicjały przypisanego pracownika, jak „AD" w rogu karty WAPRO. */
.gm-crm-kto {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.3rem;
    border-radius: var(--gm-pigulka);
    background: var(--gray-100);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--gray-700);
}

/* Kalendarz. */
.gm-kal-uklad {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 64rem) {
    .gm-kal-uklad {
        grid-template-columns: 1fr 15rem;
        align-items: start;
    }
}

.gm-kal-pasek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.gm-kal-strzalka {
    display: inline-flex;
    padding: 0.35rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--gray-700);
    cursor: pointer;
}

.gm-kal-strzalka:hover {
    background: var(--gray-100);
}

.gm-kal-strzalka svg {
    width: 1.1rem;
    height: 1.1rem;
}

.gm-kal-tydzien {
    margin-left: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.gm-kal-kto {
    margin-left: auto;
}

.gm-kal-siatka {
    display: grid;
    grid-template-columns: 5.5rem repeat(7, minmax(6.5rem, 1fr));
    overflow-x: auto;
    border-top: 1px solid var(--gray-200);
    border-left: 1px solid var(--gray-200);
}

.gm-kal-siatka > * {
    border-right: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.gm-kal-rog {
    background: var(--gray-50);
}

.gm-kal-dzien {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem 0;
    background: var(--gray-50);
    font-size: 0.75rem;
    color: var(--gray-600);
}

.gm-kal-dzien strong {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--gray-900);
}

.gm-kal-dzien--dzis strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--primary-600);
    color: #fff;
}

.gm-kal-godzina {
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    color: var(--gray-600);
    text-align: right;
}

.gm-kal-komorka {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 2.6rem;
    padding: 0.2rem;
}

.gm-kal-komorka--cala {
    min-height: 4.5rem;
    background: var(--gray-50);
}

.gm-kal-komorka--dzis {
    background: oklch(from var(--primary-50) l c h / 0.6);
}

.gm-kal-komorka--nad {
    background: var(--primary-100);
    outline: 2px dashed var(--primary-400);
    outline-offset: -2px;
}

.gm-kal-zadanie {
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    border-left: 3px solid var(--primary-500);
    background: var(--primary-50);
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-kal-zadanie[draggable="true"] {
    cursor: grab;
}

.gm-kal-zadanie--wykonane {
    border-left-color: var(--success-500);
    background: var(--success-50);
    color: var(--gray-600);
}

.gm-kal-zadanie--odwolane {
    border-left-color: var(--warning-500);
    background: var(--warning-50);
    color: var(--gray-500);
    text-decoration: line-through;
}

.gm-kal-boczny {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.gm-kal-rodzaj {
    display: flex;
    flex-direction: column;
    padding: 0.8rem 1rem;
}

.gm-kal-rodzaj strong {
    font-size: 1.3rem;
    font-weight: 500;
}

.gm-kal-rodzaj span {
    font-size: 0.8rem;
    color: var(--gray-600);
}

/* ——— Pomoc ——————————————————————————————————————————————————————————————— */

.gm-pomoc-krok {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

.gm-pomoc-krok:hover {
    background: var(--gray-50);
}

.gm-pomoc-krok strong {
    font-size: 0.9rem;
    color: var(--primary-700);
}

.gm-pomoc-krok span,
.gm-pomoc-tekst,
.gm-pomoc-lista {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--gray-700);
}

.gm-pomoc-tekst {
    margin: 0 0 0.6rem;
}

.gm-pomoc-link {
    color: var(--primary-600);
    font-weight: 600;
}

.gm-pomoc-lista {
    margin: 0;
    padding-left: 1.1rem;
}

.gm-pomoc-lista li {
    margin-bottom: 0.4rem;
}

.gm-pomoc-dzialy {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem 1.5rem;
}

.gm-pomoc-dzial {
    display: flex;
    gap: 0.75rem;
}

.gm-pomoc-dzial div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8rem;
    color: var(--gray-600);
}

.gm-pomoc-dzial strong {
    font-size: 0.9rem;
    color: var(--gray-900);
}

/* ——— Rodzaje dokumentów nad tabelą, w jednym rzędzie ——————————————————————
   Zakładki listy (Wszystkie, Faktury VAT, Proformy… / Przychody, Rozchody…)
   stały od 1440 px w karcie po prawej, jak drzewo rodzajów w WAPRO — ale
   zabierały tabeli ~16 rem i lista dokumentów magazynowych łamała nazwy
   kontrahentów na pięć linii. Klient (15.10.2026): „menu rodzaje wymyśl
   jakoś inaczej, żeby można było rozszerzyć całą tabelę". Teraz to rząd
   przycisków nad tabelą, a tabela ma całą szerokość. Tylko na listach —
   zakładki w formularzach zostają zwykłe. */

.fi-resource-list-records-page .fi-sc-tabs > .fi-tabs:not(.fi-vertical) {
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0;
    border-bottom: 0;
}

.fi-resource-list-records-page .fi-sc-tabs > .fi-tabs:not(.fi-vertical)::before {
    content: "Rodzaje:";
    margin-right: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-500);
}

.fi-resource-list-records-page .fi-sc-tabs > .fi-tabs:not(.fi-vertical) .fi-tabs-item {
    padding: 0.3rem 0.85rem;
    margin: 0;
    border: 1px solid var(--gray-200);
    border-radius: var(--gm-pigulka);
    background: #fff !important;
}

.fi-resource-list-records-page .fi-sc-tabs > .fi-tabs:not(.fi-vertical) .fi-tabs-item:hover {
    background: var(--gray-50) !important;
}

/* Wybrany rodzaj: barwa marki, jak czerwone „Wszystko" w WAPRO. */
.fi-resource-list-records-page .fi-sc-tabs > .fi-tabs:not(.fi-vertical) .fi-tabs-item.fi-active {
    border-color: var(--primary-300);
    background: var(--primary-50) !important;
}

.fi-resource-list-records-page .fi-sc-tabs > .fi-tabs:not(.fi-vertical) .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--primary-700);
}

.dark .fi-resource-list-records-page .fi-sc-tabs > .fi-tabs:not(.fi-vertical) .fi-tabs-item {
    border-color: var(--gray-700);
    background: var(--gray-900) !important;
}

.dark .fi-resource-list-records-page .fi-sc-tabs > .fi-tabs:not(.fi-vertical) .fi-tabs-item.fi-active {
    background: color-mix(in oklab, var(--primary-500) 20%, transparent) !important;
}

.dark .fi-resource-list-records-page .fi-sc-tabs > .fi-tabs:not(.fi-vertical) .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--primary-200);
}

/* ——— Szczegóły zaznaczonego wiersza pod listą (App\Filament\PodgladPodLista) — */

.gm-ukryte {
    display: none !important;
}

.fi-ta-row.gm-wiersz-podglad {
    cursor: pointer;
}

/* Zaznaczony wiersz: ciemne tło, jasny tekst — jak w WAPRO. */
.fi-ta-row.gm-wiersz-wybrany,
.fi-ta-row.gm-wiersz-wybrany:hover {
    background: var(--gray-700) !important;
}

.fi-ta-row.gm-wiersz-wybrany .fi-ta-text,
.fi-ta-row.gm-wiersz-wybrany .fi-ta-text-item,
.fi-ta-row.gm-wiersz-wybrany .fi-ta-text-description,
.fi-ta-row.gm-wiersz-wybrany .fi-link,
.fi-ta-row.gm-wiersz-wybrany .fi-ta-cell {
    color: #fff !important;
}

/* Ikony w wierszu (wydruk, potwierdzenia kaucji, „⋯") — szare i zielone
   ginęły na ciemnym tle zaznaczonego wiersza (18.10.2026). */
.fi-ta-row.gm-wiersz-wybrany .fi-icon-btn,
.fi-ta-row.gm-wiersz-wybrany .fi-ta-actions .fi-link {
    color: #fff !important;
}

.gm-podglad {
    margin-top: 1.25rem;
}

/* Historia kontrahenta w kartotece — po skoku z „Otwórz pełną kartę"
   tabela nie może schować się pod przyklejonym paskiem u góry. */
.gm-historia-kontrahenta {
    scroll-margin-top: 10rem;
}

.gm-podglad-podpowiedz {
    margin: 0;
    font-size: 0.8rem;
    color: var(--gray-500);
    text-align: center;
}

.gm-podglad-zakladki {
    margin-bottom: 0.75rem;
}

.gm-podglad-zakladki .gm-start-znacznik {
    margin-left: 0.25rem;
}

.gm-podglad-wiecej {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-600);
}

/* Pulpit na telefonie: mniejsze powitanie, bez dużych ikon przy krokach —
   na 375 px zabierały pół szerokości tekstowi. */
@media (max-width: 40rem) {
    .gm-start-powitanie h2 {
        font-size: 1.2rem;
    }

    .gm-start-krok-znak {
        display: none;
    }

    .gm-start-kwota {
        font-size: 1.7rem;
    }
}

/* Zwarte formularze jak w WAPRO: etykieta w kolumnie do 13rem, pole do
   38rem. Domyślny podział Filamenta (⅓ + ⅔ szerokości) na ekranie
   ustawień rozciągał pole „NIP" na 900 px. */
@media (min-width: 40rem) {
    .fi-fo-field.fi-fo-field-has-inline-label {
        grid-template-columns: minmax(7rem, 13rem) minmax(0, 38rem);
    }

    .fi-fo-field-has-inline-label .fi-fo-field-content-col {
        grid-column: auto;
    }
}

/* „XLSX" w pasku nad listą (App\Filament\EksportXlsx) — ikona z podpisem,
   jak w pasku WAPRO. */
.gm-akcje-tabeli {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.gm-xlsx {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
}

.gm-xlsx:hover {
    background: var(--gray-100);
    color: var(--gray-950);
}

.gm-xlsx[disabled] {
    opacity: 0.5;
}

.gm-xlsx-ikona {
    width: 1.15rem;
    height: 1.15rem;
}

/* ——— Wydruk listy („Drukuj" nad tabelą) ——————————————————————————————————
   Na papier idzie nagłówek ekranu i tabela: bez paska ikon, górnej belki,
   zakładek, przycisków, filtrów, akcji wiersza i stronicowania. */
@media print {
    .fi-sidebar,
    .fi-topbar,
    .gm-zakladki-dzialu,
    .fi-ta-header-toolbar,
    .fi-ta-actions,
    .fi-ta-pagination,
    .fi-ta-selection-cell,
    .fi-sc-tabs,
    .gm-podglad,
    .gm-stopka,
    .fi-header-actions-ctn,
    .fi-ta-filter-indicators {
        display: none !important;
    }

    body,
    .fi-main-ctn,
    .fi-main {
        background: #fff !important;
    }

    .fi-main {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
    }

    .fi-layout,
    .fi-main-ctn {
        display: block !important;
    }

    .fi-header,
    .fi-ta-ctn {
        box-shadow: none !important;
        border: 0 !important;
    }

    .fi-page-content > .fi-sc {
        display: block !important;
    }

    .fi-ta-row.gm-wiersz-wybrany {
        background: none !important;
    }

    .fi-ta-row.gm-wiersz-wybrany .fi-ta-text-item,
    .fi-ta-row.gm-wiersz-wybrany .fi-ta-cell {
        color: #000 !important;
    }
}

/* ——— Tryb ciemny: elementy WAPRO (pasek ikon, pigułki, pulpit, CRM) ———— */

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

.dark .gm-pasek-dzial {
    color: var(--gray-300);
}

.dark .gm-pasek-dzial:hover,
.dark .gm-pasek-dzial--otwarty {
    background: var(--gray-800);
    color: #fff;
}

.dark .gm-pasek-dzial--aktywny {
    color: var(--primary-400);
}

.dark .gm-pasek-pozycja:hover,
.dark .gm-pasek-pozycja--otwarta {
    background: var(--gray-800);
    color: #fff;
}

.dark .gm-pasek-naglowek {
    color: var(--gray-100);
    border-bottom-color: var(--gray-700);
}

.dark .gm-zakladka-dzialu,
.dark .gm-zakladka-dzialu--sekcja {
    color: var(--gray-300);
}

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

/* Ciemna pigułka na ciemnej karcie znikała — w trybie ciemnym barwa marki. */
.dark .gm-pigulka.gm-pigulka--ciemna,
.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    background: var(--primary-600);
    color: #fff;
}

.dark .gm-pigulka.gm-pigulka--ciemna:hover {
    background: var(--primary-500);
}

.dark .gm-pigulka {
    background: var(--gray-700);
    color: var(--gray-100);
}

.dark .gm-pigulka:hover {
    background: var(--gray-600);
}

.dark .gm-start-okres {
    background: var(--gray-800);
    color: var(--gray-300);
}

.dark .gm-start-okres select {
    color: var(--gray-50);
}

.dark .gm-start-ikona-znak,
.dark .gm-crm-kto,
.dark .gm-start-znacznik,
.dark .gm-crm-przycisk {
    background: var(--gray-800);
    color: var(--gray-200);
}

.dark .gm-start-ikona:hover,
.dark .gm-pomoc-krok:hover {
    background: var(--gray-800);
}

.dark .gm-start-krok-znak,
.dark .gm-inicjaly {
    background: oklch(from var(--primary-500) l c h / 0.18);
    color: var(--primary-300);
}

.dark .gm-start-zadanie,
.dark .gm-start-tabela td,
.dark .gm-start-tabela th {
    border-color: var(--gray-800);
}

.dark .gm-start-tabela th,
.dark .gm-crm-licznik span,
.dark .gm-kal-godzina,
.dark .gm-kal-dzien {
    color: var(--gray-400);
}

.dark .gm-crm-licznik strong,
.dark .gm-kal-dzien strong,
.dark .gm-pomoc-dzial strong {
    color: var(--gray-100);
}

.dark .gm-kal-siatka,
.dark .gm-kal-siatka > * {
    border-color: var(--gray-800);
}

.dark .gm-kal-rog,
.dark .gm-kal-dzien,
.dark .gm-kal-komorka--cala {
    background: var(--gray-900);
}

.dark .gm-kal-zadanie {
    background: oklch(from var(--primary-500) l c h / 0.15);
    color: var(--gray-100);
}

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

.dark .gm-xlsx:hover {
    background: var(--gray-800);
    color: #fff;
}

.dark .gm-wykres-kreska {
    border-top-color: var(--gray-800);
}

.dark .gm-wykres-pole {
    border-left-color: var(--gray-700);
}

/* Przyciski nad listą zawijają się do szerokości ekranu — na telefonie
   kontener miał szerokość wszystkich przycisków w rzędzie (700 px przy
   343 dostępnych) i ucinał „Fakturę zaliczkową". */
.gm-akcje-tabeli {
    min-width: 0;
    max-width: 100%;
}

.gm-akcje-tabeli .fi-ac {
    min-width: 0;
    max-width: 100%;
}

/* Telefon nie drukuje list — przycisk tylko zajmowałby miejsce. */
@media (max-width: 40rem) {
    .gm-akcje-tabeli .gm-xlsx[title^="Drukuj"] {
        display: none;
    }
}

/* Pusty kontener akcji Filamenta w pasku (akcje stoją w .gm-akcje-tabeli)
   zajmował 36 px — na telefonie robił dziurę nad wyszukiwarką. */
.fi-ta-header-toolbar > .fi-ta-actions:not(:has(*)) {
    display: none;
}

/* Klawisz w Pomocy („Insert", „F2") — jak nakładka na klawiaturze. */
.gm-klawisz {
    flex: none;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--gray-300);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--gray-50);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-800);
    white-space: nowrap;
}

.dark .gm-klawisz {
    border-color: var(--gray-600);
    background: var(--gray-800);
    color: var(--gray-100);
}

/* Stopka sum w oknie dokumentu (marka/suma-dokumentu), jak w WAPRO. */
.gm-suma-dokumentu {
    display: flex;
    justify-content: flex-end;
    gap: 0;
    padding: 0.6rem 0;
    border-top: 1px solid var(--gray-200);
}

.gm-suma-dokumentu > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 7rem;
    padding: 0 1rem;
    border-left: 1px solid var(--gray-200);
}

.gm-suma-dokumentu strong {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}

.gm-suma-dokumentu span {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.gm-suma-dokumentu .gm-suma-dokumentu-razem strong {
    color: var(--primary-600);
    font-weight: 600;
}

.dark .gm-suma-dokumentu,
.dark .gm-suma-dokumentu > div {
    border-color: var(--gray-700);
}

.dark .gm-suma-dokumentu strong {
    color: var(--gray-100);
}

/* ——— Zestawienia (Raporty → Zestawienia, App\Filament\Pages\Zestawienia) —— */

.gm-zestawienia-wiersz {
    cursor: pointer;
}

.gm-zestawienia-wiersz:hover {
    background: var(--gray-50);
}

/* Zaznaczone zestawienie jak zaznaczony wiersz listy: ciemne tło. */
.gm-zestawienia-wiersz.gm-zestawienia-wybrany,
.gm-zestawienia-wiersz.gm-zestawienia-wybrany:hover {
    background: var(--gray-700);
    color: #fff;
}

.gm-zestawienia-opis h3 {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-500);
}

.gm-zestawienia-opis p {
    margin: 0;
    font-size: 0.875rem;
}

.gm-zestawienia-okres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    font-size: 0.8rem;
}

.gm-zestawienia-zakres {
    color: var(--gray-500);
}

.gm-liczba {
    text-align: right !important;
    white-space: nowrap;
}

.gm-zestawienia-suma td {
    font-weight: 700;
    border-top: 2px solid var(--gray-300);
}

.dark .gm-zestawienia-wiersz:hover {
    background: var(--gray-800);
}

.dark .gm-zestawienia-suma td {
    border-top-color: var(--gray-600);
}

/* Pola „Od / Do" przy okresie zestawienia — zwarte, w jednej linii z pigułkami. */
.gm-zestawienia-data {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--gray-500);
}

.gm-zestawienia-data input {
    width: 9.5rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: transparent;
    font-size: 0.8rem;
    color: inherit;
}

.dark .gm-zestawienia-data input {
    border-color: var(--gray-600);
    color-scheme: dark;
}

/* ——— Notatki pod listą (zakładka „Notatki", App\Filament\PodgladPodLista) — */

.gm-notatki-nowa {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.gm-notatki-nowa textarea {
    flex: 1;
    min-height: 2.6rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: transparent;
    font-size: 0.85rem;
    color: inherit;
    resize: vertical;
}

.gm-notatki-blad {
    margin: -0.4rem 0 0.6rem;
    font-size: 0.8rem;
    color: var(--danger-600);
}

/* Oś czasu: kreska z lewej łączy kolejne wpisy, jak w WAPRO. */
.gm-notatka {
    padding: 0.35rem 0 0.55rem 0.85rem;
    border-left: 2px solid var(--gray-200);
}

.gm-notatka-naglowek {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.gm-notatka-usun {
    font-size: 0.75rem;
    color: var(--danger-600);
}

.gm-notatka-tresc {
    margin: 0.15rem 0 0;
    font-size: 0.875rem;
    white-space: pre-line;
}

.dark .gm-notatki-nowa textarea {
    border-color: var(--gray-600);
}

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

/* ——— Menu pod prawym przyciskiem na wierszu (uklad.js) — jak w WAPRO ——— */

.gm-menu-kontekstowe {
    position: fixed;
    z-index: 60;
    min-width: 13rem;
    padding: 0.3rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.14);
}

.gm-menu-pozycja {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: left;
    color: var(--gray-800);
}

.gm-menu-pozycja:hover,
.gm-menu-pozycja:focus {
    outline: none;
    background: var(--primary-50);
    color: var(--primary-700);
}

.gm-menu-pozycja kbd,
.gm-pasek-skrot {
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--gray-400);
}

/* Skrót przy szybkiej akcji: dosunięty w prawo, nazwa akcji zostaje
   przy lewej krawędzi (jak „Ctrl+Alt+S" w menu WAPRO). */
.gm-pasek-skrot {
    margin-left: auto;
    white-space: nowrap;
}

.gm-menu-kreska {
    height: 1px;
    margin: 0.25rem 0.3rem;
    background: var(--gray-200);
}

.dark .gm-menu-kontekstowe {
    border-color: var(--gray-700);
    background: var(--gray-900);
}

.dark .gm-menu-pozycja {
    color: var(--gray-100);
}

.dark .gm-menu-pozycja:hover,
.dark .gm-menu-pozycja:focus {
    background: var(--gray-800);
    color: #fff;
}

.dark .gm-menu-kreska {
    background: var(--gray-700);
}

@media print {
    .gm-menu-kontekstowe {
        display: none !important;
    }
}

/* Przycisk dostępny tylko z menu pod prawym przyciskiem (uklad.js). */
.fi-ta-actions .gm-tylko-menu {
    display: none !important;
}

/* „Wykonane zmiany" — ten sam wygląd osi czasu co notatki. */
.gm-historia-zmiany {
    margin: 0.2rem 0 0;
    padding-left: 1rem;
    font-size: 0.85rem;
    list-style: disc;
    overflow-wrap: anywhere;
}

/* „Co nowego" na pulpicie (App\CoNowego) — wąski pasek nad powitaniem. */
.gm-co-nowego {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    border-left: 4px solid var(--primary-500);
}

.gm-co-nowego span {
    margin-left: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-500);
}

.gm-co-nowego-akcje {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
}

.gm-co-nowego-akcje button {
    color: var(--gray-500);
}

/* Podgląd zestawienia: szeroka tabela przewija się w karcie, nie ucina. */
.gm-zestawienia-podglad {
    overflow-x: auto;
}

/* Zakładki pod listą też mają tabele po 6–7 kolumn (kaucje, inwentaryzacja). */
.gm-podglad-tresc {
    overflow-x: auto;
}

/* Podpis sumy pod kolumną („Suma wystawionych") nie może poszerzać kolumny:
   przez niego „Kwota" miała 160 px i lista faktur wychodziła poza ekran
   (zgłoszenie klienta 14.10.2026). Podpis łamie się, kwota zostaje w linii. */
.fi-ta-text-summary {
    white-space: normal;
}

.fi-ta-text-summary-label {
    display: block;
    white-space: normal;
}

.fi-ta-text-summary > span:not(.fi-ta-text-summary-label) {
    white-space: nowrap;
}