/* ===== BASE.CSS — reset, layout aplikacji, szkło, ruch, kropki =====
 *
 * Tokeny (kolory, promienie, cienie, czasy) mieszkają w css/tokens.css.
 * Tu: reset i typografia, narzędzia, zorza pod aplikacją, przepis szkła,
 * bramka ruchu (html.fp-motion) i animacje, rodzina kropek .fp-dots
 * (jedyny loader), szkielety, stany puste, postęp, pierścień, nagłówek
 * strony oraz powłoka: header, nawigacja, dropdowny, sidebar, mobile.
 *
 * Przyciski, formularze, karty, tabele, badge, alerty, modale i toasty
 * mają JEDNĄ definicję w css/shared.css — nie dopisuj ich tutaj.
 */

/* ===== Reset i typografia ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background: var(--fp-bg);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--fp-font);
    font-size: var(--fp-text-body);
    line-height: 1.5;
    color: var(--fp-ink);
    /* Tło maluje zorza (.app-container::before) — body zostaje przezroczyste */
    background: transparent;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--fp-ink);
    font-weight: 600;
    line-height: 1.2;
}

h1, h2 { letter-spacing: -0.02em; font-weight: 650; }
h3 { letter-spacing: -0.015em; }

h1 { font-size: 2rem; margin-bottom: 1rem; }
h2 { font-size: 1.5rem; margin-bottom: 0.875rem; }
h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
h4 { font-size: 1.125rem; margin-bottom: 0.625rem; }
h5 { font-size: 1rem; margin-bottom: 0.5rem; }
h6 { font-size: 0.875rem; margin-bottom: 0.5rem; }

p {
    margin-bottom: 1rem;
    color: var(--fp-muted);
}

a {
    color: var(--fp-accent);
    text-decoration: none;
    transition: color var(--fp-dur-fast) var(--fp-ease-out);
}

a:hover {
    color: var(--fp-accent-strong);
}

ul, ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.25rem;
}

/* Liczby zawsze tabelaryczne */
.stat-value,
.goal-value,
.kpi-value,
.vj-kpi-value,
.fp-tile-value,
.automations-kpi-value,
[data-countup],
td,
th {
    font-variant-numeric: tabular-nums;
}

/* ===== Narzędzia ===== */
.text-center { text-align: center; }

.text-muted { color: var(--fp-faint) !important; }
.text-success { color: var(--fp-positive-strong) !important; }

.bg-primary { background-color: var(--fp-surface) !important; }
.bg-secondary { background-color: var(--fp-bg) !important; }
.bg-success { background-color: var(--fp-positive) !important; }
.bg-danger { background-color: var(--fp-negative) !important; }
.bg-warning { background-color: var(--fp-warning) !important; }

.m-0 { margin: 0 !important; }

.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }

.p-0 { padding: 0 !important; }

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-flex { display: flex !important; }

.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }

.w-100 { width: 100% !important; }

.border { border: 1px solid var(--fp-border) !important; }
.border-top { border-top: 1px solid var(--fp-border) !important; }
.border-bottom { border-bottom: 1px solid var(--fp-border) !important; }
.border-left { border-left: 1px solid var(--fp-border) !important; }
.border-right { border-right: 1px solid var(--fp-border) !important; }

.rounded { border-radius: var(--fp-radius) !important; }

.shadow { box-shadow: var(--fp-shadow-card) !important; }

/* ===== Paski przewijania, zaznaczenie, fokus ===== */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--fp-border-strong) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--fp-border-strong);
    border-radius: var(--fp-radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--fp-faint);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::selection {
    background-color: var(--fp-selection-bg);
    color: var(--fp-ink);
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--fp-accent);
    outline-offset: 2px;
}

.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Znak kropek zamiast tekstu pod loaderem (brief §6/§8): wyśrodkowany, pełna widoczność */
.loading > .fp-dots {
    display: block;
    margin: var(--fp-space-6) auto;
}

.loading:has(> .fp-dots) {
    opacity: 1;
}

/* ===== Zorza (grunt) — statyczna, pod całą aplikacją (login ma swoją w shared.css) =====
   Trzy miękkie plamy: marka (lewy górny róg), dane (prawa krawędź), chłodna (lewy dół).
   To jedyne tło, które szklane karty przepuszczają — dlatego nie ma tu żadnego ruchu. */
.app-container::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(70% 60% at 38% 0%, var(--fp-aurora-brand), transparent 72%),
        radial-gradient(60% 70% at 96% 30%, var(--fp-aurora-data), transparent 72%),
        radial-gradient(70% 55% at 55% 100%, var(--fp-aurora-cool), transparent 72%),
        var(--fp-bg);
}

/* ===== Szkło — tylko warstwy uniesione ===== */
.fp-glass {
    background: var(--fp-glass-bg);
    -webkit-backdrop-filter: blur(var(--fp-glass-blur)) saturate(var(--fp-glass-saturate));
    backdrop-filter: blur(var(--fp-glass-blur)) saturate(var(--fp-glass-saturate));
    border: 1px solid var(--fp-glass-border);
    box-shadow: var(--fp-shadow-glass);
}

.fp-glass.is-strong {
    background: var(--fp-glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--fp-glass-blur-strong)) saturate(var(--fp-glass-saturate));
    backdrop-filter: blur(var(--fp-glass-blur-strong)) saturate(var(--fp-glass-saturate));
}

/* Szklana karta treści (.fp-glass-card) — półprzezroczysta, bez blur; przepis i unia
   klas (.card, .widget, .stat-card, …) w shared.css §1. Tu tylko warstwy z blur. */

/* Budżet blur (Addendum 1a): backdrop-filter wyłącznie tam, gdzie treść naprawdę
   przewija się lub leży POD powierzchnią — header, sidebar, dolna nawigacja, dock,
   hero, karta logowania, tło modala. Nigdy na powtarzalnych dzieciach ani w środku
   innej rozmytej warstwy. Chrome liczy backdrop tylko wewnątrz najbliższego przodka
   z backdrop-filter, więc popover zagnieżdżony w rozmytym headerze i tak nic nie
   rozmywa — dostaje kryjący panel bez blur. */
