/* ==========================================================================
   KBI INSTAL — motyw „błękit i biel" (J18).
   Dokładany osobnym arkuszem, bo na serwerze nie ma Node/Vite. Trzyma się
   klas Filamenta (fi-*), więc aktualizacja panelu go nie wywraca.
   ========================================================================== */

:root {
    --kbi-blue-50: #f0f7ff;
    --kbi-blue-100: #e0efff;
    --kbi-blue-200: #bcdcff;
    --kbi-blue-300: #86c3ff;
    --kbi-blue-400: #4aa5fb;
    --kbi-blue-500: #1f86ef;
    --kbi-blue-600: #0d6ad4;
    --kbi-blue-700: #0b53a8;
    --kbi-blue-900: #082f5f;

    --kbi-ink: #16233a;
    --kbi-ink-soft: #5b6b85;
    --kbi-line: #e3ecf7;

    --kbi-shadow-sm: 0 1px 2px rgba(16, 42, 76, .06);
    --kbi-shadow: 0 2px 4px rgba(16, 42, 76, .05), 0 12px 28px -12px rgba(13, 106, 212, .18);
    --kbi-shadow-lg: 0 4px 8px rgba(16, 42, 76, .06), 0 24px 48px -20px rgba(13, 106, 212, .28);
    --kbi-radius: 14px;
    --kbi-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── tło aplikacji: biel z delikatnym błękitem u góry ───────────────────── */
.fi-body {
    background:
        radial-gradient(1200px 420px at 50% -180px, var(--kbi-blue-100) 0%, rgba(224, 239, 255, 0) 70%),
        linear-gradient(180deg, var(--kbi-blue-50) 0%, #ffffff 380px);
    background-attachment: fixed;
    color: var(--kbi-ink);
}

/* ── górny pasek: biały, przyklejony, z cieniem zamiast kreski ──────────── */
.fi-topbar > nav,
.fi-topbar {
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: saturate(1.4) blur(10px);
    box-shadow: var(--kbi-shadow-sm);
    border-bottom: 1px solid var(--kbi-line);
}

/* ── menu: pigułki, wyraźny stan aktywny, delikatne uniesienie ──────────── */
.fi-topbar .fi-dropdown-trigger button,
.fi-topbar a.fi-topbar-item-button,
.fi-topbar .fi-topbar-item > a,
.fi-sidebar-item > a {
    border-radius: 999px;
    transition: background-color .18s var(--kbi-ease), color .18s var(--kbi-ease),
                box-shadow .18s var(--kbi-ease), transform .18s var(--kbi-ease);
}

.fi-topbar .fi-dropdown-trigger button:hover,
.fi-topbar a.fi-topbar-item-button:hover,
.fi-topbar .fi-topbar-item > a:hover,
.fi-sidebar-item > a:hover {
    background: var(--kbi-blue-50);
    color: var(--kbi-blue-700);
    transform: translateY(-1px);
}

.fi-topbar-item-active > a,
.fi-sidebar-item-active > a {
    background: linear-gradient(180deg, var(--kbi-blue-500), var(--kbi-blue-600)) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -6px rgba(13, 106, 212, .55);
}

.fi-topbar-item-active > a .fi-icon,
.fi-sidebar-item-active > a .fi-icon {
    color: #fff !important;
}

/* rozwijane grupy menu - miękka karta zamiast prostokąta */
.fi-dropdown-panel {
    border-radius: var(--kbi-radius) !important;
    box-shadow: var(--kbi-shadow-lg) !important;
    border: 1px solid var(--kbi-line) !important;
    overflow: hidden;
}

.fi-dropdown-list-item:hover {
    background: var(--kbi-blue-50) !important;
}

/* ── karty, sekcje, tabele: biel na błękitnym tle, zaokrąglenia, cień ───── */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-fo-component-ctn > .fi-section,
.fi-modal-window {
    border-radius: var(--kbi-radius) !important;
    border-color: var(--kbi-line) !important;
    box-shadow: var(--kbi-shadow);
    background-color: #fff;
}

.fi-section:hover,
.fi-wi-stats-overview-stat:hover {
    box-shadow: var(--kbi-shadow-lg);
}

.fi-section-header,
.fi-ta-header {
    border-bottom: 1px solid var(--kbi-line);
}

/* nagłówek tabeli: subtelny błękit, żeby oddzielić od wierszy */
.fi-ta-header-cell {
    background: linear-gradient(180deg, #fbfdff, var(--kbi-blue-50));
    color: var(--kbi-ink-soft);
    font-weight: 600;
}

.fi-ta-row {
    transition: background-color .14s var(--kbi-ease), box-shadow .14s var(--kbi-ease);
}

.fi-ta-row:hover {
    background: var(--kbi-blue-50) !important;
    box-shadow: inset 3px 0 0 var(--kbi-blue-400);
}

/* ── kafle wskaźników: akcent u góry, liczba w błękicie ─────────────────── */
.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    transition: transform .18s var(--kbi-ease), box-shadow .18s var(--kbi-ease);
}

.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--kbi-blue-400), var(--kbi-blue-600));
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
}

