/*
Name: Warstwa ft-core: tokeny koloru i komponenty panelu
Slug: ft-core
Version: 1.1.1
Description: Tokeny koloru portalu w dwóch paletach (ciemna i jasna), podpięcie palety Astry pod te same wartości oraz wspólne komponenty panelu konta i nagłówka.
Module: core
Scope: front
Load: manual
Media: all

1.1.1: odporność komponentów na style treści motywu. Astra daje akapitom
       i listom w .entry-content margines 1,6em (selektor .entry-content p),
       który wygrywał z pojedynczą klasą komponentu. Pusty stan miał przez to
       dziurę między tytułem a tekstem. Teksty komponentów mają teraz selektor
       z dwóch klas albo z elementem, wygląd poza treścią strony bez zmian.
1.1.0: komponenty panelu konta (FLE 1.113.0) i menu użytkownika w nagłówku v2.19:
       ft-avatar, ft-menu, ft-pills, ft-status, ft-switch, ft-empty, ft-dialog,
       ft-lifebar, ft-stats. Nowe tokeny promieni i ruchu (--ft-r-s, --ft-r-m,
       --ft-r-l, --ft-ease, --ft-dur). Istniejące reguły bez zmian, więc strony
       bez nowych klas wyglądają identycznie jak na 1.0.2.
1.0.2: token --ft-fs-field (rozmiar fontu pól formularzy, minimum 16 px) i reguła
       bazowa dla pól motywu. Astra ustawia na telefonie bazowy font 91,2%,
       więc pola liczone w rem miały 13 do 15 px, a iPhone powiększał wtedy
       stronę przy wejściu w pole.
1.0.1: zmienne pochodne Astry (ramki, tła pól) w jasnej palecie. Astra liczy je
       w :root ze swoich ciemnych kolorów, więc tabele miały prawie czarne ramki.
1.0.0: pierwsza wersja, kontrakt koloru v2.
*/

/* Jedno miejsce prawdy dla kolorów. Sekcje i wtyczki sięgają wyłącznie
   po --ft-* z jasną wartością zapasową. Paletę wybiera moduł core przez
   klasę na body: ft-paleta-ciemna albo ft-paleta-jasna. Bez klasy obowiązuje
   ciemna, czyli stan portalu sprzed zmiany. */
:root{
    --ft-core: 1;
    --ft-core-version: "1.1.1";
    --ft-font-display: "Archivo", sans-serif;
    --ft-font-body: "Instrument Sans", sans-serif;
    /* Rozmiar fontu pól formularzy: nigdy poniżej 16 px, niezależnie od
       bazowego fontu motywu. Poniżej 16 px Safari na iPhonie powiększa
       stronę przy wejściu w pole. Wtyczki i sekcje sięgają po ten token. */
    --ft-fs-field: max(16px, 0.95rem);
    /* 1.1.0: promienie i ruch. Te same wartości miały dotąd nagłówek
       i wtyczka, każde u siebie. */
    --ft-r-s: 6px;
    --ft-r-m: 10px;
    --ft-r-l: 16px;
    --ft-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ft-dur: 0.18s;
    --ft-bg: #0C0D10;
    --ft-bg-alt: #101216;
    --ft-surface: #16181D;
    --ft-surface-2: #1C1F26;
    --ft-surface-3: #20242C;
    --ft-chrome: #0C0D10;
    --ft-text: #F2F3F5;
    --ft-text-2: #9AA0AB;
    --ft-muted: #868C97;
    --ft-faint: #5F646E;
    --ft-accent: #C6F135;
    --ft-accent-hover: #D4F95C;
    --ft-accent-ink: #131503;
    --ft-accent-text: #C6F135;
    --ft-accent-line: #C6F135;
    --ft-accent-strong: #C6F135;
    --ft-accent-soft: rgba(198,241,53,0.10);
    --ft-focus: #C6F135;
    --ft-logo-ico: #C6F135;
    --ft-line: #262A33;
    --ft-line-2: #333945;
    --ft-line-ui: #666E7E;
    --ft-hover-tint: rgba(255,255,255,0.05);
    --ft-danger: #F87171;
    --ft-danger-strong: #EF4444;
    --ft-danger-soft: rgba(248,113,113,0.10);
    --ft-danger-line: #8A3A3A;
    --ft-warning: #FBBF24;
    --ft-warning-soft: #2B2113;
    --ft-warning-line: #4A3A1A;
    --ft-success: #22C55E;
    --ft-fb: #1877F2;
    --ft-fb-hover: #3A8BF5;
    --ft-fb-text: #4D8FF5;
    --ft-wa: #25D366;
    --ft-wa-text: #25D366;
    --ft-on-wa: #06130B;
    --ft-on-brand: #FFFFFF;
    --ft-tiktok-text: #38E0D0;
    --ft-scrim: rgba(6,7,9,0.55);
    --ft-scrim-strong: rgba(6,7,9,0.9);
    --ft-shadow-sm: rgba(0,0,0,0.25);
    --ft-shadow-md: rgba(0,0,0,0.5);
    --ft-shadow-lg: rgba(0,0,0,0.8);
    --ft-inv-bg: #16181D;
    --ft-inv-surface: #1C1F26;
    --ft-inv-text: #F2F3F5;
    --ft-inv-muted: #868C97;
    --ft-inv-line: #262A33;
    --ft-inv-accent: #C6F135;
    --ft-inv-fb: #4C8BF5;
    --ft-inv-tiktok: #38E0D0;
    --ft-ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23868C97' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    --ft-ico-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23868C97' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    color-scheme: dark;
}