.app-header .fp-glass,
.app-header .fp-glass.is-strong,
.app-header .dropdown-content,
.app-header .date-dropdown {
    background: var(--fp-glass-bg-panel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Rozmyte kontenery malują się w swoim pudełku (bez wpływu na sąsiadów) */
.sidebar-expand-handle,
.mobile-bottom-nav,
.mobile-subnav {
    contain: paint;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .fp-glass,
    .fp-glass.is-strong,
    .app-header,
    .app-sidebar,
    .sidebar-expand-handle,
    .dropdown-content,
    .mobile-bottom-nav,
    .mobile-subnav {
        background: var(--fp-glass-bg-opaque);
    }

    /* Bootstrapowy .dropdown-menu ma tło z !important (niżej) — fallback musi je przebić */
    .dropdown-menu {
        background: var(--fp-glass-bg-opaque) !important;
    }
}

/* Użytkownik prosi o mniej przezroczystości: szkło staje się papierem, blur znika */
@media (prefers-reduced-transparency: reduce) {
    .fp-glass,
    .fp-glass.is-strong,
    .app-header,
    .app-sidebar,
    .sidebar-expand-handle,
    .dropdown-content,
    .date-dropdown,
    .mobile-bottom-nav,
    .mobile-subnav,
    .fp-hero,
    .modal-content {
        background: var(--fp-glass-bg-opaque);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .dropdown-menu {
        background: var(--fp-glass-bg-opaque) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .fp-glass-card,
    .card,
    .widget,
    .chart-wrapper,
    .table-wrapper,
    .stat-card,
    .kpi-card,
    .vj-panel,
    .measurement-panel,
    .integration-tile,
    .fp-sheet,
    .fp-kpi,
    .fp-card,
    .fp-tile {
        background: var(--fp-surface);
    }
}

/* ===== Ruch: bramka i bezpiecznik ===== */
/* Wszystkie animacje wejścia i pętle są pod html.fp-motion (dopisywane
   przez js/fp-motion.js). Bez klasy UI jest od razu w stanie końcowym. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .fp-dots i,
    .global-loading-dots .global-dot {
        animation: fp-dot-breathe 1.2s ease-in-out infinite !important;
    }
}

/* Klatki kluczowe legacy — używane jeszcze przez arkusze stron */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* @keyframes spin usunięte — pozostałość po ring-spinnerach zakazanych w briefie §9;
   w całym repo nie było już żadnego `animation: … spin`. */

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.95); opacity: 0.7; }
}

/* Klatki systemu ruchu */
@keyframes fp-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fp-pop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fp-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fp-nav-dot {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

@keyframes fp-shimmer {
    to { transform: translateX(100%); }
}

/* Wejście bloków strony: kontener .fp-reveal, dzieci wznoszą się z przesunięciem */
html.fp-motion .fp-reveal > * {
    animation: fp-rise var(--fp-dur-reveal) var(--fp-ease-out) both;
}

html.fp-motion .fp-reveal > :nth-child(2) { animation-delay: calc(var(--fp-stagger) * 1); }
html.fp-motion .fp-reveal > :nth-child(3) { animation-delay: calc(var(--fp-stagger) * 2); }
html.fp-motion .fp-reveal > :nth-child(4) { animation-delay: calc(var(--fp-stagger) * 3); }
html.fp-motion .fp-reveal > :nth-child(5) { animation-delay: calc(var(--fp-stagger) * 4); }
html.fp-motion .fp-reveal > :nth-child(6) { animation-delay: calc(var(--fp-stagger) * 5); }
html.fp-motion .fp-reveal > :nth-child(7) { animation-delay: calc(var(--fp-stagger) * 6); }
html.fp-motion .fp-reveal > :nth-child(8) { animation-delay: calc(var(--fp-stagger) * 7); }
html.fp-motion .fp-reveal > :nth-child(9) { animation-delay: calc(var(--fp-stagger) * 8); }
html.fp-motion .fp-reveal > :nth-child(10) { animation-delay: calc(var(--fp-stagger) * 9); }
html.fp-motion .fp-reveal > :nth-child(11) { animation-delay: calc(var(--fp-stagger) * 10); }
html.fp-motion .fp-reveal > :nth-child(12) { animation-delay: calc(var(--fp-stagger) * 11); }

/* ===== Kropki marki .fp-dots — jedyny loader ===== */
/* Geometria z logo: zygzak trzech kropek na scenie 4d × 4d (brief §6). */
.fp-dots,
.global-loading-dots {
    --d: var(--fp-dot);
    position: relative;
    display: inline-block;
    width: calc(var(--d) * 4);
    height: calc(var(--d) * 4);
    color: var(--fp-brand);
    flex: none;
    vertical-align: middle;
}

.fp-dots.is-sm { --d: var(--fp-dot-sm); }
.fp-dots.is-md { --d: var(--fp-dot-md); }
.fp-dots.is-lg,
.global-loading-dots { --d: var(--fp-dot-lg); }

.fp-dots i,
.global-loading-dots .global-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--d);
    height: var(--d);
    margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
    border-radius: 50%;
    background: currentColor;
    transform: translate(var(--x), var(--y));
}

.fp-dots i:nth-child(1),
.global-loading-dots .global-dot:nth-child(1) {
    --x: calc(var(--d) * -0.07);
    --y: calc(var(--d) * -1.04);
    --cx: calc(var(--d) * -1.2);
}

.fp-dots i:nth-child(2),
.global-loading-dots .global-dot:nth-child(2) {
    --x: calc(var(--d) * 0.42);
    --y: calc(var(--d) * 0.11);
    --cx: 0px;
}

.fp-dots i:nth-child(3),
.global-loading-dots .global-dot:nth-child(3) {
    --x: calc(var(--d) * -0.43);
    --y: calc(var(--d) * 1.02);
    --cx: calc(var(--d) * 1.2);
}

/* Orbita: zwinięcie w wielokropek → obrót sceny → lądowanie w logo */
html.fp-motion .fp-dots.is-orbit,
html.fp-motion .global-loading-dots {
    animation: fp-dots-orbit var(--fp-dur-loop) var(--fp-ease-in-out) infinite;
}

html.fp-motion .fp-dots.is-orbit i,
html.fp-motion .global-loading-dots .global-dot {
    animation: fp-dot-cycle var(--fp-dur-loop) var(--fp-ease-spring) infinite;
}

html.fp-motion .fp-dots.is-orbit i:nth-child(2),
html.fp-motion .global-loading-dots .global-dot:nth-child(2) {
    animation-delay: 40ms;
}

html.fp-motion .fp-dots.is-orbit i:nth-child(3),
html.fp-motion .global-loading-dots .global-dot:nth-child(3) {
    animation-delay: 80ms;
}

@keyframes fp-dots-orbit {
    0%, 28% { transform: rotate(0deg); }
    72%, 100% { transform: rotate(360deg); }
}

@keyframes fp-dot-cycle {
    0%, 15% { transform: translate(var(--x), var(--y)) scale(1); opacity: 1; }
    28%, 72% { transform: translate(var(--cx), 0px) scale(0.85); opacity: 0.8; }
    84% { transform: translate(calc(var(--x) * 1.08), calc(var(--y) * 1.08)) scale(1.06); opacity: 1; }
    92%, 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 1; }
}

/* Skok: rząd poziomy, każda kropka podskakuje (przyciski, komórki, „Zapisywanie…”) */
.fp-dots.is-leap i {
    transform: translate(var(--cx), 0);
}

html.fp-motion .fp-dots.is-leap i {
    animation: fp-leap 900ms var(--fp-ease-in-out) infinite;
}

html.fp-motion .fp-dots.is-leap i:nth-child(2) { animation-delay: 120ms; }
html.fp-motion .fp-dots.is-leap i:nth-child(3) { animation-delay: 240ms; }

@keyframes fp-leap {
    0%, 60%, 100% { transform: translate(var(--cx), 0) scale(1); }
    30% { transform: translate(var(--cx), calc(var(--d) * -1)) scale(1.05, 0.95); }
}

/* Puls: praca w tle (synchronizacja, cron) — logo oddycha */
html.fp-motion .fp-dots.is-pulse i {
    animation: fp-pulse var(--fp-dur-loop) var(--fp-ease-in-out) infinite;
}

html.fp-motion .fp-dots.is-pulse i:nth-child(2) { animation-delay: 200ms; }
html.fp-motion .fp-dots.is-pulse i:nth-child(3) { animation-delay: 400ms; }

@keyframes fp-pulse {
    50% { transform: translate(var(--x), var(--y)) scale(0.7); opacity: 0.55; }
}

/* Statyczne: stany puste, kotwica szkieletu */
.fp-dots.is-static {
    opacity: 0.45;
}

.fp-dots.is-static,
.fp-dots.is-static i,
html.fp-motion .fp-dots.is-static,
html.fp-motion .fp-dots.is-static i {
    animation: none;
}

/* Sukces (jednorazowo, 480 ms): kropki zielenieją i układają się w ptaszek */
.fp-dots.is-success {
    color: var(--fp-positive);
    transition: color 160ms var(--fp-ease-out);
}

.fp-dots.is-success,
.fp-dots.is-success i,
html.fp-motion .fp-dots.is-success,
html.fp-motion .fp-dots.is-success i {
    animation: none;
}

.fp-dots.is-success i {
    transition: transform 280ms var(--fp-ease-spring) 120ms;
}