.fi-wi-stats-overview-stat-value {
    color: var(--kbi-blue-700);
    letter-spacing: -.01em;
}

/* ── przyciski: główny w błękitnym gradiencie, reszta spokojna ──────────── */
.fi-btn {
    border-radius: 10px;
    transition: transform .16s var(--kbi-ease), box-shadow .16s var(--kbi-ease), filter .16s var(--kbi-ease);
}

.fi-btn:active {
    transform: translateY(1px);
}

.fi-btn.fi-color-primary,
.fi-btn-color-primary {
    background-image: linear-gradient(180deg, var(--kbi-blue-500), var(--kbi-blue-600));
    box-shadow: 0 6px 16px -8px rgba(13, 106, 212, .8);
}

.fi-btn.fi-color-primary:hover,
.fi-btn-color-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 10px 22px -10px rgba(13, 106, 212, .85);
}

/* ── pola formularza: zaokrąglenia i błękitna obwódka przy pracy ────────── */
.fi-input,
.fi-select,
.fi-textarea,
.fi-input-wrp {
    border-radius: 10px !important;
    transition: box-shadow .16s var(--kbi-ease);
}

/* ramkę rysuje TYLKO obudowa pola - samo pole w środku zostaje płaskie,
   inaczej w polach wyszukiwania widać było ramkę w ramce */
.fi-input,
.fi-textarea,
.fi-select {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Obwódka przy pracy. Zbudowany motyw ma dwie reguły na to samo pole, a ta
   późniejsza gasi pierścień do 0 px - po kliknięciu w pole ramka znikała
   i zostawał tylko kontur rysowany przez samą przeglądarkę. Rysujemy ją
   więc sami, na obudowie pola. */
.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 2px #4aa5fb, 0 1px 2px rgba(16, 42, 76, .06) !important;
}

/* ── zakładki: pigułki z płynnym przejściem ─────────────────────────────── */
.fi-tabs {
    background: #fff;
    border-radius: 999px;
    padding: .25rem;
    box-shadow: var(--kbi-shadow-sm);
    border: 1px solid var(--kbi-line);
}

.fi-tabs-item {
    border-radius: 999px !important;
    transition: background-color .16s var(--kbi-ease), color .16s var(--kbi-ease);
}

.fi-tabs-item-active {
    background: var(--kbi-blue-600) !important;
    color: #fff !important;
}

.fi-tabs-item-active .fi-tabs-item-label,
.fi-tabs-item-active .fi-icon {
    color: #fff !important;
}

/* ── plakietki i znaczniki ──────────────────────────────────────────────── */
.fi-badge {
    border-radius: 999px;
    font-weight: 600;
}