body.ft-paleta-jasna{
    --ft-bg: #F7F8F5;
    --ft-bg-alt: #FFFFFF;
    --ft-surface: #FFFFFF;
    --ft-surface-2: #F1F3EE;
    --ft-surface-3: #E8EBE4;
    --ft-chrome: #FFFFFF;
    --ft-text: #191D22;
    --ft-text-2: #474D55;
    --ft-muted: #626970;
    --ft-faint: #7D848A;
    --ft-accent: #C8F52B;
    --ft-accent-hover: #B5DE1F;
    --ft-accent-ink: #191D22;
    --ft-accent-text: #4E6A00;
    --ft-accent-line: #6A8700;
    --ft-accent-strong: #191D22;
    --ft-accent-soft: #EEF7D2;
    --ft-focus: #4E6A00;
    --ft-logo-ico: #A5D918;
    --ft-line: #E0E4DE;
    --ft-line-2: #CDD2CA;
    --ft-line-ui: #7E867C;
    --ft-hover-tint: rgba(25,29,34,0.04);
    --ft-danger: #B42318;
    --ft-danger-strong: #B42318;
    --ft-danger-soft: #FDECEA;
    --ft-danger-line: #EBA8A0;
    --ft-warning: #8A5A00;
    --ft-warning-soft: #FBF1DC;
    --ft-warning-line: #E8CF9C;
    --ft-success: #1F7A3D;
    --ft-fb: #1466D6;
    --ft-fb-hover: #1260C8;
    --ft-fb-text: #1466D6;
    --ft-wa: #25D366;
    --ft-wa-text: #127A3C;
    --ft-on-wa: #06130B;
    --ft-on-brand: #FFFFFF;
    --ft-tiktok-text: #0F7B73;
    --ft-scrim: rgba(25,29,34,0.42);
    --ft-scrim-strong: rgba(16,19,23,0.88);
    --ft-shadow-sm: rgba(25,29,34,0.06);
    --ft-shadow-md: rgba(25,29,34,0.10);
    --ft-shadow-lg: rgba(25,29,34,0.16);
    --ft-inv-bg: #191D22;
    --ft-inv-surface: #232830;
    --ft-inv-text: #F2F3F5;
    --ft-inv-muted: #A3A9B2;
    --ft-inv-line: #323840;
    --ft-inv-accent: #C8F52B;
    --ft-inv-fb: #5B9AF7;
    --ft-inv-tiktok: #38E0D0;
    --ft-ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23626970' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    --ft-ico-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23626970' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    color-scheme: light;
}
/* Pasek przewijania i kontrolki przeglądarki rysuje element html. */
html:has(> body.ft-paleta-jasna){
    color-scheme: light;
}