/* Trzy pozycje ptaszka: lewe ramię → wierzchołek → prawy koniec.
   Kropki lądują dokładnie na końcach kresek, więc znak czyta się jako „zapisano”,
   a nie jako rozsypane zielone kropki. */
.fp-dots.is-success i:nth-child(1) { transform: translate(calc(var(--d) *  1.3), calc(var(--d) * -1)); }
.fp-dots.is-success i:nth-child(2) { transform: translate(calc(var(--d) * -0.4), calc(var(--d) *  0.85)); }
.fp-dots.is-success i:nth-child(3) { transform: translate(calc(var(--d) * -1.3), calc(var(--d) * -0.2)); }

/* Dwa segmenty kreski: ::before łączy kropkę 3 z 2, ::after kropkę 2 z 1.
   Rysują się DOPIERO po tym, jak kropki dojadą na miejsce (opóźnienie 400/480 ms). */
.fp-dots::before,
.fp-dots::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    height: max(2px, calc(var(--d) * 0.22));
    border-radius: var(--fp-radius-pill);
    background: var(--fp-positive);
    transform-origin: 0 50%;
    opacity: 0;
    pointer-events: none;
}

.fp-dots::before {
    width: calc(var(--d) * 1.383);
    margin: calc(var(--d) * -0.31) 0 0 calc(var(--d) * -1.3);
    transform: rotate(49.4deg) scaleX(0);
}

.fp-dots::after {
    width: calc(var(--d) * 2.512);
    margin: calc(var(--d) * 0.74) 0 0 calc(var(--d) * -0.4);
    transform: rotate(-47.4deg) scaleX(0);
}

.fp-dots.is-success::before {
    opacity: 1;
    transform: rotate(49.4deg) scaleX(1);
    transition: transform 130ms var(--fp-ease-out) 400ms, opacity 60ms linear 400ms;
}

.fp-dots.is-success::after {
    opacity: 1;
    transform: rotate(-47.4deg) scaleX(1);
    transition: transform 180ms var(--fp-ease-out) 500ms, opacity 60ms linear 500ms;
}

/* Oddech — jedyny ruch pod prefers-reduced-motion (tylko opacity) */
@keyframes fp-dot-breathe {
    50% { opacity: 0.35; }
}

/* ===== Loader strony (#page-loading-indicator — DOM budują scripts.php i common.js) ===== */
#page-loading-indicator {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--fp-glass-tint); /* płaska tinta — bez backdrop-filter (nawigacja to najgorszy moment na blur) */
    z-index: var(--fp-z-loader);
    pointer-events: none;
    opacity: 1;
    transition: opacity 180ms var(--fp-ease-in);
}

/* Hak, na którym opiera się JS (style.display = 'block') */
#page-loading-indicator[style*="display: block"] {
    display: flex !important;
}

#page-loading-indicator.is-leaving {
    opacity: 0;
}

/* Loader centruje się na treści, nie na oknie: przy otwartym sidebarze kropki
   siadały wyraźnie na lewo od kolumny, którą przykrywają. Poniżej 1025px
   sidebar jest szufladą — wtedy overlay zostaje pełnoekranowy. */
@media (min-width: 1025px) {
    body:not(.dashboard-sidebar-hidden):has(.app-sidebar) #page-loading-indicator {
        left: var(--sidebar-width);
    }
}

.global-page-loader {
    display: flex;
    align-items: center;
    justify-content: center;
}

html.fp-motion .global-page-loader {
    animation: fp-dots-enter 240ms var(--fp-ease-spring) both;
}

@keyframes fp-dots-enter {
    from { opacity: 0; transform: scale(0.6); }
}

html.fp-motion .global-loading-dots,
html.fp-motion .global-loading-dots .global-dot {
    animation-delay: 240ms;
}

html.fp-motion .global-loading-dots .global-dot:nth-child(2) { animation-delay: 280ms; }
html.fp-motion .global-loading-dots .global-dot:nth-child(3) { animation-delay: 320ms; }

.global-loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-loading-text {
    display: none;
}

/* Przycisk w trakcie pracy (.btn.is-loading) — recepta w shared.css, sekcja przycisków */

/* ===== Postęp .fp-progress ===== */
.fp-progress {
    position: relative;
    height: 6px;
    background: var(--fp-grid);
    border-radius: var(--fp-radius-pill);
    overflow: visible;
}

.fp-progress-fill {
    position: relative;
    height: 100%;
    width: 0;
    max-width: 100%;
    background: var(--fp-ink);
    border-radius: var(--fp-radius-pill);
    transition: width var(--fp-dur-count) var(--fp-ease-out);
}

/* Głowica: kropka marki z pierścieniem powierzchni */
.fp-progress-fill::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--fp-brand);
    box-shadow: 0 0 0 2px var(--fp-surface);
}

.fp-progress.is-positive .fp-progress-fill { background: var(--fp-positive); }
.fp-progress.is-negative .fp-progress-fill { background: var(--fp-negative); }
.fp-progress.is-warning .fp-progress-fill { background: var(--fp-warning); }

.fp-progress.is-thin {
    height: 4px;
}

.fp-progress.is-thin .fp-progress-fill {
    background: var(--fp-accent);
}

.fp-progress.is-thin .fp-progress-fill::after {
    display: none;
}

/* Nieokreślony: trzy kropki wędrują od lewej do prawej.
   Dystans = --fp-travel (domyślnie 260px; szerszy pasek ustawia go inline z danych). */
.fp-progress.is-indeterminate {
    --fp-travel: 260px;
    overflow: hidden;
}

.fp-progress.is-indeterminate .fp-progress-fill {
    display: none;
}

.fp-progress.is-indeterminate::before,
.fp-progress.is-indeterminate::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--fp-brand);
    transform: translateX(-10px);
}

/* Trzecia kropka: cień ::after (bez dodatkowego elementu w markupie) */
.fp-progress.is-indeterminate::after {
    box-shadow: 10px 0 0 var(--fp-brand);
}

html.fp-motion .fp-progress.is-indeterminate::before,
html.fp-motion .fp-progress.is-indeterminate::after {
    animation: fp-travel 1.4s var(--fp-ease-in-out) infinite;
}

html.fp-motion .fp-progress.is-indeterminate::after { animation-delay: 90ms; }

@keyframes fp-travel {
    from { transform: translateX(-10px); }
    to { transform: translateX(var(--fp-travel)); }
}

/* ===== Pierścień .fp-ring ===== */
.fp-ring {
    --size: 56px;
    --pct: 0;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    flex: none;
}

.fp-ring.is-40 { --size: 40px; }
.fp-ring.is-56 { --size: 56px; }
.fp-ring.is-72 { --size: 72px; }

.fp-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.fp-ring-track {
    fill: none;
    stroke: var(--fp-grid);
    stroke-width: 3;
}

/* Obwód łuku dla promienia r = rozmiar/2 − 3 (40→17, 56→25, 72→33) */
.fp-ring { --circ: 157.08; }
.fp-ring.is-40 { --circ: 106.81; }
.fp-ring.is-56 { --circ: 157.08; }
.fp-ring.is-72 { --circ: 207.35; }

.fp-ring-arc {
    fill: none;
    stroke: var(--fp-data-1);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: var(--circ);
    stroke-dashoffset: calc(var(--circ) * (1 - var(--pct) / 100));
    transition: stroke-dashoffset var(--fp-dur-count) var(--fp-ease-out);
}

.fp-ring.is-brand .fp-ring-arc {
    stroke: var(--fp-brand);
}

.fp-ring-dot {
    fill: var(--fp-data-1);
    transform-box: view-box;
    transform-origin: 50% 50%;
    transform: rotate(calc(var(--pct) * 3.6deg));
    transition: transform var(--fp-dur-count) var(--fp-ease-out);
}

.fp-ring.is-brand .fp-ring-dot {
    fill: var(--fp-brand);
}