/* ── okna: wyraźniejszy cień, żeby tło opadło w tło ─────────────────────── */
.fi-modal-window {
    box-shadow: var(--kbi-shadow-lg) !important;
}

/* ── stopka strony i drobiazgi ──────────────────────────────────────────── */
.fi-main {
    padding-top: 1.25rem;
}

.fi-header-heading {
    letter-spacing: -.015em;
    color: var(--kbi-ink);
}

/* ── tryb ciemny: ten sam błękit, ciemne tło ────────────────────────────── */
.dark .fi-body {
    background:
        radial-gradient(1200px 420px at 50% -180px, rgba(13, 106, 212, .22) 0%, rgba(13, 106, 212, 0) 70%),
        #0e1726;
    color: #e6edf7;
}

.dark .fi-section,
.dark .fi-wi-stats-overview-stat,
.dark .fi-ta-ctn,
.dark .fi-modal-window {
    background-color: #16233a;
    border-color: #24334d !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 36px -20px rgba(0, 0, 0, .8);
}

.dark .fi-ta-header-cell {
    background: linear-gradient(180deg, #1a2942, #16233a);
    color: #9fb3d0;
}

.dark .fi-ta-row:hover {
    background: #1b2c47 !important;
    box-shadow: inset 3px 0 0 var(--kbi-blue-500);
}

.dark .fi-topbar,
.dark .fi-topbar > nav {
    background: rgba(22, 35, 58, .92) !important;
    border-bottom-color: #24334d;
}

.dark .fi-wi-stats-overview-stat-value {
    color: var(--kbi-blue-300);
}

/* ── szacunek dla ustawień dostępności ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }

    .fi-ta-row:hover,
    .fi-section:hover,
    .fi-wi-stats-overview-stat:hover,
    .fi-topbar .fi-topbar-item > a:hover {
        transform: none !important;
    }
}

/* ── druk: bez tła i cieni ──────────────────────────────────────────────── */
@media print {
    .fi-body {
        background: #fff !important;
    }

    .fi-section,
    .fi-ta-ctn {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* ==========================================================================
   J18 etap 2 — układ: menu boczne, nagłówki stron, rytm treści.
   Dopisane do motywu „błękit i biel".
   ========================================================================== */

/* ── typografia: systemowa, bez pobierania z sieci (CSP) ───────────────── */
.fi-body {
    font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Inter', 'Helvetica Neue', Arial, sans-serif;
    font-feature-settings: 'tnum' 1;
}

/* ── pasek boczny: biel, delikatna krawędź, logo w błękitnej strefie ───── */
.fi-sidebar {
    background: #fff;
    border-right: 1px solid var(--kbi-line);
    box-shadow: 6px 0 24px -22px rgba(16, 42, 76, .5);
}

.fi-sidebar-header {
    background: linear-gradient(180deg, var(--kbi-blue-50), #fff);
    border-bottom: 1px solid var(--kbi-line);
    box-shadow: none;
}

/* nagłówek grupy: mała kapitalikowa etykieta, nie krzyczy */
.fi-sidebar-group-label {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .68rem;
    font-weight: 700;
    color: #93a3bd;
}

.fi-sidebar-group + .fi-sidebar-group {
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px solid var(--kbi-line);
}

/* pozycje menu: pigułka na całą szerokość, ikona w kółku */
.fi-sidebar-item > a {
    border-radius: 10px;
    padding-block: .5rem;
    font-weight: 500;
    color: #33415c;
}

.fi-sidebar-item > a:hover {
    background: var(--kbi-blue-50);
    color: var(--kbi-blue-700);
    transform: none;
}

.fi-sidebar-item-active > a {
    background: linear-gradient(180deg, var(--kbi-blue-500), var(--kbi-blue-600)) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -10px rgba(13, 106, 212, .9);
}

/* wskaźnik przy aktywnej pozycji - oko od razu wie, gdzie jest */
.fi-sidebar-item-active > a::before {
    content: '';
    position: absolute;
    left: -.5rem;
    top: 50%;
    width: 3px;
    height: 1.35rem;
    transform: translateY(-50%);
    border-radius: 0 3px 3px 0;
    background: var(--kbi-blue-600);
}

.fi-sidebar-item > a {
    position: relative;
}

/* zwinięty pasek: same ikony, dymek z nazwą zostaje Filamentowy */
.fi-sidebar.fi-collapsed .fi-sidebar-item > a {
    justify-content: center;
}

/* ── nagłówek strony: tytuł, ścieżka i przyciski w jednym pasie ────────── */
.fi-header {
    padding: .25rem 0 1rem;
    border-bottom: 1px solid var(--kbi-line);
    margin-bottom: 1.25rem;
}

.fi-breadcrumbs {
    margin-bottom: .35rem;
}

.fi-breadcrumbs-item-label {
    color: var(--kbi-ink-soft);
}

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

/* ── rytm treści: równe odstępy między sekcjami ────────────────────────── */
.fi-page > .fi-section + .fi-section,
.fi-page .fi-fo-component-ctn > * + * {
    margin-top: 1rem;
}

/* ── puste listy: więcej powietrza, mniej surowości ────────────────────── */
.fi-ta-empty-state {
    padding-block: 3rem;
}

.fi-ta-empty-state-icon-ctn {
    background: var(--kbi-blue-50);
    color: var(--kbi-blue-600);
    border-radius: 999px;
}

/* ── paginacja i pasek narzędzi tabeli ─────────────────────────────────── */
.fi-ta-header-toolbar {
    background: #fff;
    border-bottom: 1px solid var(--kbi-line);
}

.fi-pagination-item button {
    border-radius: 8px;
}

/* ── ciemny motyw dla nowego układu ────────────────────────────────────── */
.dark .fi-sidebar {
    background: #16233a;
    border-right-color: #24334d;
}

.dark .fi-sidebar-header {
    background: linear-gradient(180deg, #1a2942, #16233a);
    border-bottom-color: #24334d;
}

.dark .fi-sidebar-item > a {
    color: #c8d6ea;
}

.dark .fi-sidebar-item > a:hover {
    background: #1b2c47;
    color: #fff;
}

.dark .fi-header {
    border-bottom-color: #24334d;
}

.dark .fi-ta-header-toolbar {
    background: #16233a;
    border-bottom-color: #24334d;
}

.dark .fi-ta-empty-state-icon-ctn {
    background: #1b2c47;
    color: var(--kbi-blue-300);
}

/* ── telefon: pasek boczny wysuwany, treść na całą szerokość ───────────── */
@media (max-width: 1024px) {
    .fi-main {
        padding-inline: .75rem;
    }

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

/* ==========================================================================
   J26 - poprawki z przegladu QA (2026-08-04)
   ========================================================================== */

/* zablokowane pola wyraznie szare - bialy input wygladal na edytowalny */
.fi-input-wrp:has(input:disabled),
.fi-input-wrp:has(select:disabled),
.fi-input-wrp:has(textarea:disabled),
.fi-disabled .fi-input-wrp {
    background: #eef2f8 !important;
}

/* kwoty w pozycjach dokumentu nie moga sie ucinac */
.kbi-items-trade .fi-input {
    min-width: 7.5rem;
    font-variant-numeric: tabular-nums;
}

.kbi-items-trade td:first-child .fi-input {
    min-width: 14rem;
}

/* tryb kompaktowy: ciasniej, ale ikony statusow trzymaja kolor */
.kbi-compact .fi-ta-cell {
    padding-block: .3rem;
}

.kbi-compact .fi-ta-row {
    font-size: 12.5px;
}

.kbi-compact .fi-color-success {
    color: #16a34a !important;
}

.kbi-compact .fi-color-danger {
    color: #dc2626 !important;
}