/* Paleta Astry podąża za tokenami, więc treść spoza sekcji (wpisy, strony
   bez Section Managera, przyciski motywu) zmienia się razem z resztą. */
:root{
    --ast-global-color-0: var(--ft-accent);
    --ast-global-color-1: var(--ft-accent-hover);
    --ast-global-color-2: var(--ft-text);
    --ast-global-color-3: var(--ft-text);
    --ast-global-color-4: var(--ft-bg);
    --ast-global-color-5: var(--ft-muted);
    --ast-global-color-6: var(--ft-line);
    --ast-global-color-7: var(--ft-surface);
    --ast-global-color-8: var(--ft-surface-2);
}
body.ft-paleta-jasna{
    --ast-global-color-0: var(--ft-accent-text);
    --ast-global-color-1: var(--ft-text);
    --ast-global-color-2: var(--ft-text);
    --ast-global-color-3: var(--ft-text);
    --ast-global-color-4: var(--ft-bg);
    --ast-global-color-5: var(--ft-muted);
    --ast-global-color-6: var(--ft-line);
    --ast-global-color-7: var(--ft-surface);
    --ast-global-color-8: var(--ft-surface-2);
    /* Zmienne pochodne Astra wylicza w :root z własnych kolorów, więc nie
       podążają za klasą na body. Tu przestawiamy je jawnie. */
    --ast-border-color: var(--ft-line, #E0E4DE);
    --ast-global-color-primary: var(--ft-bg, #F7F8F5);
    --ast-global-color-secondary: var(--ft-surface, #FFFFFF);
    --ast-global-color-alternate-background: var(--ft-surface-2, #F1F3EE);
    --ast-global-color-subtle-background: var(--ft-surface-2, #F1F3EE);
}

/* Tło strony z tokenu, żeby przełączenie palety nie zależało od ustawienia
   tła w Customizerze. Selektor z klasą body wygrywa z regułą Astry bez !important. */
body.ft-paleta-ciemna,
body.ft-paleta-jasna{
    background-color: var(--ft-bg, #F7F8F5);
    color: var(--ft-text, #191D22);
}
body.ft-paleta-ciemna ::selection,
body.ft-paleta-jasna ::selection{
    background: var(--ft-accent, #C8F52B);
    color: var(--ft-accent-ink, #191D22);
}

/* Pola formularzy motywu i WordPressa (wyszukiwarka, komentarze, formularze
   poza wtyczkami F-Tech). Klasa palety na body daje regułę mocniejszą od
   ogólnych selektorów Astry bez !important, a :where() trzyma ją słabszą
   od reguł wtyczek i sekcji, więc pole celowo większe niż 16 px zostaje
   większe. Wtyczki i sekcje ustawiają swoje pola na tym samym tokenie.
   Pola wyboru i ukryte bez zmian. */
body.ft-paleta-ciemna :where(input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], select, textarea),
body.ft-paleta-jasna :where(input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], select, textarea){
    font-size: var(--ft-fs-field, 16px);
}


/* =====================================================================
   1.1.0: KOMPONENTY PANELU
   Każdy komponent ma reset u siebie (box-sizing, marginesy), bo trafia
   zarówno do treści Astry, jak i do nagłówka poza .entry-content.
   Linki mają podwójny selektor (.entry-content a.X, .X), bo Astra
   styluje .entry-content a.
   ===================================================================== */

/* --- ft-avatar: inicjały na limonce w zaokrąglonym kwadracie --- */
.ft-avatar{
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; border-radius: var(--ft-r-m, 10px);
    background: var(--ft-accent, #C8F52B); color: var(--ft-accent-ink, #191D22);
    font-family: var(--ft-font-display, "Archivo", sans-serif); font-weight: 800;
    font-size: 0.92rem; letter-spacing: 0.02em; line-height: 1;
    text-transform: uppercase; user-select: none;
}
.ft-avatar--sm{ width: 30px; height: 30px; border-radius: 8px; font-size: 0.74rem; }
.ft-avatar--lg{ width: 56px; height: 56px; border-radius: 14px; font-size: 1.2rem; }

/* --- ft-menu: karta menu z grupami (menu użytkownika, menu „Więcej”) --- */
.ft-menu, .ft-menu *, .ft-menu *::before, .ft-menu *::after{ box-sizing: border-box; }
.ft-menu{
    min-width: 264px; padding: 0.45rem;
    background: var(--ft-surface, #FFFFFF); color: var(--ft-text, #191D22);
    border: 1px solid var(--ft-line, #E0E4DE); border-radius: 12px;
    box-shadow: 0 1px 2px var(--ft-shadow-sm, rgba(25,29,34,0.06)), 0 22px 48px -18px var(--ft-shadow-lg, rgba(25,29,34,0.16));
    font-family: var(--ft-font-body, "Instrument Sans", sans-serif);
    -webkit-font-smoothing: antialiased;
}
.ft-menu__head{
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0.6rem 0.75rem; margin: 0 0 0.3rem;
    border-bottom: 1px solid var(--ft-line, #E0E4DE);
}
.ft-menu__who{ display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; }
.ft-menu__name{
    margin: 0; color: var(--ft-text, #191D22); font-weight: 600; font-size: 0.95rem; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ft-menu__mail{
    margin: 0; color: var(--ft-muted, #626970); font-size: 0.8rem; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ft-menu__group{ padding: 0.25rem 0; }
.ft-menu__group + .ft-menu__group{ border-top: 1px solid var(--ft-line, #E0E4DE); margin-top: 0.2rem; padding-top: 0.45rem; }
/* Etykieta grupy: eyebrow z rombem, ta sama metryka co w sekcjach */
p.ft-menu__label, .ft-menu__label{
    display: flex; align-items: center; gap: 0.45rem;
    margin: 0; padding: 0.35rem 0.6rem 0.3rem;
    color: var(--ft-muted, #626970); font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase;
}
.ft-menu__label::before{
    content: ""; width: 6px; height: 6px; flex: none;
    background: var(--ft-accent, #C8F52B); transform: rotate(45deg);
}
.entry-content a.ft-menu__item, a.ft-menu__item, button.ft-menu__item, .ft-menu__item{
    display: flex; align-items: center; gap: 0.7rem; width: 100%;
    min-height: 42px; padding: 0.5rem 0.6rem; margin: 0;
    border: 0; border-radius: 8px; background: transparent; box-shadow: none;
    color: var(--ft-text-2, #474D55); font: inherit; font-size: 0.92rem; font-weight: 500;
    line-height: 1.25; text-align: left; text-decoration: none; cursor: pointer;
    transition: background-color var(--ft-dur, 0.18s) var(--ft-ease, ease), color var(--ft-dur, 0.18s) var(--ft-ease, ease);
}
.entry-content a.ft-menu__item:hover, a.ft-menu__item:hover, button.ft-menu__item:hover{
    background: var(--ft-hover-tint, rgba(25,29,34,0.04)); color: var(--ft-text, #191D22); text-decoration: none;
}
.ft-menu__item:focus-visible{ outline: 2px solid var(--ft-focus, #4E6A00); outline-offset: 1px; }
.ft-menu__item[aria-current="page"], .ft-menu__item.is-current{
    background: var(--ft-accent-soft, #EEF7D2); color: var(--ft-text, #191D22);
    box-shadow: inset 3px 0 0 var(--ft-accent-line, #6A8700);
}
.ft-menu__ico{ flex: none; width: 18px; height: 18px; color: var(--ft-muted, #626970); }
.ft-menu__item:hover .ft-menu__ico, .ft-menu__item[aria-current="page"] .ft-menu__ico{ color: var(--ft-text, #191D22); }
.ft-menu__txt{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Licznik: grafitowa pigułka, czytelna na każdym tle karty */
.ft-menu__count, .ft-count{
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px;
    background: var(--ft-inv-bg, #191D22); color: var(--ft-inv-text, #F2F3F5);
    font-size: 0.7rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.ft-count--soft{ background: var(--ft-surface-3, #E8EBE4); color: var(--ft-text-2, #474D55); }
.entry-content a.ft-menu__item--quiet, a.ft-menu__item--quiet, button.ft-menu__item--quiet, .ft-menu__item--quiet{ color: var(--ft-muted, #626970); }
.entry-content a.ft-menu__item--quiet:hover, a.ft-menu__item--quiet:hover, button.ft-menu__item--quiet:hover{
    color: var(--ft-danger, #B42318); background: var(--ft-danger-soft, #FDECEA);
}
.ft-menu__item--quiet:hover .ft-menu__ico{ color: var(--ft-danger, #B42318); }

/* --- ft-pills: filtry statusu z licznikami --- */
.ft-pills{
    display: flex; gap: 0.4rem; margin: 0; padding: 0 0 2px; list-style: none;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ft-pills::-webkit-scrollbar{ display: none; }
.entry-content a.ft-pill, a.ft-pill, button.ft-pill, .ft-pill{
    box-sizing: border-box;
    display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
    min-height: 36px; padding: 0 0.85rem; margin: 0;
    border: 1px solid var(--ft-line-2, #CDD2CA); border-radius: 999px;
    background: var(--ft-surface, #FFFFFF); box-shadow: none;
    color: var(--ft-text-2, #474D55); font: inherit; font-size: 0.86rem; font-weight: 600;
    line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: border-color var(--ft-dur, 0.18s) var(--ft-ease, ease), background-color var(--ft-dur, 0.18s) var(--ft-ease, ease), color var(--ft-dur, 0.18s) var(--ft-ease, ease);
}
.entry-content a.ft-pill:hover, a.ft-pill:hover, button.ft-pill:hover{ border-color: var(--ft-line-ui, #7E867C); color: var(--ft-text, #191D22); text-decoration: none; }
.ft-pill:focus-visible{ outline: 2px solid var(--ft-focus, #4E6A00); outline-offset: 2px; }
.ft-pill__n{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--ft-surface-3, #E8EBE4); color: var(--ft-text-2, #474D55);
    font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Wybrana: grafitowa wyspa, licznik w akcencie wyspy */
.entry-content a.ft-pill[aria-current], a.ft-pill[aria-current], .ft-pill[aria-pressed="true"], .ft-pill.is-on{
    background: var(--ft-inv-bg, #191D22); border-color: var(--ft-inv-bg, #191D22); color: var(--ft-inv-text, #F2F3F5);
}
.ft-pill[aria-current] .ft-pill__n, .ft-pill[aria-pressed="true"] .ft-pill__n, .ft-pill.is-on .ft-pill__n{
    background: var(--ft-inv-surface, #232830); color: var(--ft-inv-accent, #C8F52B);
}
.ft-pill--zero:not([aria-current]):not(.is-on){ color: var(--ft-muted, #626970); }

/* --- ft-status: odznaka stanu --- */
.ft-status{
    box-sizing: border-box;
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 24px; padding: 0 0.55rem; border-radius: var(--ft-r-s, 6px);
    background: var(--ft-surface-2, #F1F3EE); color: var(--ft-text-2, #474D55);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    line-height: 1; white-space: nowrap;
}
.ft-status::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ft-status--ok{ background: var(--ft-accent-soft, #EEF7D2); color: var(--ft-accent-text, #4E6A00); }
.ft-status--wait{ background: var(--ft-warning-soft, #FBF1DC); color: var(--ft-warning, #8A5A00); }
.ft-status--bad{ background: var(--ft-danger-soft, #FDECEA); color: var(--ft-danger, #B42318); }
.ft-status--mute{ background: var(--ft-surface-2, #F1F3EE); color: var(--ft-muted, #626970); }
.ft-status--pay{ background: var(--ft-accent, #C8F52B); color: var(--ft-accent-ink, #191D22); }

/* --- ft-switch: przełącznik na <input type="checkbox" role="switch"> --- */
.ft-switch{
    box-sizing: border-box;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    margin: 0; padding: 0.85rem 0; cursor: pointer;
}
.ft-switch + .ft-switch{ border-top: 1px solid var(--ft-line, #E0E4DE); }
.ft-switch__txt{ display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ft-switch__title{ color: var(--ft-text, #191D22); font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.ft-switch__desc{ color: var(--ft-muted, #626970); font-size: 0.84rem; line-height: 1.5; }
.ft-switch input[type="checkbox"]{
    -webkit-appearance: none; appearance: none; flex: none; position: relative;
    width: 44px; height: 26px; margin: 0.1rem 0 0; padding: 0;
    border: 1px solid var(--ft-line-ui, #7E867C); border-radius: 999px;
    background: var(--ft-surface-3, #E8EBE4); cursor: pointer;
    transition: background-color var(--ft-dur, 0.18s) var(--ft-ease, ease), border-color var(--ft-dur, 0.18s) var(--ft-ease, ease);
}
.ft-switch input[type="checkbox"]::after{
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--ft-surface, #FFFFFF); box-shadow: 0 1px 3px var(--ft-shadow-md, rgba(25,29,34,0.10));
    transition: transform var(--ft-dur, 0.18s) var(--ft-ease, ease), background-color var(--ft-dur, 0.18s) var(--ft-ease, ease);
}
.ft-switch input[type="checkbox"]:checked{ background: var(--ft-accent, #C8F52B); border-color: var(--ft-accent-line, #6A8700); }
.ft-switch input[type="checkbox"]:checked::after{ transform: translateX(18px); background: var(--ft-accent-ink, #191D22); }
.ft-switch input[type="checkbox"]:focus-visible{ outline: 2px solid var(--ft-focus, #4E6A00); outline-offset: 3px; }
.ft-switch input[type="checkbox"]:disabled{ opacity: 0.5; cursor: not-allowed; }

/* --- ft-empty: pusty stan, jedno zdanie i jedna akcja --- */
.ft-empty{
    box-sizing: border-box;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
    margin: 0; padding: 1.5rem 1.4rem;
    border: 1px dashed var(--ft-line-2, #CDD2CA); border-radius: var(--ft-r-m, 10px);
    background: var(--ft-surface, #FFFFFF);
}
.ft-empty .ft-empty__title{ margin: 0; color: var(--ft-text, #191D22); font-weight: 600; font-size: 1rem; line-height: 1.4; }
.ft-empty .ft-empty__text{ margin: 0; color: var(--ft-muted, #626970); font-size: 0.9rem; line-height: 1.6; max-width: 60ch; }

/* --- ft-dialog: okno potwierdzenia na natywnym <dialog> --- */
.ft-dialog{
    box-sizing: border-box;
    width: min(440px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
    margin: auto; padding: 1.5rem 1.4rem 1.25rem;
    border: 1px solid var(--ft-line, #E0E4DE); border-radius: 14px;
    background: var(--ft-surface, #FFFFFF); color: var(--ft-text, #191D22);
    box-shadow: 0 30px 70px -20px var(--ft-shadow-lg, rgba(25,29,34,0.16));
    font-family: var(--ft-font-body, "Instrument Sans", sans-serif);
}
.ft-dialog::backdrop{ background: var(--ft-scrim, rgba(25,29,34,0.42)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ft-dialog *, .ft-dialog *::before, .ft-dialog *::after{ box-sizing: border-box; }
.ft-dialog .ft-dialog__title{
    margin: 0 0 0.6rem; color: var(--ft-text, #191D22);
    font-family: var(--ft-font-display, "Archivo", sans-serif); font-size: 1.15rem; font-weight: 700;
    letter-spacing: -0.01em; line-height: 1.3;
}
.ft-dialog .ft-dialog__text{ margin: 0 0 0.6rem; color: var(--ft-text-2, #474D55); font-size: 0.92rem; line-height: 1.6; }
.ft-dialog .ft-dialog__body{ margin: 0 0 1rem; }
.ft-dialog__actions{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 1.1rem; }
.ft-dialog--danger .ft-dialog__title::before{
    content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 0.55rem 0.15rem 0;
    background: var(--ft-danger, #B42318); transform: rotate(45deg);
}
@media (max-width: 599px){
    .ft-dialog{ width: 100%; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
    .ft-dialog__actions{ flex-direction: column-reverse; }
    .ft-dialog__actions > *{ width: 100%; }
}

/* --- ft-lifebar: pasek ważności (sygnatura panelu, rodzina paska rat) --- */
.ft-lifebar{ box-sizing: border-box; display: grid; gap: 0.35rem; min-width: 0; }
.ft-lifebar__row{
    display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
    color: var(--ft-muted, #626970); font-size: 0.78rem; line-height: 1.3;
}
.ft-lifebar__row b{ color: var(--ft-text, #191D22); font-weight: 600; }
.ft-lifebar__track{
    position: relative; height: 6px; border-radius: 999px; overflow: hidden;
    background: var(--ft-surface-3, #E8EBE4);
}
.ft-lifebar__fill{
    position: absolute; inset: 0 auto 0 0; width: var(--ft-p, 0%);
    border-radius: inherit; background: var(--ft-accent, #C8F52B);
    box-shadow: inset -1px 0 0 var(--ft-accent-line, #6A8700);
}
.ft-lifebar--warn .ft-lifebar__fill{ background: var(--ft-warning, #8A5A00); box-shadow: none; }
.ft-lifebar--warn .ft-lifebar__row b{ color: var(--ft-warning, #8A5A00); }
.ft-lifebar--bad .ft-lifebar__fill{ background: var(--ft-danger, #B42318); box-shadow: none; }
.ft-lifebar--bad .ft-lifebar__row b{ color: var(--ft-danger, #B42318); }
.ft-lifebar--mute .ft-lifebar__fill{ background: var(--ft-line-ui, #7E867C); box-shadow: none; }
@media (prefers-reduced-motion: no-preference){
    .ft-lifebar__fill{ animation: ft-lifebar-in 0.7s var(--ft-ease, ease) both; transform-origin: left center; }
    @keyframes ft-lifebar-in{ from{ transform: scaleX(0); } to{ transform: none; } }
}

/* --- ft-stats: wiersz liczb oddzielonych liniami (bez kafli z ikonami) --- */
ul.ft-stats{
    box-sizing: border-box;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin: 0; padding: 0; list-style: none;
    border-top: 1px solid var(--ft-line, #E0E4DE); border-bottom: 1px solid var(--ft-line, #E0E4DE);
}
li.ft-stat{ display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 1rem 1.1rem; min-width: 0; }
.ft-stat + .ft-stat{ border-left: 1px solid var(--ft-line, #E0E4DE); }
.ft-stat__v{
    color: var(--ft-accent-strong, #191D22);
    font-family: var(--ft-font-display, "Archivo", sans-serif); font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.ft-stat__l{ color: var(--ft-muted, #626970); font-size: 0.8rem; line-height: 1.4; }
@media (max-width: 599px){
    .ft-stats{ grid-template-columns: repeat(2, 1fr); }
    .ft-stat:nth-child(odd){ border-left: 0; }
    .ft-stat:nth-child(n+3){ border-top: 1px solid var(--ft-line, #E0E4DE); }
}

@media (prefers-reduced-motion: reduce){
    .ft-menu *, .ft-pill, .ft-switch input, .ft-switch input::after, .ft-lifebar__fill{
        transition-duration: 0.01ms !important; animation: none !important;
    }
}