.fp-ring-value {
    position: relative;
    font-size: var(--fp-text-sm);
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--fp-ink);
    font-variant-numeric: tabular-nums;
}

.fp-ring.is-72 .fp-ring-value { font-size: var(--fp-text-md); }
.fp-ring.is-40 .fp-ring-value { font-size: var(--fp-text-eyebrow); }

.fp-ring.is-complete .fp-ring-value {
    display: none;
}

.fp-ring.is-complete .fp-dots {
    position: relative;
    color: var(--fp-positive);
}

/* ===== Szkielet .fp-skeleton ===== */
.fp-skeleton {
    position: relative;
    display: block;
    height: 12px;
    background: var(--fp-grid);
    border-radius: var(--fp-radius-sm);
    overflow: hidden;
}

.fp-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--fp-skeleton-sheen), transparent);
}

html.fp-motion .fp-skeleton::after {
    animation: fp-shimmer 1.4s var(--fp-ease-in-out) infinite;
}

.fp-skeleton.is-text { height: 12px; }
.fp-skeleton.is-title { height: 18px; width: 40%; }
.fp-skeleton.is-value { height: 28px; width: 30%; }
.fp-skeleton.is-block { height: 120px; border-radius: var(--fp-radius); }

.fp-skeleton-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fp-skeleton-group > .fp-dots {
    margin-bottom: 4px;
}

.fp-skeleton-group.is-chart {
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

/* ===== Stan pusty .fp-empty ===== */
.fp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    gap: 6px;
}

.fp-empty > .fp-dots {
    margin-bottom: 8px;
}

.fp-empty-title {
    font-size: var(--fp-text-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fp-ink);
}

.fp-empty-text {
    max-width: 36ch;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fp-muted);
}

.fp-empty .btn {
    margin-top: 10px;
}

/* Jedyny udokumentowany wariant ciasny — do użytku wewnątrz kart i komórek.
   Arkusze stron nie dopisują własnych paddingów do .fp-empty. */
.fp-empty.is-compact {
    padding: 28px 16px;
}

td .fp-empty {
    padding: 36px 16px;
}

/* Pusty stan w sidebarze ma ~200 px szerokości — bez tego tekst łamał się
   po dwa słowa w wierszu. */
.app-sidebar .fp-empty {
    padding: 20px 4px;
}

.app-sidebar .fp-empty-text {
    max-width: none;
}

/* ===== Etykieta .fp-eyebrow i nagłówek strony .fp-page-head ===== */
/* Kolor: --fp-muted (5.0:1 na bieli); --fp-faint dawał 2.6:1 i nie spełniał nawet progu 3:1 dla dużego tekstu.
   --fp-faint zostaje dla osi, separatorów i dekoracyjnych chevronów — nie dla tekstu. */
.fp-eyebrow {
    display: block;
    font-size: var(--fp-text-eyebrow);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fp-muted);
    margin: 0;
}

.fp-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--fp-space-4) var(--fp-space-6);
    flex-wrap: wrap;
    margin-bottom: var(--fp-space-6);
}

.fp-page-head-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Jeden rozmiar h1 (24/650) niezależnie od tego, którym wzorcem nagłówka posługuje się arkusz strony */
.fp-page-head h1,
.page-header h1,
.app-main h1.page-title,
.app-main .page-title-section h1,
.app-main .page-header h1,
.app-main .settings-page-title,
.app-main .dashboard-main-title,
.app-main .page-title.dashboard-main-title,
.app-main .funnel-page-title {
    font-size: var(--fp-text-h1);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--fp-ink);
    margin: 0;
}

/* :not(.fp-eyebrow) — reguła podtytułu (0-1-1) wygrywała z .fp-eyebrow (0-1-0)
   i każda etykieta zapisana jako <p> w nagłówku strony traciła skalę 11px. */
.fp-page-sub,
.fp-page-head p:not(.fp-eyebrow) {
    max-width: 68ch;
    margin: 0;
    font-size: var(--fp-text-body);
    line-height: 1.5;
    color: var(--fp-muted);
}

/* Etykieta w nagłówku strony zostaje etykietą, niezależnie od tagu */
.fp-page-head p.fp-eyebrow,
.page-header p.fp-eyebrow {
    font-size: var(--fp-text-eyebrow);
    line-height: 1.3;
    color: var(--fp-muted);
}

.fp-page-head-actions {
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
    flex-wrap: wrap;
    flex: none;
}

/* ===== LAYOUT ===== */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* --- Header --- */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: var(--fp-z-header);
    flex: none;
    background: var(--fp-glass-bg);
    -webkit-backdrop-filter: blur(var(--fp-glass-blur)) saturate(var(--fp-glass-saturate));
    backdrop-filter: blur(var(--fp-glass-blur)) saturate(var(--fp-glass-saturate));
    border-bottom: 1px solid var(--fp-border-soft);
    box-shadow: inset 0 1px 0 var(--fp-glass-edge);
}

.header-main {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.header-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header-brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.header-logo {
    height: 26px;
    width: auto;
    display: block;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 20px;
    min-width: 0;
}

.header-nav .nav-link,
.nav-dropdown > button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 7px 11px;
    border: none;
    border-radius: var(--fp-radius-sm);
    background: transparent;
    color: var(--fp-muted);
    text-decoration: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--fp-dur-fast) var(--fp-ease-out), color var(--fp-dur-fast) var(--fp-ease-out);
}

.header-nav .nav-link i,
.nav-dropdown > button i {
    font-size: 13px;
    line-height: 1;
}

.header-nav .nav-link:hover,
.nav-dropdown > button:hover {
    color: var(--fp-ink);
    background: var(--fp-hover-ink);
    text-decoration: none;
}

.header-nav .nav-link:focus-visible,
.nav-dropdown > button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--fp-focus-ring);
}

/* Aktywna pozycja: tusz + kropka marki pod pigułką */
.header-nav .nav-link.active,
.nav-dropdown.active > button {
    color: var(--fp-ink);
    font-weight: 600;
    background: transparent;
}

.header-nav .nav-link.active::after,
.nav-dropdown.active > button::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--fp-brand);
    box-shadow: 0 0 0 3px var(--fp-brand-bg);
    display: block;
}

html.fp-motion .header-nav .nav-link.active::after,
html.fp-motion .nav-dropdown.active > button::after {
    animation: fp-nav-dot var(--fp-dur-base) var(--fp-ease-spring) both;
}

.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown > button i.bi-chevron-down {
    font-size: 10px;
    color: currentColor;
    opacity: 0.7;
    transition: transform var(--fp-dur-base) var(--fp-ease-out);
}

.nav-dropdown > button:has(+ .dropdown-content.visible) i.bi-chevron-down {
    transform: rotate(180deg);
}

/* --- Dropdowny: szkło mocne, popover --- */
.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    min-width: 208px;
    display: none;
    padding: 6px;
    border-radius: var(--fp-radius);
    background: var(--fp-glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--fp-glass-blur-strong)) saturate(var(--fp-glass-saturate));
    backdrop-filter: blur(var(--fp-glass-blur-strong)) saturate(var(--fp-glass-saturate));
    border: 1px solid var(--fp-glass-border);
    box-shadow: var(--fp-shadow-pop), inset 0 1px 0 var(--fp-glass-edge);
    z-index: var(--fp-z-dropdown);
}

.header-actions .dropdown-content {
    right: 0;
    left: auto;
}

.dropdown-content.visible {
    display: block;
}

html.fp-motion .dropdown-content.visible {
    animation: fp-pop-in var(--fp-dur-base) var(--fp-ease-out) both;
}

.dropdown-content a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1px 0;
    padding: 8px 10px 8px 12px;
    border-radius: var(--fp-radius-sm);
    color: var(--fp-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    transition: background var(--fp-dur-fast) var(--fp-ease-out), color var(--fp-dur-fast) var(--fp-ease-out);
}

.dropdown-content a:hover {
    color: var(--fp-ink);
    background: var(--fp-hover-ink);
}

.dropdown-content a:focus-visible {
    outline: none;
    color: var(--fp-ink);
    box-shadow: 0 0 0 3px var(--fp-focus-ring);
}

.dropdown-content a.active {
    color: var(--fp-ink);
    font-weight: 600;
    background: var(--fp-hover-ink);
}

.dropdown-content a.active::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--fp-brand);
    flex: none;
}

.dropdown-content a i {
    font-size: 13px;
    width: 14px;
    text-align: center;
    color: var(--fp-faint);
}

.dropdown-content a:hover i,
.dropdown-content a.active i {
    color: var(--fp-ink);
}

/* --- Akcje nagłówka --- */
.header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: 12px;
    flex-shrink: 0;
}

/* Ghost 34 px: ramka przezroczysta, na hover ramka i tło strony */
.icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--fp-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--fp-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--fp-dur-fast) var(--fp-ease-out), border-color var(--fp-dur-fast) var(--fp-ease-out), color var(--fp-dur-fast) var(--fp-ease-out), transform var(--fp-dur-instant) var(--fp-ease-out);
}

.icon-btn:hover {
    background: var(--fp-bg);
    border-color: var(--fp-border);
    color: var(--fp-ink);
}

.icon-btn:active {
    transform: scale(0.96);
}

.icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--fp-focus-ring);
}

.icon-btn i {
    font-size: inherit;
    line-height: 1;
}

/* Wybór zakresu dat: pigułka z tekstem zakresu */
.header-date-picker {
    position: relative;
}

.header-btn-date {
    position: relative;
    width: auto;
    height: 34px;
    gap: 8px;
    padding: 0 12px 0 9px;
    border-color: var(--fp-border);
    background: var(--fp-surface);
    border-radius: var(--fp-radius-pill);
    color: var(--fp-ink);
}

.header-btn-date:hover {
    background: var(--fp-surface);
    border-color: var(--fp-border-strong);
}

.header-btn-date-focus {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    color: var(--fp-muted);
    font-size: 14px;
}

.header-date-label {
    font-size: var(--fp-text-sm);
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* Podpowiedź samouczka na przycisku pomocy — trzy cykle i spokój */
.header-btn-help.is-onboarding-hint {
    position: relative;
    border-color: var(--fp-accent-bg);
    color: var(--fp-accent);
    box-shadow: 0 0 0 0 var(--fp-focus-ring);
}

html.fp-motion .header-btn-help.is-onboarding-hint {
    animation: flowpeek-help-pulse 2.2s var(--fp-ease-in-out) 3;
}

.header-btn-help.is-onboarding-hint::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    border: 1px solid var(--fp-accent-bg);
}

html.fp-motion .header-btn-help.is-onboarding-hint::after {
    animation: flowpeek-help-ring 2.2s var(--fp-ease-out) 3;
}

@keyframes flowpeek-help-pulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-1px) scale(1.03); }
}

@keyframes flowpeek-help-ring {
    0% { opacity: 0.7; transform: scale(0.96); }
    70%, 100% { opacity: 0; transform: scale(1.08); }
}

.header-date-picker .date-dropdown {
    right: 0;
    top: calc(100% + 6px);
}

.header-date-picker .date-custom.is-hidden {
    display: none;
}

/* Popover dat: pozycja i warstwa; wygląd presetów i wejście — shared.css §15 */
#global-date-dropdown {
    border-radius: var(--fp-radius);
    z-index: var(--fp-z-popover);
}

/* --- Menu użytkownika --- */
.header-user-menu {
    position: relative;
}

.header-user-trigger {
    width: auto;
    min-width: 34px;
    height: 34px;
    padding: 0 8px 0 3px;
    gap: 8px;
    border-radius: var(--fp-radius-pill);
}

.header-user-avatar,
.user-dropdown-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fp-grid);
    color: var(--fp-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.header-user-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fp-text-sm);
    font-weight: 600;
    color: var(--fp-ink);
}

.header-user-chevron {
    font-size: 10px;
    color: var(--fp-faint);
}

.header-user-menu .dropdown-content {
    min-width: 250px;
    padding: 8px;
}

.header-user-menu .dropdown-content a {
    font-size: 13px;
    padding: 9px 10px;
}

.user-dropdown-form {
    margin: 0;
}

.user-dropdown-button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 1px 0;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--fp-radius-sm);
    background: transparent;
    color: var(--fp-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--fp-dur-fast) var(--fp-ease-out), color var(--fp-dur-fast) var(--fp-ease-out);
}

.user-dropdown-button:hover {
    color: var(--fp-ink);
    background: var(--fp-hover-ink);
}

.user-dropdown-button i {
    font-size: 13px;
    width: 14px;
    text-align: center;
    color: var(--fp-faint);
}

.user-dropdown-content .user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 10px;
}

.user-dropdown-content .user-dropdown-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.user-dropdown-content .user-dropdown-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-dropdown-content .user-dropdown-meta strong {
    font-size: 13px;
    color: var(--fp-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-content .user-dropdown-meta span {
    font-size: 11.5px;
    color: var(--fp-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-divider {
    height: 1px;
    margin: 6px 0;
    background: var(--fp-border-soft);
}

/* --- Ciało aplikacji --- */
.app-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.sidebar-overlay {
    display: none;
}

/* Sidebar: szkło mocne; scroll żyje w .sidebar-content, przycisk zwijania
   jest ostatnim dzieckiem .app-sidebar i zostaje przypięty na dole. */
.app-sidebar {
    width: var(--sidebar-width);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: none;
    background: var(--fp-glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--fp-glass-blur)) saturate(var(--fp-glass-saturate));
    backdrop-filter: blur(var(--fp-glass-blur)) saturate(var(--fp-glass-saturate));
    border-right: 1px solid var(--fp-border-soft);
}

.sidebar-content {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.sidebar-mobile-header {
    display: none;
}

.sidebar-main-content {
    flex: 1;
}

/* Rytm sekcji sidebara */
.sidebar-section {
    margin-bottom: var(--fp-space-6);
}

.sidebar-section:last-child {
    margin-bottom: 0;
}

.sidebar-section > h3,
.sidebar-section-title {
    font-size: var(--fp-text-eyebrow);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fp-muted);
    margin: 0 0 10px;
}

/* Panel kontekstu strony (sidebar bez własnych filtrów): etykieta, tytuł, zdanie, linki.
   Płaski na każdej stronie — arkusze stron (traffic-sources.css) malują .sidebar-section
   jako białą kartę, a panel kontekstu ma być jednym komponentem, nie dwoma. */
.app-sidebar .sidebar-context {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.sidebar-context .fp-eyebrow {
    margin-bottom: 6px;
}

.sidebar-context-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fp-ink);
    margin: 0 0 4px;
}

.sidebar-context-text {
    font-size: var(--fp-text-sm);
    line-height: 1.45;
    color: var(--fp-muted);
    margin: 0 0 12px;
}

.sidebar-context-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 -8px;
}

.sidebar-context-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
    padding: 0 8px;
    border-radius: var(--fp-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--fp-muted);
    text-decoration: none;
    transition: background var(--fp-dur-fast) var(--fp-ease-out), color var(--fp-dur-fast) var(--fp-ease-out);
}

.sidebar-context-link i {
    font-size: 18px;
    color: var(--fp-faint);
    transition: transform var(--fp-dur-fast) var(--fp-ease-out), color var(--fp-dur-fast);
}

.sidebar-context-link:hover,
.sidebar-context-link:focus-visible {
    background: var(--fp-hover-ink);
    color: var(--fp-ink);
    outline: none;
}

.sidebar-context-link:hover i,
.sidebar-context-link:focus-visible i {
    color: var(--fp-ink);
    transform: translateX(2px);
}

.sidebar-bottom {
    margin-top: auto;
    padding-top: var(--fp-space-5);
    margin-bottom: 4px;
}

/* Karta opinii: szklana karta (przepis w shared.css §1), przycisk tuszowy */
.sidebar-feedback-card {
    position: relative;
    padding: 16px;
}

.sidebar-feedback-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fp-faint);
    cursor: pointer;
    transition: background var(--fp-dur-fast) var(--fp-ease-out), color var(--fp-dur-fast) var(--fp-ease-out);
}

.sidebar-feedback-close:hover {
    background: var(--fp-grid);
    color: var(--fp-ink);
}

.sidebar-feedback-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fp-radius-sm);
    background: var(--fp-surface-2);
    border: 1px solid var(--fp-grid);
    color: var(--fp-ink);
    margin-bottom: 12px;
}

.sidebar-feedback-title {
    font-size: var(--fp-text-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0 28px 6px 0;
}

.sidebar-feedback-text {
    font-size: var(--fp-text-sm);
    color: var(--fp-muted);
    line-height: 1.45;
    margin: 0 0 14px;
}

.sidebar-feedback-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--fp-radius);
    border: 1px solid var(--fp-btn-primary-bg);
    background: var(--fp-btn-primary-bg);
    color: var(--fp-btn-primary-text);
    font-size: 13px;
    font-weight: 550;
    text-decoration: none;
    transition: background var(--fp-dur-fast) var(--fp-ease-out), transform var(--fp-dur-fast) var(--fp-ease-out), box-shadow var(--fp-dur-base) var(--fp-ease-out);
}

.sidebar-feedback-button:hover {
    background: var(--fp-btn-primary-hover);
    color: var(--fp-btn-primary-text);
    transform: translateY(-1px);
    box-shadow: var(--fp-shadow-btn);
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-width: 0;
    background: transparent;
}

.app-main.full-width {
    width: 100%;
    max-width: none;
}

.content-area {
    padding: 0;
    overflow: visible;
    background: transparent;
    width: 100%;
}

/* Lokalny picker dat na podstronach jest zastąpiony pickerem globalnym w headerze */
.app-main .date-range-picker {
    display: none !important;
}

body.page-dashboard .content-area {
    padding: var(--fp-page-gutter);
}

.subpage-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--fp-page-gutter);
    align-items: start;
    padding: var(--fp-page-gutter);
}

.page-content {
    min-width: 0;
}

.subpage-container .page-header h1,
.subpage-container .page-title {
    line-height: 1.2;
}

/* --- Zwijanie sidebara --- */
.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--fp-border-soft);
    cursor: pointer;
    color: var(--fp-faint);
    flex-shrink: 0;
    padding: 0;
    transition: color var(--fp-dur-fast) var(--fp-ease-out), background var(--fp-dur-fast) var(--fp-ease-out);
}

.sidebar-collapse-btn:hover {
    color: var(--fp-ink);
    background: var(--fp-hover-ink);
}

.sidebar-collapse-btn i {
    transition: transform var(--fp-dur-base) var(--fp-ease-out);
}

.dashboard-sidebar-hidden .app-sidebar {
    display: none;
}

.sidebar-expand-handle {
    display: none;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 20px;
    width: 44px;
    min-width: 44px;
    flex-shrink: 0;
    background: var(--fp-glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--fp-glass-blur)) saturate(var(--fp-glass-saturate));
    backdrop-filter: blur(var(--fp-glass-blur)) saturate(var(--fp-glass-saturate));
    border-right: 1px solid var(--fp-border-soft);
}

.dashboard-sidebar-hidden .sidebar-expand-handle {
    display: flex;
}

.sidebar-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--fp-muted);
    padding: 0;
    transition: color var(--fp-dur-fast) var(--fp-ease-out), background var(--fp-dur-fast) var(--fp-ease-out), border-color var(--fp-dur-fast) var(--fp-ease-out);
}

.sidebar-expand-btn:hover {
    color: var(--fp-ink);
    border-color: var(--fp-border-strong);
}

/* --- Siatki i sekcje --- */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.section {
    margin-bottom: 3rem;
}

.section-header {
    margin-bottom: 1.5rem;
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: var(--fp-radius-sm);
    color: var(--fp-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: background var(--fp-dur-fast) var(--fp-ease-out), color var(--fp-dur-fast) var(--fp-ease-out);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
}

.nav-link:hover {
    color: var(--fp-ink);
    background-color: var(--fp-hover-ink);
    text-decoration: none;
}

.nav-link.active {
    color: var(--fp-ink);
    background-color: transparent;
    font-weight: 600;
}

.nav-link i {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.nav-link .bi-chevron-down,
.nav-link .bi-chevron-up {
    font-size: 10px;
    margin-left: auto;
    color: var(--fp-faint);
    transition: transform var(--fp-dur-base) var(--fp-ease-out);
}

.nav-link .bi-chevron-up {
    transform: rotate(180deg);
}

/* Bootstrapowy caret dropdownu — wyłączony */
.nav-link.dropdown-toggle::after,
.nav-item.dropdown .nav-link[data-bs-toggle="dropdown"]::after {
    display: none;
    content: none;
}

.nav-item.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: var(--fp-glass-bg-strong) !important;
    -webkit-backdrop-filter: blur(var(--fp-glass-blur-strong)) saturate(var(--fp-glass-saturate));
    backdrop-filter: blur(var(--fp-glass-blur-strong)) saturate(var(--fp-glass-saturate));
    border: 1px solid var(--fp-glass-border) !important;
    border-radius: var(--fp-radius) !important;
    box-shadow: var(--fp-shadow-pop) !important;
    min-width: 200px !important;
    z-index: var(--fp-z-dropdown) !important;
    display: none !important;
    margin-top: 6px !important;
    padding: 6px !important;
}

.dropdown-menu.dropdown-menu-end {
    left: auto !important;
    right: 0 !important;
}

.dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}

html.fp-motion .dropdown-menu.show {
    animation: fp-pop-in var(--fp-dur-base) var(--fp-ease-out) both;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--fp-muted);
    text-decoration: none;
    font-size: 13px;
    transition: background var(--fp-dur-fast) var(--fp-ease-out), color var(--fp-dur-fast) var(--fp-ease-out);
    border-radius: var(--fp-radius-sm);
    white-space: nowrap;
}

.dropdown-item:hover {
    background-color: var(--fp-hover-ink);
    color: var(--fp-ink);
    text-decoration: none;
}

.dropdown-item i {
    width: 16px;
    text-align: center;
}

/* ===== Struktura formularzy (bez kolorów — recepta i .form-group w shared.css) ===== */

/* ===== Pasek postępu legacy (.progress) — cienki, tuszowy ===== */
.progress {
    height: 6px;
    background-color: var(--fp-grid);
    border-radius: var(--fp-radius-pill);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: var(--fp-ink);
    color: transparent;
    font-size: 0;
    transition: width var(--fp-dur-count) var(--fp-ease-out);
}

/* ===== Podpowiedzi (.fp-tooltip > .tooltip-text) — hover CSS; .tooltip należy do Bootstrapa ===== */

/* ===== Paginacja ===== */
.pagination {
    display: flex;
    list-style: none;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.page-item {
    display: flex;
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    min-width: 32px;
    height: 32px;
    color: var(--fp-muted);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-sm);
    background: var(--fp-surface);
    transition: background var(--fp-dur-fast) var(--fp-ease-out), border-color var(--fp-dur-fast) var(--fp-ease-out), color var(--fp-dur-fast) var(--fp-ease-out);
}

.page-link:hover {
    background-color: var(--fp-bg);
    border-color: var(--fp-border-strong);
    color: var(--fp-ink);
}

.page-item.active .page-link {
    background-color: var(--fp-ink);
    border-color: var(--fp-ink);
    color: var(--fp-btn-primary-text);
}

.page-item.disabled .page-link {
    color: var(--fp-faint);
    pointer-events: none;
    background-color: var(--fp-bg);
}

/* ===== Responsywność ===== */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive .table {
        min-width: 600px;
    }
}

@media (max-width: 1200px) {
    :root {
        --sidebar-width: 35%;
    }

    .app-header {
        padding: 0 16px;
    }

    .header-nav {
        gap: 2px;
        margin-left: 12px;
    }

    .nav-dropdown > button,
    .header-nav .nav-link {
        padding: 7px 9px;
        font-size: 12.5px;
    }

    .dropdown-content {
        min-width: 190px;
    }

    /* Ciaśniej: pigułka dat tylko z ikoną, krótsza nazwa użytkownika */
    .header-btn-date {
        width: 34px;
        padding: 0;
        border-radius: var(--fp-radius-sm);
        background: transparent;
        border-color: transparent;
    }

    .header-date-label {
        display: none;
    }

    .header-user-name {
        max-width: 96px;
    }

    .app-sidebar {
        width: 35%;
    }
}

@media (max-width: 1024px) {
    :root {
        --sidebar-width: 100%;
    }

    .app-body {
        flex-direction: column;
    }

    .app-sidebar {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--fp-border-soft);
    }

    .subpage-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .nav-link {
        padding: 6px 10px;
        font-size: 12px;
        gap: 4px;
    }

    .nav-link i {
        font-size: 13px;
        width: 14px;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 13px;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.875rem; }

    .app-header {
        height: 52px;
        padding: 0 10px;
        gap: 4px;
    }

    .header-nav {
        display: none;
    }

    .header-logo {
        height: 24px;
    }

    .header-brand {
        margin-left: 0;
        min-width: 0;
    }

    .header-actions {
        gap: 2px;
        margin-left: 8px;
    }

    .header-user-trigger {
        width: 34px;
        padding: 0;
        justify-content: center;
    }

    .header-user-name,
    .header-user-chevron {
        display: none;
    }

    .header-user-menu .dropdown-content {
        right: 0;
        left: auto;
        min-width: 220px;
        max-width: min(280px, calc(100vw - 16px));
    }

    .header-btn-date {
        width: 34px;
        padding: 0;
        border-radius: var(--fp-radius-sm);
        background: transparent;
        border-color: transparent;
    }

    .header-date-label {
        display: none;
    }

    .header-btn-filter,
    .header-btn-refresh {
        display: inline-flex;
    }

    .nav-link {
        padding: 6px 8px;
        font-size: 11px;
    }

    .nav-link:not(.active) {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-content {
        padding: 0;
    }

    .sidebar-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 12px 14px;
        border-bottom: 1px solid var(--fp-border-soft);
        background: var(--fp-glass-bg-opaque);
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .sidebar-mobile-header h3 {
        font-size: var(--fp-text-md);
        font-weight: 600;
        letter-spacing: -0.01em;
        margin: 0;
        color: var(--fp-ink);
    }

    .sidebar-mobile-close-btn {
        width: 34px;
        height: 34px;
    }

    .sidebar-main-content {
        padding: 14px 14px 0;
    }

    .sidebar-bottom {
        margin-bottom: 0;
        padding: 16px 14px 14px;
    }

    .sidebar-feedback-button {
        width: 100%;
    }

    body.page-dashboard .content-area {
        padding: 16px;
    }

    .subpage-container {
        padding: 16px;
        gap: 16px;
    }

    .app-body {
        flex-direction: row;
    }

    /* Sidebar staje się szufladą z lewej (pełny ekran, tło nieprzezroczyste) */
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        transform: translateX(-102%);
        transition: transform var(--fp-dur-slow) var(--fp-ease-out);
        z-index: var(--fp-z-drawer);
        border-right: none;
        border-bottom: none;
        overflow-y: auto;
        background: var(--fp-glass-bg-opaque);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .sidebar-open .app-sidebar {
        transform: translateX(0);
        box-shadow: var(--fp-shadow-modal);
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--fp-backdrop);
        z-index: calc(var(--fp-z-drawer) - 1);
        cursor: pointer;
    }

    .sidebar-open .sidebar-overlay {
        display: block;
    }

    .btn-mobile-sidebar {
        display: inline-flex;
        margin-right: 8px;
    }

    .sidebar-collapse-btn,
    .sidebar-expand-handle {
        display: none !important;
    }

    /* Miejsce na dolny pasek nawigacji */
    .app-main {
        padding-bottom: 80px;
    }
}

@media (min-width: 769px) {
    .sidebar-overlay {
        display: none !important;
    }

    .btn-mobile-sidebar {
        display: none !important;
    }

    .header-btn-filter {
        display: none !important;
    }

    .mobile-bottom-nav {
        display: none !important;
    }
}

@media (max-width: 640px) {

    .nav-item {
        flex-shrink: 0;
    }

    .nav-link {
        padding: 6px 8px;
        min-width: fit-content;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 12.5px;
    }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 0.875rem; }
    h6 { font-size: 0.75rem; }

    .app-header {
        height: 48px;
        padding: 0 8px;
    }

    .header-logo {
        height: 22px;
    }

    .header-actions {
        gap: 0;
        margin-left: 6px;
    }

    .header-actions .icon-btn,
    .header-btn-date,
    .header-user-trigger {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }

    .btn-mobile-sidebar {
        margin-right: 4px;
    }

    .header-user-menu .dropdown-content {
        min-width: 210px;
    }

    .sidebar-mobile-header {
        padding: 10px 12px;
    }

    .sidebar-main-content {
        padding: 12px 12px 0;
    }

    .sidebar-bottom {
        padding: 12px 12px 12px;
    }

    body.page-dashboard .content-area {
        padding: 12px;
    }

    .subpage-container {
        padding: 12px;
        gap: 12px;
    }

    .fp-page-head {
        margin-bottom: var(--fp-space-4);
    }

    .fp-empty {
        padding: 32px 16px;
    }
}

/* ===== Układ pełnej szerokości =====
   Docelowy sposób deklarowania: modyfikator na kontenerze (opt-in), a nie lista
   `body.page-*` w arkuszu, który ma być agnostyczny wobec stron. Nowe strony
   dopisują `.is-wide` w markupie zamiast rozszerzać listę poniżej. */
.subpage-container.is-wide {
    display: block;
    grid-template-columns: none;
    gap: 0;
    width: 100%;
}

.subpage-container.is-wide.has-top-pad {
    padding: 16px 0 0;
}

/* ===== Układy per strona (lista historyczna — do wygaszenia na rzecz .is-wide) ===== */
body.page-live .subpage-container,
body.page-visitor-journey .subpage-container {
    display: block;
    grid-template-columns: none;
    gap: 0;
    width: 100%;
}

body.page-multi-touch-attribution,
body.page-landing-performance,
body.page-event-analytics,
body.page-tracking-quality {
    overflow-x: hidden;
}

body.page-devices .subpage-container,
body.page-marketing-costs .subpage-container {
    display: block;
    grid-template-columns: none;
    gap: 0;
    width: 100%;
    padding: 16px 0 0;
}

body.page-ml-reports .subpage-container,
body.page-product-reports .subpage-container,
body.page-product-funnel .subpage-container,
body.page-multi-touch-attribution .subpage-container,
body.page-landing-performance .subpage-container,
body.page-event-analytics .subpage-container,
body.page-tracking-quality .subpage-container {
    display: block;
    grid-template-columns: none;
    gap: 0;
    width: 100%;
    padding: 16px 0 0;
}

body.page-product-mappings .subpage-container {
    display: block;
    grid-template-columns: none;
    gap: 0;
    width: 100%;
}

body.page-live .widget,
body.page-visitor-journey .widget {
    width: 100%;
    margin-bottom: 2rem;
    grid-column: 1 / -1;
}

body.page-live .widgets-container,
body.page-visitor-journey .widgets-container {
    display: block;
    width: 100%;
}

@media (max-width: 768px) {
    body.page-devices .subpage-container,
    body.page-marketing-costs .subpage-container,
    body.page-ml-reports .subpage-container,
    body.page-product-reports .subpage-container,
    body.page-product-funnel .subpage-container,
    body.page-multi-touch-attribution .subpage-container,
    body.page-landing-performance .subpage-container,
    body.page-event-analytics .subpage-container,
    body.page-tracking-quality .subpage-container {
        padding-top: 12px;
    }
}

@media (max-width: 480px) {
    body.page-devices .subpage-container,
    body.page-marketing-costs .subpage-container,
    body.page-ml-reports .subpage-container,
    body.page-product-reports .subpage-container,
    body.page-product-funnel .subpage-container,
    body.page-multi-touch-attribution .subpage-container,
    body.page-landing-performance .subpage-container,
    body.page-event-analytics .subpage-container,
    body.page-tracking-quality .subpage-container {
        padding-top: 8px;
    }
}

/* ============================================================
   MOBILE: panel menu (prawa szuflada), dolna nawigacja, podmenu Raporty
   ============================================================ */

.mobile-bottom-nav {
    display: none;
}

.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--fp-backdrop);
    z-index: var(--fp-z-overlay);
    cursor: pointer;
}

.mobile-menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: var(--fp-glass-bg-opaque);
    z-index: calc(var(--fp-z-drawer) - 1);
    transform: translateX(100%);
    transition: transform var(--fp-dur-slow) var(--fp-ease-out);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

body.mobile-menu-open .mobile-menu-overlay {
    display: block;
}

body.mobile-menu-open .mobile-menu-panel {
    transform: translateX(0);
}

.mobile-menu-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 12px 20px;
    border-bottom: 1px solid var(--fp-border-soft);
    position: sticky;
    top: 0;
    background: var(--fp-glass-bg-opaque);
    z-index: 1;
}

.mobile-menu-panel-header h3 {
    font-size: var(--fp-text-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fp-ink);
    margin: 0;
}

.mobile-menu-panel-nav {
    padding: 8px 10px 32px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mobile-menu-section-title {
    font-size: var(--fp-text-eyebrow);
    font-weight: 600;
    color: var(--fp-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 16px 12px 6px;
}

.mobile-menu-panel-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--fp-radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--fp-muted);
    text-decoration: none;
    transition: background var(--fp-dur-fast) var(--fp-ease-out), color var(--fp-dur-fast) var(--fp-ease-out);
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.mobile-menu-panel-link:hover {
    background: var(--fp-hover-ink);
    color: var(--fp-ink);
}

.mobile-menu-panel-link.active {
    background: var(--fp-hover-ink);
    color: var(--fp-ink);
    font-weight: 600;
}

.mobile-menu-panel-link.active::after {
    content: "";
    margin-left: auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--fp-brand);
    box-shadow: 0 0 0 3px var(--fp-brand-bg);
    flex: none;
}

.mobile-menu-panel-link i {
    width: 18px;
    text-align: center;
    font-size: 15px;
    flex-shrink: 0;
    color: var(--fp-faint);
}

.mobile-menu-panel-link.active i,
.mobile-menu-panel-link:hover i {
    color: var(--fp-ink);
}

@media (max-width: 768px) {
    /* Dolny pasek: jasne szkło */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 12px;
        left: 12px;
        right: 12px;
        background: var(--fp-glass-bg-strong);
        -webkit-backdrop-filter: blur(var(--fp-glass-blur)) saturate(var(--fp-glass-saturate));
        backdrop-filter: blur(var(--fp-glass-blur)) saturate(var(--fp-glass-saturate));
        border-radius: var(--fp-radius-lg);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        z-index: var(--fp-z-mobile-nav);
        border: 1px solid var(--fp-glass-border);
        box-shadow: var(--fp-shadow-pop), inset 0 1px 0 var(--fp-glass-edge);
        gap: 0;
    }

    .mobile-nav-item {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 7px 4px 8px;
        border-radius: var(--fp-radius);
        color: var(--fp-muted);
        text-decoration: none;
        font-family: inherit;
        font-size: 10px;
        font-weight: 500;
        background: none;
        border: none;
        cursor: pointer;
        transition: color var(--fp-dur-fast) var(--fp-ease-out), background var(--fp-dur-fast) var(--fp-ease-out);
        -webkit-tap-highlight-color: transparent;
        line-height: 1;
    }

    .mobile-nav-item i {
        font-size: 21px;
        line-height: 1;
        display: block;
    }

    .mobile-nav-item span {
        display: block;
    }

    a.mobile-nav-item.active,
    button.mobile-nav-item.active,
    button.mobile-nav-ai.is-active {
        color: var(--fp-ink);
        font-weight: 600;
        background: transparent;
    }

    a.mobile-nav-item.active::after,
    button.mobile-nav-item.active::after,
    button.mobile-nav-ai.is-active::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 2px;
        width: 4px;
        height: 4px;
        margin-left: -2px;
        border-radius: 50%;
        background: var(--fp-brand);
        box-shadow: 0 0 0 3px var(--fp-brand-bg);
    }

    html.fp-motion a.mobile-nav-item.active::after,
    html.fp-motion button.mobile-nav-item.active::after,
    html.fp-motion button.mobile-nav-ai.is-active::after {
        animation: fp-nav-dot var(--fp-dur-base) var(--fp-ease-spring) both;
    }
}

/* --- Podmenu Raporty (mobile) --- */
.mobile-subnav {
    display: none;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(68px + 12px + 12px);
    background: var(--fp-glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--fp-glass-blur-strong)) saturate(var(--fp-glass-saturate));
    backdrop-filter: blur(var(--fp-glass-blur-strong)) saturate(var(--fp-glass-saturate));
    border-radius: var(--fp-radius-card);
    border: 1px solid var(--fp-glass-border);
    /* Trzeci cień = własne przyciemnienie tła. Bez niego tytuł strony przebijał
       przez zaokrąglony róg panelu i czytał się jak dziwny dziobek popovera. */
    box-shadow: var(--fp-shadow-pop), inset 0 1px 0 var(--fp-glass-edge),
        0 0 0 100vmax var(--fp-backdrop);
    z-index: var(--fp-z-mobile-subnav);
    padding: 8px;
    flex-direction: column;
    gap: 2px;
    /* Panel nie sięga pod nagłówek strony — inaczej h1 przebijał przez jego
       zaokrąglony róg i czytał się jak dziobek popovera. Lista i tak przewija się w środku. */
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

.mobile-subnav.is-open {
    display: flex;
}

html.fp-motion .mobile-subnav.is-open {
    animation: fp-scale-in var(--fp-dur-base) var(--fp-ease-out) both;
}

.mobile-subnav-title {
    font-size: var(--fp-text-eyebrow);
    font-weight: 600;
    color: var(--fp-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 12px 4px;
}

.mobile-subnav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--fp-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--fp-muted);
    text-decoration: none;
    transition: background var(--fp-dur-fast) var(--fp-ease-out), color var(--fp-dur-fast) var(--fp-ease-out);
}

.mobile-subnav-link i {
    font-size: 15px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    color: var(--fp-faint);
}

.mobile-subnav-link:hover,
.mobile-subnav-link.active {
    background: var(--fp-hover-ink);
    color: var(--fp-ink);
}

.mobile-subnav-link.active {
    font-weight: 600;
}

.mobile-subnav-link.active i,
.mobile-subnav-link:hover i {
    color: var(--fp-ink);
}

.mobile-subnav-link.active::after {
    content: "";
    margin-left: auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--fp-brand);
    box-shadow: 0 0 0 3px var(--fp-brand-bg);
    flex: none;
}